matcha-theme 18.1.45 → 18.1.47

package/abstracts/_colors.scss

@@ -249,262 +249,356 @@ $index: 0;
 
     $get-shade: if($is-dark, 100, 500); // Define $red-shade com base no valor de $is-dark
 
-    .red.matcha-button-outline .ripple, .background-red-alpha {background: rgba(map-get($red, $get-shade), 0.2)}
+    .red[outline]:not([outline="false"]) .ripple, .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)}
-    .red.matcha-button-outline, .color-red{color: map-get($red, $get-shade)}
+    .red[outline]:not([outline="false"]),
+    [color="red"][outline]:not([outline="false"]),
+    [color="red"][link]:not([link="false"]),
+    .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}
     .red{
         background: map-get($red, $get-shade);
         color: map-get($red-contrast, $get-shade);
     }
-    .pink.matcha-button-outline .ripple, .background-pink-alpha {background: rgba(map-get($pink, $get-shade), 0.2)}
+    .pink[outline]:not([outline="false"]) .ripple, .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)}
-    .pink.matcha-button-outline, .color-pink{color: map-get($pink, $get-shade)}
+    .pink[outline]:not([outline="false"]),
+    [color="pink"][outline]:not([outline="false"]),
+    [color="pink"][link]:not([link="false"]),
+    .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}
     .pink{
         background: map-get($pink, $get-shade);
         color: map-get($pink-contrast, $get-shade);
     }
-    .purple.matcha-button-outline .ripple, .background-purple-alpha {background: rgba(map-get($purple, $get-shade), 0.2)}
+    .purple[outline]:not([outline="false"]) .ripple, .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)}
-    .purple.matcha-button-outline, .color-purple{color: map-get($purple, $get-shade)}
+    .purple[outline]:not([outline="false"]),
+    [color="purple"][outline]:not([outline="false"]),
+    [color="purple"][link]:not([link="false"]),
+    .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}
     .purple{
         background: map-get($purple, $get-shade);
         color: map-get($purple-contrast, $get-shade);
     }
-    .deep-purple.matcha-button-outline .ripple, .background-deep-purple-alpha {background: rgba(map-get($deep-purple, $get-shade), 0.2)}
+    .deep-purple[outline]:not([outline="false"]) .ripple, .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)}
-    .deep-purple.matcha-button-outline, .color-deep-purple{color: map-get($deep-purple, $get-shade)}
+    .deep-purple[outline]:not([outline="false"]),
+    [color="deep-purple"][outline]:not([outline="false"]),
+    [color="deep-purple"][link]:not([link="false"]),
+    .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}
     .deep-purple{
         background: map-get($deep-purple, $get-shade);
         color: map-get($deep-purple-contrast, $get-shade);
     }
-    .indigo.matcha-button-outline .ripple, .background-indigo-alpha {background: rgba(map-get($indigo, $get-shade), 0.2)}
+    .indigo[outline]:not([outline="false"]) .ripple, .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)}
-    .indigo.matcha-button-outline, .color-indigo{color: map-get($indigo, $get-shade)}
+    .indigo[outline]:not([outline="false"]),
+    [color="indigo"][outline]:not([outline="false"]),
+    [color="indigo"][link]:not([link="false"]),
+    .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}
     .indigo{
         background: map-get($indigo, $get-shade);
         color: map-get($indigo-contrast, $get-shade);
     }
-    .blue.matcha-button-outline .ripple, .background-blue-alpha {background: rgba(map-get($blue, $get-shade), 0.2)}
+    .blue[outline]:not([outline="false"]) .ripple, .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)}
-    .blue.matcha-button-outline, .color-blue{color: map-get($blue, $get-shade)}
+    .blue[outline]:not([outline="false"]),
+    [color="blue"][outline]:not([outline="false"]),
+    [color="blue"][link]:not([link="false"]),
+    .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}
     .blue{
         background: map-get($blue, $get-shade);
         color: map-get($blue-contrast, $get-shade);
     }
