@ng-matero/extensions 18.0.3 → 18.1.1

package/core/tokens/_token-utils.scss

@@ -1,12 +1,12 @@
 @use 'sass:list';
 @use 'sass:map';
 @use 'sass:meta';
-@use '@material/elevation/elevation-theme' as mdc-elevation-theme;
-@use '@material/theme/custom-properties' as mdc-custom-properties;
-@use '@material/theme/theme' as mdc-theme;
-@use '@material/theme/keys' as mdc-keys;
+@use 'sass:string';
+@use 'sass:color';
+@use 'sass:math';
 @use '@angular/material' as mat;
-@use '../typography/typography';
+@use '../style/elevation';
+@use '../m2/typography' as m2-typography;
 
 // Indicates whether we're building internally. Used for backwards compatibility.
 $private-is-internal-build: false;
@@ -24,7 +24,7 @@ $placeholder-color-config: (
   background: mat.$m2-light-theme-background-palette,
 );
 
-$_placeholder-typography-level-config: typography.typography-config-level-from-mdc(body1);
+$_placeholder-typography-level-config: m2-typography.typography-config-level-from-mdc(body1);
 
 // Placeholder typography config that can be passed to token getter functions when generating token
 // slots.
@@ -54,27 +54,33 @@ $placeholder-density-config: 0;
 $_tokens: null;
 $_component-prefix: null;
 
-@mixin _configure-token-prefix($first, $rest...) {
-  $_component-prefix: '' !global;
-  @each $item in $rest {
-    $_component-prefix:
-      if($_component-prefix == '', $item, '#{$_component-prefix}-#{$item}') !global;
-  }
-  @include mdc-custom-properties.configure($varname-prefix: $first) {
-    @content;
-  }
-  $_component-prefix: null !global;
-}
-
 // Sets the token prefix and map to use when creating token slots.
 @mixin use-tokens($prefix, $tokens) {
+  $_component-prefix: $prefix !global;
   $_tokens: $tokens !global;
-  @include _configure-token-prefix($prefix...) {
-    @content;
-  }
+
+  @content;
+
+  $_component-prefix: null !global;
   $_tokens: null !global;
 }
 
+// Combines a prefix and a string to generate a CSS variable name for a token.
+@function _get-css-variable($prefix, $name) {
+  @if $prefix == null or $name == null {
+    @error 'Must specify both prefix and name when generating token';
+  }
+
+  $string-prefix: '';
+
+  // Prefixes are lists so we need to combine them.
+  @each $part in $prefix {
+    $string-prefix: if($string-prefix == '', $part, '#{$string-prefix}-#{$part}');
+  }
+
+  @return string.unquote('--#{$string-prefix}-#{$name}');
+}
+
 // Emits a slot for the given token, provided that it has a non-null value in the token map passed
 // to `use-tokens`.
 @mixin create-token-slot($property, $token, $emit-fallback: false) {
@@ -94,8 +100,10 @@ $_component-prefix: null;
       $fallback: $emit-fallback;
     }
 
-    $value: mdc-custom-properties.create('#{$_component-prefix}-#{$token}', $fallback: $fallback);
-    @include mdc-theme.property($property, $value);
+    $var-name: _get-css-variable($_component-prefix, $token);
+    $var-reference: if($fallback == null, var(#{$var-name}), var(#{$var-name}, #{$fallback}));
+
+    #{$property}: #{$var-reference};
   }
 }
 
@@ -109,7 +117,7 @@ $_component-prefix: null;
     @error 'Token #{$token} does not exist. Configured tokens are: #{map.keys($_tokens)}';
   }
 
-  @return mdc-custom-properties.create-varname('#{$_component-prefix}-#{$token}');
+  @return _get-css-variable($_component-prefix, $token);
 }
 
 // TODO(crisbeto): should be able to replace the usages of `get-token-variable` with this.
@@ -134,12 +142,29 @@ $_component-prefix: null;
   }
 }
 
