matcha-theme 19.31.0 → 19.35.0

package/abstracts/_colors.scss

@@ -133,13 +133,31 @@ $index: 0;
 // -------------------------------------------------------------------------------------------------------------------
 // @ Dynamic color classes generator
 // -------------------------------------------------------------------------------------------------------------------
-
 @mixin colors-classes-dynamic($theme) {
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
     $is-dark: map-get($theme, is-dark);
-    $palettes: getBaseColorsPalettes();
+    $get-shade: if($is-dark, 100, 500); // Define $red-shade com base no valor de $is-dark
+
+    // 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');
+
     // colors from base palette
-    $red: map-get($palettes, red);
-    $red-contrast: map-get($red, 'contrast');
+    $palettes: getBaseColorsPalettes();
+
+    $red-palette: map-get($palettes, red);
+    $red-contrast-palette: map-get($red-palette, 'contrast');
+    $red-color: map-get($red-palette, $get-shade);
+    $red-color-alpha: rgba($red-color, 0.2);
+    $red-contrast: map-get($red-contrast-palette, $get-shade);
+    $red-contrast-alpha: rgba($red-contrast, 0.2);
+
     $pink: map-get($palettes, pink);
     $pink-contrast: map-get($pink, 'contrast');
     $purple: map-get($palettes, purple);
@@ -177,16 +195,7 @@ $index: 0;
     $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);
+    @include colors-classes-static($theme);
 
     .color-unset{
         color: map-get($foreground, text );
@@ -195,385 +204,386 @@ $index: 0;
         }
     }
 
