@maicol07/material-web 2.2.0 → 2.5.0

package/tokens/versions/latest/sass/_md-outlined-icon-button.scss

@@ -0,0 +1,166 @@
+//
+// 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: formats/sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 34.0.21
+// Configured context tags:
+//   audience: 3p
+//   font: static
+//   platform: web
+// Output format: sass_vars
+
+@use 'md-sys-color';
+@use 'md-sys-shape';
+@use 'md-sys-state';
+@use 'md-sys-state-focus-indicator';
+
+/// md.outlined-icon-button.container.height ([Deprecated] Enabled / [Deprecated] Container)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.icon-button.outlined or md.comp.icon-button.(size) set instead.
+$container-height: 40px;
+/// md.outlined-icon-button.container.size ([Deprecated] Enabled / [Deprecated] Container)
+///
+/// @deprecated Deprecating in place of width and height tokens
+$container-size: 40px;
+/// md.outlined-icon-button.container.width ([Deprecated] Enabled / [Deprecated] Container)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.icon-button.outlined or md.comp.icon-button.(size) set instead.
+$container-width: 40px;
+/// md.outlined-icon-button.disabled.icon.opacity ([Deprecated] Disabled / [Deprecated] Icon)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.icon-button.outlined or md.comp.icon-button.(size) set instead.
+$disabled-icon-opacity: 0.38;
+/// md.outlined-icon-button.disabled.outline.opacity ([Deprecated] Disabled / [Deprecated] Outline)
+///
+/// @deprecated As per spec the outlined icon buttons do use a different disabled style between selected and unselected. Use newly added "selected." and "unselected." tokens instead.
+$disabled-outline-opacity: 0.12;
+/// md.outlined-icon-button.disabled.selected.container.opacity ([Deprecated] Disabled / [Deprecated] Container)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.icon-button.outlined or md.comp.icon-button.(size) set instead.
+$disabled-selected-container-opacity: 0.12;
+/// md.outlined-icon-button.disabled.unselected.outline.opacity ([Deprecated] Disabled / [Deprecated] Outline)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.icon-button.outlined or md.comp.icon-button.(size) set instead.
+$disabled-unselected-outline-opacity: 0.12;
+/// md.outlined-icon-button.icon.size ([Deprecated] Enabled / [Deprecated] Icon)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.icon-button.outlined or md.comp.icon-button.(size) set instead.
+$icon-size: 24px;
+/// md.outlined-icon-button.unselected.outline.width ([Deprecated] Enabled / [Deprecated] Outline)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.icon-button.outlined or md.comp.icon-button.(size) set instead.
+$unselected-outline-width: 1px;
+/// md.outlined-icon-button.container.shape ([Deprecated] Enabled / [Deprecated] Container)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.icon-button.outlined or md.comp.icon-button.(size) set instead.
+$container-shape: md-sys-shape.$corner-full;
+/// md.outlined-icon-button.disabled.icon.color ([Deprecated] Disabled / [Deprecated] Icon)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.icon-button.outlined or md.comp.icon-button.(size) set instead.
+$disabled-icon-color: md-sys-color.$on-surface;
+/// md.outlined-icon-button.disabled.outline.color ([Deprecated] Disabled / [Deprecated] Outline)
+///
+/// @deprecated As per spec the outlined icon buttons do use a different disabled style between selected and unselected. Use newly added "selected." and "unselected." tokens instead.
+$disabled-outline-color: md-sys-color.$on-surface;
+/// md.outlined-icon-button.disabled.selected.container.color ([Deprecated] Disabled / [Deprecated] Container)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.icon-button.outlined or md.comp.icon-button.(size) set instead.
+$disabled-selected-container-color: md-sys-color.$on-surface;
+/// md.outlined-icon-button.disabled.unselected.outline.color ([Deprecated] Disabled / [Deprecated] Outline)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.icon-button.outlined or md.comp.icon-button.(size) set instead.
+$disabled-unselected-outline-color: md-sys-color.$on-surface;
+/// md.outlined-icon-button.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.icon-button.outlined or md.comp.icon-button.(size) set instead.
+$focus-indicator-color: md-sys-color.$secondary;
+/// md.outlined-icon-button.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.icon-button.outlined or md.comp.icon-button.(size) set instead.
+$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;
+/// md.outlined-icon-button.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.icon-button.outlined or md.comp.icon-button.(size) set instead.
+$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;
+/// md.outlined-icon-button.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.icon-button.outlined or md.comp.icon-button.(size) set instead.
+$focus-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.outlined-icon-button.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.icon-button.outlined or md.comp.icon-button.(size) set instead.
+$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.outlined-icon-button.pressed.state-layer.opacity ([Deprecated] Pressed (ripple) / [Deprecated] State layer)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.icon-button.outlined or md.comp.icon-button.(size) set instead.
+$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.outlined-icon-button.selected.container.color ([Deprecated] Enabled / [Deprecated] Container)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.icon-button.outlined or md.comp.icon-button.(size) set instead.
+$selected-container-color: md-sys-color.$inverse-surface;
+/// md.outlined-icon-button.selected.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.icon-button.outlined or md.comp.icon-button.(size) set instead.
+$selected-focus-icon-color: md-sys-color.$inverse-on-surface;
+/// md.outlined-icon-button.selected.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.icon-button.outlined or md.comp.icon-button.(size) set instead.
+$selected-focus-state-layer-color: md-sys-color.$inverse-on-surface;
+/// md.outlined-icon-button.selected.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.icon-button.outlined or md.comp.icon-button.(size) set instead.
+$selected-hover-icon-color: md-sys-color.$inverse-on-surface;
+/// md.outlined-icon-button.selected.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.icon-button.outlined or md.comp.icon-button.(size) set instead.
+$selected-hover-state-layer-color: md-sys-color.$inverse-on-surface;
+/// md.outlined-icon-button.selected.icon.color ([Deprecated] Enabled / [Deprecated] Icon)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.icon-button.outlined or md.comp.icon-button.(size) set instead.
+$selected-icon-color: md-sys-color.$inverse-on-surface;
+/// md.outlined-icon-button.selected.pressed.icon.color ([Deprecated] Pressed (ripple) / Icon)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.icon-button.outlined or md.comp.icon-button.(size) set instead.
+$selected-pressed-icon-color: md-sys-color.$inverse-on-surface;
+/// md.outlined-icon-button.selected.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.icon-button.outlined or md.comp.icon-button.(size) set instead.
+$selected-pressed-state-layer-color: md-sys-color.$inverse-on-surface;
+/// md.outlined-icon-button.unselected.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.icon-button.outlined or md.comp.icon-button.(size) set instead.
+$unselected-focus-icon-color: md-sys-color.$on-surface-variant;
+/// md.outlined-icon-button.unselected.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.icon-button.outlined or md.comp.icon-button.(size) set instead.
+$unselected-focus-state-layer-color: md-sys-color.$on-surface-variant;
+/// md.outlined-icon-button.unselected.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.icon-button.outlined or md.comp.icon-button.(size) set instead.
+$unselected-hover-icon-color: md-sys-color.$on-surface-variant;
+/// md.outlined-icon-button.unselected.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.icon-button.outlined or md.comp.icon-button.(size) set instead.
+$unselected-hover-state-layer-color: md-sys-color.$on-surface-variant;
+/// md.outlined-icon-button.unselected.icon.color ([Deprecated] Enabled / [Deprecated] Icon)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.icon-button.outlined or md.comp.icon-button.(size) set instead.
+$unselected-icon-color: md-sys-color.$on-surface-variant;
+/// md.outlined-icon-button.unselected.outline.color ([Deprecated] Enabled / [Deprecated] Outline)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.icon-button.outlined or md.comp.icon-button.(size) set instead.
+$unselected-outline-color: md-sys-color.$outline;
+/// md.outlined-icon-button.unselected.pressed.icon.color ([Deprecated] Pressed (ripple) / Icon)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.icon-button.outlined or md.comp.icon-button.(size) set instead.
+$unselected-pressed-icon-color: md-sys-color.$on-surface;
+/// md.outlined-icon-button.unselected.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.icon-button.outlined or md.comp.icon-button.(size) set instead.
+$unselected-pressed-state-layer-color: md-sys-color.$on-surface;

