From d8009dac99db8b4219d508386dedda2b9d40d831 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 23 Feb 2021 08:53:24 +0100
Subject: [PATCH] MOBILE-3636 core: Improvements on some theme styles

---
 .../course-list-item/course-list-item.scss    |  35 +-----
 .../course-progress/course-progress.scss      |  33 +----
 src/theme/{ => components}/format-text.scss   |   0
 src/theme/globals.mixins.ionic.scss           |  92 ++++++++++++++
 src/theme/globals.scss                        |   4 +-
 src/theme/globals.variables.scss              |  90 ++++++++++++++
 src/theme/theme.base.scss                     | 111 +++++------------
 src/theme/theme.dark.scss                     |  16 +--
 src/theme/theme.light.scss                    | 115 +++++-------------
 src/theme/theme.scss                          |   4 +-
 10 files changed, 263 insertions(+), 237 deletions(-)
 rename src/theme/{ => components}/format-text.scss (100%)

diff --git a/src/core/features/courses/components/course-list-item/course-list-item.scss b/src/core/features/courses/components/course-list-item/course-list-item.scss
index dc76218e8..5d2625e0e 100644
--- a/src/core/features/courses/components/course-list-item/course-list-item.scss
+++ b/src/core/features/courses/components/course-list-item/course-list-item.scss
@@ -1,3 +1,5 @@
+@import "~theme/globals";
+
 :host {
     .course-icon {
         color: white;
@@ -10,35 +12,10 @@
         transition: all 50ms ease-in-out;
     }
 
-    ion-icon[course-color="0"] {
-        color: var(--core-course-color-0);
-    }
-    ion-icon[course-color="1"] {
-        color: var(--core-course-color-1);
-    }
-    ion-icon[course-color="2"] {
-        color: var(--core-course-color-2);
-    }
-    ion-icon[course-color="3"] {
-        color: var(--core-course-color-3);
-    }
-    ion-icon[course-color="4"] {
-        color: var(--core-course-color-4);
-    }
-    ion-icon[course-color="5"] {
-        color: var(--core-course-color-5);
-    }
-    ion-icon[course-color="6"] {
-        color: var(--core-course-color-6);
-    }
-    ion-icon[course-color="7"] {
-        color: var(--core-course-color-7);
-    }
-    ion-icon[course-color="8"] {
-        color: var(--core-course-color-8);
-    }
-    ion-icon[course-color="9"] {
-        color: var(--core-course-color-9);
+    @for $i from 0 to length($core-course-image-background) {
+        ion-icon[course-color="#{$i}"] {
+            color: nth($core-course-image-background, $i + 1);
+        }
     }
 
     ion-avatar {
diff --git a/src/core/features/courses/components/course-progress/course-progress.scss b/src/core/features/courses/components/course-progress/course-progress.scss
index f73f02035..4d59d8515 100644
--- a/src/core/features/courses/components/course-progress/course-progress.scss
+++ b/src/core/features/courses/components/course-progress/course-progress.scss
@@ -7,35 +7,10 @@
         align-self: stretch;
         height: calc(100% - 20px);
 
-        &[course-color="0"] .core-course-thumb {
-            background: var(--core-course-color-0);
-        }
-        &[course-color="1"] .core-course-thumb {
-            background: var(--core-course-color-1);
-        }
-        &[course-color="2"] .core-course-thumb {
-            background: var(--core-course-color-2);
-        }
-        &[course-color="3"] .core-course-thumb {
-            background: var(--core-course-color-3);
-        }
-        &[course-color="4"] .core-course-thumb {
-            background: var(--core-course-color-4);
-        }
-        &[course-color="5"] .core-course-thumb {
-            background: var(--core-course-color-5);
-        }
-        &[course-color="6"] .core-course-thumb {
-            background: var(--core-course-color-6);
-        }
-        &[course-color="7"] .core-course-thumb {
-            background: var(--core-course-color-7);
-        }
-        &[course-color="8"] .core-course-thumb {
-            background: var(--core-course-color-8);
-        }
-        &[course-color="9"] .core-course-thumb {
-            background: var(--core-course-color-9);
+        @for $i from 0 to length($core-course-image-background) {
+            &[course-color="#{$i}"] .core-course-thumb {
+                background: nth($core-course-image-background, $i + 1);
+            }
         }
 
         .core-course-thumb {
diff --git a/src/theme/format-text.scss b/src/theme/components/format-text.scss
similarity index 100%
rename from src/theme/format-text.scss
rename to src/theme/components/format-text.scss
diff --git a/src/theme/globals.mixins.ionic.scss b/src/theme/globals.mixins.ionic.scss
index 73678af2a..56a82a054 100644
--- a/src/theme/globals.mixins.ionic.scss
+++ b/src/theme/globals.mixins.ionic.scss
@@ -6,6 +6,98 @@
  * https://github.com/ionic-team/ionic-framework/blob/master/core/src/themes/ionic.mixins.scss
  */
 
+
+// Gets the active color's css variable from a variation. Alpha is optional.
+// --------------------------------------------------------------------------------------------
+// Example usage:
+// current-color(base) => var(--ion-color-base)
+// current-color(contrast, 0.1) => rgba(var(--ion-color-contrast-rgb), 0.1)
+// --------------------------------------------------------------------------------------------
+@function current-color($variation, $alpha: null) {
+  @if $alpha == null {
+    @return var(--ion-color-#{$variation});
+  } @else {
+    @return rgba(var(--ion-color-#{$variation}-rgb), #{$alpha});
+  }
+}
+
+// Gets the specific color's css variable from the name and variation. Alpha/rgb are optional.
+// --------------------------------------------------------------------------------------------
+// Example usage:
+// ion-color(primary, base) => var(--ion-color-primary, #3880ff)
+// ion-color(secondary, contrast) => var(--ion-color-secondary-contrast)
+// ion-color(primary, base, 0.5) => rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5)
+// --------------------------------------------------------------------------------------------
+@function ion-color($name, $variation, $alpha: null, $rgb: null) {
+  $values: map-get($colors, $name);
+  $value: map-get($values, $variation);
+  $variable: --ion-color-#{$name}-#{$variation};
+
+  @if ($variation == base) {
+    $variable: --ion-color-#{$name};
+  }
+
+  @if ($alpha) {
+    $value: color-to-rgb-list($value);
+    @return rgba(var(#{$variable}-rgb, $value), $alpha);
+  }
+  @if ($rgb) {
+    $value: color-to-rgb-list($value);
+    $variable: #{$variable}-rgb;
+  }
+
+  @return var(#{$variable}, $value);
+}
+
+// Mixes a color with black to create its shade.
+// --------------------------------------------------------------------------------------------
+@function get-color-shade($color) {
+  @return mix(#000, $color, 12%);
+}
+
+// Mixes a color with white to create its tint.
+// --------------------------------------------------------------------------------------------
+@function get-color-tint($color) {
+  @return mix(#fff, $color, 10%);
+}
+
+// Converts a color to a comma separated rgb.
+// --------------------------------------------------------------------------------------------
+@function color-to-rgb-list($color) {
+  @return #{red($color)},#{green($color)},#{blue($color)};
+}
+
+
+ // Ionic Colors
+// --------------------------------------------------
+// Generates the color classes and variables based on the
+// colors map
+
+@mixin generate-color($color-name) {
+    $value: map-get($colors, $color-name);
+
+    $base: map-get($value, base);
+    $contrast: map-get($value, contrast);
+    $shade: map-get($value, shade);
+    $tint: map-get($value, tint);
+
+    --ion-color-#{$color-name}: #{$base};
+    --ion-color-#{$color-name}-rgb: #{color-to-rgb-list($base)};
+    --ion-color-#{$color-name}-contrast: #{$contrast};
+    --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list($contrast)};
+    --ion-color-#{$color-name}-shade: #{$shade};
+    --ion-color-#{$color-name}-tint: #{$tint};
+
+    .ion-color-#{$color-name} {
+        --ion-color: #{$base};
+        --ion-color-rgb: #{color-to-rgb-list($base)};
+        --ion-color-contrast: #{$contrast};
+        --ion-color-contrast-rgb: #{color-to-rgb-list($contrast)};
+        --ion-color-shade: #{$shade};
+        --ion-color-tint: #{$tint};
+    }
+}
+
 @mixin input-cover() {
     @include position(0, null, null, 0);
     @include margin(0);
diff --git a/src/theme/globals.scss b/src/theme/globals.scss
index 4d3cba282..9a1812999 100644
--- a/src/theme/globals.scss
+++ b/src/theme/globals.scss
@@ -4,7 +4,7 @@
  * 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";
+@import "./globals.custom.scss";
+@import "./globals.variables.scss";
diff --git a/src/theme/globals.variables.scss b/src/theme/globals.variables.scss
index 0ecc0f2cd..07bf2248e 100644
--- a/src/theme/globals.variables.scss
+++ b/src/theme/globals.variables.scss
@@ -51,6 +51,96 @@ $subdued-text-color:  $gray-darker !default;
 
 $core-online-color: #5cb85c !default;
 
+$primary:    $core-color !default;
+$secondary:  $blue !default;
+$tertiary:   $turquoise !default;
+$danger:     $red !default;
+$warning:    $yellow !default;
+$success:    $green !default;
+$info:       $blue !default;
+$light:      $gray-lighter !default;
+$medium:     $gray-light !default;
+$dark:       $black !default;
+
+$colors:  (
+    primary: (
+        base:             $primary,
+        contrast:         #fff,
+        shade:            get-color-shade($primary),
+        tint:             get-color-tint($primary)
+    ),
+    secondary: (
+        base:             $secondary,
+        contrast:         #fff,
+        shade:            get-color-shade($secondary),
+        tint:             get-color-tint($secondary)
+    ),
+    tertiary: (
+        base:             $tertiary,
+        contrast:         #fff,
+        shade:            get-color-shade($tertiary),
+        tint:             get-color-tint($tertiary)
+    ),
+    success: (
+        base:             $success,
+        contrast:         #fff,
+        shade:            get-color-shade($success),
+        tint:             get-color-tint($success)
+    ),
+    warning: (
+        base:             $warning,
+        contrast:         #000,
+        shade:            get-color-shade($warning),
+        tint:             get-color-tint($warning)
+    ),
+    danger: (
+        base:             $danger,
+        contrast:         #fff,
+        shade:            get-color-shade($danger),
+        tint:             get-color-tint($danger)
+    ),
+    info: (
+        base:             $info,
+        contrast:         #fff,
+        shade:            get-color-shade($info),
+        tint:             get-color-tint($info)
+    ),
+    light: (
+        base:             $light,
+        contrast:         #000,
+        shade:            get-color-shade($light),
+        tint:             get-color-tint($light)
+    ),
+    medium: (
+        base:             $medium,
+        contrast:         #fff,
+        shade:            get-color-shade($medium),
+        tint:             get-color-tint($medium)
+    ),
+    dark: (
+        base:             $dark,
+        contrast:         #fff,
+        shade:            get-color-shade($dark),
+        tint:             get-color-tint($dark)
+    )
+) !default;
+
+// Just swipe light and dark.
+$colors-dark:  (
+    primary: map-get($colors, primary),
+    secondary: map-get($colors, secondary),
+    tertiary: map-get($colors, tertiary),
+    success: map-get($colors, success),
+    warning: map-get($colors, warning),
+    danger: map-get($colors, danger),
+    info: map-get($colors, info),
+    light: map-get($colors, dark),
+    medium: map-get($colors, medium),
+    dark: map-get($colors, light),
+) !default;
+
+$core-course-image-background: #81ecec, #74b9ff, #a29bfe, #dfe6e9, #00b894, #0984e3, #b2bec3, #fdcb6e, #fd79a8, #6c5ce7 !default;
+
 /*
  * Layout Breakpoints
  *
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index be6ee775b..36065c7ea 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -204,34 +204,6 @@ ion-toolbar {
     }
 }
 
-.item.core-primary-item,
-.item.core-info-item,
-.item.core-secondary-item,
-.item.core-tertiary-item,
-.item.core-success-item,
-.item.core-warning-item,
-.item.core-danger-item {
-    --inner-border-width: 0 0 3px 0;
-}
-.item.core-primary-item {
-    --border-color: var(--ion-color-primary);
-}
-.item.core-info-item,
-.item.core-secondary-item {
-    --border-color: var(--ion-color-secondary);
-}
-.item.core-tertiary-item {
-    --border-color: var(--ion-color-tertiary);
-}
-.item.core-success-item {
-    --border-color: var(--ion-color-success);
-}
-.item.core-warning-item {
-    --border-color: var(--ion-color-warning);
-}
-.item.core-danger-item {
-    --border-color: var(--ion-color-danger);
-}
 .item-dimmed {
     opacity: 0.7;
     --background: var(--gray-lighter);
@@ -243,58 +215,36 @@ ion-toolbar {
 }
 
 // Card styles
+@each $color-name, $value in $colors {
+    $value: map-get($colors, $color-name);
 
-// Message cards.
-ion-card.core-primary-card,
-ion-card.core-info-card,
-ion-card.core-secondary-card,
-ion-card.core-tertiary-card,
-ion-card.core-success-card,
-ion-card.core-warning-card,
-ion-card.core-danger-card {
-    border-bottom: 3px solid transparent;
-    ion-item::part(native) {
-        --inner-border-width: 0;
+    $base: map-get($value, base);
+    $contrast: map-get($value, contrast);
+    $shade: map-get($value, shade);
+    $tint: map-get($value, tint);
+
+    // Message cards.
+    ion-card.core-#{$color-name}-card {
+        border-bottom: 3px solid $base;
+
+        ion-item::part(native) {
+            --inner-border-width: 0;
+        }
+        ion-label {
+            white-space: normal !important;
+        }
+        ion-icon {
+            color: $base;
+        }
     }
-    ion-label {
-        white-space: normal !important;
-    }
-}
-ion-card.core-primary-card {
-    border-bottom-color: var(--ion-color-primary);
-    ion-icon {
-        color: var(--ion-color-primary);
-    }
-}
-ion-card.core-info-card,
-ion-card.core-secondary-card {
-    border-bottom-color: var(--ion-color-secondary);
-    ion-icon {
-        color: var(--ion-color-secondary);
-    }
-}
-ion-card.core-tertiary-card {
-    border-bottom-color: var(--ion-color-tertiary);
-    ion-icon {
-        color: var(--ion-color-tertiary);
-    }
-}
-ion-card.core-success-card {
-    border-bottom-color: var(--ion-color-success);
-    ion-icon {
-        color: var(--ion-color-success);
-    }
-}
-ion-card.core-warning-card {
-    border-bottom-color: var(--ion-color-warning);
-    ion-icon {
-        color: var(--ion-color-warning);
-    }
-}
-ion-card.core-danger-card {
-    border-bottom-color: var(--ion-color-danger);
-    ion-icon {
-        color: var(--ion-color-danger);
+
+    .item.core-#{$color-name}-item {
+        --inner-border-width: 0 0 3px 0;
+        --border-width: 0;
+        border-bottom: 3px solid $base !important;
+        ion-icon {
+            color: $base;
+        }
     }
 }
 
@@ -338,9 +288,10 @@ img[alt] {
 
 // Activity modules
 .core-module-icon {
+    --size: 24px;
     width: auto;
-    max-width: 24px;
-    max-height: 24px;
+    max-width: var(--size);
+    max-height: var(--size);
 }
 
 ion-item img.core-module-icon[slot="start"] {
diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss
index 837fa8eb0..6bf965ee9 100644
--- a/src/theme/theme.dark.scss
+++ b/src/theme/theme.dark.scss
@@ -37,19 +37,9 @@
     --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;
+    @each $color-name, $value in $colors-dark {
+        @include generate-color($color-name);
+    }
 
     --ion-tab-bar-background: #1f1f1f;
 
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 770cc7f96..36015bda4 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -17,95 +17,53 @@
     --white:           #{$white};
 
     --blue:            #{$blue};
-    --blue-dark:       #{$blue-dark};
     --blue-light:      #{$blue-light};
+    --blue-dark:       #{$blue-dark};
+
     --turquoise:       #{$turquoise};
+    --turquoise-light: #{$turquoise-light};
+    --turquoise-dark:  #{$turquoise-dark};
+
     --green:           #{$green};
+    --green-light:     #{$green-light};
+    --green-dark:      #{$green-dark};
+
     --red:             #{$red};
+    --red-light:       #{$red-light};
+    --red-dark:        #{$red-dark};
+
     --orange:          #{$orange};
+    --orange-light:    #{$orange-light};
+
     --yellow:          #{$yellow};
+    --yellow-light:    #{$yellow-light};
+    --yellow-dark:     #{$yellow-dark};
+
     --purple:          #{$purple};
 
-    --core-color:       #{$core-color};
+    --core-color:      #{$core-color};
+    --core-color-light: #{$core-color-light};
+    --core-color-dark:  #{$core-color-dark};
+
     --core-online-color: #{$core-online-color};
 
     // Named Color Variables
-    --primary: var(--core-color);
-    --secondary: var(--blue);
-    --tertiary: var(--turquoise);
-    --success: var(--green);
-    --danger: var(--red);
-    --warning: var(--yellow);
+    --primary: var(--primary);
+    --secondary: var(--secondary);
+    --tertiary: var(--tertiary);
+    --success: var(--success);
+    --danger: var(--danger);
+    --warning: var(--warning);
+    --info: var(--info);
     --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;
+    @each $color-name, $value in $colors {
+        @include generate-color($color-name);
+    }
 
-    --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: 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: 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: 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: 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: 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: 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: 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: var($text-color);
+    --ion-text-color: #{$text-color};
     --ion-text-color-rgb: 58,58,58;
     --ion-card-color: var(--ion-text-color);
 
@@ -129,6 +87,7 @@
         --background: var(--ion-statusbar-background);
         ion-button {
             --ion-toolbar-color: transparent;
+            --color: var(--custom-toolbar-color, var(--ion-color-primary-contrast));
         }
 
         ion-spinner {
@@ -198,16 +157,6 @@
     --core-login-background: var(--custom-login-background, var(--white));
     --core-login-text-color: var(--custom-login-text-color, var(--black));
 
-    --core-course-color-0: var(--custom-course-color-0, #81ecec);
-    --core-course-color-1: var(--custom-course-color-1, #74b9ff);
-    --core-course-color-2: var(--custom-course-color-2, #a29bfe);
-    --core-course-color-3: var(--custom-course-color-3, #dfe6e9);
-    --core-course-color-4: var(--custom-course-color-4, #00b894);
-    --core-course-color-5: var(--custom-course-color-5, #0984e3);
-    --core-course-color-6: var(--custom-course-color-6, #b2bec3);
-    --core-course-color-7: var(--custom-course-color-7, #fdcb6e);
-    --core-course-color-8: var(--custom-course-color-9, #fd79a8);
-    --core-course-color-9: var(--custom-course-color-90, #6c5ce7);
     --core-star-color: var(--custom-star-color, var(--core-color));
 
     --core-large-avatar-size:  var(--custom-large-avatar-size, 90px);
diff --git a/src/theme/theme.scss b/src/theme/theme.scss
index 7c6c324ca..bccad48f6 100644
--- a/src/theme/theme.scss
+++ b/src/theme/theme.scss
@@ -17,7 +17,9 @@
 @import "./theme.dark.scss";
 @import "./theme.custom.scss";
 @import "./theme.base.scss";
-@import "./format-text.scss";
+
+/* Components */
+@import "./components/format-text.scss";
 
 /* Core CSS required for Ionic components to work properly */
 @import "~@ionic/angular/css/core.css";