Material theme

The optional @rcarls/rc-theme-material package maps Material 3 design tokens to the RC token layer. It changes styling only; no behavior changes.

For composing components into a Material 3 app, including adaptive layouts, dialogs, sheets, lists and navigation, see the package's design guide.

npm install @rcarls/rc-theme-material

Import the full theme bundle:

@import '@rcarls/rc-theme-material/theme.css';

Or import layers selectively if your app already provides Material system tokens:

@import '@rcarls/rc-theme-material/bridge.css';
@import '@rcarls/rc-theme-material/components.css';

Native controls and CSS-only recipes are independent opt-ins. Add native.css for ordinary controls inside the theme scope and css-components.css (or a selective css-components/<name>.css) for native HTML using the documented classes:

@import '@rcarls/rc-theme-material/bridge.css';
@import '@rcarls/rc-theme-material/native.css';
@import '@rcarls/rc-theme-material/css-components.css';

components.css includes the .rc-state-layer utility. Apply that class to interactive elements that already own their border radius when you want a CSS-only Material state layer.

Apply the rc-theme-material class to a container to scope the theme:

<div class="rc-theme-material">
  <rc-select>...</rc-select>
  <rc-fab>...</rc-fab>
</div>

Scale text within a Material theme region

Add data-rc-type-scale to a region and set --rc-type-scale to a positive number. The full theme.css bundle multiplies Material type sizes and line heights, along with RC text tokens, inside that region. Text outside it retains its existing scale.

<div class="rc-theme-material">
  <main data-rc-type-scale style="--rc-type-scale: 1.25">
    <p>Reading view</p>
    <rc-button><button type="button">Continue</button></rc-button>
  </main>
</div>

Place the marker on the rc-theme-material root to scale the whole theme. A nested marker uses its own factor in place of the outer factor. If you import only bridge.css with your own Material tokens, the marker scales RC text tokens from those values; your application's Material tokens remain unchanged. When both final Material type tokens and their *-value source tokens are present, the source tokens supply the scale baseline.

For rc-button[icon-only], Material supplies rc-button--extra-small, rc-button--medium, rc-button--large, and rc-button--extra-large size classes. Combine them with rc-button--narrow or rc-button--wide to change the container width while keeping the selected height and icon size. The unmodified size is the Material small icon button. rc-menu-button[icon-only] also supports rc-menu-button--narrow for a narrow small trigger. All visually compact variants retain the component package's independent 3rem activation area. Direct native buttons in an rc-app-bar's leading and trailing slots use the same small icon-button geometry, while nested component controls retain their own sizing.

Scale text within a Material theme region​

Scale text within a Material theme region