matcha-theme 1.0.2 → 1.0.4

package/abstracts/_colors.scss

@@ -1,3 +1,31 @@
+// Saturation Levels
+$saturationLevels: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
+
+// Hues Palette Colors
+$matchaPalettes: (
+    "red": $red,
+    "pink": $pink,
+    "purple": $purple,
+    "deep-purple": $deep-purple,
+    "indigo": $indigo,
+    "blue": $blue,
+    "light-blue": $light-blue,
+    "cyan": $cyan,
+    "teal": $teal,
+    "green": $green,
+    "light-green": $light-green,
+    "lime": $lime,
+    "yellow": $yellow,
+    "amber": $amber,
+    "orange": $orange,
+    "deep-orange": $deep-orange,
+    "brown": $brown,
+    "grey": $grey,
+    "blue-grey": $blue-grey
+);
+
+// Hues Palette Colors
+$index: 0;
 // -------------------------------------------------------------------------------------------------------------------
 // @ Text color levels generator
 // -------------------------------------------------------------------------------------------------------------------
@@ -42,12 +70,30 @@
         }
     }
 }
+@mixin _generate-classes($prefix, $color-map, $saturation) {
+    // .primary-500
+    // .primary-600-bg
+    // .primary-700-fg
+    $background: map-get($color-map, $saturation);
+    $contrast: map-get($color-map, #{$saturation}-contrast);
+
+    .#{$prefix}-#{$saturation} {
+        background: $background;
+        color: $contrast;
+    }
+    .#{$prefix}-#{$saturation}-bg {
+        background: $background;
+    }
+    .#{$prefix}-#{$saturation}-fg {
+        color: $background;
+    }
+}
 
 // -------------------------------------------------------------------------------------------------------------------
 // @ Static color classes generator
 // -------------------------------------------------------------------------------------------------------------------
-@mixin _generate-static-color-classes($colorName, $color, $contrastColor, $hue) {
-    $colorSelector: unquote(".#{$colorName}#{$hue}");
+@mixin _generate-static-color-classes($colorName, $color, $contrastColor, $saturation) {
+    $colorSelector: unquote(".#{$colorName}#{$saturation}");
 
     #{$colorSelector}-bg {
         background-color: $color !important;
@@ -80,25 +126,29 @@
     }
 }
 
