From 344eedfde5cdca687a366ac45ac28720044d55ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 3 Feb 2021 10:30:07 +0100
Subject: [PATCH] MOBILE-3631 theme: Reorganize theme files

---
 angular.json                                  |   2 +-
 .../features/grades/pages/course/course.scss  |   2 +-
 src/theme/breakpoints.scss                    |  13 -
 src/theme/custom.scss                         |   4 -
 src/theme/format-text.scss                    |   2 -
 src/theme/globals.custom.scss                 |   5 +
 src/theme/globals.mixins.ionic.scss           | 520 +++++++++++++
 src/theme/globals.mixins.scss                 | 187 +++++
 src/theme/globals.scss                        |  10 +
 src/theme/globals.variables.scss              |  66 ++
 src/theme/mixins.scss                         | 697 ------------------
 src/theme/{app.scss => theme.base.scss}       |  40 +-
 src/theme/theme.custom.scss                   |  21 +
 src/theme/theme.dark.scss                     |  87 +++
 .../{variables.scss => theme.light.scss}      | 163 ++--
 src/theme/{global.scss => theme.scss}         |  12 +-
 16 files changed, 972 insertions(+), 859 deletions(-)
 delete mode 100644 src/theme/breakpoints.scss
 delete mode 100644 src/theme/custom.scss
 create mode 100644 src/theme/globals.custom.scss
 create mode 100644 src/theme/globals.mixins.ionic.scss
 create mode 100644 src/theme/globals.mixins.scss
 create mode 100644 src/theme/globals.scss
 create mode 100644 src/theme/globals.variables.scss
 delete mode 100644 src/theme/mixins.scss
 rename src/theme/{app.scss => theme.base.scss} (94%)
 create mode 100644 src/theme/theme.custom.scss
 create mode 100644 src/theme/theme.dark.scss
 rename src/theme/{variables.scss => theme.light.scss} (66%)
 rename src/theme/{global.scss => theme.scss} (83%)

diff --git a/angular.json b/angular.json
index 7caa291e1..bccd90c01 100644
--- a/angular.json
+++ b/angular.json
@@ -33,7 +33,7 @@
             ],
             "styles": [
               {
-                "input": "src/theme/global.scss"
+                "input": "src/theme/theme.scss"
               }
             ],
             "scripts": [],
diff --git a/src/core/features/grades/pages/course/course.scss b/src/core/features/grades/pages/course/course.scss
index fdad1dc2b..107b3972b 100644
--- a/src/core/features/grades/pages/course/course.scss
+++ b/src/core/features/grades/pages/course/course.scss
@@ -1,4 +1,4 @@
-@import "~theme/breakpoints";
+@import "~theme/globals";
 
 // @todo darkmode
 // @todo RTL layout
