matcha-theme 19.31.0 → 19.33.0

package/components/matcha-buttons.scss

@@ -95,20 +95,17 @@ a[matcha-button] {
     &[size="large"],
     &[size="huge"] {
         min-width: 24px;
-        &.stroked {
-            box-shadow: 0px 0px 0px 2px inset;
-        }
     }
 
     @include generate-matcha-button-size-classes($helper-breakpoints);
 
 
     &:hover{
-        filter: brightness(1.05);
+        // filter: brightness(1.02);
     }
 
     &:active{
-        filter: brightness(1.1);
+        // filter: brightness(0.98);
     }
 
     &[disabled] {
@@ -190,483 +187,451 @@ a[matcha-button] {
 }
 
 @mixin matcha-button-theme($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');
-    $grey: map-get($palettes, grey);
-    $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);
-
-    $get-shade: if($is-dark, 100, 500); // Define $red-shade com base no valor de $is-dark
 
     button[matcha-button],
     a[matcha-button] {
         &:not([color]) .ripple {
-            background: rgba(map-get($foreground, base), 0.2)
+            background: getForegroundAlpha($theme)
         }
         // red
-        &[color="red"][outline]:not([outline="false"]) .ripple {
-            background: rgba(map-get($red, $get-shade), 0.2)
+        &[color="red"][outline]:not([outline="false"]) .ripple,
+        &[color="red"][basic]:not([basic="false"]) .ripple {
+            background: getRedAlpha($theme)
         }
         &[color="red"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($red, $get-shade), 0.2);
-            color: map-get($red, $get-shade);
+            background: getRedAlpha($theme);
+            color: getRed($theme);
         }
         &[color="red"][outline]:not([outline="false"]),
         &[color="red"][link]:not([link="false"]),
         &[color="red"][basic]:not([basic="false"]) {
-            color: map-get($red, $get-shade)!important
+            color: getRed($theme)!important
         }
         &[color="red"]{
-            background: map-get($red, $get-shade);
-            color: map-get($red-contrast, $get-shade);
+            background: getRed($theme);
+            color: getRedContrast($theme);
         }
-        &[color="red"] .ripple{background: rgba(map-get($red-contrast, $get-shade), 0.2)}
+        &[color="red"] .ripple{background: getRedContrastAlpha($theme)}
 
         // pink
-        &[color="pink"][outline]:not([outline="false"]) .ripple {
-            background: rgba(map-get($pink, $get-shade), 0.2)
+        &[color="pink"][outline]:not([outline="false"]) .ripple,
+        &[color="pink"][basic]:not([basic="false"]) .ripple {
+            background: getPinkAlpha($theme)
         }
         &[color="pink"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($pink, $get-shade), 0.2);
-            color: map-get($pink, $get-shade);
+            background: getPinkAlpha($theme);
+            color: getPink($theme);
         }
         &[color="pink"][outline]:not([outline="false"]),
         &[color="pink"][link]:not([link="false"]),
         &[color="pink"][basic]:not([basic="false"]) {
-            color: map-get($pink, $get-shade)!important
+            color: getPink($theme)!important
         }
         &[color="pink"]{
-            background: map-get($pink, $get-shade);
-            color: map-get($pink-contrast, $get-shade);
+            background: getPink($theme);
+            color: getPinkContrast($theme);
         }
-        &[color="pink"] .ripple{background: rgba(map-get($pink-contrast, $get-shade), 0.2)}
+        &[color="pink"] .ripple{background: getPinkContrastAlpha($theme)}
 
         // purple
-        &[color="purple"][outline]:not([outline="false"]) .ripple {
-            background: rgba(map-get($purple, $get-shade), 0.2)
+        &[color="purple"][outline]:not([outline="false"]) .ripple,
+        &[color="purple"][basic]:not([basic="false"]) .ripple {
+            background: getPurpleAlpha($theme)
         }
         &[color="purple"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($purple, $get-shade), 0.2);
-            color: map-get($purple, $get-shade);
+            background: getPurpleAlpha($theme);
+            color: getPurple($theme);
         }
         &[color="purple"][outline]:not([outline="false"]),
         &[color="purple"][link]:not([link="false"]),
         &[color="purple"][basic]:not([basic="false"]) {
-            color: map-get($purple, $get-shade)!important
+            color: getPurple($theme)!important
         }
         &[color="purple"]{
-            background: map-get($purple, $get-shade);
-            color: map-get($purple-contrast, $get-shade);
+            background: getPurple($theme);
+            color: getPurpleContrast($theme);
         }
-        &[color="purple"] .ripple{background: rgba(map-get($purple-contrast, $get-shade), 0.2)}
+        &[color="purple"] .ripple{background: getPurpleContrastAlpha($theme)}
 
         // deep-purple
-        &[color="deep-purple"][outline]:not([outline="false"]) .ripple {
-            background: rgba(map-get($deep-purple, $get-shade), 0.2)
+        &[color="deep-purple"][outline]:not([outline="false"]) .ripple,
+        &[color="deep-purple"][basic]:not([basic="false"]) .ripple {
+            background: getDeepPurpleAlpha($theme)
         }
         &[color="deep-purple"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($deep-purple, $get-shade), 0.2);
-            color: map-get($deep-purple, $get-shade);
+            background: getDeepPurpleAlpha($theme);
+            color: getDeepPurple($theme);
         }
         &[color="deep-purple"][outline]:not([outline="false"]),
         &[color="deep-purple"][link]:not([link="false"]),
         &[color="deep-purple"][basic]:not([basic="false"]) {
-            color: map-get($deep-purple, $get-shade)!important
+            color: getDeepPurple($theme)!important
         }
         &[color="deep-purple"]{
-            background: map-get($deep-purple, $get-shade);
-            color: map-get($deep-purple-contrast, $get-shade);
+            background: getDeepPurple($theme);
+            color: getDeepPurpleContrast($theme);
         }
-        &[color="deep-purple"] .ripple{background: rgba(map-get($deep-purple-contrast, $get-shade), 0.2)}
+        &[color="deep-purple"] .ripple{background: getDeepPurpleContrastAlpha($theme)}
 
         // indigo
-        &[color="indigo"][outline]:not([outline="false"]) .ripple {
-            background: rgba(map-get($indigo, $get-shade), 0.2)
+        &[color="indigo"][outline]:not([outline="false"]) .ripple,
+        &[color="indigo"][basic]:not([basic="false"]) .ripple {
+            background: getIndigoAlpha($theme)
         }
         &[color="indigo"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($indigo, $get-shade), 0.2);
-            color: map-get($indigo, $get-shade);
+            background: getIndigoAlpha($theme);
+            color: getIndigo($theme);
         }
         &[color="indigo"][outline]:not([outline="false"]),
         &[color="indigo"][link]:not([link="false"]),
         &[color="indigo"][basic]:not([basic="false"]) {
-            color: map-get($indigo, $get-shade)!important
+            color: getIndigo($theme)!important
         }
         &[color="indigo"]{
-            background: map-get($indigo, $get-shade);
-            color: map-get($indigo-contrast, $get-shade);
+            background: getIndigo($theme);
+            color: getIndigoContrast($theme);
         }
-        &[color="indigo"] .ripple{background: rgba(map-get($indigo-contrast, $get-shade), 0.2)}
+        &[color="indigo"] .ripple{background: getIndigoContrastAlpha($theme)}
 
         // blue
-        &[color="blue"][outline]:not([outline="false"]) .ripple {
-            background: rgba(map-get($blue, $get-shade), 0.2)
+        &[color="blue"][outline]:not([outline="false"]) .ripple,
+        &[color="blue"][basic]:not([basic="false"]) .ripple {
+            background: getBlueAlpha($theme)
         }
         &[color="blue"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($blue, $get-shade), 0.2);
-            color: map-get($blue, $get-shade);
+            background: getBlueAlpha($theme);
+            color: getBlue($theme);
         }
         &[color="blue"][outline]:not([outline="false"]),
         &[color="blue"][link]:not([link="false"]),
         &[color="blue"][basic]:not([basic="false"]) {
-            color: map-get($blue, $get-shade)!important
+            color: getBlue($theme)!important
         }
         &[color="blue"]{
-            background: map-get($blue, $get-shade);
-            color: map-get($blue-contrast, $get-shade);
+            background: getBlue($theme);
+            color: getBlueContrast($theme);
         }
-        &[color="blue"] .ripple{background: rgba(map-get($blue-contrast, $get-shade), 0.2)}
+        &[color="blue"] .ripple{background: getBlueContrastAlpha($theme)}
 
         // light-blue
-        &[color="light-blue"][outline]:not([outline="false"]) .ripple {
-            background: rgba(map-get($light-blue, $get-shade), 0.2)
+        &[color="light-blue"][outline]:not([outline="false"]) .ripple,
+        &[color="light-blue"][basic]:not([basic="false"]) .ripple {
+            background: getLightBlueAlpha($theme)
         }
         &[color="light-blue"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($light-blue, $get-shade), 0.2);
-            color: map-get($light-blue, $get-shade);
+            background: getLightBlueAlpha($theme);
+            color: getLightBlue($theme);
         }
         &[color="light-blue"][outline]:not([outline="false"]),
         &[color="light-blue"][link]:not([link="false"]),
         &[color="light-blue"][basic]:not([basic="false"]) {
-            color: map-get($light-blue, $get-shade)!important
+            color: getLightBlue($theme)!important
         }
         &[color="light-blue"]{
-            background: map-get($light-blue, $get-shade);
-            color: map-get($light-blue-contrast, $get-shade);
+            background: getLightBlue($theme);
+            color: getLightBlueContrast($theme);
         }
-        &[color="light-blue"] .ripple{background: rgba(map-get($light-blue-contrast, $get-shade), 0.2)}
+        &[color="light-blue"] .ripple{background: getLightBlueContrastAlpha($theme)}
 
         // cyan
-        &[color="cyan"][outline]:not([outline="false"]) .ripple {
-            background: rgba(map-get($cyan, $get-shade), 0.2)
+        &[color="cyan"][outline]:not([outline="false"]) .ripple,
+        &[color="cyan"][basic]:not([basic="false"]) .ripple {
+            background: getCyanAlpha($theme)
         }
         &[color="cyan"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($cyan, $get-shade), 0.2);
-            color: map-get($cyan, $get-shade);
+            background: getCyanAlpha($theme);
+            color: getCyan($theme);
         }
         &[color="cyan"][outline]:not([outline="false"]),
         &[color="cyan"][link]:not([link="false"]),
         &[color="cyan"][basic]:not([basic="false"]) {
-            color: map-get($cyan, $get-shade)!important
+            color: getCyan($theme)!important
         }
         &[color="cyan"]{
-            background: map-get($cyan, $get-shade);
-            color: map-get($cyan-contrast, $get-shade);
+            background: getCyan($theme);
+            color: getCyanContrast($theme);
         }
-        &[color="cyan"] .ripple{background: rgba(map-get($cyan-contrast, $get-shade), 0.2)}
+        &[color="cyan"] .ripple{background: getCyanContrastAlpha($theme)}
 
         // teal
-        &[color="teal"][outline]:not([outline="false"]) .ripple {
-            background: rgba(map-get($teal, $get-shade), 0.2)
+        &[color="teal"][outline]:not([outline="false"]) .ripple,
+        &[color="teal"][basic]:not([basic="false"]) .ripple {
+            background: getTealAlpha($theme)
         }
         &[color="teal"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($teal, $get-shade), 0.2);
-            color: map-get($teal, $get-shade);
+            background: getTealAlpha($theme);
+            color: getTeal($theme);
         }
         &[color="teal"][outline]:not([outline="false"]),
         &[color="teal"][link]:not([link="false"]),
         &[color="teal"][basic]:not([basic="false"]) {
-            color: map-get($teal, $get-shade)!important
+            color: getTeal($theme)!important
         }
         &[color="teal"]{
-            background: map-get($teal, $get-shade);
-            color: map-get($teal-contrast, $get-shade);
+            background: getTeal($theme);
+            color: getTealContrast($theme);
         }
-        &[color="teal"] .ripple{background: rgba(map-get($teal-contrast, $get-shade), 0.2)}
+        &[color="teal"] .ripple{background: getTealContrastAlpha($theme)}
 
         // green
-        &[color="green"][outline]:not([outline="false"]) .ripple {
-            background: rgba(map-get($green, $get-shade), 0.2)
+        &[color="green"][outline]:not([outline="false"]) .ripple,
+        &[color="green"][basic]:not([basic="false"]) .ripple {
+            background: getGreenAlpha($theme)
         }
         &[color="green"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($green, $get-shade), 0.2);
-            color: map-get($green, $get-shade);
+            background: getGreenAlpha($theme);
+            color: getGreen($theme);
         }
         &[color="green"][outline]:not([outline="false"]),
         &[color="green"][link]:not([link="false"]),
         &[color="green"][basic]:not([basic="false"]) {
-            color: map-get($green, $get-shade)!important
+            color: getGreen($theme)!important
         }
         &[color="green"]{
-            background: map-get($green, $get-shade);
-            color: map-get($green-contrast, $get-shade);
+            background: getGreen($theme);
+            color: getGreenContrast($theme);
         }
-        &[color="green"] .ripple{background: rgba(map-get($green-contrast, $get-shade), 0.2)}
+        &[color="green"] .ripple{background: getGreenContrastAlpha($theme)}
 
         // light-green
-        &[color="light-green"][outline]:not([outline="false"]) .ripple {
-            background: rgba(map-get($light-green, $get-shade), 0.2)
+        &[color="light-green"][outline]:not([outline="false"]) .ripple,
+        &[color="light-green"][basic]:not([basic="false"]) .ripple {
+            background: getLightGreenAlpha($theme)
         }
         &[color="light-green"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($light-green, $get-shade), 0.2);
-            color: map-get($light-green, $get-shade);
+            background: getLightGreenAlpha($theme);
+            color: getLightGreen($theme);
         }
         &[color="light-green"][outline]:not([outline="false"]),
         &[color="light-green"][link]:not([link="false"]),
         &[color="light-green"][basic]:not([basic="false"]) {
-            color: map-get($light-green, $get-shade)!important
+            color: getLightGreen($theme)!important
         }
         &[color="light-green"]{
-            background: map-get($light-green, $get-shade);
-            color: map-get($light-green-contrast, $get-shade);
+            background: getLightGreen($theme);
+            color: getLightGreenContrast($theme);
         }
-        &[color="light-green"] .ripple{background: rgba(map-get($light-green-contrast, $get-shade), 0.2)}
+        &[color="light-green"] .ripple{background: getLightGreenContrastAlpha($theme)}
 
         // lime
-        &[color="lime"][outline]:not([outline="false"]) .ripple {
-            background: rgba(map-get($lime, $get-shade), 0.2)
+        &[color="lime"][outline]:not([outline="false"]) .ripple,
+        &[color="lime"][basic]:not([basic="false"]) .ripple {
+            background: getLimeAlpha($theme)
         }
         &[color="lime"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($lime, $get-shade), 0.2);
-            color: map-get($lime, $get-shade);
+            background: getLimeAlpha($theme);
+            color: getLime($theme);
         }
         &[color="lime"][outline]:not([outline="false"]),
         &[color="lime"][link]:not([link="false"]),
         &[color="lime"][basic]:not([basic="false"]) {
-            color: map-get($lime, $get-shade)!important
+            color: getLime($theme)!important
         }
         &[color="lime"]{
-            background: map-get($lime, $get-shade);
-            color: map-get($lime-contrast, $get-shade);
+            background: getLime($theme);
+            color: getLimeContrast($theme);
         }
-        &[color="lime"] .ripple{background: rgba(map-get($lime-contrast, $get-shade), 0.2)}
+        &[color="lime"] .ripple{background: getLimeContrastAlpha($theme)}
 
         // yellow
-        &[color="yellow"][outline]:not([outline="false"]) .ripple {
-            background: rgba(map-get($yellow, $get-shade), 0.2)
+        &[color="yellow"][outline]:not([outline="false"]) .ripple,
+        &[color="yellow"][basic]:not([basic="false"]) .ripple {
+            background: getYellowAlpha($theme)
         }
         &[color="yellow"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($yellow, $get-shade), 0.2);
-            color: map-get($yellow, $get-shade);
+            background: getYellowAlpha($theme);
+            color: getYellow($theme);
         }
         &[color="yellow"][outline]:not([outline="false"]),
         &[color="yellow"][link]:not([link="false"]),
         &[color="yellow"][basic]:not([basic="false"]) {
-            color: map-get($yellow, $get-shade)!important
+            color: getYellow($theme)!important
         }
         &[color="yellow"]{
-            background: map-get($yellow, $get-shade);
-            color: map-get($yellow-contrast, $get-shade);
+            background: getYellow($theme);
+            color: getYellowContrast($theme);
         }
-        &[color="yellow"] .ripple{background: rgba(map-get($yellow-contrast, $get-shade), 0.2)}
+        &[color="yellow"] .ripple{background: getYellowContrastAlpha($theme)}
 
         // amber
-        &[color="amber"][outline]:not([outline="false"]) .ripple {
-            background: rgba(map-get($amber, $get-shade), 0.2)
+        &[color="amber"][outline]:not([outline="false"]) .ripple,
+        &[color="amber"][basic]:not([basic="false"]) .ripple {
+            background: getAmberAlpha($theme)
         }
         &[color="amber"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($amber, $get-shade), 0.2);
-            color: map-get($amber, $get-shade);
+            background: getAmberAlpha($theme);
+            color: getAmber($theme);
         }
         &[color="amber"][outline]:not([outline="false"]),
         &[color="amber"][link]:not([link="false"]),
         &[color="amber"][basic]:not([basic="false"]) {
-            color: map-get($amber, $get-shade)!important
+            color: getAmber($theme)!important
         }
         &[color="amber"]{
-            background: map-get($amber, $get-shade);
-            color: map-get($amber-contrast, $get-shade);
+            background: getAmber($theme);
+            color: getAmberContrast($theme);
         }
-        &[color="amber"] .ripple{background: rgba(map-get($amber-contrast, $get-shade), 0.2)}
+        &[color="amber"] .ripple{background: getAmberContrastAlpha($theme)}
 
         // orange
-        &[color="orange"][outline]:not([outline="false"]) .ripple {
-            background: rgba(map-get($orange, $get-shade), 0.2)
+        &[color="orange"][outline]:not([outline="false"]) .ripple,
+        &[color="orange"][basic]:not([basic="false"]) .ripple {
+            background: getOrangeAlpha($theme)
         }
         &[color="orange"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($orange, $get-shade), 0.2);
-            color: map-get($orange, $get-shade);
+            background: getOrangeAlpha($theme);
+            color: getOrange($theme);
         }
         &[color="orange"][outline]:not([outline="false"]),
         &[color="orange"][link]:not([link="false"]),
         &[color="orange"][basic]:not([basic="false"]) {
-            color: map-get($orange, $get-shade)!important
+            color: getOrange($theme)!important
         }
         &[color="orange"]{
-            background: map-get($orange, $get-shade);
-            color: map-get($orange-contrast, $get-shade);
+            background: getOrange($theme);
+            color: getOrangeContrast($theme);
         }
-        &[color="orange"] .ripple{background: rgba(map-get($orange-contrast, $get-shade), 0.2)}
+        &[color="orange"] .ripple{background: getOrangeContrastAlpha($theme)}
 
         // deep-orange
-        &[color="deep-orange"][outline]:not([outline="false"]) .ripple {
-            background: rgba(map-get($deep-orange, $get-shade), 0.2)
+        &[color="deep-orange"][outline]:not([outline="false"]) .ripple,
+        &[color="deep-orange"][basic]:not([basic="false"]) .ripple {
+            background: getDeepOrangeAlpha($theme)
         }
         &[color="deep-orange"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($deep-orange, $get-shade), 0.2);
-            color: map-get($deep-orange, $get-shade);
+            background: getDeepOrangeAlpha($theme);
+            color: getDeepOrange($theme);
         }
         &[color="deep-orange"][outline]:not([outline="false"]),
         &[color="deep-orange"][link]:not([link="false"]),
         &[color="deep-orange"][basic]:not([basic="false"]) {
-            color: map-get($deep-orange, $get-shade)!important
+            color: getDeepOrange($theme)!important
         }
         &[color="deep-orange"]{
-            background: map-get($deep-orange, $get-shade);
-            color: map-get($deep-orange-contrast, $get-shade);
+            background: getDeepOrange($theme);
+            color: getDeepOrangeContrast($theme);
         }
-        &[color="deep-orange"] .ripple{background: rgba(map-get($deep-orange-contrast, $get-shade), 0.2)}
+        &[color="deep-orange"] .ripple{background: getDeepOrangeContrastAlpha($theme)}
 
         // brown
-        &[color="brown"][outline]:not([outline="false"]) .ripple {
-            background: rgba(map-get($brown, $get-shade), 0.2)
+        &[color="brown"][outline]:not([outline="false"]) .ripple,
+        &[color="brown"][basic]:not([basic="false"]) .ripple {
+            background: getBrownAlpha($theme)
         }
         &[color="brown"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($brown, $get-shade), 0.2);
-            color: map-get($brown, $get-shade);
+            background: getBrownAlpha($theme);
+            color: getBrown($theme);
         }
         &[color="brown"][outline]:not([outline="false"]),
         &[color="brown"][link]:not([link="false"]),
         &[color="brown"][basic]:not([basic="false"]) {
-            color: map-get($brown, $get-shade)!important
+            color: getBrown($theme)!important
         }
         &[color="brown"]{
-            background: map-get($brown, $get-shade);
-            color: map-get($brown-contrast, $get-shade);
+            background: getBrown($theme);
+            color: getBrownContrast($theme);
         }
-        &[color="brown"] .ripple{background: rgba(map-get($brown-contrast, $get-shade), 0.2)}
+        &[color="brown"] .ripple{background: getBrownContrastAlpha($theme)}
 
         // grey
-        &[color="grey"][outline]:not([outline="false"]) .ripple {
-            background: rgba(map-get($grey, $get-shade), 0.2)
+        &[color="grey"][outline]:not([outline="false"]) .ripple,
+        &[color="grey"][basic]:not([basic="false"]) .ripple {
+            background: getGreyAlpha($theme)
         }
         &[color="grey"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($grey, $get-shade), 0.2);
-            color: map-get($grey, $get-shade);
+            background: getGreyAlpha($theme);
+            color: getGrey($theme);
         }
         &[color="grey"][outline]:not([outline="false"]),
         &[color="grey"][link]:not([link="false"]),
         &[color="grey"][basic]:not([basic="false"]) {
-            color: map-get($grey, $get-shade)!important
+            color: getGrey($theme)!important
         }
         &[color="grey"]{
-            background: map-get($grey, $get-shade);
-            color: map-get($grey-contrast, $get-shade);
+            background: getGrey($theme);
+            color: getGreyContrast($theme);
         }
-        &[color="grey"] .ripple{background: rgba(map-get($grey-contrast, $get-shade), 0.2)}
+        &[color="grey"] .ripple{background: getGreyContrastAlpha($theme)}
 
         // blue-grey
-        &[color="blue-grey"][outline]:not([outline="false"]) .ripple {
-            background: rgba(map-get($blue-grey, $get-shade), 0.2)
+        &[color="blue-grey"][outline]:not([outline="false"]) .ripple,
+        &[color="blue-grey"][basic]:not([basic="false"]) .ripple {
+            background: getBlueGreyAlpha($theme)
         }
         &[color="blue-grey"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($blue-grey, $get-shade), 0.2);
-            color: map-get($blue-grey, $get-shade);
+            background: getBlueGreyAlpha($theme);
+            color: getBlueGrey($theme);
         }
         &[color="blue-grey"][outline]:not([outline="false"]),
         &[color="blue-grey"][link]:not([link="false"]),
         &[color="blue-grey"][basic]:not([basic="false"]) {
-            color: map-get($blue-grey, $get-shade)!important
+            color: getBlueGrey($theme)!important
         }
         &[color="blue-grey"]{
-            background: map-get($blue-grey, $get-shade);
-            color: map-get($blue-grey-contrast, $get-shade);
+            background: getBlueGrey($theme);
+            color: getBlueGreyContrast($theme);
         }
-        &[color="blue-grey"] .ripple{background: rgba(map-get($blue-grey-contrast, $get-shade), 0.2)}
+        &[color="blue-grey"] .ripple{background: getBlueGreyContrastAlpha($theme)}
 
         // primary
-        &[color="primary"][outline]:not([outline="false"]) .ripple {
-            background: rgba(map-get($primary, default), 0.2)
+        &[color="primary"][outline]:not([outline="false"]) .ripple,
+        &[color="primary"][basic]:not([basic="false"]) .ripple {
+            background: getPrimaryAlpha($theme)
         }
         &[color="primary"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($primary, default), 0.2);
-            color: map-get($primary, default);
+            background: getPrimaryAlpha($theme);
+            color: getPrimary($theme);
         }
         &[color="primary"][outline]:not([outline="false"]),
         &[color="primary"][link]:not([link="false"]),
         &[color="primary"][basic]:not([basic="false"]) {
-            color: map-get($primary, default)!important
+            color: getPrimary($theme)!important
         }
         &[color="primary"]{
-            background: map-get($primary, default);
-            color: map-get($primary, default-contrast);
+            background: getPrimary($theme);
+            color: getPrimaryContrast($theme);
         }
-        &[color="primary"] .ripple{background: rgba(map-get($primary, default-contrast), 0.2)}
+        &[color="primary"] .ripple{background: getPrimaryContrastAlpha($theme)}
 
         // accent
-        &[color="accent"][outline]:not([outline="false"]) .ripple {
-            background: rgba(map-get($accent, default), 0.2)
+        &[color="accent"][outline]:not([outline="false"]) .ripple,
+        &[color="accent"][basic]:not([basic="false"]) .ripple {
+            background: getAccentAlpha($theme)
         }
         &[color="accent"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($accent, default), 0.2);
-            color: map-get($accent, default);
+            background: getAccentAlpha($theme);
+            color: getAccent($theme);
         }
         &[color="accent"][outline]:not([outline="false"]),
         &[color="accent"][link]:not([link="false"]),
         &[color="accent"][basic]:not([basic="false"]) {
-            color: map-get($accent, default)!important
+            color: getAccent($theme)!important
         }
         &[color="accent"]{
-            background: map-get($accent, default);
-            color: map-get($accent, default-contrast);
+            background: getAccent($theme);
+            color: getAccentContrast($theme);
         }
-        &[color="accent"] .ripple{background: rgba(map-get($accent, default-contrast), 0.2)}
+        &[color="accent"] .ripple{background: getAccentContrastAlpha($theme)}
 
         // warn
-        &[color="warn"][outline]:not([outline="false"]) .ripple {
-            background: rgba(map-get($warn, default), 0.2)
+        &[color="warn"][outline]:not([outline="false"]) .ripple,
+        &[color="warn"][basic]:not([basic="false"]) .ripple {
+            background: getWarnAlpha($theme)
         }
         &[color="warn"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($warn, default), 0.2);
-            color: map-get($warn, default);
+            background: getWarnAlpha($theme);
+            color: getWarn($theme);
         }
         &[color="warn"][outline]:not([outline="false"]),
         &[color="warn"][link]:not([link="false"]),
         &[color="warn"][basic]:not([basic="false"]) {
-            color: map-get($warn, default)!important
+            color: getWarn($theme)!important
         }
         &[color="warn"]{
-            background: map-get($warn, default);
-            color: map-get($warn, default-contrast);
+            background: getWarn($theme);
+            color: getWarnContrast($theme);
         }
-        &[color="warn"] .ripple{background: rgba(map-get($warn, default-contrast), 0.2)}
+        &[color="warn"] .ripple{background: getWarnContrastAlpha($theme)}
 
     }
 
@@ -674,50 +639,32 @@ a[matcha-button] {
     a[matcha-button] {
         border: 0px solid currentColor;
 
-        &[size="tiny"],
-        &[size="small"],
-        &[size="medium"],
-        &[size="large"],
-        &[size="huge"] {
-
-            &.stroked {
-
-                &.color-label {
-                    box-shadow: 0px 0px 0px 2px inset map-get($foreground, label);
-                    color: map-get($foreground, label);
-                }
-
-                &.color-placeholder {
-                    box-shadow: 0px 0px 0px 2px inset map-get($foreground, placeholder);
-                    color: map-get($foreground, placeholder);
-                }
-            }
-        }
-
         &[disabled] {
-            background-color: map-get($background, disabled);
-            color: map-get($foreground, disabled-icon) !important;
-            border-color: map-get($foreground, disabled);
+            background-color: getDisabled($theme);
+            color: getDisabledContrast($theme) !important;
+            border-color: getDisabled($theme);
         }
 
         &[outline]:not([outline="false"]) {
             border: 0px solid currentColor;
             background: transparent !important;
             &:not([color]){
-                border-color: map-get($foreground, base);
-                color: map-get($foreground, base);
+                border-color: getForeground($theme);
+                color: getForeground($theme);
             }
             &[disabled] {
-                box-shadow: 0 0 0 2px map-get($foreground, disabled-icon);
-                color: map-get($foreground, disabled-icon) !important;
+                box-shadow: 0 0 0 2px getDisabledContrast($theme);
+                color: getDisabledContrast($theme) !important;
             }
         }
 
         &[basic]:not([basic="false"]){
-            background: map-get($background, card);
-
+            background: getSurface($theme);
+            &:not([color]){
+                color: getForeground($theme);
+            }
             &[disabled] {
-                color: map-get($foreground, disabled-icon) !important;
+                color: getDisabledContrast($theme) !important;
             }
             &[alpha]:not([alpha="false"]){
                 background:transparent;
@@ -725,15 +672,20 @@ a[matcha-button] {
         }
 
         &[alpha]:not([alpha="false"]){
+            &:not([color]){
+                background: rgba(getForeground($theme), 0.2);
+                border-color: getForeground($theme);
+                color: getForeground($theme);
+            }
             &[disabled] {
-                background: rgba(map-get($background, disabled), 0.2);
+                background: rgba(getDisabled($theme), 0.2);
             }
         }
 
         &[link]:not([link="false"]) {
             background-color: transparent;
             &:not([color]){
-                color: map-get($foreground, label);
+                color: getForeground($theme);
             }
         }
     }