+// Outputs a map of tokens under a specific prefix.
 @mixin create-token-values($prefix, $tokens) {
-  @include _configure-token-prefix($prefix...) {
-    @include mdc-keys.declare-custom-properties($tokens, $_component-prefix);
+  @if $tokens != null {
+    @each $key, $value in $tokens {
+      @if $value != null {
+        #{_get-css-variable($prefix, $key)}: #{$value};
+      }
+    }
   }
 }
 
+/// Gets all the MDC token values for a specific component. This function serves as single
+/// point at which we directly reference a specific version of the MDC tokens.
+/// @param {String} $component Name of the component for which to get the tokens
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {List} Map of token names to values
+@function get-mdc-tokens($component, $systems, $exclude-hardcoded) {
+  $full-name: 'md-comp-' + $component + '-values';
+  $fn: meta.get-function($name: $full-name, $module: 'm3-token-definitions');
+  @return meta.call($fn, $systems, $exclude-hardcoded);
+}
+
 // MDC doesn't currently handle elevation tokens properly. As a temporary workaround we can combine
 // the elevation and shadow-color tokens into a full box-shadow and use it as the value for the
 // elevation token.
@@ -147,7 +172,7 @@ $_component-prefix: null;
   $elevation: map.get($tokens, $elevation-token);
   $shadow-color: map.get($tokens, $shadow-color-token);
   @return map.merge($tokens, (
-    $elevation-token: mdc-elevation-theme.elevation-box-shadow($elevation, $shadow-color),
+    $elevation-token: elevation.get-box-shadow($elevation, $shadow-color),
     $shadow-color-token: null,
   ));
 }
@@ -202,9 +227,13 @@ $_component-prefix: null;
   }
   $overrides: map.get($tokens, list.append($prefix, $color-variant));
   @if $overrides == null {
-    @error #{'Invalid color variant: '}#{$color-variant}#{'. Supported color variants are: '}#{
-      _supported-color-variants($tokens, $prefix)
-    }#{'.'};
+    $variants: _supported-color-variants($tokens, $prefix);
+    $secondary-message: if($variants == (),
+      'Mixin does not support color variants',
+      'Supported color variants are: #{$variants}'
+    );
+
+    @error 'Invalid color variant: #{$color-variant}. #{$secondary-message}.';
   }
   @return if($emit-overrides-only, $overrides, map.merge($values, $overrides));
 }
@@ -286,6 +315,7 @@ $_component-prefix: null;
 /// @param {Map} $map The maps whose values will be mapped to new values.
 /// @param {Function} $fn The value mapping function.
 /// @param {Map} A new map with its values updated using the mapping function.