-    .light-blue.matcha-button-outline .ripple, .background-light-blue-alpha {background: rgba(map-get($light-blue, $get-shade), 0.2)}
+    .light-blue[outline]:not([outline="false"]) .ripple, .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)}
-    .light-blue.matcha-button-outline, .color-light-blue{color: map-get($light-blue, $get-shade)}
+    .light-blue[outline]:not([outline="false"]),
+    [color="light-blue"][outline]:not([outline="false"]),
+    [color="light-blue"][link]:not([link="false"]),
+    .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}
     .light-blue{
         background: map-get($light-blue, $get-shade);
         color: map-get($light-blue-contrast, $get-shade);
     }
-    .cyan.matcha-button-outline .ripple, .background-cyan-alpha {background: rgba(map-get($cyan, $get-shade), 0.2)}
+    .cyan[outline]:not([outline="false"]) .ripple, .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)}
-    .cyan.matcha-button-outline, .color-cyan{color: map-get($cyan, $get-shade)}
+    .cyan[outline]:not([outline="false"]),
+    [color="cyan"][outline]:not([outline="false"]),
+    [color="cyan"][link]:not([link="false"]),
+    .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}
     .cyan{
         background: map-get($cyan, $get-shade);
         color: map-get($cyan-contrast, $get-shade);
     }
-    .teal.matcha-button-outline .ripple, .background-teal-alpha {background: rgba(map-get($teal, $get-shade), 0.2)}
+    .teal[outline]:not([outline="false"]) .ripple, .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)}
-    .teal.matcha-button-outline, .color-teal{color: map-get($teal, $get-shade)}
+    .teal[outline]:not([outline="false"]),
+    [color="teal"][outline]:not([outline="false"]),
+    [color="teal"][link]:not([link="false"]),
+    .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}
     .teal{
         background: map-get($teal, $get-shade);
         color: map-get($teal-contrast, $get-shade);
     }
-    .green.matcha-button-outline .ripple, .background-green-alpha {background: rgba(map-get($green, $get-shade), 0.2)}
+    .green[outline]:not([outline="false"]) .ripple, .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)}
-    .green.matcha-button-outline, .color-green{color: map-get($green, $get-shade)}
+    .green[outline]:not([outline="false"]),
+    [color="green"][outline]:not([outline="false"]),
+    [color="green"][link]:not([link="false"]),
+    .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}
     .green{
         background: map-get($green, $get-shade);
         color: map-get($green-contrast, $get-shade);
     }
-    .light-green.matcha-button-outline .ripple, .background-light-green-alpha {background: rgba(map-get($light-green, $get-shade), 0.2)}
+    .light-green[outline]:not([outline="false"]) .ripple, .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)}
-    .light-green.matcha-button-outline, .color-light-green{color: map-get($light-green, $get-shade)}
+    .light-green[outline]:not([outline="false"]),
+    [color="light-green"][outline]:not([outline="false"]),
+    [color="light-green"][link]:not([link="false"]),
+    .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}
     .light-green{
         background: map-get($light-green, $get-shade);
         color: map-get($light-green-contrast, $get-shade);
     }
-    .lime.matcha-button-outline .ripple, .background-lime-alpha {background: rgba(map-get($lime, $get-shade), 0.2)}
+    .lime[outline]:not([outline="false"]) .ripple, .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)}
-    .lime.matcha-button-outline, .color-lime{color: map-get($lime, $get-shade)}
+    .lime[outline]:not([outline="false"]),
+    [color="lime"][outline]:not([outline="false"]),
+    [color="lime"][link]:not([link="false"]),
+    .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}
     .lime{
         background: map-get($lime, $get-shade);
         color: map-get($lime-contrast, $get-shade);
     }
-    .yellow.matcha-button-outline .ripple, .background-yellow-alpha {background: rgba(map-get($yellow, $get-shade), 0.2)}
+    .yellow[outline]:not([outline="false"]) .ripple, .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)}
-    .yellow.matcha-button-outline, .color-yellow{color: map-get($yellow, $get-shade)}
+    .yellow[outline]:not([outline="false"]),
+    [color="yellow"][outline]:not([outline="false"]),
+    [color="yellow"][link]:not([link="false"]),
+    .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}
     .yellow{
         background: map-get($yellow, $get-shade);
         color: map-get($yellow-contrast, $get-shade);
     }
