@inchurch/matcha-theme 20.0.3

package/abstracts/_functions.scss

@@ -0,0 +1,1213 @@
+@use "sass:map";
+@use "sass:color";
+
+// -------------------------------------------------------------------------------------------------------------------
+// @ Theme functions
+// --------------------------------------------------------------------------------------------------------------------
+// For a given hue in a palette, return the contrast color from the map of contrast palettes.
+// @param $color-map
+// @param $hue
+@function map-contrast($palette, $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
+// of the Material Design hues.
+// @param $color-map
+// @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)));
+
+    // 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)));
+    }
+
+    @return $result;
+}
+
+@function getBaseColorsPalettes() {
+    // base colors
+    $palettes: (
+        red: $red,
+        pink: $pink,
+        purple: $purple,
+        deep-purple: $deep-purple,
+        indigo: $indigo,
+        blue: $blue,
+        light-blue: $light-blue,
+        cyan: $cyan,
+        teal: $teal,
+        green: $green,
+        light-green: $light-green,
+        lime: $lime,
+        yellow: $yellow,
+        amber: $amber,
+        orange: $orange,
+        deep-orange: $deep-orange,
+        brown: $brown,
+        grey: $grey,
+        blue-grey: $blue-grey
+    );
+@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: (
+        red: $red,
+        pink: $pink,
+        purple: $purple,
+        deep-purple: $deep-purple,
+        indigo: $indigo,
+        blue: $blue,
+        light-blue: $light-blue,
+        cyan: $cyan,
+        teal: $teal,
+        green: $green,
+        light-green: $light-green,
+        lime: $lime,
+        yellow: $yellow,
+        amber: $amber,
+        orange: $orange,
+        deep-orange: $deep-orange,
+        brown: $brown,
+        grey: $grey,
+        blue-grey: $blue-grey,
+        light-grey: $light-grey,
+        dark-grey: $dark-grey,
+        primary: $primary,
+        accent: $accent,
+        danger: $danger,
+        warn: $warn,
+        success: $success,
+        info: $info
+    );
+@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-color: map.get($background, background-alpha);
+    @return $background-color;
+}
+
+@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-color: map.get($background, background-alpha-inverse);
+    @return $background-color;
+}
+
+// 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-color: map.get($background, card-alpha);
+    @return $surface-color;
+}
+
+@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-color: map.get($background, card-alpha-inverse);
+    @return $surface-color;
+}
+
+
+// Foreground
+@function getForeground($theme) {
+    $foreground: map.get($theme, foreground);
+    @return map.get($foreground, foreground);
+}
+
+@function getForegroundAlpha($theme) {
+    $foreground: map.get($theme, foreground);
+    @return map.get($foreground, foreground-alpha);
+}
+
+@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 {
+        @return $color-base-blue-grey-100; // Cor escura para tema dark
+    }
+}
+
+@function getForegroundAlphaInverse($theme) {
+    $is-dark: map.get($theme, is-dark);
+
+    @if $is-dark {
+        @return rgba($color-base-blue-grey-900, 0.1); // Cor clara para tema light
+    }
+
+    @else {
+        @return rgba($color-base-blue-grey-100, 0.1); // Cor escura para tema dark
+    }
+}
+
+
+// Disabled
+// #D4DDE3
+@function getDisabled($theme) {
+    $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);
+    @return $disabled-contrast;
+}
+
+// rgba(0, 0, 0, 0.26),
+@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) {
+    $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.1);
+    @return $red-color-alpha;
+}
+
+@function getRedContrastAlpha($theme) {
+    $red-contrast: getRedContrast($theme);
+    $red-contrast-alpha: rgba($red-contrast, 0.1);
+    @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.1);
+    @return $pink-color-alpha;
+}
+
+@function getPinkContrastAlpha($theme) {
+    $pink-contrast: getPinkContrast($theme);
+    $pink-contrast-alpha: rgba($pink-contrast, 0.1);
+    @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.1);
+    @return $purple-color-alpha;
+}
+
+@function getPurpleContrastAlpha($theme) {
+    $purple-contrast: getPurpleContrast($theme);
+    $purple-contrast-alpha: rgba($purple-contrast, 0.1);
+    @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.1);
+    @return $deep-purple-color-alpha;
+}
+
+@function getDeepPurpleContrastAlpha($theme) {
+    $deep-purple-contrast: getDeepPurpleContrast($theme);
+    $deep-purple-contrast-alpha: rgba($deep-purple-contrast, 0.1);
+    @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.1);
+    @return $indigo-color-alpha;
+}
+
+@function getIndigoContrastAlpha($theme) {
+    $indigo-contrast: getIndigoContrast($theme);
+    $indigo-contrast-alpha: rgba($indigo-contrast, 0.1);
+    @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.1);
+    @return $blue-color-alpha;
+}
+
+@function getBlueContrastAlpha($theme) {
+    $blue-contrast: getBlueContrast($theme);
+    $blue-contrast-alpha: rgba($blue-contrast, 0.1);
+    @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.1);
+    @return $light-blue-color-alpha;
+}
+
+@function getLightBlueContrastAlpha($theme) {
+    $light-blue-contrast: getLightBlueContrast($theme);
+    $light-blue-contrast-alpha: rgba($light-blue-contrast, 0.1);
+    @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.1);
+    @return $cyan-color-alpha;
+}
+
+@function getCyanContrastAlpha($theme) {
+    $cyan-contrast: getCyanContrast($theme);
+    $cyan-contrast-alpha: rgba($cyan-contrast, 0.1);
+    @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.1);
+    @return $teal-color-alpha;
+}
+
+@function getTealContrastAlpha($theme) {
+    $teal-contrast: getTealContrast($theme);
+    $teal-contrast-alpha: rgba($teal-contrast, 0.1);
+    @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.1);
+    @return $green-color-alpha;
+}
+
+@function getGreenContrastAlpha($theme) {
+    $green-contrast: getGreenContrast($theme);
+    $green-contrast-alpha: rgba($green-contrast, 0.1);
+    @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.1);
+    @return $light-green-color-alpha;
+}
+
+@function getLightGreenContrastAlpha($theme) {
+    $light-green-contrast: getLightGreenContrast($theme);
+    $light-green-contrast-alpha: rgba($light-green-contrast, 0.1);
+    @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.1);
+    @return $lime-color-alpha;
+}
+
+@function getLimeContrastAlpha($theme) {
+    $lime-contrast: getLimeContrast($theme);
+    $lime-contrast-alpha: rgba($lime-contrast, 0.1);
+    @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.1);
+    @return $yellow-color-alpha;
+}
+
+@function getYellowContrastAlpha($theme) {
+    $yellow-contrast: getYellowContrast($theme);
+    $yellow-contrast-alpha: rgba($yellow-contrast, 0.1);
+    @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.1);
+    @return $amber-color-alpha;
+}
+
+@function getAmberContrastAlpha($theme) {
+    $amber-contrast: getAmberContrast($theme);
+    $amber-contrast-alpha: rgba($amber-contrast, 0.1);
+    @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.1);
+    @return $orange-color-alpha;
+}
+
+@function getOrangeContrastAlpha($theme) {
+    $orange-contrast: getOrangeContrast($theme);
+    $orange-contrast-alpha: rgba($orange-contrast, 0.1);
+    @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.1);
+    @return $deep-orange-color-alpha;
+}
+
+@function getDeepOrangeContrastAlpha($theme) {
+    $deep-orange-contrast: getDeepOrangeContrast($theme);
+    $deep-orange-contrast-alpha: rgba($deep-orange-contrast, 0.1);
+    @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.1);
+    @return $brown-color-alpha;
+}
+
+@function getBrownContrastAlpha($theme) {
+    $brown-contrast: getBrownContrast($theme);
+    $brown-contrast-alpha: rgba($brown-contrast, 0.1);
+    @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.1);
+    @return $grey-color-alpha;
+}
+
+@function getGreyContrastAlpha($theme) {
+    $grey-contrast: getGreyContrast($theme);
+    $grey-contrast-alpha: rgba($grey-contrast, 0.1);
+    @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.1);
+    @return $blue-grey-color-alpha;
+}
+
+@function getBlueGreyContrastAlpha($theme) {
+    $blue-grey-contrast: getBlueGreyContrast($theme);
+    $blue-grey-contrast-alpha: rgba($blue-grey-contrast, 0.1);
+    @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.1);
+    @return $primary-color-alpha;
+}
+
+@function getPrimaryContrastAlpha($theme) {
+    $primary-contrast: getPrimaryContrast($theme);
+    $primary-contrast-alpha: rgba($primary-contrast, 0.1);
+    @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.1);
+    @return $accent-color-alpha;
+}
+
+@function getAccentContrastAlpha($theme) {
+    $accent-contrast: getAccentContrast($theme);
+    $accent-contrast-alpha: rgba($accent-contrast, 0.1);
+    @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.1);
+    @return $danger-color-alpha;
+}
+
+@function getDangerContrastAlpha($theme) {
+    $danger-contrast: getDangerContrast($theme);
+    $danger-contrast-alpha: rgba($danger-contrast, 0.1);
+    @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.1);
+    @return $warn-color-alpha;
+}
+
+@function getWarnContrastAlpha($theme) {
+    $warn-contrast: getWarnContrast($theme);
+    $warn-contrast-alpha: rgba($warn-contrast, 0.1);
+    @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.1);
+    @return $success-color-alpha;
+}
+
+@function getSuccessContrastAlpha($theme) {
+    $success-contrast: getSuccessContrast($theme);
+    $success-contrast-alpha: rgba($success-contrast, 0.1);
+    @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.1);
+    @return $info-color-alpha;
+}
+
+@function getInfoContrastAlpha($theme) {
+    $info-contrast: getInfoContrast($theme);
+    $info-contrast-alpha: rgba($info-contrast, 0.1);
+    @return $info-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".
+//
+// @param $color-map The theme palette (output of mat-palette).
+// @param $hue The hue from the palette to use. If this is a value between 0 and 1, it will
+//     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 {
+        @return map-color($palette, default, $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),
+        // we can't apply the opacity anyway so we return the value as is, otherwise Sass can
+        // throw an error or output something invalid.
+        @return $color;
+    }
+
+    @return rgba($color, if($opacity ==null, opacity($color), $opacity));
+}
+
+// Creates a container object for a light theme to be given to individual component theme mixins.
+@function light-theme($primary,
+    $accent,
+    $warn: palette($yellow, 600),
+    $danger: palette($red, A700),
+    $success: palette($green, 900),
+    $info: palette($blue, A700)) {
+    @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 );
+}
+
+// Creates a container object for a dark theme to be given to individual component theme mixins.
+@function dark-theme($primary, $accent, $warn: palette($yellow, 200),
+    $danger: palette($red, 200),
+    $success: palette($green, A200),
+    $info: palette($blue, 800)) {
+    @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 );
+}
+
+// Creates a container object for a custom light theme to be given to individual component theme mixins.
+@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 );
+}
+
+// Creates a container object for a custom dark theme to be given to individual component theme mixins.
+@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 );
+}
+
+// -------------------------------------------------------------------------------------------------------------------
+// @ Typography functions
+// --------------------------------------------------------------------------------------------------------------------
+// Represents a typography level from the Material design spec.
+@function matcha-typography-level($font-size,
+    $line-height: $font-size,
+    $font-weight: 400,
+    $font-family: null,
+    $letter-spacing: null) {
+    @return (font-size: $font-size,
+        line-height: $line-height,
+        font-weight: $font-weight,
+        font-family: $font-family,
+        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: $font-family-base,
+    // ── Display ──
+    $display-xl: matcha-typography-level(40px, 48px, 800, $letter-spacing: -0.5px),
+    $display: matcha-typography-level(32px, 40px, 700, $letter-spacing: -0.5px),
+    // ── Headline ──
+    $headline: matcha-typography-level(24px, 32px, 700, $letter-spacing: -0.3px),
+    // ── Title ──
+    $title-xl: matcha-typography-level(20px, 28px, 800),
+    $title-lg: matcha-typography-level(20px, 28px, 600),
+    $title-md: matcha-typography-level(18px, 24px, 600),
+    $title-sm: matcha-typography-level(16px, 22px, 600),
+    $title-xs: matcha-typography-level(14px, 20px, 800),
+    // ── Label ──
+    $label-lg: matcha-typography-level(16px, 22px, 500),
+    $label-md: matcha-typography-level(14px, 20px, 500),
+    $label-sm: matcha-typography-level(12px, 16px, 500),
+    // ── Body ──
+    $body-lg: matcha-typography-level(16px, 24px, 400),
+    $body-md: matcha-typography-level(14px, 20px, 400),
+    $body-sm: matcha-typography-level(12px, 16px, 400),
+    // ── Button ──
+    $button-lg: matcha-typography-level(16px, 22px, 600, $letter-spacing: 0.2px),
+    $button-md: matcha-typography-level(14px, 20px, 500, $letter-spacing: 0.2px),
+    $button-sm: matcha-typography-level(13px, 19px, 500, $letter-spacing: 0.2px),
+    // ── Other ──
+    $caption: matcha-typography-level(11px, 14px, 400, $letter-spacing: 0.3px),
+    $overline: matcha-typography-level(10px, 14px, 600, $letter-spacing: 1px),
+    $input: matcha-typography-level(inherit, 1.125, 400),
+    // ── Legacy aliases (kept for retrocompatibility) ──
+    $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),
+    $display-1: matcha-typography-level(34px, 40px, 400),
+    $title: matcha-typography-level(20px, 28px, 600),
+    $subheading-2: matcha-typography-level(16px, 22px, 600),
+    $subheading-1: matcha-typography-level(15px, 24px, 600),
+    $body-2: matcha-typography-level(14px, 20px, 500),
+    $body-1: matcha-typography-level(14px, 20px, 400),
+    $button: matcha-typography-level(14px, 20px, 500, $letter-spacing: 0.2px)) {
+    $config: (
+        // New Figma-aligned styles
+        display-xl: $display-xl,
+        display: $display,
+        headline: $headline,
+        title-xl: $title-xl,
+        title-lg: $title-lg,
+        title-md: $title-md,
+        title-sm: $title-sm,
+        title-xs: $title-xs,
+        label-lg: $label-lg,
+        label-md: $label-md,
+        label-sm: $label-sm,
+        body-lg: $body-lg,
+        body-md: $body-md,
+        body-sm: $body-sm,
+        button-lg: $button-lg,
+        button-md: $button-md,
+        button-sm: $button-sm,
+        caption: $caption,
+        overline: $overline,
+        input: $input,
+        // Legacy aliases
+        display-4: $display-4,
+        display-3: $display-3,
+        display-2: $display-2,
+        display-1: $display-1,
+        title: $title,
+        subheading-2: $subheading-2,
+        subheading-1: $subheading-1,
+        body-2: $body-2,
+        body-1: $body-1,
+        button: $button
+    );
+
+// 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 ));
+}
+
+// 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);
+}
+
+// Gets the font size for a level inside a typography config.
+@function matcha-font-size($config, $level) {
+    @return _matcha-get-type-value($config, $level, font-size);
+}
+
+// Gets the line height for a level inside a typography config.
+@function matcha-line-height($config, $level) {
+    @return _matcha-get-type-value($config, $level, line-height);
+}
+
+// Gets the font weight for a level inside a typography config.
+@function matcha-font-weight($config, $level) {
+    @return _matcha-get-type-value($config, $level, font-weight);
+}
+
+// Gets the letter spacing for a level inside a typography config.
+@function matcha-letter-spacing($config, $level) {
+    @return _matcha-get-type-value($config, $level, letter-spacing);
+}
+
+// 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);
+
+    @if $level !=null {
+        $font-family: _matcha-get-type-value($config, $level, font-family);
+    }
+
+    // Guard against unquoting non-string values, because it's deprecated.
+    @return if(type-of($font-family)==string, unquote($font-family), $font-family);
+}
+
+// -------------------------------------------------------------------------------------------------------------------
+// @ Elevation functions
+// --------------------------------------------------------------------------------------------------------------------
+// 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);
+
+    @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}",
+        4: "0px 2px 4px -1px #{$shadow-color}",
+        5: "0px 3px 5px -1px #{$shadow-color}",
+        6: "0px 3px 5px -1px #{$shadow-color}",
+        7: "0px 4px 5px -2px #{$shadow-color}",
+        8: "0px 5px 5px -3px #{$shadow-color}",
+        9: "0px 5px 6px -3px #{$shadow-color}",
+        10: "0px 6px 6px -3px #{$shadow-color}",
+        11: "0px 6px 7px -4px #{$shadow-color}",
+        12: "0px 7px 8px -4px #{$shadow-color}",
+        13: "0px 7px 8px -4px #{$shadow-color}",
+        14: "0px 7px 9px -4px #{$shadow-color}",
+        15: "0px 8px 9px -5px #{$shadow-color}",
+        16: "0px 8px 10px -5px #{$shadow-color}",
+        17: "0px 8px 11px -5px #{$shadow-color}",
+        18: "0px 9px 11px -5px #{$shadow-color}",
+        19: "0px 9px 12px -6px #{$shadow-color}",
+        20: "0px 10px 13px -6px #{$shadow-color}",
+        21: "0px 10px 13px -6px #{$shadow-color}",
+        22: "0px 10px 14px -6px #{$shadow-color}",
+        23: "0px 11px 14px -7px #{$shadow-color}",
+        24: "0px 11px 15px -7px #{$shadow-color}"
+    );
+}
+
+@function _get-penumbra-map($color, $opacity) {
+    $shadow-color: if(type-of($color)==color, rgba($color, $opacity * 0.033), $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}",
+        4: "0px 4px 5px 0px #{$shadow-color}",
+        5: "0px 5px 8px 0px #{$shadow-color}",
+        6: "0px 6px 10px 0px #{$shadow-color}",
+        7: "0px 7px 10px 1px #{$shadow-color}",
+        8: "0px 8px 10px 1px #{$shadow-color}",
+        9: "0px 9px 12px 1px #{$shadow-color}",
+        10: "0px 10px 14px 1px #{$shadow-color}",
+        11: "0px 11px 15px 1px #{$shadow-color}",
+        12: "0px 12px 17px 2px #{$shadow-color}",
+        13: "0px 13px 19px 2px #{$shadow-color}",
+        14: "0px 14px 21px 2px #{$shadow-color}",
+        15: "0px 15px 22px 2px #{$shadow-color}",
+        16: "0px 16px 24px 2px #{$shadow-color}",
+        17: "0px 17px 26px 2px #{$shadow-color}",
+        18: "0px 18px 28px 2px #{$shadow-color}",
+        19: "0px 19px 29px 2px #{$shadow-color}",
+        20: "0px 20px 31px 3px #{$shadow-color}",
+        21: "0px 21px 33px 3px #{$shadow-color}",
+        22: "0px 22px 35px 3px #{$shadow-color}",
+        23: "0px 23px 36px 3px #{$shadow-color}",
+        24: "0px 24px 38px 3px #{$shadow-color}"
+    );
+}
+
+@function _get-ambient-map($color, $opacity) {
+    $shadow-color: if(type-of($color)==color, rgba($color, $opacity * 0.033), $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}",
+        4: "0px 1px 10px 0px #{$shadow-color}",
+        5: "0px 1px 14px 0px #{$shadow-color}",
+        6: "0px 1px 18px 0px #{$shadow-color}",
+        7: "0px 2px 16px 1px #{$shadow-color}",
+        8: "0px 3px 14px 2px #{$shadow-color}",
+        9: "0px 3px 16px 2px #{$shadow-color}",
+        10: "0px 4px 18px 3px #{$shadow-color}",
+        11: "0px 4px 20px 3px #{$shadow-color}",
+        12: "0px 5px 22px 4px #{$shadow-color}",
+        13: "0px 5px 24px 4px #{$shadow-color}",
+        14: "0px 5px 26px 4px #{$shadow-color}",
+        15: "0px 6px 28px 5px #{$shadow-color}",
+        16: "0px 6px 30px 5px #{$shadow-color}",
+        17: "0px 6px 32px 5px #{$shadow-color}",
+        18: "0px 7px 34px 6px #{$shadow-color}",
+        19: "0px 7px 36px 6px #{$shadow-color}",
+        20: "0px 8px 38px 7px #{$shadow-color}",
+        21: "0px 8px 40px 7px #{$shadow-color}",
+        22: "0px 8px 42px 7px #{$shadow-color}",
+        23: "0px 9px 44px 8px #{$shadow-color}",
+        24: "0px 9px 46px 8px #{$shadow-color}"
+    );
+}
+
+// Returns a string that can be used as the value for a transition property for elevation.
+// Calling this function directly is useful in situations where a component needs to transition
+// more than one property.
+//
+// .foo {
+//   transition: elevation-transition-property-value(), opacity 100ms ease;
+// }
+@function elevation-transition-property-value($duration: $elevation-transition-duration,
+    $easing: $elevation-transition-timing-function) {
+    @return box-shadow #{$duration} #{$easing};
+}
+
+// Define the variable for the base size (usually 16 pixels = 1 rem).
+$base-font-size: 16px;
+
+// Function to convert pixels to rem.
+@function px-to-rem($value-in-px) {
+    @if $value-in-px !=0 {
+        @return calc($value-in-px / $base-font-size) * 1rem;
+    }
+
+    @else {
+        @return $value-in-px;
+    }
+}