matcha-theme 20.188.0 → 20.189.0

package/abstracts/_functions.scss

@@ -17,26 +17,18 @@
 // @param $primary
 // @param $lighter
 @function palette($base-palette, $default: 500, $lighter: 100, $darker: 700) {
-    $result: map.merge(
-        $base-palette,
-        (
-            default: map.get($base-palette, $default),
-            lighter: map.get($base-palette, $lighter),
-            darker: map.get($base-palette, $darker),
-            default-contrast: map-contrast($base-palette, $default),
-            lighter-contrast: map-contrast($base-palette, $lighter),
-            darker-contrast: map-contrast($base-palette, $darker)
-        )
-    );
+    $result: map.merge($base-palette,
+            (default: map.get($base-palette, $default),
+                lighter: map.get($base-palette, $lighter),
+                darker: map.get($base-palette, $darker),
+                default-contrast: map-contrast($base-palette, $default),
+                lighter-contrast: map-contrast($base-palette, $lighter),
+                darker-contrast: map-contrast($base-palette, $darker)));
 
     // For each hue in the palette, add a "-contrast" color to the map.
     @each $hue, $color in $base-palette {
-        $result: map.merge(
-            $result,
-            (
-                "#{$hue}-contrast": map-contrast($base-palette, $hue)
-            )
-        );
+        $result: map.merge($result,
+                ("#{$hue}-contrast": map-contrast($base-palette, $hue)));
     }
 
     @return $result;
@@ -65,13 +57,16 @@
         grey: $grey,
         blue-grey: $blue-grey
     );
-    @return $palettes;
+@return $palettes;
 }
 
 @function getAllPalettes($theme) {
     $primary: map.get($theme, primary);
     $accent: map.get($theme, accent);
+    $danger: map.get($theme, danger);
     $warn: map.get($theme, warn);
+    $success: map.get($theme, success);
+    $info: map.get($theme, info);
 
     // base colors
     $palettes: (
@@ -98,9 +93,12 @@
         dark-grey: $dark-grey,
         primary: $primary,
         accent: $accent,
-        warn: $warn
+        danger: $danger,
+        warn: $warn,
+        success: $success,
+        info: $info
     );
-    @return $palettes;
+@return $palettes;
 }
 
 @function getShade($theme) {
@@ -110,44 +108,50 @@
 }
 
 // Background
