@acontplus/ng-components 2.1.30 → 2.1.32

package/src/core/tokens/_system.scss

@@ -0,0 +1,388 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+@use '@angular/material' as mat;
+@use './../../lib/components/alert/m3-alert';
+@use './../../lib/components/drawer/m3-drawer';
+@use './../../lib/components/grid/m3-grid';
+@use './../../lib/components/popover/m3-popover';
+@use './../style/elevation';
+@use './../theming/config-validation';
+@use '../theming/definition';
+@use '../theming/palettes';
+@use './m3';
+
+/// Emits necessary CSS variables for Material's system level values for the values defined in the
+/// config map. The config map can have values color, typography, and/or density.
+///
+/// If the config map's color value is an Angular Material color palette, it will be used as the
+/// primary and tertiary colors with a `color-scheme` theme type. Otherwise if the color value is a
+/// map, it must have a `primary` value containing an Angular Material color palette, and
+/// optionally a different `tertiary` palette (defaults to primary palette) and `theme-type` that
+/// is either `light`, `dark`, or 'color-scheme` (defaults to `color-scheme`). Color variable
+/// definitions will not be emitted if there are no color values in the config.
+///
+/// If the config map's typography value is a font family string, it will be used as the
+/// plain and brand font family with default bold, medium, and regular weights of 700, 500, and 400,
+/// respectfully. Otherwise if the typography value is a map, it must have a `plain-family` font
+/// family value, and optionally a different `brand-family` font family (defaults to the plain
+/// value) and weights for `bold-weight` (default: 700), `bold-weight` (default: 500), and
+/// `bold-weight` (default: 400). Typography variable definitions will not be emitted if there are
+/// no typography values in the config.
+///
+/// If the config map's density value is a number, it will be used as the density scale. Otherwise
+/// if the density value is a map, it must have a `scale` value. Density variable definitions will
+/// not be emitted if there are no density values in the config.
+///
+/// The application variables emitted use the namespace prefix "--mat-sys".
+/// e.g. --mat-sys-surface: #E5E5E5
+///
+/// @param {Map} $config The color configuration with optional keys color, typography, or density.
+@mixin theme($config, $overrides: ()) {
+  $color: map.get($config, color);
+  $color-config: null;
+  @if ($color) {
+    // validate-palette returns null if it is a valid M3 palette
+    $is-palette: config-validation.validate-palette($color) == null;
+
+    // Default to "color-scheme" theme type if the config's color does not provide one.
+    @if (not $is-palette and not map.has-key($color, theme-type)) {
+      $color: map.set($color, theme-type, color-scheme);
+    }
+
+    $color-config: $color;
+    @if ($is-palette) {
+      $color: map.set($color, tertiary, $color);
+      $color-config: (
+        definition.$internals: (
+            palettes: (
+                primary: map.remove($color, neutral, neutral-variant, secondary),
+                secondary: map.get($color, secondary),
+                tertiary: map.remove($color, neutral, neutral-variant, secondary, error),
+                neutral: map.get($color, neutral),
+                neutral-variant: map.get($color, neutral-variant),
+                error: map.get($color, error),
+              ),
+            theme-type: color-scheme,
+          ),
+      );
+    } @else {
+      $primary: map.get($color, primary) or palettes.$violet-palette;
+      $tertiary: map.get($color, tertiary) or $primary;
+      $color-config: (
+        definition.$internals: (
+            palettes: (
+                primary: map.remove($primary, neutral, neutral-variant, secondary),
+                secondary: map.get($primary, secondary),
+                tertiary: map.remove($tertiary, neutral, neutral-variant, secondary, error),
+                neutral: map.get($primary, neutral),
+                neutral-variant: map.get($primary, neutral-variant),
+                error: map.get($primary, error),
+              ),
+            theme-type: map.get($color, theme-type),
+          ),
+      );
+    }
+
+    @include system-level-colors($color-config, $overrides, definition.$system-fallback-prefix);
+    @include system-level-elevation($color-config, $overrides, definition.$system-fallback-prefix);
+  }
+
+  $typography: map.get($config, typography);
+  $typography-config: null;
+  @if ($typography) {
+    $plain: (Roboto, sans-serif);
+    $brand: $plain;
+    $bold: 700;
+    $medium: 500;
+    $regular: 400;
+    @if (meta.type-of($typography) == map) {
+      $plain: map.get($typography, plain-family);
+      $brand: map.get($typography, brand-family) or $plain;
+      $bold: map.get($typography, bold-weight) or $bold;
+      $medium: map.get($typography, medium-weight) or $medium;
+      $regular: map.get($typography, regular-weight) or $regular;
+    } @else {
+      $plain: $typography;
+      $brand: $typography;
+    }
+    $typography-config: (
+      definition.$internals: (
+          font-definition: (
+              plain: $plain,
+              brand: $brand,
+              bold: $bold,
+              medium: $medium,
+              regular: $regular,
+            ),
+        ),
+    );
+    @include system-level-typography(
+      $typography-config,
+      $overrides,
+      definition.$system-fallback-prefix
+    );
+  }
+
+  $density: map.get($config, density);
+  $density-config: null;
+  @if ($density) {
+    $scale: 0;
+    @if (meta.type-of($density) == map) {
+      $scale: map.get($density, scale);
+    } @else {
+      $scale: $density;
+    }
+    @if ($scale != 0) {
+      // Emit component-level density tokens if the scale is lower than 0. The density tokens
+      // do not fallback to any system-level values and must be defined if the scale is different.
+      $density-tokens: get-density-tokens($scale);
+      @each $tokens in $density-tokens {
+        @each $token-name, $token-value in $tokens {
+          --mat-#{$token-name}: #{$token-value};
+        }
+      }
+    }
+  }
+
+  @include system-level-shape($overrides: $overrides, $prefix: definition.$system-fallback-prefix);
+  @include system-level-state($overrides: $overrides, $prefix: definition.$system-fallback-prefix);
+}
+
+// Gets all density-related tokens from the components.
+@function get-density-tokens($scale) {
+  @return (
+    m3-alert.get-density-tokens($scale),
+    m3-colorpicker.get-density-tokens($scale),
+    m3-datetimepicker.get-density-tokens($scale),
+    m3-drawer.get-density-tokens($scale),
+    m3-grid.get-density-tokens($scale),
+    m3-loader.get-density-tokens($scale),
+    m3-popover.get-density-tokens($scale),
+    m3-progress.get-density-tokens($scale),
+    m3-select.get-density-tokens($scale),
+    m3-split.get-density-tokens($scale),
+    m3-tooltip.get-density-tokens($scale)
+  );
+}
+
+/// Emits the system-level CSS variables for each of the provided override values. E.g. to
+/// change the primary color to red, use `mat.theme-overrides((primary: red));`
+@mixin theme-overrides($overrides, $prefix: definition.$system-fallback-prefix) {
+  $sys-names: map-merge-all(
+    m3.md-sys-color-values-light(palettes.$blue-palette),
+    m3.md-sys-typescale-values(
+      (
+        brand: (
+          Roboto,
+        ),
+        plain: (
+          Roboto,
+        ),
+        bold: 700,
+        medium: 500,
+        regular: 400,
+      )
+    ),
+    m3.md-sys-elevation-values(),
+    m3.md-sys-shape-values(),
+    m3.md-sys-state-values()
+  );
+
+  @include mat.private-current-selector-or-root {
+    @each $name, $value in $overrides {
+      @if (map.has-key($sys-names, $name)) {
+        --#{$prefix}-#{$name}: #{map.get($overrides, $name)};
+      }
+    }
+  }
+}
+
+@mixin system-level-colors($theme, $overrides: (), $prefix: null) {
+  $palettes: map.get($theme, definition.$internals, palettes);
+  $type: map.get($theme, definition.$internals, theme-type);
+
+  @if (not $prefix) {
+    $prefix: map.get($theme, definition.$internals, color-system-variables-prefix) or
+      definition.$system-level-prefix;
+  }
+
+  $sys-colors: _generate-sys-colors($palettes, $type);
+
+  // Manually insert a subset of palette values that are used directly by components
+  // instead of system variables.
+  $sys-colors: map.set($sys-colors, neutral-variant20, map.get($palettes, neutral-variant, 20));
+  $sys-colors: map.set($sys-colors, neutral10, map.get($palettes, neutral, 10));
+
+  @include mat.private-current-selector-or-root {
+    @each $name, $value in $sys-colors {
+      --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
+    }
+  }
+}
+
+@function _generate-sys-colors($palettes, $type) {
+  $light-sys-colors: m3.md-sys-color-values-light($palettes);
+  @if ($type == light) {
+    @return $light-sys-colors;
+  }
+
+  $dark-sys-colors: m3.md-sys-color-values-dark($palettes);
+  @if ($type == dark) {
+    @return $dark-sys-colors;
+  }
+
+  @if ($type == color-scheme) {
+    $light-dark-sys-colors: ();
+    @each $name, $light-value in $light-sys-colors {
+      $dark-value: map.get($dark-sys-colors, $name);
+      $light-dark-sys-colors: map.set(
+        $light-dark-sys-colors,
+        $name,
+        light-dark($light-value, $dark-value)
+      );
+    }
+    @return $light-dark-sys-colors;
+  }
+
+  @error 'Unknown theme-type provided: #{$type}';
+}
+
+@mixin system-level-typography($theme, $overrides: (), $prefix: null) {
+  $font-definition: map.get($theme, definition.$internals, font-definition);
+
+  @if (not $prefix) {
+    $prefix: map.get($theme, definition.$internals, typography-system-variables-prefix) or
+      definition.$system-level-prefix;
+  }
+
+  @include mat.private-current-selector-or-root {
+    @each $name, $value in m3.md-sys-typescale-values($font-definition) {
+      --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
+    }
+  }
+}
+
+@mixin system-level-elevation($theme, $overrides: (), $prefix: definition.$system-level-prefix) {
+  $shadow-color: map.get($theme, definition.$internals, palettes, neutral, 0);
+
+  @include mat.private-current-selector-or-root {
+    @each $name, $value in m3.md-sys-elevation-values() {
+      $level: map.get($overrides, $name) or $value;
+      $value: elevation.get-box-shadow($level, $shadow-color);
+
+      --#{$prefix}-#{$name}: #{$value};
+    }
+  }
+}
+
+@mixin system-level-shape($theme: (), $overrides: (), $prefix: definition.$system-level-prefix) {
+  @include mat.private-current-selector-or-root {
+    @each $name, $value in m3.md-sys-shape-values() {
+      --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
+    }
+  }
+}
+
+@mixin system-level-state($theme: (), $overrides: (), $prefix: definition.$system-level-prefix) {
+  @include mat.private-current-selector-or-root {
+    @each $name, $value in m3.md-sys-state-values() {
+      --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
+    }
+  }
+}
+
+/// Creates a single merged map from the provided variable-length map arguments
+@function map-merge-all($maps...) {
+  $result: ();
+  @each $map in $maps {
+    $result: map.merge($result, $map);
+  }
+  @return $result;
+}
+
+// Defines Angular Material system variables using M2 values provided by
+// an M2 theme config created with `mat.m2-define-light-theme` or `mat.m2-define-dark-theme`.
+//
+// This enables applications to style custom components with system-level CSS
+// variables instead of creating a separate component theme mixin that relies on
+// the theme config.
+//
+// For example, use `var(--mat-sys-primary)` to get a theme's primary color instead of
+// pulling it from the theme with `m2-get-color-from-palette($primary-palette, default)`.
+//
+// Unlike M3's `mat.theme()`, this mixin does not replace the need to call
+// individual component theme mixins for Angular Material components.
+@mixin m2-theme($theme-config, $overrides: ()) {
+  @if mat.get-theme-version($theme-config) == 1 {
+    @error '`m2-theme` mixin should only be called for M2 theme ' +
+        'configs created with define-light-theme or define-dark-theme';
+  }
+
+  // Check whether any override keys do not match keys in the theme
+  // config system map.
+  $invalid-keys: ();
+  $config-system: map.get($theme-config, _mat-system);
+  @each $key, $value in $overrides {
+    @if (not map.has-key($config-system, $key)) {
+      $invalid-keys: list.append($invalid-keys, $key);
+    }
+  }
+  @if (list.length($invalid-keys) > 0) {
+    @error 'The following overrides are not valid system variables: #{$invalid-keys}. ' +
+        'Valid keys are: #{map.keys($config-system)}';
+  }
+
+  $config: m2-inspection.get-m2-config($theme-config);
+
+  $color: map.get($config, color);
+  @if (m2-inspection.theme-has($theme-config, color)) {
+    $system-colors: null;
+
+    @if (map.get($color, is-dark)) {
+      $system-colors: m2.md-sys-color-values-dark($color);
+    } @else {
+      $system-colors: m2.md-sys-color-values-light($color);
+    }
+
+    @include _define-m2-system-vars($system-colors, $overrides);
+
+    $shadow: map.get($theme-config, _mat-system, shadow);
+    $system-elevations: ();
+    @each $name, $value in m2.md-sys-elevation-values() {
+      $level: map.get($overrides, $name) or $value;
+      $value: elevation.get-box-shadow($level, $shadow);
+      $system-elevations: map.set($system-elevations, $name, $value);
+    }
+    @include _define-m2-system-vars($system-elevations, $overrides);
+  }
+
+  $typography: map.get($config, typography);
+  @if ($typography) {
+    $system-typography: m2.md-sys-typescale-values($typography);
+    @include _define-m2-system-vars($system-typography, $overrides);
+  }
+
+  @include _define-m2-system-vars(m2.md-sys-shape-values(), $overrides);
+  @include _define-m2-system-vars(m2.md-sys-state-values(), $overrides);
+
+  // The icon button's color token is set to `inherit` for M2 and intended to display
+  // the color inherited from its parent element. This is crucial because it's unknown
+  // whether the icon button sits on a container with background like "surface" or "primary",
+  // where both may have different contrast colors like white or black.
+  // However, variables set to inherit AND define a fallback will always use the fallback,
+  // which is "on-surface-variant". This mixin now defines this value.
+  // To avoid this, and continue using `inherit` for the icon button color, set the color explicitly
+  // to the token without a fallback.
+  .mat-mdc-button-base.mat-mdc-icon-button:not(.mat-mdc-button-disabled) {
+    color: var(--mat-icon-button-icon-color);
+  }
+}
+
+@mixin _define-m2-system-vars($vars, $overrides) {
+  @include mat.private-current-selector-or-root {
+    @each $name, $value in $vars {
+      --#{definition.$system-fallback-prefix}-#{$name}: #{map.get($overrides, $name) or $value};
+    }
+  }
+}

