@material/web 2.4.1 → 2.4.2-nightly.067f9cd.0

package/tokens/versions/v30_0/sass/_md-sys-color.scss

@@ -0,0 +1,209 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// AUTOGENERATED. DO NOT MODIFY.
+// To modify this file, update the source template,
+// or run the compiler: go/carbon-service-code-gen-mwtc.
+// Source template: sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 30.0.14
+// Configured context tags:
+//   audience: 3p
+//   font: static
+//   platform: web
+// Output format: sass_vars
+
+@use 'md-ref-palette';
+
+/// md.sys.color.background (Add-ons / Add-on surface colors)
+///
+/// Note: Background is a legacy color role. It is recommended to use Surface instead of Background.
+$background: md-ref-palette.$neutral98;
+/// md.sys.color.error (Error colors)
+///
+/// Indicates errors, such as invalid input in a date picker
+$error: md-ref-palette.$error40;
+/// md.sys.color.error-container (Error colors)
+///
+/// Container color for error messages and badges
+$error-container: md-ref-palette.$error90;
+/// md.sys.color.inverse-on-surface (Surface colors)
+///
+/// Used for text and icons shown against the inverse surface color
+$inverse-on-surface: md-ref-palette.$neutral95;
+/// md.sys.color.inverse-primary (Add-ons / Add-on primary colors)
+///
+/// Displays opposite of the primary color
+$inverse-primary: md-ref-palette.$primary80;
+/// md.sys.color.inverse-surface (Surface colors)
+///
+/// Displays opposite color of the surrounding UI
+$inverse-surface: md-ref-palette.$neutral20;
+/// md.sys.color.on-background (Add-ons / Add-on surface colors)
+///
+/// Used for text and icons shown against the background color
+$on-background: md-ref-palette.$neutral10;
+/// md.sys.color.on-error (Error colors)
+///
+/// Used for text and icons on the error color
+$on-error: md-ref-palette.$error100;
+/// md.sys.color.on-error-container (Error colors)
+///
+/// Used for text and icons on the error-container color
+$on-error-container: md-ref-palette.$error30;
+/// md.sys.color.on-primary (Primary colors)
+///
+/// Text and icons shown against the primary color
+$on-primary: md-ref-palette.$primary100;
+/// md.sys.color.on-primary-container (Primary colors)
+///
+/// Contrast-passing color shown against the primary container
+$on-primary-container: md-ref-palette.$primary30;
+/// md.sys.color.on-primary-fixed (Add-ons / Add-on primary colors)
+///
+/// Used for text and icons shown against the primary fixed color
+$on-primary-fixed: md-ref-palette.$primary10;
+/// md.sys.color.on-primary-fixed-variant (Add-ons / Add-on primary colors)
+///
+/// Stronger hue variant used for text and icons shown against the primary fixed color
+$on-primary-fixed-variant: md-ref-palette.$primary30;
+/// md.sys.color.on-secondary (Secondary colors)
+///
+/// Text and icons shown against the secondary color
+$on-secondary: md-ref-palette.$secondary100;
+/// md.sys.color.on-secondary-container (Secondary colors)
+///
+/// Contrast-passing color shown against the secondary container
+$on-secondary-container: md-ref-palette.$secondary30;
+/// md.sys.color.on-secondary-fixed (Add-ons / Add-on secondary colors)
+///
+/// Used for text and icons shown against the secondary fixed color
+$on-secondary-fixed: md-ref-palette.$secondary10;
+/// md.sys.color.on-secondary-fixed-variant (Add-ons / Add-on secondary colors)
+///
+/// Stronger hue variant used for text and icons shown against the secondary fixed color
+$on-secondary-fixed-variant: md-ref-palette.$secondary30;
+/// md.sys.color.on-surface (Surface colors)
+///
+/// Text and icons shown against the surface color
+$on-surface: md-ref-palette.$neutral10;
+/// md.sys.color.on-surface-variant (Surface colors)
+///
+/// For text and icons to indicate active or inactive component state
+$on-surface-variant: md-ref-palette.$neutral-variant30;
+/// md.sys.color.on-tertiary (Tertiary colors)
+///
+/// Text and icons shown against the tertiary color
+$on-tertiary: md-ref-palette.$tertiary100;
+/// md.sys.color.on-tertiary-container (Tertiary colors)
+///
+/// Contrast-passing color shown against the tertiary container
+$on-tertiary-container: md-ref-palette.$tertiary30;
+/// md.sys.color.on-tertiary-fixed (Add-ons / Add-on tertiary colors)
+///
+/// Used for text and icons shown against the tertiary fixed color
+$on-tertiary-fixed: md-ref-palette.$tertiary10;
+/// md.sys.color.on-tertiary-fixed-variant (Add-ons / Add-on tertiary colors)
+///
+/// Stronger hue variant used for text and icons shown against the tertiary fixed color
+$on-tertiary-fixed-variant: md-ref-palette.$tertiary30;
+/// md.sys.color.outline (Outline colors)
+///
+/// Subtle color used for boundaries
+$outline: md-ref-palette.$neutral-variant50;
+/// md.sys.color.outline-variant (Outline colors)
+///
+/// Outline-variant is used to define the border of a component where 3:1 contrast ratio isn’t required, a container, or a divider.
+$outline-variant: md-ref-palette.$neutral-variant80;
+/// md.sys.color.primary (Primary colors)
+///
+/// Main color used across screens and components
+$primary: md-ref-palette.$primary40;
+/// md.sys.color.primary-container (Primary colors)
+///
+/// Standout container color for key components
+$primary-container: md-ref-palette.$primary90;
+/// md.sys.color.primary-fixed (Add-ons / Add-on primary colors)
+///
+/// Primary color that doesn't change for light or dark theme.
+$primary-fixed: md-ref-palette.$primary90;
+/// md.sys.color.primary-fixed-dim (Add-ons / Add-on primary colors)
+///
+/// Dimmer version of primary fixed color that doesn't change for light or dark theme.
+$primary-fixed-dim: md-ref-palette.$primary80;
+/// md.sys.color.scrim (Add-ons / Add-on surface colors)
+///
+/// Used for scrims which help separate floating components from the background.
+$scrim: md-ref-palette.$neutral0;
+/// md.sys.color.secondary (Secondary colors)
+///
+/// Accent color used across screens and components
+$secondary: md-ref-palette.$secondary40;
+/// md.sys.color.secondary-container (Secondary colors)
+///
+/// Less prominent container color, for components like tonal buttons
+$secondary-container: md-ref-palette.$secondary90;
+/// md.sys.color.secondary-fixed (Add-ons / Add-on secondary colors)
+///
+/// Secondary color that doesn't change for light or dark theme.
+$secondary-fixed: md-ref-palette.$secondary90;
+/// md.sys.color.secondary-fixed-dim (Add-ons / Add-on secondary colors)
+///
+/// Dimmer version of secondary fixed color that doesn't change for light or dark theme.
+$secondary-fixed-dim: md-ref-palette.$secondary80;
+/// md.sys.color.shadow (Add-ons / Add-on surface colors)
+///
+/// For shadows applied to elevated components
+$shadow: md-ref-palette.$neutral0;
+/// md.sys.color.surface (Surface colors)
+///
+/// Surface color for components like cards, sheets, and menus
+$surface: md-ref-palette.$neutral98;
+/// md.sys.color.surface-bright (Add-ons / Add-on surface colors)
+///
+/// Surface that is brighter in both light and dark theme.
+$surface-bright: md-ref-palette.$neutral98;
+/// md.sys.color.surface-container (Surface colors)
+$surface-container: md-ref-palette.$neutral94;
+/// md.sys.color.surface-container-high (Surface colors)
+$surface-container-high: md-ref-palette.$neutral92;
+/// md.sys.color.surface-container-highest (Surface colors)
+$surface-container-highest: md-ref-palette.$neutral90;
+/// md.sys.color.surface-container-low (Surface colors)
+$surface-container-low: md-ref-palette.$neutral96;
+/// md.sys.color.surface-container-lowest (Surface colors)
+$surface-container-lowest: md-ref-palette.$neutral100;
+/// md.sys.color.surface-dim (Add-ons / Add-on surface colors)
+///
+/// Surface that is dimmer in both light and dark theme.
+$surface-dim: md-ref-palette.$neutral87;
+/// md.sys.color.surface-variant (Surface colors)
+///
+/// Alternate surface color, can be used for active states
+$surface-variant: md-ref-palette.$neutral-variant90;
+/// md.sys.color.tertiary (Tertiary colors)
+///
+/// Contrasting accent color used across screens and components
+$tertiary: md-ref-palette.$tertiary40;
+/// md.sys.color.tertiary-container (Tertiary colors)
+///
+/// Contrasting container color, for components like input fields
+$tertiary-container: md-ref-palette.$tertiary90;
+/// md.sys.color.tertiary-fixed (Add-ons / Add-on tertiary colors)
+///
+/// Tertiary color that doesn't change for light or dark theme.
+$tertiary-fixed: md-ref-palette.$tertiary90;
+/// md.sys.color.tertiary-fixed-dim (Add-ons / Add-on tertiary colors)
+///
+/// Dimmer version of tertiary fixed color that doesn't change for light or dark theme.
+$tertiary-fixed-dim: md-ref-palette.$tertiary80;
+/// md.sys.color.surface-tint (Surface colors)
+///
+/// @deprecated This token should no longer be used and its function/usage has been replaced by the tonal surface colors
+$surface-tint: $primary;
+/// md.sys.color.surface-tint-color (Surface colors)
+///
+/// @deprecated Please replace with md.sys.color.surface-tint. Token deprecated to align naming convention with other color roles by remove `color` from the role name
+$surface-tint-color: $primary;