+/* stylelint-disable-next-line scss/no-global-function-names */
 @function map-values($map, $fn) {
   $result: ();
   @each $key, $value in $map {
@@ -339,6 +369,66 @@ $_component-prefix: null;
   @return $result;
 }
 
+/// Inherited function from MDC that computes which contrast tone to use on top of a color.
+/// This is used only in a narrow set of use cases when generating M2 button tokens to maintain
+/// backwards compatibility.
+/// @param {Color} $value Color for which we're calculating the contrast tone.
+/// @param {Boolean} $is-dark Whether the current theme is dark.
+/// @return {Map} Either `dark` or `light`.
+@function contrast-tone($value, $is-dark) {
+  @if ($value == 'dark') {
+    @return 'light';
+  }
+
+  @if ($value == 'light') {
+    @return 'dark';
+  }
+
+  // Fallback if the app is using a non-color palette (e.g. CSS variable based).
+  @if (meta.type-of($value) != 'color') {
+    @return if($is-dark, 'light', 'dark');
+  }
+
+  $minimum-contrast: 3.1;
+  $light-contrast: _contrast($value, #fff);
+  $dark-contrast: _contrast($value, rgba(0, 0, 0, 0.87));
+
+  @if ($light-contrast < $minimum-contrast) and ($dark-contrast > $light-contrast) {
+    @return 'dark';
+  }
+
+  @return 'light';
+}
+
+@function _linear-channel-value($channel-value) {
+  $normalized-channel-value: math.div($channel-value, 255);
+
+  @if ($normalized-channel-value < 0.03928) {
+    @return math.div($normalized-channel-value, 12.92);
+  }
+
+  @return math.pow(math.div($normalized-channel-value + 0.055, 1.055), 2.4);
+}
+
+// Calculate the luminance for a color.
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+@function _luminance($color) {
+  $red: _linear-channel-value(color.red($color));
+  $green: _linear-channel-value(color.green($color));
+  $blue: _linear-channel-value(color.blue($color));
+
+  @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
+}
+
+// Calculate the contrast ratio between two colors.
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+@function _contrast($back, $front) {
+  $back-lum: _luminance($back) + 0.05;
+  $fore-lum: _luminance($front) + 0.05;
+
+  @return math.div(math.max($back-lum, $fore-lum), math.min($back-lum, $fore-lum));
+}
+
 /// Verifies that the token overrides exist and are used in one of the given token maps.
 @mixin _validate-token-overrides($overrides: (), $token-maps) {
   $valid-token-names: ();

package/core/tokens/m2/mtx/_alert.scss

@@ -19,16 +19,24 @@ $prefix: (mtx, alert);
 
   @return (
     outline-color: transparent,
-    background-color: mat.get-theme-color($theme, background, dialog),
+    background-color: mat.m2-get-color-from-palette(mat.$m2-gray-palette, if($is-dark, 900, 100)),
     text-color: mat.get-theme-color($theme, foreground, text),
-    info-background-color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, if($is-dark, 900, 500)),
-    info-text-color: white,
-    success-background-color: mat.m2-get-color-from-palette(mat.$m2-green-palette, if($is-dark, 900, 500)),
-    success-text-color: white,
-    warning-background-color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, if($is-dark, 900, 500)),
-    warning-text-color: white,
-    danger-background-color: mat.m2-get-color-from-palette(mat.$m2-red-palette, if($is-dark, 900, 500)),
-    danger-text-color: white,
+
+    info-outline-color: transparent,
+    info-background-color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, if($is-dark, 900, 100)),
+    info-text-color: mat.get-theme-color($theme, foreground, text),
+
+    success-outline-color: transparent,
+    success-background-color: mat.m2-get-color-from-palette(mat.$m2-green-palette, if($is-dark, 900, 100)),
+    success-text-color: mat.get-theme-color($theme, foreground, text),
+
+    warning-outline-color: transparent,
+    warning-background-color: mat.m2-get-color-from-palette(mat.$m2-amber-palette, if($is-dark, 900, 100)),
+    warning-text-color: mat.get-theme-color($theme, foreground, text),
+
+    danger-outline-color: transparent,
+    danger-background-color: mat.m2-get-color-from-palette(mat.$m2-red-palette, if($is-dark, 900, 100)),
+    danger-text-color: mat.get-theme-color($theme, foreground, text),
   );
 }
 

package/core/tokens/m2/mtx/_datetimepicker.scss

@@ -1,9 +1,9 @@
 @use 'sass:color';
 @use 'sass:map';
 @use 'sass:meta';
-@use '@material/elevation/elevation-theme' as mdc-elevation;
 @use '@angular/material' as mat;
 @use '../../token-utils';
+@use '../../../style/elevation';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mtx, datetimepicker);
@@ -56,8 +56,8 @@ $_today-fade-amount: .2;
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
   @return (
-    container-elevation-shadow: mdc-elevation.elevation-box-shadow(4),
-    container-touch-elevation-shadow: mdc-elevation.elevation-box-shadow(24),
+    container-elevation-shadow: elevation.get-box-shadow(4),
+    container-touch-elevation-shadow: elevation.get-box-shadow(24),
     container-shape: 4px,
     container-touch-shape: 4px,
     selector-container-shape: 4px,

package/core/tokens/m2/mtx/_drawer.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
-@use '@material/elevation' as mdc-elevation;
 @use '../../token-utils';
+@use '../../../style/elevation';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mtx, drawer);
@@ -11,7 +11,7 @@ $prefix: (mtx, drawer);
 @function get-unthemable-tokens() {
   @return (
     container-shape: 0,
-    container-elevation-shadow: mdc-elevation.elevation-box-shadow(16),
+    container-elevation-shadow: elevation.get-box-shadow(16),
   );
 }
 