-    $get-shade: if($is-dark, 100, 500); // Define $red-shade com base no valor de $is-dark
-
-    .background-red-alpha {background: rgba(map-get($red, $get-shade), 0.2)}
-    .red .ripple{background: rgba(map-get($red-contrast, $get-shade), 0.2)}
-    .background-red{background: map-get($red, $get-shade)}
-    .border-color-red{border-color: map-get($red, $get-shade)}
-    .color-red{color: map-get($red, $get-shade)!important}
-    .fill-red{fill: map-get($red, $get-shade)}
-    .stroke-red{stroke: map-get($red, $get-shade)}
-    .color-red-alpha{color: rgba(map-get($red, $get-shade),0.2)!important}
+    .background-red-alpha {background: getRedAlpha($theme)}
+    .red .ripple{background: getRedAlpha($theme)}
+    .background-red{background: getRed($theme)}
+    .border-color-red{border-color: getRed($theme)}
+    .color-red{color: getRed($theme)!important}
+    .fill-red{fill: getRed($theme)}
+    .stroke-red{stroke: getRed($theme)}
+    .color-red-alpha{color: getRedAlpha($theme)!important}
     .red-alpha{
-        background: rgba(map-get($red, $get-shade),0.2);
-        color: map-get($red-contrast, $get-shade);
+        background: getRedAlpha($theme);
+        color: getRedContrast($theme);
     }
     .red{
-        background: map-get($red, $get-shade);
-        color: map-get($red-contrast, $get-shade);
-    }
-    .background-pink-alpha {background: rgba(map-get($pink, $get-shade), 0.2)}
-    .pink .ripple{background: rgba(map-get($pink-contrast, $get-shade), 0.2)}
-    .background-pink{background: map-get($pink, $get-shade)}
-    .border-color-pink{border-color: map-get($pink, $get-shade)}
-    .color-pink{color: map-get($pink, $get-shade)!important}
-    .fill-pink{fill: map-get($pink, $get-shade)}
-    .stroke-pink{stroke: map-get($pink, $get-shade)}
-    .color-pink-alpha{color: rgba(map-get($pink, $get-shade),0.2)!important}
+        background: getRed($theme);
+        color: getRedContrast($theme);
+    }
+    .background-pink-alpha {background: getPinkAlpha($theme)}
+    .pink .ripple{background: getPinkAlpha($theme)}
+    .background-pink{background: getPink($theme)}
+    .border-color-pink{border-color: getPink($theme)}
+    .color-pink{color: getPink($theme)!important}
+    .fill-pink{fill: getPink($theme)}
+    .stroke-pink{stroke: getPink($theme)}
+    .color-pink-alpha{color: getPinkAlpha($theme)!important}
     .pink-alpha{
-        background: rgba(map-get($pink, $get-shade),0.2);
-        color: map-get($pink-contrast, $get-shade);
+        background: getPinkAlpha($theme);
+        color: getPinkContrast($theme);
     }
     .pink{
-        background: map-get($pink, $get-shade);
-        color: map-get($pink-contrast, $get-shade);
-    }
-    .background-purple-alpha {background: rgba(map-get($purple, $get-shade), 0.2)}
-    .purple .ripple{background: rgba(map-get($purple-contrast, $get-shade), 0.2)}
-    .background-purple{background: map-get($purple, $get-shade)}
-    .border-color-purple{border-color: map-get($purple, $get-shade)}
-    .color-purple{color: map-get($purple, $get-shade)!important}
-    .fill-purple{fill: map-get($purple, $get-shade)}
-    .stroke-purple{stroke: map-get($purple, $get-shade)}
-    .color-purple-alpha{color: rgba(map-get($purple, $get-shade),0.2)!important}
+        background: getPink($theme);
+        color: getPinkContrast($theme);
+    }
+    .background-purple-alpha {background: getPurpleAlpha($theme)}
+    .purple .ripple{background: getPurpleAlpha($theme)}
+    .background-purple{background: getPurple($theme)}
+    .border-color-purple{border-color: getPurple($theme)}
+    .color-purple{color: getPurple($theme)!important}
+    .fill-purple{fill: getPurple($theme)}
+    .stroke-purple{stroke: getPurple($theme)}
+    .color-purple-alpha{color: getPurpleAlpha($theme)!important}
     .purple-alpha{
-        background: rgba(map-get($purple, $get-shade),0.2);
-        color: map-get($purple-contrast, $get-shade);
+        background: getPurpleAlpha($theme);
+        color: getPurpleContrast($theme);
     }
     .purple{
-        background: map-get($purple, $get-shade);
-        color: map-get($purple-contrast, $get-shade);
-    }
-    .background-deep-purple-alpha {background: rgba(map-get($deep-purple, $get-shade), 0.2)}
-    .deep-purple .ripple{background: rgba(map-get($deep-purple-contrast, $get-shade), 0.2)}
-    .background-deep-purple{background: map-get($deep-purple, $get-shade)}
-    .border-color-deep-purple{border-color: map-get($deep-purple, $get-shade)}
-    .color-deep-purple{color: map-get($deep-purple, $get-shade)!important}
-    .fill-deep-purple{fill: map-get($deep-purple, $get-shade)}
-    .stroke-deep-purple{stroke: map-get($deep-purple, $get-shade)}
-    .color-deep-purple-alpha{color: rgba(map-get($deep-purple, $get-shade),0.2)!important}
+        background: getPurple($theme);
+        color: getPurpleContrast($theme);
+    }
+    .background-deep-purple-alpha {background: getDeepPurpleAlpha($theme)}
+    .deep-purple .ripple{background: getDeepPurpleAlpha($theme)}
+    .background-deep-purple{background: getDeepPurple($theme)}
+    .border-color-deep-purple{border-color: getDeepPurple($theme)}
+    .color-deep-purple{color: getDeepPurple($theme)!important}
+    .fill-deep-purple{fill: getDeepPurple($theme)}
+    .stroke-deep-purple{stroke: getDeepPurple($theme)}
+    .color-deep-purple-alpha{color: getDeepPurpleAlpha($theme)!important}
     .deep-purple-alpha{
-        background: rgba(map-get($deep-purple, $get-shade),0.2);
-        color: map-get($deep-purple-contrast, $get-shade);
+        background: getDeepPurpleAlpha($theme);
+        color: getDeepPurpleContrast($theme);
     }
     .deep-purple{
-        background: map-get($deep-purple, $get-shade);
-        color: map-get($deep-purple-contrast, $get-shade);
-    }
-    .background-indigo-alpha {background: rgba(map-get($indigo, $get-shade), 0.2)}
-    .indigo .ripple{background: rgba(map-get($indigo-contrast, $get-shade), 0.2)}
-    .background-indigo{background: map-get($indigo, $get-shade)}
-    .border-color-indigo{border-color: map-get($indigo, $get-shade)}
-    .color-indigo{color: map-get($indigo, $get-shade)!important}
-    .fill-indigo{fill: map-get($indigo, $get-shade)}
-    .stroke-indigo{stroke: map-get($indigo, $get-shade)}
-    .color-indigo-alpha{color: rgba(map-get($indigo, $get-shade),0.2)!important}
+        background: getDeepPurple($theme);
+        color: getDeepPurpleContrast($theme);
+    }
+    .background-indigo-alpha {background: getIndigoAlpha($theme)}
+    .indigo .ripple{background: getIndigoAlpha($theme)}
+    .background-indigo{background: getIndigo($theme)}
+    .border-color-indigo{border-color: getIndigo($theme)}
+    .color-indigo{color: getIndigo($theme)!important}
+    .fill-indigo{fill: getIndigo($theme)}
+    .stroke-indigo{stroke: getIndigo($theme)}
+    .color-indigo-alpha{color: getIndigoAlpha($theme)!important}
     .indigo-alpha{
-        background: rgba(map-get($indigo, $get-shade),0.2);
-        color: map-get($indigo-contrast, $get-shade);
+        background: getIndigoAlpha($theme);
+        color: getIndigoContrast($theme);
     }
     .indigo{
-        background: map-get($indigo, $get-shade);
-        color: map-get($indigo-contrast, $get-shade);
-    }
-    .background-blue-alpha {background: rgba(map-get($blue, $get-shade), 0.2)}
-    .blue .ripple{background: rgba(map-get($blue-contrast, $get-shade), 0.2)}
-    .background-blue{background: map-get($blue, $get-shade)}
-    .border-color-blue{border-color: map-get($blue, $get-shade)}
-    .color-blue{color: map-get($blue, $get-shade)!important}
-    .fill-blue{fill: map-get($blue, $get-shade)}
-    .stroke-blue{stroke: map-get($blue, $get-shade)}
-    .color-blue-alpha{color: rgba(map-get($blue, $get-shade),0.2)!important}
+        background: getIndigo($theme);
+        color: getIndigoContrast($theme);
+    }
+    .background-blue-alpha {background: getBlueAlpha($theme)}
+    .blue .ripple{background: getBlueAlpha($theme)}
+    .background-blue{background: getBlue($theme)}
+    .border-color-blue{border-color: getBlue($theme)}
+    .color-blue{color: getBlue($theme)!important}
+    .fill-blue{fill: getBlue($theme)}
+    .stroke-blue{stroke: getBlue($theme)}
+    .color-blue-alpha{color: getBlueAlpha($theme)!important}
     .blue-alpha{
-        background: rgba(map-get($blue, $get-shade),0.2);
-        color: map-get($blue-contrast, $get-shade);
+        background: getBlueAlpha($theme);
+        color: getBlueContrast($theme);
     }
     .blue{
-        background: map-get($blue, $get-shade);
-        color: map-get($blue-contrast, $get-shade);
-    }
-    .background-light-blue-alpha {background: rgba(map-get($light-blue, $get-shade), 0.2)}
-    .light-blue .ripple{background: rgba(map-get($light-blue-contrast, $get-shade), 0.2)}
-    .background-light-blue{background: map-get($light-blue, $get-shade)}
-    .border-color-light-blue{border-color: map-get($light-blue, $get-shade)}
-    .color-light-blue{color: map-get($light-blue, $get-shade)!important}
-    .fill-light-blue{fill: map-get($light-blue, $get-shade)}
-    .stroke-light-blue{stroke: map-get($light-blue, $get-shade)}
-    .color-light-blue-alpha{color: rgba(map-get($light-blue, $get-shade),0.2)!important}
+        background: getBlue($theme);
+        color: getBlueContrast($theme);
+    }
+    .background-light-blue-alpha {background: getLightBlueAlpha($theme)}
+    .light-blue .ripple{background: getLightBlueAlpha($theme)}
+    .background-light-blue{background: getLightBlue($theme)}
+    .border-color-light-blue{border-color: getLightBlue($theme)}
+    .color-light-blue{color: getLightBlue($theme)!important}
+    .fill-light-blue{fill: getLightBlue($theme)}
+    .stroke-light-blue{stroke: getLightBlue($theme)}
+    .color-light-blue-alpha{color: getLightBlueAlpha($theme)!important}
     .light-blue-alpha{
-        background: rgba(map-get($light-blue, $get-shade),0.2);
-        color: map-get($light-blue-contrast, $get-shade);
+        background: getLightBlueAlpha($theme);
+        color: getLightBlueContrast($theme);
     }
     .light-blue{
-        background: map-get($light-blue, $get-shade);
-        color: map-get($light-blue-contrast, $get-shade);
-    }
-    .background-cyan-alpha {background: rgba(map-get($cyan, $get-shade), 0.2)}
-    .cyan .ripple{background: rgba(map-get($cyan-contrast, $get-shade), 0.2)}
-    .background-cyan{background: map-get($cyan, $get-shade)}
-    .border-color-cyan{border-color: map-get($cyan, $get-shade)}
-    .color-cyan{color: map-get($cyan, $get-shade)!important}
-    .fill-cyan{fill: map-get($cyan, $get-shade)}
-    .stroke-cyan{stroke: map-get($cyan, $get-shade)}
-    .color-cyan-alpha{color: rgba(map-get($cyan, $get-shade),0.2)!important}
+        background: getLightBlue($theme);
+        color: getLightBlueContrast($theme);
+    }
+    .background-cyan-alpha {background: getCyanAlpha($theme)}
+    .cyan .ripple{background: getCyanAlpha($theme)}
+    .background-cyan{background: getCyan($theme)}
+    .border-color-cyan{border-color: getCyan($theme)}
+    .color-cyan{color: getCyan($theme)!important}
+    .fill-cyan{fill: getCyan($theme)}
+    .stroke-cyan{stroke: getCyan($theme)}
+    .color-cyan-alpha{color: getCyanAlpha($theme)!important}
     .cyan-alpha{
-        background: rgba(map-get($cyan, $get-shade),0.2);
-        color: map-get($cyan-contrast, $get-shade);
+        background: getCyanAlpha($theme);
+        color: getCyanContrast($theme);
     }
     .cyan{
-        background: map-get($cyan, $get-shade);
-        color: map-get($cyan-contrast, $get-shade);
-    }
-    .background-teal-alpha {background: rgba(map-get($teal, $get-shade), 0.2)}
-    .teal .ripple{background: rgba(map-get($teal-contrast, $get-shade), 0.2)}
-    .background-teal{background: map-get($teal, $get-shade)}
-    .border-color-teal{border-color: map-get($teal, $get-shade)}
-    .color-teal{color: map-get($teal, $get-shade)!important}
-    .fill-teal{fill: map-get($teal, $get-shade)}
-    .stroke-teal{stroke: map-get($teal, $get-shade)}
-    .color-teal-alpha{color: rgba(map-get($teal, $get-shade),0.2)!important}
+        background: getCyan($theme);
+        color: getCyanContrast($theme);
+    }
+    .background-teal-alpha {background: getTealAlpha($theme)}
+    .teal .ripple{background: getTealAlpha($theme)}
+    .background-teal{background: getTeal($theme)}
+    .border-color-teal{border-color: getTeal($theme)}
+    .color-teal{color: getTeal($theme)!important}
+    .fill-teal{fill: getTeal($theme)}
+    .stroke-teal{stroke: getTeal($theme)}
+    .color-teal-alpha{color: getTealAlpha($theme)!important}
     .teal-alpha{
-        background: rgba(map-get($teal, $get-shade),0.2);
-        color: map-get($teal-contrast, $get-shade);
+        background: getTealAlpha($theme);
+        color: getTealContrast($theme);
     }
     .teal{
-        background: map-get($teal, $get-shade);
-        color: map-get($teal-contrast, $get-shade);
-    }
-    .background-green-alpha {background: rgba(map-get($green, $get-shade), 0.2)}
-    .green .ripple{background: rgba(map-get($green-contrast, $get-shade), 0.2)}
-    .background-green{background: map-get($green, $get-shade)}
-    .border-color-green{border-color: map-get($green, $get-shade)}
-    .color-green{color: map-get($green, $get-shade)!important}
-    .fill-green{fill: map-get($green, $get-shade)}
-    .stroke-green{stroke: map-get($green, $get-shade)}
-    .color-green-alpha{color: rgba(map-get($green, $get-shade),0.2)!important}
+        background: getTeal($theme);
+        color: getTealContrast($theme);
+    }
+    .background-green-alpha {background: getGreenAlpha($theme)}
+    .green .ripple{background: getGreenAlpha($theme)}
+    .background-green{background: getGreen($theme)}
+    .border-color-green{border-color: getGreen($theme)}
+    .color-green{color: getGreen($theme)!important}
+    .fill-green{fill: getGreen($theme)}
+    .stroke-green{stroke: getGreen($theme)}
+    .color-green-alpha{color: getGreenAlpha($theme)!important}
     .green-alpha{
-        background: rgba(map-get($green, $get-shade),0.2);
-        color: map-get($green-contrast, $get-shade);
+        background: getGreenAlpha($theme);
+        color: getGreenContrast($theme);
     }
     .green{
-        background: map-get($green, $get-shade);
-        color: map-get($green-contrast, $get-shade);
-    }
-    .background-light-green-alpha {background: rgba(map-get($light-green, $get-shade), 0.2)}
-    .light-green .ripple{background: rgba(map-get($light-green-contrast, $get-shade), 0.2)}
-    .background-light-green{background: map-get($light-green, $get-shade)}
-    .border-color-light-green{border-color: map-get($light-green, $get-shade)}
-    .color-light-green{color: map-get($light-green, $get-shade)!important}
-    .fill-light-green{fill: map-get($light-green, $get-shade)}
-    .stroke-light-green{stroke: map-get($light-green, $get-shade)}
-    .color-light-green-alpha{color: rgba(map-get($light-green, $get-shade),0.2)!important}
+        background: getGreen($theme);
+        color: getGreenContrast($theme);
+    }
+    .background-light-green-alpha {background: getLightGreenAlpha($theme)}
+    .light-green .ripple{background: getLightGreenAlpha($theme)}
+    .background-light-green{background: getLightGreen($theme)}
+    .border-color-light-green{border-color: getLightGreen($theme)}
+    .color-light-green{color: getLightGreen($theme)!important}
+    .fill-light-green{fill: getLightGreen($theme)}
+    .stroke-light-green{stroke: getLightGreen($theme)}
+    .color-light-green-alpha{color: getLightGreenAlpha($theme)!important}
     .light-green-alpha{
-        background: rgba(map-get($light-green, $get-shade),0.2);
-        color: map-get($light-green-contrast, $get-shade);
+        background: getLightGreenAlpha($theme);
+        color: getLightGreenContrast($theme);
     }
     .light-green{
-        background: map-get($light-green, $get-shade);
-        color: map-get($light-green-contrast, $get-shade);
-    }
-    .background-lime-alpha {background: rgba(map-get($lime, $get-shade), 0.2)}
-    .lime .ripple{background: rgba(map-get($lime-contrast, $get-shade), 0.2)}
-    .background-lime{background: map-get($lime, $get-shade)}
-    .border-color-lime{border-color: map-get($lime, $get-shade)}
-    .color-lime{color: map-get($lime, $get-shade)!important}
-    .fill-lime{fill: map-get($lime, $get-shade)}
-    .stroke-lime{stroke: map-get($lime, $get-shade)}
-    .color-lime-alpha{color: rgba(map-get($lime, $get-shade),0.2)!important}
+        background: getLightGreen($theme);
+        color: getLightGreenContrast($theme);
+    }
+    .background-lime-alpha {background: getLimeAlpha($theme)}
+    .lime .ripple{background: getLimeAlpha($theme)}
+    .background-lime{background: getLime($theme)}
+    .border-color-lime{border-color: getLime($theme)}
+    .color-lime{color: getLime($theme)!important}
+    .fill-lime{fill: getLime($theme)}
+    .stroke-lime{stroke: getLime($theme)}
+    .color-lime-alpha{color: getLimeAlpha($theme)!important}
     .lime-alpha{
-        background: rgba(map-get($lime, $get-shade),0.2);
-        color: map-get($lime-contrast, $get-shade);
+        background: getLimeAlpha($theme);
+        color: getLimeContrast($theme);
     }
     .lime{
-        background: map-get($lime, $get-shade);
-        color: map-get($lime-contrast, $get-shade);
-    }
-    .background-yellow-alpha {background: rgba(map-get($yellow, $get-shade), 0.2)}
-    .yellow .ripple{background: rgba(map-get($yellow-contrast, $get-shade), 0.2)}
-    .background-yellow{background: map-get($yellow, $get-shade)}
-    .border-color-yellow{border-color: map-get($yellow, $get-shade)}
-    .color-yellow{color: map-get($yellow, $get-shade)!important}
-    .fill-yellow{fill: map-get($yellow, $get-shade)}
-    .stroke-yellow{stroke: map-get($yellow, $get-shade)}
-    .color-yellow-alpha{color: rgba(map-get($yellow, $get-shade),0.2)!important}
+        background: getLime($theme);
+        color: getLimeContrast($theme);
+    }
+    .background-yellow-alpha {background: getYellowAlpha($theme)}
+    .yellow .ripple{background: getYellowAlpha($theme)}
+    .background-yellow{background: getYellow($theme)}
+    .border-color-yellow{border-color: getYellow($theme)}
+    .color-yellow{color: getYellow($theme)!important}
+    .fill-yellow{fill: getYellow($theme)}
+    .stroke-yellow{stroke: getYellow($theme)}
+    .color-yellow-alpha{color: getYellowAlpha($theme)!important}
     .yellow-alpha{
-        background: rgba(map-get($yellow, $get-shade),0.2);
-        color: map-get($yellow-contrast, $get-shade);
+        background: getYellowAlpha($theme);
+        color: getYellowContrast($theme);
     }
     .yellow{
-        background: map-get($yellow, $get-shade);
-        color: map-get($yellow-contrast, $get-shade);
-    }
-    .background-amber-alpha {background: rgba(map-get($amber, $get-shade), 0.2)}
-    .amber .ripple{background: rgba(map-get($amber-contrast, $get-shade), 0.2)}
-    .background-amber{background: map-get($amber, $get-shade)}
-    .border-color-amber{border-color: map-get($amber, $get-shade)}
-    .color-amber{color: map-get($amber, $get-shade)!important}
-    .fill-amber{fill: map-get($amber, $get-shade)}
-    .stroke-amber{stroke: map-get($amber, $get-shade)}
-    .color-amber-alpha{color: rgba(map-get($amber, $get-shade),0.2)!important}
+        background: getYellow($theme);
+        color: getYellowContrast($theme);
+    }
+    .background-amber-alpha {background: getAmberAlpha($theme)}
+    .amber .ripple{background: getAmberAlpha($theme)}
+    .background-amber{background: getAmber($theme)}
+    .border-color-amber{border-color: getAmber($theme)}
+    .color-amber{color: getAmber($theme)!important}
+    .fill-amber{fill: getAmber($theme)}
+    .stroke-amber{stroke: getAmber($theme)}
+    .color-amber-alpha{color: getAmberAlpha($theme)!important}
     .amber-alpha{
-        background: rgba(map-get($amber, $get-shade),0.2);
-        color: map-get($amber-contrast, $get-shade);
+        background: getAmberAlpha($theme);
+        color: getAmberContrast($theme);
     }
     .amber{
-        background: map-get($amber, $get-shade);
-        color: map-get($amber-contrast, $get-shade);
-    }
-    .background-orange-alpha {background: rgba(map-get($orange, $get-shade), 0.2)}
-    .orange .ripple{background: rgba(map-get($orange-contrast, $get-shade), 0.2)}
-    .background-orange{background: map-get($orange, $get-shade)}
-    .border-color-orange{border-color: map-get($orange, $get-shade)}
-    .color-orange{color: map-get($orange, $get-shade)!important}
-    .fill-orange{fill: map-get($orange, $get-shade)}
-    .stroke-orange{stroke: map-get($orange, $get-shade)}
-    .color-orange-alpha{color: rgba(map-get($orange, $get-shade),0.2)!important}
+        background: getAmber($theme);
+        color: getAmberContrast($theme);
+    }
+    .background-orange-alpha {background: getOrangeAlpha($theme)}
+    .orange .ripple{background: getOrangeAlpha($theme)}
+    .background-orange{background: getOrange($theme)}
+    .border-color-orange{border-color: getOrange($theme)}
+    .color-orange{color: getOrange($theme)!important}
+    .fill-orange{fill: getOrange($theme)}
+    .stroke-orange{stroke: getOrange($theme)}
+    .color-orange-alpha{color: getOrangeAlpha($theme)!important}
     .orange-alpha{
-        background: rgba(map-get($orange, $get-shade),0.2);
-        color: map-get($orange-contrast, $get-shade);
+        background: getOrangeAlpha($theme);
+        color: getOrangeContrast($theme);
     }
     .orange{
-        background: map-get($orange, $get-shade);
-        color: map-get($orange-contrast, $get-shade);
-    }
-    .background-deep-orange-alpha {background: rgba(map-get($deep-orange, $get-shade), 0.2)}
-    .deep-orange .ripple{background: rgba(map-get($deep-orange-contrast, $get-shade), 0.2)}
-    .background-deep-orange{background: map-get($deep-orange, $get-shade)}
-    .border-color-deep-orange{border-color: map-get($deep-orange, $get-shade)}
-    .color-deep-orange{color: map-get($deep-orange, $get-shade)!important}
-    .fill-deep-orange{fill: map-get($deep-orange, $get-shade)}
-    .stroke-deep-orange{stroke: map-get($deep-orange, $get-shade)}
-    .color-deep-orange-alpha{color: rgba(map-get($deep-orange, $get-shade),0.2)!important}
+        background: getOrange($theme);
+        color: getOrangeContrast($theme);
+    }
+    .background-deep-orange-alpha {background: getDeepOrangeAlpha($theme)}
+    .deep-orange .ripple{background: getDeepOrangeAlpha($theme)}
+    .background-deep-orange{background: getDeepOrange($theme)}
+    .border-color-deep-orange{border-color: getDeepOrange($theme)}
+    .color-deep-orange{color: getDeepOrange($theme)!important}
+    .fill-deep-orange{fill: getDeepOrange($theme)}
+    .stroke-deep-orange{stroke: getDeepOrange($theme)}
+    .color-deep-orange-alpha{color: getDeepOrangeAlpha($theme)!important}
     .deep-orange-alpha{
-        background: rgba(map-get($deep-orange, $get-shade),0.2);
-        color: map-get($deep-orange-contrast, $get-shade);
+        background: getDeepOrangeAlpha($theme);
+        color: getDeepOrangeContrast($theme);
     }
     .deep-orange{
-        background: map-get($deep-orange, $get-shade);
-        color: map-get($deep-orange-contrast, $get-shade);
-    }
-    .background-brown-alpha {background: rgba(map-get($brown, $get-shade), 0.2)}
-    .brown .ripple{background: rgba(map-get($brown-contrast, $get-shade), 0.2)}
-    .background-brown{background: map-get($brown, $get-shade)}
-    .border-color-brown{border-color: map-get($brown, $get-shade)}
-    .color-brown{color: map-get($brown, $get-shade)!important}
-    .fill-brown{fill: map-get($brown, $get-shade)}
-    .stroke-brown{stroke: map-get($brown, $get-shade)}
-    .color-brown-alpha{color: rgba(map-get($brown, $get-shade),0.2)!important}
+        background: getDeepOrange($theme);
+        color: getDeepOrangeContrast($theme);
+    }
+    .background-brown-alpha {background: getBrownAlpha($theme)}
+    .brown .ripple{background: getBrownAlpha($theme)}
+    .background-brown{background: getBrown($theme)}
+    .border-color-brown{border-color: getBrown($theme)}
+    .color-brown{color: getBrown($theme)!important}
+    .fill-brown{fill: getBrown($theme)}
+    .stroke-brown{stroke: getBrown($theme)}
+    .color-brown-alpha{color: getBrownAlpha($theme)!important}
     .brown-alpha{
-        background: rgba(map-get($brown, $get-shade),0.2);
-        color: map-get($brown-contrast, $get-shade);
+        background: getBrownAlpha($theme);
+        color: getBrownContrast($theme);
     }
     .brown{
-        background: map-get($brown, $get-shade);
-        color: map-get($brown-contrast, $get-shade);
-    }
-    .background-grey-alpha {background: rgba(map-get($grey, $get-shade), 0.2)}
-    .grey .ripple{background: rgba(map-get($grey-contrast, $get-shade), 0.2)}
-    .background-grey{background: map-get($grey, $get-shade)}
-    .border-color-grey{border-color: map-get($grey, $get-shade)}
-    .color-grey{color: map-get($grey, $get-shade)!important}
-    .fill-grey{fill: map-get($grey, $get-shade)}
-    .stroke-grey{stroke: map-get($grey, $get-shade)}
-    .color-grey-alpha{color: rgba(map-get($grey, $get-shade),0.2)!important}
+        background: getBrown($theme);
+        color: getBrownContrast($theme);
+    }
+    .background-grey-alpha {background: getGreyAlpha($theme)}
+    .grey .ripple{background: getGreyAlpha($theme)}
+    .background-grey{background: getGrey($theme)}
+    .border-color-grey{border-color: getGrey($theme)}
+    .color-grey{color: getGrey($theme)!important}
+    .fill-grey{fill: getGrey($theme)}
+    .stroke-grey{stroke: getGrey($theme)}
+    .color-grey-alpha{color: getGreyAlpha($theme)!important}
     .grey-alpha{
-        background: rgba(map-get($grey, $get-shade),0.2);
-        color: map-get($grey-contrast, $get-shade);
+        background: getGreyAlpha($theme);
+        color: getGreyContrast($theme);
     }
     .grey{
-        background: map-get($grey, $get-shade);
-        color: map-get($grey-contrast, $get-shade);
-    }
-    .background-blue-grey-alpha {background: rgba(map-get($blue-grey, $get-shade), 0.2)}
-    .blue-grey .ripple{background: rgba(map-get($blue-grey-contrast, $get-shade), 0.2)}
-    .background-blue-grey{background: map-get($blue-grey, $get-shade)}
-    .border-color-blue-grey{border-color: map-get($blue-grey, $get-shade)}
-    .color-blue-grey{color: map-get($blue-grey, $get-shade)!important}
-    .fill-blue-grey{fill: map-get($blue-grey, $get-shade)}
-    .stroke-blue-grey{stroke: map-get($blue-grey, $get-shade)}
-    .color-blue-grey-alpha{color: rgba(map-get($blue-grey, $get-shade),0.2)!important}
+        background: getGrey($theme);
+        color: getGreyContrast($theme);
+    }
+    .background-blue-grey-alpha {background: getBlueGreyAlpha($theme)}
+    .blue-grey .ripple{background: getBlueGreyAlpha($theme)}
+    .background-blue-grey{background: getBlueGrey($theme)}
+    .border-color-blue-grey{border-color: getBlueGrey($theme)}
+    .color-blue-grey{color: getBlueGrey($theme)!important}
+    .fill-blue-grey{fill: getBlueGrey($theme)}
+    .stroke-blue-grey{stroke: getBlueGrey($theme)}
+    .color-blue-grey-alpha{color: getBlueGreyAlpha($theme)!important}
     .blue-grey-alpha{
-        background: rgba(map-get($blue-grey, $get-shade),0.2);
-        color: map-get($blue-grey-contrast, $get-shade);
+        background: getBlueGreyAlpha($theme);
+        color: getBlueGreyContrast($theme);
     }
     .blue-grey{
-        background: map-get($blue-grey, $get-shade);
-        color: map-get($blue-grey-contrast, $get-shade);
-    }
-
-    .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)}
-    .color-primary{color: map-get($primary, default)!important}
-    .fill-primary{fill: map-get($primary, default)}
-    .stroke-primary{stroke: map-get($primary, default)}
-    .color-primary-alpha{color: rgba(map-get($primary, default),0.2)!important}
+        background: getBlueGrey($theme);
+        color: getBlueGreyContrast($theme);
+    }
+
+    .background-primary-alpha {background: getPrimaryAlpha($theme)}
+    .primary .ripple{background: getPrimaryContrastAlpha($theme)}
+    .background-primary{background: getPrimary($theme)}
+    .border-color-primary{border-color: getPrimary($theme)}
+    .color-primary{color: getPrimary($theme)!important}
+    .fill-primary{fill: getPrimary($theme)}
+    .stroke-primary{stroke: getPrimary($theme)}
+    .color-primary-alpha{color: getPrimaryAlpha($theme)!important}
     .primary-alpha{
-        background: rgba(map-get($primary, default),0.2);
-        color: map-get($primary, default-contrast);
+        background: getPrimaryAlpha($theme);
+        color: getPrimaryContrast($theme);
     }
     .primary{
-        background: map-get($primary, default);
-        color: map-get($primary, default-contrast);
-    }
-
-    .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)}
-    .color-accent{color: map-get($accent, default)!important}
-    .fill-accent{fill: map-get($accent, default)}
-    .stroke-accent{stroke: map-get($accent, default)}
-    .color-accent-alpha{color: rgba(map-get($accent, default),0.2)!important}
+        background: getPrimary($theme);
+        color: getPrimaryContrast($theme);
+    }
+
+    .background-accent-alpha {background: getAccentAlpha($theme)}
+    .accent .ripple{background: getAccentContrastAlpha($theme)}
+    .background-accent{background: getAccent($theme)}
+    .border-color-accent{border-color: getAccent($theme)}
+    .color-accent{color: getAccent($theme)!important}
+    .fill-accent{fill: getAccent($theme)}
+    .stroke-accent{stroke: getAccent($theme)}
+    .color-accent-alpha{color: getAccentAlpha($theme)!important}
     .accent-alpha{
-        background: rgba(map-get($accent, default),0.2);
-        color: map-get($accent, default-contrast);
+        background: getAccentAlpha($theme);
+        color: getAccentContrast($theme);
     }
     .accent{
-        background: map-get($accent, default);
-        color: map-get($accent, default-contrast);
-    }
-
-    .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)}
-    .color-warn{color: map-get($warn, default)!important}
-    .fill-warn{fill: map-get($warn, default)}
-    .stroke-warn{stroke: map-get($warn, default)}
-    .color-warn-alpha{color: rgba(map-get($warn, default),0.2)!important}
+        background: getAccent($theme);
+        color: getAccentContrast($theme);
+    }
+
+    .background-warn-alpha {background: getWarnAlpha($theme)}
+    .warn .ripple{background: getWarnContrastAlpha($theme)}
+    .background-warn{background: getWarn($theme)}
+    .border-color-warn{border-color: getWarn($theme)}
+    .color-warn{color: getWarn($theme)!important}
+    .fill-warn{fill: getWarn($theme)}
+    .stroke-warn{stroke: getWarn($theme)}
+    .color-warn-alpha{color: getWarnAlpha($theme)!important}
     .warn-alpha{
-        background: rgba(map-get($warn, default),0.2);
-        color: map-get($warn, default-contrast);
+        background: getWarnAlpha($theme);
+        color: getWarnContrast($theme);
     }
     .warn{
-        background: map-get($warn, default);
-        color: map-get($warn, default-contrast);
-    }
-
-    .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)}
-    .color-basic{color: map-get($foreground, base)!important}
-    .fill-basic{fill: map-get($background, card)}
-    .stroke-basic{stroke: map-get($foreground, base)}
-    .color-basic-alpha{color: rgba(map-get($foreground, base),0.2)!important}
+        background: getWarn($theme);
+        color: getWarnContrast($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: rgba(map-get($foreground, base), 0.2);
-        color: map-get($foreground, base);
+        background: getForegroundAlpha($theme);
+        color: getForeground($theme);
     }
     .basic{
-        background: map-get($background, card);
-        color: map-get($foreground, base);
+        background: getSurface($theme);
+        color: getForeground($theme);
     }
 
     .color-unset {
         color: unset;
     }
 
