matcha-theme 19.17.0 → 19.18.0

package/abstracts/_colors.scss

@@ -208,6 +208,10 @@ $index: 0;
     .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-alpha{
+        background: rgba(map-get($red, $get-shade),0.2);
+        color: map-get($red-contrast, $get-shade);
+    }
     .red{
         background: map-get($red, $get-shade);
         color: map-get($red-contrast, $get-shade);
@@ -223,6 +227,10 @@ $index: 0;
     .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-alpha{
+        background: rgba(map-get($pink, $get-shade),0.2);
+        color: map-get($pink-contrast, $get-shade);
+    }
     .pink{
         background: map-get($pink, $get-shade);
         color: map-get($pink-contrast, $get-shade);
@@ -238,6 +246,10 @@ $index: 0;
     .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-alpha{
+        background: rgba(map-get($purple, $get-shade),0.2);
+        color: map-get($purple-contrast, $get-shade);
+    }
     .purple{
         background: map-get($purple, $get-shade);
         color: map-get($purple-contrast, $get-shade);
@@ -253,6 +265,10 @@ $index: 0;
     .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-alpha{
+        background: rgba(map-get($deep-purple, $get-shade),0.2);
+        color: map-get($deep-purple-contrast, $get-shade);
+    }
     .deep-purple{
         background: map-get($deep-purple, $get-shade);
         color: map-get($deep-purple-contrast, $get-shade);
@@ -268,6 +284,10 @@ $index: 0;
     .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-alpha{
+        background: rgba(map-get($indigo, $get-shade),0.2);
+        color: map-get($indigo-contrast, $get-shade);
+    }
     .indigo{
         background: map-get($indigo, $get-shade);
         color: map-get($indigo-contrast, $get-shade);
@@ -283,6 +303,10 @@ $index: 0;
     .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-alpha{
+        background: rgba(map-get($blue, $get-shade),0.2);
+        color: map-get($blue-contrast, $get-shade);
+    }
     .blue{
         background: map-get($blue, $get-shade);
         color: map-get($blue-contrast, $get-shade);
@@ -298,6 +322,10 @@ $index: 0;
     .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-alpha{
+        background: rgba(map-get($light-blue, $get-shade),0.2);
+        color: map-get($light-blue-contrast, $get-shade);
+    }
     .light-blue{
         background: map-get($light-blue, $get-shade);
         color: map-get($light-blue-contrast, $get-shade);
@@ -313,6 +341,10 @@ $index: 0;
     .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-alpha{
+        background: rgba(map-get($cyan, $get-shade),0.2);
+        color: map-get($cyan-contrast, $get-shade);
+    }
     .cyan{
         background: map-get($cyan, $get-shade);
         color: map-get($cyan-contrast, $get-shade);
@@ -328,6 +360,10 @@ $index: 0;
     .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-alpha{
+        background: rgba(map-get($teal, $get-shade),0.2);
+        color: map-get($teal-contrast, $get-shade);
+    }
     .teal{
         background: map-get($teal, $get-shade);
         color: map-get($teal-contrast, $get-shade);
@@ -343,6 +379,10 @@ $index: 0;
     .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-alpha{
+        background: rgba(map-get($green, $get-shade),0.2);
+        color: map-get($green-contrast, $get-shade);
+    }
     .green{
         background: map-get($green, $get-shade);
         color: map-get($green-contrast, $get-shade);
@@ -358,6 +398,10 @@ $index: 0;
     .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-alpha{
+        background: rgba(map-get($light-green, $get-shade),0.2);
+        color: map-get($light-green-contrast, $get-shade);
+    }
     .light-green{
         background: map-get($light-green, $get-shade);
         color: map-get($light-green-contrast, $get-shade);
@@ -373,6 +417,10 @@ $index: 0;
     .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-alpha{
+        background: rgba(map-get($lime, $get-shade),0.2);
+        color: map-get($lime-contrast, $get-shade);
+    }
     .lime{
         background: map-get($lime, $get-shade);
         color: map-get($lime-contrast, $get-shade);
@@ -388,6 +436,10 @@ $index: 0;
     .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-alpha{
+        background: rgba(map-get($yellow, $get-shade),0.2);
+        color: map-get($yellow-contrast, $get-shade);
+    }
     .yellow{
         background: map-get($yellow, $get-shade);
         color: map-get($yellow-contrast, $get-shade);
@@ -403,6 +455,10 @@ $index: 0;
     .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-alpha{
+        background: rgba(map-get($amber, $get-shade),0.2);
+        color: map-get($amber-contrast, $get-shade);
+    }
     .amber{
         background: map-get($amber, $get-shade);
         color: map-get($amber-contrast, $get-shade);
@@ -418,6 +474,10 @@ $index: 0;
     .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-alpha{
+        background: rgba(map-get($orange, $get-shade),0.2);
+        color: map-get($orange-contrast, $get-shade);
+    }
     .orange{
         background: map-get($orange, $get-shade);
         color: map-get($orange-contrast, $get-shade);
@@ -433,6 +493,10 @@ $index: 0;
     .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-alpha{
+        background: rgba(map-get($deep-orange, $get-shade),0.2);
+        color: map-get($deep-orange-contrast, $get-shade);
+    }
     .deep-orange{
         background: map-get($deep-orange, $get-shade);
         color: map-get($deep-orange-contrast, $get-shade);
@@ -448,6 +512,10 @@ $index: 0;
     .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-alpha{
+        background: rgba(map-get($brown, $get-shade),0.2);
+        color: map-get($brown-contrast, $get-shade);
+    }
     .brown{
         background: map-get($brown, $get-shade);
         color: map-get($brown-contrast, $get-shade);
@@ -463,6 +531,10 @@ $index: 0;
     .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-alpha{
+        background: rgba(map-get($grey, $get-shade),0.2);
+        color: map-get($grey-contrast, $get-shade);
+    }
     .grey{
         background: map-get($grey, $get-shade);
         color: map-get($grey-contrast, $get-shade);
@@ -478,6 +550,10 @@ $index: 0;
     .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-alpha{
+        background: rgba(map-get($blue-grey, $get-shade),0.2);
+        color: map-get($blue-grey-contrast, $get-shade);
+    }
     .blue-grey{
         background: map-get($blue-grey, $get-shade);
         color: map-get($blue-grey-contrast, $get-shade);
@@ -494,6 +570,10 @@ $index: 0;
     .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-alpha{
+        background: rgba(map-get($primary, $get-shade),0.2);
+        color: map-get($primary-contrast, $get-shade);
+    }
     .primary{
         background: map-get($primary, default);
         color: map-get($primary, default-contrast);
@@ -510,6 +590,10 @@ $index: 0;
     .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-alpha{
+        background: rgba(map-get($accent, $get-shade),0.2);
+        color: map-get($accent-contrast, $get-shade);
+    }
     .accent{
         background: map-get($accent, default);
         color: map-get($accent, default-contrast);
@@ -526,6 +610,10 @@ $index: 0;
     .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-alpha{
+        background: rgba(map-get($warn, $get-shade),0.2);
+        color: map-get($warn-contrast, $get-shade);
+    }
     .warn{
         background: map-get($warn, default);
         color: map-get($warn, default-contrast);
@@ -542,6 +630,10 @@ $index: 0;
     .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-alpha{
+        background: rgba(map-get($basic, $get-shade),0.2);
+        color: map-get($basic-contrast, $get-shade);
+    }
     .basic{
         background: map-get($background, card);
         &:not([color]){

package/package.json

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