matcha-theme 19.55.0 → 19.57.0

package/components/matcha-cards.scss

@@ -72,7 +72,7 @@
             border: 0px solid currentColor;
             background: map-get($background, card);
             &:not([color]){
-                border-color: map-get($foreground, base);
+                border-color: getForeground($theme);
                 background: transparent !important;
             }
             &[color]:not([outline]){
@@ -85,469 +85,98 @@
             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);
             }
         }
 
         &:not([color]) {
             background: map-get($background, card);
-            color: map-get($foreground, base);
-        }
-        // red
-        &[color="red"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($red, $get-shade), 0.2);
-            color: map-get($foreground, base)
-        }
-        &[color="red"][tint]:not([tint="false"]){
-            background: rgba(map-get($red, $get-shade), 0.2);
-            color: map-get($red, $get-shade);
-        }
-        &[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="red"]{
-            background: map-get($red, $get-shade);
-            color: map-get($red-contrast, $get-shade);
-        }
-
-        // pink
-        &[color="pink"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($pink, $get-shade), 0.2);
-            color: map-get($foreground, base)
-        }
-        &[color="pink"][tint]:not([tint="false"]){
-            background: rgba(map-get($pink, $get-shade), 0.2);
-            color: map-get($pink, $get-shade);
-        }
-        &[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="pink"]{
-            background: map-get($pink, $get-shade);
-            color: map-get($pink-contrast, $get-shade);
-        }
-
-        // purple
-        &[color="purple"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($purple, $get-shade), 0.2);
-            color: map-get($foreground, base)
-        }
-        &[color="purple"][tint]:not([tint="false"]){
-            background: rgba(map-get($purple, $get-shade), 0.2);
-            color: map-get($purple, $get-shade);
-        }
-        &[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="purple"]{
-            background: map-get($purple, $get-shade);
-            color: map-get($purple-contrast, $get-shade);
-        }
-
-        // deep-purple
-        &[color="deep-purple"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($deep-purple, $get-shade), 0.2);
-            color: map-get($foreground, base)
-        }
-        &[color="deep-purple"][tint]:not([tint="false"]){
-            background: rgba(map-get($deep-purple, $get-shade), 0.2);
-            color: map-get($deep-purple, $get-shade);
-        }
-        &[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="deep-purple"]{
-            background: map-get($deep-purple, $get-shade);
-            color: map-get($deep-purple-contrast, $get-shade);
-        }
-
-        // indigo
-        &[color="indigo"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($indigo, $get-shade), 0.2);
-            color: map-get($foreground, base)
-        }
-        &[color="indigo"][tint]:not([tint="false"]){
-            background: rgba(map-get($indigo, $get-shade), 0.2);
-            color: map-get($indigo, $get-shade);
-        }
-        &[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="indigo"]{
-            background: map-get($indigo, $get-shade);
-            color: map-get($indigo-contrast, $get-shade);
-        }
-
-        // blue
-        &[color="blue"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($blue, $get-shade), 0.2);
-            color: map-get($foreground, base)
-        }
-        &[color="blue"][tint]:not([tint="false"]){
-            background: rgba(map-get($blue, $get-shade), 0.2);
-            color: map-get($blue, $get-shade);
-        }
-        &[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="blue"]{
-            background: map-get($blue, $get-shade);
-            color: map-get($blue-contrast, $get-shade);
-        }
-
-        // light-blue
-        &[color="light-blue"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($light-blue, $get-shade), 0.2);
-            color: map-get($foreground, base)
-        }
-        &[color="light-blue"][tint]:not([tint="false"]){
-            background: rgba(map-get($light-blue, $get-shade), 0.2);
-            color: map-get($light-blue, $get-shade);
-        }
-        &[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="light-blue"]{
-            background: map-get($light-blue, $get-shade);
-            color: map-get($light-blue-contrast, $get-shade);
-        }
-
-        // cyan
-        &[color="cyan"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($cyan, $get-shade), 0.2);
-            color: map-get($foreground, base)
-        }
-        &[color="cyan"][tint]:not([tint="false"]){
-            background: rgba(map-get($cyan, $get-shade), 0.2);
-            color: map-get($cyan, $get-shade);
-        }
-        &[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="cyan"]{
-            background: map-get($cyan, $get-shade);
-            color: map-get($cyan-contrast, $get-shade);
-        }
-
-        // teal
-        &[color="teal"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($teal, $get-shade), 0.2);
-            color: map-get($foreground, base)
-        }
-        &[color="teal"][tint]:not([tint="false"]){
-            background: rgba(map-get($teal, $get-shade), 0.2);
-            color: map-get($teal, $get-shade);
-        }
-        &[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="teal"]{
-            background: map-get($teal, $get-shade);
-            color: map-get($teal-contrast, $get-shade);
-        }
-
-        // green
-        &[color="green"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($green, $get-shade), 0.2);
-            color: map-get($foreground, base)
-        }
-        &[color="green"][tint]:not([tint="false"]){
-            background: rgba(map-get($green, $get-shade), 0.2);
-            color: map-get($green, $get-shade);
-        }
-        &[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="green"]{
-            background: map-get($green, $get-shade);
-            color: map-get($green-contrast, $get-shade);
-        }
-
-        // light-green
-        &[color="light-green"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($light-green, $get-shade), 0.2);
-            color: map-get($foreground, base)
-        }
-        &[color="light-green"][tint]:not([tint="false"]){
-            background: rgba(map-get($light-green, $get-shade), 0.2);
-            color: map-get($light-green, $get-shade);
-        }
-        &[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="light-green"]{
-            background: map-get($light-green, $get-shade);
-            color: map-get($light-green-contrast, $get-shade);
-        }
-
-        // lime
-        &[color="lime"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($lime, $get-shade), 0.2);
-            color: map-get($foreground, base)
-        }
-        &[color="lime"][tint]:not([tint="false"]){
-            background: rgba(map-get($lime, $get-shade), 0.2);
-            color: map-get($lime, $get-shade);
-        }
-        &[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="lime"]{
-            background: map-get($lime, $get-shade);
-            color: map-get($lime-contrast, $get-shade);
-        }
-
-        // yellow
-        &[color="yellow"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($yellow, $get-shade), 0.2);
-            color: map-get($foreground, base)
-        }
-        &[color="yellow"][tint]:not([tint="false"]){
-            background: rgba(map-get($yellow, $get-shade), 0.2);
-            color: map-get($yellow, $get-shade);
-        }
-        &[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="yellow"]{
-            background: map-get($yellow, $get-shade);
-            color: map-get($yellow-contrast, $get-shade);
-        }
-
-        // amber
-        &[color="amber"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($amber, $get-shade), 0.2);
-            color: map-get($foreground, base)
-        }
-        &[color="amber"][tint]:not([tint="false"]){
-            background: rgba(map-get($amber, $get-shade), 0.2);
-            color: map-get($amber, $get-shade);
-        }
-        &[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="amber"]{
-            background: map-get($amber, $get-shade);
-            color: map-get($amber-contrast, $get-shade);
-        }
-
-        // orange
-        &[color="orange"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($orange, $get-shade), 0.2);
-            color: map-get($foreground, base)
-        }
-        &[color="orange"][tint]:not([tint="false"]){
-            background: rgba(map-get($orange, $get-shade), 0.2);
-            color: map-get($orange, $get-shade);
-        }
-        &[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="orange"]{
-            background: map-get($orange, $get-shade);
-            color: map-get($orange-contrast, $get-shade);
-        }
-
-        // deep-orange
-        &[color="deep-orange"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($deep-orange, $get-shade), 0.2);
-            color: map-get($foreground, base)
-        }
-        &[color="deep-orange"][tint]:not([tint="false"]){
-            background: rgba(map-get($deep-orange, $get-shade), 0.2);
-            color: map-get($deep-orange, $get-shade);
-        }
-        &[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="deep-orange"]{
-            background: map-get($deep-orange, $get-shade);
-            color: map-get($deep-orange-contrast, $get-shade);
-        }
-
-        // brown
-        &[color="brown"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($brown, $get-shade), 0.2);
-            color: map-get($foreground, base)
-        }
-        &[color="brown"][tint]:not([tint="false"]){
-            background: rgba(map-get($brown, $get-shade), 0.2);
-            color: map-get($brown, $get-shade);
-        }
-        &[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="brown"]{
-            background: map-get($brown, $get-shade);
-            color: map-get($brown-contrast, $get-shade);
-        }
-
-        // grey
-        &[color="grey"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($grey, $get-shade), 0.2);
-            color: map-get($foreground, base)
-        }
-        &[color="grey"][tint]:not([tint="false"]){
-            background: rgba(map-get($grey, $get-shade), 0.2);
-            color: map-get($grey, $get-shade);
-        }
-        &[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="grey"]{
-            background: map-get($grey, $get-shade);
-            color: map-get($grey-contrast, $get-shade);
-        }
-
-        // blue-grey
-        &[color="blue-grey"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($blue-grey, $get-shade), 0.2);
-            color: map-get($foreground, base)
-        }
-        &[color="blue-grey"][tint]:not([tint="false"]){
-            background: rgba(map-get($blue-grey, $get-shade), 0.2);
-            color: map-get($blue-grey, $get-shade);
-        }
-        &[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="blue-grey"]{
-            background: map-get($blue-grey, $get-shade);
-            color: map-get($blue-grey-contrast, $get-shade);
-        }
-
-        // primary
-        &[color="primary"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($primary, default), 0.2);
-            color: map-get($foreground, base)
-        }
-        &[color="primary"][tint]:not([tint="false"]){
-            background: rgba(map-get($primary, default), 0.2);
-            color: map-get($primary, default);
-        }
-        &[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="primary"]{
-            background: map-get($primary, default);
-            color: map-get($primary, default-contrast);
-        }
-
-        // accent
-        &[color="accent"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($accent, default), 0.2);
-            color: map-get($foreground, base)
-        }
-        &[color="accent"][tint]:not([tint="false"]){
-            background: rgba(map-get($accent, default), 0.2);
-            color: map-get($accent, default);
-        }
-        &[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="accent"]{
-            background: map-get($accent, default);
-            color: map-get($accent, default-contrast);
-        }
-
-        // warn
-        &[color="warn"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($warn, default), 0.2);
-            color: map-get($foreground, base)
-        }
-        &[color="warn"][tint]:not([tint="false"]){
-            background: rgba(map-get($warn, default), 0.2);
-            color: map-get($warn, default);
-        }
-        &[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="warn"]{
-            background: map-get($warn, default);
-            color: map-get($warn, default-contrast);
+            color: getForeground($theme);
+        }
+
+        $color-functions: (
+            red: getRed,
+            pink: getPink,
+            purple: getPurple,
+            deep-purple: getDeepPurple,
+            indigo: getIndigo,
+            blue: getBlue,
+            light-blue: getLightBlue,
+            cyan: getCyan,
+            teal: getTeal,
+            green: getGreen,
+            light-green: getLightGreen,
+            lime: getLime,
+            yellow: getYellow,
+            amber: getAmber,
+            orange: getOrange,
+            deep-orange: getDeepOrange,
+            brown: getBrown,
+            grey: getGrey,
+            blue-grey: getBlueGrey,
+            primary: getPrimary,
+            accent: getAccent,
+            warn: getWarn,
+            disabled: getDisabled,
+        );
+
+        @each $colorName, $colorFn in $color-functions {
+            &[color='"" + $colorName'][alpha]:not([alpha="false"]) {
+                background: call(#{$colorFn}Alpha, $theme);
+                color: call(#{$colorFn}Contrast, $theme);
+            }
+            &[color='"" + $colorName'][tint]:not([tint="false"]) {
+                background: call(#{$colorFn}Alpha, $theme);
+                color: call(#{$colorFn}Contrast, $theme);
+            }
+            &[color='"" + $colorName'][outline]:not([outline="false"]),
+            &[color='"" + $colorName'][link]:not([link="false"]),
+            &[color='"" + $colorName'][basic]:not([basic="false"]) {
+                color: call(#{$colorFn}Contrast, $theme)!important
+            }
+            &[color='"" + $colorName'] {
+                background: call(#{$colorFn}, $theme);
+                color: call(#{$colorFn}Contrast, $theme);
+            }
         }
 
         // bg
         &[color="bg"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($background, background), 0.2);
+            background: getBackgroundAlpha($theme);
             color: map-get($foreground, base)
         }
         &[color="bg"][tint]:not([tint="false"]){
-            background: rgba(map-get($background, background), 0.2);
-            color: map-get($foreground, base);
+            background: getBackgroundAlpha($theme);
+            color: getForeground($theme);
         }
         &[color="bg"][outline]:not([outline="false"]),
         &[color="bg"][link]:not([link="false"]),
         &[color="bg"][basic]:not([basic="false"]) {
-            color: map-get($foreground, base)!important
+            color: getForeground($theme);
         }
         &[color="bg"]{
             background: map-get($background, background);
-            color: map-get($foreground, base);
+            color: getForeground($theme);
         }
 
         // surface
         &[color="surface"][alpha]:not([alpha="false"]){
-            background: rgba(map-get($background, card), 0.2);
+            background: getSurfaceAlpha($theme);
             color: map-get($foreground, base)
         }
         &[color="surface"][tint]:not([tint="false"]){
-            background: rgba(map-get($background, card), 0.2);
-            color: map-get($foreground, base);
+            background: getSurfaceAlpha($theme);
+            color: getForeground($theme);
         }
         &[color="surface"][outline]:not([outline="false"]),
         &[color="surface"][link]:not([link="false"]),
         &[color="surface"][basic]:not([basic="false"]) {
-            color: map-get($foreground, base)!important
+            color: getForeground($theme);
         }
         &[color="surface"]{
             background: map-get($background, card);
-            color: map-get($foreground, base);
+            color: getForeground($theme);
         }
 
         // fg
@@ -562,10 +191,10 @@
         &[color="fg"][outline]:not([outline="false"]),
         &[color="fg"][link]:not([link="false"]),
         &[color="fg"][basic]:not([basic="false"]) {
-            color: map-get($foreground, base)!important
+            color: getForeground($theme);
         }
         &[color="fg"]{
-            background: map-get($foreground, base);
+            background: getForeground($theme);
             color: map-get($foreground, text-inverse);
         }
 
@@ -576,21 +205,21 @@
         }
         &[color="basic"][tint]:not([tint="false"]){
             background: rgba(map-get($foreground, base), 0.2);
-            color: map-get($foreground, base);
+            color: getForeground($theme);
         }
         &[color="basic"][outline]:not([outline="false"]),
         &[color="basic"][link]:not([link="false"]),
         &[color="basic"][basic]:not([basic="false"]) {
-            color: map-get($foreground, base)!important
+            color: getForeground($theme);
         }
         &[color="basic"]{
             background: map-get($background, card);
-            color: map-get($foreground, base);
+            color: getForeground($theme);
         }
         &[color="basic"]{
             background: map-get($background, card);
             &:not([color]){
-                color: map-get($foreground, base);
+                color: getForeground($theme);
             }
         }
     }
@@ -604,6 +233,7 @@ matcha-card,
 .matcha-card-flat {
     padding: 16px;
     border-radius: 8px;
+    display: flex;
 
     &-border,
     &-border-left {

package/components/matcha-modal.scss

@@ -0,0 +1,86 @@
+@mixin generate-matcha-modal-sizes-classes($helper-breakpoints){
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            &[size#{$infix}="tiny"] .matcha-modal {
+                width: 100%;
+                max-width: px-to-rem(320px);
+            }
+
+            &[size#{$infix}="small"] .matcha-modal  {
+                width: 100%;
+                max-width: px-to-rem(400px);
+            }
+
+            &[size#{$infix}="medium"] .matcha-modal  {
+                width: 100%;
+                max-width: px-to-rem(480px);
+            }
+
+            &[size#{$infix}="large"] .matcha-modal  {
+                width: 100%;
+                max-width: px-to-rem(560px);
+            }
+
+            &[size#{$infix}="huge"] .matcha-modal  {
+                width: 100%;
+                max-width: px-to-rem(640px);
+            }
+        }
+    }
+}
+
+@mixin matcha-modal-theme($theme) {
+    matcha-modal {
+        display: block;
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        z-index: 1000;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        @include generate-matcha-modal-sizes-classes($helper-breakpoints);
+    }
+
+    .matcha-modal-backdrop {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: getDisabledAlpha($theme);
+        backdrop-filter: blur(6px);
+        mix-blend-mode: multiply;
+        z-index: 999;
+    }
+
+    .matcha-overlay-container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 1000;
+        pointer-events: none;
+    }
+
+
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+        }
+        to {
+            opacity: 1;
+        }
+    }
+
+    .matcha-overlay-container > * {
+        pointer-events: auto;
+    }
+
+}