@maicol07/material-web 2.2.0 → 2.5.0

package/labs/gb/styles/color/internal/_color-tokens.scss

@@ -0,0 +1,95 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'sass:meta';
+@use '../../../../../sass/ext/map_ext';
+@use '../../../../../tokens/versions/latest/sass/md-ref-palette';
+@use '../../../../../tokens/versions/latest/sass/md-sys-color';
+@use '../../../../../tokens/versions/latest/sass/md-sys-color-meta';
+@use '../../../../../tokens/versions/latest/sass/md-sys-color__dark';
+@use '../../../../../tokens/versions/latest/sass/md-sys-color__dark-meta';
+// go/keep-sorted end
+
+@mixin emit-custom-properties(
+  $light-vars: meta.module-variables(md-sys-color),
+  $light-meta: meta.module-variables(md-sys-color-meta),
+  $dark-vars: meta.module-variables(md-sys-color__dark),
+  $dark-meta: meta.module-variables(md-sys-color__dark-meta),
+  $include-palette: false,
+  $palette-vars: meta.module-variables(md-ref-palette),
+) {
+  $color-tokens: (
+    'primary',
+    'on-primary',
+    'primary-container',
+    'on-primary-container',
+    'primary-fixed',
+    'primary-fixed-dim',
+    'on-primary-fixed',
+    'on-primary-fixed-variant',
+    'secondary',
+    'on-secondary',
+    'secondary-container',
+    'on-secondary-container',
+    'secondary-fixed',
+    'secondary-fixed-dim',
+    'on-secondary-fixed',
+    'on-secondary-fixed-variant',
+    'tertiary',
+    'on-tertiary',
+    'tertiary-container',
+    'on-tertiary-container',
+    'tertiary-fixed',
+    'tertiary-fixed-dim',
+    'on-tertiary-fixed',
+    'on-tertiary-fixed-variant',
+    'error',
+    'on-error',
+    'error-container',
+    'on-error-container',
+    'surface',
+    'surface-dim',
+    'surface-bright',
+    'surface-container-lowest',
+    'surface-container-low',
+    'surface-container',
+    'surface-container-high',
+    'surface-container-highest',
+    'on-surface',
+    'on-surface-variant',
+    'outline',
+    'outline-variant',
+    'inverse-surface',
+    'inverse-on-surface',
+    'inverse-primary',
+    'scrim',
+    'shadow',
+  );
+
+  @each $name in $color-tokens {
+    $light: map_ext.get-strict($light-vars, $name);
+    $dark: map_ext.get-strict($dark-vars, $name);
+
+    @if $include-palette {
+      // Change value to reference palette variables.
+      $light: map_ext.get-strict($light-meta, '#{$name}--resolved');
+      $dark: map_ext.get-strict($dark-meta, '#{$name}--resolved');
+    }
+
+    $value: $light;
+    @if $light != $dark {
+      $value: light-dark($light, $dark);
+    }
+
+    --md-sys-color-#{$name}: #{$value};
+  }
+
+  @if $include-palette {
+    @each $name, $value in $palette-vars {
+      --md-ref-palette-#{$name}: #{$value};
+    }
+  }
+}

package/labs/gb/styles/color/md-color-tokens-full.scss

@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'internal/color-tokens';
+// go/keep-sorted end
+
+@layer md.sys.color {
+  :root {
+    color-scheme: light dark;
+    @include color-tokens.emit-custom-properties(
+      $include-palette: true,
+    );
+  }
+}

package/labs/gb/styles/color/md-color-tokens.scss

@@ -0,0 +1,15 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'internal/color-tokens';
+// go/keep-sorted end
+
+@layer md.sys.color {
+  :root {
+    color-scheme: light dark;
+    @include color-tokens.emit-custom-properties;
+  }
+}

package/labs/gb/styles/elevation/md-elevation-tokens.scss