package/tokens/versions/latest/sass/_md-ref-palette.scss

@@ -0,0 +1,495 @@
+//
+// 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: formats/sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 34.0.21
+// Configured context tags:
+//   audience: 3p
+//   font: static
+//   platform: web
+// Output format: sass_vars
+
+/// md.ref.palette.black (Static palette / Static – Black white)
+$black: #000;
+/// md.ref.palette.blue-variant0 (Static palette / Static – Blue variant)
+$blue-variant0: #000;
+/// md.ref.palette.blue-variant10 (Static palette / Static – Blue variant)
+$blue-variant10: #001f2d;
+/// md.ref.palette.blue-variant100 (Static palette / Static – Blue variant)
+$blue-variant100: #fff;
+/// md.ref.palette.blue-variant20 (Static palette / Static – Blue variant)
+$blue-variant20: #003549;
+/// md.ref.palette.blue-variant30 (Static palette / Static – Blue variant)
+$blue-variant30: #004d68;
+/// md.ref.palette.blue-variant40 (Static palette / Static – Blue variant)
+$blue-variant40: #006788;
+/// md.ref.palette.blue-variant50 (Static palette / Static – Blue variant)
+$blue-variant50: #0081a8;
+/// md.ref.palette.blue-variant60 (Static palette / Static – Blue variant)
+$blue-variant60: #009dc9;
+/// md.ref.palette.blue-variant70 (Static palette / Static – Blue variant)
+$blue-variant70: #00bbea;
+/// md.ref.palette.blue-variant80 (Static palette / Static – Blue variant)
+$blue-variant80: #67d4ff;
+/// md.ref.palette.blue-variant90 (Static palette / Static – Blue variant)
+$blue-variant90: #bde9ff;
+/// md.ref.palette.blue-variant95 (Static palette / Static – Blue variant)
+$blue-variant95: #e0f4ff;
+/// md.ref.palette.blue-variant98 (Static palette / Static – Blue variant)
+$blue-variant98: #f4faff;
+/// md.ref.palette.blue0 (Static palette / Static – Blue)
+$blue0: #000;
+/// md.ref.palette.blue10 (Static palette / Static – Blue)
+$blue10: #001944;
+/// md.ref.palette.blue100 (Static palette / Static – Blue)
+$blue100: #fff;
+/// md.ref.palette.blue20 (Static palette / Static – Blue)
+$blue20: #012c6f;
+/// md.ref.palette.blue30 (Static palette / Static – Blue)
+$blue30: #04409f;
+/// md.ref.palette.blue40 (Static palette / Static – Blue)
+$blue40: #1157ce;
+/// md.ref.palette.blue50 (Static palette / Static – Blue)
+$blue50: #3271ea;
+/// md.ref.palette.blue60 (Static palette / Static – Blue)
+$blue60: #4e8ff8;
+/// md.ref.palette.blue70 (Static palette / Static – Blue)
+$blue70: #76acff;
+/// md.ref.palette.blue80 (Static palette / Static – Blue)
+$blue80: #a1c9ff;
+/// md.ref.palette.blue90 (Static palette / Static – Blue)
+$blue90: #d0e4ff;
+/// md.ref.palette.blue95 (Static palette / Static – Blue)
+$blue95: #e7f2ff;
+/// md.ref.palette.blue98 (Static palette / Static – Blue)
+$blue98: #f5faff;
+/// md.ref.palette.cyan0 (Static palette / Static – Cyan)
+$cyan0: #000;
+/// md.ref.palette.cyan10 (Static palette / Static – Cyan)
+$cyan10: #001f26;
+/// md.ref.palette.cyan100 (Static palette / Static – Cyan)
+$cyan100: #fff;
+/// md.ref.palette.cyan20 (Static palette / Static – Cyan)
+$cyan20: #003641;
+/// md.ref.palette.cyan30 (Static palette / Static – Cyan)
+$cyan30: #004e5d;
+/// md.ref.palette.cyan40 (Static palette / Static – Cyan)
+$cyan40: #00687c;
+/// md.ref.palette.cyan50 (Static palette / Static – Cyan)
+$cyan50: #00839b;
+/// md.ref.palette.cyan60 (Static palette / Static – Cyan)
+$cyan60: #009ebb;
+/// md.ref.palette.cyan70 (Static palette / Static – Cyan)
+$cyan70: #00bbdf;
+/// md.ref.palette.cyan80 (Static palette / Static – Cyan)
+$cyan80: #60d5f3;
+/// md.ref.palette.cyan90 (Static palette / Static – Cyan)
+$cyan90: #acedff;
+/// md.ref.palette.cyan95 (Static palette / Static – Cyan)
+$cyan95: #d8f6ff;
+/// md.ref.palette.cyan98 (Static palette / Static – Cyan)
+$cyan98: #f0fbff;
+/// md.ref.palette.error0 (Baseline palette / Baseline – Error)
+$error0: #000;
+/// md.ref.palette.error10 (Baseline palette / Baseline – Error)
+$error10: #410e0b;
+/// md.ref.palette.error100 (Baseline palette / Baseline – Error)
+$error100: #fff;
+/// md.ref.palette.error20 (Baseline palette / Baseline – Error)
+$error20: #601410;
+/// md.ref.palette.error30 (Baseline palette / Baseline – Error)
+$error30: #8c1d18;
+/// md.ref.palette.error40 (Baseline palette / Baseline – Error)
+$error40: #b3261e;
+/// md.ref.palette.error50 (Baseline palette / Baseline – Error)
+$error50: #dc362e;
+/// md.ref.palette.error60 (Baseline palette / Baseline – Error)
+$error60: #e46962;
+/// md.ref.palette.error70 (Baseline palette / Baseline – Error)
+$error70: #ec928e;
+/// md.ref.palette.error80 (Baseline palette / Baseline – Error)
+$error80: #f2b8b5;
+/// md.ref.palette.error90 (Baseline palette / Baseline – Error)
+$error90: #f9dedc;
+/// md.ref.palette.error95 (Baseline palette / Baseline – Error)
+$error95: #fceeee;
+/// md.ref.palette.error98 (Baseline palette / Baseline – Error)
+$error98: #fff8f7;
+/// md.ref.palette.error99 (Baseline palette / Baseline – Error)
+$error99: #fffbf9;
+/// md.ref.palette.green0 (Static palette / Static – Green)
+$green0: #000;
+/// md.ref.palette.green10 (Static palette / Static – Green)
+$green10: #002110;
+/// md.ref.palette.green100 (Static palette / Static – Green)
+$green100: #fff;
+/// md.ref.palette.green20 (Static palette / Static – Green)
+$green20: #00381f;
+/// md.ref.palette.green30 (Static palette / Static – Green)
+$green30: #00522c;
+/// md.ref.palette.green40 (Static palette / Static – Green)
+$green40: #006c35;
+/// md.ref.palette.green50 (Static palette / Static – Green)
+$green50: #128937;
+/// md.ref.palette.green60 (Static palette / Static – Green)
+$green60: #1aa64a;
+/// md.ref.palette.green70 (Static palette / Static – Green)
+$green70: #44c265;
+/// md.ref.palette.green80 (Static palette / Static – Green)
+$green80: #80da88;
+/// md.ref.palette.green90 (Static palette / Static – Green)
+$green90: #beefbb;
+/// md.ref.palette.green95 (Static palette / Static – Green)
+$green95: #ddf8d8;
+/// md.ref.palette.green98 (Static palette / Static – Green)
+$green98: #f2fcef;
+/// md.ref.palette.grey-variant0 (Static palette / Static – Grey variant)
+$grey-variant0: #000;
+/// md.ref.palette.grey-variant10 (Static palette / Static – Grey variant)
+$grey-variant10: #191d1c;
+/// md.ref.palette.grey-variant100 (Static palette / Static – Grey variant)
+$grey-variant100: #fff;
+/// md.ref.palette.grey-variant20 (Static palette / Static – Grey variant)
+$grey-variant20: #2d312f;
+/// md.ref.palette.grey-variant30 (Static palette / Static – Grey variant)
+$grey-variant30: #444746;
+/// md.ref.palette.grey-variant40 (Static palette / Static – Grey variant)
+$grey-variant40: #5c5f5e;
+/// md.ref.palette.grey-variant50 (Static palette / Static – Grey variant)
+$grey-variant50: #747775;
+/// md.ref.palette.grey-variant60 (Static palette / Static – Grey variant)
+$grey-variant60: #8e918f;
+/// md.ref.palette.grey-variant70 (Static palette / Static – Grey variant)
+$grey-variant70: #a9acaa;
+/// md.ref.palette.grey-variant80 (Static palette / Static – Grey variant)
+$grey-variant80: #c4c7c5;
+/// md.ref.palette.grey-variant90 (Static palette / Static – Grey variant)
+$grey-variant90: #e1e3e1;
+/// md.ref.palette.grey-variant95 (Static palette / Static – Grey variant)
+$grey-variant95: #eff2ef;
+/// md.ref.palette.grey-variant98 (Static palette / Static – Grey variant)
+$grey-variant98: #f7faf7;
+/// md.ref.palette.grey0 (Static palette / Static – Grey)
+$grey0: #000;
+/// md.ref.palette.grey10 (Static palette / Static – Grey)
+$grey10: #1b1b1c;
+/// md.ref.palette.grey100 (Static palette / Static – Grey)
+$grey100: #fff;
+/// md.ref.palette.grey20 (Static palette / Static – Grey)
+$grey20: #303030;
+/// md.ref.palette.grey30 (Static palette / Static – Grey)
+$grey30: #474747;
+/// md.ref.palette.grey40 (Static palette / Static – Grey)
+$grey40: #5e5e5e;
+/// md.ref.palette.grey50 (Static palette / Static – Grey)
+$grey50: #777;
+/// md.ref.palette.grey60 (Static palette / Static – Grey)
+$grey60: #919191;
+/// md.ref.palette.grey70 (Static palette / Static – Grey)
+$grey70: #ababab;
+/// md.ref.palette.grey80 (Static palette / Static – Grey)
+$grey80: #c7c7c7;
+/// md.ref.palette.grey90 (Static palette / Static – Grey)
+$grey90: #e3e3e3;
+/// md.ref.palette.grey95 (Static palette / Static – Grey)
+$grey95: #f2f2f2;
+/// md.ref.palette.grey98 (Static palette / Static – Grey)
+$grey98: #f9f9f9;
+/// md.ref.palette.neutral-variant0 (Baseline palette / Baseline – Neutral variant)
+$neutral-variant0: #000;
+/// md.ref.palette.neutral-variant10 (Baseline palette / Baseline – Neutral variant)
+$neutral-variant10: #1d1a22;
+/// md.ref.palette.neutral-variant100 (Baseline palette / Baseline – Neutral variant)
+$neutral-variant100: #fff;
+/// md.ref.palette.neutral-variant20 (Baseline palette / Baseline – Neutral variant)
+$neutral-variant20: #322f37;
+/// md.ref.palette.neutral-variant30 (Baseline palette / Baseline – Neutral variant)
+$neutral-variant30: #49454f;
+/// md.ref.palette.neutral-variant40 (Baseline palette / Baseline – Neutral variant)
+$neutral-variant40: #605d66;
+/// md.ref.palette.neutral-variant50 (Baseline palette / Baseline – Neutral variant)
+$neutral-variant50: #79747e;
+/// md.ref.palette.neutral-variant60 (Baseline palette / Baseline – Neutral variant)
+$neutral-variant60: #938f99;
+/// md.ref.palette.neutral-variant70 (Baseline palette / Baseline – Neutral variant)
+$neutral-variant70: #aea9b4;
+/// md.ref.palette.neutral-variant80 (Baseline palette / Baseline – Neutral variant)
+$neutral-variant80: #cac4d0;
+/// md.ref.palette.neutral-variant90 (Baseline palette / Baseline – Neutral variant)
+$neutral-variant90: #e7e0ec;
+/// md.ref.palette.neutral-variant95 (Baseline palette / Baseline – Neutral variant)
+$neutral-variant95: #f5eefa;
+/// md.ref.palette.neutral-variant98 (Baseline palette / Baseline – Neutral variant)
+$neutral-variant98: #fdf7ff;
+/// md.ref.palette.neutral-variant99 (Baseline palette / Baseline – Neutral variant)
+$neutral-variant99: #fffbfe;
+/// md.ref.palette.neutral0 (Baseline palette / Baseline – Neutral)
+$neutral0: #000;
+/// md.ref.palette.neutral10 (Baseline palette / Baseline – Neutral)
+$neutral10: #1d1b20;
+/// md.ref.palette.neutral100 (Baseline palette / Baseline – Neutral)
+$neutral100: #fff;
+/// md.ref.palette.neutral12 (Baseline palette / Baseline – Neutral)
+$neutral12: #211f26;
+/// md.ref.palette.neutral17 (Baseline palette / Baseline – Neutral)
+$neutral17: #2b2930;
+/// md.ref.palette.neutral20 (Baseline palette / Baseline – Neutral)
+$neutral20: #322f35;
+/// md.ref.palette.neutral22 (Baseline palette / Baseline – Neutral)
+$neutral22: #36343b;
+/// md.ref.palette.neutral24 (Baseline palette / Baseline – Neutral)
+$neutral24: #3b383e;
+/// md.ref.palette.neutral30 (Baseline palette / Baseline – Neutral)
+$neutral30: #48464c;
+/// md.ref.palette.neutral4 (Baseline palette / Baseline – Neutral)
+$neutral4: #0f0d13;
+/// md.ref.palette.neutral40 (Baseline palette / Baseline – Neutral)
+$neutral40: #605d64;
+/// md.ref.palette.neutral50 (Baseline palette / Baseline – Neutral)
+$neutral50: #79767d;
+/// md.ref.palette.neutral6 (Baseline palette / Baseline – Neutral)
+$neutral6: #141218;
+/// md.ref.palette.neutral60 (Baseline palette / Baseline – Neutral)
+$neutral60: #938f96;
+/// md.ref.palette.neutral70 (Baseline palette / Baseline – Neutral)
+$neutral70: #aea9b1;
+/// md.ref.palette.neutral80 (Baseline palette / Baseline – Neutral)
+$neutral80: #cac5cd;
+/// md.ref.palette.neutral87 (Baseline palette / Baseline – Neutral)
+$neutral87: #ded8e1;
+/// md.ref.palette.neutral90 (Baseline palette / Baseline – Neutral)
+$neutral90: #e6e0e9;
+/// md.ref.palette.neutral92 (Baseline palette / Baseline – Neutral)
+$neutral92: #ece6f0;
+/// md.ref.palette.neutral94 (Baseline palette / Baseline – Neutral)
+$neutral94: #f3edf7;
+/// md.ref.palette.neutral95 (Baseline palette / Baseline – Neutral)
+$neutral95: #f5eff7;
+/// md.ref.palette.neutral96 (Baseline palette / Baseline – Neutral)
+$neutral96: #f7f2fa;
+/// md.ref.palette.neutral98 (Baseline palette / Baseline – Neutral)
+$neutral98: #fef7ff;
+/// md.ref.palette.neutral99 (Baseline palette / Baseline – Neutral)
+$neutral99: #fffbff;
+/// md.ref.palette.orange0 (Static palette / Static – Orange)
+$orange0: #000;
+/// md.ref.palette.orange10 (Static palette / Static – Orange)
+$orange10: #321200;
+/// md.ref.palette.orange100 (Static palette / Static – Orange)
+$orange100: #fff;
+/// md.ref.palette.orange20 (Static palette / Static – Orange)
+$orange20: #522302;
+/// md.ref.palette.orange30 (Static palette / Static – Orange)
+$orange30: #753403;
+/// md.ref.palette.orange40 (Static palette / Static – Orange)
+$orange40: #9a4600;
+/// md.ref.palette.orange50 (Static palette / Static – Orange)
+$orange50: #c05a01;
+/// md.ref.palette.orange60 (Static palette / Static – Orange)
+$orange60: #e86e00;
+/// md.ref.palette.orange70 (Static palette / Static – Orange)
+$orange70: #ff8d41;
+/// md.ref.palette.orange80 (Static palette / Static – Orange)
+$orange80: #ffb683;
+/// md.ref.palette.orange90 (Static palette / Static – Orange)
+$orange90: #ffdcc3;
+/// md.ref.palette.orange95 (Static palette / Static – Orange)
+$orange95: #ffede1;
+/// md.ref.palette.orange98 (Static palette / Static – Orange)
+$orange98: #fff8f4;
+/// md.ref.palette.pink0 (Static palette / Static – Pink)
+$pink0: #000;
+/// md.ref.palette.pink10 (Static palette / Static – Pink)
+$pink10: #3d0023;
+/// md.ref.palette.pink100 (Static palette / Static – Pink)
+$pink100: #fff;
+/// md.ref.palette.pink20 (Static palette / Static – Pink)
+$pink20: #620438;
+/// md.ref.palette.pink30 (Static palette / Static – Pink)
+$pink30: #8d0053;
+/// md.ref.palette.pink40 (Static palette / Static – Pink)
+$pink40: #b60d6e;
+/// md.ref.palette.pink50 (Static palette / Static – Pink)
+$pink50: #dc258d;
+/// md.ref.palette.pink60 (Static palette / Static – Pink)
+$pink60: #f94aab;
+/// md.ref.palette.pink70 (Static palette / Static – Pink)
+$pink70: #ff7dd2;
+/// md.ref.palette.pink80 (Static palette / Static – Pink)
+$pink80: #ffaee4;
+/// md.ref.palette.pink90 (Static palette / Static – Pink)
+$pink90: #ffd8ef;
+/// md.ref.palette.pink95 (Static palette / Static – Pink)
+$pink95: #ffecf6;
+/// md.ref.palette.pink98 (Static palette / Static – Pink)
+$pink98: #fff7fc;
+/// md.ref.palette.primary0 (Baseline palette / Baseline – Primary)
+$primary0: #000;
+/// md.ref.palette.primary10 (Baseline palette / Baseline – Primary)
+$primary10: #21005d;
+/// md.ref.palette.primary100 (Baseline palette / Baseline – Primary)
+$primary100: #fff;
+/// md.ref.palette.primary20 (Baseline palette / Baseline – Primary)
+$primary20: #381e72;
+/// md.ref.palette.primary30 (Baseline palette / Baseline – Primary)
+$primary30: #4f378b;
+/// md.ref.palette.primary40 (Baseline palette / Baseline – Primary)
+$primary40: #6750a4;
+/// md.ref.palette.primary50 (Baseline palette / Baseline – Primary)
+$primary50: #7f67be;
+/// md.ref.palette.primary60 (Baseline palette / Baseline – Primary)
+$primary60: #9a82db;
+/// md.ref.palette.primary70 (Baseline palette / Baseline – Primary)
+$primary70: #b69df8;
+/// md.ref.palette.primary80 (Baseline palette / Baseline – Primary)
+$primary80: #d0bcff;
+/// md.ref.palette.primary90 (Baseline palette / Baseline – Primary)
+$primary90: #eaddff;
+/// md.ref.palette.primary95 (Baseline palette / Baseline – Primary)
+$primary95: #f6edff;
+/// md.ref.palette.primary98 (Baseline palette / Baseline – Primary)
+$primary98: #fef7ff;
+/// md.ref.palette.primary99 (Baseline palette / Baseline – Primary)
+$primary99: #fffbfe;
+/// md.ref.palette.purple0 (Static palette / Static – Purple)
+$purple0: #000;
+/// md.ref.palette.purple10 (Static palette / Static – Purple)
+$purple10: #280255;
+/// md.ref.palette.purple100 (Static palette / Static – Purple)
+$purple100: #fff;
+/// md.ref.palette.purple20 (Static palette / Static – Purple)
+$purple20: #400b84;
+/// md.ref.palette.purple30 (Static palette / Static – Purple)
+$purple30: #5629a4;
+/// md.ref.palette.purple40 (Static palette / Static – Purple)
+$purple40: #7438d2;
+/// md.ref.palette.purple50 (Static palette / Static – Purple)
+$purple50: #9254ea;
+/// md.ref.palette.purple60 (Static palette / Static – Purple)
+$purple60: #ad72ff;
+/// md.ref.palette.purple70 (Static palette / Static – Purple)
+$purple70: #c597ff;
+/// md.ref.palette.purple80 (Static palette / Static – Purple)
+$purple80: #d9bafd;
+/// md.ref.palette.purple90 (Static palette / Static – Purple)
+$purple90: #eedcfe;
+/// md.ref.palette.purple95 (Static palette / Static – Purple)
+$purple95: #f7ecfe;
+/// md.ref.palette.purple98 (Static palette / Static – Purple)
+$purple98: #fdf8ff;
+/// md.ref.palette.red0 (Static palette / Static – Red)
+$red0: #000;
+/// md.ref.palette.red10 (Static palette / Static – Red)
+$red10: #3a0907;
+/// md.ref.palette.red100 (Static palette / Static – Red)
+$red100: #fff;
+/// md.ref.palette.red20 (Static palette / Static – Red)
+$red20: #60150f;
+/// md.ref.palette.red30 (Static palette / Static – Red)
+$red30: #8a1a16;
+/// md.ref.palette.red40 (Static palette / Static – Red)
+$red40: #b3251e;
+/// md.ref.palette.red50 (Static palette / Static – Red)
+$red50: #db372d;
+/// md.ref.palette.red60 (Static palette / Static – Red)
+$red60: #f55e57;
+/// md.ref.palette.red70 (Static palette / Static – Red)
+$red70: #ff8983;
+/// md.ref.palette.red80 (Static palette / Static – Red)
+$red80: #ffb3ae;
+/// md.ref.palette.red90 (Static palette / Static – Red)
+$red90: #ffdadc;
+/// md.ref.palette.red95 (Static palette / Static – Red)
+$red95: #ffecee;
+/// md.ref.palette.red98 (Static palette / Static – Red)
+$red98: #fff8f8;
+/// md.ref.palette.secondary0 (Baseline palette / Baseline – Secondary)
+$secondary0: #000;
+/// md.ref.palette.secondary10 (Baseline palette / Baseline – Secondary)
+$secondary10: #1d192b;
+/// md.ref.palette.secondary100 (Baseline palette / Baseline – Secondary)
+$secondary100: #fff;
+/// md.ref.palette.secondary20 (Baseline palette / Baseline – Secondary)
+$secondary20: #332d41;
+/// md.ref.palette.secondary30 (Baseline palette / Baseline – Secondary)
+$secondary30: #4a4458;
+/// md.ref.palette.secondary40 (Baseline palette / Baseline – Secondary)
+$secondary40: #625b71;
+/// md.ref.palette.secondary50 (Baseline palette / Baseline – Secondary)
+$secondary50: #7a7289;
+/// md.ref.palette.secondary60 (Baseline palette / Baseline – Secondary)
+$secondary60: #958da5;
+/// md.ref.palette.secondary70 (Baseline palette / Baseline – Secondary)
+$secondary70: #b0a7c0;
+/// md.ref.palette.secondary80 (Baseline palette / Baseline – Secondary)
+$secondary80: #ccc2dc;
+/// md.ref.palette.secondary90 (Baseline palette / Baseline – Secondary)
+$secondary90: #e8def8;
+/// md.ref.palette.secondary95 (Baseline palette / Baseline – Secondary)
+$secondary95: #f6edff;
+/// md.ref.palette.secondary98 (Baseline palette / Baseline – Secondary)
+$secondary98: #fef7ff;
+/// md.ref.palette.secondary99 (Baseline palette / Baseline – Secondary)
+$secondary99: #fffbfe;
+/// md.ref.palette.tertiary0 (Baseline palette / Baseline – Tertiary)
+$tertiary0: #000;
+/// md.ref.palette.tertiary10 (Baseline palette / Baseline – Tertiary)
+$tertiary10: #31111d;
+/// md.ref.palette.tertiary100 (Baseline palette / Baseline – Tertiary)
+$tertiary100: #fff;
+/// md.ref.palette.tertiary20 (Baseline palette / Baseline – Tertiary)
+$tertiary20: #492532;
+/// md.ref.palette.tertiary30 (Baseline palette / Baseline – Tertiary)
+$tertiary30: #633b48;
+/// md.ref.palette.tertiary40 (Baseline palette / Baseline – Tertiary)
+$tertiary40: #7d5260;
+/// md.ref.palette.tertiary50 (Baseline palette / Baseline – Tertiary)
+$tertiary50: #986977;
+/// md.ref.palette.tertiary60 (Baseline palette / Baseline – Tertiary)
+$tertiary60: #b58392;
+/// md.ref.palette.tertiary70 (Baseline palette / Baseline – Tertiary)
+$tertiary70: #d29dac;
+/// md.ref.palette.tertiary80 (Baseline palette / Baseline – Tertiary)
+$tertiary80: #efb8c8;
+/// md.ref.palette.tertiary90 (Baseline palette / Baseline – Tertiary)
+$tertiary90: #ffd8e4;
+/// md.ref.palette.tertiary95 (Baseline palette / Baseline – Tertiary)
+$tertiary95: #ffecf1;
+/// md.ref.palette.tertiary98 (Baseline palette / Baseline – Tertiary)
+$tertiary98: #fff8f8;
+/// md.ref.palette.tertiary99 (Baseline palette / Baseline – Tertiary)
+$tertiary99: #fffbfa;
+/// md.ref.palette.white (Static palette / Static – Black white)
+$white: #fff;
+/// md.ref.palette.yellow0 (Static palette / Static – Yellow)
+$yellow0: #000;
+/// md.ref.palette.yellow10 (Static palette / Static – Yellow)
+$yellow10: #2f1400;
+/// md.ref.palette.yellow100 (Static palette / Static – Yellow)
+$yellow100: #fff;
+/// md.ref.palette.yellow20 (Static palette / Static – Yellow)
+$yellow20: #4d2600;
+/// md.ref.palette.yellow30 (Static palette / Static – Yellow)
+$yellow30: #6d3a01;
+/// md.ref.palette.yellow40 (Static palette / Static – Yellow)
+$yellow40: #8f4e06;
+/// md.ref.palette.yellow50 (Static palette / Static – Yellow)
+$yellow50: #b16300;
+/// md.ref.palette.yellow60 (Static palette / Static – Yellow)
+$yellow60: #d37b00;
+/// md.ref.palette.yellow70 (Static palette / Static – Yellow)
+$yellow70: #ef9800;
+/// md.ref.palette.yellow80 (Static palette / Static – Yellow)
+$yellow80: #fcbd00;
+/// md.ref.palette.yellow90 (Static palette / Static – Yellow)
+$yellow90: #ffe07c;
+/// md.ref.palette.yellow95 (Static palette / Static – Yellow)
+$yellow95: #fff2b4;
+/// md.ref.palette.yellow98 (Static palette / Static – Yellow)
+$yellow98: #fffade;