-    .amber.matcha-button-outline .ripple, .background-amber-alpha {background: rgba(map-get($amber, $get-shade), 0.2)}
+    .amber[outline]:not([outline="false"]) .ripple, .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)}
-    .amber.matcha-button-outline, .color-amber{color: map-get($amber, $get-shade)}
+    .amber[outline]:not([outline="false"]),
+    [color="amber"][outline]:not([outline="false"]),
+    [color="amber"][link]:not([link="false"]),
+    .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}
     .amber{
         background: map-get($amber, $get-shade);
         color: map-get($amber-contrast, $get-shade);
     }
-    .orange.matcha-button-outline .ripple, .background-orange-alpha {background: rgba(map-get($orange, $get-shade), 0.2)}
+    .orange[outline]:not([outline="false"]) .ripple, .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)}
-    .orange.matcha-button-outline, .color-orange{color: map-get($orange, $get-shade)}
+    .orange[outline]:not([outline="false"]),
+    [color="orange"][outline]:not([outline="false"]),
+    [color="orange"][link]:not([link="false"]),
+    .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}
     .orange{
         background: map-get($orange, $get-shade);
         color: map-get($orange-contrast, $get-shade);
     }
-    .deep-orange.matcha-button-outline .ripple, .background-deep-orange-alpha {background: rgba(map-get($deep-orange, $get-shade), 0.2)}
+    .deep-orange[outline]:not([outline="false"]) .ripple, .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)}
-    .deep-orange.matcha-button-outline, .color-deep-orange{color: map-get($deep-orange, $get-shade)}
+    .deep-orange[outline]:not([outline="false"]),
+    [color="deep-orange"][outline]:not([outline="false"]),
+    [color="deep-orange"][link]:not([link="false"]),
+    .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}
     .deep-orange{
         background: map-get($deep-orange, $get-shade);
         color: map-get($deep-orange-contrast, $get-shade);
     }
-    .brown.matcha-button-outline .ripple, .background-brown-alpha {background: rgba(map-get($brown, $get-shade), 0.2)}
+    .brown[outline]:not([outline="false"]) .ripple, .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)}
-    .brown.matcha-button-outline, .color-brown{color: map-get($brown, $get-shade)}
+    .brown[outline]:not([outline="false"]),
+    [color="brown"][outline]:not([outline="false"]),
+    [color="brown"][link]:not([link="false"]),
+    .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}
     .brown{
         background: map-get($brown, $get-shade);
         color: map-get($brown-contrast, $get-shade);
     }
-    .grey.matcha-button-outline .ripple, .background-grey-alpha {background: rgba(map-get($grey, $get-shade), 0.2)}
+    .grey[outline]:not([outline="false"]) .ripple, .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)}
-    .grey.matcha-button-outline, .color-grey{color: map-get($grey, $get-shade)}
+    .grey[outline]:not([outline="false"]),
+    [color="grey"][outline]:not([outline="false"]),
+    [color="grey"][link]:not([link="false"]),
+    .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}
     .grey{
         background: map-get($grey, $get-shade);
         color: map-get($grey-contrast, $get-shade);
     }
-    .blue-grey.matcha-button-outline .ripple, .background-blue-grey-alpha {background: rgba(map-get($blue-grey, $get-shade), 0.2)}
+    .blue-grey[outline]:not([outline="false"]) .ripple, .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)}
-    .blue-grey.matcha-button-outline, .color-blue-grey{color: map-get($blue-grey, $get-shade)}
+    .blue-grey[outline]:not([outline="false"]),
+    [color="blue-grey"][outline]:not([outline="false"]),
+    [color="blue-grey"][link]:not([link="false"]),
+    .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}
     .blue-grey{
         background: map-get($blue-grey, $get-shade);
         color: map-get($blue-grey-contrast, $get-shade);
     }
 
-    .primary.matcha-button-outline .ripple, .background-primary-alpha {background: rgba(map-get($primary, default), 0.2)}
+    .primary[outline]:not([outline="false"]) .ripple, .background-primary-alpha {background: rgba(map-get($primary, default), 0.2)}
     .primary .ripple{background: rgba(map-get($primary, default-contrast), 0.2)}
     .background-primary{background: map-get($primary, default)}
     .border-color-primary{border-color: map-get($primary, default)}
