matcha-theme 19.30.0 → 19.33.0

package/abstracts/_functions.scss

@@ -98,6 +98,573 @@
     @return $palettes;
 }
 
+@function getShade($theme) {
+    $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);
+    @return $background;
+}
+@function getBackgroundAlpha($theme){
+    $background: map-get($theme, background);
+    $background-alpha: rgba(map-get($background, background), 0.5);
+    @return $background-alpha;
+}
+@function getBackgroundInverse($theme){
+    $background: map-get($theme, background);
+    $background-inverse: map-get($background, background-inverse);
+    @return $background-inverse;
+}
+@function getBackgroundAlphaInverse($theme){
+    $background: map-get($theme, background);
+    $background-inverse-alpha: rgba(map-get($background, background-inverse), 0.5);
+    @return $background-inverse-alpha;
+}
+
+// Surface
+@function getSurface($theme){
+    $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;
+}
+@function getSurfaceInverse($theme){
+    $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: rgba(map-get($background, card-inverse), 0.5);
+    @return $surface-alpha-inverse;
+}
+
+
+// Foreground
+@function getForeground($theme){
+    $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);
+    @return $foreground-inverse;
+}
+@function getForegroundAlpha($theme){
+    $foreground: map-get($theme, foreground);
+    $foreground-alpha: rgba(map-get($foreground, text), 0.5);
+    @return $foreground-alpha;
+}
+@function getForegroundAlphaInverse($theme){
+    $foreground: map-get($theme, foreground);
+    $foreground-alpha-inverse: rgba(map-get($foreground, text-inverse), 0.5);
+    @return $foreground-alpha-inverse;
+}
+
+// Disabled
+@function getDisabled($theme){
+    $background: map-get($theme, background);
+    $disabled: map-get($background, disabled);
+    @return $disabled;
+}
+@function getDisabledContrast($theme){
+    $foreground: map-get($theme, foreground);
+    $disabled-contrast: map-get($foreground, disabled);
+    @return $disabled-contrast;
+}
+@function getDisabledAlpha($theme){
+    $background: map-get($theme, background);
+    $disabled-alpha: rgba(map-get($background, disabled), 0.5);
+    @return $disabled-alpha;
+}
+@function getDisabledContrastAlpha($theme){
+    $foreground: map-get($theme, foreground);
+    $disabled-contrast-alpha: rgba(map-get($foreground, disabled), 0.5);
+    @return $disabled-contrast-alpha;
+}
+
+// --------------------------------------------------------------------------------------------------------------------
+// Colors
+// --------------------------------------------------------------------------------------------------------------------
+// Red
+@function getRed($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));
+    @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);
+    @return $red-contrast-alpha;
+}
+
+// Pink
+@function getPink($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));
+    @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);
+    @return $pink-contrast-alpha;
+}
+
+// Purple
+@function getPurple($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));
+    @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);
+    @return $purple-contrast-alpha;
+}
+
+// Deep Purple
+@function getDeepPurple($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));
+    @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);
+    @return $deep-purple-contrast-alpha;
+}
+
+// Indigo
+@function getIndigo($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));
+    @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);
+    @return $indigo-contrast-alpha;
+}
+
+// Blue
+@function getBlue($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));
+    @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);
+    @return $blue-contrast-alpha;
+}
+
+// Light Blue
+@function getLightBlue($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));
+    @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);
+    @return $light-blue-contrast-alpha;
+}
+
+// Cyan
+@function getCyan($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));
+    @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);
+    @return $cyan-contrast-alpha;
+}
+
+// Teal
+@function getTeal($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));
+    @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);
+    @return $teal-contrast-alpha;
+}
+
+// Green
+@function getGreen($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));
+    @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);
+    @return $green-contrast-alpha;
+}
+
+// Light Green
+@function getLightGreen($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));
+    @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);
+    @return $light-green-contrast-alpha;
+}
+
+// Lime
+@function getLime($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));
+    @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);
+    @return $lime-contrast-alpha;
+}
+
+// Yellow
+@function getYellow($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));
+    @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);
+    @return $yellow-contrast-alpha;
+}
+
+// Amber
+@function getAmber($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));
+    @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);
+    @return $amber-contrast-alpha;
+}
+
+// Orange
+@function getOrange($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));
+    @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);
+    @return $orange-contrast-alpha;
+}
+
+// Deep Orange
+@function getDeepOrange($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));
+    @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);
+    @return $deep-orange-contrast-alpha;
+}
+
+// Brown
+@function getBrown($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));
+    @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);
+    @return $brown-contrast-alpha;
+}
+
+// Grey
+@function getGrey($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));
+    @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);
+    @return $grey-contrast-alpha;
+}
+
+// Blue Grey
+@function getBlueGrey($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));
+    @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);
+    @return $blue-grey-contrast-alpha;
+}
+
+// Primary
+@function getPrimary($theme) {
+    $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);
+    @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);
+    @return $primary-contrast-alpha;
+}
+
+// Accent
+@function getAccent($theme) {
+    $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);
+    @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;
+}
+
+// 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;
+}
+
+
+
+
+
 // Gets a color from a theme palette (the output of mat-palette).
 // The hue can be one of the standard values (500, A400, etc.), one of the three preconfigured
 // hues (default, lighter, darker), or any of the aforementioned prefixed with "-contrast".

package/abstracts/_typography.scss

@@ -126,5 +126,7 @@
         input[type="search"],
         textarea {
             font-family: matcha-font-family($config, body-1);
+            font-weight: matcha-font-weight($config, body-1);
+            font-size: px-to-rem(16px);
         }
 }