@@ -0,0 +1,25 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@layer md.sys.elevation {
+  :root {
+    --md-sys-elevation-shadow-0: none;
+    --md-sys-elevation-shadow-1:
+      0 1px 2px 0 hsl(from var(--md-sys-color-shadow) h s l / 0.3),
+      0 1px 3px 1px hsl(from var(--md-sys-color-shadow) h s l / 0.15);
+    --md-sys-elevation-shadow-2:
+      0 1px 2px 0 hsl(from var(--md-sys-color-shadow) h s l / 0.3),
+      0 2px 6px 2px hsl(from var(--md-sys-color-shadow) h s l / 0.15);
+    --md-sys-elevation-shadow-3:
+      0 1px 3px 0 hsl(from var(--md-sys-color-shadow) h s l / 0.3),
+      0 4px 8px 3px hsl(from var(--md-sys-color-shadow) h s l / 0.15);
+    --md-sys-elevation-shadow-4:
+      0 2px 3px 0 hsl(from var(--md-sys-color-shadow) h s l / 0.3),
+      0 6px 10px 4px hsl(from var(--md-sys-color-shadow) h s l / 0.15);
+    --md-sys-elevation-shadow-5:
+      0 4px 4px 0 hsl(from var(--md-sys-color-shadow) h s l / 0.3),
+      0 8px 12px 6px hsl(from var(--md-sys-color-shadow) h s l / 0.15);
+  }
+}

package/labs/gb/styles/icon/md-icon.scss

@@ -0,0 +1,63 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@property --md-icon-font {
+  syntax: '<string>#';
+  inherits: true;
+  initial-value: 'Material Symbols';
+}
+@property --md-icon-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: currentColor;
+}
+@property --md-icon-size {
+  syntax: '<length-percentage>';
+  inherits: true;
+  initial-value: 24px;
+}
+@property --md-icon-opsz {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 24;
+}
+@property --md-icon-wght {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 400;
+}
+@property --md-icon-fill {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 0;
+}
+@property --md-icon-grad {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 0;
+}
+
+@layer md.sys.icon {
+  .md-icon,
+  :host(.md-icon) {
+    display: inline-flex;
+    place-items: center;
+    place-content: center;
+    overflow: hidden;
+    color: var(--md-icon-color);
+    fill: var(--md-icon-color);
+    aspect-ratio: 1;
+    min-width: var(--md-icon-size);
+    max-width: var(--md-icon-size);
+    font-size: var(--md-icon-size);
+    font-family: var(--md-icon-font);
+    font-variation-settings:
+      'opsz' var(--md-icon-opsz),
+      'wght' var(--md-icon-wght),
+      'FILL' var(--md-icon-fill),
+      'GRAD' var(--md-icon-grad);
+    -webkit-font-smoothing: antialiased;
+  }
+}

package/labs/gb/styles/m3.scss

@@ -0,0 +1,14 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@import 'color/md-color-tokens';
+@import 'elevation/md-elevation-tokens';
+@import 'icon/md-icon';
+@import 'motion/md-motion-tokens-easing';
+@import 'shape/md-shape-tokens';
+@import 'space/md-space-tokens';
+@import 'typography/md-typography-tokens';
+// go/keep-sorted end

package/labs/gb/styles/motion/md-motion-tokens-easing.scss

@@ -0,0 +1,35 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use '../../../../tokens/versions/latest/sass' as tokens;
+// go/keep-sorted end
+
+@layer md.sys.motion {
+  :root {
+    --md-sys-motion-easing-standard: #{tokens.$md-sys-motion--easing-standard};
+    --md-sys-motion-easing-standard-accelerate: #{tokens.$md-sys-motion--easing-standard-accelerate};
+    --md-sys-motion-easing-standard-decelerate: #{tokens.$md-sys-motion--easing-standard-decelerate};
+    --md-sys-motion-easing-emphasized: #{tokens.$md-sys-motion--easing-emphasized};
+    --md-sys-motion-easing-emphasized-accelerate: #{tokens.$md-sys-motion--easing-emphasized-accelerate};
+    --md-sys-motion-easing-emphasized-decelerate: #{tokens.$md-sys-motion--easing-emphasized-decelerate};
+    --md-sys-motion-duration-short1: #{tokens.$md-sys-motion--duration-short1};
+    --md-sys-motion-duration-short2: #{tokens.$md-sys-motion--duration-short2};
+    --md-sys-motion-duration-short3: #{tokens.$md-sys-motion--duration-short3};
+    --md-sys-motion-duration-short4: #{tokens.$md-sys-motion--duration-short4};
+    --md-sys-motion-duration-medium1: #{tokens.$md-sys-motion--duration-medium1};
+    --md-sys-motion-duration-medium2: #{tokens.$md-sys-motion--duration-medium2};
+    --md-sys-motion-duration-medium3: #{tokens.$md-sys-motion--duration-medium3};
+    --md-sys-motion-duration-medium4: #{tokens.$md-sys-motion--duration-medium4};
+    --md-sys-motion-duration-long1: #{tokens.$md-sys-motion--duration-long1};
+    --md-sys-motion-duration-long2: #{tokens.$md-sys-motion--duration-long2};
+    --md-sys-motion-duration-long3: #{tokens.$md-sys-motion--duration-long3};
+    --md-sys-motion-duration-long4: #{tokens.$md-sys-motion--duration-long4};
+    --md-sys-motion-duration-extra-long1: #{tokens.$md-sys-motion--duration-extra-long1};
+    --md-sys-motion-duration-extra-long2: #{tokens.$md-sys-motion--duration-extra-long2};
+    --md-sys-motion-duration-extra-long3: #{tokens.$md-sys-motion--duration-extra-long3};
+    --md-sys-motion-duration-extra-long4: #{tokens.$md-sys-motion--duration-extra-long4};
+  }
+}

