@rcarls/rc-theme-material 0.6.0 → 0.7.0

package/components/tooltip.css

@@ -0,0 +1,12 @@
+@layer rc-theme-material.components {
+  /* Declared on the theme root so tooltips inside other shadow roots inherit it. */
+  :where(.rc-theme-material, :host(.rc-theme-material)) {
+    --rc-tooltip-padding-block: 0.5rem;
+    --rc-tooltip-padding-inline: 0.75rem;
+    --rc-tooltip-border: 0;
+    --rc-tooltip-radius: var(--md-sys-shape-corner-extra-small, 0.25rem);
+    --rc-tooltip-background: var(--md-sys-color-inverse-surface, CanvasText);
+    --rc-tooltip-color: var(--md-sys-color-inverse-on-surface, Canvas);
+    --rc-tooltip-shadow: var(--rc-shadow-level2, none);
+  }
+}

package/components/transfer-list.css

@@ -3,6 +3,7 @@
     --rc-transfer-list-gap: 1rem;
     --rc-transfer-list-panel-gap: 0.5rem;
     --rc-transfer-list-listbox-border: 1px solid var(--md-sys-color-outline-variant, ButtonBorder);
+    --rc-transfer-list-listbox-radius: var(--md-sys-shape-corner-extra-small, 0.25rem);
     --rc-transfer-list-listbox-bg: var(--md-sys-color-surface, Canvas);
     --rc-transfer-list-option-gap: 0.75rem;
     --rc-transfer-list-option-padding-block: 0;
@@ -37,7 +38,10 @@
     --rc-listbox-option-min-block-size: 3rem;
     --rc-listbox-option-padding-block: 0;
     --rc-listbox-option-padding-inline: 0.75rem;