-@mixin colors-classes-static($palettes) {
+@mixin colors-classes-static($matchaPalettes) {
     $light-contrasting-classes: ();
     $dark-contrasting-classes: ();
 
-    @each $paletteName, $palette in $palettes {
+    @each $paletteName, $palette in $matchaPalettes {
+        // $contrasts: map-get($red, "contrast");
+        // $contrasts =  all contrast colors of $red palette
         $contrasts: map-get($palette, "contrast");
 
-        @each $hue in $matchaHues {
-            $color: map-get($palette, $hue);
-            $contrast: map-get($contrasts, $hue);
+        @each $saturation in $saturationLevels {
+            // $color: map-get($red, 500)
+            // $contrast: map-get($contrasts, 500);  500 contrast color of $red palette
+            $color: map-get($palette, $saturation);
+            $contrast: map-get($contrasts, $saturation);
 
             @if ($color != null and $contrast != null) {
-                @include _generate-static-color-classes($paletteName, $color, $contrast, "-#{$hue}");
+                @include _generate-static-color-classes($paletteName, $color, $contrast, "-#{$saturation}");
 
                 // If the contrast color is dark
                 @if (rgba(black, 1) ==rgba($contrast, 1)) {
                     $dark-contrasting-classes: append(
                         $dark-contrasting-classes,
-                        unquote(".#{$paletteName}-#{$hue}"),
+                        unquote(".#{$paletteName}-#{$saturation}"),
                         "comma"
                     );
                 }
@@ -107,14 +157,23 @@
                 @else {
                     $light-contrasting-classes: append(
                         $light-contrasting-classes,
-                        unquote(".#{$paletteName}-#{$hue}"),
+                        unquote(".#{$paletteName}-#{$saturation}"),
                         "comma"
                     );
                 }
 
                 // Run the generator one more time for default values (500)
                 // if we are not working with primary, accent or warn palettes
-                @if ($hue ==500 and $paletteName != "primary" and $paletteName != "accent" and $paletteName != "warn") {
+                @if (
+                    $saturation
+                        ==500 and
+                        $paletteName !=
+                        "primary" and
+                        $paletteName !=
+                        "accent" and
+                        $paletteName !=
+                        "warn"
+                ) {
                     // Generate color classes
                     @include _generate-static-color-classes($paletteName, $color, $contrast, "");
 
@@ -140,33 +199,6 @@
                 }
             }
         }
-
-        // Run the generator again for the selected default hue values for
-        // primary, accent and warn palettes
-        //
-        // We are doing this because the default hue value can be changed
-        // by the user when the Material theme being generated.
-        @if ($paletteName == "primary" or $paletteName == "accent" or $paletteName == "warn") {
-            // Get the color and the contrasting color for the selected
-            // default hue
-            $color: map-get($palette, "default");
-            $contrast: map-get($palette, "default-contrast");
-
-            // Generate color classes
-            @include _generate-static-color-classes($paletteName, $color, $contrast, "");
-
-            // Add color to the correct list depending on the contrasting color
-
-            // If the contrast color is dark
-            @if (rgba(black, 1) ==rgba($contrast, 1)) {
-                $dark-contrasting-classes: append($dark-contrasting-classes, unquote(".#{$paletteName}"), "comma");
-            }
-
-            // if the contrast color is light
-            @else {
-                $light-contrasting-classes: append($light-contrasting-classes, unquote(".#{$paletteName}"), "comma");
-            }
-        }
     }
 
     // Generate contrasting colors
@@ -174,32 +206,35 @@
     @include _generate-text-color-levels($light-contrasting-classes, "light");
 }
 
+@include colors-classes-static($matchaPalettes);
 // -------------------------------------------------------------------------------------------------------------------
 // @ Dynamic color classes generator
 // -------------------------------------------------------------------------------------------------------------------
 @mixin _generate-dynamic-color-classes($attribute, $colorLevel, $colorName, $background, $foreground) {
     $color: unquote("-#{$colorName}");
-    $selectors: (".#{$attribute}#{$color}", ".matcha-#{$attribute}#{$color}", ".matcha-#{$attribute}-graphic#{$color}");
+    $selector: ".#{$attribute}#{$color}"; // .background-yellow
+    $baseClassName: (".base-#{$colorName}"); // .base-yellow
 
-    @each $selector in $selectors {
-        #{$selector} {
-            #{$attribute}: map-get($colorLevel, $colorName) !important;
+    #{$selector} {
+        #{$attribute}: map-get($colorLevel, $colorName) !important;
+        &-alpha {
+            background: map-get($colorLevel, ("#{$colorName}-alpha")) !important;
+        }
+    }
 
-            &-alpha {
-                #{$attribute}: map-get($colorLevel, ("#{$colorName}-alpha")) !important;
-            }
+    #{$baseClassName} {
+        &-alpha {
+            background: map-get($colorLevel, ("#{$colorName}-alpha")) !important;
         }
     }
 
     @if ($colorName != yellow or $colorName != amber) {
-        $baseClassName: (".base-#{$colorName}");
         #{$baseClassName} {
             background: map-get($background, $colorName);
             color: map-get($foreground, text-inverse);
         }
     }
     @if ($colorName == yellow or $colorName == amber) {
-        $baseClassName: (".base-#{$colorName}");
         #{$baseClassName} {
             background: map-get($background, $colorName);
             color: map-get($foreground, static-dark-text);
@@ -207,22 +242,6 @@
     }
 }
 
-@mixin _generate-classes($prefix, $color-map, $saturation) {
-    $background: map-get($color-map, $saturation);
-    $contrast: map-get($color-map, #{$saturation}-contrast);
-
-    .#{$prefix}-#{$saturation} {
-        background: $background;
-        color: $contrast;
-    }
-    .#{$prefix}-#{$saturation}-bg {
-        background: $background;
-    }
-    .#{$prefix}-#{$saturation}-fg {
-        color: $background;
-    }
-}
-
 @mixin colors-classes-dynamic($theme) {
     $is-dark: map-get($theme, isdark);
     $primary: map-get($theme, primary);
@@ -231,6 +250,11 @@
     $background: map-get($theme, background);
     $foreground: map-get($theme, foreground);
 
+    $themePalette: (
+        "primary": $primary,
+        "accent": $accent,
+        "warn": $warn
+    );
     $colorNames: red, pink, purple, deep-purple, indigo, blue, light-blue, cyan, teal, green, light-green, lime, yellow,
         amber, orange, deep-orange, primary, accent, warn;
     $attributes: (
@@ -241,28 +265,52 @@
         stroke: $background
     );
 
-    .primary,
-    .base-primary {
-        background: map-get($primary, default);
-        color: map-get($primary, default-contrast);
+    @each $saturation in $saturationLevels {
+        // generate classes for all saturation levels of primary, accent and warn palettes
+        @include _generate-classes("primary", $primary, $saturation);
+        @include _generate-classes("accent", $accent, $saturation);
+        @include _generate-classes("warn", $warn, $saturation);
     }
 
-    .accent,
-    .base-accent {
-        background: map-get($accent, default);
-        color: map-get($accent, default-contrast);
+    @each $paletteName, $palette in $themePalette {
+        // generate
+        .base-#{$paletteName},
+        .#{$paletteName} {
+            background: map-get($palette, default);
+            color: map-get($palette, default-contrast);
+        }
+        .#{$paletteName}-bg {
+            background: map-get($palette, default) !important;
+        }
+        .#{$paletteName}-fg {
+            color: map-get($palette, default) !important;
+        }
+        .background-#{$paletteName}-alpha,
+        .base-#{$paletteName}-alpha {
+            background: rgba(map-get($palette, default), 0.2);
+        }
     }
 