package/tokens/versions/v30_0/sass/_md-sys-color__dark.scss

@@ -0,0 +1,209 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// AUTOGENERATED. DO NOT MODIFY.
+// To modify this file, update the source template,
+// or run the compiler: go/carbon-service-code-gen-mwtc.
+// Source template: sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 30.0.14
+// Configured context tags:
+//   audience: 3p
+//   font: static
+//   platform: web
+// Output format: sass_vars
+
+@use 'md-ref-palette';
+
+/// md.sys.color.background (Add-ons / Add-on surface colors)
+///
+/// Note: Background is a legacy color role. It is recommended to use Surface instead of Background.
+$background: md-ref-palette.$neutral6;
+/// md.sys.color.error (Error colors)
+///
+/// Indicates errors, such as invalid input in a date picker
+$error: md-ref-palette.$error80;
+/// md.sys.color.error-container (Error colors)
+///
+/// Container color for error messages and badges
+$error-container: md-ref-palette.$error30;
+/// md.sys.color.inverse-on-surface (Surface colors)
+///
+/// Used for text and icons shown against the inverse surface color
+$inverse-on-surface: md-ref-palette.$neutral20;
+/// md.sys.color.inverse-primary (Add-ons / Add-on primary colors)
+///
+/// Displays opposite of the primary color
+$inverse-primary: md-ref-palette.$primary40;
+/// md.sys.color.inverse-surface (Surface colors)
+///
+/// Displays opposite color of the surrounding UI
+$inverse-surface: md-ref-palette.$neutral90;
+/// md.sys.color.on-background (Add-ons / Add-on surface colors)
+///
+/// Used for text and icons shown against the background color
+$on-background: md-ref-palette.$neutral90;
+/// md.sys.color.on-error (Error colors)
+///
+/// Used for text and icons on the error color
+$on-error: md-ref-palette.$error20;
+/// md.sys.color.on-error-container (Error colors)
+///
+/// Used for text and icons on the error-container color
+$on-error-container: md-ref-palette.$error90;
+/// md.sys.color.on-primary (Primary colors)
+///
+/// Text and icons shown against the primary color
+$on-primary: md-ref-palette.$primary20;
+/// md.sys.color.on-primary-container (Primary colors)
+///
+/// Contrast-passing color shown against the primary container
+$on-primary-container: md-ref-palette.$primary90;
+/// md.sys.color.on-primary-fixed (Add-ons / Add-on primary colors)
+///
+/// Used for text and icons shown against the primary fixed color
+$on-primary-fixed: md-ref-palette.$primary10;
+/// md.sys.color.on-primary-fixed-variant (Add-ons / Add-on primary colors)
+///
+/// Stronger hue variant used for text and icons shown against the primary fixed color
+$on-primary-fixed-variant: md-ref-palette.$primary30;
+/// md.sys.color.on-secondary (Secondary colors)
+///
+/// Text and icons shown against the secondary color
+$on-secondary: md-ref-palette.$secondary20;
+/// md.sys.color.on-secondary-container (Secondary colors)
+///
+/// Contrast-passing color shown against the secondary container
+$on-secondary-container: md-ref-palette.$secondary90;
+/// md.sys.color.on-secondary-fixed (Add-ons / Add-on secondary colors)
+///
+/// Used for text and icons shown against the secondary fixed color
+$on-secondary-fixed: md-ref-palette.$secondary10;
+/// md.sys.color.on-secondary-fixed-variant (Add-ons / Add-on secondary colors)
+///
+/// Stronger hue variant used for text and icons shown against the secondary fixed color
+$on-secondary-fixed-variant: md-ref-palette.$secondary30;
+/// md.sys.color.on-surface (Surface colors)
+///
+/// Text and icons shown against the surface color
+$on-surface: md-ref-palette.$neutral90;
+/// md.sys.color.on-surface-variant (Surface colors)
+///
+/// For text and icons to indicate active or inactive component state
+$on-surface-variant: md-ref-palette.$neutral-variant80;
+/// md.sys.color.on-tertiary (Tertiary colors)
+///
+/// Text and icons shown against the tertiary color
+$on-tertiary: md-ref-palette.$tertiary20;
+/// md.sys.color.on-tertiary-container (Tertiary colors)
+///
+/// Contrast-passing color shown against the tertiary container
+$on-tertiary-container: md-ref-palette.$tertiary90;
+/// md.sys.color.on-tertiary-fixed (Add-ons / Add-on tertiary colors)
+///
+/// Used for text and icons shown against the tertiary fixed color
+$on-tertiary-fixed: md-ref-palette.$tertiary10;
+/// md.sys.color.on-tertiary-fixed-variant (Add-ons / Add-on tertiary colors)
+///
+/// Stronger hue variant used for text and icons shown against the tertiary fixed color
+$on-tertiary-fixed-variant: md-ref-palette.$tertiary30;
+/// md.sys.color.outline (Outline colors)
+///
+/// Subtle color used for boundaries
+$outline: md-ref-palette.$neutral-variant60;
+/// md.sys.color.outline-variant (Outline colors)
+///
+/// Outline-variant is used to define the border of a component where 3:1 contrast ratio isn’t required, a container, or a divider.
+$outline-variant: md-ref-palette.$neutral-variant30;
+/// md.sys.color.primary (Primary colors)
+///
+/// Main color used across screens and components
+$primary: md-ref-palette.$primary80;
+/// md.sys.color.primary-container (Primary colors)
+///
+/// Standout container color for key components
+$primary-container: md-ref-palette.$primary30;
+/// md.sys.color.primary-fixed (Add-ons / Add-on primary colors)
+///
+/// Primary color that doesn't change for light or dark theme.
+$primary-fixed: md-ref-palette.$primary90;
+/// md.sys.color.primary-fixed-dim (Add-ons / Add-on primary colors)
+///
+/// Dimmer version of primary fixed color that doesn't change for light or dark theme.
+$primary-fixed-dim: md-ref-palette.$primary80;
+/// md.sys.color.scrim (Add-ons / Add-on surface colors)
+///
+/// Used for scrims which help separate floating components from the background.
+$scrim: md-ref-palette.$neutral0;
+/// md.sys.color.secondary (Secondary colors)
+///
+/// Accent color used across screens and components
+$secondary: md-ref-palette.$secondary80;
+/// md.sys.color.secondary-container (Secondary colors)
+///
+/// Less prominent container color, for components like tonal buttons
+$secondary-container: md-ref-palette.$secondary30;
+/// md.sys.color.secondary-fixed (Add-ons / Add-on secondary colors)
+///
+/// Secondary color that doesn't change for light or dark theme.
+$secondary-fixed: md-ref-palette.$secondary90;
+/// md.sys.color.secondary-fixed-dim (Add-ons / Add-on secondary colors)
+///
+/// Dimmer version of secondary fixed color that doesn't change for light or dark theme.
+$secondary-fixed-dim: md-ref-palette.$secondary80;
+/// md.sys.color.shadow (Add-ons / Add-on surface colors)
+///
+/// For shadows applied to elevated components
+$shadow: md-ref-palette.$neutral0;
+/// md.sys.color.surface (Surface colors)
+///
+/// Surface color for components like cards, sheets, and menus
+$surface: md-ref-palette.$neutral6;
+/// md.sys.color.surface-bright (Add-ons / Add-on surface colors)
+///
+/// Surface that is brighter in both light and dark theme.
+$surface-bright: md-ref-palette.$neutral24;
+/// md.sys.color.surface-container (Surface colors)
+$surface-container: md-ref-palette.$neutral12;
+/// md.sys.color.surface-container-high (Surface colors)
+$surface-container-high: md-ref-palette.$neutral17;
+/// md.sys.color.surface-container-highest (Surface colors)
+$surface-container-highest: md-ref-palette.$neutral22;
+/// md.sys.color.surface-container-low (Surface colors)
+$surface-container-low: md-ref-palette.$neutral10;
+/// md.sys.color.surface-container-lowest (Surface colors)
+$surface-container-lowest: md-ref-palette.$neutral4;
+/// md.sys.color.surface-dim (Add-ons / Add-on surface colors)
+///
+/// Surface that is dimmer in both light and dark theme.
+$surface-dim: md-ref-palette.$neutral6;
+/// md.sys.color.surface-variant (Surface colors)
+///
+/// Alternate surface color, can be used for active states
+$surface-variant: md-ref-palette.$neutral-variant30;
+/// md.sys.color.tertiary (Tertiary colors)
+///
+/// Contrasting accent color used across screens and components
+$tertiary: md-ref-palette.$tertiary80;
+/// md.sys.color.tertiary-container (Tertiary colors)
+///
+/// Contrasting container color, for components like input fields
+$tertiary-container: md-ref-palette.$tertiary30;
+/// md.sys.color.tertiary-fixed (Add-ons / Add-on tertiary colors)
+///
+/// Tertiary color that doesn't change for light or dark theme.
+$tertiary-fixed: md-ref-palette.$tertiary90;
+/// md.sys.color.tertiary-fixed-dim (Add-ons / Add-on tertiary colors)
+///
+/// Dimmer version of tertiary fixed color that doesn't change for light or dark theme.
+$tertiary-fixed-dim: md-ref-palette.$tertiary80;
+/// md.sys.color.surface-tint (Surface colors)
+///
+/// @deprecated This token should no longer be used and its function/usage has been replaced by the tonal surface colors
+$surface-tint: $primary;
+/// md.sys.color.surface-tint-color (Surface colors)
+///
+/// @deprecated Please replace with md.sys.color.surface-tint. Token deprecated to align naming convention with other color roles by remove `color` from the role name
+$surface-tint-color: $primary;