-    --rc-listbox-option-transition: background-color 150ms ease, color 150ms ease;
+    --rc-listbox-option-transition:
+      background-color var(--rc-motion-effects-duration-fast, 150ms)
+        var(--rc-motion-effects-easing-fast, ease),
+      color var(--rc-motion-effects-duration-fast, 150ms) var(--rc-motion-effects-easing-fast, ease);
     --rc-listbox-hover-bg: color-mix(
       in srgb,
       var(--md-sys-color-on-surface, CanvasText) 8%,

package/components/virtual-scroller.css

@@ -0,0 +1,7 @@
+@layer rc-theme-material.components {
+  /*
+   * rc-virtual-scroller has no decorative surface of its own: the two
+   * spacer parts carry no paint, and every visual opinion belongs to the
+   * consumer's slotted list or grid. Nothing in Material maps onto it.
+   */
+}

package/components.css

@@ -1,10 +1,12 @@
-@layer rc-theme-material.defaults, rc-theme-material.bridge, rc-theme-material.components;
+@layer rc-base, rc-theme-material.defaults, rc-theme-material.bridge, rc-theme-material.native, rc-theme-material.components, rc-theme-material.css-components,
+  rc-theme-material.overrides;
 
 @import './components/icons.css';
 @import './components/listbox.css';
 @import './components/select.css';
 @import './components/combobox.css';
 @import './components/search-bar.css';
+@import './components/field.css';
 @import './components/bottom-sheet.css';
 @import './components/textarea.css';
 @import './components/markdown-editor.css';
@@ -30,6 +32,8 @@
 @import './components/slider.css';
 @import './components/progress.css';
 @import './components/snackbar.css';
+@import './components/tooltip.css';
+@import './components/popover.css';
 @import './components/range-slider.css';
 @import './components/splitter.css';
 @import './components/switch.css';
@@ -37,5 +41,6 @@
 @import './components/disclosure.css';
 @import './components/accordion.css';
 @import './components/virtual-canvas.css';
+@import './components/virtual-scroller.css';
 @import './components/modes.css';
 @import './state-layer.css';

package/css-components/button.css

@@ -0,0 +1,66 @@
+@layer rc-theme-material.css-components {
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    :where(button.rc-button, a[href].rc-button):not(:where(rc-button > button)):not(
+      :where(rc-button > a)
+    ) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--rc-button-gap, 0.5rem);
+    min-block-size: var(--rc-button-block-size, 2.5rem);
+    padding-block: var(--rc-button-padding-block, 0.5rem);
+    padding-inline: var(--rc-button-padding-inline, 1.5rem);
+    border: var(--rc-button-border, var(--rc-border, 1px solid ButtonBorder));
+    border-radius: var(--rc-button-radius, var(--rc-control-radius, 999px));
+    background: var(--rc-button-bg, ButtonFace);
+    color: var(--rc-button-color, var(--rc-button-text, ButtonText));
+    font: var(--rc-button-font, inherit);
+    text-decoration: var(--rc-button-text-decoration, none);
+    cursor: pointer;
+    user-select: none;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    :where(button.rc-button, a[href].rc-button):not(:where(rc-button > button)):not(
+      :where(rc-button > a)
+    ):hover:not(:where(:disabled)) {
+    background: color-mix(in srgb, currentColor 8%, var(--rc-button-bg, ButtonFace));
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    :where(button.rc-button, a[href].rc-button):not(:where(rc-button > button)):not(
+      :where(rc-button > a)
+    ):active:not(:where(:disabled)),
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    :where(button.rc-button, a[href].rc-button)[aria-pressed='true']:not(
+      :where(rc-button > button)
+    ):not(:where(rc-button > a)) {
+    background: var(--rc-highlight, Highlight);
+    color: var(--rc-highlight-text, HighlightText);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    :where(button.rc-button, a[href].rc-button):not(:where(rc-button > button)):not(
+      :where(rc-button > a)
+    ):focus-visible {
+    outline: var(--rc-focus-ring, 2px solid Highlight);
+    outline-offset: var(--rc-focus-ring-offset, 2px);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    :where(button.rc-button, a[href].rc-button):is(:disabled, [aria-disabled='true']) {
+    color: var(--rc-text-disabled, GrayText);
+    cursor: not-allowed;
+  }
+
+  @media (forced-colors: active) {
+    :where(.rc-theme-material, :host(.rc-theme-material))
+      :where(button.rc-button, a[href].rc-button)[aria-pressed='true'] {
+      border-color: Highlight;
+      outline: 1px solid Highlight;
+      outline-offset: -1px;
+      background: Highlight;
+      color: HighlightText;
+    }
+  }
+}

package/css-components/card.css

@@ -0,0 +1,14 @@
+@layer rc-theme-material.css-components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) .rc-card {
+    display: grid;
+    gap: var(--rc-card-actions-gap, 0.5rem);
+    box-sizing: border-box;
+    padding-block: var(--rc-card-padding-block, 1rem);
+    padding-inline: var(--rc-card-padding-inline, 1rem);
+    border: var(--rc-border, 1px solid ButtonBorder);
+    border-radius: var(--rc-card-radius, var(--rc-control-radius, 0.5rem));
+    background: var(--rc-card-bg, var(--rc-surface, Canvas));
+    color: var(--rc-card-color, CanvasText);
+    box-shadow: var(--rc-shadow, none);
+  }
+}

package/css-components/chip-group.css

@@ -0,0 +1,9 @@
+@layer rc-theme-material.css-components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) .rc-chip-group {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--rc-chip-group-row-gap, var(--rc-control-gap, 0.5rem))
+      var(--rc-chip-group-column-gap, var(--rc-control-gap, 0.5rem));
+  }
+}

package/css-components/chip.css