package/labs/gb/styles/shape/md-shape-tokens.scss

@@ -0,0 +1,23 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use '../../../../tokens/versions/latest/sass' as tokens;
+// go/keep-sorted end
+
+@layer md.sys.shape {
+  :root {
+    --md-sys-shape-corner-none: #{tokens.$md-sys-shape--corner-none};
+    --md-sys-shape-corner-xs: #{tokens.$md-sys-shape--corner-extra-small};
+    --md-sys-shape-corner-sm: #{tokens.$md-sys-shape--corner-small};
+    --md-sys-shape-corner-md: #{tokens.$md-sys-shape--corner-medium};
+    --md-sys-shape-corner-lg: #{tokens.$md-sys-shape--corner-large};
+    --md-sys-shape-corner-lg-increased: #{tokens.$md-sys-shape--corner-large-increased};
+    --md-sys-shape-corner-xl: #{tokens.$md-sys-shape--corner-extra-large};
+    --md-sys-shape-corner-xl-increased: #{tokens.$md-sys-shape--corner-extra-large-increased};
+    --md-sys-shape-corner-xxl: #{tokens.$md-sys-shape--corner-extra-extra-large};
+    --md-sys-shape-corner-full: 50cqmin;
+  }
+}

package/labs/gb/styles/space/md-space-tokens.scss

@@ -0,0 +1,28 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@layer md.sys.space {
+  :root {
+    --md-sys-space-unit: 8px;
+    --md-sys-space-0: calc(var(--md-sys-space-unit) * 0);
+    --md-sys-space-25: calc(var(--md-sys-space-unit) * 0.25);
+    --md-sys-space-50: calc(var(--md-sys-space-unit) * 0.5);
+    --md-sys-space-75: calc(var(--md-sys-space-unit) * 0.75);
+    --md-sys-space-100: var(--md-sys-space-unit);
+    --md-sys-space-125: calc(var(--md-sys-space-unit) * 1.25);
+    --md-sys-space-150: calc(var(--md-sys-space-unit) * 1.5);
+    --md-sys-space-175: calc(var(--md-sys-space-unit) * 1.75);
+    --md-sys-space-200: calc(var(--md-sys-space-unit) * 2);
+    --md-sys-space-250: calc(var(--md-sys-space-unit) * 2.5);
+    --md-sys-space-300: calc(var(--md-sys-space-unit) * 3);
+    --md-sys-space-400: calc(var(--md-sys-space-unit) * 4);
+    --md-sys-space-450: calc(var(--md-sys-space-unit) * 4.5);
+    --md-sys-space-500: calc(var(--md-sys-space-unit) * 5);
+    --md-sys-space-600: calc(var(--md-sys-space-unit) * 6);
+    --md-sys-space-700: calc(var(--md-sys-space-unit) * 7);
+    --md-sys-space-800: calc(var(--md-sys-space-unit) * 8);
+    --md-sys-space-900: calc(var(--md-sys-space-unit) * 9);
+  }
+}

package/labs/gb/styles/tailwind.scss