package/core/tokens/m2/mtx/_grid.scss

@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
-@use '@material/elevation' as mdc-elevation;
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -12,7 +11,6 @@ $prefix: (mtx, grid);
   @return (
     container-shape: 0,
     table-cell-min-width: 80px,
-    column-menu-elevation-shadow: mdc-elevation.elevation-box-shadow(8),
   );
 }
 

package/core/tokens/m2/mtx/_popover.scss

@@ -10,6 +10,9 @@ $prefix: (mtx, popover);
 @function get-unthemable-tokens() {
   @return (
     container-shape: 4px,
+    // Note that this uses a value, rather than a computed box-shadow, because we use
+    // the value at runtime to determine which shadow to set based on the popover's depth.
+    base-elevation-level: 8,
   );
 }
 

package/core/tokens/m2/mtx/_select.scss

@@ -1,10 +1,8 @@
 @use 'sass:map';
 @use 'sass:math';
-@use '@material/textfield' as mdc-textfield;
-@use '@material/density' as mdc-density;
-@use '@material/elevation' as mdc-elevation;
 @use '@angular/material' as mat;
 @use '../../token-utils';
+@use '../../../style/elevation';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mtx, select);
@@ -21,7 +19,7 @@ $prefix: (mtx, select);
 @function get-unthemable-tokens() {
   @return (
     container-shape: 4px,
-    container-elevation-shadow: mdc-elevation.elevation-box-shadow(8),
+    container-elevation-shadow: elevation.get-box-shadow(8),
   );
 }
 

package/core/tokens/m3/definitions/_index.scss

@@ -0,0 +1,8 @@
+@forward './md-ref-palette' as md-ref-palette-*;
+@forward './md-ref-typeface' as md-ref-typeface-*;
+@forward './md-sys-color' as md-sys-color-*;
+@forward './md-sys-elevation' as md-sys-elevation-*;
+@forward './md-sys-motion' as md-sys-motion-*;
+@forward './md-sys-shape' as md-sys-shape-*;
+@forward './md-sys-state' as md-sys-state-*;
+@forward './md-sys-typescale' as md-sys-typescale-*;

package/core/tokens/m3/definitions/_md-ref-palette.scss