@@ -0,0 +1,80 @@
+@layer rc-theme-material.css-components {
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    :where(button.rc-chip, a[href].rc-chip, label.rc-chip):not(:where(rc-chip > button)):not(
+      :where(rc-chip > a)
+    ):not(:where(rc-chip > label)) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--rc-chip-gap, 0.25rem);
+    min-block-size: var(--rc-chip-block-size, 2rem);
+    padding-block: var(--rc-chip-padding-block, 0.25rem);
+    padding-inline: var(--rc-chip-padding-inline, 1rem);
+    border: var(--rc-chip-border, var(--rc-border, 1px solid ButtonBorder));
+    border-radius: var(--rc-chip-radius, 0.5rem);
+    background: var(--rc-chip-bg, ButtonFace);
+    color: var(--rc-chip-color, ButtonText);
+    font: var(--rc-chip-font, inherit);
+    text-decoration: var(--rc-chip-text-decoration, none);
+    cursor: pointer;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    label.rc-chip
+    > :where(input[type='checkbox'], input[type='radio']) {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    :where(button.rc-chip, a[href].rc-chip, label.rc-chip):not(:where(rc-chip > button)):not(
+      :where(rc-chip > a)
+    ):not(:where(rc-chip > label)):hover:not(:where(:disabled)):not(:has(input:disabled)) {
+    background: color-mix(in srgb, currentColor 8%, var(--rc-chip-bg, ButtonFace));
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    :where(button.rc-chip, a[href].rc-chip, label.rc-chip):not(:where(rc-chip > button)):not(
+      :where(rc-chip > a)
+    ):not(:where(rc-chip > label)):has(input:checked) {
+    background: var(--rc-chip-selected-bg, Highlight);
+    color: var(--rc-highlight-text, HighlightText);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    :where(button.rc-chip, a[href].rc-chip, label.rc-chip):not(:where(rc-chip > button)):not(
+      :where(rc-chip > a)
+    ):not(:where(rc-chip > label)):is(:focus-visible, :has(input:focus-visible)) {
+    outline: var(--rc-focus-ring, 2px solid Highlight);
+    outline-offset: var(--rc-focus-ring-offset, 2px);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    :where(button.rc-chip, a[href].rc-chip, label.rc-chip):not(:where(rc-chip > button)):not(
+      :where(rc-chip > a)
+    ):not(:where(rc-chip > label)):has(input:disabled) {
+    color: var(--rc-text-disabled, GrayText);
+    cursor: not-allowed;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    :where(button.rc-chip, a[href].rc-chip):is(:disabled, [aria-disabled='true']) {
+    color: var(--rc-text-disabled, GrayText);
+    cursor: not-allowed;
+  }
+
+  @media (forced-colors: active) {
+    :where(.rc-theme-material, :host(.rc-theme-material))
+      :where(button.rc-chip, a[href].rc-chip, label.rc-chip):has(input:checked) {
+      border-color: Highlight;
+      outline: 1px solid Highlight;
+      outline-offset: -1px;
+      background: Highlight;
+      color: HighlightText;
+    }
+  }
+}

package/css-components/disclosure.css

@@ -0,0 +1,25 @@
+@layer rc-theme-material.css-components {
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    details.rc-disclosure:not(:where(rc-disclosure > details)) {
+    padding-block: var(--rc-control-padding-block, 0.5rem);
+    padding-inline: var(--rc-control-padding-inline, 1rem);
+    border: var(--rc-border, 1px solid ButtonBorder);
+    border-radius: var(--rc-card-radius, var(--rc-control-radius, 0.5rem));
+    background: var(--rc-surface, Canvas);
+    color: var(--rc-field-text, CanvasText);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    details.rc-disclosure:not(:where(rc-disclosure > details))
+    > summary {
+    cursor: pointer;
+    font-weight: 500;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    details.rc-disclosure:not(:where(rc-disclosure > details))
+    > summary:focus-visible {
+    outline: var(--rc-focus-ring, 2px solid Highlight);
+    outline-offset: var(--rc-focus-ring-offset, 2px);
+  }
+}

package/css-components/list.css

@@ -0,0 +1,34 @@
+@layer rc-theme-material.css-components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) .rc-list {
+    display: grid;
+    gap: var(--rc-list-item-gap, 0.5rem);
+    margin-block: 0;
+    padding-inline-start: 0;
+    list-style: none;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) .rc-list > li {
+    display: flex;
+    align-items: center;
+    min-block-size: var(--rc-list-item-min-block-size, 3rem);
+    padding-block: var(--rc-list-item-padding-block, 0.5rem);
+    padding-inline: var(--rc-list-item-padding-inline, 1rem);
+    border-radius: var(--rc-control-radius, 0.5rem);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) .rc-list > li[aria-selected='true'],
+  :where(.rc-theme-material, :host(.rc-theme-material)) .rc-list > li:has(input:checked) {
+    background: var(--rc-list-item-selected-bg, Highlight);
+    color: var(--rc-list-item-selected-color, HighlightText);
+  }
+
+  @media (forced-colors: active) {
+    :where(.rc-theme-material, :host(.rc-theme-material))
+      .rc-list
+      > li:is([aria-selected='true'], :has(input:checked)) {
+      border-color: Highlight;
+      outline: 1px solid Highlight;
+      outline-offset: -1px;
+    }
+  }
+}

package/css-components/select.css

@@ -0,0 +1,20 @@
+@layer rc-theme-material.css-components {
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    select.rc-select:not(:where(rc-select > select)) {
+    box-sizing: border-box;
+    min-block-size: var(--rc-select-control-block-size, var(--rc-control-block-size, 2.5rem));
+    padding-block: var(--rc-select-padding-block, var(--rc-control-padding-block, 0.5rem));
+    padding-inline: var(--rc-select-padding-inline, var(--rc-control-padding-inline, 1rem));
+    border: var(--rc-select-border, var(--rc-border, 1px solid ButtonBorder));
+    border-radius: var(--rc-select-radius, var(--rc-control-radius, 0.5rem));
+    background: var(--rc-field, Field);
+    color: var(--rc-field-text, FieldText);
+    font: inherit;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    select.rc-select:not(:where(rc-select > select)):focus-visible {
+    outline: var(--rc-focus-ring, 2px solid Highlight);
+    outline-offset: var(--rc-focus-ring-offset, 2px);
+  }
+}

package/css-components/textarea.css

@@ -0,0 +1,22 @@
+@layer rc-theme-material.css-components {
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    textarea.rc-textarea:not(:where(rc-textarea > textarea)) {
+    box-sizing: border-box;
+    min-block-size: var(--rc-control-block-size, 2.5rem);
+    padding-block: var(--rc-control-padding-block, 0.5rem);
+    padding-inline: var(--rc-control-padding-inline, 1rem);
+    border: var(--rc-textarea-border, var(--rc-border, 1px solid ButtonBorder));
+    border-radius: var(--rc-textarea-border-radius, var(--rc-control-radius, 0.5rem));
+    background: var(--rc-textarea-background, var(--rc-field, Field));
+    color: var(--rc-textarea-color, var(--rc-field-text, FieldText));
+    caret-color: var(--rc-textarea-caret-color, var(--rc-accent, AccentColor));
+    font: inherit;
+    resize: block;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    textarea.rc-textarea:not(:where(rc-textarea > textarea)):focus-visible {
+    outline: var(--rc-textarea-focus-outline, var(--rc-focus-ring, 2px solid Highlight));
+    outline-offset: var(--rc-focus-ring-offset, 2px);
+  }
+}

package/css-components.css

@@ -0,0 +1,31 @@
+@layer rc-base, rc-theme-material.defaults, rc-theme-material.bridge, rc-theme-material.native, rc-theme-material.components, rc-theme-material.css-components,
+  rc-theme-material.overrides;
+
+@import './css-components/button.css';
+@import './css-components/chip.css';
+@import './css-components/chip-group.css';
+@import './css-components/select.css';
+@import './css-components/textarea.css';
+@import './css-components/card.css';
+@import './css-components/list.css';
+@import './css-components/disclosure.css';
+
+@layer rc-theme-material.css-components {
+  @media (forced-colors: active) {
+    :where(.rc-theme-material, :host(.rc-theme-material))
+      :where(
+        button.rc-button,
+        a.rc-button,
+        button.rc-chip,
+        a.rc-chip,
+        label.rc-chip,
+        select.rc-select,
+        textarea.rc-textarea,
+        .rc-card,
+        .rc-list,
+        details.rc-disclosure
+      ) {
+      forced-color-adjust: auto;
+    }
+  }
+}

package/defaults.css

@@ -1,4 +1,5 @@
-@layer rc-theme-material.defaults, rc-theme-material.bridge, rc-theme-material.components;
+@layer rc-base, rc-theme-material.defaults, rc-theme-material.bridge, rc-theme-material.native, rc-theme-material.components, rc-theme-material.css-components,
+  rc-theme-material.overrides;
 
 @layer rc-theme-material.defaults {
   /*
@@ -518,9 +519,9 @@
     /* Display Large font name */
     --md-sys-typescale-display-large-font: var(--md-ref-typeface-brand);
     /* Plain typeface */
-    --md-ref-typeface-plain: Roboto;
+    --md-ref-typeface-plain: Roboto, system-ui, sans-serif;
     /* Brand typeface */
-    --md-ref-typeface-brand: Roboto;
+    --md-ref-typeface-brand: Roboto, system-ui, sans-serif;
     /* Bold weight */
     --md-ref-typeface-weight-bold: 700;
     /* Medium weight */
@@ -667,6 +668,77 @@
     /* Motion path */
     --md-sys-motion-path-standard-path: 1;
 
+    /*
+     * Repo-authored composites, not vendored. The tokens above are the raw
+     * control points and millisecond primitives material-tokens ships;
+     * nothing composes them into a usable `cubic-bezier()` or names the
+     * duration bands the Material 3 motion spec actually refers to, so any
+     * component or bridge rule reaching for one directly resolved to
+     * nothing. Each alias below is assembled from those primitives; see
+     * defaults.test.ts for the full set this asserts, so a future re-vendor
+     * that drops or renames a primitive fails a test instead of silently
+     * breaking every alias that composes it.
+     */
+    --md-sys-motion-easing-standard: cubic-bezier(
+      var(--md-sys-motion-easing-standard-x0),
+      var(--md-sys-motion-easing-standard-y0),
+      var(--md-sys-motion-easing-standard-x1),
+      var(--md-sys-motion-easing-standard-y1)
+    );
+    --md-sys-motion-easing-standard-decelerate: cubic-bezier(
+      var(--md-sys-motion-easing-standard-decelerate-x0),
+      var(--md-sys-motion-easing-standard-decelerate-y0),
+      var(--md-sys-motion-easing-standard-decelerate-x1),
+      var(--md-sys-motion-easing-standard-decelerate-y1)
+    );
+    --md-sys-motion-easing-standard-accelerate: cubic-bezier(
+      var(--md-sys-motion-easing-standard-accelerate-x0),
+      var(--md-sys-motion-easing-standard-accelerate-y0),
+      var(--md-sys-motion-easing-standard-accelerate-x1),
+      var(--md-sys-motion-easing-standard-accelerate-y1)
+    );
+    --md-sys-motion-easing-emphasized: cubic-bezier(
+      var(--md-sys-motion-easing-emphasized-x0),
+      var(--md-sys-motion-easing-emphasized-y0),
+      var(--md-sys-motion-easing-emphasized-x1),
+      var(--md-sys-motion-easing-emphasized-y1)
+    );
+    --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(
+      var(--md-sys-motion-easing-emphasized-decelerate-x0),
+      var(--md-sys-motion-easing-emphasized-decelerate-y0),
+      var(--md-sys-motion-easing-emphasized-decelerate-x1),
+      var(--md-sys-motion-easing-emphasized-decelerate-y1)
+    );
+    --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(
+      var(--md-sys-motion-easing-emphasized-accelerate-x0),
+      var(--md-sys-motion-easing-emphasized-accelerate-y0),
+      var(--md-sys-motion-easing-emphasized-accelerate-x1),
+      var(--md-sys-motion-easing-emphasized-accelerate-y1)
+    );
+    --md-sys-motion-easing-linear: cubic-bezier(
+      var(--md-sys-motion-easing-linear-x0),
+      var(--md-sys-motion-easing-linear-y0),
+      var(--md-sys-motion-easing-linear-x1),
+      var(--md-sys-motion-easing-linear-y1)
+    );
+    /* Duration bands, named per the Material 3 motion spec. */
+    --md-sys-motion-duration-short1: var(--md-sys-motion-duration-50);
+    --md-sys-motion-duration-short2: var(--md-sys-motion-duration-100);
+    --md-sys-motion-duration-short3: var(--md-sys-motion-duration-150);
+    --md-sys-motion-duration-short4: var(--md-sys-motion-duration-200);
+    --md-sys-motion-duration-medium1: var(--md-sys-motion-duration-250);
+    --md-sys-motion-duration-medium2: var(--md-sys-motion-duration-300);
+    --md-sys-motion-duration-medium3: var(--md-sys-motion-duration-350);
+    --md-sys-motion-duration-medium4: var(--md-sys-motion-duration-400);
+    --md-sys-motion-duration-long1: var(--md-sys-motion-duration-450);
+    --md-sys-motion-duration-long2: var(--md-sys-motion-duration-500);
+    --md-sys-motion-duration-long3: var(--md-sys-motion-duration-550);
+    --md-sys-motion-duration-long4: var(--md-sys-motion-duration-600);
+    --md-sys-motion-duration-extra-long1: var(--md-sys-motion-duration-700);
+    --md-sys-motion-duration-extra-long2: var(--md-sys-motion-duration-800);
+    --md-sys-motion-duration-extra-long3: var(--md-sys-motion-duration-900);
+    --md-sys-motion-duration-extra-long4: var(--md-sys-motion-duration-1000);
+
     /* State tokens */
     /* Dragged state layer opacity */
     --md-sys-state-dragged-state-layer-opacity: 0.1599999964237213;
@@ -676,6 +748,15 @@
     --md-sys-state-focus-state-layer-opacity: 0.11999999731779099;
     /* Hover state layer opacity */
     --md-sys-state-hover-state-layer-opacity: 0.07999999821186066;
+    /*
+     * Disabled state layer and container opacity were missing from this
+     * vendored snapshot even though a dozen component recipes already
+     * referenced them with an inline `0.38` fallback; every reference
+     * silently used that literal instead of these tokens. 0.38 is the
+     * published Material 3 constant for both.
+     */
+    --md-sys-state-disabled-state-layer-opacity: 0.38;
+    --md-sys-state-disabled-container-opacity: 0.38;
 
     /* Elevation tokens */
     /* Surface tint color */
@@ -932,6 +1013,111 @@
    * Elevation shadows are zeroed throughout, since tonal/shadow elevation
    * isn't part of the forced-colors palette either.
    */
+
+  /*
+   * Scoped type scale. An element marked data-rc-type-scale multiplies every
+   * Material type size and line height beneath it by --rc-type-scale
+   * (default 1), for a region such as a hands-busy reading view that needs
+   * larger text than the rest of the page. Tokens set on the theme root are
+   * resolved there, so the scaled values are derived again on the marked
+   * element; bridge.css does the same for the RC text tokens built on them.
+   */
+  /* A marked theme root itself must outrank its own token rule above. */
+  :where(.rc-theme-material [data-rc-type-scale], :host(.rc-theme-material) [data-rc-type-scale]),
+  .rc-theme-material[data-rc-type-scale],
+  :host(.rc-theme-material[data-rc-type-scale]) {
+    --md-sys-typescale-display-large-size: calc(
+      var(--md-sys-typescale-display-large-size-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-display-large-line-height: calc(
+      var(--md-sys-typescale-display-large-line-height-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-display-medium-size: calc(
+      var(--md-sys-typescale-display-medium-size-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-display-medium-line-height: calc(
+      var(--md-sys-typescale-display-medium-line-height-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-display-small-size: calc(
+      var(--md-sys-typescale-display-small-size-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-display-small-line-height: calc(
+      var(--md-sys-typescale-display-small-line-height-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-headline-large-size: calc(
+      var(--md-sys-typescale-headline-large-size-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-headline-large-line-height: calc(
+      var(--md-sys-typescale-headline-large-line-height-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-headline-medium-size: calc(
+      var(--md-sys-typescale-headline-medium-size-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-headline-medium-line-height: calc(
+      var(--md-sys-typescale-headline-medium-line-height-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-headline-small-size: calc(
+      var(--md-sys-typescale-headline-small-size-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-headline-small-line-height: calc(
+      var(--md-sys-typescale-headline-small-line-height-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-title-large-size: calc(
+      var(--md-sys-typescale-title-large-size-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-title-large-line-height: calc(
+      var(--md-sys-typescale-title-large-line-height-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-title-medium-size: calc(
+      var(--md-sys-typescale-title-medium-size-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-title-medium-line-height: calc(
+      var(--md-sys-typescale-title-medium-line-height-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-title-small-size: calc(
+      var(--md-sys-typescale-title-small-size-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-title-small-line-height: calc(
+      var(--md-sys-typescale-title-small-line-height-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-body-large-size: calc(
+      var(--md-sys-typescale-body-large-size-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-body-large-line-height: calc(
+      var(--md-sys-typescale-body-large-line-height-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-body-medium-size: calc(
+      var(--md-sys-typescale-body-medium-size-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-body-medium-line-height: calc(
+      var(--md-sys-typescale-body-medium-line-height-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-body-small-size: calc(
+      var(--md-sys-typescale-body-small-size-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-body-small-line-height: calc(
+      var(--md-sys-typescale-body-small-line-height-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-label-large-size: calc(
+      var(--md-sys-typescale-label-large-size-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-label-large-line-height: calc(
+      var(--md-sys-typescale-label-large-line-height-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-label-medium-size: calc(
+      var(--md-sys-typescale-label-medium-size-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-label-medium-line-height: calc(
+      var(--md-sys-typescale-label-medium-line-height-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-label-small-size: calc(
+      var(--md-sys-typescale-label-small-size-value) * var(--rc-type-scale, 1)
+    );
+    --md-sys-typescale-label-small-line-height: calc(
+      var(--md-sys-typescale-label-small-line-height-value) * var(--rc-type-scale, 1)
+    );
+  }
+
   @media (forced-colors: active) {
     .rc-theme-material,
     :host(.rc-theme-material) {