+    .background-transparent {
+        background: transparent;
+    }
 
     $attributes: (
         color: $foreground,
@@ -583,106 +593,65 @@ $index: 0;
         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 {
-        background: transparent;
-    }
-
     @each $attribute, $colorLevel in $attributes {
         @if ($attribute != "color") {
             .#{$attribute}-bg {
-                #{$attribute}: map-get($background, background) !important;
+                #{$attribute}: getBackground($theme) !important;
             }
             .#{$attribute}-bg-alpha {
-                #{$attribute}: map-get($background, background-alpha) !important;
+                #{$attribute}: getBackgroundAlpha($theme) !important;
             }
             .#{$attribute}-bg-inverse {
-                #{$attribute}: map-get($background, background-inverse) !important;
+                #{$attribute}: getBackgroundInverse($theme) !important;
             }
             .#{$attribute}-bg-alpha-inverse {
-                #{$attribute}: map-get($background, background-alpha-inverse) !important;
+                #{$attribute}: getBackgroundAlphaInverse($theme) !important;
             }
             .#{$attribute}-surface-inverse {
-                #{$attribute}: map-get($background, card-inverse) !important;
+                #{$attribute}: getSurfaceInverse($theme) !important;
             }
             .#{$attribute}-surface-alpha-inverse {
