matcha-theme 20.195.0 → 20.197.0

package/abstracts/_functions.scss

@@ -175,11 +175,11 @@
     $is-dark: map.get($theme, is-dark);
 
     @if $is-dark {
-        @return rgba($color-base-blue-grey-100, 0.2); // Cor clara para tema light
+        @return rgba($color-base-blue-grey-100, 0.1); // Cor clara para tema light
     }
 
     @else {
-        @return rgba($color-base-blue-grey-900, 0.2); // Cor escura para tema dark
+        @return rgba($color-base-blue-grey-900, 0.1); // Cor escura para tema dark
     }
 }
 
@@ -199,11 +199,11 @@
     $is-dark: map.get($theme, is-dark);
 
     @if $is-dark {
-        @return rgba($color-base-blue-grey-900, 0.2); // Cor clara para tema light
+        @return rgba($color-base-blue-grey-900, 0.1); // Cor clara para tema light
     }
 
     @else {
-        @return rgba($color-base-blue-grey-100, 0.2); // Cor escura para tema dark
+        @return rgba($color-base-blue-grey-100, 0.1); // Cor escura para tema dark
     }
 }
 
@@ -260,13 +260,13 @@
 
 @function getRedAlpha($theme) {
     $red-color: getRed($theme);
-    $red-color-alpha: rgba($red-color, 0.2);
+    $red-color-alpha: rgba($red-color, 0.1);
     @return $red-color-alpha;
 }
 
 @function getRedContrastAlpha($theme) {
     $red-contrast: getRedContrast($theme);
-    $red-contrast-alpha: rgba($red-contrast, 0.2);
+    $red-contrast-alpha: rgba($red-contrast, 0.1);
     @return $red-contrast-alpha;
 }
 
@@ -284,13 +284,13 @@
 
 @function getPinkAlpha($theme) {
     $pink-color: getPink($theme);
-    $pink-color-alpha: rgba($pink-color, 0.2);
+    $pink-color-alpha: rgba($pink-color, 0.1);
     @return $pink-color-alpha;
 }
 
 @function getPinkContrastAlpha($theme) {
     $pink-contrast: getPinkContrast($theme);
-    $pink-contrast-alpha: rgba($pink-contrast, 0.2);
+    $pink-contrast-alpha: rgba($pink-contrast, 0.1);
     @return $pink-contrast-alpha;
 }
 
@@ -308,13 +308,13 @@
 
 @function getPurpleAlpha($theme) {
     $purple-color: getPurple($theme);
-    $purple-color-alpha: rgba($purple-color, 0.2);
+    $purple-color-alpha: rgba($purple-color, 0.1);
     @return $purple-color-alpha;
 }
 
 @function getPurpleContrastAlpha($theme) {
     $purple-contrast: getPurpleContrast($theme);
-    $purple-contrast-alpha: rgba($purple-contrast, 0.2);
+    $purple-contrast-alpha: rgba($purple-contrast, 0.1);
     @return $purple-contrast-alpha;
 }
 
@@ -332,13 +332,13 @@
 
 @function getDeepPurpleAlpha($theme) {
     $deep-purple-color: getDeepPurple($theme);
-    $deep-purple-color-alpha: rgba($deep-purple-color, 0.2);
+    $deep-purple-color-alpha: rgba($deep-purple-color, 0.1);
     @return $deep-purple-color-alpha;
 }
 
 @function getDeepPurpleContrastAlpha($theme) {
     $deep-purple-contrast: getDeepPurpleContrast($theme);
-    $deep-purple-contrast-alpha: rgba($deep-purple-contrast, 0.2);
+    $deep-purple-contrast-alpha: rgba($deep-purple-contrast, 0.1);
     @return $deep-purple-contrast-alpha;
 }
 
@@ -356,13 +356,13 @@
 
 @function getIndigoAlpha($theme) {
     $indigo-color: getIndigo($theme);
-    $indigo-color-alpha: rgba($indigo-color, 0.2);
+    $indigo-color-alpha: rgba($indigo-color, 0.1);
     @return $indigo-color-alpha;
 }
 
 @function getIndigoContrastAlpha($theme) {
     $indigo-contrast: getIndigoContrast($theme);
-    $indigo-contrast-alpha: rgba($indigo-contrast, 0.2);
+    $indigo-contrast-alpha: rgba($indigo-contrast, 0.1);
     @return $indigo-contrast-alpha;
 }
 
@@ -380,13 +380,13 @@
 
 @function getBlueAlpha($theme) {
     $blue-color: getBlue($theme);
-    $blue-color-alpha: rgba($blue-color, 0.2);
+    $blue-color-alpha: rgba($blue-color, 0.1);
     @return $blue-color-alpha;
 }
 
 @function getBlueContrastAlpha($theme) {
     $blue-contrast: getBlueContrast($theme);
-    $blue-contrast-alpha: rgba($blue-contrast, 0.2);
+    $blue-contrast-alpha: rgba($blue-contrast, 0.1);
     @return $blue-contrast-alpha;
 }
 