package/src/core/tokens/_token-utils.scss

@@ -0,0 +1,117 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:string';
+@use '@angular/material' as mat;
+
+// Creates a CSS variable, including the fallback if provided.
+@function _create-var($name, $fallback: null) {
+  @if ($fallback) {
+    @return var($name, $fallback);
+  } @else {
+    @return var($name);
+  }
+}
+
+// Returns a list of overrides for the given M3 get-tokens mixin and prefix. Each token has its
+// prefix removed since the overrides API expects its absence. The returned map includes "all" for
+// all override tokens, and also the subsets with keys base, color, typography, and density.
+@function get-overrides($tokens, $prefix) {
+  $base: remove-token-prefixes(map.get($tokens, base), $prefix);
+  $color: remove-token-prefixes(map.get($tokens, color), $prefix);
+  $typography: remove-token-prefixes(map.get($tokens, typography), $prefix);
+  $density: remove-token-prefixes(map.get($tokens, density), $prefix);
+  $all: ();
+  @each $map in ($base, $color, $typography, $density) {
+    $all: map.merge($all, $map);
+  }
+
+  @return (all: $all, base: $base, color: $color, typography: $typography, density: $density);
+}
+
+// Removes a prefix from each component token in the provided map of prefixed tokens.
+@function remove-token-prefixes($prefixed-tokens: (), $prefix) {
+  $tokens: ();
+  @each $prefixed-token, $value in $prefixed-tokens {
+    $token: string.slice($prefixed-token, string.length($prefix) + 2);
+    $tokens: map.set($tokens, $token, $value);
+  }
+  @return $tokens;
+}
+
+// Returns the token slot value.
+// Accepts an optional fallback parameter to include in the CSS variable.
+// If $fallback is `true`, then use the tokens map to get the fallback.
+@function slot($token, $fallbacks, $fallback: null) {
+  // Fallbacks are a map of base, color, typography, and density tokens. To simplify
+  // lookup, flatten these token groups into a single map.
+  $fallbacks-flattened: ();
+  @each $tokens in map.values($fallbacks) {
+    @each $token, $value in $tokens {
+      $fallbacks-flattened: map.set($fallbacks-flattened, $token, $value);
+    }
+  }
+  @if not map.has-key($fallbacks-flattened, $token) {
+    @error 'Token #{$token} does not exist. Configured tokens are:' +
+        #{map.keys($fallbacks-flattened)};
+  }
+
+  $sys-fallback: map.get($fallbacks-flattened, $token);
+  @if (mat.private-is-css-var-name($sys-fallback)) {
+    $sys-fallback: _create-var($sys-fallback, $fallback);
+  }
+
+  @return _create-var(--acp-#{$token}, $sys-fallback);
+}
+
+// Outputs a map of token values as CSS variable definitions.
+@mixin values($tokens) {
+  @include mat.private-current-selector-or-root() {
+    @each $key, $value in $tokens {
+      @if $value != null {
+        --acp-#{$key}: #{$value};
+      }
+    }
+  }
+}
+
+/// Emits new token values for the given token overrides.
+/// Verifies that the overrides passed in are valid tokens.
+/// New token values are emitted under the current selector or root.
+@mixin batch-create-token-values($overrides: (), $namespace-configs) {
+  @include mat.private-current-selector-or-root() {
+    $prefixed-name-data: ();
+    $all-names: ();
+
+    @each $config in $namespace-configs {
+      $namespace: map.get($config, namespace);
+      $tokens: map.get(map.get($config, tokens), all);
+      $prefix: '';
+
+      @if (map.has-key($config, prefix)) {
+        $prefix: map.get($config, prefix);
+      }
+
+      @each $name, $value in $tokens {
+        $prefixed-name: $prefix + $name;
+        $all-names: list.append($all-names, $prefixed-name, $separator: comma);
+        $prefixed-name-data: map.set($prefixed-name-data, $prefixed-name, ($namespace, $name));
+      }
+    }
+
+    @each $name, $value in $overrides {
+      @if map.has-key($prefixed-name-data, $name) {
+        $data: map.get($prefixed-name-data, $name);
+        $namespace: list.nth($data, 1);
+        $name: list.nth($data, 2);
+        $prefixed-name: $namespace + '-' + $name;
+        @include values(
+          (
+            $prefixed-name: $value,
+          )
+        );
+      } @else {
+        @error #{'Invalid token name `'}#{$name}#{'`. '}#{'Valid tokens are: '}#{$all-names};
+      }
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+@forward './md-sys-color';
+@forward './md-sys-elevation';
+@forward './md-sys-motion';
+@forward './md-sys-shape';
+@forward './md-sys-state';
+@forward './md-sys-typescale';
+@forward './theme';

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

@@ -0,0 +1,150 @@
+@use 'sass:map';
+
+// Indicates whether alternative tokens should be used
+$_alternate-tokens: false;
+
+@function md-sys-color-values-dark($palettes: ()) {
+  $values: (
+    background: map.get($palettes, neutral, 6),
+    error: map.get($palettes, error, 80),
+    error-container: map.get($palettes, error, 30),
+    inverse-on-surface: map.get($palettes, neutral, 20),
+    inverse-primary: map.get($palettes, primary, 40),
+    inverse-surface: map.get($palettes, neutral, 90),
+    on-background: map.get($palettes, neutral, 90),
+    on-error: map.get($palettes, error, 20),
+    on-error-container: map.get($palettes, error, 90),
+    on-primary: map.get($palettes, primary, 20),
+    on-primary-container: map.get($palettes, primary, 90),
+    on-primary-fixed: map.get($palettes, primary, 10),
+    on-primary-fixed-variant: map.get($palettes, primary, 30),
+    on-secondary: map.get($palettes, secondary, 20),
+    on-secondary-container: map.get($palettes, secondary, 90),
+    on-secondary-fixed: map.get($palettes, secondary, 10),
+    on-secondary-fixed-variant: map.get($palettes, secondary, 30),
+    on-surface: map.get($palettes, neutral, 90),
+    on-surface-variant: map.get($palettes, neutral-variant, 90),
+    on-tertiary: map.get($palettes, tertiary, 20),
+    on-tertiary-container: map.get($palettes, tertiary, 90),
+    on-tertiary-fixed: map.get($palettes, tertiary, 10),
+    on-tertiary-fixed-variant: map.get($palettes, tertiary, 30),
+    outline: map.get($palettes, neutral-variant, 60),
+    outline-variant: map.get($palettes, neutral-variant, 30),
+    primary: map.get($palettes, primary, 80),
+    primary-container: map.get($palettes, primary, 30),
+    primary-fixed: map.get($palettes, primary, 90),
+    primary-fixed-dim: map.get($palettes, primary, 80),
+    scrim: map.get($palettes, neutral, 0),
+    secondary: map.get($palettes, secondary, 80),
+    secondary-container: map.get($palettes, secondary, 30),
+    secondary-fixed: map.get($palettes, secondary, 90),
+    secondary-fixed-dim: map.get($palettes, secondary, 80),
+    shadow: map.get($palettes, neutral, 0),
+    surface: map.get($palettes, neutral, 6),
+    surface-bright: map.get($palettes, neutral, 24),
+    surface-container: map.get($palettes, neutral, 12),
+    surface-container-high: map.get($palettes, neutral, 17),
+    surface-container-highest: map.get($palettes, neutral, 22),
+    surface-container-low: map.get($palettes, neutral, 10),
+    surface-container-lowest: map.get($palettes, neutral, 4),
+    surface-dim: map.get($palettes, neutral, 6),
+    surface-tint: map.get($palettes, primary, 80),
+    surface-variant: map.get($palettes, neutral-variant, 30),
+    tertiary: map.get($palettes, tertiary, 80),
+    tertiary-container: map.get($palettes, tertiary, 30),
+    tertiary-fixed: map.get($palettes, tertiary, 90),
+    tertiary-fixed-dim: map.get($palettes, tertiary, 80),
+  );
+
+  @if ($_alternate-tokens) {
+    $values: map.merge(
+      $values,
+      (
+        on-surface-variant: map.get($palettes, neutral-variant, 80),
+        surface-bright: #37393b,
+        surface-container: #1e1f20,
+        surface-container-high: #282a2c,
+        surface-container-highest: #333537,
+        surface-container-low: #1b1b1b,
+        surface-container-lowest: #0e0e0e,
+        surface-dim: #131313,
+        surface-tint: #d1e1ff,
+      )
+    );
+  }
+
+  @return $values;
+}
+
+@function md-sys-color-values-light($palettes: ()) {
+  $values: (
+    background: map.get($palettes, neutral, 98),
+    error: map.get($palettes, error, 40),
+    error-container: map.get($palettes, error, 90),
+    inverse-on-surface: map.get($palettes, neutral, 95),
+    inverse-primary: map.get($palettes, primary, 80),
+    inverse-surface: map.get($palettes, neutral, 20),
+    on-background: map.get($palettes, neutral, 10),
+    on-error: map.get($palettes, error, 100),
+    on-error-container: map.get($palettes, error, 30),
+    on-primary: map.get($palettes, primary, 100),
+    on-primary-container: map.get($palettes, primary, 30),
+    on-primary-fixed: map.get($palettes, primary, 10),
+    on-primary-fixed-variant: map.get($palettes, primary, 30),
+    on-secondary: map.get($palettes, secondary, 100),
+    on-secondary-container: map.get($palettes, secondary, 30),
+    on-secondary-fixed: map.get($palettes, secondary, 10),
+    on-secondary-fixed-variant: map.get($palettes, secondary, 30),
+    on-surface: map.get($palettes, neutral, 10),
+    on-surface-variant: map.get($palettes, neutral-variant, 30),
+    on-tertiary: map.get($palettes, tertiary, 100),
+    on-tertiary-container: map.get($palettes, tertiary, 30),
+    on-tertiary-fixed: map.get($palettes, tertiary, 10),
+    on-tertiary-fixed-variant: map.get($palettes, tertiary, 30),
+    outline: map.get($palettes, neutral-variant, 50),
+    outline-variant: map.get($palettes, neutral-variant, 80),
+    primary: map.get($palettes, primary, 40),
+    primary-container: map.get($palettes, primary, 90),
+    primary-fixed: map.get($palettes, primary, 90),
+    primary-fixed-dim: map.get($palettes, primary, 80),
+    scrim: map.get($palettes, neutral, 0),
+    secondary: map.get($palettes, secondary, 40),
+    secondary-container: map.get($palettes, secondary, 90),
+    secondary-fixed: map.get($palettes, secondary, 90),
+    secondary-fixed-dim: map.get($palettes, secondary, 80),
+    shadow: map.get($palettes, neutral, 0),
+    surface: map.get($palettes, neutral, 98),
+    surface-bright: map.get($palettes, neutral, 98),
+    surface-container: map.get($palettes, neutral, 94),
+    surface-container-high: map.get($palettes, neutral, 92),
+    surface-container-highest: map.get($palettes, neutral, 90),
+    surface-container-low: map.get($palettes, neutral, 96),
+    surface-container-lowest: map.get($palettes, neutral, 100),
+    surface-dim: map.get($palettes, neutral, 87),
+    surface-tint: map.get($palettes, primary, 40),
+    surface-variant: map.get($palettes, neutral-variant, 90),
+    tertiary: map.get($palettes, tertiary, 40),
+    tertiary-container: map.get($palettes, tertiary, 90),
+    tertiary-fixed: map.get($palettes, tertiary, 90),
+    tertiary-fixed-dim: map.get($palettes, tertiary, 80),
+  );
+
+  @if ($_alternate-tokens) {
+    $values: map.merge(
+      $values,
+      (
+        background: map.get($palettes, neutral, 100),
+        surface: map.get($palettes, neutral, 100),
+        surface-bright: map.get($palettes, neutral, 100),
+        surface-container: #f0f4f9,
+        surface-container-high: #e9eef6,
+        surface-container-highest: #dde3ea,
+        surface-container-low: #f8fafd,
+        surface-dim: #d3dbe5,
+        surface-tint: #6991d6,
+      )
+    );
+  }
+
+  @return $values;
+}

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

@@ -0,0 +1,8 @@
+//
+// Design system display name: Material 3
+// Design system version: v0.161
+//
+
+@function md-sys-elevation-values() {
+  @return (level0: 0, level1: 1, level2: 3, level3: 6, level4: 8, level5: 12);
+}