matcha-theme 20.188.0 → 20.189.0

package/abstracts/_colors.scss

@@ -3,12 +3,14 @@ $saturationLevels: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200,
 
 // Hues Palette Colors
 $index: 0;
+
 // -------------------------------------------------------------------------------------------------------------------
 // @ Text color levels generator
 // -------------------------------------------------------------------------------------------------------------------
 @mixin _generate-text-color-levels($classes, $contrast) {
-    @if ($contrast == "dark") {
+    @if ($contrast =="dark") {
         #{$classes} {
+
             &.secondary-text,
             .secondary-text {
                 color: rgba(0, 0, 0, 0.54) !important;
@@ -26,8 +28,11 @@ $index: 0;
                 color: rgba(0, 0, 0, 0.12) !important;
             }
         }
-    } @else {
+    }
+
+    @else {
         #{$classes} {
+
             &.secondary-text,
             .secondary-text {
                 color: rgba(255, 255, 255, 0.7) !important;
@@ -72,7 +77,7 @@ $index: 0;
         color: $color !important;
     }
 
-    @if ($saturation == "-500") {
+    @if ($saturation =="-500") {
         $colorSelectorDefault: unquote(".#{$colorName}");
 
         #{$colorSelectorDefault}-bg {
@@ -87,56 +92,59 @@ $index: 0;
 
 @mixin colors-classes-static($theme) {
     $palettes: getAllPalettes($theme);
-    $light-contrasting-classes: ();
-    $dark-contrasting-classes: ();
-
-    @each $paletteName, $palette in $palettes {
-        // $contrasts: map-get($red, "contrast");
-        // $contrasts =  all contrast colors of $red palette
-        $contrasts: map-get($palette, "contrast");
-
-        @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, "-#{$saturation}");
-
-                // If the contrast color is dark
-                @if (rgba(black, 1) ==rgba($contrast, 1)) {
-                    $dark-contrasting-classes: append(
-                        $dark-contrasting-classes,
+    $light-contrasting-classes: (
+    );
+$dark-contrasting-classes: (
+);
+
+@each $paletteName, $palette in $palettes {
+    // $contrasts: map-get($red, "contrast");
+    // $contrasts =  all contrast colors of $red palette
+    $contrasts: map-get($palette, "contrast");
+
+    @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, "-#{$saturation}");
+
+            // If the contrast color is dark
+            @if (rgba(black, 1)==rgba($contrast, 1)) {
+                $dark-contrasting-classes: append($dark-contrasting-classes,
                         unquote(".#{$paletteName}-#{$saturation}"),
                         "comma"
                     );
-                }
+            }
 
-                // if the contrast color is light
-                @else {
-                    $light-contrasting-classes: append(
-                        $light-contrasting-classes,
+            // if the contrast color is light
+            @else {
+                $light-contrasting-classes: append($light-contrasting-classes,
                         unquote(".#{$paletteName}-#{$saturation}"),
                         "comma"
                     );
-                }
             }
         }
     }
+}
 
-    // Generate contrasting colors
-    @include _generate-text-color-levels($dark-contrasting-classes, "dark");
-    @include _generate-text-color-levels($light-contrasting-classes, "light");
+// Generate contrasting colors
+@include _generate-text-color-levels($dark-contrasting-classes, "dark");
+@include _generate-text-color-levels($light-contrasting-classes, "light");
 }
 
 // -------------------------------------------------------------------------------------------------------------------
 // @ Dynamic color classes generator
 // -------------------------------------------------------------------------------------------------------------------
 @mixin colors-classes-dynamic($theme) {
+    $primary: map-get($theme, primary);
     $accent: map-get($theme, accent);
+    $danger: map-get($theme, danger);
+    $success: map-get($theme, success);
     $warn: map-get($theme, warn);
-    $primary: map-get($theme, primary);
+    $info: map-get($theme, info);
     $background: map-get($theme, background);
     $foreground: map-get($theme, foreground);
 
@@ -162,123 +170,190 @@ $index: 0;
         blue-grey: getBlueGrey,
         primary: getPrimary,
         accent: getAccent,
+        danger: getDanger,
         warn: getWarn,
+        success: getSuccess,
+        info: getInfo,
         disabled: getDisabled,
     );
 
-    @include colors-classes-static($theme);
+@include colors-classes-static($theme);
 
-    .color-unset{
-        color: map-get($foreground, foreground );
-        .ripple {
-            background: map-get($foreground, foreground );
-        }
+.color-unset {
+    color: map-get($foreground, foreground);
+
+    .ripple {
+        background: map-get($foreground, foreground);
     }
-    @each $colorName, $colorFn in $color-functions {
-        .background-#{$colorName}-alpha {background: call(#{$colorFn}Alpha, $theme)}
-        .#{$colorName} .ripple{background: call(#{$colorFn}Alpha, $theme)}
-        .background-#{$colorName}{background: call(#{$colorFn}, $theme)}
-        .border-color-#{$colorName}{border-color: call(#{$colorFn}, $theme)}
-        .color-#{$colorName}{color: call(#{$colorFn}, $theme)!important}
-        .fill-#{$colorName}{fill: call(#{$colorFn}, $theme)}
-        .stroke-#{$colorName}{stroke: call(#{$colorFn}, $theme)}
-        .color-#{$colorName}-alpha{color: call(#{$colorFn}Alpha, $theme)!important}
-        .#{$colorName}-alpha{
-            background: call(#{$colorFn}Alpha, $theme);
-            color: call(#{$colorFn}, $theme);
-        }
-        .#{$colorName}{
-            background: call(#{$colorFn}, $theme);
-            color: call(#{$colorFn}Contrast, $theme);
-        }
+}
+
+@each $colorName, $colorFn in $color-functions {
+    .background-#{$colorName}-alpha {
+        background: call(#{$colorFn}Alpha, $theme)
     }
 
-    .background-basic-alpha {background: getForegroundAlpha($theme)}
-    .basic .ripple{background: getForegroundAlpha($theme)}
-    .background-basic{background: getSurface($theme)}
-    .border-color-basic{border-color:getForeground($theme)}
-    .color-basic{color: getForeground($theme)!important}
-    .fill-basic{fill: getSurface($theme)}
-    .stroke-basic{stroke: getForeground($theme)}
-    .color-basic-alpha{color: getForegroundAlpha($theme)!important}
-    .basic-alpha{
-        background: getForegroundAlpha($theme);
-        color: getForeground($theme);
+    .#{$colorName} .ripple {
+        background: call(#{$colorFn}Alpha, $theme)
     }
-    .basic{
-        background: getSurface($theme);
-        color: getForeground($theme);
+
+    .background-#{$colorName} {
+        background: call(#{$colorFn}, $theme)
     }
 
-    .color-unset {
-        color: unset;
+    .border-color-#{$colorName} {
+        border-color: call(#{$colorFn}, $theme)
     }
 
-    .background-transparent {
-        background: transparent;
+    .color-#{$colorName} {
+        color: call(#{$colorFn}, $theme) !important
     }
 
-    $attributes: (color, border-color, background, fill, stroke
-    );
-    @each $attribute in $attributes {
-        @if ($attribute != "color") {
-            .#{$attribute}-bg {
-                #{$attribute}: getBackground($theme) !important;
-            }
-            .#{$attribute}-bg-alpha {
-                #{$attribute}: getBackgroundAlpha($theme) !important;
-            }
-            .#{$attribute}-bg-inverse {
-                #{$attribute}: getBackgroundInverse($theme) !important;
-            }
-            .#{$attribute}-bg-alpha-inverse {
-                #{$attribute}: getBackgroundAlphaInverse($theme) !important;
-            }
-            .#{$attribute}-surface-inverse {
-                #{$attribute}: getSurfaceInverse($theme) !important;
-            }
-            .#{$attribute}-surface-alpha-inverse {
-                #{$attribute}: getSurfaceAlphaInverse($theme) !important;
-            }
-        }
+    .fill-#{$colorName} {
+        fill: call(#{$colorFn}, $theme)
+    }
 
-        .#{$attribute}-fg,
-        .#{$attribute}-base,
-        .#{$attribute}-text {
-            #{$attribute}: getForeground($theme) !important;
-        }
+    .stroke-#{$colorName} {
+        stroke: call(#{$colorFn}, $theme)
+    }
+
+    .color-#{$colorName}-alpha {
+        color: call(#{$colorFn}Alpha, $theme) !important
+    }
+
+    .#{$colorName}-alpha {
+        background: call(#{$colorFn}Alpha, $theme);
+        color: call(#{$colorFn}, $theme);
+    }
+
+    .#{$colorName} {
+        background: call(#{$colorFn}, $theme);
+        color: call(#{$colorFn}Contrast, $theme);
+    }
+}
+
+.background-basic-alpha {
+    background: getForegroundAlpha($theme)
+}
+
+.basic .ripple {
+    background: getForegroundAlpha($theme)
+}
+
+.background-basic {
+    background: getSurface($theme)
+}
+
+.border-color-basic {
+    border-color: getForeground($theme)
+}
+
+.color-basic {
+    color: getForeground($theme) !important
+}
+
+.fill-basic {
+    fill: getSurface($theme)
+}
+
+.stroke-basic {
+    stroke: getForeground($theme)
+}
+
+.color-basic-alpha {
+    color: getForegroundAlpha($theme) !important
+}
+
+.basic-alpha {
+    background: getForegroundAlpha($theme);
+    color: getForeground($theme);
+}
+
+.basic {
+    background: getSurface($theme);
+    color: getForeground($theme);
+}
+
+.color-unset {
+    color: unset;
+}
 
-        .#{$attribute}-fg-inverse,
-        .#{$attribute}-base-inverse,
-        .#{$attribute}-text-inverse {
-            #{$attribute}: getForegroundInverse($theme) !important;
+.background-transparent {
+    background: transparent;
+}
+
+$attributes: (
+    color,
+    border-color,
+    background,
+    fill,
+    stroke
+);
+
+@each $attribute in $attributes {
+    @if ($attribute !="color") {
+        .#{$attribute}-bg {
+            #{$attribute}: getBackground($theme) !important;
         }
 
-        .#{$attribute}-surface {
-            #{$attribute}: getSurface($theme) !important;
+        .#{$attribute}-bg-alpha {
+            #{$attribute}: getBackgroundAlpha($theme) !important;
         }
 
-        .#{$attribute}-surface-alpha {
-            #{$attribute}: getSurfaceAlpha($theme) !important;
+        .#{$attribute}-bg-inverse {
+            #{$attribute}: getBackgroundInverse($theme) !important;
         }
 
-        .#{$attribute}-placeholder {
-            #{$attribute}: getGrey($theme) !important;
-            &-alpha {
-                background: rgba(getGrey($theme), 0.2) !important;
-            }
+        .#{$attribute}-bg-alpha-inverse {
+            #{$attribute}: getBackgroundAlphaInverse($theme) !important;
         }
 
-        .#{$attribute}-label {
-            #{$attribute}: getBlueGrey($theme) !important;
+        .#{$attribute}-surface-inverse {
+            #{$attribute}: getSurfaceInverse($theme) !important;
         }
 
-        .#{$attribute}-disabled {
-            #{$attribute}: getDisabled($theme) !important;
+        .#{$attribute}-surface-alpha-inverse {
+            #{$attribute}: getSurfaceAlphaInverse($theme) !important;
         }
+    }
+
+    .#{$attribute}-fg,
+    .#{$attribute}-base,
+    .#{$attribute}-text {
+        #{$attribute}: getForeground($theme) !important;
+    }
+
+    .#{$attribute}-fg-inverse,
+    .#{$attribute}-base-inverse,
+    .#{$attribute}-text-inverse {
+        #{$attribute}: getForegroundInverse($theme) !important;
+    }
+
+    .#{$attribute}-surface {
+        #{$attribute}: getSurface($theme) !important;
+    }
 
-        .#{$attribute}-disabled-icon {
-            #{$attribute}: getDisabledContrast($theme) !important;
+    .#{$attribute}-surface-alpha {
+        #{$attribute}: getSurfaceAlpha($theme) !important;
+    }
+
+    .#{$attribute}-placeholder {
+        #{$attribute}: getGrey($theme) !important;
+
+        &-alpha {
+            background: rgba(getGrey($theme), 0.2) !important;
         }
     }
+
+    .#{$attribute}-label {
+        #{$attribute}: getBlueGrey($theme) !important;
+    }
+
+    .#{$attribute}-disabled {
+        #{$attribute}: getDisabled($theme) !important;
+    }
+
+    .#{$attribute}-disabled-icon {
+        #{$attribute}: getDisabledContrast($theme) !important;
+    }
 }
+}