-    .warn,
-    .base-warn {
-        background: map-get($warn, default);
-        color: map-get($warn, default-contrast);
+    .base-surface {
+        background: map-get($background, card);
+        color: map-get($foreground, text);
+        &-alpha {
+            background: rgba(map-get($background, card), 0.5) !important;
+        }
     }
-
-    @each $saturation in $matchaHues {
-        @include _generate-classes("primary", $primary, $saturation);
-        @include _generate-classes("accent", $accent, $saturation);
-        @include _generate-classes("warn", $warn, $saturation);
+    .base-fg {
+        background: map-get($foreground, text);
+        color: map-get($foreground, text-inverse);
+        &-alpha {
+            background: rgba(map-get($foreground, text), 0.2) !important;
+        }
+    }
+    .base-bg {
+        background: map-get($background, background);
+        color: map-get($foreground, text);
+        &-alpha {
+            background: rgba(map-get($background, background), 0.5) !important;
+        }
     }
 
     .background-transparent,
@@ -295,123 +343,75 @@
                 #{$attribute}: map-get($background, card-alpha-inverse) !important;
             }
         }
-
-        .primary-bg {
-            background: map-get($primary, default) !important;
-        }
-        .primary-fg {
-            color: map-get($primary, default) !important;
-        }
-        .background-primary-alpha {
-            background: rgba(map-get($primary, default), 0.2);
-        }
-        .accent-bg {
-            background: map-get($accent, default) !important;
-        }
-        .accent-fg {
-            color: map-get($accent, default) !important;
-        }
-        .background-accent-alpha {
-            background: rgba(map-get($accent, default), 0.2);
-        }
-
-        .warn-bg {
-            background: map-get($warn, default) !important;
-        }
-        .warn-fg {
-            color: map-get($warn, default) !important;
-        }
-        .background-warn-alpha {
-            background: rgba(map-get($warn, default), 0.2);
-        }
-
-        .#{$attribute}-primary,
-        .matcha-#{$attribute}-primary {
+        .#{$attribute}-primary {
             #{$attribute}: map-get($primary, default) !important;
         }
 