-                #{$attribute}: map-get($background, card-alpha-inverse) !important;
+                #{$attribute}: getSurfaceAlphaInverse($theme) !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}: getForeground($theme) !important;
         }
 
         .#{$attribute}-fg-inverse,
         .#{$attribute}-base-inverse,
         .#{$attribute}-text-inverse {
-            #{$attribute}: map-get($foreground, text-inverse) !important;
+            #{$attribute}: getForegroundInverse($theme) !important;
         }
 
         .#{$attribute}-surface {
-            #{$attribute}: map-get($background, card) !important;
+            #{$attribute}: getSurface($theme) !important;
         }
 
         .#{$attribute}-surface-alpha {
-            #{$attribute}: map-get($background, card-alpha) !important;
+            #{$attribute}: getSurfaceAlpha($theme) !important;
         }
 
         .#{$attribute}-placeholder {
-            #{$attribute}: map-get($foreground, placeholder) !important;
+            #{$attribute}: getGrey($theme) !important;
             &-alpha {
-                background: rgba(map-get($foreground, placeholder), 0.2) !important;
+                background: rgba(getGrey($theme), 0.2) !important;
             }
         }
 
         .#{$attribute}-label {
-            #{$attribute}: map-get($foreground, label) !important;
+            #{$attribute}: getBlueGrey($theme) !important;
         }
 
         .#{$attribute}-disabled {
-            #{$attribute}: map-get($background, disabled) !important;
+            #{$attribute}: getDisabled($theme) !important;
         }
 
         .#{$attribute}-disabled-icon {
-            #{$attribute}: map-get($foreground, disabled-icon) !important;
-        }
-
-        .#{$attribute}-selected {
-            #{$attribute}: map-get($background, selected-button) !important;
+            #{$attribute}: getDisabledContrast($theme) !important;
         }
     }
 }