diff --git a/src/theme/breakpoints.scss b/src/theme/breakpoints.scss
deleted file mode 100644
index 48953000f..000000000
--- a/src/theme/breakpoints.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-/*
- * Layout Breakpoints
- *
- * https://ionicframework.com/docs/layout/grid#default-breakpoints
- */
-
- $breakpoint-xs: 0px;
- $breakpoint-sm: 576px;
- $breakpoint-md: 768px;
- $breakpoint-lg: 992px;
- $breakpoint-xl: 1200px;
-
- $breakpoint-tablet: $breakpoint-lg;
diff --git a/src/theme/custom.scss b/src/theme/custom.scss
deleted file mode 100644
index 38d41d5e4..000000000
--- a/src/theme/custom.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-// Place here custom styles.
-:root {
-
-}
diff --git a/src/theme/format-text.scss b/src/theme/format-text.scss
index 149e2e807..d8a8c498a 100644
--- a/src/theme/format-text.scss
+++ b/src/theme/format-text.scss
@@ -1,5 +1,3 @@
-@import "./mixins.scss";
-
 /** Format Text - Show more styles. */
 /** Styles of elements inside the directive should be placed in format-text.scss */
 core-format-text {
diff --git a/src/theme/globals.custom.scss b/src/theme/globals.custom.scss
new file mode 100644
index 000000000..5724c1a73
--- /dev/null
+++ b/src/theme/globals.custom.scss
@@ -0,0 +1,5 @@
+/*
+ * App Custom App variables SCSS
+ * ----------------------------------------------------------------------------
+ * Place here all custom app variables.
+ */
diff --git a/src/theme/globals.mixins.ionic.scss b/src/theme/globals.mixins.ionic.scss
new file mode 100644
index 000000000..73678af2a
--- /dev/null
+++ b/src/theme/globals.mixins.ionic.scss
@@ -0,0 +1,520 @@
+/*
+ * Imported ionic mixins for SCSS
+ * ----------------------------------------------------------------------------
+ * Place here our custom mixins.
+ * Extracted from ionic.mixins.scss
+ * https://github.com/ionic-team/ionic-framework/blob/master/core/src/themes/ionic.mixins.scss
+ */
+
+@mixin input-cover() {
+    @include position(0, null, null, 0);
+    @include margin(0);
+
+    position: absolute;
+
+    width: 100%;
+    height: 100%;
+
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+
+    appearance: none;
+    outline: none;
+
+    &::-moz-focus-inner {
+        border: 0;
+    }
+}
+
+@mixin text-inherit() {
+    font-family: inherit;
+    font-size: inherit;
+    font-style: inherit;
+    font-weight: inherit;
+    letter-spacing: inherit;
+    text-decoration: inherit;
+    text-indent: inherit;
+    text-overflow: inherit;
+    text-transform: inherit;
+    text-align: inherit;
+    white-space: inherit;
+    color: inherit;
+}
+
+@mixin button-state() {
+    @include position(0, 0, 0, 0);
+
+    position: absolute;
+
+    content: "";
+
+    opacity: 0;
+}
+
+// Font smoothing
+// --------------------------------------------------
+
+@mixin font-smoothing() {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+}
+
+// Get the key from a map based on the index
+@function index-to-key($map, $index) {
+    $keys: map-keys($map);
+
+    @return nth($keys, $index);
+}
+
+
+// Breakpoint Mixins
+// ---------------------------------------------------------------------------------
+
+// Breakpoint viewport sizes and media queries.
+//
+// Breakpoints are defined as a map of (name: minimum width), order from small to large:
+//
+//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
+//
+// The map defined in the `$screen-breakpoints` global variable is used as the `$breakpoints` argument by default.
+
+// ---------------------------------------------------------------------------------
+
+// Minimum breakpoint width. Null for the smallest (first) breakpoint.
+//
+//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    576px
+@function breakpoint-min($name, $breakpoints: $screen-breakpoints) {
+    $min: map-get($breakpoints, $name);
+
+    @return if($name != index-to-key($breakpoints, 1), $min, null);
+}
+
+// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
+// Useful for making responsive utilities.
+//
+//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    ""  (Returns a blank string)
+//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    "-sm"
+@function breakpoint-infix($name, $breakpoints: $screen-breakpoints) {
+    @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
+}
+
+// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+// Makes the @content apply to the given breakpoint and wider.
+@mixin media-breakpoint-up($name, $breakpoints: $screen-breakpoints) {
+    $min: breakpoint-min($name, $breakpoints);
+    @if $min {
+        @media (min-width: $min) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}
+
+// Name of the next breakpoint, or null for the last breakpoint.
+//
+//    >> breakpoint-next(sm)
+//    md
+//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    md
+//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
+//    md
+@function breakpoint-next($name, $breakpoints: $screen-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+    $n: index($breakpoint-names, $name);
+    @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+}
+
+// Maximum breakpoint width. Null for the smallest (first) breakpoint.
+// The maximum value is reduced by 0.02px to work around the limitations of
+// `min-` and `max-` prefixes and viewports with fractional widths.
+//
+// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
+// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.	// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
+// See https://bugs.webkit.org/show_bug.cgi?id=178261	// See https://bugs.webkit.org/show_bug.cgi?id=178261
+//
+//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    767.98px
+@function breakpoint-max($name, $breakpoints: $screen-breakpoints) {
+    $max: map-get($breakpoints, $name);
+    @return if($max and $max > 0, $max - .02, null);
+}
+
+// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint and narrower.
+@mixin media-breakpoint-down($name, $breakpoints: $screen-breakpoints) {
+    $max: breakpoint-max($name, $breakpoints);
+    @if $max {
+        @media (max-width: $max) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}
+
+
+// Text Direction - ltr / rtl
+//
+// CSS defaults to use the ltr css, and adds [dir=rtl] selectors
+// to override ltr defaults.
+// ----------------------------------------------------------
+
+@mixin multi-dir() {
+    @content;
+
+    // $root: #{&};
+    // @at-root [dir] {
+        //   #{$root} {
+            //     @content;
+            //   }
+            // }
+        }
+
+        @mixin rtl() {
+            $root: #{&};
+
+            @at-root [dir=rtl] {
+                #{$root} {
+                    @content;
+                }
+            }
+        }
+
+        @mixin ltr() {
+            @content;
+        }
+
+
+        // SVG Background Image Mixin
+        // @param {string} $svg
+        // ----------------------------------------------------------
+        @mixin svg-background-image($svg, $flip-rtl: false) {
+            $url: url-encode($svg);
+            $viewBox: str-split(str-extract($svg, "viewBox='", "'"), " ");
+
+            @if $flip-rtl != true or $viewBox == null {
+                @include multi-dir() {
+                    background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
+                }
+            } @else {
+                $transform: "transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'";
+                $flipped-url: $svg;
+                $flipped-url: str-replace($flipped-url, "<path", "<path #{$transform}");
+                $flipped-url: str-replace($flipped-url, "<line", "<line #{$transform}");
+                $flipped-url: str-replace($flipped-url, "<polygon", "<polygon #{$transform}");
+                $flipped-url: url-encode($flipped-url);
+
+                @include ltr () {
+                    background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
+                }
+                @include rtl() {
+                    background-image: url("data:image/svg+xml;charset=utf-8,#{$flipped-url}");
+                }
+            }
+        }
+
+        // Add property horizontal
+        // @param {string} $start
+        // @param {string} $end
+        // ----------------------------------------------------------
+        @mixin property-horizontal($prop, $start, $end: $start) {
+            @if $start == 0 and $end == 0 {
+                #{$prop}-left: $start;
+                #{$prop}-right: $end;
+
+            } @else {
+                #{$prop}-left: $start;
+                #{$prop}-right: $end;
+
+                @at-root {
+                    @supports ((margin-inline-start: 0) or (-webkit-margin-start: 0)) {
+                        & {
+                            @if $start != null {
+                                #{$prop}-left: unset;
+                            }
+                            @if $end != null {
+                                #{$prop}-right: unset;
+                            }
+
+                            -webkit-#{$prop}-start: $start;
+                            #{$prop}-inline-start: $start;
+                            -webkit-#{$prop}-end: $end;
+                            #{$prop}-inline-end: $end;
+                        }
+                    }
+                }
+            }
+        }
+
+        // Add property for all directions
+        // @param {string} $prop
+        // @param {string} $top
+        // @param {string} $end
+        // @param {string} $bottom
+        // @param {string} $start
+        // @param {boolean} $content include content or use default
+        // ----------------------------------------------------------
+        @mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {
+            @include property-horizontal($prop, $start, $end);
+            #{$prop}-top: $top;
+            #{$prop}-bottom: $bottom;
+        }
+
+        // Add padding horizontal
+        // @param {string} $start
+        // @param {string} $end
+        // ----------------------------------------------------------
+        @mixin padding-horizontal($start, $end: $start) {
+            @include property-horizontal(padding, $start, $end);
+        }
+
+        // Add padding for all directions
+        // @param {string} $top
+        // @param {string} $end
+        // @param {string} $bottom
+        // @param {string} $start
+        // ----------------------------------------------------------
+        @mixin padding($top, $end: $top, $bottom: $top, $start: $end) {
+            @include property(padding, $top, $end, $bottom, $start);
+        }
+
+        // Add margin horizontal
+        // @param {string} $start
+        // @param {string} $end
+        // ----------------------------------------------------------
+        @mixin margin-horizontal($start, $end: $start) {
+            @include property-horizontal(margin, $start, $end);
+        }
+
+        // Add margin for all directions
+        // @param {string} $top
+        // @param {string} $end
+        // @param {string} $bottom
+        // @param {string} $start
+        // ----------------------------------------------------------
+        @mixin margin($top, $end: $top, $bottom: $top, $start: $end) {
+            @include property(margin, $top, $end, $bottom, $start);
+        }
+
+        // Add position horizontal
+        // @param {string} $start - amount to position start
+        // @param {string} $end - amount to left: 0; end
+        // ----------------------------------------------------------
+        @mixin position-horizontal($start: null, $end: null) {
+            @if $start == $end {
+                @include multi-dir() {
+                    left: $start;
+                    right: $end;
+                }
+            } @else {
+                @include ltr() {
+                    left: $start;
+                    right: $end;
+                }
+                @include rtl() {
+                    left: unset;
+                    right: unset;
+
+                    left: $end;
+                    right: $start;
+                }
+            }
+        }
+
+        // Add position for all directions
+        // @param {string} $top
+        // @param {string} $end
+        // @param {string} $bottom
+        // @param {string} $start
+        // ----------------------------------------------------------
+        @mixin position($top: null, $end: null, $bottom: null, $start: null) {
+            @include position-horizontal($start, $end);
+            top: $top;
+            bottom: $bottom;
+        }
+
+        // Add border for all directions
+        // @param {string} $top
+        // @param {string} $end
+        // @param {string} $bottom
+        // @param {string} $start
+        // ----------------------------------------------------------
+        @mixin border($top, $end: $top, $bottom: $top, $start: $end) {
+            @include property(border, $top, $end, $bottom, $start);
+        }
+
+        // Add border radius for all directions
+        // @param {string} $top-start
+        // @param {string} $top-end
+        // @param {string} $bottom-end
+        // @param {string} $bottom-start
+        // ----------------------------------------------------------
+        @mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) {
+            @if $top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start {
+                @include multi-dir() {
+                    border-radius: $top-start;
+                }
+            } @else {
+                @include ltr() {
+                    border-top-left-radius: $top-start;
+                    border-top-right-radius: $top-end;
+                    border-bottom-right-radius: $bottom-end;
+                    border-bottom-left-radius: $bottom-start;
+                }
+
+                @include rtl() {
+                    border-top-left-radius: $top-end;
+                    border-top-right-radius: $top-start;
+                    border-bottom-right-radius: $bottom-start;
+                    border-bottom-left-radius: $bottom-end;
+                }
+            }
+        }
+
+        // Add direction for all directions
+        // @param {string} $dir - Direction on LTR
+        @mixin direction($dir) {
+            $other-dir: null;
+
+            @if $dir == ltr {
+                $other-dir: rtl;
+            } @else {
+                $other-dir: ltr;
+            }
+
+            @include ltr() {
+                direction: $dir;
+            }
+            @include rtl() {
+                direction: $other-dir;
+            }
+        }
+
+        // Add float for all directions
+        // @param {string} $side
+        // @param {string} $decorator - !important
+        @mixin float($side, $decorator: null) {
+            @if $side == start {
+                @include ltr() {
+                    float: left $decorator;
+                }
+                @include rtl() {
+                    float: right $decorator;
+                }
+            } @else if $side == end {
+                @include ltr() {
+                    float: right $decorator;
+                }
+                @include rtl() {
+                    float: left $decorator;
+                }
+            } @else {
+                @include multi-dir() {
+                    float: $side $decorator;
+                }
+            }
+        }
+
+        @mixin background-position($horizontal, $horizontal-amount: null, $vertical: null, $vertical-amount: null) {
+            @if $horizontal == start or $horizontal == end {
+                $horizontal-ltr: null;
+                $horizontal-rtl: null;
+                @if $horizontal == start {
+                    $horizontal-ltr: left;
+                    $horizontal-rtl: right;
+                } @else {
+                    $horizontal-ltr: right;
+                    $horizontal-rtl: left;
+                }
+
+                @include ltr() {
+                    background-position: $horizontal-ltr $horizontal-amount $vertical $vertical-amount;
+                }
+                @include rtl() {
+                    background-position: $horizontal-rtl $horizontal-amount $vertical $vertical-amount;
+                }
+            } @else {
+                @include multi-dir() {
+                    background-position: $horizontal $horizontal-amount $vertical $vertical-amount;
+                }
+            }
+        }
+
+        @mixin transform-origin($x-axis, $y-axis: null) {
+            @if $x-axis == start {
+                @include ltr() {
+                    transform-origin: left $y-axis;
+                }
+                @include rtl() {
+                    transform-origin: right $y-axis;
+                }
+            } @else if $x-axis == end {
+                @include ltr() {
+                    transform-origin: right $y-axis;
+                }
+                @include rtl() {
+                    transform-origin: left $y-axis;
+                }
+            } @else if $x-axis == left or $x-axis == right {
+                @include multi-dir() {
+                    transform-origin: $x-axis $y-axis;
+                }
+            } @else {
+                @include ltr() {
+                    transform-origin: $x-axis $y-axis;
+                }
+                @include rtl() {
+                    transform-origin: calc(100% - #{$x-axis}) $y-axis;
+                }
+            }
+        }
+
+        // Add transform for all directions
+        // @param {string} $transforms - comma separated list of transforms
+        @mixin transform($transforms...) {
+            $extra: null;
+
+            $x: null;
+            $ltr-translate: null;
+            $rtl-translate: null;
+
+            @each $transform in $transforms {
+                @if (str-index($transform, translate3d)) {
+                    $transform: str-replace($transform, 'translate3d(');
+                    $transform: str-replace($transform, ')');
+
+                    $coordinates: str-split($transform, ',');
+
+                    $x: nth($coordinates, 1);
+                    $y: nth($coordinates, 2);
+                    $z: nth($coordinates, 3);
+
+                    $ltr-translate: translate3d($x, $y, $z);
+                    $rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);
+                } @else {
+                    @if $extra == null {
+                        $extra: $transform;
+                    } @else {
+                        $extra: $extra $transform;
+                    }
+                }
+            }
+
+            @if $x == '0' or $x == null {
+                @include multi-dir() {
+                    transform: $ltr-translate $extra;
+                }
+            } @else {
+                @include ltr() {
+                    transform: $ltr-translate $extra;
+                }
+
+                @include rtl() {
+                    transform: $rtl-translate $extra;
+                }
+            }
+        }
diff --git a/src/theme/globals.mixins.scss b/src/theme/globals.mixins.scss
new file mode 100644
index 000000000..21c70a4eb
--- /dev/null
+++ b/src/theme/globals.mixins.scss
@@ -0,0 +1,187 @@
+/*
+ * App custom mixins for SCSS
+ * ----------------------------------------------------------------------------
+ * Place here our custom mixins.
+ */
+
+@mixin core-transition($where: all, $time: 500ms) {
+    -webkit-transition: $where $time ease-in-out;
+    -moz-transition: $where $time ease-in-out;
+    -ms-transition: $where $time ease-in-out;
+    -o-transition: $where $time ease-in-out;
+    transition: $where $time ease-in-out;
+}
+
+@mixin push-arrow-color($color: dedede, $flip-rtl: false) {
+    $svg: "<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2020'><path%20d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z'%20fill='%23#{$color}'/></svg>";
+    @if $flip-rtl != true {
+        @include multi-dir() {
+            background-image: url("data:image/svg+xml;charset=utf-8,#{$svg}");
+        }
+    } @else {
+        $flipped-svg: "<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2020'><path%20transform='translate(20,%200)%20scale(-1,%201)'%20d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z'%20fill='%23#{$color}'/></svg>";
+
+        @include ltr () {
+            background-image: url("data:image/svg+xml;charset=utf-8,#{$svg}");
+        }
+        @include rtl() {
+            background-image: url("data:image/svg+xml;charset=utf-8,#{$flipped-svg}");
+        }
+    }
+}
+
+@mixin border-start($px, $type, $color) {
+    @include ltr() {
+        border-left: $px $type $color;
+    }
+
+    @include rtl() {
+        border-right: $px $type $color;
+    }
+}
+
+
+@mixin border-end($px, $type, $color) {
+    @include ltr() {
+        border-right: $px $type $color;
+    }
+
+    @include rtl() {
+        border-left: $px $type $color;
+    }
+}
+
+@mixin safe-area-border-start($px, $type, $color) {
+    $safe-area-position: calc(constant(safe-area-inset-left) + #{$px});
+    $safe-area-position-env: calc(env(safe-area-inset-left) + #{$px});
+
+    @include border-start($px, $type, $color);
+    @media screen and (orientation: landscape) {
+        @include border-start($safe-area-position, $type, $color);
+        @include border-start($safe-area-position-env, $type, $color);
+    }
+}
+
+@mixin safe-area-border-end($px, $type, $color) {
+    $safe-area-position: calc(constant(safe-area-inset-right) + #{$px});
+    $safe-area-position-env: calc(env(safe-area-inset-right) + #{$px});
+
+    @include border-end($px, $type, $color);
+    @media screen and (orientation: landscape) {
+        @include border-end($safe-area-position, $type, $color);
+        @include border-end($safe-area-position-env, $type, $color);
+    }
+}
+
+@mixin safe-area-margin-horizontal($start, $end: $start) {
+    $safe-area-end: null;
+    $safe-area-start: null;
+    $safe-area-start-env: null;
+    $safe-area-end-env: null;
+
+    @if ($end) {
+        $safe-area-end: calc(constant(safe-area-inset-right) + #{$end});
+        $safe-area-end-env: calc(env(safe-area-inset-right) + #{$end});
+    }
+    @if ($start) {
+        $safe-area-start: calc(constant(safe-area-inset-left) + #{$start});
+        $safe-area-start-env: calc(env(safe-area-inset-left) + #{$start});
+    }
+
+    @include margin-horizontal($start, $end);
+
+    @media screen and (orientation: landscape) {
+        @include margin-horizontal($safe-area-start, $safe-area-end);
+        @include margin-horizontal($safe-area-start-env, $safe-area-end-env);
+    }
+}
+
+@mixin safe-area-padding-start($start, $end) {
+    $safe-area-start: calc(constant(safe-area-inset-left) + #{$start});
+    $safe-area-start-env: calc(env(safe-area-inset-left) + #{$start});
+
+    @include padding-horizontal($start, $end);
+
+    @media screen and (orientation: landscape) {
+        @include padding-horizontal($safe-area-start, $end);
+        @include padding-horizontal($safe-area-start-env, $end);
+    }
+}
+
+@mixin safe-area-padding-end($start, $end) {
+    $safe-area-end: calc(constant(safe-area-inset-right) + #{$end});
+    $safe-area-end-env: calc(env(safe-area-inset-right) + #{$end});
+
+    @include padding-horizontal($start, $end);
+
+    @media screen and (orientation: landscape) {
+        @include padding-horizontal($start, $safe-area-end);
+        @include padding-horizontal($start, $safe-area-end-env);
+    }
+}
+
+@mixin safe-area-position($top: null, $end: null, $bottom: null, $start: null) {
+    @include position-horizontal($start, $end);
+    @include safe-position-horizontal($start, $end);
+    top: $top;
+    bottom: $bottom;
+}
+
+@mixin core-headings() {
+    h1 {
+        font-size: 3rem;
+    }
+    h2 {
+        font-size: 2.8rem;
+    }
+    h3 {
+        font-size: 2.6rem;
+    }
+    h4 {
+        font-size: 2.2rem;
+    }
+    h5 {
+        font-size: 1.8rem;
+    }
+    h6 {
+        font-size: 1.4rem;
+    }
+}
+
+@mixin core-as-items() {
+    .item-md.item-block > .item-inner {
+        border-bottom: 1px solid $list-md-border-color;
+    }
+
+    .item-ios.item-block > .item-inner {
+        border-bottom: $hairlines-width solid $list-ios-border-color;
+    }
+
+    &:last-child .item > .item-inner {
+        border-bottom: 0;
+    }
+}
+
+@mixin core-items() {
+    &.item-md.item-block > .item-inner {
+        border-bottom: 1px solid $list-md-border-color;
+    }
+
+    &.item-ios.item-block > .item-inner {
+        border-bottom: $hairlines-width solid $list-ios-border-color;
+    }
+
+    &.item-block:last-child > .item-inner {
+        border-bottom: 0;
+    }
+}
+
+@mixin darkmode() {
+    $root: #{&};
+
+    @at-root body.dark {
+        #{$root} {
+            @content;
+        }
+    }
+}
diff --git a/src/theme/globals.scss b/src/theme/globals.scss
new file mode 100644
index 000000000..4d3cba282
--- /dev/null
+++ b/src/theme/globals.scss
@@ -0,0 +1,10 @@
+/*
+ * App Global variables SCSS
+ * ----------------------------------------------------------------------------
+ * Place here the different files you should import to use global variables.
+ */
+
+@import "./globals.custom.scss";
+@import "./globals.variables.scss";
+@import "./globals.mixins.scss";
+@import "./globals.mixins.ionic.scss";
diff --git a/src/theme/globals.variables.scss b/src/theme/globals.variables.scss
new file mode 100644
index 000000000..0ecc0f2cd
--- /dev/null
+++ b/src/theme/globals.variables.scss
@@ -0,0 +1,66 @@
+/*
+ * App Global variables SCSS
+ * ----------------------------------------------------------------------------
+ * Place here all global variables.
+ */
+
+/*
+ * App colors
+ */
+$black:           #3a3a3a !default; // Headings, standard text.
+$gray-darker:     #626262 !default; // Text (emphasis-detail), placeholder, background.
+$gray-dark:       #9e9e9e !default; // Borders (never text).
+$gray:            #dddddd !default;
+$gray-light:      #e9e9e9 !default; // Background.
+$gray-lighter:    #f5f5f5 !default;
+$white:           #ffffff !default; // Background, reversed text.
+
+$blue:            #0064d2 !default; // Link, background.
+$turquoise:       #007982 !default; // Accent.
+$green:           #5e8100 !default; // Accent.
+$red:             #cb3d4d !default;
+$orange:          #f98012 !default; // Accent (never text).
+$yellow:          #fbad1a !default; // Accent (never text).
+$purple:          #8e24aa !default; // Accent (never text).
+
+$blue-light:      mix($blue, white, 20%) !default; // Background.
+$blue-dark:       darken($blue, 10%) !default;
+
+$turquoise-light: mix($turquoise, white, 20%) !default; // Background.
+$turquoise-dark:  darken($turquoise, 10%) !default;
+
+$green-light:     mix($green, white, 20%) !default;
+$green-dark:      darken($green, 10%) !default;
+
+$red-light:       mix($red, white, 20%) !default;
+$red-dark:        darken($red, 10%) !default;
+
+$orange-light:    lighten($orange, 10%) !default;
+
+$yellow-light:    mix($yellow, white, 20%) !default;
+$yellow-dark:     mix($yellow, black, 40%) !default;
+
+$core-color:          $orange !default;
+$core-color-light:    lighten($core-color, 10%) !default;
+$core-color-dark:     darken($core-color, 10%) !default;
+
+$text-color:          $black !default;
+$link-color:          $blue !default;
+$background-color:    $gray-light !default;
+$subdued-text-color:  $gray-darker !default;
+
+$core-online-color: #5cb85c !default;
+
+/*
+ * Layout Breakpoints
+ *
+ * https://ionicframework.com/docs/layout/grid#default-breakpoints
+ */
+
+$breakpoint-xs: 0px !default;
+$breakpoint-sm: 576px !default;
+$breakpoint-md: 768px !default;
+$breakpoint-lg: 992px !default;
+$breakpoint-xl: 1200px !default;
+
+$breakpoint-tablet: $breakpoint-lg !default;
diff --git a/src/theme/mixins.scss b/src/theme/mixins.scss
deleted file mode 100644
index 93c952668..000000000
--- a/src/theme/mixins.scss
+++ /dev/null
@@ -1,697 +0,0 @@
-// Place here our custom mixins.
-@mixin core-transition($where: all, $time: 500ms) {
-    -webkit-transition: $where $time ease-in-out;
-    -moz-transition: $where $time ease-in-out;
-    -ms-transition: $where $time ease-in-out;
-    -o-transition: $where $time ease-in-out;
-    transition: $where $time ease-in-out;
-}
-
-@mixin push-arrow-color($color: dedede, $flip-rtl: false) {
-    $svg: "<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2020'><path%20d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z'%20fill='%23#{$color}'/></svg>";
-    @if $flip-rtl != true {
-        @include multi-dir() {
-            background-image: url("data:image/svg+xml;charset=utf-8,#{$svg}");
-        }
-    } @else {
-        $flipped-svg: "<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2020'><path%20transform='translate(20,%200)%20scale(-1,%201)'%20d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z'%20fill='%23#{$color}'/></svg>";
-
-        @include ltr () {
-            background-image: url("data:image/svg+xml;charset=utf-8,#{$svg}");
-        }
-        @include rtl() {
-            background-image: url("data:image/svg+xml;charset=utf-8,#{$flipped-svg}");
-        }
-    }
-}
-
-@mixin border-start($px, $type, $color) {
-  @include ltr() {
-      border-left: $px $type $color;
-  }
-
-  @include rtl() {
-      border-right: $px $type $color;
-  }
-}
-
-
-@mixin border-end($px, $type, $color) {
-  @include ltr() {
-      border-right: $px $type $color;
-  }
-
-  @include rtl() {
-      border-left: $px $type $color;
-  }
-}
-
-@mixin safe-area-border-start($px, $type, $color) {
-  $safe-area-position: calc(constant(safe-area-inset-left) + #{$px});
-  $safe-area-position-env: calc(env(safe-area-inset-left) + #{$px});
-
-  @include border-start($px, $type, $color);
-  @media screen and (orientation: landscape) {
-    @include border-start($safe-area-position, $type, $color);
-    @include border-start($safe-area-position-env, $type, $color);
-  }
-}
-
-@mixin safe-area-border-end($px, $type, $color) {
-  $safe-area-position: calc(constant(safe-area-inset-right) + #{$px});
-  $safe-area-position-env: calc(env(safe-area-inset-right) + #{$px});
-
-  @include border-end($px, $type, $color);
-  @media screen and (orientation: landscape) {
-    @include border-end($safe-area-position, $type, $color);
-    @include border-end($safe-area-position-env, $type, $color);
-  }
-}
-
-@mixin safe-area-margin-horizontal($start, $end: $start) {
-  $safe-area-end: null;
-  $safe-area-start: null;
-  $safe-area-start-env: null;
-  $safe-area-end-env: null;
-
-  @if ($end) {
-    $safe-area-end: calc(constant(safe-area-inset-right) + #{$end});
-    $safe-area-end-env: calc(env(safe-area-inset-right) + #{$end});
-  }
-  @if ($start) {
-    $safe-area-start: calc(constant(safe-area-inset-left) + #{$start});
-    $safe-area-start-env: calc(env(safe-area-inset-left) + #{$start});
-  }
-
-  @include margin-horizontal($start, $end);
-
-  @media screen and (orientation: landscape) {
-    @include margin-horizontal($safe-area-start, $safe-area-end);
-    @include margin-horizontal($safe-area-start-env, $safe-area-end-env);
-  }
-}
-
-@mixin safe-area-padding-start($start, $end) {
-  $safe-area-start: calc(constant(safe-area-inset-left) + #{$start});
-  $safe-area-start-env: calc(env(safe-area-inset-left) + #{$start});
-
-  @include padding-horizontal($start, $end);
-
-  @media screen and (orientation: landscape) {
-    @include padding-horizontal($safe-area-start, $end);
-    @include padding-horizontal($safe-area-start-env, $end);
-  }
-}
-
-@mixin safe-area-padding-end($start, $end) {
-  $safe-area-end: calc(constant(safe-area-inset-right) + #{$end});
-  $safe-area-end-env: calc(env(safe-area-inset-right) + #{$end});
-
-  @include padding-horizontal($start, $end);
-
-  @media screen and (orientation: landscape) {
-    @include padding-horizontal($start, $safe-area-end);
-    @include padding-horizontal($start, $safe-area-end-env);
-  }
-}
-
-@mixin safe-area-position($top: null, $end: null, $bottom: null, $start: null) {
-  @include position-horizontal($start, $end);
-  @include safe-position-horizontal($start, $end);
-  top: $top;
-  bottom: $bottom;
-}
-
-@mixin core-headings() {
-  h1 {
-    font-size: 3rem;
-  }
-  h2 {
-    font-size: 2.8rem;
-  }
-  h3 {
-    font-size: 2.6rem;
-  }
-  h4 {
-    font-size: 2.2rem;
-  }
-  h5 {
-    font-size: 1.8rem;
-  }
-  h6 {
-    font-size: 1.4rem;
-  }
-}
-
-@mixin core-as-items() {
-  .item-md.item-block > .item-inner {
-    border-bottom: 1px solid $list-md-border-color;
-  }
-
-  .item-ios.item-block > .item-inner {
-    border-bottom: $hairlines-width solid $list-ios-border-color;
-  }
-
-  &:last-child .item > .item-inner {
-    border-bottom: 0;
-  }
-}
-
-@mixin core-items() {
-  &.item-md.item-block > .item-inner {
-    border-bottom: 1px solid $list-md-border-color;
-  }
-
-  &.item-ios.item-block > .item-inner {
-    border-bottom: $hairlines-width solid $list-ios-border-color;
-  }
-
-  &.item-block:last-child > .item-inner {
-    border-bottom: 0;
-  }
-}
-
-@mixin darkmode() {
-  $root: #{&};
-
-  @at-root body.dark {
-    #{$root} {
-        @content;
-    }
-  }
-}
-
-// Extracted from ionic.mixins.scss
-// https://github.com/ionic-team/ionic-framework/blob/master/core/src/themes/ionic.mixins.scss
-@mixin input-cover() {
-  @include position(0, null, null, 0);
-  @include margin(0);
-
-  position: absolute;
-
-  width: 100%;
-  height: 100%;
-
-  border: 0;
-  background: transparent;
-  cursor: pointer;
-
-  appearance: none;
-  outline: none;
-
-  &::-moz-focus-inner {
-    border: 0;
-  }
-}
-
-@mixin text-inherit() {
-  font-family: inherit;
-  font-size: inherit;
-  font-style: inherit;
-  font-weight: inherit;
-  letter-spacing: inherit;
-  text-decoration: inherit;
-  text-indent: inherit;
-  text-overflow: inherit;
-  text-transform: inherit;
-  text-align: inherit;
-  white-space: inherit;
-  color: inherit;
-}
-
-@mixin button-state() {
-  @include position(0, 0, 0, 0);
-
-  position: absolute;
-
-  content: "";
-
-  opacity: 0;
-}
-
-// Font smoothing
-// --------------------------------------------------
-
-@mixin font-smoothing() {
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-}
-
-// Get the key from a map based on the index
-@function index-to-key($map, $index) {
-  $keys: map-keys($map);
-
-  @return nth($keys, $index);
-}
-
-
-// Breakpoint Mixins
-// ---------------------------------------------------------------------------------
-
-// Breakpoint viewport sizes and media queries.
-//
-// Breakpoints are defined as a map of (name: minimum width), order from small to large:
-//
-//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
-//
-// The map defined in the `$screen-breakpoints` global variable is used as the `$breakpoints` argument by default.
-
-// ---------------------------------------------------------------------------------
-
-// Minimum breakpoint width. Null for the smallest (first) breakpoint.
-//
-//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
-//    576px
-@function breakpoint-min($name, $breakpoints: $screen-breakpoints) {
-  $min: map-get($breakpoints, $name);
-
-  @return if($name != index-to-key($breakpoints, 1), $min, null);
-}
-
-// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
-// Useful for making responsive utilities.
-//
-//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
-//    ""  (Returns a blank string)
-//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
-//    "-sm"
-@function breakpoint-infix($name, $breakpoints: $screen-breakpoints) {
-  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
-}
-
-// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
-// Makes the @content apply to the given breakpoint and wider.
-@mixin media-breakpoint-up($name, $breakpoints: $screen-breakpoints) {
-  $min: breakpoint-min($name, $breakpoints);
-  @if $min {
-    @media (min-width: $min) {
-      @content;
-    }
-  } @else {
-    @content;
-  }
-}
-
-// Name of the next breakpoint, or null for the last breakpoint.
-//
-//    >> breakpoint-next(sm)
-//    md
-//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
-//    md
-//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
-//    md
-@function breakpoint-next($name, $breakpoints: $screen-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
-  $n: index($breakpoint-names, $name);
-  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
-}
-
-// Maximum breakpoint width. Null for the smallest (first) breakpoint.
-// The maximum value is reduced by 0.02px to work around the limitations of
-// `min-` and `max-` prefixes and viewports with fractional widths.
-//
-// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
-// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.	// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
-// See https://bugs.webkit.org/show_bug.cgi?id=178261	// See https://bugs.webkit.org/show_bug.cgi?id=178261
-//
-//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
-//    767.98px
-@function breakpoint-max($name, $breakpoints: $screen-breakpoints) {
-  $max: map-get($breakpoints, $name);
-  @return if($max and $max > 0, $max - .02, null);
-}
-
-// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
-// Makes the @content apply to the given breakpoint and narrower.
-@mixin media-breakpoint-down($name, $breakpoints: $screen-breakpoints) {
-  $max: breakpoint-max($name, $breakpoints);
-  @if $max {
-    @media (max-width: $max) {
-      @content;
-    }
-  } @else {
-    @content;
-  }
-}
-
-
-// Text Direction - ltr / rtl
-//
-// CSS defaults to use the ltr css, and adds [dir=rtl] selectors
-// to override ltr defaults.
-// ----------------------------------------------------------
-
-@mixin multi-dir() {
-  @content;
-
-  // $root: #{&};
-  // @at-root [dir] {
-  //   #{$root} {
-  //     @content;
-  //   }
-  // }
-}
-
-@mixin rtl() {
-  $root: #{&};
-
-  @at-root [dir=rtl] {
-    #{$root} {
-        @content;
-    }
-  }
-}
-
-@mixin ltr() {
-  @content;
-}
-
-
-// SVG Background Image Mixin
-// @param {string} $svg
-// ----------------------------------------------------------
-@mixin svg-background-image($svg, $flip-rtl: false) {
-  $url: url-encode($svg);
-  $viewBox: str-split(str-extract($svg, "viewBox='", "'"), " ");
-
-  @if $flip-rtl != true or $viewBox == null {
-    @include multi-dir() {
-      background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
-    }
-  } @else {
-    $transform: "transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'";
-    $flipped-url: $svg;
-    $flipped-url: str-replace($flipped-url, "<path", "<path #{$transform}");
-    $flipped-url: str-replace($flipped-url, "<line", "<line #{$transform}");
-    $flipped-url: str-replace($flipped-url, "<polygon", "<polygon #{$transform}");
-    $flipped-url: url-encode($flipped-url);
-
-    @include ltr () {
-      background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
-    }
-    @include rtl() {
-      background-image: url("data:image/svg+xml;charset=utf-8,#{$flipped-url}");
-    }
-  }
-}
-
-// Add property horizontal
-// @param {string} $start
-// @param {string} $end
-// ----------------------------------------------------------
-@mixin property-horizontal($prop, $start, $end: $start) {
-  @if $start == 0 and $end == 0 {
-    #{$prop}-left: $start;
-    #{$prop}-right: $end;
-
-  } @else {
-    #{$prop}-left: $start;
-    #{$prop}-right: $end;
-
-    @at-root {
-      @supports ((margin-inline-start: 0) or (-webkit-margin-start: 0)) {
-        & {
-          @if $start != null {
-            #{$prop}-left: unset;
-          }
-          @if $end != null {
-            #{$prop}-right: unset;
-          }
-
-          -webkit-#{$prop}-start: $start;
-          #{$prop}-inline-start: $start;
-          -webkit-#{$prop}-end: $end;
-          #{$prop}-inline-end: $end;
-        }
-      }
-    }
-  }
-}
-
-// Add property for all directions
-// @param {string} $prop
-// @param {string} $top
-// @param {string} $end
-// @param {string} $bottom
-// @param {string} $start
-// @param {boolean} $content include content or use default
-// ----------------------------------------------------------
-@mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {
-  @include property-horizontal($prop, $start, $end);
-  #{$prop}-top: $top;
-  #{$prop}-bottom: $bottom;
-}
-
-// Add padding horizontal
-// @param {string} $start
-// @param {string} $end
-// ----------------------------------------------------------
-@mixin padding-horizontal($start, $end: $start) {
-  @include property-horizontal(padding, $start, $end);
-}
-
-// Add padding for all directions
-// @param {string} $top
-// @param {string} $end
-// @param {string} $bottom
-// @param {string} $start
-// ----------------------------------------------------------
-@mixin padding($top, $end: $top, $bottom: $top, $start: $end) {
-  @include property(padding, $top, $end, $bottom, $start);
-}
-
-// Add margin horizontal
-// @param {string} $start
-// @param {string} $end
-// ----------------------------------------------------------
-@mixin margin-horizontal($start, $end: $start) {
-  @include property-horizontal(margin, $start, $end);
-}
-
-// Add margin for all directions
-// @param {string} $top
-// @param {string} $end
-// @param {string} $bottom
-// @param {string} $start
-// ----------------------------------------------------------
-@mixin margin($top, $end: $top, $bottom: $top, $start: $end) {
-  @include property(margin, $top, $end, $bottom, $start);
-}
-
-// Add position horizontal
-// @param {string} $start - amount to position start
-// @param {string} $end - amount to left: 0; end
-// ----------------------------------------------------------
-@mixin position-horizontal($start: null, $end: null) {
-  @if $start == $end {
-    @include multi-dir() {
-      left: $start;
-      right: $end;
-    }
-  } @else {
-    @include ltr() {
-      left: $start;
-      right: $end;
-    }
-    @include rtl() {
-      left: unset;
-      right: unset;
-
-      left: $end;
-      right: $start;
-    }
-  }
-}
-
-// Add position for all directions
-// @param {string} $top
-// @param {string} $end
-// @param {string} $bottom
-// @param {string} $start
-// ----------------------------------------------------------
-@mixin position($top: null, $end: null, $bottom: null, $start: null) {
-  @include position-horizontal($start, $end);
-  top: $top;
-  bottom: $bottom;
-}
-
-// Add border for all directions
-// @param {string} $top
-// @param {string} $end
-// @param {string} $bottom
-// @param {string} $start
-// ----------------------------------------------------------
-@mixin border($top, $end: $top, $bottom: $top, $start: $end) {
-  @include property(border, $top, $end, $bottom, $start);
-}
-
-// Add border radius for all directions
-// @param {string} $top-start
-// @param {string} $top-end
-// @param {string} $bottom-end
-// @param {string} $bottom-start
-// ----------------------------------------------------------
-@mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) {
-  @if $top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start {
-    @include multi-dir() {
-      border-radius: $top-start;
-    }
-  } @else {
-    @include ltr() {
-      border-top-left-radius: $top-start;
-      border-top-right-radius: $top-end;
-      border-bottom-right-radius: $bottom-end;
-      border-bottom-left-radius: $bottom-start;
-    }
-
-    @include rtl() {
-      border-top-left-radius: $top-end;
-      border-top-right-radius: $top-start;
-      border-bottom-right-radius: $bottom-start;
-      border-bottom-left-radius: $bottom-end;
-    }
-  }
-}
-
-// Add direction for all directions
-// @param {string} $dir - Direction on LTR
-@mixin direction($dir) {
-  $other-dir: null;
-
-  @if $dir == ltr {
-    $other-dir: rtl;
-  } @else {
-    $other-dir: ltr;
-  }
-
-  @include ltr() {
-    direction: $dir;
-  }
-  @include rtl() {
-    direction: $other-dir;
-  }
-}
-
-// Add float for all directions
-// @param {string} $side
-// @param {string} $decorator - !important
-@mixin float($side, $decorator: null) {
-  @if $side == start {
-    @include ltr() {
-      float: left $decorator;
-    }
-    @include rtl() {
-      float: right $decorator;
-    }
-  } @else if $side == end {
-    @include ltr() {
-      float: right $decorator;
-    }
-    @include rtl() {
-      float: left $decorator;
-    }
-  } @else {
-    @include multi-dir() {
-      float: $side $decorator;
-    }
-  }
-}
-
-@mixin background-position($horizontal, $horizontal-amount: null, $vertical: null, $vertical-amount: null) {
-  @if $horizontal == start or $horizontal == end {
-    $horizontal-ltr: null;
-    $horizontal-rtl: null;
-    @if $horizontal == start {
-      $horizontal-ltr: left;
-      $horizontal-rtl: right;
-    } @else {
-      $horizontal-ltr: right;
-      $horizontal-rtl: left;
-    }
-
-    @include ltr() {
-      background-position: $horizontal-ltr $horizontal-amount $vertical $vertical-amount;
-    }
-    @include rtl() {
-      background-position: $horizontal-rtl $horizontal-amount $vertical $vertical-amount;
-    }
-  } @else {
-    @include multi-dir() {
-      background-position: $horizontal $horizontal-amount $vertical $vertical-amount;
-    }
-  }
-}
-
-@mixin transform-origin($x-axis, $y-axis: null) {
-  @if $x-axis == start {
-    @include ltr() {
-      transform-origin: left $y-axis;
-    }
-    @include rtl() {
-      transform-origin: right $y-axis;
-    }
-  } @else if $x-axis == end {
-    @include ltr() {
-      transform-origin: right $y-axis;
-    }
-    @include rtl() {
-      transform-origin: left $y-axis;
-    }
-  } @else if $x-axis == left or $x-axis == right {
-    @include multi-dir() {
-      transform-origin: $x-axis $y-axis;
-    }
-  } @else {
-    @include ltr() {
-      transform-origin: $x-axis $y-axis;
-    }
-    @include rtl() {
-      transform-origin: calc(100% - #{$x-axis}) $y-axis;
-    }
-  }
-}
-
-// Add transform for all directions
-// @param {string} $transforms - comma separated list of transforms
-@mixin transform($transforms...) {
-  $extra: null;
-
-  $x: null;
-  $ltr-translate: null;
-  $rtl-translate: null;
-
-  @each $transform in $transforms {
-    @if (str-index($transform, translate3d)) {
-      $transform: str-replace($transform, 'translate3d(');
-      $transform: str-replace($transform, ')');
-
-      $coordinates: str-split($transform, ',');
-
-      $x: nth($coordinates, 1);
-      $y: nth($coordinates, 2);
-      $z: nth($coordinates, 3);
-
-      $ltr-translate: translate3d($x, $y, $z);
-      $rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);
-    } @else {
-      @if $extra == null {
-        $extra: $transform;
-      } @else {
-        $extra: $extra $transform;
-      }
-    }
-  }
-
-  @if $x == '0' or $x == null {
-    @include multi-dir() {
-      transform: $ltr-translate $extra;
-    }
-  } @else {
-    @include ltr() {
-      transform: $ltr-translate $extra;
-    }
-
-    @include rtl() {
-      transform: $rtl-translate $extra;
-    }
-  }
-}
diff --git a/src/theme/app.scss b/src/theme/theme.base.scss
similarity index 94%
rename from src/theme/app.scss
rename to src/theme/theme.base.scss
index eec353f18..2daf19de3 100644
--- a/src/theme/app.scss
+++ b/src/theme/theme.base.scss
@@ -1,30 +1,30 @@
-  // Common styles.
-  .text-left           { text-align: left; }
-  .text-right          { text-align: right; }
-  .text-center         { text-align: center; }
-  .text-justify        { text-align: justify; }
-  .clearfix {
+// Common styles.
+.text-left           { text-align: left; }
+.text-right          { text-align: right; }
+.text-center         { text-align: center; }
+.text-justify        { text-align: justify; }
+.clearfix {
     &:after {
-      content: "";
-      display: table;
-      clear: both;
+        content: "";
+        display: table;
+        clear: both;
     }
-  }
-  .img-responsive {
+}
+.img-responsive {
     display: block;
     max-width: 100%;
     &[height] {
-      height: auto;
+        height: auto;
     }
-  }
+}
 
-  .opacity-hide { opacity: 0; }
-  .core-big   { font-size: 115%; }
-  .invisible { visibility: hidden; }
+.opacity-hide { opacity: 0; }
+.core-big   { font-size: 115%; }
+.invisible { visibility: hidden; }
 
-  .button-no-uppercase {
+.button-no-uppercase {
     text-transform: none;
-  }
+}
 
 // Correctly inherit ion-text-wrap onto labels.
 ion-item.ion-text-wrap ion-label {
@@ -432,7 +432,7 @@ ion-button.core-button-select {
 // Text formats.
 // Highlight text.
 .matchtext {
-  background-color: var(--text-hightlight-background-color);
+    background-color: var(--text-hightlight-background-color);
 }
 
 // Text for accessibility, hidden from the view.
@@ -442,5 +442,3 @@ ion-button.core-button-select {
     font-weight: normal;
     font-size: 1em;
 }
-
-@import "./format-text.scss";
diff --git a/src/theme/theme.custom.scss b/src/theme/theme.custom.scss
new file mode 100644
index 000000000..68b7b64d7
--- /dev/null
+++ b/src/theme/theme.custom.scss
@@ -0,0 +1,21 @@
+/*
+ * App CUSTOM theme SCSS
+ * ----------------------------------------------------------------------------
+ * Place here custom styles.
+ */
+
+/*
+ * Light Theme
+ * -------------------------------------------
+ */
+:root {
+
+}
+
+/*
+ * Dark Theme
+ * -------------------------------------------
+ */
+:root body.dark {
+
+}
diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss
new file mode 100644
index 000000000..837fa8eb0
--- /dev/null
+++ b/src/theme/theme.dark.scss
@@ -0,0 +1,87 @@
+/*
+ * App DARK theme CSS
+ * ----------------------------------------------------------------------------
+ * Ionic Variables and Theming. For more info, please see:
+ * http://ionicframework.com/docs/theming/
+ */
+
+:root body.dark {
+    --ion-background-color: #1e1e1e;
+    --ion-background-color-rgb: 18,18,18;
+
+    --ion-text-color: #ffffff;
+    --ion-text-color-rgb: 255,255,255;
+
+    --ion-border-color: #3f3f3f;
+
+    --ion-color-step-50: #1e1e1e;
+    --ion-color-step-100: #2a2a2a;
+    --ion-color-step-150: #363636;
+    --ion-color-step-200: #414141;
+    --ion-color-step-250: #4d4d4d;
+    --ion-color-step-300: #595959;
+    --ion-color-step-350: #656565;
+    --ion-color-step-400: #717171;
+    --ion-color-step-450: #7d7d7d;
+    --ion-color-step-500: #898989;
+    --ion-color-step-550: #949494;
+    --ion-color-step-600: #a0a0a0;
+    --ion-color-step-650: #acacac;
+    --ion-color-step-700: #b8b8b8;
+    --ion-color-step-750: #c4c4c4;
+    --ion-color-step-800: #d0d0d0;
+    --ion-color-step-850: #dbdbdb;
+    --ion-color-step-900: #e7e7e7;
+    --ion-color-step-950: #f3f3f3;
+
+    --light: var(--black);
+    --dark: var(--gray-lighter);
+
+    --ion-color-light: var(--light);
+    --ion-color-light-rgb: 58,58,58;
+    --ion-color-light-contrast: #ffffff;
+    --ion-color-light-contrast-rgb: 255,255,255;
+    --ion-color-light-shade: #333333;
+    --ion-color-light-tint: #4e4e4e;
+
+    --ion-color-dark: var(--dark);
+    --ion-color-dark-rgb: 245,245,245;
+    --ion-color-dark-contrast: #000000;
+    --ion-color-dark-contrast-rgb: 0,0,0;
+    --ion-color-dark-shade: #d8d8d8;
+    --ion-color-dark-tint: #f6f6f6;
+
+    --ion-tab-bar-background: #1f1f1f;
+
+    --ion-item-background: #1e1e1e;
+
+    --ion-card-background: #1c1c1d;
+
+    ion-content {
+        --background: var(--ion-background-color);
+        --background-lighter: var(--gray-darker);
+        --contrast-background: var(--ion-background-color);
+    }
+
+    --core-tabs-background: var(--custom-tabs-background, #3a3a3a);
+    --core-tab-background: var(--custom-tab-background, #3a3a3a);
+    --core-tab-color: var(--custom-tab-color, var(--white));
+    --core-tab-border-color: var(--custom-tab-border-color, var(--gray-light));
+
+    core-progress-bar {
+        --text-color: var(--custom-progress-text-color, var(--gray-lighter));
+    }
+
+    ion-item-divider {
+        --background: var(--black);
+        --color: var(--white);
+        .item-detail-icon {
+            color: var(--white);
+        }
+    }
+
+    --core-button-select-background: var(--custom-button-select-background, #3a3a3a);
+
+    --core-login-background: var(--custom-login-background, #3a3a3a);
+    --core-login-text-color: var(--custom-login-text-color, white);
+}
diff --git a/src/theme/variables.scss b/src/theme/theme.light.scss
similarity index 66%
rename from src/theme/variables.scss
rename to src/theme/theme.light.scss
index 5c7858c5b..eb28548b9 100644
--- a/src/theme/variables.scss
+++ b/src/theme/theme.light.scss
@@ -1,102 +1,116 @@
-// Ionic Variables and Theming. For more info, please see:
-// http://ionicframework.com/docs/theming/
+/*
+ * App LIGHT theme CSS
+ * ----------------------------------------------------------------------------
+ * Ionic Variables and Theming. For more info, please see:
+ * http://ionicframework.com/docs/theming/
+ */
 
-@import "custom.scss";
-
-/** Ionic CSS Variables **/
 :root {
 
     // Color palette
-    --black:           var(--custom-black, #3a3a3a); // Headings, standard text.
-    --gray-darker:     var(--custom-gray-darker, #626262); // Text (emphasis-detail), placeholder, background.
-    --gray-dark:       var(--custom-gray-dark, #9e9e9e); // Borders (never text).
-    --gray:            var(--custom-gray, #dddddd);
-    --gray-light:      var(--custom-gray-light, #e9e9e9); // Background.
-    --gray-lighter:    var(--custom-gray-lighter, #f5f5f5);
-    --white:           var(--custom-white, #ffffff); // Background, reversed text.
+    --black:           #{$black}; // Headings, standard text.
+    --gray-darker:     #{$gray-darker};
+    --gray-dark:       #{$gray-dark};
+    --gray:            #{$gray};
+    --gray-light:      #{$gray-light};
+    --gray-lighter:    #{$gray-lighter};
+    --white:           #{$white};
 
-    --blue:            var(--custom-blue, #0064d2); // Link, background.
-    --turquoise:       var(--custom-turquoise, #007982); // Accent.
-    --green:           var(--custom-green, #5e8100); // Accent.
-    --red:             var(--custom-red, #cb3d4d);
-    --orange:          var(--custom-orange, #f98012); // Accent (never text).
-    --yellow:          var(--custom-yellow, #fbad1a); // Accent (never text).
-    --purple:          var(--custom-purple, #8e24aa); // Accent (never text).
+    --blue:            #{$blue};
+    --turquoise:       #{$turquoise};
+    --green:           #{$green};
+    --red:             #{$red};
+    --orange:          #{$orange};
+    --yellow:          #{$yellow};
+    --purple:          #{$purple};
 
-    --core-color: var(--custom-main-color, var(--orange));
-    --core-online-color: #5cb85c;
+    --core-color:       #{$core-color};
+    --core-online-color: #{$core-online-color};
 
-    --ion-color-primary: var(--core-color);
+    // Named Color Variables
+    --primary: var(--core-color);
+    --secondary: var(--blue);
+    --tertiary: var(--turquoise);
+    --success: var(--green);
+    --danger: var(--red);
+    --warning: var(--yellow);
+    --light: var(--gray-lighter);
+    --dark: var(--black);
+    --medium: var(--gray-light);
+    --light: var(--gray-lighter);
+    --primary: var(--core-color);
+
+    --ion-color-primary: var(--primary);
     --ion-color-primary-rgb: 249,128,18;
     --ion-color-primary-contrast: #ffffff;
     --ion-color-primary-contrast-rgb: 255,255,255;
     --ion-color-primary-shade: #db7110;
     --ion-color-primary-tint: #fa8d2a;
 
-    --ion-color-secondary: #0064d2;
+    --ion-color-secondary: var(--secondary);
     --ion-color-secondary-rgb: 0,100,210;
     --ion-color-secondary-contrast: #ffffff;
     --ion-color-secondary-contrast-rgb: 255,255,255;
     --ion-color-secondary-shade: #0058b9;
     --ion-color-secondary-tint: #1a74d7;
 
-    --ion-color-tertiary: #007982;
+    --ion-color-tertiary: var(--tertiary);
     --ion-color-tertiary-rgb: 0,121,130;
     --ion-color-tertiary-contrast: #ffffff;
     --ion-color-tertiary-contrast-rgb: 255,255,255;
     --ion-color-tertiary-shade: #006a72;
     --ion-color-tertiary-tint: #1a868f;
 
-    --ion-color-success: #5e8100;
+    --ion-color-success: var(--success);
     --ion-color-success-rgb: 94,129,0;
     --ion-color-success-contrast: #ffffff;
     --ion-color-success-contrast-rgb: 255,255,255;
     --ion-color-success-shade: #537200;
     --ion-color-success-tint: #6e8e1a;
 
-    --ion-color-warning: #fbad1a;
+    --ion-color-warning: var(--warning);
     --ion-color-warning-rgb: 251,173,26;
     --ion-color-warning-contrast: #000000;
     --ion-color-warning-contrast-rgb: 0,0,0;
     --ion-color-warning-shade: #dd9817;
     --ion-color-warning-tint: #fbb531;
 
-    --ion-color-danger: #cb3d4d;
+    --ion-color-danger: var(--danger);
     --ion-color-danger-rgb: 203,61,77;
     --ion-color-danger-contrast: #ffffff;
     --ion-color-danger-contrast-rgb: 255,255,255;
     --ion-color-danger-shade: #b33644;
     --ion-color-danger-tint: #d0505f;
 
-    --ion-color-dark: #3a3a3a;
+    --ion-color-dark: var(--dark);
     --ion-color-dark-rgb: 58,58,58;
     --ion-color-dark-contrast: #ffffff;
     --ion-color-dark-contrast-rgb: 255,255,255;
     --ion-color-dark-shade: #333333;
     --ion-color-dark-tint: #4e4e4e;
 
-    --ion-color-medium: #9e9e9e;
+    --ion-color-medium: var(--medium);
     --ion-color-medium-rgb: 158,158,158;
     --ion-color-medium-contrast: #000000;
     --ion-color-medium-contrast-rgb: 0,0,0;
     --ion-color-medium-shade: #8b8b8b;
     --ion-color-medium-tint: #a8a8a8;
 
-    --ion-color-light: #f5f5f5;
+    --ion-color-light: var(--light);
     --ion-color-light-rgb: 245,245,245;
     --ion-color-light-contrast: #000000;
     --ion-color-light-contrast-rgb: 0,0,0;
     --ion-color-light-shade: #d8d8d8;
     --ion-color-light-tint: #f6f6f6;
 
-    --ion-text-color: #3a3a3a;
+    --ion-text-color: var($text-color);
     --ion-text-color-rgb: 58,58,58;
     --ion-card-color: var(--ion-text-color);
 
     --text-hightlight-background-color: var(--custom-text-hightlight-background-color, #99c1ed);
 
     ion-content {
-        --background: var(--gray-light);
+        --background: #{$background-color};
         --background-lighter: var(--gray-lighter);
         --contrast-background: var(--white);
     }
@@ -223,88 +237,3 @@
     --core-menu-box-shadow-end: var(--custom-menu-box-shadow-end, -4px 0px 16px rgba(0, 0, 0, 0.18));
     --core-menu-box-shadow-start: var(--custom-menu-box-shadow-start, 4px 0px 16px rgba(0, 0, 0, 0.18));
 }
-
-/*
-* Dark Theme
-* -------------------------------------------
-*/
-:root body.dark {
-    --ion-background-color: #1e1e1e;
-    --ion-background-color-rgb: 18,18,18;
-
-    --ion-text-color: #ffffff;
-    --ion-text-color-rgb: 255,255,255;
-
-    --ion-border-color: #3f3f3f;
-
-    --ion-color-step-50: #1e1e1e;
-    --ion-color-step-100: #2a2a2a;
-    --ion-color-step-150: #363636;
-    --ion-color-step-200: #414141;
-    --ion-color-step-250: #4d4d4d;
-    --ion-color-step-300: #595959;
-    --ion-color-step-350: #656565;
-    --ion-color-step-400: #717171;
-    --ion-color-step-450: #7d7d7d;
-    --ion-color-step-500: #898989;
-    --ion-color-step-550: #949494;
-    --ion-color-step-600: #a0a0a0;
-    --ion-color-step-650: #acacac;
-    --ion-color-step-700: #b8b8b8;
-    --ion-color-step-750: #c4c4c4;
-    --ion-color-step-800: #d0d0d0;
-    --ion-color-step-850: #dbdbdb;
-    --ion-color-step-900: #e7e7e7;
-    --ion-color-step-950: #f3f3f3;
-
-    --ion-color-light: #3a3a3a;
-    --ion-color-light-rgb: 58,58,58;
-    --ion-color-light-contrast: #ffffff;
-    --ion-color-light-contrast-rgb: 255,255,255;
-    --ion-color-light-shade: #333333;
-    --ion-color-light-tint: #4e4e4e;
-
-    --ion-color-dark: #f5f5f5;
-    --ion-color-dark-rgb: 245,245,245;
-    --ion-color-dark-contrast: #000000;
-    --ion-color-dark-contrast-rgb: 0,0,0;
-    --ion-color-dark-shade: #d8d8d8;
-    --ion-color-dark-tint: #f6f6f6;
-
-    --ion-tab-bar-background: #1f1f1f;
-
-    --ion-item-background: #1e1e1e;
-
-    --ion-card-background: #1c1c1d;
-
-    ion-content {
-        --background: var(--ion-background-color);
-        --background-lighter: var(--gray-darker);
-        --contrast-background: var(--ion-background-color);
-    }
-
-    --core-tabs-background: var(--custom-tabs-background, #3a3a3a);
-    --core-tab-background: var(--custom-tab-background, #3a3a3a);
-    --core-tab-color: var(--custom-tab-color, var(--white));
-    --core-tab-border-color: var(--custom-tab-border-color, var(--gray-light));
-
-    core-progress-bar {
-        --text-color: var(--custom-progress-text-color, var(--gray-lighter));
-    }
-
-    ion-item-divider {
-        --background: var(--black);
-        --color: var(--white);
-        .item-detail-icon {
-            color: var(--white);
-        }
-    }
-
-    --core-button-select-background: var(--custom-button-select-background, #3a3a3a);
-
-
-    --core-login-background: var(--custom-login-background, #3a3a3a);
-    --core-login-text-color: var(--custom-login-text-color, white);
-}
-
-@import "app.scss";
diff --git a/src/theme/global.scss b/src/theme/theme.scss
similarity index 83%
rename from src/theme/global.scss
rename to src/theme/theme.scss
index 54f8ccf5d..7c6c324ca 100644
--- a/src/theme/global.scss
+++ b/src/theme/theme.scss
@@ -1,5 +1,5 @@
 /*
- * App Global CSS
+ * App Global theme CSS
  * ----------------------------------------------------------------------------
  * Put style rules here that you want to apply globally. These styles are for
  * the entire app and not just one component. Additionally, this file can be
@@ -9,9 +9,15 @@
  * https://ionicframework.com/docs/layout/global-stylesheets
  */
 
+/* Global variables */
+@import "./globals.scss";
+
 /* Application styles */
-@import "./variables.scss";
-@import "./mixins.scss";
+@import "./theme.light.scss";
+@import "./theme.dark.scss";
+@import "./theme.custom.scss";
+@import "./theme.base.scss";
+@import "./format-text.scss";
 
 /* Core CSS required for Ionic components to work properly */
 @import "~@ionic/angular/css/core.css";