-        .#{$attribute}-accent,
-        .matcha-#{$attribute}-accent {
+        .#{$attribute}-accent {
             #{$attribute}: map-get($accent, default) !important;
         }
 
-        .#{$attribute}-warn,
-        .matcha-#{$attribute}-warn {
+        .#{$attribute}-warn {
             #{$attribute}: map-get($warn, default) !important;
         }
 
-        .#{$attribute}-error,
-        .matcha-#{$attribute}-error {
+        .#{$attribute}-error {
             #{$attribute}: map-get($background, error) !important;
         }
 
-        .#{$attribute}-info,
-        .matcha-#{$attribute}-info {
+        .#{$attribute}-info {
             #{$attribute}: map-get($background, info) !important;
         }
 
-        .#{$attribute}-success,
-        .matcha-#{$attribute}-success {
+        .#{$attribute}-success {
             #{$attribute}: map-get($background, success) !important;
         }
 
-        .#{$attribute}-warning,
-        .matcha-#{$attribute}-warning {
+        .#{$attribute}-warning {
             #{$attribute}: map-get($background, warning) !important;
         }
 
         .#{$attribute}-foreground,
         .#{$attribute}-fg,
         .#{$attribute}-base,
-        .#{$attribute}-text,
-        .matcha-#{$attribute}-foreground,
-        .matcha-#{$attribute}-fg,
-        .matcha-#{$attribute}-base,
-        .matcha-#{$attribute}-text {
+        .#{$attribute}-text {
             #{$attribute}: map-get($foreground, text) !important;
         }
 
         .#{$attribute}-fg-inverse,
         .#{$attribute}-base-inverse,
-        .matcha-#{$attribute}-text-inverse {
+        .#{$attribute}-text-inverse {
             #{$attribute}: map-get($foreground, text-inverse) !important;
         }
 
-        .#{$attribute}-surface,
-        .matcha-#{$attribute}-dialog,
-        .matcha-#{$attribute}-card {
+        .#{$attribute}-surface {
             #{$attribute}: map-get($background, card) !important;
         }
 
-        .#{$attribute}-surface-alpha,
-        .matcha-#{$attribute}-surface-alpha,
-        .matcha-#{$attribute}-card-alpha {
+        .#{$attribute}-surface-alpha {
             #{$attribute}: map-get($background, card-alpha) !important;
         }
 
-        .#{$attribute}-hover,
-        .matcha-#{$attribute}-hover,
-        .matcha-#{$attribute}-placeholder {
+        .#{$attribute}-placeholder {
             #{$attribute}: map-get($foreground, placeholder) !important;
+            &-alpha {
+                background: rgba(map-get($foreground, placeholder), 0.2) !important;
+            }
         }
 
-        .#{$attribute}-label,
-        .matcha-#{$attribute}-label {
+        .#{$attribute}-label {
             #{$attribute}: map-get($foreground, label) !important;
         }
 
-        .#{$attribute}-disabled,
-        .matcha-#{$attribute}-disabled {
+        .#{$attribute}-disabled {
             #{$attribute}: map-get($background, disabled) !important;
         }
 
-        .#{$attribute}-disabled-icon,
-        .matcha-#{$attribute}-disabled-icon {
+        .#{$attribute}-disabled-icon {
             #{$attribute}: map-get($foreground, disabled-icon) !important;
         }
 
-        .#{$attribute}-selected,
-        .matcha-#{$attribute}-selected {
+        .#{$attribute}-selected {
             #{$attribute}: map-get($background, selected-button) !important;
         }