@inchurch/matcha-theme 21.3.3 → 22.0.0

package/abstracts/_functions.scss

@@ -1,321 +1,321 @@
-@use "sass:map";
-@use "sass:math";
-@use "sass:color";
-@use "sass:meta";
-@use "sass:string";
-
-// -------------------------------------------------------------------------------------------------------------------
-// @ Theme functions — REMOVIDAS no major (API velha)
-// --------------------------------------------------------------------------------------------------------------------
-// palette() / map-color() / map-contrast() / light-theme() / dark-theme() /
-// light-custom-theme() / dark-custom-theme() foram removidas. Construíam o mapa $theme
-// (cores compile-time a partir das paletas Material) consumido por matcha-components().
-// A API nova é color-runtime: o tema é só o conjunto de --matcha-color-* (synced do Figma),
-// emitido por matcha-css-custom-properties($is-dark). Whitelabel = matcha-define-theme()
-// (override de --matcha-color-*). Ver src/app/app.theme.scss + main.scss (nota do shim).
-// Os mapas crus de paleta ($red/$blue/... em tokens/_material-palette) FICAM — alimentam
-// os tokens runtime --matcha-color-{nome} (ver tokens/_emit-tokens).
-
-// -------------------------------------------------------------------------------------------------------------------
-// @ 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(meta.type-of($font-family)==string, 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(meta.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(meta.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(meta.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;
-    }
-}
-
-// ── Color helpers (movidos de _theme-api p/ quebrar ciclo @use) ──────────────
-@function matcha-yiq($color) {
-  $r: color.channel($color, "red", $space: rgb);
-  $g: color.channel($color, "green", $space: rgb);
-  $b: color.channel($color, "blue", $space: rgb);
-  @return math.div(($r * 299) + ($g * 587) + ($b * 114), 1000);
-}
-
-@function matcha-text-on($color) {
-  @return if(matcha-yiq($color) >= 150, #1a1d21, #ffffff);
-}
-
-@function matcha-contrast-on($color) {
-  @return if(matcha-yiq($color) >= 150, rgba(0, 0, 0, .87), #ffffff);
-}
-
-@function matcha-contrast-alpha-on($color) {
-  @return if(matcha-yiq($color) >= 150, rgba(0, 0, 0, .1), rgba(255, 255, 255, .1));
-}
-
-@function matcha-role-tokens($role, $seed, $surface-bg, $is-dark) {
-  @return (
-    #{$role}: $seed,
-    #{$role}-hover: color.scale($seed, $lightness: if($is-dark, 18%, -12%)),
-    #{$role}-pressed: color.scale($seed, $lightness: if($is-dark, 32%, -20%)),
-    #{$role}-alpha: rgba($seed, .1),
-    #{$role}-contrast: matcha-contrast-on($seed),
-    #{$role}-contrast-alpha: matcha-contrast-alpha-on($seed),
-    #{$role}-surface-hover: color.mix($seed, $surface-bg, 10%),
-    #{$role}-surface-pressed: color.mix($seed, $surface-bg, 22%),
-  );
-}
+@use "sass:map";
+@use "sass:math";
+@use "sass:color";
+@use "sass:meta";
+@use "sass:string";
+
+// -------------------------------------------------------------------------------------------------------------------
+// @ Theme functions — REMOVIDAS no major (API velha)
+// --------------------------------------------------------------------------------------------------------------------
+// palette() / map-color() / map-contrast() / light-theme() / dark-theme() /
+// light-custom-theme() / dark-custom-theme() foram removidas. Construíam o mapa $theme
+// (cores compile-time a partir das paletas Material) consumido por matcha-components().
+// A API nova é color-runtime: o tema é só o conjunto de --matcha-color-* (synced do Figma),
+// emitido por matcha-css-custom-properties($is-dark). Whitelabel = matcha-define-theme()
+// (override de --matcha-color-*). Ver src/app/app.theme.scss + main.scss (nota do shim).
+// Os mapas crus de paleta ($red/$blue/... em tokens/_material-palette) FICAM — alimentam
+// os tokens runtime --matcha-color-{nome} (ver tokens/_emit-tokens).
+
+// -------------------------------------------------------------------------------------------------------------------
+// @ 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(meta.type-of($font-family)==string, 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(meta.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(meta.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(meta.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;
+    }
+}
+
+// ── Color helpers (movidos de _theme-api p/ quebrar ciclo @use) ──────────────
+@function matcha-yiq($color) {
+  $r: color.channel($color, "red", $space: rgb);
+  $g: color.channel($color, "green", $space: rgb);
+  $b: color.channel($color, "blue", $space: rgb);
+  @return math.div(($r * 299) + ($g * 587) + ($b * 114), 1000);
+}
+
+@function matcha-text-on($color) {
+  @return if(matcha-yiq($color) >= 150, #1a1d21, #ffffff);
+}
+
+@function matcha-contrast-on($color) {
+  @return if(matcha-yiq($color) >= 150, rgba(0, 0, 0, .87), #ffffff);
+}
+
+@function matcha-contrast-alpha-on($color) {
+  @return if(matcha-yiq($color) >= 150, rgba(0, 0, 0, .1), rgba(255, 255, 255, .1));
+}
+
+@function matcha-role-tokens($role, $seed, $surface-bg, $is-dark) {
+  @return (
+    #{$role}: $seed,
+    #{$role}-hover: color.scale($seed, $lightness: if($is-dark, 18%, -12%)),
+    #{$role}-pressed: color.scale($seed, $lightness: if($is-dark, 32%, -20%)),
+    #{$role}-alpha: rgba($seed, .1),
+    #{$role}-contrast: matcha-contrast-on($seed),
+    #{$role}-contrast-alpha: matcha-contrast-alpha-on($seed),
+    #{$role}-surface-hover: color.mix($seed, $surface-bg, 10%),
+    #{$role}-surface-pressed: color.mix($seed, $surface-bg, 22%),
+  );
+}