package/tokens/versions/v30_0/sass/_md-sys-color__dark__high-contrast.scss

@@ -0,0 +1,209 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// AUTOGENERATED. DO NOT MODIFY.
+// To modify this file, update the source template,
+// or run the compiler: go/carbon-service-code-gen-mwtc.
+// Source template: sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 30.0.14
+// Configured context tags:
+//   audience: 3p
+//   font: static
+//   platform: web
+// Output format: sass_vars
+
+@use 'md-ref-palette';
+
+/// md.sys.color.background (Add-ons / Add-on surface colors)
+///
+/// Note: Background is a legacy color role. It is recommended to use Surface instead of Background.
+$background: md-ref-palette.$neutral6;
+/// md.sys.color.error (Error colors)
+///
+/// Indicates errors, such as invalid input in a date picker
+$error: md-ref-palette.$error95;
+/// md.sys.color.error-container (Error colors)
+///
+/// Container color for error messages and badges
+$error-container: md-ref-palette.$error80;
+/// md.sys.color.inverse-on-surface (Surface colors)
+///
+/// Used for text and icons shown against the inverse surface color
+$inverse-on-surface: md-ref-palette.$neutral0;
+/// md.sys.color.inverse-primary (Add-ons / Add-on primary colors)
+///
+/// Displays opposite of the primary color
+$inverse-primary: md-ref-palette.$primary20;
+/// md.sys.color.inverse-surface (Surface colors)
+///
+/// Displays opposite color of the surrounding UI
+$inverse-surface: md-ref-palette.$neutral90;
+/// md.sys.color.on-background (Add-ons / Add-on surface colors)
+///
+/// Used for text and icons shown against the background color
+$on-background: md-ref-palette.$neutral100;
+/// md.sys.color.on-error (Error colors)
+///
+/// Used for text and icons on the error color
+$on-error: md-ref-palette.$error0;
+/// md.sys.color.on-error-container (Error colors)
+///
+/// Used for text and icons on the error-container color
+$on-error-container: md-ref-palette.$error0;
+/// md.sys.color.on-primary (Primary colors)
+///
+/// Text and icons shown against the primary color
+$on-primary: md-ref-palette.$primary0;
+/// md.sys.color.on-primary-container (Primary colors)
+///
+/// Contrast-passing color shown against the primary container
+$on-primary-container: md-ref-palette.$primary0;
+/// md.sys.color.on-primary-fixed (Add-ons / Add-on primary colors)
+///
+/// Used for text and icons shown against the primary fixed color
+$on-primary-fixed: md-ref-palette.$primary0;
+/// md.sys.color.on-primary-fixed-variant (Add-ons / Add-on primary colors)
+///
+/// Stronger hue variant used for text and icons shown against the primary fixed color
+$on-primary-fixed-variant: md-ref-palette.$primary0;
+/// md.sys.color.on-secondary (Secondary colors)
+///
+/// Text and icons shown against the secondary color
+$on-secondary: md-ref-palette.$secondary0;
+/// md.sys.color.on-secondary-container (Secondary colors)
+///
+/// Contrast-passing color shown against the secondary container
+$on-secondary-container: md-ref-palette.$secondary0;
+/// md.sys.color.on-secondary-fixed (Add-ons / Add-on secondary colors)
+///
+/// Used for text and icons shown against the secondary fixed color
+$on-secondary-fixed: md-ref-palette.$secondary0;
+/// md.sys.color.on-secondary-fixed-variant (Add-ons / Add-on secondary colors)
+///
+/// Stronger hue variant used for text and icons shown against the secondary fixed color
+$on-secondary-fixed-variant: md-ref-palette.$secondary0;
+/// md.sys.color.on-surface (Surface colors)
+///
+/// Text and icons shown against the surface color
+$on-surface: md-ref-palette.$neutral100;
+/// md.sys.color.on-surface-variant (Surface colors)
+///
+/// For text and icons to indicate active or inactive component state
+$on-surface-variant: md-ref-palette.$neutral-variant100;
+/// md.sys.color.on-tertiary (Tertiary colors)
+///
+/// Text and icons shown against the tertiary color
+$on-tertiary: md-ref-palette.$tertiary0;
+/// md.sys.color.on-tertiary-container (Tertiary colors)
+///
+/// Contrast-passing color shown against the tertiary container
+$on-tertiary-container: md-ref-palette.$tertiary0;
+/// md.sys.color.on-tertiary-fixed (Add-ons / Add-on tertiary colors)
+///
+/// Used for text and icons shown against the tertiary fixed color
+$on-tertiary-fixed: md-ref-palette.$tertiary0;
+/// md.sys.color.on-tertiary-fixed-variant (Add-ons / Add-on tertiary colors)
+///
+/// Stronger hue variant used for text and icons shown against the tertiary fixed color
+$on-tertiary-fixed-variant: md-ref-palette.$tertiary0;
+/// md.sys.color.outline (Outline colors)
+///
+/// Subtle color used for boundaries
+$outline: md-ref-palette.$neutral-variant95;
+/// md.sys.color.outline-variant (Outline colors)
+///
+/// Outline-variant is used to define the border of a component where 3:1 contrast ratio isn’t required, a container, or a divider.
+$outline-variant: md-ref-palette.$neutral-variant80;
+/// md.sys.color.primary (Primary colors)
+///
+/// Main color used across screens and components
+$primary: md-ref-palette.$primary95;
+/// md.sys.color.primary-container (Primary colors)
+///
+/// Standout container color for key components
+$primary-container: md-ref-palette.$primary80;
+/// md.sys.color.primary-fixed (Add-ons / Add-on primary colors)
+///
+/// Primary color that doesn't change for light or dark theme.
+$primary-fixed: md-ref-palette.$primary90;
+/// md.sys.color.primary-fixed-dim (Add-ons / Add-on primary colors)
+///
+/// Dimmer version of primary fixed color that doesn't change for light or dark theme.
+$primary-fixed-dim: md-ref-palette.$primary80;
+/// md.sys.color.scrim (Add-ons / Add-on surface colors)
+///
+/// Used for scrims which help separate floating components from the background.
+$scrim: md-ref-palette.$neutral0;
+/// md.sys.color.secondary (Secondary colors)
+///
+/// Accent color used across screens and components
+$secondary: md-ref-palette.$secondary95;
+/// md.sys.color.secondary-container (Secondary colors)
+///
+/// Less prominent container color, for components like tonal buttons
+$secondary-container: md-ref-palette.$secondary80;
+/// md.sys.color.secondary-fixed (Add-ons / Add-on secondary colors)
+///
+/// Secondary color that doesn't change for light or dark theme.
+$secondary-fixed: md-ref-palette.$secondary90;
+/// md.sys.color.secondary-fixed-dim (Add-ons / Add-on secondary colors)
+///
+/// Dimmer version of secondary fixed color that doesn't change for light or dark theme.
+$secondary-fixed-dim: md-ref-palette.$secondary80;
+/// md.sys.color.shadow (Add-ons / Add-on surface colors)
+///
+/// For shadows applied to elevated components
+$shadow: md-ref-palette.$neutral0;
+/// md.sys.color.surface (Surface colors)
+///
+/// Surface color for components like cards, sheets, and menus
+$surface: md-ref-palette.$neutral6;
+/// md.sys.color.surface-bright (Add-ons / Add-on surface colors)
+///
+/// Surface that is brighter in both light and dark theme.
+$surface-bright: md-ref-palette.$neutral24;
+/// md.sys.color.surface-container (Surface colors)
+$surface-container: md-ref-palette.$neutral12;
+/// md.sys.color.surface-container-high (Surface colors)
+$surface-container-high: md-ref-palette.$neutral17;
+/// md.sys.color.surface-container-highest (Surface colors)
+$surface-container-highest: md-ref-palette.$neutral22;
+/// md.sys.color.surface-container-low (Surface colors)
+$surface-container-low: md-ref-palette.$neutral10;
+/// md.sys.color.surface-container-lowest (Surface colors)
+$surface-container-lowest: md-ref-palette.$neutral4;
+/// md.sys.color.surface-dim (Add-ons / Add-on surface colors)
+///
+/// Surface that is dimmer in both light and dark theme.
+$surface-dim: md-ref-palette.$neutral6;
+/// md.sys.color.surface-variant (Surface colors)
+///
+/// Alternate surface color, can be used for active states
+$surface-variant: md-ref-palette.$neutral-variant30;
+/// md.sys.color.tertiary (Tertiary colors)
+///
+/// Contrasting accent color used across screens and components
+$tertiary: md-ref-palette.$tertiary95;
+/// md.sys.color.tertiary-container (Tertiary colors)
+///
+/// Contrasting container color, for components like input fields
+$tertiary-container: md-ref-palette.$tertiary80;
+/// md.sys.color.tertiary-fixed (Add-ons / Add-on tertiary colors)
+///
+/// Tertiary color that doesn't change for light or dark theme.
+$tertiary-fixed: md-ref-palette.$tertiary90;
+/// md.sys.color.tertiary-fixed-dim (Add-ons / Add-on tertiary colors)
+///
+/// Dimmer version of tertiary fixed color that doesn't change for light or dark theme.
+$tertiary-fixed-dim: md-ref-palette.$tertiary80;
+/// md.sys.color.surface-tint (Surface colors)
+///
+/// @deprecated This token should no longer be used and its function/usage has been replaced by the tonal surface colors
+$surface-tint: $primary;
+/// md.sys.color.surface-tint-color (Surface colors)
+///
+/// @deprecated Please replace with md.sys.color.surface-tint. Token deprecated to align naming convention with other color roles by remove `color` from the role name
+$surface-tint-color: $primary;