matcha-theme 18.1.44 → 18.1.46

package/abstracts/_colors.scss

@@ -256,6 +256,7 @@ $index: 0;
     .red.matcha-button-outline, .color-red{color: map-get($red, $get-shade)}
     .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)}
     .red{
         background: map-get($red, $get-shade);
         color: map-get($red-contrast, $get-shade);
@@ -267,6 +268,7 @@ $index: 0;
     .pink.matcha-button-outline, .color-pink{color: map-get($pink, $get-shade)}
     .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)}
     .pink{
         background: map-get($pink, $get-shade);
         color: map-get($pink-contrast, $get-shade);
@@ -278,6 +280,7 @@ $index: 0;
     .purple.matcha-button-outline, .color-purple{color: map-get($purple, $get-shade)}
     .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)}
     .purple{
         background: map-get($purple, $get-shade);
         color: map-get($purple-contrast, $get-shade);
@@ -289,6 +292,7 @@ $index: 0;
     .deep-purple.matcha-button-outline, .color-deep-purple{color: map-get($deep-purple, $get-shade)}
     .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)}
     .deep-purple{
         background: map-get($deep-purple, $get-shade);
         color: map-get($deep-purple-contrast, $get-shade);
@@ -300,6 +304,7 @@ $index: 0;
     .indigo.matcha-button-outline, .color-indigo{color: map-get($indigo, $get-shade)}
     .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)}
     .indigo{
         background: map-get($indigo, $get-shade);
         color: map-get($indigo-contrast, $get-shade);
@@ -311,6 +316,7 @@ $index: 0;
     .blue.matcha-button-outline, .color-blue{color: map-get($blue, $get-shade)}
     .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)}
     .blue{
         background: map-get($blue, $get-shade);
         color: map-get($blue-contrast, $get-shade);
@@ -322,6 +328,7 @@ $index: 0;
     .light-blue.matcha-button-outline, .color-light-blue{color: map-get($light-blue, $get-shade)}
     .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)}
     .light-blue{
         background: map-get($light-blue, $get-shade);
         color: map-get($light-blue-contrast, $get-shade);
@@ -333,6 +340,7 @@ $index: 0;
     .cyan.matcha-button-outline, .color-cyan{color: map-get($cyan, $get-shade)}
     .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)}
     .cyan{
         background: map-get($cyan, $get-shade);
         color: map-get($cyan-contrast, $get-shade);
@@ -344,6 +352,7 @@ $index: 0;
     .teal.matcha-button-outline, .color-teal{color: map-get($teal, $get-shade)}
     .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)}
     .teal{
         background: map-get($teal, $get-shade);
         color: map-get($teal-contrast, $get-shade);
@@ -355,6 +364,7 @@ $index: 0;
     .green.matcha-button-outline, .color-green{color: map-get($green, $get-shade)}
     .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)}
     .green{
         background: map-get($green, $get-shade);
         color: map-get($green-contrast, $get-shade);
@@ -366,6 +376,7 @@ $index: 0;
     .light-green.matcha-button-outline, .color-light-green{color: map-get($light-green, $get-shade)}
     .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)}
     .light-green{
         background: map-get($light-green, $get-shade);
         color: map-get($light-green-contrast, $get-shade);
@@ -377,6 +388,7 @@ $index: 0;
     .lime.matcha-button-outline, .color-lime{color: map-get($lime, $get-shade)}
     .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)}
     .lime{
         background: map-get($lime, $get-shade);
         color: map-get($lime-contrast, $get-shade);
@@ -388,6 +400,7 @@ $index: 0;
     .yellow.matcha-button-outline, .color-yellow{color: map-get($yellow, $get-shade)}
     .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)}
     .yellow{
         background: map-get($yellow, $get-shade);
         color: map-get($yellow-contrast, $get-shade);
@@ -399,6 +412,7 @@ $index: 0;
     .amber.matcha-button-outline, .color-amber{color: map-get($amber, $get-shade)}
     .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)}
     .amber{
         background: map-get($amber, $get-shade);
         color: map-get($amber-contrast, $get-shade);
@@ -410,6 +424,7 @@ $index: 0;
     .orange.matcha-button-outline, .color-orange{color: map-get($orange, $get-shade)}
     .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)}
     .orange{
         background: map-get($orange, $get-shade);
         color: map-get($orange-contrast, $get-shade);
@@ -421,6 +436,7 @@ $index: 0;
     .deep-orange.matcha-button-outline, .color-deep-orange{color: map-get($deep-orange, $get-shade)}
     .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)}
     .deep-orange{
         background: map-get($deep-orange, $get-shade);
         color: map-get($deep-orange-contrast, $get-shade);
@@ -432,6 +448,7 @@ $index: 0;
     .brown.matcha-button-outline, .color-brown{color: map-get($brown, $get-shade)}
     .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)}
     .brown{
         background: map-get($brown, $get-shade);
         color: map-get($brown-contrast, $get-shade);
@@ -443,6 +460,7 @@ $index: 0;
     .grey.matcha-button-outline, .color-grey{color: map-get($grey, $get-shade)}
     .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)}
     .grey{
         background: map-get($grey, $get-shade);
         color: map-get($grey-contrast, $get-shade);
@@ -454,6 +472,7 @@ $index: 0;
     .blue-grey.matcha-button-outline, .color-blue-grey{color: map-get($blue-grey, $get-shade)}
     .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)}
     .blue-grey{
         background: map-get($blue-grey, $get-shade);
         color: map-get($blue-grey-contrast, $get-shade);
@@ -466,6 +485,7 @@ $index: 0;
     .primary.matcha-button-outline, .color-primary{color: map-get($primary, default)}
     .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)}
     .primary{
         background: map-get($primary, default);
         color: map-get($primary, default-contrast);
@@ -478,6 +498,7 @@ $index: 0;
     .accent.matcha-button-outline, .color-accent{color: map-get($accent, default)}
     .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)}
     .accent{
         background: map-get($accent, default);
         color: map-get($accent, default-contrast);
@@ -490,6 +511,7 @@ $index: 0;
     .warn.matcha-button-outline, .color-warn{color: map-get($warn, default)}
     .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)}
     .warn{
         background: map-get($warn, default);
         color: map-get($warn, default-contrast);
@@ -502,6 +524,7 @@ $index: 0;
     .basic.matcha-button-outline, .color-basic{color: map-get($foreground, base)}
     .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)}
     .basic{
         background: map-get($background, card);
         color: map-get($foreground, base);

package/package.json

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

package/tokens/_breakpoints.scss

@@ -1,17 +1,17 @@
 // Media step breakpoint mixin based on Angular Material lib
 $breakpoints: (
     xs: 'screen and (max-width: 599px)',
-    sm: 'screen and (min-width: 600px) and (max-width: 1023px)',
-    md: 'screen and (min-width: 1024px) and (max-width: 1439px)',
+    sm: 'screen and (min-width: 600px) and (max-width: 1359px)',
+    md: 'screen and (min-width: 1360px) and (max-width: 1439px)',
     lg: 'screen and (min-width: 1440px) and (max-width: 1919px)',
     xl: 'screen and (min-width: 1920px) and (max-width: 5000px)',
     lt-sm: 'screen and (max-width: 599px)',
-    lt-md: 'screen and (max-width: 1023px)',
+    lt-md: 'screen and (max-width: 1359px)',
     lt-lg: 'screen and (max-width: 1439px)',
     lt-xl: 'screen and (max-width: 1919px)',
     gt-xs: 'screen and (min-width: 600px)',
-    gt-sm: 'screen and (min-width: 1024px)', //old size - 980px
-    gt-md: 'screen and (min-width: 1440px)', //old size - 1280px
+    gt-sm: 'screen and (min-width: 1360px)',
+    gt-md: 'screen and (min-width: 1440px)',
     gt-lg: 'screen and (min-width: 1920px)'
 ) !default;