-@function getBackground($theme){
+@function getBackground($theme) {
     $background: map.get($theme, background);
     $background: map.get($background, background);
     @return $background;
 }
-@function getBackgroundAlpha($theme){
+
+@function getBackgroundAlpha($theme) {
     $background: map.get($theme, background);
     $background-color: map.get($background, background-alpha);
     @return $background-color;
 }
-@function getBackgroundInverse($theme){
+
+@function getBackgroundInverse($theme) {
     $background: map.get($theme, background);
     $background-inverse: map.get($background, background-inverse);
     @return $background-inverse;
 }
-@function getBackgroundAlphaInverse($theme){
+
+@function getBackgroundAlphaInverse($theme) {
     $background: map.get($theme, background);
     $background-color: map.get($background, background-alpha-inverse);
     @return $background-color;
 }
 
 // Surface
-@function getSurface($theme){
+@function getSurface($theme) {
     $background: map.get($theme, background);
     $surface: map.get($background, card);
     @return $surface;
 }
-@function getSurfaceAlpha($theme){
+
+@function getSurfaceAlpha($theme) {
     $background: map.get($theme, background);
     $surface-color: map.get($background, card-alpha);
     @return $surface-color;
 }
-@function getSurfaceInverse($theme){
+
+@function getSurfaceInverse($theme) {
     $background: map.get($theme, background);
     $surface-inverse: map.get($background, card-inverse);
     @return $surface-inverse;
 }
-@function getSurfaceAlphaInverse($theme){
+
+@function getSurfaceAlphaInverse($theme) {
     $background: map.get($theme, background);
     $surface-color: map.get($background, card-alpha-inverse);
     @return $surface-color;
@@ -155,38 +159,50 @@
 
 
 // Foreground
-@function getForeground($theme){
+@function getForeground($theme) {
     $is-dark: map.get($theme, is-dark);
+
     @if $is-dark {
         @return $color-base-blue-grey-100; // Cor clara para tema light
-    } @else {
+    }
+
+    @else {
         @return $color-base-blue-grey-900; // Cor escura para tema dark
     }
 }
 
-@function getForegroundAlpha($theme){
+@function getForegroundAlpha($theme) {
     $is-dark: map.get($theme, is-dark);
+
     @if $is-dark {
         @return rgba($color-base-blue-grey-100, 0.2); // Cor clara para tema light
-    } @else {
+    }
+
+    @else {
         @return rgba($color-base-blue-grey-900, 0.2); // Cor escura para tema dark
     }
 }
 
-@function getForegroundInverse($theme){
+@function getForegroundInverse($theme) {
     $is-dark: map.get($theme, is-dark);
+
     @if $is-dark {
         @return $color-base-blue-grey-900; // Cor clara para tema light
-    } @else {
+    }
+
+    @else {
         @return $color-base-blue-grey-100; // Cor escura para tema dark
     }
 }
 
-@function getForegroundAlphaInverse($theme){
+@function getForegroundAlphaInverse($theme) {
     $is-dark: map.get($theme, is-dark);
+
     @if $is-dark {
         @return rgba($color-base-blue-grey-900, 0.2); // Cor clara para tema light
-    } @else {
+    }
+
+    @else {
         @return rgba($color-base-blue-grey-100, 0.2); // Cor escura para tema dark
     }
 }
@@ -194,30 +210,34 @@
 
 // Disabled
 // #D4DDE3
-@function getDisabled($theme){
+@function getDisabled($theme) {
     $background: map.get($theme, background);
     $disabled: map.get($background, disabled);
     @return $disabled;
 }
-@function getDisabledBgContrast($theme){
+
+@function getDisabledBgContrast($theme) {
     $foreground: map.get($theme, foreground);
     $disabled-contrast: map.get($foreground, disabled-contrast);
     @return $disabled-contrast;
 }
+
 // rgba(0, 0, 0, 0.26),
-@function getDisabledContrast($theme){
+@function getDisabledContrast($theme) {
     $foreground: map.get($theme, foreground);
     $disabled-contrast: map.get($foreground, disabled);
     @return $disabled-contrast;
 }
+
 // #D4DDE3 50%
 @function getDisabledAlpha($theme) {
     $background: map.get($theme, background);
     $disabled-color: map.get($background, disabled-alpha);
     @return $disabled-color;
 }
+
 // rgba(0, 0, 0, 0.13)
-@function getDisabledContrastAlpha($theme){
+@function getDisabledContrastAlpha($theme) {
     $foreground: map.get($theme, foreground);
     $disabled-contrast-alpha: rgba(map.get($foreground, disabled), 0.5);
     @return $disabled-contrast-alpha;
@@ -231,16 +251,19 @@
     $red-color: map.get($red, getShade($theme));
     @return $red-color;
 }
+
 @function getRedContrast($theme) {
     $red-contrast-palette: map.get($red, 'contrast');
     $red-contrast: map.get($red-contrast-palette, getShade($theme));
     @return $red-contrast;
 }
+
 @function getRedAlpha($theme) {
     $red-color: getRed($theme);
     $red-color-alpha: rgba($red-color, 0.2);
     @return $red-color-alpha;
 }
+
 @function getRedContrastAlpha($theme) {
     $red-contrast: getRedContrast($theme);
     $red-contrast-alpha: rgba($red-contrast, 0.2);
@@ -252,16 +275,19 @@
     $pink-color: map.get($pink, getShade($theme));
     @return $pink-color;
 }
+
 @function getPinkContrast($theme) {
     $pink-contrast-palette: map.get($pink, 'contrast');
     $pink-contrast: map.get($pink-contrast-palette, getShade($theme));
     @return $pink-contrast;
 }
+
 @function getPinkAlpha($theme) {
     $pink-color: getPink($theme);
     $pink-color-alpha: rgba($pink-color, 0.2);
     @return $pink-color-alpha;
 }
+
 @function getPinkContrastAlpha($theme) {
     $pink-contrast: getPinkContrast($theme);
     $pink-contrast-alpha: rgba($pink-contrast, 0.2);
@@ -273,16 +299,19 @@
     $purple-color: map.get($purple, getShade($theme));
     @return $purple-color;
 }
+
 @function getPurpleContrast($theme) {
     $purple-contrast-palette: map.get($purple, 'contrast');
     $purple-contrast: map.get($purple-contrast-palette, getShade($theme));
     @return $purple-contrast;
 }
+
 @function getPurpleAlpha($theme) {
     $purple-color: getPurple($theme);
     $purple-color-alpha: rgba($purple-color, 0.2);
     @return $purple-color-alpha;
 }
+
 @function getPurpleContrastAlpha($theme) {
     $purple-contrast: getPurpleContrast($theme);
     $purple-contrast-alpha: rgba($purple-contrast, 0.2);
@@ -294,16 +323,19 @@
     $deep-purple-color: map.get($deep-purple, getShade($theme));
     @return $deep-purple-color;
 }
+
 @function getDeepPurpleContrast($theme) {
     $deep-purple-contrast-palette: map.get($deep-purple, 'contrast');
     $deep-purple-contrast: map.get($deep-purple-contrast-palette, getShade($theme));
     @return $deep-purple-contrast;
 }
+
 @function getDeepPurpleAlpha($theme) {
     $deep-purple-color: getDeepPurple($theme);
     $deep-purple-color-alpha: rgba($deep-purple-color, 0.2);
     @return $deep-purple-color-alpha;
 }
+
 @function getDeepPurpleContrastAlpha($theme) {
     $deep-purple-contrast: getDeepPurpleContrast($theme);
     $deep-purple-contrast-alpha: rgba($deep-purple-contrast, 0.2);
@@ -315,16 +347,19 @@
     $indigo-color: map.get($indigo, getShade($theme));
     @return $indigo-color;
 }
+
 @function getIndigoContrast($theme) {
     $indigo-contrast-palette: map.get($indigo, 'contrast');
     $indigo-contrast: map.get($indigo-contrast-palette, getShade($theme));
     @return $indigo-contrast;
 }
+
 @function getIndigoAlpha($theme) {
     $indigo-color: getIndigo($theme);
     $indigo-color-alpha: rgba($indigo-color, 0.2);
     @return $indigo-color-alpha;
 }
+
 @function getIndigoContrastAlpha($theme) {
     $indigo-contrast: getIndigoContrast($theme);
     $indigo-contrast-alpha: rgba($indigo-contrast, 0.2);
@@ -336,16 +371,19 @@
     $blue-color: map.get($blue, getShade($theme));
     @return $blue-color;
 }
+
 @function getBlueContrast($theme) {
     $blue-contrast-palette: map.get($blue, 'contrast');
     $blue-contrast: map.get($blue-contrast-palette, getShade($theme));
     @return $blue-contrast;
 }
+
 @function getBlueAlpha($theme) {
     $blue-color: getBlue($theme);
     $blue-color-alpha: rgba($blue-color, 0.2);
     @return $blue-color-alpha;
 }
+
 @function getBlueContrastAlpha($theme) {
     $blue-contrast: getBlueContrast($theme);
     $blue-contrast-alpha: rgba($blue-contrast, 0.2);
@@ -357,16 +395,19 @@
     $light-blue-color: map.get($light-blue, getShade($theme));
     @return $light-blue-color;
 }
+
 @function getLightBlueContrast($theme) {
     $light-blue-contrast-palette: map.get($light-blue, 'contrast');
     $light-blue-contrast: map.get($light-blue-contrast-palette, getShade($theme));
     @return $light-blue-contrast;
 }
+
 @function getLightBlueAlpha($theme) {
     $light-blue-color: getLightBlue($theme);
     $light-blue-color-alpha: rgba($light-blue-color, 0.2);
     @return $light-blue-color-alpha;
 }
+
 @function getLightBlueContrastAlpha($theme) {
     $light-blue-contrast: getLightBlueContrast($theme);
     $light-blue-contrast-alpha: rgba($light-blue-contrast, 0.2);
@@ -378,16 +419,19 @@
     $cyan-color: map.get($cyan, getShade($theme));
     @return $cyan-color;
 }
+
 @function getCyanContrast($theme) {
     $cyan-contrast-palette: map.get($cyan, 'contrast');
     $cyan-contrast: map.get($cyan-contrast-palette, getShade($theme));
     @return $cyan-contrast;
 }
+
 @function getCyanAlpha($theme) {
     $cyan-color: getCyan($theme);
     $cyan-color-alpha: rgba($cyan-color, 0.2);
     @return $cyan-color-alpha;
 }
+
 @function getCyanContrastAlpha($theme) {
     $cyan-contrast: getCyanContrast($theme);
     $cyan-contrast-alpha: rgba($cyan-contrast, 0.2);
@@ -399,16 +443,19 @@
     $teal-color: map.get($teal, getShade($theme));
     @return $teal-color;
 }
+
 @function getTealContrast($theme) {
     $teal-contrast-palette: map.get($teal, 'contrast');
     $teal-contrast: map.get($teal-contrast-palette, getShade($theme));
     @return $teal-contrast;
 }
+
 @function getTealAlpha($theme) {
     $teal-color: getTeal($theme);
     $teal-color-alpha: rgba($teal-color, 0.2);
     @return $teal-color-alpha;
 }
+
 @function getTealContrastAlpha($theme) {
     $teal-contrast: getTealContrast($theme);
     $teal-contrast-alpha: rgba($teal-contrast, 0.2);
@@ -420,16 +467,19 @@
     $green-color: map.get($green, getShade($theme));
     @return $green-color;
 }
+
 @function getGreenContrast($theme) {
     $green-contrast-palette: map.get($green, 'contrast');
     $green-contrast: map.get($green-contrast-palette, getShade($theme));
     @return $green-contrast;
 }
+
 @function getGreenAlpha($theme) {
     $green-color: getGreen($theme);
     $green-color-alpha: rgba($green-color, 0.2);
     @return $green-color-alpha;
 }
+
 @function getGreenContrastAlpha($theme) {
     $green-contrast: getGreenContrast($theme);
     $green-contrast-alpha: rgba($green-contrast, 0.2);
@@ -441,16 +491,19 @@
     $light-green-color: map.get($light-green, getShade($theme));
     @return $light-green-color;
 }
+
 @function getLightGreenContrast($theme) {
     $light-green-contrast-palette: map.get($light-green, 'contrast');
     $light-green-contrast: map.get($light-green-contrast-palette, getShade($theme));
     @return $light-green-contrast;
 }
+
 @function getLightGreenAlpha($theme) {
     $light-green-color: getLightGreen($theme);
     $light-green-color-alpha: rgba($light-green-color, 0.2);
     @return $light-green-color-alpha;
 }
+
 @function getLightGreenContrastAlpha($theme) {
     $light-green-contrast: getLightGreenContrast($theme);
     $light-green-contrast-alpha: rgba($light-green-contrast, 0.2);
@@ -462,16 +515,19 @@
     $lime-color: map.get($lime, getShade($theme));
     @return $lime-color;
 }
+
 @function getLimeContrast($theme) {
     $lime-contrast-palette: map.get($lime, 'contrast');
     $lime-contrast: map.get($lime-contrast-palette, getShade($theme));
     @return $lime-contrast;
 }
+
 @function getLimeAlpha($theme) {
     $lime-color: getLime($theme);
     $lime-color-alpha: rgba($lime-color, 0.2);
     @return $lime-color-alpha;
 }
+
 @function getLimeContrastAlpha($theme) {
     $lime-contrast: getLimeContrast($theme);
     $lime-contrast-alpha: rgba($lime-contrast, 0.2);
@@ -483,16 +539,19 @@
     $yellow-color: map.get($yellow, getShade($theme));
     @return $yellow-color;
 }
+
 @function getYellowContrast($theme) {
     $yellow-contrast-palette: map.get($yellow, 'contrast');
     $yellow-contrast: map.get($yellow-contrast-palette, getShade($theme));
     @return $yellow-contrast;
 }
+
 @function getYellowAlpha($theme) {
     $yellow-color: getYellow($theme);
     $yellow-color-alpha: rgba($yellow-color, 0.2);
     @return $yellow-color-alpha;
 }
+
 @function getYellowContrastAlpha($theme) {
     $yellow-contrast: getYellowContrast($theme);
     $yellow-contrast-alpha: rgba($yellow-contrast, 0.2);
@@ -504,16 +563,19 @@
     $amber-color: map.get($amber, getShade($theme));
     @return $amber-color;
 }
+
 @function getAmberContrast($theme) {
     $amber-contrast-palette: map.get($amber, 'contrast');
     $amber-contrast: map.get($amber-contrast-palette, getShade($theme));
     @return $amber-contrast;
 }
+
 @function getAmberAlpha($theme) {
     $amber-color: getAmber($theme);
     $amber-color-alpha: rgba($amber-color, 0.2);
     @return $amber-color-alpha;
 }
+
 @function getAmberContrastAlpha($theme) {
     $amber-contrast: getAmberContrast($theme);
     $amber-contrast-alpha: rgba($amber-contrast, 0.2);
@@ -525,16 +587,19 @@
     $orange-color: map.get($orange, getShade($theme));
     @return $orange-color;
 }
+
 @function getOrangeContrast($theme) {
     $orange-contrast-palette: map.get($orange, 'contrast');
     $orange-contrast: map.get($orange-contrast-palette, getShade($theme));
     @return $orange-contrast;
 }
+
 @function getOrangeAlpha($theme) {
     $orange-color: getOrange($theme);
     $orange-color-alpha: rgba($orange-color, 0.2);
     @return $orange-color-alpha;
 }
+
 @function getOrangeContrastAlpha($theme) {
     $orange-contrast: getOrangeContrast($theme);
     $orange-contrast-alpha: rgba($orange-contrast, 0.2);
@@ -546,16 +611,19 @@
     $deep-orange-color: map.get($deep-orange, getShade($theme));
     @return $deep-orange-color;
 }
+
 @function getDeepOrangeContrast($theme) {
     $deep-orange-contrast-palette: map.get($deep-orange, 'contrast');
     $deep-orange-contrast: map.get($deep-orange-contrast-palette, getShade($theme));
     @return $deep-orange-contrast;
 }
+
 @function getDeepOrangeAlpha($theme) {
     $deep-orange-color: getDeepOrange($theme);
     $deep-orange-color-alpha: rgba($deep-orange-color, 0.2);
     @return $deep-orange-color-alpha;
 }
+
 @function getDeepOrangeContrastAlpha($theme) {
     $deep-orange-contrast: getDeepOrangeContrast($theme);
     $deep-orange-contrast-alpha: rgba($deep-orange-contrast, 0.2);
@@ -567,16 +635,19 @@
     $brown-color: map.get($brown, getShade($theme));
     @return $brown-color;
 }
+
 @function getBrownContrast($theme) {
     $brown-contrast-palette: map.get($brown, 'contrast');
     $brown-contrast: map.get($brown-contrast-palette, getShade($theme));
     @return $brown-contrast;
 }
+
 @function getBrownAlpha($theme) {
     $brown-color: getBrown($theme);
     $brown-color-alpha: rgba($brown-color, 0.2);
     @return $brown-color-alpha;
 }
+
 @function getBrownContrastAlpha($theme) {
     $brown-contrast: getBrownContrast($theme);
     $brown-contrast-alpha: rgba($brown-contrast, 0.2);
@@ -588,16 +659,19 @@
     $grey-color: map.get($grey, getShade($theme));
     @return $grey-color;
 }
+
 @function getGreyContrast($theme) {
     $grey-contrast-palette: map.get($grey, 'contrast');
     $grey-contrast: map.get($grey-contrast-palette, getShade($theme));
     @return $grey-contrast;
 }
+
 @function getGreyAlpha($theme) {
     $grey-color: getGrey($theme);
     $grey-color-alpha: rgba($grey-color, 0.2);
     @return $grey-color-alpha;
 }
+
 @function getGreyContrastAlpha($theme) {
     $grey-contrast: getGreyContrast($theme);
     $grey-contrast-alpha: rgba($grey-contrast, 0.2);
@@ -609,16 +683,19 @@
     $blue-grey-color: map.get($blue-grey, getShade($theme));
     @return $blue-grey-color;
 }
+
 @function getBlueGreyContrast($theme) {
     $blue-grey-contrast-palette: map.get($blue-grey, 'contrast');
     $blue-grey-contrast: map.get($blue-grey-contrast-palette, getShade($theme));
     @return $blue-grey-contrast;
 }
+
 @function getBlueGreyAlpha($theme) {
     $blue-grey-color: getBlueGrey($theme);
     $blue-grey-color-alpha: rgba($blue-grey-color, 0.2);
     @return $blue-grey-color-alpha;
 }
+
 @function getBlueGreyContrastAlpha($theme) {
     $blue-grey-contrast: getBlueGreyContrast($theme);
     $blue-grey-contrast-alpha: rgba($blue-grey-contrast, 0.2);
@@ -631,16 +708,19 @@
     $primary-color: map.get($primary, default);
     @return $primary-color;
 }
+
 @function getPrimaryContrast($theme) {
     $primary: map.get($theme, primary);
     $primary-contrast: map.get($primary, default-contrast);
     @return $primary-contrast;
 }
+
 @function getPrimaryAlpha($theme) {
     $primary-color: getPrimary($theme);
     $primary-color-alpha: rgba($primary-color, 0.2);
     @return $primary-color-alpha;
 }
+
 @function getPrimaryContrastAlpha($theme) {
     $primary-contrast: getPrimaryContrast($theme);
     $primary-contrast-alpha: rgba($primary-contrast, 0.2);
@@ -653,46 +733,124 @@
     $accent-color: map.get($accent, default);
     @return $accent-color;
 }
+
 @function getAccentContrast($theme) {
     $accent: map.get($theme, accent);
     $accent-contrast: map.get($accent, default-contrast);
     @return $accent-contrast;
 }
+
 @function getAccentAlpha($theme) {
     $accent-color: getAccent($theme);
     $accent-color-alpha: rgba($accent-color, 0.2);
     @return $accent-color-alpha;
 }
+
 @function getAccentContrastAlpha($theme) {
     $accent-contrast: getAccentContrast($theme);
     $accent-contrast-alpha: rgba($accent-contrast, 0.2);
     @return $accent-contrast-alpha;
 }
 
+// Danger
+@function getDanger($theme) {
+    $danger: map.get($theme, danger);
+    $danger-color: map.get($danger, default);
+    @return $danger-color;
+}
+
+@function getDangerContrast($theme) {
+    $danger: map.get($theme, danger);
+    $danger-contrast: map.get($danger, default-contrast);
+    @return $danger-contrast;
+}
+
+@function getDangerAlpha($theme) {
+    $danger-color: getDanger($theme);
+    $danger-color-alpha: rgba($danger-color, 0.2);
+    @return $danger-color-alpha;
+}
+
+@function getDangerContrastAlpha($theme) {
+    $danger-contrast: getDangerContrast($theme);
+    $danger-contrast-alpha: rgba($danger-contrast, 0.2);
+    @return $danger-contrast-alpha;
+}
+
 // Warn
 @function getWarn($theme) {
     $warn: map.get($theme, warn);
     $warn-color: map.get($warn, default);
     @return $warn-color;
 }
+
 @function getWarnContrast($theme) {
     $warn: map.get($theme, warn);
     $warn-contrast: map.get($warn, default-contrast);
     @return $warn-contrast;
 }
+
 @function getWarnAlpha($theme) {
     $warn-color: getWarn($theme);
     $warn-color-alpha: rgba($warn-color, 0.2);
     @return $warn-color-alpha;
 }
+
 @function getWarnContrastAlpha($theme) {
     $warn-contrast: getWarnContrast($theme);
     $warn-contrast-alpha: rgba($warn-contrast, 0.2);
     @return $warn-contrast-alpha;
 }
 
+// Success
+@function getSuccess($theme) {
+    $success: map.get($theme, success);
+    $success-color: map.get($success, default);
+    @return $success-color;
+}
+
+@function getSuccessContrast($theme) {
+    $success: map.get($theme, success);
+    $success-contrast: map.get($success, default-contrast);
+    @return $success-contrast;
+}
+
+@function getSuccessAlpha($theme) {
+    $success-color: getSuccess($theme);
+    $success-color-alpha: rgba($success-color, 0.2);
+    @return $success-color-alpha;
+}
+
+@function getSuccessContrastAlpha($theme) {
+    $success-contrast: getSuccessContrast($theme);
+    $success-contrast-alpha: rgba($success-contrast, 0.2);
+    @return $success-contrast-alpha;
+}
+
+// Info
+@function getInfo($theme) {
+    $info: map.get($theme, info);
+    $info-color: map.get($info, default);
+    @return $info-color;
+}
+
+@function getInfoContrast($theme) {
+    $info: map.get($theme, info);
+    $info-contrast: map.get($info, default-contrast);
+    @return $info-contrast;
+}
 
+@function getInfoAlpha($theme) {
+    $info-color: getInfo($theme);
+    $info-color-alpha: rgba($info-color, 0.2);
+    @return $info-color-alpha;
+}
 
+@function getInfoContrastAlpha($theme) {
+    $info-contrast: getInfoContrast($theme);
+    $info-contrast-alpha: rgba($info-contrast, 0.2);
+    @return $info-contrast-alpha;
+}
 
 
 // Gets a color from a theme palette (the output of mat-palette).
@@ -704,9 +862,10 @@
 //     be treated as opacity.
 // @param $opacity The alpha channel value for the color.
 @function map-color($palette, $hue: default, $opacity: null) {
+
     // If hueKey is a number between zero and one, then it actually contains an
     // opacity value, so recall this function with the default hue and that given opacity.
-    @if type-of($hue) ==number and $hue >=0 and $hue <=1 {
+    @if type-of($hue)==number and $hue >=0 and $hue <=1 {
         @return map-color($palette, default, $hue);
     }
 
@@ -723,79 +882,100 @@
 }
 
 // Creates a container object for a light theme to be given to individual component theme mixins.
-@function light-theme($primary, $accent, $warn) {
-    @return (
-        primary: $primary,
+@function light-theme($primary,
+    $accent,
+    $warn: palette($yellow, 600),
+    $danger: palette($red, A700),
+    $success: palette($green, 900),
+    $info: palette($blue, 900)) {
+    @return (primary: $primary,
         accent: $accent,
         warn: $warn,
+        danger: $danger,
+        success: $success,
+        info: $info,
         is-dark: false,
         foreground: $light-theme-foreground-palette,
-        background: $light-theme-background-palette
-    );
+        background: $light-theme-background-palette );
 }
 
 // Creates a container object for a dark theme to be given to individual component theme mixins.
-@function dark-theme($primary, $accent, $warn) {
-    @return (
-        primary: $primary,
+@function dark-theme($primary, $accent, $warn: palette($yellow, 200),
+    $danger: palette($red, 200),
+    $success: palette($green, 200),
+    $info: palette($blue, 200)) {
+    @return (primary: $primary,
         accent: $accent,
         warn: $warn,
+        danger: $danger,
+        success: $success,
+        info: $info,
         is-dark: true,
         foreground: $dark-theme-foreground-palette,
-        background: $dark-theme-background-palette
-    );
+        background: $dark-theme-background-palette );
 }
 
 // Creates a container object for a custom light theme to be given to individual component theme mixins.
-@function light-custom-theme($primary, $accent, $warn, $custom-light-fg, $custom-light-bg) {
-    @return (
-        primary: $primary,
+@function light-custom-theme($custom-light-fg,
+    $custom-light-bg,
+    $primary,
+    $accent,
+    $warn: palette($yellow, 600),
+    $danger: palette($red, A700),
+    $success: palette($green, 900),
+    $info: palette($blue, 900)) {
+    @return (primary: $primary,
         accent: $accent,
         warn: $warn,
+        danger: $danger,
+        success: $success,
+        info: $info,
         is-dark: false,
         foreground: $custom-light-fg,
-        background: $custom-light-bg
-    );
+        background: $custom-light-bg );
 }
 
 // Creates a container object for a custom dark theme to be given to individual component theme mixins.
-@function dark-custom-theme($primary, $accent, $warn, $custom-dark-fg, $custom-dark-bg) {
-    @return (
-        primary: $primary,
+@function dark-custom-theme($custom-dark-fg,
+    $custom-dark-bg,
+    $primary,
+    $accent,
+    $warn: palette($yellow, 200),
+    $danger: palette($red, 200),
+    $success: palette($green, 200),
+    $info: palette($blue, 200)) {
+    @return (primary: $primary,
         accent: $accent,
         warn: $warn,
+        danger: $danger,
+        success: $success,
+        info: $info,
         is-dark: true,
         foreground: $custom-dark-fg,
-        background: $custom-dark-bg
-    );
+        background: $custom-dark-bg );
 }
 
 // -------------------------------------------------------------------------------------------------------------------
 // @ Typography functions
 // --------------------------------------------------------------------------------------------------------------------
 // Represents a typography level from the Material design spec.
-@function matcha-typography-level(
-    $font-size,
+@function matcha-typography-level($font-size,
     $line-height: $font-size,
     $font-weight: 400,
     $font-family: null,
-    $letter-spacing: null
-) {
-    @return (
-        font-size: $font-size,
+    $letter-spacing: null) {
+    @return (font-size: $font-size,
         line-height: $line-height,
         font-weight: $font-weight,
         font-family: $font-family,
-        letter-spacing: $letter-spacing
-    );
+        letter-spacing: $letter-spacing );
 }
 
 // Represents a collection of typography levels.
 // Defaults come from https://material.io/guidelines/style/typography.html
 // Note: The spec doesn't mention letter spacing. The values here come from
 // eyeballing it until it looked exactly like the spec examples.
-@function matcha-typography-config(
-    $font-family: 'CircularStd, "Helvetica Neue", "Arial", sans-serif, "angular";',
+@function matcha-typography-config($font-family: 'CircularStd, "Helvetica Neue", "Arial", sans-serif, "angular";',
     $display-4: matcha-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
     $display-3: matcha-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
     $display-2: matcha-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
@@ -808,8 +988,7 @@
     $body-1: matcha-typography-level(14px, 20px, 400),
     $caption: matcha-typography-level(12px, 20px, 500),
     $button: matcha-typography-level(14px, 14px, 500),
-    $input: matcha-typography-level(inherit, 1.125, 400)
-) {
+    $input: matcha-typography-level(inherit, 1.125, 400)) {
     // Line-height must be unit-less fraction of the font-size.
     // Declare an initial map with all of the levels.
     $config: (
@@ -828,32 +1007,20 @@
         input: $input
     );
 
-    // Loop through the levels and set the `font-family` of the ones that don't have one to the base.
-    // Note that Sass can't modify maps in place, which means that we need to merge and re-assign.
-    @each $key, $level in $config {
-        @if map.get($level, font-family) == null {
-            $new-level: map.merge(
-                $level,
-                (
-                    font-family: $font-family
-                )
-            );
-            $config: map.merge(
-                $config,
-                (
-                    $key: $new-level
-                )
-            );
-        }
+// Loop through the levels and set the `font-family` of the ones that don't have one to the base.
+// Note that Sass can't modify maps in place, which means that we need to merge and re-assign.
+@each $key, $level in $config {
+    @if map.get($level, font-family)==null {
+        $new-level: map.merge($level,
+                (font-family: $font-family ));
+        $config: map.merge($config,
+                ($key: $new-level ));
     }
+}
 
-    // Add the base font family to the config.
-    @return map.merge(
-        $config,
-        (
-            font-family: $font-family
-        )
-    );
+// Add the base font family to the config.
+@return map.merge($config,
+    (font-family: $font-family ));
 }
 
 // Utility for fetching a nested value from a typography config.
@@ -890,7 +1057,7 @@
     }
 
     // Guard against unquoting non-string values, because it's deprecated.
-    @return if(type-of($font-family) ==string, unquote($font-family), $font-family);
+    @return if(type-of($font-family)==string, unquote($font-family), $font-family);
 }
 
 // -------------------------------------------------------------------------------------------------------------------
@@ -899,10 +1066,9 @@
 // A collection of functions that can be used to apply elevation to a material
 
 @function _get-umbra-map($color, $opacity) {
-    $shadow-color: if(type-of($color) ==color, rgba($color, $opacity * 0.033), $color);
+    $shadow-color: if(type-of($color)==color, rgba($color, $opacity * 0.033), $color);
 
-    @return (
-        0: "0px 0px 0px 0px #{$shadow-color}",
+    @return (0: "0px 0px 0px 0px #{$shadow-color}",
         1: "0px 2px 2px 0px #{$shadow-color}",
         2: "0px 3px 2px -2px #{$shadow-color}",
         3: "0px 3px 3px -2px #{$shadow-color}",
@@ -931,10 +1097,9 @@
 }
 
 @function _get-penumbra-map($color, $opacity) {
-    $shadow-color: if(type-of($color) ==color, rgba($color, $opacity * 0.033), $color);
+    $shadow-color: if(type-of($color)==color, rgba($color, $opacity * 0.033), $color);
 
-    @return (
-        0: "0px 0px 0px 0px #{$shadow-color}",
+    @return (0: "0px 0px 0px 0px #{$shadow-color}",
         1: "0px 2px 2px 0px #{$shadow-color}",
         2: "0px 2px 3px 0px #{$shadow-color}",
         3: "0px 3px 4px 0px #{$shadow-color}",
@@ -963,10 +1128,9 @@
 }
 
 @function _get-ambient-map($color, $opacity) {
-    $shadow-color: if(type-of($color) ==color, rgba($color, $opacity * 0.033), $color);
+    $shadow-color: if(type-of($color)==color, rgba($color, $opacity * 0.033), $color);
 
-    @return (
-        0: "0px 0px 0px 0px #{$shadow-color}",
+    @return (0: "0px 0px 0px 0px #{$shadow-color}",
         1: "0px 2px 2px 0px #{$shadow-color}",
         2: "0px 1px 5px 0px #{$shadow-color}",
         3: "0px 1px 8px 0px #{$shadow-color}",
@@ -1001,10 +1165,8 @@
 // .foo {
 //   transition: elevation-transition-property-value(), opacity 100ms ease;
 // }
-@function elevation-transition-property-value(
-    $duration: $elevation-transition-duration,
-    $easing: $elevation-transition-timing-function
-) {
+@function elevation-transition-property-value($duration: $elevation-transition-duration,
+    $easing: $elevation-transition-timing-function) {
     @return box-shadow #{$duration} #{$easing};
 }
 
@@ -1013,9 +1175,11 @@ $base-font-size: 16px;
 
 // Function to convert pixels to rem.
 @function px-to-rem($value-in-px) {
-    @if $value-in-px != 0 {
+    @if $value-in-px !=0 {
         @return calc($value-in-px / $base-font-size) * 1rem;
-    } @else {
+    }
+
+    @else {
         @return $value-in-px;
     }
-}
+}