-    .primary.matcha-button-outline, .color-primary{color: map-get($primary, default)}
+    .primary[outline]:not([outline="false"]),
+    [color="primary"][outline]:not([outline="false"]),
+    [color="primary"][link]:not([link="false"]),
+    .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}
     .primary{
         background: map-get($primary, default);
         color: map-get($primary, default-contrast);
     }
 
-    .accent.matcha-button-outline .ripple, .background-accent-alpha {background: rgba(map-get($accent, default), 0.2)}
+    .accent[outline]:not([outline="false"]) .ripple, .background-accent-alpha {background: rgba(map-get($accent, default), 0.2)}
     .accent .ripple{background: rgba(map-get($accent, default-contrast), 0.2)}
     .background-accent{background: map-get($accent, default)}
     .border-color-accent{border-color: map-get($accent, default)}
-    .accent.matcha-button-outline, .color-accent{color: map-get($accent, default)}
+    .accent[outline]:not([outline="false"]),
+    [color="accent"][outline]:not([outline="false"]),
+    [color="accent"][link]:not([link="false"]),
+    .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}
     .accent{
         background: map-get($accent, default);
         color: map-get($accent, default-contrast);
     }
 
-    .warn.matcha-button-outline .ripple, .background-warn-alpha {background: rgba(map-get($warn, default), 0.2)}
+    .warn[outline]:not([outline="false"]) .ripple, .background-warn-alpha {background: rgba(map-get($warn, default), 0.2)}
     .warn .ripple{background: rgba(map-get($warn, default-contrast), 0.2)}
     .background-warn{background: map-get($warn, default)}
     .border-color-warn{border-color: map-get($warn, default)}
-    .warn.matcha-button-outline, .color-warn{color: map-get($warn, default)}
+    .warn[outline]:not([outline="false"]),
+    [color="warn"][outline]:not([outline="false"]),
+    [color="warn"][link]:not([link="false"]),
+    .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}
     .warn{
         background: map-get($warn, default);
         color: map-get($warn, default-contrast);
     }
 
-    .basic.matcha-button-outline .ripple, .background-basic-alpha {background: rgba(map-get($foreground, base), 0.2)}
+    .basic[outline]:not([outline="false"]) .ripple,.background-basic-alpha {background: rgba(map-get($foreground, base), 0.2)}
     .basic .ripple{background: rgba(map-get($foreground, base), 0.2)}
     .background-basic{background: map-get($background, card)}
     .border-color-basic{border-color: map-get($foreground, base)}
-    .basic.matcha-button-outline, .color-basic{color: map-get($foreground, base)}
+    .basic[outline]:not([outline="false"]):not([color]),
+    [color="basic"][outline]:not([outline="false"]),
+    [color="basic"][link]:not([link="false"]),
+    .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}
     .basic{
         background: map-get($background, card);
-        color: map-get($foreground, base);
+        &:not([color]){
+            color: map-get($foreground, base);
+        }
     }
 
 
@@ -538,8 +632,7 @@ $index: 0;
         }
     }
 
