matcha-theme 1.0.27 → 18.0.27

package/abstracts/_colors.scss

@@ -1,851 +0,0 @@
-// 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);
-        }
-        
-        .primary.matcha-button-outline .ripple, .background-primary-alpha {background: rgba(map-get($primary, 100), 0.2)}
-        .primary .ripple{background: rgba(map-get($primary-contrast, 100), 0.2)}
-        .background-primary{background: map-get($primary, 100)}
-        .border-color-primary{border-color: map-get($primary, 100)}
-        .primary.matcha-button-outline, .color-primary{color: map-get($primary, 100)}
-        .fill-primary{fill: map-get($primary, 100)}
-        .stroke-primary{stroke: map-get($primary, 100)}
-        .primary{
-            background: map-get($primary, 100);
-            color: map-get($primary-contrast, 100);
-        }
-        .accent.matcha-button-outline .ripple, .background-accent-alpha {background: rgba(map-get($accent, 100), 0.2)}
-        .accent .ripple{background: rgba(map-get($accent-contrast, 100), 0.2)}
-        .background-accent{background: map-get($accent, 100)}
-        .border-color-accent{border-color: map-get($accent, 100)}
-        .accent.matcha-button-outline, .color-accent{color: map-get($accent, 100)}
-        .fill-accent{fill: map-get($accent, 100)}
-        .stroke-accent{stroke: map-get($accent, 100)}
-        .accent{
-            background: map-get($accent, 100);
-            color: map-get($accent-contrast, 100);
-        }
-        .warn.matcha-button-outline .ripple, .background-warn-alpha {background: rgba(map-get($warn, 100), 0.2)}
-        .warn .ripple{background: rgba(map-get($warn-contrast, 100), 0.2)}
-        .background-warn{background: map-get($warn, 100)}
-        .border-color-warn{border-color: map-get($warn, 100)}
-        .warn.matcha-button-outline, .color-warn{color: map-get($warn, 100)}
-        .fill-warn{fill: map-get($warn, 100)}
-        .stroke-warn{stroke: map-get($warn, 100)}
-        .warn{
-            background: map-get($warn, 100);
-            color: map-get($warn-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, 500), 0.2)}
-        .primary .ripple{background: rgba(map-get($primary-contrast, 500), 0.2)}
-        .background-primary{background: map-get($primary, 500)}
-        .border-color-primary{border-color: map-get($primary, 500)}
-        .primary.matcha-button-outline, .color-primary{color: map-get($primary, 500)}
-        .fill-primary{fill: map-get($primary, 500)}
-        .stroke-primary{stroke: map-get($primary, 500)}
-        .primary{
-            background: map-get($primary, 500);
-            color: map-get($primary-contrast, 500);
-        }
-        .accent.matcha-button-outline .ripple, .background-accent-alpha {background: rgba(map-get($accent, 500), 0.2)}
-        .accent .ripple{background: rgba(map-get($accent-contrast, 500), 0.2)}
-        .background-accent{background: map-get($accent, 500)}
-        .border-color-accent{border-color: map-get($accent, 500)}
-        .accent.matcha-button-outline, .color-accent{color: map-get($accent, 500)}
-        .fill-accent{fill: map-get($accent, 500)}
-        .stroke-accent{stroke: map-get($accent, 500)}
-        .accent{
-            background: map-get($accent, 500);
-            color: map-get($accent-contrast, 500);
-        }
-        .warn.matcha-button-outline .ripple, .background-warn-alpha {background: rgba(map-get($warn, 500), 0.2)}
-        .warn .ripple{background: rgba(map-get($warn-contrast, 500), 0.2)}
-        .background-warn{background: map-get($warn, 500)}
-        .border-color-warn{border-color: map-get($warn, 500)}
-        .warn.matcha-button-outline, .color-warn{color: map-get($warn, 500)}
-        .fill-warn{fill: map-get($warn, 500)}
-        .stroke-warn{stroke: map-get($warn, 500)}
-        .warn{
-            background: map-get($warn, 500);
-            color: map-get($warn-contrast, 500);
-        }
-    }
-
-    $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;
-        }
-    }
-}