@@ -0,0 +1,349 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// stylelint-disable scss/at-rule-no-unknown -- Uses TailwindCSS at-rules.
+
+// Cascade `md` layer between `base` reset styles and `utilities` for overrides.
+@layer theme, base, md, components, utilities;
+// Non-inline theme to preserve Tailwind's default 4px spacing convention.
+@theme {
+  --spacing: calc(var(--md-sys-space-unit) / 2);
+}
+// Inline theme to replace Tailwind's default custom properties.
+@theme inline {
+  // Color
+  #{'--color-*'}: initial; // Do not use Tailwind's default color utilities.
+  --color-primary: var(--md-sys-color-primary);
+  --color-on-primary: var(--md-sys-color-on-primary);
+  --color-primary-container: var(--md-sys-color-primary-container);
+  --color-on-primary-container: var(--md-sys-color-on-primary-container);
+  --color-primary-fixed: var(--md-sys-color-primary-fixed);
+  --color-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim);
+  --color-on-primary-fixed: var(--md-sys-color-on-primary-fixed);
+  --color-on-primary-fixed-variant: var(
+    --md-sys-color-on-primary-fixed-variant
+  );
+  --color-secondary: var(--md-sys-color-secondary);
+  --color-on-secondary: var(--md-sys-color-on-secondary);
+  --color-secondary-container: var(--md-sys-color-secondary-container);
+  --color-on-secondary-container: var(--md-sys-color-on-secondary-container);
+  --color-secondary-fixed: var(--md-sys-color-secondary-fixed);
+  --color-secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim);
+  --color-on-secondary-fixed: var(--md-sys-color-on-secondary-fixed);
+  --color-on-secondary-fixed-variant: var(
+    --md-sys-color-on-secondary-fixed-variant
+  );
+  --color-tertiary: var(--md-sys-color-tertiary);
+  --color-on-tertiary: var(--md-sys-color-on-tertiary);
+  --color-tertiary-container: var(--md-sys-color-tertiary-container);
+  --color-on-tertiary-container: var(--md-sys-color-on-tertiary-container);
+  --color-tertiary-fixed: var(--md-sys-color-tertiary-fixed);
+  --color-tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim);
+  --color-on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed);
+  --color-on-tertiary-fixed-variant: var(
+    --md-sys-color-on-tertiary-fixed-variant
+  );
+  --color-error: var(--md-sys-color-error);
+  --color-on-error: var(--md-sys-color-on-error);
+  --color-error-container: var(--md-sys-color-error-container);
+  --color-on-error-container: var(--md-sys-color-on-error-container);
+  --color-surface: var(--md-sys-color-surface);
+  --color-surface-dim: var(--md-sys-color-surface-dim);
+  --color-surface-bright: var(--md-sys-color-surface-bright);
+  --color-surface-container-lowest: var(
+    --md-sys-color-surface-container-lowest
+  );
+  --color-surface-container-low: var(--md-sys-color-surface-container-low);
+  --color-surface-container: var(--md-sys-color-surface-container);
+  --color-surface-container-high: var(--md-sys-color-surface-container-high);
+  --color-surface-container-highest: var(
+    --md-sys-color-surface-container-highest
+  );
+  --color-on-surface: var(--md-sys-color-on-surface);
+  --color-on-surface-variant: var(--md-sys-color-on-surface-variant);
+  --color-outline: var(--md-sys-color-outline);
+  --color-outline-variant: var(--md-sys-color-outline-variant);
+  --color-inverse-surface: var(--md-sys-color-inverse-surface);
+  --color-inverse-on-surface: var(--md-sys-color-inverse-on-surface);
+  --color-inverse-primary: var(--md-sys-color-inverse-primary);
+  --color-scrim: var(--md-sys-color-scrim);
+  --color-shadow: var(--md-sys-color-shadow);
+
+  // Typography
+  #{'--font-*'}: initial; // Do not use Tailwind's default font utilities.
+  --font-brand: var(--md-ref-typeface-brand);
+  --font-plain: var(--md-ref-typeface-plain);
+  --font-weight-normal: var(--md-ref-typeface-weight-regular);
+  --font-weight-medium: var(--md-ref-typeface-weight-medium);
+  --font-weight-bold: var(--md-ref-typeface-weight-bold);
+  #{'--text-*'}: initial; // Do not use Tailwind's default text utilities.
+  #{'--tracking-*'}: initial;
+  #{'--leading-*'}: initial;
+  // Use the `typescale-<name>-<size>` utility to apply typography tokens.
+  --typescale-label-sm: var(--md-sys-typescale-label-sm);
+  --typescale-label-sm-tracking: var(--md-sys-typescale-label-sm-tracking);
+  --typescale-label-sm-axes: var(--md-sys-typescale-label-sm-axes);
+  --typescale-label-md: var(--md-sys-typescale-label-md);
+  --typescale-label-md-tracking: var(--md-sys-typescale-label-md-tracking);
+  --typescale-label-md-axes: var(--md-sys-typescale-label-md-axes);
+  --typescale-label-lg: var(--md-sys-typescale-label-lg);
+  --typescale-label-lg-tracking: var(--md-sys-typescale-label-lg-tracking);
+  --typescale-label-lg-axes: var(--md-sys-typescale-label-lg-axes);
+  --typescale-body-sm: var(--md-sys-typescale-body-sm);
+  --typescale-body-sm-tracking: var(--md-sys-typescale-body-sm-tracking);
+  --typescale-body-sm-axes: var(--md-sys-typescale-body-sm-axes);
+  --typescale-body-md: var(--md-sys-typescale-body-md);
+  --typescale-body-md-tracking: var(--md-sys-typescale-body-md-tracking);
+  --typescale-body-md-axes: var(--md-sys-typescale-body-md-axes);
+  --typescale-body-lg: var(--md-sys-typescale-body-lg);
+  --typescale-body-lg-tracking: var(--md-sys-typescale-body-lg-tracking);
+  --typescale-body-lg-axes: var(--md-sys-typescale-body-lg-axes);
+  --typescale-title-sm: var(--md-sys-typescale-title-sm);
+  --typescale-title-sm-tracking: var(--md-sys-typescale-title-sm-tracking);
+  --typescale-title-sm-axes: var(--md-sys-typescale-title-sm-axes);
+  --typescale-title-md: var(--md-sys-typescale-title-md);
+  --typescale-title-md-tracking: var(--md-sys-typescale-title-md-tracking);
+  --typescale-title-md-axes: var(--md-sys-typescale-title-md-axes);
+  --typescale-title-lg: var(--md-sys-typescale-title-lg);
+  --typescale-title-lg-tracking: var(--md-sys-typescale-title-lg-tracking);
+  --typescale-title-lg-axes: var(--md-sys-typescale-title-lg-axes);
+  --typescale-headline-sm: var(--md-sys-typescale-headline-sm);
+  --typescale-headline-sm-tracking: var(
+    --md-sys-typescale-headline-sm-tracking
+  );
+  --typescale-headline-sm-axes: var(--md-sys-typescale-headline-sm-axes);
+  --typescale-headline-md: var(--md-sys-typescale-headline-md);
+  --typescale-headline-md-tracking: var(
+    --md-sys-typescale-headline-md-tracking
+  );
+  --typescale-headline-md-axes: var(--md-sys-typescale-headline-md-axes);
+  --typescale-headline-lg: var(--md-sys-typescale-headline-lg);
+  --typescale-headline-lg-tracking: var(
+    --md-sys-typescale-headline-lg-tracking
+  );
+  --typescale-headline-lg-axes: var(--md-sys-typescale-headline-lg-axes);
+  --typescale-display-sm: var(--md-sys-typescale-display-sm);
+  --typescale-display-sm-tracking: var(--md-sys-typescale-display-sm-tracking);
+  --typescale-display-sm-axes: var(--md-sys-typescale-display-sm-axes);
+  --typescale-display-md: var(--md-sys-typescale-display-md);
+  --typescale-display-md-tracking: var(--md-sys-typescale-display-md-tracking);
+  --typescale-display-md-axes: var(--md-sys-typescale-display-md-axes);
+  --typescale-display-lg: var(--md-sys-typescale-display-lg);
+  --typescale-display-lg-tracking: var(--md-sys-typescale-display-lg-tracking);
+  --typescale-display-lg-axes: var(--md-sys-typescale-display-lg-axes);
+  --typescale-emphasized-label-sm: var(--md-sys-typescale-emphasized-label-sm);
+  --typescale-emphasized-label-sm-axes: var(
+    --md-sys-typescale-emphasized-label-sm-axes
+  );
+  --typescale-emphasized-label-md: var(--md-sys-typescale-emphasized-label-md);
+  --typescale-emphasized-label-md-axes: var(
+    --md-sys-typescale-emphasized-label-md-axes
+  );
+  --typescale-emphasized-label-lg: var(--md-sys-typescale-emphasized-label-lg);
+  --typescale-emphasized-label-lg-axes: var(
+    --md-sys-typescale-emphasized-label-lg-axes
+  );
+  --typescale-emphasized-body-sm: var(--md-sys-typescale-emphasized-body-sm);
+  --typescale-emphasized-body-sm-axes: var(
+    --md-sys-typescale-emphasized-body-sm-axes
+  );
+  --typescale-emphasized-body-md: var(--md-sys-typescale-emphasized-body-md);
+  --typescale-emphasized-body-md-axes: var(
+    --md-sys-typescale-emphasized-body-md-axes
+  );
+  --typescale-emphasized-body-lg: var(--md-sys-typescale-emphasized-body-lg);
+  --typescale-emphasized-body-lg-axes: var(
+    --md-sys-typescale-emphasized-body-lg-axes
+  );
+  --typescale-emphasized-title-sm: var(--md-sys-typescale-emphasized-title-sm);
+  --typescale-emphasized-title-sm-axes: var(
+    --md-sys-typescale-emphasized-title-sm-axes
+  );
+  --typescale-emphasized-title-md: var(--md-sys-typescale-emphasized-title-md);
+  --typescale-emphasized-title-md-axes: var(
+    --md-sys-typescale-emphasized-title-md-axes
+  );
+  --typescale-emphasized-title-lg: var(--md-sys-typescale-emphasized-title-lg);
+  --typescale-emphasized-title-lg-axes: var(
+    --md-sys-typescale-emphasized-title-lg-axes
+  );
+  --typescale-emphasized-headline-sm: var(
+    --md-sys-typescale-emphasized-headline-sm
+  );
+  --typescale-emphasized-headline-sm-axes: var(
+    --md-sys-typescale-emphasized-headline-sm-axes
+  );
+  --typescale-emphasized-headline-md: var(
+    --md-sys-typescale-emphasized-headline-md
+  );
+  --typescale-emphasized-headline-md-axes: var(
+    --md-sys-typescale-emphasized-headline-md-axes
+  );
+  --typescale-emphasized-headline-lg: var(
+    --md-sys-typescale-emphasized-headline-lg
+  );
+  --typescale-emphasized-headline-lg-axes: var(
+    --md-sys-typescale-emphasized-headline-lg-axes
+  );
+  --typescale-emphasized-display-sm: var(
+    --md-sys-typescale-emphasized-display-sm
+  );
+  --typescale-emphasized-display-sm-axes: var(
+    --md-sys-typescale-emphasized-display-sm-axes
+  );
+  --typescale-emphasized-display-md: var(
+    --md-sys-typescale-emphasized-display-md
+  );
+  --typescale-emphasized-display-md-axes: var(
+    --md-sys-typescale-emphasized-display-md-axes
+  );
+  --typescale-emphasized-display-lg: var(
+    --md-sys-typescale-emphasized-display-lg
+  );
+  --typescale-emphasized-display-lg-axes: var(
+    --md-sys-typescale-emphasized-display-lg-axes
+  );
+
+  // Shape
+  --radius-xs: var(--md-sys-shape-corner-xs);
+  --radius-sm: var(--md-sys-shape-corner-sm);
+  --radius-md: var(--md-sys-shape-corner-md);
+  --radius-lg: var(--md-sys-shape-corner-lg);
+  --radius-xl: var(--md-sys-shape-corner-lg-increased);
+  --radius-2xl: var(--md-sys-shape-corner-xl);
+  --radius-3xl: var(--md-sys-shape-corner-xl-increased);
+  --radius-4xl: var(--md-sys-shape-corner-xxl);
+
+  // Elevation
+  --shadow-2xs: initial; // Material does not have a 2xs shadow.
+  --shadow-xs: var(--md-sys-elevation-shadow-1);
+  --shadow-sm: var(--md-sys-elevation-shadow-2);
+  --shadow-md: var(--md-sys-elevation-shadow-3);
+  --shadow-lg: var(--md-sys-elevation-shadow-4);
+  --shadow-xl: var(--md-sys-elevation-shadow-5);
+  --shadow-2xl: initial; // Material does not have a 2xl shadow.
+
+  // Space
+  --spacing-s0: var(--md-sys-space-0);
+  --spacing-s25: var(--md-sys-space-25);
+  --spacing-s50: var(--md-sys-space-50);
+  --spacing-s75: var(--md-sys-space-75);
+  --spacing-s100: var(--md-sys-space-100);
+  --spacing-s125: var(--md-sys-space-125);
+  --spacing-s150: var(--md-sys-space-150);
+  --spacing-s175: var(--md-sys-space-175);
+  --spacing-s200: var(--md-sys-space-200);
+  --spacing-s250: var(--md-sys-space-250);
+  --spacing-s300: var(--md-sys-space-300);
+  --spacing-s400: var(--md-sys-space-400);
+  --spacing-s450: var(--md-sys-space-450);
+  --spacing-s500: var(--md-sys-space-500);
+  --spacing-s600: var(--md-sys-space-600);
+  --spacing-s700: var(--md-sys-space-700);
+  --spacing-s800: var(--md-sys-space-800);
+  --spacing-s900: var(--md-sys-space-900);
+
+  // Breakpoints
+  --breakpoint-sm: 600px; // medium
+  --breakpoint-md: 840px; // expanded
+  --breakpoint-lg: 1200px; // large
+  --breakpoint-xl: 1600px; // extra-large
+  --breakpoint-2xl: initial; // Material does not have a 2xl breakpoint.
+}
+
+// Use the `typescale-<name>-<size>` utility to apply typography tokens.
+@utility typescale-* {
+  font: #{'--value(--typescale-*)'};
+  letter-spacing: #{'--value(--typescale-*-tracking)'};
+  font-variation-settings: #{'--value(--typescale-*-axes)'};
+}
+@utility typescale-emphasized-* {
+  font: #{'--value(--typescale-emphasized-*)'};
+  letter-spacing: #{'--value(--typescale-*-tracking)'};
+  font-variation-settings: #{'--value(--typescale-emphasized-*-axes)'};
+}
+
+// Add Material spacing utilities for padding, margin, and gap.
+@utility p-* {
+  padding: #{'--value(--spacing-*)'};
+}
+@utility px-* {
+  padding-inline: #{'--value(--spacing-*)'};
+}
+@utility py-* {
+  padding-block: #{'--value(--spacing-*)'};
+}
+@utility pl-* {
+  padding-inline-start: #{'--value(--spacing-*)'};
+}
+@utility ps-* {
+  padding-inline-start: #{'--value(--spacing-*)'};
+}
+@utility pe-* {
+  padding-inline-end: #{'--value(--spacing-*)'};
+}
+@utility pr-* {
+  padding-inline-end: #{'--value(--spacing-*)'};
+}
+@utility pt-* {
+  padding-block-start: #{'--value(--spacing-*)'};
+}
+@utility pbs-* {
+  padding-block-start: #{'--value(--spacing-*)'};
+}
+@utility pb-* {
+  padding-block-end: #{'--value(--spacing-*)'};
+}
+@utility pbe-* {
+  padding-block-end: #{'--value(--spacing-*)'};
+}
+@utility m-* {
+  margin: #{'--value(--spacing-*)'};
+}
+@utility mx-* {
+  margin-inline: #{'--value(--spacing-*)'};
+}
+@utility my-* {
+  margin-block: #{'--value(--spacing-*)'};
+}
+@utility ml-* {
+  margin-inline-start: #{'--value(--spacing-*)'};
+}
+@utility ms-* {
+  margin-inline-start: #{'--value(--spacing-*)'};
+}
+@utility me-* {
+  margin-inline-end: #{'--value(--spacing-*)'};
+}
+@utility mr-* {
+  margin-inline-end: #{'--value(--spacing-*)'};
+}
+@utility mt-* {
+  margin-block-start: #{'--value(--spacing-*)'};
+}
+@utility mbs-* {
+  margin-block-start: #{'--value(--spacing-*)'};
+}
+@utility mb-* {
+  margin-block-end: #{'--value(--spacing-*)'};
+}
+@utility mbe-* {
+  margin-block-end: #{'--value(--spacing-*)'};
+}
+@utility gap-* {
+  gap: #{'--value(--spacing-*)'};
+}
+@utility gap-x-* {
+  column-gap: #{'--value(--spacing-*)'};
+}
+@utility gap-y-* {
+  row-gap: #{'--value(--spacing-*)'};
+}
+
+// Override Tailwind's default `display: list-item` utility, which clashes
+// with the `.list-item` component class.
+@utility list-item {
+  display: flex;
+}