-    .background-transparent,
-    .matcha-background-transparent {
+    .background-transparent {
         background: transparent;
     }
 

package/components/matcha-buttons.scss

@@ -1,39 +1,58 @@
+// TO-DO: Separar tudo o que for estilo estrutural do componente do que é estilo de tema
+// levar todos os estilos estruturais para o arquivo de scss do componente
+// na biblioteca  matcha-components
+
+//  <button matcha-button size="tiny" color="primary">tiny</button>
+//  <button matcha-button size="small" color="primary">small</button>
+//  <button matcha-button size="medium" color="primary">medium</button>
+//  <button matcha-button size="large" color="primary">large</button>
+//  <button matcha-button size="huge" color="primary">huge</button>
+
+// <button matcha-button
+//  [color]="color"
+//  [basic]="basic"
+//  [size]="size"
+//  [pill]="pill"
+//  [outline]="outline"
+//  [link]="link"
+//  [icon]="icon"
+//  [size-xs]="sizeXs"
+//  [size-sm]="sizeSm"
+//  [size-md]="sizeMd"
+//  [size-lg]="sizeLg"
+//  [size-xl]="sizeXl">
+
 @mixin generate-matcha-button-size-classes($helper-breakpoints){
     @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
         @include media-breakpoint($materialBreakpoint) {
             $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
 
-            &#{$infix}-tiny {
+            &[size#{$infix}="tiny"] {
                 padding: 0 px-to-rem(32px);
-                border-radius: px-to-rem(8px);
                 line-height: px-to-rem(32px);
                 max-height: px-to-rem(32px);
             }
 
-            &#{$infix}-small {
+            &[size#{$infix}="small"] {
                 padding: 0 px-to-rem(32px);
-                border-radius: px-to-rem(8px);
                 line-height: px-to-rem(40px);
                 max-height: px-to-rem(40px);
             }
 
-            &#{$infix}-medium {
+            &[size#{$infix}="medium"] {
                 padding: 0 px-to-rem(32px);
-                border-radius: px-to-rem(8px);
                 line-height: px-to-rem(48px);
                 max-height: px-to-rem(48px);
             }
 
-            &#{$infix}-large {
+            &[size#{$infix}="large"] {
                 padding: 0 px-to-rem(32px);
-                border-radius: px-to-rem(8px);
                 line-height: px-to-rem(56px);
                 max-height: px-to-rem(56px);
             }
 
-            &#{$infix}-huge {
+            &[size#{$infix}="huge"] {
                 padding: 0 px-to-rem(32px);
-                border-radius: px-to-rem(8px);
                 line-height: px-to-rem(56px);
                 max-height: px-to-rem(56px);
             }
@@ -41,57 +60,155 @@
     }
 }
 
+button[matcha-button],
+a[matcha-button] {
+    transition: all 50ms linear;
+    overflow: hidden;
+    position: relative;
+    font-size: 16px;
+    font-weight: 700;
+    height: 56px;
+    appearance: auto;
+    text-rendering: auto;
+    letter-spacing: normal;
+    word-spacing: normal;
+    line-height: normal;
+    text-transform: none;
+    text-indent: 0px;
+    text-shadow: none;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    box-sizing: border-box;
+    border-radius: px-to-rem(8px);
+    *{
+        pointer-events: none;
+    }
 
-@mixin matcha-button-theme($theme) {
+    &[size="tiny"] {
+        line-height: px-to-rem(32px);
+        max-height: px-to-rem(32px);
+    }
+
+    &[size="small"] {
+        line-height: px-to-rem(40px);
+        max-height: px-to-rem(40px);
+    }
+
+    &[size="medium"] {
+        line-height: px-to-rem(48px);
+        max-height: px-to-rem(48px);
+    }
+
+    &[size="large"] {
+        line-height: px-to-rem(56px);
+        max-height: px-to-rem(56px);
+    }
+
+    &[size="huge"] {
+        line-height: px-to-rem(56px);
+        max-height: px-to-rem(56px);
+    }
+
+    &[size="tiny"],
+    &[size="small"],
+    &[size="medium"],
+    &[size="large"],
+    &[size="huge"] {
+        padding: 0 px-to-rem(32px);
+        min-width: 24px;
+        &.stroked {
+            box-shadow: 0px 0px 0px 2px inset;
+        }
+    }
+
+    @include generate-matcha-button-size-classes($helper-breakpoints);
+
+
+    &:hover{
+        filter: brightness(1.05);
+    }
+
+    &:active{
+        filter: brightness(1.1);
+    }
+
+    &[disabled] {
+        pointer-events: none;
+    }
+
+    &[basic]:not([basic="false"]) {
+        box-shadow: 0px 0px 0px 0px inset;
+    }
+
+    &[outline]:not([outline="false"]) {
+        box-shadow: 0px 0px 0px 2px inset;
+    }
+
+    &[pill]:not([pill="false"]) {
+        border-radius: 999px;
+    }
+
+    &[link]:not([link="false"]) {
+        text-transform: initial;
+        letter-spacing: 0;
+        text-decoration: underline;
+        padding: 0;
+    }
+
+    &[icon]:not([icon="false"]) {
+        aspect-ratio: 1;
+        padding: 0 !important;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .ripple {
+        position: absolute;
+        border-radius: 999px;
+        transform: scale(0);
+        pointer-events: none;
+    }
+    .ripple.show {
+        animation: ripple 400ms ease-out;
+    }
+
+    @keyframes ripple {
+        0% {
+            opacity: 0;
+            transform: scale(0);
+        }
+        25% {
+            opacity: 1;
+        }
+        100% {
+            opacity: 0;
+            transform: scale(2);
+        }
+    }
+}
 
+@mixin matcha-button-theme($theme) {
     $primary: map-get($theme, primary);
     $accent: map-get($theme, accent);
     $warn: map-get($theme, warn);
     $background: map-get($theme, background);
     $foreground: map-get($theme, foreground);
 
-    .matcha-button {
+    button[matcha-button],
+    a[matcha-button] {
         border: 0px solid currentColor;
-        transition: all 50ms linear;
-        overflow: hidden;
-        position: relative;
-        font-size: 16px;
-        font-weight: 700;
-        height: 56px;
-        appearance: auto;
-        text-rendering: auto;
-        letter-spacing: normal;
-        word-spacing: normal;
-        line-height: normal;
-        text-transform: none;
-        text-indent: 0px;
-        text-shadow: none;
-        display: inline-block;
-        text-align: center;
-        align-items: flex-start;
-        cursor: pointer;
-        box-sizing: border-box;
-        *{
-            pointer-events: none;
-        }
 
-        @include generate-matcha-button-size-classes($helper-breakpoints);
-
-        &-main {
-            background: map-get($background, background);
-            line-height: px-to-rem(32px);
-            padding: 0 px-to-rem(16px);
-        }
-
-        &-tiny,
-        &-small,
-        &-medium,
-        &-large,
-        &-huge {
-            min-width: 24px;
+        &[size="tiny"],
+        &[size="small"],
+        &[size="medium"],
+        &[size="large"],
+        &[size="huge"] {
 
             &.stroked {
-                box-shadow: 0px 0px 0px 2px inset;
 
                 &.color-label {
                     box-shadow: 0px 0px 0px 2px inset map-get($foreground, label);
@@ -105,79 +222,40 @@
             }
         }
 
-        &:hover{
-            filter: brightness(1.05);
-        }
-
-        &:active{
-            filter: brightness(1.1);
-        }
-
         &[disabled] {
             background-color: map-get($background, disabled);
             color: #b5bdc3 !important;
             border-color: map-get($foreground, disabled);
-            pointer-events: none;
         }
 
-        &-basic {
+        &[basic]:not([icon="false"]) {
             border: 0px solid currentColor;
-            box-shadow: 0px 0px 0px 0px inset;
-            background: transparent !important;
-            color: map-get($foreground, base);
-            border-color: map-get($foreground, base);
+            background: map-get($background, card);
+            &:not([color]){
+                border-color: map-get($foreground, base);
+                background: transparent !important;
+            }
+            &[color]:not([outline]){
+                background: map-get($background, card)!important;
+            }
         }
 
-        &-outline {
+        &[outline]:not([outline="false"]) {
             border: 0px solid currentColor;
-            box-shadow: 0px 0px 0px 2px inset;
             background: transparent !important;
-            color: map-get($foreground, base);
-            border-color: map-get($foreground, base);
+            &:not([color]){
+                border-color: map-get($foreground, base);
+                color: map-get($foreground, base);
+            }
         }
 
-        &-pill {
-            border-radius: 999px;
+        &[pill]:not([pill="false"]) {
         }
 
-        &-link {
+        &[link]:not([link="false"]) {
             background-color: transparent;
-            color: map-get($foreground, label);
-            text-transform: initial;
-            letter-spacing: 0;
-            text-decoration: underline;
-            padding: 0;
-        }
-
-        &-icon {
-            aspect-ratio: 1;
-            padding: 0 !important;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .ripple {
-            position: absolute;
-            border-radius: 999px;
-            transform: scale(0);
-            pointer-events: none;
-        }
-        .ripple.show {
-            animation: ripple 400ms ease-out;
-        }
-
-        @keyframes ripple {
-            0% {
-                opacity: 0;
-                transform: scale(0);
-            }
-            25% {
-                opacity: 1;
-            }
-            100% {
-                opacity: 0;
-                transform: scale(2);
+            &:not([color]){
+                color: map-get($foreground, label);
             }
         }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "matcha-theme",
-    "version": "18.1.45",
+    "version": "18.1.47",
     "description": "Themes for matcha-design-system",
     "main": "main.scss",
     "scripts": {