matcha-theme 19.56.0 → 19.57.0

package/abstracts/_functions.scss

@@ -1,3 +1,6 @@
+@use "sass:map";
+@use "sass:color";
+
 // -------------------------------------------------------------------------------------------------------------------
 // @ Theme functions
 // --------------------------------------------------------------------------------------------------------------------
@@ -5,7 +8,7 @@
 // @param $color-map
 // @param $hue
 @function map-contrast($palette, $hue) {
-    @return map-get(map-get($palette, contrast), $hue);
+    @return map.get(map.get($palette, contrast), $hue);
 }
 
 // Creates a map of hues to colors for a theme. This is used to define a theme palette in terms
@@ -14,12 +17,12 @@
 // @param $primary
 // @param $lighter
 @function palette($base-palette, $default: 500, $lighter: 100, $darker: 700) {
-    $result: map_merge(
+    $result: map.merge(
         $base-palette,
         (
-            default: map-get($base-palette, $default),
-            lighter: map-get($base-palette, $lighter),
-            darker: map-get($base-palette, $darker),
+            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)
@@ -28,7 +31,7 @@
 
     // For each hue in the palette, add a "-contrast" color to the map.
     @each $hue, $color in $base-palette {
-        $result: map_merge(
+        $result: map.merge(
             $result,
             (
                 "#{$hue}-contrast": map-contrast($base-palette, $hue)
@@ -66,9 +69,9 @@
 }
 
 @function getAllPalettes($theme) {
-    $primary: map-get($theme, primary);
-    $accent: map-get($theme, accent);
-    $warn: map-get($theme, warn);
+    $primary: map.get($theme, primary);
+    $accent: map.get($theme, accent);
+    $warn: map.get($theme, warn);
 
     // base colors
     $palettes: (
@@ -99,106 +102,109 @@
 }
 
 @function getShade($theme) {
-    $is-dark: map-get($theme, is-dark);
+    $is-dark: map.get($theme, is-dark);
     $get-shade: if($is-dark, 100, 500); // Define $red-shade com base no valor de $is-dark
     @return $get-shade;
 }
 
 // Background
 @function getBackground($theme){
-    $background: map-get($theme, background);
-    $background: map-get($background, background);
+    $background: map.get($theme, background);
+    $background: map.get($background, background);
     @return $background;
 }
 @function getBackgroundAlpha($theme){
-    $background: map-get($theme, background);
-    $background-alpha: rgba(map-get($background, background), 0.5);
-    @return $background-alpha;
+    $background: map.get($theme, background);
+    $background-color: map.get($background, background);
+    @return color.change($background-color, $alpha: 0.5);
 }
 @function getBackgroundInverse($theme){
-    $background: map-get($theme, background);
-    $background-inverse: map-get($background, background-inverse);
+    $background: map.get($theme, background);
+    $background-inverse: map.get($background, background-inverse);
     @return $background-inverse;
 }
 @function getBackgroundAlphaInverse($theme){
-    $background: map-get($theme, background);
-    $background-alpha-inverse:  map-get($background, background-alpha-inverse);
-    @return $background-alpha-inverse;
+    $background: map.get($theme, background);
+    $background-color: map.get($background, background-inverse);
+    @return color.change($background-color, $alpha: 0.5);
 }
 
 // Surface
 @function getSurface($theme){
-    $background: map-get($theme, background);
-    $surface: map-get($background, card);
+    $background: map.get($theme, background);
+    $surface: map.get($background, card);
     @return $surface;
 }
 @function getSurfaceAlpha($theme){
-    $background: map-get($theme, background);
-    $surface-alpha: rgba(map-get($background, card), 0.5);
-    @return $surface-alpha;
+    $background: map.get($theme, background);
+    $surface-color: map.get($background, card);
+    @return color.change($surface-color, $alpha: 0.5);
 }
 @function getSurfaceInverse($theme){
-    $background: map-get($theme, background);
-    $surface-inverse: map-get($background, card-inverse);
+    $background: map.get($theme, background);
+    $surface-inverse: map.get($background, card-inverse);
     @return $surface-inverse;
 }
 @function getSurfaceAlphaInverse($theme){
-    $background: map-get($theme, background);
-    $surface-alpha-inverse: map-get($background, card-alpha-inverse);
-    @return $surface-alpha-inverse;
+    $background: map.get($theme, background);
+    $surface-color: map.get($background, card-inverse);
+    @return color.change($surface-color, $alpha: 0.5);
 }
 
 
 // Foreground
 @function getForeground($theme){
-    $foreground: map-get($theme, foreground);
-    $foreground: map-get($foreground, text);
+    $foreground: map.get($theme, foreground);
+    $foreground: map.get($foreground, text);
     @return $foreground;
 }
 @function getForegroundInverse($theme){
-    $foreground: map-get($theme, foreground);
-    $foreground-inverse: map-get($foreground, text-inverse);
+    $foreground: map.get($theme, foreground);
+    $foreground-inverse: map.get($foreground, text-inverse);
     @return $foreground-inverse;
 }
 @function getForegroundAlpha($theme){
-    $foreground: map-get($theme, foreground);
-    $foreground-alpha: rgba(map-get($foreground, text), 0.5);
-    @return $foreground-alpha;
+    $foreground: map.get($theme, foreground);
+    $foreground-color: map.get($foreground, text);
+    @return color.change($foreground-color, $alpha: 0.5);
 }
 @function getForegroundAlphaInverse($theme){
-    $foreground: map-get($theme, foreground);
-    $foreground-alpha-inverse: rgba(map-get($foreground, text-inverse), 0.5);
-    @return $foreground-alpha-inverse;
+    $foreground: map.get($theme, foreground);
+    $foreground-color: map.get($foreground, text-inverse);
+    @return color.change($foreground-color, $alpha: 0.5);
 }
 
+
+
+
 // Disabled
 // #D4DDE3
 @function getDisabled($theme){
-    $background: map-get($theme, background);
-    $disabled: map-get($background, disabled);
+    $background: map.get($theme, background);
+    $disabled: map.get($background, disabled);
     @return $disabled;
 }
 @function getDisabledBgContrast($theme){
-    $foreground: map-get($theme, foreground);
-    $disabled-contrast: map-get($foreground, disabled-contrast);
+    $foreground: map.get($theme, foreground);
+    $disabled-contrast: map.get($foreground, disabled-contrast);
     @return $disabled-contrast;
 }
 // rgba(0, 0, 0, 0.26),
 @function getDisabledContrast($theme){
-    $foreground: map-get($theme, foreground);
-    $disabled-contrast: map-get($foreground, disabled);
+    $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-alpha: rgba(map-get($background, disabled), 0.5);
-    @return $disabled-alpha;
+@function getDisabledAlpha($theme) {
+    $background: map.get($theme, background);
+    $disabled-color: map.get($background, disabled);
+    @return color.change($disabled-color, $alpha: 0.5);
 }
 // rgba(0, 0, 0, 0.13)
 @function getDisabledContrastAlpha($theme){
-    $foreground: map-get($theme, foreground);
-    $disabled-contrast-alpha: rgba(map-get($foreground, disabled), 0.5);
+    $foreground: map.get($theme, foreground);
+    $disabled-contrast-alpha: rgba(map.get($foreground, disabled), 0.5);
     @return $disabled-contrast-alpha;
 }
 
@@ -207,12 +213,12 @@
 // --------------------------------------------------------------------------------------------------------------------
 // Red
 @function getRed($theme) {
-    $red-color: map-get($red, getShade($theme));
+    $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));
+    $red-contrast-palette: map.get($red, 'contrast');
+    $red-contrast: map.get($red-contrast-palette, getShade($theme));
     @return $red-contrast;
 }
 @function getRedAlpha($theme) {
@@ -228,12 +234,12 @@
 
 // Pink
 @function getPink($theme) {
-    $pink-color: map-get($pink, getShade($theme));
+    $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));
+    $pink-contrast-palette: map.get($pink, 'contrast');
+    $pink-contrast: map.get($pink-contrast-palette, getShade($theme));
     @return $pink-contrast;
 }
 @function getPinkAlpha($theme) {
@@ -249,12 +255,12 @@
 
 // Purple
 @function getPurple($theme) {
-    $purple-color: map-get($purple, getShade($theme));
+    $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));
+    $purple-contrast-palette: map.get($purple, 'contrast');
+    $purple-contrast: map.get($purple-contrast-palette, getShade($theme));
     @return $purple-contrast;
 }
 @function getPurpleAlpha($theme) {
@@ -270,12 +276,12 @@
 
 // Deep Purple
 @function getDeepPurple($theme) {
-    $deep-purple-color: map-get($deep-purple, getShade($theme));
+    $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));
+    $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) {
@@ -291,12 +297,12 @@
 
 // Indigo
 @function getIndigo($theme) {
-    $indigo-color: map-get($indigo, getShade($theme));
+    $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));
+    $indigo-contrast-palette: map.get($indigo, 'contrast');
+    $indigo-contrast: map.get($indigo-contrast-palette, getShade($theme));
     @return $indigo-contrast;
 }
 @function getIndigoAlpha($theme) {
@@ -312,12 +318,12 @@
 
 // Blue
 @function getBlue($theme) {
-    $blue-color: map-get($blue, getShade($theme));
+    $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));
+    $blue-contrast-palette: map.get($blue, 'contrast');
+    $blue-contrast: map.get($blue-contrast-palette, getShade($theme));
     @return $blue-contrast;
 }
 @function getBlueAlpha($theme) {
@@ -333,12 +339,12 @@
 
 // Light Blue
 @function getLightBlue($theme) {
-    $light-blue-color: map-get($light-blue, getShade($theme));
+    $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));
+    $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) {
@@ -354,12 +360,12 @@
 
 // Cyan
 @function getCyan($theme) {
-    $cyan-color: map-get($cyan, getShade($theme));
+    $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));
+    $cyan-contrast-palette: map.get($cyan, 'contrast');
+    $cyan-contrast: map.get($cyan-contrast-palette, getShade($theme));
     @return $cyan-contrast;
 }
 @function getCyanAlpha($theme) {
@@ -375,12 +381,12 @@
 
 // Teal
 @function getTeal($theme) {
-    $teal-color: map-get($teal, getShade($theme));
+    $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));
+    $teal-contrast-palette: map.get($teal, 'contrast');
+    $teal-contrast: map.get($teal-contrast-palette, getShade($theme));
     @return $teal-contrast;
 }
 @function getTealAlpha($theme) {
@@ -396,12 +402,12 @@
 
 // Green
 @function getGreen($theme) {
-    $green-color: map-get($green, getShade($theme));
+    $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));
+    $green-contrast-palette: map.get($green, 'contrast');
+    $green-contrast: map.get($green-contrast-palette, getShade($theme));
     @return $green-contrast;
 }
 @function getGreenAlpha($theme) {
@@ -417,12 +423,12 @@
 
 // Light Green
 @function getLightGreen($theme) {
-    $light-green-color: map-get($light-green, getShade($theme));
+    $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));
+    $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) {
@@ -438,12 +444,12 @@
 
 // Lime
 @function getLime($theme) {
-    $lime-color: map-get($lime, getShade($theme));
+    $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));
+    $lime-contrast-palette: map.get($lime, 'contrast');
+    $lime-contrast: map.get($lime-contrast-palette, getShade($theme));
     @return $lime-contrast;
 }
 @function getLimeAlpha($theme) {
@@ -459,12 +465,12 @@
 
 // Yellow
 @function getYellow($theme) {
-    $yellow-color: map-get($yellow, getShade($theme));
+    $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));
+    $yellow-contrast-palette: map.get($yellow, 'contrast');
+    $yellow-contrast: map.get($yellow-contrast-palette, getShade($theme));
     @return $yellow-contrast;
 }
 @function getYellowAlpha($theme) {
@@ -480,12 +486,12 @@
 
 // Amber
 @function getAmber($theme) {
-    $amber-color: map-get($amber, getShade($theme));
+    $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));
+    $amber-contrast-palette: map.get($amber, 'contrast');
+    $amber-contrast: map.get($amber-contrast-palette, getShade($theme));
     @return $amber-contrast;
 }
 @function getAmberAlpha($theme) {
@@ -501,12 +507,12 @@
 
 // Orange
 @function getOrange($theme) {
-    $orange-color: map-get($orange, getShade($theme));
+    $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));
+    $orange-contrast-palette: map.get($orange, 'contrast');
+    $orange-contrast: map.get($orange-contrast-palette, getShade($theme));
     @return $orange-contrast;
 }
 @function getOrangeAlpha($theme) {
@@ -522,12 +528,12 @@
 
 // Deep Orange
 @function getDeepOrange($theme) {
-    $deep-orange-color: map-get($deep-orange, getShade($theme));
+    $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));
+    $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) {
@@ -543,12 +549,12 @@
 
 // Brown
 @function getBrown($theme) {
-    $brown-color: map-get($brown, getShade($theme));
+    $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));
+    $brown-contrast-palette: map.get($brown, 'contrast');
+    $brown-contrast: map.get($brown-contrast-palette, getShade($theme));
     @return $brown-contrast;
 }
 @function getBrownAlpha($theme) {
@@ -564,12 +570,12 @@
 
 // Grey
 @function getGrey($theme) {
-    $grey-color: map-get($grey, getShade($theme));
+    $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));
+    $grey-contrast-palette: map.get($grey, 'contrast');
+    $grey-contrast: map.get($grey-contrast-palette, getShade($theme));
     @return $grey-contrast;
 }
 @function getGreyAlpha($theme) {
@@ -585,12 +591,12 @@
 
 // Blue Grey
 @function getBlueGrey($theme) {
-    $blue-grey-color: map-get($blue-grey, getShade($theme));
+    $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));
+    $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) {
@@ -606,13 +612,13 @@
 
 // Primary
 @function getPrimary($theme) {
-    $primary: map-get($theme, primary);
-    $primary-color: map-get($primary, default);
+    $primary: map.get($theme, primary);
+    $primary-color: map.get($primary, default);
     @return $primary-color;
 }
 @function getPrimaryContrast($theme) {
-    $primary: map-get($theme, primary);
-    $primary-contrast: map-get($primary, default-contrast);
+    $primary: map.get($theme, primary);
+    $primary-contrast: map.get($primary, default-contrast);
     @return $primary-contrast;
 }
 @function getPrimaryAlpha($theme) {
@@ -628,13 +634,13 @@
 
 // Accent
 @function getAccent($theme) {
-    $accent: map-get($theme, accent);
-    $accent-color: map-get($accent, default);
+    $accent: map.get($theme, accent);
+    $accent-color: map.get($accent, default);
     @return $accent-color;
 }
 @function getAccentContrast($theme) {
-    $accent: map-get($theme, accent);
-    $accent-contrast: map-get($accent, default-contrast);
+    $accent: map.get($theme, accent);
+    $accent-contrast: map.get($accent, default-contrast);
     @return $accent-contrast;
 }
 @function getAccentAlpha($theme) {
@@ -650,13 +656,13 @@
 
 // Warn
 @function getWarn($theme) {
-    $warn: map-get($theme, warn);
-    $warn-color: map-get($warn, default);
+    $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);
+    $warn: map.get($theme, warn);
+    $warn-contrast: map.get($warn, default-contrast);
     @return $warn-contrast;
 }
 @function getWarnAlpha($theme) {
@@ -689,7 +695,7 @@
         @return map-color($palette, default, $hue);
     }
 
-    $color: map-get($palette, $hue);
+    $color: map.get($palette, $hue);
 
     @if (type-of($color) !=color) {
         // If the $color resolved to something different from a color (e.g. a CSS variable),
@@ -810,14 +816,14 @@
     // 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(
+        @if map.get($level, font-family) == null {
+            $new-level: map.merge(
                 $level,
                 (
                     font-family: $font-family
                 )
             );
-            $config: map-merge(
+            $config: map.merge(
                 $config,
                 (
                     $key: $new-level
@@ -827,7 +833,7 @@
     }
 
     // Add the base font family to the config.
-    @return map-merge(
+    @return map.merge(
         $config,
         (
             font-family: $font-family
@@ -837,7 +843,7 @@
 
 // Utility for fetching a nested value from a typography config.
 @function _matcha-get-type-value($config, $level, $name) {
-    @return map-get(map-get($config, $level), $name);
+    @return map.get(map.get($config, $level), $name);
 }
 
 // Gets the font size for a level inside a typography config.
@@ -862,7 +868,7 @@
 
 // Gets the font-family from a typography config and removes the quotes around it.
 @function matcha-font-family($config, $level: null) {
-    $font-family: map-get($config, font-family);
+    $font-family: map.get($config, font-family);
 
     @if $level !=null {
         $font-family: _matcha-get-type-value($config, $level, font-family);
@@ -997,4 +1003,4 @@ $base-font-size: 16px;
     } @else {
         @return $value-in-px;
     }
-}
+}