@@ -404,13 +404,13 @@
 
 @function getLightBlueAlpha($theme) {
     $light-blue-color: getLightBlue($theme);
-    $light-blue-color-alpha: rgba($light-blue-color, 0.2);
+    $light-blue-color-alpha: rgba($light-blue-color, 0.1);
     @return $light-blue-color-alpha;
 }
 
 @function getLightBlueContrastAlpha($theme) {
     $light-blue-contrast: getLightBlueContrast($theme);
-    $light-blue-contrast-alpha: rgba($light-blue-contrast, 0.2);
+    $light-blue-contrast-alpha: rgba($light-blue-contrast, 0.1);
     @return $light-blue-contrast-alpha;
 }
 
@@ -428,13 +428,13 @@
 
 @function getCyanAlpha($theme) {
     $cyan-color: getCyan($theme);
-    $cyan-color-alpha: rgba($cyan-color, 0.2);
+    $cyan-color-alpha: rgba($cyan-color, 0.1);
     @return $cyan-color-alpha;
 }
 
 @function getCyanContrastAlpha($theme) {
     $cyan-contrast: getCyanContrast($theme);
-    $cyan-contrast-alpha: rgba($cyan-contrast, 0.2);
+    $cyan-contrast-alpha: rgba($cyan-contrast, 0.1);
     @return $cyan-contrast-alpha;
 }
 
@@ -452,13 +452,13 @@
 
 @function getTealAlpha($theme) {
     $teal-color: getTeal($theme);
-    $teal-color-alpha: rgba($teal-color, 0.2);
+    $teal-color-alpha: rgba($teal-color, 0.1);
     @return $teal-color-alpha;
 }
 
 @function getTealContrastAlpha($theme) {
     $teal-contrast: getTealContrast($theme);
-    $teal-contrast-alpha: rgba($teal-contrast, 0.2);
+    $teal-contrast-alpha: rgba($teal-contrast, 0.1);
     @return $teal-contrast-alpha;
 }
 
@@ -476,13 +476,13 @@
 
 @function getGreenAlpha($theme) {
     $green-color: getGreen($theme);
-    $green-color-alpha: rgba($green-color, 0.2);
+    $green-color-alpha: rgba($green-color, 0.1);
     @return $green-color-alpha;
 }
 
 @function getGreenContrastAlpha($theme) {
     $green-contrast: getGreenContrast($theme);
-    $green-contrast-alpha: rgba($green-contrast, 0.2);
+    $green-contrast-alpha: rgba($green-contrast, 0.1);
     @return $green-contrast-alpha;
 }
 
@@ -500,13 +500,13 @@
 
 @function getLightGreenAlpha($theme) {
     $light-green-color: getLightGreen($theme);
-    $light-green-color-alpha: rgba($light-green-color, 0.2);
+    $light-green-color-alpha: rgba($light-green-color, 0.1);
     @return $light-green-color-alpha;
 }
 
 @function getLightGreenContrastAlpha($theme) {
     $light-green-contrast: getLightGreenContrast($theme);
-    $light-green-contrast-alpha: rgba($light-green-contrast, 0.2);
+    $light-green-contrast-alpha: rgba($light-green-contrast, 0.1);
     @return $light-green-contrast-alpha;
 }
 
@@ -524,13 +524,13 @@
 
 @function getLimeAlpha($theme) {
     $lime-color: getLime($theme);
-    $lime-color-alpha: rgba($lime-color, 0.2);
+    $lime-color-alpha: rgba($lime-color, 0.1);
     @return $lime-color-alpha;
 }
 
 @function getLimeContrastAlpha($theme) {
     $lime-contrast: getLimeContrast($theme);
-    $lime-contrast-alpha: rgba($lime-contrast, 0.2);
+    $lime-contrast-alpha: rgba($lime-contrast, 0.1);
     @return $lime-contrast-alpha;
 }
 
@@ -548,13 +548,13 @@
 
 @function getYellowAlpha($theme) {
     $yellow-color: getYellow($theme);
-    $yellow-color-alpha: rgba($yellow-color, 0.2);
+    $yellow-color-alpha: rgba($yellow-color, 0.1);
     @return $yellow-color-alpha;
 }
 
 @function getYellowContrastAlpha($theme) {
     $yellow-contrast: getYellowContrast($theme);
-    $yellow-contrast-alpha: rgba($yellow-contrast, 0.2);
+    $yellow-contrast-alpha: rgba($yellow-contrast, 0.1);
     @return $yellow-contrast-alpha;
 }
 
