matcha-theme 18.0.27 → 18.1.28

package/abstracts/_colors.scss

@@ -0,0 +1,833 @@
+// Saturation Levels
+$saturationLevels: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
+
+// Hues Palette Colors
+$index: 0;
+// -------------------------------------------------------------------------------------------------------------------
+// @ Text color levels generator
+// -------------------------------------------------------------------------------------------------------------------
+@mixin _generate-text-color-levels($classes, $contrast) {
+    @if ($contrast == "dark") {
+        #{$classes} {
+            &.secondary-text,
+            .secondary-text {
+                color: rgba(0, 0, 0, 0.54) !important;
+            }
+
+            &.hint-text,
+            .hint-text,
+            &.disabled-text,
+            .disabled-text {
+                color: rgba(0, 0, 0, 0.38) !important;
+            }
+
+            &.divider,
+            .divider {
+                color: rgba(0, 0, 0, 0.12) !important;
+            }
+        }
+    } @else {
+        #{$classes} {
+            &.secondary-text,
+            .secondary-text {
+                color: rgba(255, 255, 255, 0.7) !important;
+            }
+
+            &.hint-text,
+            .hint-text,
+            &.disabled-text,
+            .disabled-text {
+                color: rgba(255, 255, 255, 0.5) !important;
+            }
+
+            &.divider,
+            .divider {
+                color: rgba(255, 255, 255, 0.12) !important;
+            }
+        }
+    }
+}
+// @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, $saturation) {
+    $colorSelector: unquote(".#{$colorName}#{$saturation}");
+
+    #{$colorSelector} {
+        background-color: $color !important;
+        color: $contrastColor !important;
+
+        &[disabled] {
+            background-color: rgba($color, 0.12) !important;
+            color: rgba($contrastColor, 0.26) !important;
+        }
+    }
+
+    #{$colorSelector}-bg {
+        background-color: $color !important;
+    }
+
+    #{$colorSelector}-fg {
+        color: $color !important;
+    }
+
+    @if ($saturation == "-500") {
+        $colorSelectorDefault: unquote(".#{$colorName}");
+
+        #{$colorSelectorDefault}-bg {
+            background-color: $color !important;
+        }
+
+        #{$colorSelectorDefault}-fg {
+            color: $color !important;
+        }
+    }
+
+    // #{$colorSelector}-border,
+    // #{$colorSelector}-border-top,
+    // #{$colorSelector}-border-right,
+    // #{$colorSelector}-border-bottom,
+    // #{$colorSelector}-border-left {
+    //     border-color: $color !important;
+    // }
+
+    // #{$colorSelector}-fill {
+    //     fill: $color !important;
+    // }
+}
+
+@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,
+                        unquote(".#{$paletteName}-#{$saturation}"),
+                        "comma"
+                    );
+                }
+
+                // if the contrast color is light
+                @else {
+                    $light-contrasting-classes: append(
+                        $light-contrasting-classes,
+                        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 ($saturation == 500) {
+            //     // 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
+    @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) {
+    $is-dark: map-get($theme, is-dark);
+    $palettes: getBaseColorsPalettes();
+    // colors from base palette
+    $red: map-get($palettes, red);
+    $red-contrast: map-get($red, 'contrast');
+    $pink: map-get($palettes, pink);
+    $pink-contrast: map-get($pink, 'contrast');
+    $purple: map-get($palettes, purple);
+    $purple-contrast: map-get($purple, 'contrast');
+    $deep-purple: map-get($palettes, deep-purple);
+    $deep-purple-contrast: map-get($deep-purple, 'contrast');
+    $indigo: map-get($palettes, indigo);
+    $indigo-contrast: map-get($indigo, 'contrast');
+    $blue: map-get($palettes, blue);
+    $blue-contrast: map-get($blue, 'contrast');
+    $light-blue: map-get($palettes, light-blue);
+    $light-blue-contrast: map-get($light-blue, 'contrast');
+    $cyan: map-get($palettes, cyan);
+    $cyan-contrast: map-get($cyan, 'contrast');
+    $teal: map-get($palettes, teal);
+    $teal-contrast: map-get($teal, 'contrast');
+    $green: map-get($palettes, green);
+    $green-contrast: map-get($green, 'contrast');
+    $light-green: map-get($palettes, light-green);
+    $light-green-contrast: map-get($light-green, 'contrast');
+    $lime: map-get($palettes, lime);
+    $lime-contrast: map-get($lime, 'contrast');
+    $yellow: map-get($palettes, yellow);
+    $yellow-contrast: map-get($yellow, 'contrast');
+    $amber: map-get($palettes, amber);
+    $amber-contrast: map-get($amber, 'contrast');
+    $orange: map-get($palettes, orange);
+    $orange-contrast: map-get($orange, 'contrast');
+    $deep-orange: map-get($palettes, deep-orange);
+    $deep-orange-contrast: map-get($deep-orange, 'contrast');
+    $brown: map-get($palettes, brown);
+    $brown-contrast: map-get($brown, 'contrast');
+    $gray: map-get($palettes, gray);
+    $grey-contrast: map-get($grey, 'contrast');
+    $blue-grey: map-get($palettes, blue-grey);
+    $blue-grey-contrast: map-get($blue-grey, 'contrast');
+
+    // colors from theme
+    $primary: map-get($theme, primary);
+    $primary-contrast: map-get($primary, 'contrast');
+    $accent: map-get($theme, accent);
+    $accent-contrast: map-get($accent, 'contrast');
+    $warn: map-get($theme, warn);
+    $warn-contrast: map-get($warn, 'contrast');
+
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    .color-unset{
+        color: map-get($foreground, text );
+        .ripple {
+            background: map-get($foreground, text );
+        }
+    }
+
+    @if ($is-dark) {
+        .red.matcha-button-outline .ripple, .background-red-alpha {background: rgba(map-get($red, 100), 0.2)}
+        .red .ripple{background: rgba(map-get($red-contrast, 100), 0.2)}
+        .background-red{background: map-get($red, 100)}
+        .border-color-red{border-color: map-get($red, 100)}
+        .red.matcha-button-outline, .color-red{color: map-get($red, 100)}
+        .fill-red{fill: map-get($red, 100)}
+        .stroke-red{stroke: map-get($red, 100)}
+        .red{
+            background: map-get($red, 100);
+            color: map-get($red-contrast, 100);
+        }
+        .pink.matcha-button-outline .ripple, .background-pink-alpha {background: rgba(map-get($pink, 100), 0.2)}
+        .pink .ripple{background: rgba(map-get($pink-contrast, 100), 0.2)}
+        .background-pink{background: map-get($pink, 100)}
+        .border-color-pink{border-color: map-get($pink, 100)}
+        .pink.matcha-button-outline, .color-pink{color: map-get($pink, 100)}
+        .fill-pink{fill: map-get($pink, 100)}
+        .stroke-pink{stroke: map-get($pink, 100)}
+        .pink{
+            background: map-get($pink, 100);
+            color: map-get($pink-contrast, 100);
+        }
+        .purple.matcha-button-outline .ripple, .background-purple-alpha {background: rgba(map-get($purple, 100), 0.2)}
+        .purple .ripple{background: rgba(map-get($purple-contrast, 100), 0.2)}
+        .background-purple{background: map-get($purple, 100)}
+        .border-color-purple{border-color: map-get($purple, 100)}
+        .purple.matcha-button-outline, .color-purple{color: map-get($purple, 100)}
+        .fill-purple{fill: map-get($purple, 100)}
+        .stroke-purple{stroke: map-get($purple, 100)}
+        .purple{
+            background: map-get($purple, 100);
+            color: map-get($purple-contrast, 100);
+        }
+        .deep-purple.matcha-button-outline .ripple, .background-deep-purple-alpha {background: rgba(map-get($deep-purple, 100), 0.2)}
+        .deep-purple .ripple{background: rgba(map-get($deep-purple-contrast, 100), 0.2)}
+        .background-deep-purple{background: map-get($deep-purple, 100)}
+        .border-color-deep-purple{border-color: map-get($deep-purple, 100)}
+        .deep-purple.matcha-button-outline, .color-deep-purple{color: map-get($deep-purple, 100)}
+        .fill-deep-purple{fill: map-get($deep-purple, 100)}
+        .stroke-deep-purple{stroke: map-get($deep-purple, 100)}
+        .deep-purple{
+            background: map-get($deep-purple, 100);
+            color: map-get($deep-purple-contrast, 100);
+        }
+        .indigo.matcha-button-outline .ripple, .background-indigo-alpha {background: rgba(map-get($indigo, 100), 0.2)}
+        .indigo .ripple{background: rgba(map-get($indigo-contrast, 100), 0.2)}
+        .background-indigo{background: map-get($indigo, 100)}
+        .border-color-indigo{border-color: map-get($indigo, 100)}
+        .indigo.matcha-button-outline, .color-indigo{color: map-get($indigo, 100)}
+        .fill-indigo{fill: map-get($indigo, 100)}
+        .stroke-indigo{stroke: map-get($indigo, 100)}
+        .indigo{
+            background: map-get($indigo, 100);
+            color: map-get($indigo-contrast, 100);
+        }
+        .blue.matcha-button-outline .ripple, .background-blue-alpha {background: rgba(map-get($blue, 100), 0.2)}
+        .blue .ripple{background: rgba(map-get($blue-contrast, 100), 0.2)}
+        .background-blue{background: map-get($blue, 100)}
+        .border-color-blue{border-color: map-get($blue, 100)}
+        .blue.matcha-button-outline, .color-blue{color: map-get($blue, 100)}
+        .fill-blue{fill: map-get($blue, 100)}
+        .stroke-blue{stroke: map-get($blue, 100)}
+        .blue{
+            background: map-get($blue, 100);
+            color: map-get($blue-contrast, 100);
+        }
+        .light-blue.matcha-button-outline .ripple, .background-light-blue-alpha {background: rgba(map-get($light-blue, 100), 0.2)}
+        .light-blue .ripple{background: rgba(map-get($light-blue-contrast, 100), 0.2)}
+        .background-light-blue{background: map-get($light-blue, 100)}
+        .border-color-light-blue{border-color: map-get($light-blue, 100)}
+        .light-blue.matcha-button-outline, .color-light-blue{color: map-get($light-blue, 100)}
+        .fill-light-blue{fill: map-get($light-blue, 100)}
+        .stroke-light-blue{stroke: map-get($light-blue, 100)}
+        .light-blue{
+            background: map-get($light-blue, 100);
+            color: map-get($light-blue-contrast, 100);
+        }
+        .cyan.matcha-button-outline .ripple, .background-cyan-alpha {background: rgba(map-get($cyan, 100), 0.2)}
+        .cyan .ripple{background: rgba(map-get($cyan-contrast, 100), 0.2)}
+        .background-cyan{background: map-get($cyan, 100)}
+        .border-color-cyan{border-color: map-get($cyan, 100)}
+        .cyan.matcha-button-outline, .color-cyan{color: map-get($cyan, 100)}
+        .fill-cyan{fill: map-get($cyan, 100)}
+        .stroke-cyan{stroke: map-get($cyan, 100)}
+        .cyan{
+            background: map-get($cyan, 100);
+            color: map-get($cyan-contrast, 100);
+        }
+        .teal.matcha-button-outline .ripple, .background-teal-alpha {background: rgba(map-get($teal, 100), 0.2)}
+        .teal .ripple{background: rgba(map-get($teal-contrast, 100), 0.2)}
+        .background-teal{background: map-get($teal, 100)}
+        .border-color-teal{border-color: map-get($teal, 100)}
+        .teal.matcha-button-outline, .color-teal{color: map-get($teal, 100)}
+        .fill-teal{fill: map-get($teal, 100)}
+        .stroke-teal{stroke: map-get($teal, 100)}
+        .teal{
+            background: map-get($teal, 100);
+            color: map-get($teal-contrast, 100);
+        }
+        .green.matcha-button-outline .ripple, .background-green-alpha {background: rgba(map-get($green, 100), 0.2)}
+        .green .ripple{background: rgba(map-get($green-contrast, 100), 0.2)}
+        .background-green{background: map-get($green, 100)}
+        .border-color-green{border-color: map-get($green, 100)}
+        .green.matcha-button-outline, .color-green{color: map-get($green, 100)}
+        .fill-green{fill: map-get($green, 100)}
+        .stroke-green{stroke: map-get($green, 100)}
+        .green{
+            background: map-get($green, 100);
+            color: map-get($green-contrast, 100);
+        }
+        .light-green.matcha-button-outline .ripple, .background-light-green-alpha {background: rgba(map-get($light-green, 100), 0.2)}
+        .light-green .ripple{background: rgba(map-get($light-green-contrast, 100), 0.2)}
+        .background-light-green{background: map-get($light-green, 100)}
+        .border-color-light-green{border-color: map-get($light-green, 100)}
+        .light-green.matcha-button-outline, .color-light-green{color: map-get($light-green, 100)}
+        .fill-light-green{fill: map-get($light-green, 100)}
+        .stroke-light-green{stroke: map-get($light-green, 100)}
+        .light-green{
+            background: map-get($light-green, 100);
+            color: map-get($light-green-contrast, 100);
+        }
+        .lime.matcha-button-outline .ripple, .background-lime-alpha {background: rgba(map-get($lime, 100), 0.2)}
+        .lime .ripple{background: rgba(map-get($lime-contrast, 100), 0.2)}
+        .background-lime{background: map-get($lime, 100)}
+        .border-color-lime{border-color: map-get($lime, 100)}
+        .lime.matcha-button-outline, .color-lime{color: map-get($lime, 100)}
+        .fill-lime{fill: map-get($lime, 100)}
+        .stroke-lime{stroke: map-get($lime, 100)}
+        .lime{
+            background: map-get($lime, 100);
+            color: map-get($lime-contrast, 100);
+        }
+        .yellow.matcha-button-outline .ripple, .background-yellow-alpha {background: rgba(map-get($yellow, 100), 0.2)}
+        .yellow .ripple{background: rgba(map-get($yellow-contrast, 100), 0.2)}
+        .background-yellow{background: map-get($yellow, 100)}
+        .border-color-yellow{border-color: map-get($yellow, 100)}
+        .yellow.matcha-button-outline, .color-yellow{color: map-get($yellow, 100)}
+        .fill-yellow{fill: map-get($yellow, 100)}
+        .stroke-yellow{stroke: map-get($yellow, 100)}
+        .yellow{
+            background: map-get($yellow, 100);
+            color: map-get($yellow-contrast, 100);
+        }
+        .amber.matcha-button-outline .ripple, .background-amber-alpha {background: rgba(map-get($amber, 100), 0.2)}
+        .amber .ripple{background: rgba(map-get($amber-contrast, 100), 0.2)}
+        .background-amber{background: map-get($amber, 100)}
+        .border-color-amber{border-color: map-get($amber, 100)}
+        .amber.matcha-button-outline, .color-amber{color: map-get($amber, 100)}
+        .fill-amber{fill: map-get($amber, 100)}
+        .stroke-amber{stroke: map-get($amber, 100)}
+        .amber{
+            background: map-get($amber, 100);
+            color: map-get($amber-contrast, 100);
+        }
+        .orange.matcha-button-outline .ripple, .background-orange-alpha {background: rgba(map-get($orange, 100), 0.2)}
+        .orange .ripple{background: rgba(map-get($orange-contrast, 100), 0.2)}
+        .background-orange{background: map-get($orange, 100)}
+        .border-color-orange{border-color: map-get($orange, 100)}
+        .orange.matcha-button-outline, .color-orange{color: map-get($orange, 100)}
+        .fill-orange{fill: map-get($orange, 100)}
+        .stroke-orange{stroke: map-get($orange, 100)}
+        .orange{
+            background: map-get($orange, 100);
+            color: map-get($orange-contrast, 100);
+        }
+        .deep-orange.matcha-button-outline .ripple, .background-deep-orange-alpha {background: rgba(map-get($deep-orange, 100), 0.2)}
+        .deep-orange .ripple{background: rgba(map-get($deep-orange-contrast, 100), 0.2)}
+        .background-deep-orange{background: map-get($deep-orange, 100)}
+        .border-color-deep-orange{border-color: map-get($deep-orange, 100)}
+        .deep-orange.matcha-button-outline, .color-deep-orange{color: map-get($deep-orange, 100)}
+        .fill-deep-orange{fill: map-get($deep-orange, 100)}
+        .stroke-deep-orange{stroke: map-get($deep-orange, 100)}
+        .deep-orange{
+            background: map-get($deep-orange, 100);
+            color: map-get($deep-orange-contrast, 100);
+        }
+        .brown.matcha-button-outline .ripple, .background-brown-alpha {background: rgba(map-get($brown, 100), 0.2)}
+        .brown .ripple{background: rgba(map-get($brown-contrast, 100), 0.2)}
+        .background-brown{background: map-get($brown, 100)}
+        .border-color-brown{border-color: map-get($brown, 100)}
+        .brown.matcha-button-outline, .color-brown{color: map-get($brown, 100)}
+        .fill-brown{fill: map-get($brown, 100)}
+        .stroke-brown{stroke: map-get($brown, 100)}
+        .brown{
+            background: map-get($brown, 100);
+            color: map-get($brown-contrast, 100);
+        }
+        .grey.matcha-button-outline .ripple, .background-grey-alpha {background: rgba(map-get($grey, 100), 0.2)}
+        .grey .ripple{background: rgba(map-get($grey-contrast, 100), 0.2)}
+        .background-grey{background: map-get($grey, 100)}
+        .border-color-grey{border-color: map-get($grey, 100)}
+        .grey.matcha-button-outline, .color-grey{color: map-get($grey, 100)}
+        .fill-grey{fill: map-get($grey, 100)}
+        .stroke-grey{stroke: map-get($grey, 100)}
+        .grey{
+            background: map-get($grey, 100);
+            color: map-get($grey-contrast, 100);
+        }
+        .blue-grey.matcha-button-outline .ripple, .background-blue-grey-alpha {background: rgba(map-get($blue-grey, 100), 0.2)}
+        .blue-grey .ripple{background: rgba(map-get($blue-grey-contrast, 100), 0.2)}
+        .background-blue-grey{background: map-get($blue-grey, 100)}
+        .border-color-blue-grey{border-color: map-get($blue-grey, 100)}
+        .blue-grey.matcha-button-outline, .color-blue-grey{color: map-get($blue-grey, 100)}
+        .fill-blue-grey{fill: map-get($blue-grey, 100)}
+        .stroke-blue-grey{stroke: map-get($blue-grey, 100)}
+        .blue-grey{
+            background: map-get($blue-grey, 100);
+            color: map-get($blue-grey-contrast, 100);
+        }
+    } @else {
+        .red.matcha-button-outline .ripple, .background-red-alpha {background: rgba(map-get($red, 500), 0.2)}
+        .red .ripple{background: rgba(map-get($red-contrast, 500), 0.2)}
+        .background-red{background: map-get($red, 500)}
+        .border-color-red{border-color: map-get($red, 500)}
+        .red.matcha-button-outline, .color-red{color: map-get($red, 500)}
+        .fill-red{fill: map-get($red, 500)}
+        .stroke-red{stroke: map-get($red, 500)}
+        .red{
+            background: map-get($red, 500);
+            color: map-get($red-contrast, 500);
+        }
+
+        .pink.matcha-button-outline .ripple, .background-pink-alpha {background: rgba(map-get($pink, 500), 0.2)}
+        .pink .ripple{background: rgba(map-get($pink-contrast, 500), 0.2)}
+        .background-pink{background: map-get($pink, 500)}
+        .border-color-pink{border-color: map-get($pink, 500)}
+        .pink.matcha-button-outline, .color-pink{color: map-get($pink, 500)}
+        .fill-pink{fill: map-get($pink, 500)}
+        .stroke-pink{stroke: map-get($pink, 500)}
+        .pink{
+            background: map-get($pink, 500);
+            color: map-get($pink-contrast, 500);
+        }
+        .purple.matcha-button-outline .ripple, .background-purple-alpha {background: rgba(map-get($purple, 500), 0.2)}
+        .purple .ripple{background: rgba(map-get($purple-contrast, 500), 0.2)}
+        .background-purple{background: map-get($purple, 500)}
+        .border-color-purple{border-color: map-get($purple, 500)}
+        .purple.matcha-button-outline, .color-purple{color: map-get($purple, 500)}
+        .fill-purple{fill: map-get($purple, 500)}
+        .stroke-purple{stroke: map-get($purple, 500)}
+        .purple{
+            background: map-get($purple, 500);
+            color: map-get($purple-contrast, 500);
+        }
+        .deep-purple.matcha-button-outline .ripple, .background-deep-purple-alpha {background: rgba(map-get($deep-purple, 500), 0.2)}
+        .deep-purple .ripple{background: rgba(map-get($deep-purple-contrast, 500), 0.2)}
+        .background-deep-purple{background: map-get($deep-purple, 500)}
+        .border-color-deep-purple{border-color: map-get($deep-purple, 500)}
+        .deep-purple.matcha-button-outline, .color-deep-purple{color: map-get($deep-purple, 500)}
+        .fill-deep-purple{fill: map-get($deep-purple, 500)}
+        .stroke-deep-purple{stroke: map-get($deep-purple, 500)}
+        .deep-purple{
+            background: map-get($deep-purple, 500);
+            color: map-get($deep-purple-contrast, 500);
+        }
+        .indigo.matcha-button-outline .ripple, .background-indigo-alpha {background: rgba(map-get($indigo, 500), 0.2)}
+        .indigo .ripple{background: rgba(map-get($indigo-contrast, 500), 0.2)}
+        .background-indigo{background: map-get($indigo, 500)}
+        .border-color-indigo{border-color: map-get($indigo, 500)}
+        .indigo.matcha-button-outline, .color-indigo{color: map-get($indigo, 500)}
+        .fill-indigo{fill: map-get($indigo, 500)}
+        .stroke-indigo{stroke: map-get($indigo, 500)}
+        .indigo{
+            background: map-get($indigo, 500);
+            color: map-get($indigo-contrast, 500);
+        }
+        .blue.matcha-button-outline .ripple, .background-blue-alpha {background: rgba(map-get($blue, 500), 0.2)}
+        .blue .ripple{background: rgba(map-get($blue-contrast, 500), 0.2)}
+        .background-blue{background: map-get($blue, 500)}
+        .border-color-blue{border-color: map-get($blue, 500)}
+        .blue.matcha-button-outline, .color-blue{color: map-get($blue, 500)}
+        .fill-blue{fill: map-get($blue, 500)}
+        .stroke-blue{stroke: map-get($blue, 500)}
+        .blue{
+            background: map-get($blue, 500);
+            color: map-get($blue-contrast, 500);
+        }
+        .light-blue.matcha-button-outline .ripple, .background-light-blue-alpha {background: rgba(map-get($light-blue, 500), 0.2)}
+        .light-blue .ripple{background: rgba(map-get($light-blue-contrast, 500), 0.2)}
+        .background-light-blue{background: map-get($light-blue, 500)}
+        .border-color-light-blue{border-color: map-get($light-blue, 500)}
+        .light-blue.matcha-button-outline, .color-light-blue{color: map-get($light-blue, 500)}
+        .fill-light-blue{fill: map-get($light-blue, 500)}
+        .stroke-light-blue{stroke: map-get($light-blue, 500)}
+        .light-blue{
+            background: map-get($light-blue, 500);
+            color: map-get($light-blue-contrast, 500);
+        }
+        .cyan.matcha-button-outline .ripple, .background-cyan-alpha {background: rgba(map-get($cyan, 500), 0.2)}
+        .cyan .ripple{background: rgba(map-get($cyan-contrast, 500), 0.2)}
+        .background-cyan{background: map-get($cyan, 500)}
+        .border-color-cyan{border-color: map-get($cyan, 500)}
+        .cyan.matcha-button-outline, .color-cyan{color: map-get($cyan, 500)}
+        .fill-cyan{fill: map-get($cyan, 500)}
+        .stroke-cyan{stroke: map-get($cyan, 500)}
+        .cyan{
+            background: map-get($cyan, 500);
+            color: map-get($cyan-contrast, 500);
+        }
+        .teal.matcha-button-outline .ripple, .background-teal-alpha {background: rgba(map-get($teal, 500), 0.2)}
+        .teal .ripple{background: rgba(map-get($teal-contrast, 500), 0.2)}
+        .background-teal{background: map-get($teal, 500)}
+        .border-color-teal{border-color: map-get($teal, 500)}
+        .teal.matcha-button-outline, .color-teal{color: map-get($teal, 500)}
+        .fill-teal{fill: map-get($teal, 500)}
+        .stroke-teal{stroke: map-get($teal, 500)}
+        .teal{
+            background: map-get($teal, 500);
+            color: map-get($teal-contrast, 500);
+        }
+        .green.matcha-button-outline .ripple, .background-green-alpha {background: rgba(map-get($green, 500), 0.2)}
+        .green .ripple{background: rgba(map-get($green-contrast, 500), 0.2)}
+        .background-green{background: map-get($green, 500)}
+        .border-color-green{border-color: map-get($green, 500)}
+        .green.matcha-button-outline, .color-green{color: map-get($green, 500)}
+        .fill-green{fill: map-get($green, 500)}
+        .stroke-green{stroke: map-get($green, 500)}
+        .green{
+            background: map-get($green, 500);
+            color: map-get($green-contrast, 500);
+        }
+        .light-green.matcha-button-outline .ripple, .background-light-green-alpha {background: rgba(map-get($light-green, 500), 0.2)}
+        .light-green .ripple{background: rgba(map-get($light-green-contrast, 500), 0.2)}
+        .background-light-green{background: map-get($light-green, 500)}
+        .border-color-light-green{border-color: map-get($light-green, 500)}
+        .light-green.matcha-button-outline, .color-light-green{color: map-get($light-green, 500)}
+        .fill-light-green{fill: map-get($light-green, 500)}
+        .stroke-light-green{stroke: map-get($light-green, 500)}
+        .light-green{
+            background: map-get($light-green, 500);
+            color: map-get($light-green-contrast, 500);
+        }
+        .lime.matcha-button-outline .ripple, .background-lime-alpha {background: rgba(map-get($lime, 500), 0.2)}
+        .lime .ripple{background: rgba(map-get($lime-contrast, 500), 0.2)}
+        .background-lime{background: map-get($lime, 500)}
+        .border-color-lime{border-color: map-get($lime, 500)}
+        .lime.matcha-button-outline, .color-lime{color: map-get($lime, 500)}
+        .fill-lime{fill: map-get($lime, 500)}
+        .stroke-lime{stroke: map-get($lime, 500)}
+        .lime{
+            background: map-get($lime, 500);
+            color: map-get($lime-contrast, 500);
+        }
+        .yellow.matcha-button-outline .ripple, .background-yellow-alpha {background: rgba(map-get($yellow, 500), 0.2)}
+        .yellow .ripple{background: rgba(map-get($yellow-contrast, 500), 0.2)}
+        .background-yellow{background: map-get($yellow, 500)}
+        .border-color-yellow{border-color: map-get($yellow, 500)}
+        .yellow.matcha-button-outline, .color-yellow{color: map-get($yellow, 500)}
+        .fill-yellow{fill: map-get($yellow, 500)}
+        .stroke-yellow{stroke: map-get($yellow, 500)}
+        .yellow{
+            background: map-get($yellow, 500);
+            color: map-get($yellow-contrast, 500);
+        }
+        .amber.matcha-button-outline .ripple, .background-amber-alpha {background: rgba(map-get($amber, 500), 0.2)}
+        .amber .ripple{background: rgba(map-get($amber-contrast, 500), 0.2)}
+        .background-amber{background: map-get($amber, 500)}
+        .border-color-amber{border-color: map-get($amber, 500)}
+        .amber.matcha-button-outline, .color-amber{color: map-get($amber, 500)}
+        .fill-amber{fill: map-get($amber, 500)}
+        .stroke-amber{stroke: map-get($amber, 500)}
+        .amber{
+            background: map-get($amber, 500);
+            color: map-get($amber-contrast, 500);
+        }
+        .orange.matcha-button-outline .ripple, .background-orange-alpha {background: rgba(map-get($orange, 500), 0.2)}
+        .orange .ripple{background: rgba(map-get($orange-contrast, 500), 0.2)}
+        .background-orange{background: map-get($orange, 500)}
+        .border-color-orange{border-color: map-get($orange, 500)}
+        .orange.matcha-button-outline, .color-orange{color: map-get($orange, 500)}
+        .fill-orange{fill: map-get($orange, 500)}
+        .stroke-orange{stroke: map-get($orange, 500)}
+        .orange{
+            background: map-get($orange, 500);
+            color: map-get($orange-contrast, 500);
+        }
+        .deep-orange.matcha-button-outline .ripple, .background-deep-orange-alpha {background: rgba(map-get($deep-orange, 500), 0.2)}
+        .deep-orange .ripple{background: rgba(map-get($deep-orange-contrast, 500), 0.2)}
+        .background-deep-orange{background: map-get($deep-orange, 500)}
+        .border-color-deep-orange{border-color: map-get($deep-orange, 500)}
+        .deep-orange.matcha-button-outline, .color-deep-orange{color: map-get($deep-orange, 500)}
+        .fill-deep-orange{fill: map-get($deep-orange, 500)}
+        .stroke-deep-orange{stroke: map-get($deep-orange, 500)}
+        .deep-orange{
+            background: map-get($deep-orange, 500);
+            color: map-get($deep-orange-contrast, 500);
+        }
+        .brown.matcha-button-outline .ripple, .background-brown-alpha {background: rgba(map-get($brown, 500), 0.2)}
+        .brown .ripple{background: rgba(map-get($brown-contrast, 500), 0.2)}
+        .background-brown{background: map-get($brown, 500)}
+        .border-color-brown{border-color: map-get($brown, 500)}
+        .brown.matcha-button-outline, .color-brown{color: map-get($brown, 500)}
+        .fill-brown{fill: map-get($brown, 500)}
+        .stroke-brown{stroke: map-get($brown, 500)}
+        .brown{
+            background: map-get($brown, 500);
+            color: map-get($brown-contrast, 500);
+        }
+        .grey.matcha-button-outline .ripple, .background-grey-alpha {background: rgba(map-get($grey, 500), 0.2)}
+        .grey .ripple{background: rgba(map-get($grey-contrast, 500), 0.2)}
+        .background-grey{background: map-get($grey, 500)}
+        .border-color-grey{border-color: map-get($grey, 500)}
+        .grey.matcha-button-outline, .color-grey{color: map-get($grey, 500)}
+        .fill-grey{fill: map-get($grey, 500)}
+        .stroke-grey{stroke: map-get($grey, 500)}
+        .grey{
+            background: map-get($grey, 500);
+            color: map-get($grey-contrast, 500);
+        }
+        .blue-grey.matcha-button-outline .ripple, .background-blue-grey-alpha {background: rgba(map-get($blue-grey, 500), 0.2)}
+        .blue-grey .ripple{background: rgba(map-get($blue-grey-contrast, 500), 0.2)}
+        .background-blue-grey{background: map-get($blue-grey, 500)}
+        .border-color-blue-grey{border-color: map-get($blue-grey, 500)}
+        .blue-grey.matcha-button-outline, .color-blue-grey{color: map-get($blue-grey, 500)}
+        .fill-blue-grey{fill: map-get($blue-grey, 500)}
+        .stroke-blue-grey{stroke: map-get($blue-grey, 500)}
+        .blue-grey{
+            background: map-get($blue-grey, 500);
+            color: map-get($blue-grey-contrast, 500);
+        }
+    }
+
+    .primary.matcha-button-outline .ripple, .background-primary-alpha {background: rgba(map-get($primary, default), 0.2)}
+    .primary .ripple{background: rgba(map-get($primary, default-contrast), 0.2)}
+    .background-primary{background: map-get($primary, default)}
+    .border-color-primary{border-color: map-get($primary, default)}
+    .primary.matcha-button-outline, .color-primary{color: map-get($primary, default)}
+    .fill-primary{fill: map-get($primary, default)}
+    .stroke-primary{stroke: map-get($primary, default)}
+    .primary{
+        background: map-get($primary, default);
+        color: map-get($primary, default-contrast);
+    }
+
+    .accent.matcha-button-outline .ripple, .background-accent-alpha {background: rgba(map-get($accent, default), 0.2)}
+    .accent .ripple{background: rgba(map-get($accent, default-contrast), 0.2)}
+    .background-accent{background: map-get($accent, default)}
+    .border-color-accent{border-color: map-get($accent, default)}
+    .accent.matcha-button-outline, .color-accent{color: map-get($accent, default)}
+    .fill-accent{fill: map-get($accent, default)}
+    .stroke-accent{stroke: map-get($accent, default)}
+    .accent{
+        background: map-get($accent, default);
+        color: map-get($accent, default-contrast);
+    }
+
+    .warn.matcha-button-outline .ripple, .background-warn-alpha {background: rgba(map-get($warn, default), 0.2)}
+    .warn .ripple{background: rgba(map-get($warn, default-contrast), 0.2)}
+    .background-warn{background: map-get($warn, default)}
+    .border-color-warn{border-color: map-get($warn, default)}
+    .warn.matcha-button-outline, .color-warn{color: map-get($warn, default)}
+    .fill-warn{fill: map-get($warn, default)}
+    .stroke-warn{stroke: map-get($warn, default)}
+    .warn{
+        background: map-get($warn, default);
+        color: map-get($warn, default-contrast);
+    }
+
+    .basic.matcha-button-outline .ripple, .background-basic-alpha {background: rgba(map-get($foreground, base), 0.2)}
+    .basic .ripple{background: rgba(map-get($foreground, base), 0.2)}
+    .background-basic{background: map-get($background, card)}
+    .border-color-basic{border-color: map-get($foreground, base)}
+    .basic.matcha-button-outline, .color-basic{color: map-get($foreground, base)}
+    .fill-basic{fill: map-get($background, card)}
+    .stroke-basic{stroke: map-get($foreground, base)}
+    .basic{
+        background: map-get($background, card);
+        color: map-get($foreground, base);
+    }
+
+
+    $attributes: (
+        color: $foreground,
+        border-color: $foreground,
+        background: $background,
+        fill: $background,
+        stroke: $background
+    );
+
+    .base-surface {
+        background: map-get($background, card);
+        color: map-get($foreground, text);
+        &-alpha {
+            background: rgba(map-get($background, card), 0.5) !important;
+        }
+    }
+    .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: map-get($background, background-alpha) !important;
+        }
+    }
+
+    .background-transparent,
+    .matcha-background-transparent {
+        background: transparent;
+    }
+
+    @each $attribute, $colorLevel in $attributes {
+        @if ($attribute != "color") {
+            .#{$attribute}-bg {
+                #{$attribute}: map-get($background, background) !important;
+            }
+            .#{$attribute}-bg-alpha {
+                #{$attribute}: map-get($background, background-alpha) !important;
+            }
+            .#{$attribute}-bg-inverse {
+                #{$attribute}: map-get($background, background-inverse) !important;
+            }
+            .#{$attribute}-bg-alpha-inverse {
+                #{$attribute}: map-get($background, background-alpha-inverse) !important;
+            }
+            .#{$attribute}-surface-inverse {
+                #{$attribute}: map-get($background, card-inverse) !important;
+            }
+            .#{$attribute}-surface-alpha-inverse {
+                #{$attribute}: map-get($background, card-alpha-inverse) !important;
+            }
+        }
+        .#{$attribute}-error {
+            #{$attribute}: map-get($background, error) !important;
+        }
+        .#{$attribute}-info {
+            #{$attribute}: map-get($background, info) !important;
+        }
+        .#{$attribute}-success {
+            #{$attribute}: map-get($background, success) !important;
+        }
+        .#{$attribute}-warning {
+            #{$attribute}: map-get($background, warning) !important;
+        }
+        .#{$attribute}-fg,
+        .#{$attribute}-base,
+        .#{$attribute}-text {
+            #{$attribute}: map-get($foreground, text) !important;
+        }
+
+        .#{$attribute}-fg-inverse,
+        .#{$attribute}-base-inverse,
+        .#{$attribute}-text-inverse {
+            #{$attribute}: map-get($foreground, text-inverse) !important;
+        }
+
+        .#{$attribute}-surface {
+            #{$attribute}: map-get($background, card) !important;
+        }
+
+        .#{$attribute}-surface-alpha {
+            #{$attribute}: map-get($background, card-alpha) !important;
+        }
+
+        .#{$attribute}-placeholder {
+            #{$attribute}: map-get($foreground, placeholder) !important;
+            &-alpha {
+                background: rgba(map-get($foreground, placeholder), 0.2) !important;
+            }
+        }
+
+        .#{$attribute}-label {
+            #{$attribute}: map-get($foreground, label) !important;
+        }
+
+        .#{$attribute}-disabled {
+            #{$attribute}: map-get($background, disabled) !important;
+        }
+
+        .#{$attribute}-disabled-icon {
+            #{$attribute}: map-get($foreground, disabled-icon) !important;
+        }
+
+        .#{$attribute}-selected {
+            #{$attribute}: map-get($background, selected-button) !important;
+        }
+    }
+}