@@ -0,0 +1,100 @@
+//
+// Design system display name: Material 3
+// Design system version: v0.161
+//
+
+@function values($exclude-hardcoded-values: false) {
+  @return (
+    'black': if($exclude-hardcoded-values, null, #000),
+    'error0': if($exclude-hardcoded-values, null, #000),
+    'error10': if($exclude-hardcoded-values, null, #410e0b),
+    'error100': if($exclude-hardcoded-values, null, #fff),
+    'error20': if($exclude-hardcoded-values, null, #601410),
+    'error30': if($exclude-hardcoded-values, null, #8c1d18),
+    'error40': if($exclude-hardcoded-values, null, #b3261e),
+    'error50': if($exclude-hardcoded-values, null, #dc362e),
+    'error60': if($exclude-hardcoded-values, null, #e46962),
+    'error70': if($exclude-hardcoded-values, null, #ec928e),
+    'error80': if($exclude-hardcoded-values, null, #f2b8b5),
+    'error90': if($exclude-hardcoded-values, null, #f9dedc),
+    'error95': if($exclude-hardcoded-values, null, #fceeee),
+    'error99': if($exclude-hardcoded-values, null, #fffbf9),
+    'neutral-variant0': if($exclude-hardcoded-values, null, #000),
+    'neutral-variant10': if($exclude-hardcoded-values, null, #1d1a22),
+    'neutral-variant100': if($exclude-hardcoded-values, null, #fff),
+    'neutral-variant20': if($exclude-hardcoded-values, null, #322f37),
+    'neutral-variant30': if($exclude-hardcoded-values, null, #49454f),
+    'neutral-variant40': if($exclude-hardcoded-values, null, #605d66),
+    'neutral-variant50': if($exclude-hardcoded-values, null, #79747e),
+    'neutral-variant60': if($exclude-hardcoded-values, null, #938f99),
+    'neutral-variant70': if($exclude-hardcoded-values, null, #aea9b4),
+    'neutral-variant80': if($exclude-hardcoded-values, null, #cac4d0),
+    'neutral-variant90': if($exclude-hardcoded-values, null, #e7e0ec),
+    'neutral-variant95': if($exclude-hardcoded-values, null, #f5eefa),
+    'neutral-variant99': if($exclude-hardcoded-values, null, #fffbfe),
+    'neutral0': if($exclude-hardcoded-values, null, #000),
+    'neutral10': if($exclude-hardcoded-values, null, #1c1b1f),
+    'neutral100': if($exclude-hardcoded-values, null, #fff),
+    'neutral12': if($exclude-hardcoded-values, null, #201f23),
+    'neutral17': if($exclude-hardcoded-values, null, #2b292d),
+    'neutral20': if($exclude-hardcoded-values, null, #313033),
+    'neutral22': if($exclude-hardcoded-values, null, #313033),
+    'neutral24': if($exclude-hardcoded-values, null, #313033),
+    'neutral30': if($exclude-hardcoded-values, null, #484649),
+    'neutral4': if($exclude-hardcoded-values, null, #0e0e11),
+    'neutral40': if($exclude-hardcoded-values, null, #605d62),
+    'neutral50': if($exclude-hardcoded-values, null, #787579),
+    'neutral6': if($exclude-hardcoded-values, null, #141317),
+    'neutral60': if($exclude-hardcoded-values, null, #939094),
+    'neutral70': if($exclude-hardcoded-values, null, #aeaaae),
+    'neutral80': if($exclude-hardcoded-values, null, #c9c5ca),
+    'neutral87': if($exclude-hardcoded-values, null, #ddd8dd),
+    'neutral90': if($exclude-hardcoded-values, null, #e6e1e5),
+    'neutral92': if($exclude-hardcoded-values, null, #ece7ec),
+    'neutral94': if($exclude-hardcoded-values, null, #f1ecf1),
+    'neutral95': if($exclude-hardcoded-values, null, #f4eff4),
+    'neutral96': if($exclude-hardcoded-values, null, #f7f2f7),
+    'neutral98': if($exclude-hardcoded-values, null, #fdf8fd),
+    'neutral99': if($exclude-hardcoded-values, null, #fffbfe),
+    'primary0': if($exclude-hardcoded-values, null, #000),
+    'primary10': if($exclude-hardcoded-values, null, #21005d),
+    'primary100': if($exclude-hardcoded-values, null, #fff),
+    'primary20': if($exclude-hardcoded-values, null, #381e72),
+    'primary30': if($exclude-hardcoded-values, null, #4f378b),
+    'primary40': if($exclude-hardcoded-values, null, #6750a4),
+    'primary50': if($exclude-hardcoded-values, null, #7f67be),
+    'primary60': if($exclude-hardcoded-values, null, #9a82db),
+    'primary70': if($exclude-hardcoded-values, null, #b69df8),
+    'primary80': if($exclude-hardcoded-values, null, #d0bcff),
+    'primary90': if($exclude-hardcoded-values, null, #eaddff),
+    'primary95': if($exclude-hardcoded-values, null, #f6edff),
+    'primary99': if($exclude-hardcoded-values, null, #fffbfe),
+    'secondary0': if($exclude-hardcoded-values, null, #000),
+    'secondary10': if($exclude-hardcoded-values, null, #1d192b),
+    'secondary100': if($exclude-hardcoded-values, null, #fff),
+    'secondary20': if($exclude-hardcoded-values, null, #332d41),
+    'secondary30': if($exclude-hardcoded-values, null, #4a4458),
+    'secondary40': if($exclude-hardcoded-values, null, #625b71),
+    'secondary50': if($exclude-hardcoded-values, null, #7a7289),
+    'secondary60': if($exclude-hardcoded-values, null, #958da5),
+    'secondary70': if($exclude-hardcoded-values, null, #b0a7c0),
+    'secondary80': if($exclude-hardcoded-values, null, #ccc2dc),
+    'secondary90': if($exclude-hardcoded-values, null, #e8def8),
+    'secondary95': if($exclude-hardcoded-values, null, #f6edff),
+    'secondary99': if($exclude-hardcoded-values, null, #fffbfe),
+    'tertiary0': if($exclude-hardcoded-values, null, #000),
+    'tertiary10': if($exclude-hardcoded-values, null, #31111d),
+    'tertiary100': if($exclude-hardcoded-values, null, #fff),
+    'tertiary20': if($exclude-hardcoded-values, null, #492532),
+    'tertiary30': if($exclude-hardcoded-values, null, #633b48),
+    'tertiary40': if($exclude-hardcoded-values, null, #7d5260),
+    'tertiary50': if($exclude-hardcoded-values, null, #986977),
+    'tertiary60': if($exclude-hardcoded-values, null, #b58392),
+    'tertiary70': if($exclude-hardcoded-values, null, #d29dac),
+    'tertiary80': if($exclude-hardcoded-values, null, #efb8c8),
+    'tertiary90': if($exclude-hardcoded-values, null, #ffd8e4),
+    'tertiary95': if($exclude-hardcoded-values, null, #ffecf1),
+    'tertiary99': if($exclude-hardcoded-values, null, #fffbfa),
+    'white': if($exclude-hardcoded-values, null, #fff)
+  );
+}

package/core/tokens/m3/definitions/_md-ref-typeface.scss

@@ -0,0 +1,14 @@
+//
+// Design system display name: Material 3
+// Design system version: v0.161
+//
+
+@function values($exclude-hardcoded-values: false) {
+  @return (
+    'brand': if($exclude-hardcoded-values, null, (Roboto)),
+    'plain': if($exclude-hardcoded-values, null, (Roboto)),
+    'weight-bold': if($exclude-hardcoded-values, null, 700),
+    'weight-medium': if($exclude-hardcoded-values, null, 500),
+    'weight-regular': if($exclude-hardcoded-values, null, 400)
+  );
+}

package/core/tokens/m3/definitions/_md-sys-color.scss

@@ -0,0 +1,126 @@
+//
+// Design system display name: Material 3
+// Design system version: v0.161
+//
+
+@use 'sass:map';
+
+@use './md-ref-palette';
+
+$_default-dark: (
+  'md-ref-palette': md-ref-palette.values(),
+);
+
+@function values-dark($deps: $_default-dark) {
+  @return (
+    'background': map.get($deps, 'md-ref-palette', 'neutral10'),
+    'error': map.get($deps, 'md-ref-palette', 'error80'),
+    'error-container': map.get($deps, 'md-ref-palette', 'error30'),
+    'inverse-on-surface': map.get($deps, 'md-ref-palette', 'neutral20'),
+    'inverse-primary': map.get($deps, 'md-ref-palette', 'primary40'),
+    'inverse-surface': map.get($deps, 'md-ref-palette', 'neutral90'),
+    'on-background': map.get($deps, 'md-ref-palette', 'neutral90'),
+    'on-error': map.get($deps, 'md-ref-palette', 'error20'),
+    'on-error-container': map.get($deps, 'md-ref-palette', 'error90'),
+    'on-primary': map.get($deps, 'md-ref-palette', 'primary20'),
+    'on-primary-container': map.get($deps, 'md-ref-palette', 'primary90'),
+    'on-primary-fixed': map.get($deps, 'md-ref-palette', 'primary10'),
+    'on-primary-fixed-variant': map.get($deps, 'md-ref-palette', 'primary30'),
+    'on-secondary': map.get($deps, 'md-ref-palette', 'secondary20'),
+    'on-secondary-container': map.get($deps, 'md-ref-palette', 'secondary90'),
+    'on-secondary-fixed': map.get($deps, 'md-ref-palette', 'secondary10'),
+    'on-secondary-fixed-variant':
+      map.get($deps, 'md-ref-palette', 'secondary30'),
+    'on-surface': map.get($deps, 'md-ref-palette', 'neutral90'),
+    'on-surface-variant': map.get($deps, 'md-ref-palette', 'neutral-variant80'),
+    'on-tertiary': map.get($deps, 'md-ref-palette', 'tertiary20'),
+    'on-tertiary-container': map.get($deps, 'md-ref-palette', 'tertiary90'),
+    'on-tertiary-fixed': map.get($deps, 'md-ref-palette', 'tertiary10'),
+    'on-tertiary-fixed-variant': map.get($deps, 'md-ref-palette', 'tertiary30'),
+    'outline': map.get($deps, 'md-ref-palette', 'neutral-variant60'),
+    'outline-variant': map.get($deps, 'md-ref-palette', 'neutral-variant30'),
+    'primary': map.get($deps, 'md-ref-palette', 'primary80'),
+    'primary-container': map.get($deps, 'md-ref-palette', 'primary30'),
+    'primary-fixed': map.get($deps, 'md-ref-palette', 'primary90'),
+    'primary-fixed-dim': map.get($deps, 'md-ref-palette', 'primary80'),
+    'scrim': map.get($deps, 'md-ref-palette', 'neutral0'),
+    'secondary': map.get($deps, 'md-ref-palette', 'secondary80'),
+    'secondary-container': map.get($deps, 'md-ref-palette', 'secondary30'),
+    'secondary-fixed': map.get($deps, 'md-ref-palette', 'secondary90'),
+    'secondary-fixed-dim': map.get($deps, 'md-ref-palette', 'secondary80'),
+    'shadow': map.get($deps, 'md-ref-palette', 'neutral0'),
+    'surface': map.get($deps, 'md-ref-palette', 'neutral10'),
+    'surface-bright': map.get($deps, 'md-ref-palette', 'neutral24'),
+    'surface-container': map.get($deps, 'md-ref-palette', 'neutral12'),
+    'surface-container-high': map.get($deps, 'md-ref-palette', 'neutral17'),
+    'surface-container-highest': map.get($deps, 'md-ref-palette', 'neutral22'),
+    'surface-container-low': map.get($deps, 'md-ref-palette', 'neutral10'),
+    'surface-container-lowest': map.get($deps, 'md-ref-palette', 'neutral4'),
+    'surface-dim': map.get($deps, 'md-ref-palette', 'neutral6'),
+    'surface-tint': map.get($deps, 'md-ref-palette', 'primary80'),
+    'surface-variant': map.get($deps, 'md-ref-palette', 'neutral-variant30'),
+    'tertiary': map.get($deps, 'md-ref-palette', 'tertiary80'),
+    'tertiary-container': map.get($deps, 'md-ref-palette', 'tertiary30'),
+    'tertiary-fixed': map.get($deps, 'md-ref-palette', 'tertiary90'),
+    'tertiary-fixed-dim': map.get($deps, 'md-ref-palette', 'tertiary80')
+  );
+}
+
+$_default-light: (
+  'md-ref-palette': md-ref-palette.values(),
+);
+
+@function values-light($deps: $_default-light) {
+  @return (
+    'background': map.get($deps, 'md-ref-palette', 'neutral99'),
+    'error': map.get($deps, 'md-ref-palette', 'error40'),
+    'error-container': map.get($deps, 'md-ref-palette', 'error90'),
+    'inverse-on-surface': map.get($deps, 'md-ref-palette', 'neutral95'),
+    'inverse-primary': map.get($deps, 'md-ref-palette', 'primary80'),
+    'inverse-surface': map.get($deps, 'md-ref-palette', 'neutral20'),
+    'on-background': map.get($deps, 'md-ref-palette', 'neutral10'),
+    'on-error': map.get($deps, 'md-ref-palette', 'error100'),
+    'on-error-container': map.get($deps, 'md-ref-palette', 'error10'),
+    'on-primary': map.get($deps, 'md-ref-palette', 'primary100'),
+    'on-primary-container': map.get($deps, 'md-ref-palette', 'primary10'),
+    'on-primary-fixed': map.get($deps, 'md-ref-palette', 'primary10'),
+    'on-primary-fixed-variant': map.get($deps, 'md-ref-palette', 'primary30'),
+    'on-secondary': map.get($deps, 'md-ref-palette', 'secondary100'),
+    'on-secondary-container': map.get($deps, 'md-ref-palette', 'secondary10'),
+    'on-secondary-fixed': map.get($deps, 'md-ref-palette', 'secondary10'),
+    'on-secondary-fixed-variant':
+      map.get($deps, 'md-ref-palette', 'secondary30'),
+    'on-surface': map.get($deps, 'md-ref-palette', 'neutral10'),
+    'on-surface-variant': map.get($deps, 'md-ref-palette', 'neutral-variant30'),
+    'on-tertiary': map.get($deps, 'md-ref-palette', 'tertiary100'),
+    'on-tertiary-container': map.get($deps, 'md-ref-palette', 'tertiary10'),
+    'on-tertiary-fixed': map.get($deps, 'md-ref-palette', 'tertiary10'),
+    'on-tertiary-fixed-variant': map.get($deps, 'md-ref-palette', 'tertiary30'),
+    'outline': map.get($deps, 'md-ref-palette', 'neutral-variant50'),
+    'outline-variant': map.get($deps, 'md-ref-palette', 'neutral-variant80'),
+    'primary': map.get($deps, 'md-ref-palette', 'primary40'),
+    'primary-container': map.get($deps, 'md-ref-palette', 'primary90'),
+    'primary-fixed': map.get($deps, 'md-ref-palette', 'primary90'),
+    'primary-fixed-dim': map.get($deps, 'md-ref-palette', 'primary80'),
+    'scrim': map.get($deps, 'md-ref-palette', 'neutral0'),
+    'secondary': map.get($deps, 'md-ref-palette', 'secondary40'),
+    'secondary-container': map.get($deps, 'md-ref-palette', 'secondary90'),
+    'secondary-fixed': map.get($deps, 'md-ref-palette', 'secondary90'),
+    'secondary-fixed-dim': map.get($deps, 'md-ref-palette', 'secondary80'),
+    'shadow': map.get($deps, 'md-ref-palette', 'neutral0'),
+    'surface': map.get($deps, 'md-ref-palette', 'neutral99'),
+    'surface-bright': map.get($deps, 'md-ref-palette', 'neutral98'),
+    'surface-container': map.get($deps, 'md-ref-palette', 'neutral94'),
+    'surface-container-high': map.get($deps, 'md-ref-palette', 'neutral92'),
+    'surface-container-highest': map.get($deps, 'md-ref-palette', 'neutral90'),
+    'surface-container-low': map.get($deps, 'md-ref-palette', 'neutral96'),
+    'surface-container-lowest': map.get($deps, 'md-ref-palette', 'neutral100'),
+    'surface-dim': map.get($deps, 'md-ref-palette', 'neutral87'),
+    'surface-tint': map.get($deps, 'md-ref-palette', 'primary40'),
+    'surface-variant': map.get($deps, 'md-ref-palette', 'neutral-variant90'),
+    'tertiary': map.get($deps, 'md-ref-palette', 'tertiary40'),
+    'tertiary-container': map.get($deps, 'md-ref-palette', 'tertiary90'),
+    'tertiary-fixed': map.get($deps, 'md-ref-palette', 'tertiary90'),
+    'tertiary-fixed-dim': map.get($deps, 'md-ref-palette', 'tertiary80')
+  );
+}

package/core/tokens/m3/definitions/_md-sys-elevation.scss

@@ -0,0 +1,15 @@
+//
+// Design system display name: Material 3
+// Design system version: v0.161
+//
+
+@function values($exclude-hardcoded-values: false) {
+  @return (
+    'level0': if($exclude-hardcoded-values, null, 0),
+    'level1': if($exclude-hardcoded-values, null, 1),
+    'level2': if($exclude-hardcoded-values, null, 3),
+    'level3': if($exclude-hardcoded-values, null, 6),
+    'level4': if($exclude-hardcoded-values, null, 8),
+    'level5': if($exclude-hardcoded-values, null, 12)
+  );
+}