@@ -572,13 +572,13 @@
 
 @function getAmberAlpha($theme) {
     $amber-color: getAmber($theme);
-    $amber-color-alpha: rgba($amber-color, 0.2);
+    $amber-color-alpha: rgba($amber-color, 0.1);
     @return $amber-color-alpha;
 }
 
 @function getAmberContrastAlpha($theme) {
     $amber-contrast: getAmberContrast($theme);
-    $amber-contrast-alpha: rgba($amber-contrast, 0.2);
+    $amber-contrast-alpha: rgba($amber-contrast, 0.1);
     @return $amber-contrast-alpha;
 }
 
@@ -596,13 +596,13 @@
 
 @function getOrangeAlpha($theme) {
     $orange-color: getOrange($theme);
-    $orange-color-alpha: rgba($orange-color, 0.2);
+    $orange-color-alpha: rgba($orange-color, 0.1);
     @return $orange-color-alpha;
 }
 
 @function getOrangeContrastAlpha($theme) {
     $orange-contrast: getOrangeContrast($theme);
-    $orange-contrast-alpha: rgba($orange-contrast, 0.2);
+    $orange-contrast-alpha: rgba($orange-contrast, 0.1);
     @return $orange-contrast-alpha;
 }
 
@@ -620,13 +620,13 @@
 
 @function getDeepOrangeAlpha($theme) {
     $deep-orange-color: getDeepOrange($theme);
-    $deep-orange-color-alpha: rgba($deep-orange-color, 0.2);
+    $deep-orange-color-alpha: rgba($deep-orange-color, 0.1);
     @return $deep-orange-color-alpha;
 }
 
 @function getDeepOrangeContrastAlpha($theme) {
     $deep-orange-contrast: getDeepOrangeContrast($theme);
-    $deep-orange-contrast-alpha: rgba($deep-orange-contrast, 0.2);
+    $deep-orange-contrast-alpha: rgba($deep-orange-contrast, 0.1);
     @return $deep-orange-contrast-alpha;
 }
 
@@ -644,13 +644,13 @@
 
 @function getBrownAlpha($theme) {
     $brown-color: getBrown($theme);
-    $brown-color-alpha: rgba($brown-color, 0.2);
+    $brown-color-alpha: rgba($brown-color, 0.1);
     @return $brown-color-alpha;
 }
 
 @function getBrownContrastAlpha($theme) {
     $brown-contrast: getBrownContrast($theme);
-    $brown-contrast-alpha: rgba($brown-contrast, 0.2);
+    $brown-contrast-alpha: rgba($brown-contrast, 0.1);
     @return $brown-contrast-alpha;
 }
 
@@ -668,13 +668,13 @@
 
 @function getGreyAlpha($theme) {
     $grey-color: getGrey($theme);
-    $grey-color-alpha: rgba($grey-color, 0.2);
+    $grey-color-alpha: rgba($grey-color, 0.1);
     @return $grey-color-alpha;
 }
 
 @function getGreyContrastAlpha($theme) {
     $grey-contrast: getGreyContrast($theme);
-    $grey-contrast-alpha: rgba($grey-contrast, 0.2);
+    $grey-contrast-alpha: rgba($grey-contrast, 0.1);
     @return $grey-contrast-alpha;
 }
 
@@ -692,13 +692,13 @@
 
 @function getBlueGreyAlpha($theme) {
     $blue-grey-color: getBlueGrey($theme);
-    $blue-grey-color-alpha: rgba($blue-grey-color, 0.2);
+    $blue-grey-color-alpha: rgba($blue-grey-color, 0.1);
     @return $blue-grey-color-alpha;
 }
 
 @function getBlueGreyContrastAlpha($theme) {
     $blue-grey-contrast: getBlueGreyContrast($theme);
-    $blue-grey-contrast-alpha: rgba($blue-grey-contrast, 0.2);
+    $blue-grey-contrast-alpha: rgba($blue-grey-contrast, 0.1);
     @return $blue-grey-contrast-alpha;
 }
 
@@ -717,13 +717,13 @@
 
 @function getPrimaryAlpha($theme) {
     $primary-color: getPrimary($theme);
-    $primary-color-alpha: rgba($primary-color, 0.2);
+    $primary-color-alpha: rgba($primary-color, 0.1);
     @return $primary-color-alpha;
 }
 
 @function getPrimaryContrastAlpha($theme) {
     $primary-contrast: getPrimaryContrast($theme);
-    $primary-contrast-alpha: rgba($primary-contrast, 0.2);
+    $primary-contrast-alpha: rgba($primary-contrast, 0.1);
     @return $primary-contrast-alpha;
 }
 
@@ -742,13 +742,13 @@
 
 @function getAccentAlpha($theme) {
     $accent-color: getAccent($theme);
-    $accent-color-alpha: rgba($accent-color, 0.2);
+    $accent-color-alpha: rgba($accent-color, 0.1);
     @return $accent-color-alpha;
 }
 
 @function getAccentContrastAlpha($theme) {
     $accent-contrast: getAccentContrast($theme);
-    $accent-contrast-alpha: rgba($accent-contrast, 0.2);
+    $accent-contrast-alpha: rgba($accent-contrast, 0.1);
     @return $accent-contrast-alpha;
 }
 
@@ -767,13 +767,13 @@
 
 @function getDangerAlpha($theme) {
     $danger-color: getDanger($theme);
-    $danger-color-alpha: rgba($danger-color, 0.2);
+    $danger-color-alpha: rgba($danger-color, 0.1);
     @return $danger-color-alpha;
 }
 
 @function getDangerContrastAlpha($theme) {
     $danger-contrast: getDangerContrast($theme);
-    $danger-contrast-alpha: rgba($danger-contrast, 0.2);
+    $danger-contrast-alpha: rgba($danger-contrast, 0.1);
     @return $danger-contrast-alpha;
 }
 
@@ -792,13 +792,13 @@
 
 @function getWarnAlpha($theme) {
     $warn-color: getWarn($theme);
-    $warn-color-alpha: rgba($warn-color, 0.2);
+    $warn-color-alpha: rgba($warn-color, 0.1);
     @return $warn-color-alpha;
 }
 
 @function getWarnContrastAlpha($theme) {
     $warn-contrast: getWarnContrast($theme);
-    $warn-contrast-alpha: rgba($warn-contrast, 0.2);
+    $warn-contrast-alpha: rgba($warn-contrast, 0.1);
     @return $warn-contrast-alpha;
 }
 
@@ -817,13 +817,13 @@
 
 @function getSuccessAlpha($theme) {
     $success-color: getSuccess($theme);
-    $success-color-alpha: rgba($success-color, 0.2);
+    $success-color-alpha: rgba($success-color, 0.1);
     @return $success-color-alpha;
 }
 
 @function getSuccessContrastAlpha($theme) {
     $success-contrast: getSuccessContrast($theme);
-    $success-contrast-alpha: rgba($success-contrast, 0.2);
+    $success-contrast-alpha: rgba($success-contrast, 0.1);
     @return $success-contrast-alpha;
 }
 
@@ -842,13 +842,13 @@
 
 @function getInfoAlpha($theme) {
     $info-color: getInfo($theme);
-    $info-color-alpha: rgba($info-color, 0.2);
+    $info-color-alpha: rgba($info-color, 0.1);
     @return $info-color-alpha;
 }
 
 @function getInfoContrastAlpha($theme) {
     $info-contrast: getInfoContrast($theme);
-    $info-contrast-alpha: rgba($info-contrast, 0.2);
+    $info-contrast-alpha: rgba($info-contrast, 0.1);
     @return $info-contrast-alpha;
 }
 

package/components/matcha-modal.scss

@@ -1,29 +1,29 @@
-@mixin generate-matcha-modal-sizes-classes($helper-breakpoints){
+@mixin generate-matcha-modal-sizes-classes($helper-breakpoints) {
     @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
         @include media-breakpoint($materialBreakpoint) {
-            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+            $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
 
             &[size#{$infix}="tiny"] .matcha-modal {
                 width: 100%;
                 max-width: px-to-rem(320px);
             }
 
-            &[size#{$infix}="small"] .matcha-modal  {
+            &[size#{$infix}="small"] .matcha-modal {
                 width: 100%;
                 max-width: px-to-rem(400px);
             }
 
-            &[size#{$infix}="medium"] .matcha-modal  {
+            &[size#{$infix}="medium"] .matcha-modal {
                 width: 100%;
                 max-width: px-to-rem(480px);
             }
 
-            &[size#{$infix}="large"] .matcha-modal  {
+            &[size#{$infix}="large"] .matcha-modal {
                 width: 100%;
                 max-width: px-to-rem(560px);
             }
 
-            &[size#{$infix}="huge"] .matcha-modal  {
+            &[size#{$infix}="huge"] .matcha-modal {
                 width: 100%;
                 max-width: px-to-rem(640px);
             }
@@ -67,6 +67,10 @@
         height: 100%;
         z-index: 1000;
         pointer-events: none;
+
+        &>*:not(:last-child) {
+            opacity: 0.1;
+        }
     }
 
 
@@ -74,13 +78,14 @@
         from {
             opacity: 0;
         }
+
         to {
             opacity: 1;
         }
     }
 
-    .matcha-overlay-container > * {
+    .matcha-overlay-container>* {
         pointer-events: auto;
     }
 
-}
+}

package/package.json

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