@rcarls/rc-theme-substrate 0.3.0

package/README.md

@@ -0,0 +1,73 @@
+# `@rcarls/rc-theme-substrate`
+
+Lightweight CSS reference theme for app-oriented `rc-webcomponents` layouts.
+
+Docs: [https://richardcarls.github.io/rc-webcomponents/guide/theme-previews](https://richardcarls.github.io/rc-webcomponents/guide/theme-previews).
+
+It is a CSS-only, app-oriented foundation theme: orange primary color,
+neutral surfaces, compact controls, system-color fallbacks, and a small set of
+component polish rules that demonstrate how to build a branded theme without
+copying the heavier Material package.
+
+## Installation
+
+```sh
+yarn add @rcarls/rc-theme-substrate
+```
+
+## Full reference theme
+
+Import the full theme bundle:
+
+```css
+@import '@rcarls/rc-theme-substrate/theme.css';
+```
+
+Apply the theme class to your app shell or any subtree:
+
+```html
+<main class="rc-theme-substrate">
+  <rc-select>...</rc-select>
+  <rc-dialog>...</rc-dialog>
+</main>
+```
+
+## Build your own theme from it
+
+Substrate is intentionally token-first. To use it as a branded foundation,
+copy the `bridge.css` pattern and override the public semantic tokens at your
+theme boundary.
+
+```css
+@import '@rcarls/rc-theme-substrate/bridge.css';
+@import '@rcarls/rc-theme-substrate/components.css';
+
+.my-product-theme {
+  --substrate-primary: oklch(58% 0.19 275);
+  --substrate-radius-md: 0.5rem;
+  --substrate-font-family: Inter, system-ui, sans-serif;
+}
+```
+
+Selective component styles are exported for apps that want only part of the
+reference layer:
+
+```css
+@import '@rcarls/rc-theme-substrate/bridge.css';
+@import '@rcarls/rc-theme-substrate/components/select.css';
+@import '@rcarls/rc-theme-substrate/components/dialog.css';
+```
+
+## View transitions
+
+Substrate includes stable CSS hooks for apps that opt into View Transitions,
+but it does not start transitions or require browser support:
+
+```css
+.rc-theme-substrate [data-rc-view-transition='panel'] {
+  --rc-view-transition-name: rc-panel;
+}
+```
+
+Application code remains responsible for deciding when to call
+`document.startViewTransition()`.

package/bridge.css

@@ -0,0 +1,106 @@
+@layer rc-theme-substrate.defaults, rc-theme-substrate.bridge, rc-theme-substrate.components;
+
+@layer rc-theme-substrate.bridge {
+  /*
+   * Maps Substrate's small brand token set to the rc-webcomponents public
+   * styling contract. Consumers can replace --substrate-* values and keep this
+   * file as their bridge.
+   */
+  .rc-theme-substrate,
+  :host(.rc-theme-substrate) {
+    --rc-surface: var(--substrate-surface, Canvas);
+    --rc-field: var(--substrate-field, Field);
+    --rc-button-bg: var(--substrate-surface-raised, ButtonFace);
+    --rc-field-text: var(--substrate-on-surface, FieldText);
+    --rc-button-text: var(--substrate-on-surface, ButtonText);
+    --rc-highlight: var(--substrate-primary-container, Highlight);
+    --rc-highlight-text: var(--substrate-on-primary-container, HighlightText);
+    --rc-text-disabled: var(--substrate-on-surface-muted, GrayText);
+    --rc-accent: var(--substrate-primary, Highlight);
+    --rc-border-color: var(--substrate-border-color, ButtonBorder);
+    --rc-border-width: 1px;
+    --rc-border-style: solid;
+    --rc-border: var(--rc-border-width) var(--rc-border-style) var(--rc-border-color);
+    --rc-shadow: var(--substrate-shadow-md, 0 2px 8px rgb(0 0 0 / 15%));
+    --rc-font-family: var(--substrate-font-family, inherit);
+    --rc-font-size: var(--substrate-font-size, 1em);
+    --rc-font-weight: var(--substrate-font-weight, 400);
+    --rc-line-height: var(--substrate-line-height, normal);
+    --rc-control-block-size: var(--substrate-control-block-size, 2.5rem);
+    --rc-control-padding-block: var(--substrate-control-padding-block, 0.5rem);
+    --rc-control-padding-inline: var(--substrate-control-padding-inline, 0.75rem);
+    --rc-control-gap: var(--substrate-control-gap, 0.5rem);
+    --rc-item-padding-block: var(--substrate-item-padding-block, 0.55rem);
+    --rc-item-padding-inline: var(--substrate-item-padding-inline, 0.75rem);
+    --rc-item-gap: var(--substrate-item-gap, 0.5rem);
+    --rc-radius-sm: var(--substrate-radius-sm, 0.25rem);
+    --rc-radius-md: var(--substrate-radius-md, 0.5rem);
+    --rc-control-radius: var(--substrate-radius-md, 0.5rem);
+    --rc-focus-ring: var(--substrate-focus-ring, 2px solid Highlight);
+    --rc-focus-ring-offset: var(--substrate-focus-ring-offset, 2px);
+    --rc-disabled-opacity: var(--substrate-disabled-opacity, 0.52);
+    --rc-motion-duration: var(--substrate-motion-duration, 160ms);
+  }
+
+  .rc-theme-substrate rc-listbox,
+  :host(.rc-theme-substrate) rc-listbox,
+  .rc-theme-substrate rc-menu,
+  :host(.rc-theme-substrate) rc-menu {
+    --rc-listbox-option-gap: var(--substrate-item-gap, 0.5rem);
+    --rc-listbox-option-min-block-size: 2.25rem;
+    --rc-listbox-option-padding-block: var(--substrate-item-padding-block, 0.55rem);
+    --rc-listbox-option-padding-inline: var(--substrate-item-padding-inline, 0.75rem);
+    --rc-listbox-hover-bg: color-mix(in srgb, var(--rc-accent, Highlight) 10%, transparent);
+    --rc-listbox-hover-color: var(--rc-field-text, FieldText);
+    --rc-listbox-active-bg: color-mix(in srgb, var(--rc-accent, Highlight) 16%, transparent);
+    --rc-listbox-active-color: var(--rc-field-text, FieldText);
+    --rc-listbox-selected-bg: var(--rc-highlight, Highlight);
+    --rc-listbox-selected-color: var(--rc-highlight-text, HighlightText);
+  }
+
+  .rc-theme-substrate rc-select,
+  :host(.rc-theme-substrate) rc-select,
+  .rc-theme-substrate rc-combobox,
+  :host(.rc-theme-substrate) rc-combobox {
+    --rc-select-control-block-size: var(--rc-control-block-size);
+    --rc-select-radius: var(--rc-control-radius);
+    --rc-select-shadow: var(--rc-shadow);
+    --rc-select-listbox-radius: var(--substrate-radius-lg, 0.75rem);
+    --rc-select-listbox-border: var(--rc-border);
+    --rc-select-chip-radius: var(--substrate-radius-sm, 0.25rem);
+    --rc-combobox-control-block-size: var(--rc-control-block-size);
+    --rc-combobox-radius: var(--rc-control-radius);
+    --rc-combobox-shadow: var(--rc-shadow);
+    --rc-combobox-listbox-radius: var(--substrate-radius-lg, 0.75rem);
+    --rc-combobox-listbox-border: var(--rc-border);
+    --rc-combobox-chip-radius: var(--substrate-radius-sm, 0.25rem);
+  }
+
+  .rc-theme-substrate rc-slider,
+  :host(.rc-theme-substrate) rc-slider,
+  .rc-theme-substrate rc-range-slider,
+  :host(.rc-theme-substrate) rc-range-slider {
+    --rc-slider-track-size: 0.375rem;
+    --rc-slider-track-background: color-mix(in srgb, var(--rc-border-color) 70%, transparent);
+    --rc-slider-progress-background: var(--rc-accent);
+    --rc-slider-track-radius: 999px;
+    --rc-range-slider-accent: var(--rc-accent);
+    --rc-range-slider-track-background: color-mix(
+      in srgb,
+      var(--rc-border-color) 70%,
+      transparent
+    );
+    --rc-range-slider-thumb-background: var(--substrate-surface, Canvas);
+    --rc-range-slider-thumb-border: var(--rc-accent);
+    --rc-thumb-radius: 0.5625rem;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .rc-theme-substrate,
+    :host(.rc-theme-substrate) {
+      --substrate-motion-duration: 0ms;
+      --substrate-motion-duration-slow: 0ms;
+      --rc-motion-duration: 0ms;
+    }
+  }
+}

package/components/accordion.css

@@ -0,0 +1,119 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-accordion {
+    display: grid;
+    gap: 0.5rem;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-accordion > details,
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-accordion > rc-disclosure > details {
+    border: var(--rc-border, 1px solid ButtonBorder);
+    border-radius: var(--substrate-radius-lg, 0.75rem);
+    background: var(--substrate-surface-raised, Canvas);
+    overflow: clip;
+    transition:
+      border-color var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease),
+      box-shadow var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-accordion > details[open],
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-accordion
+    > rc-disclosure
+    > details[open] {
+    box-shadow: var(--substrate-shadow-sm, none);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-accordion summary,
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-accordion > rc-disclosure summary {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 0.75rem;
+    align-items: center;
+    min-block-size: 2.75rem;
+    padding-block: 0.75rem;
+    padding-inline: 0.875rem;
+    cursor: pointer;
+    font-weight: 650;
+    transition:
+      background-color var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease),
+      color var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-accordion summary:hover {
+    background: color-mix(in srgb, var(--rc-accent, Highlight) 8%, transparent);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-accordion summary::marker {
+    content: '';
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-accordion
+    summary::-webkit-details-marker {
+    display: none;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-accordion summary::after {
+    content: '';
+    inline-size: 0.5rem;
+    block-size: 0.5rem;
+    border-block-start: 2px solid currentColor;
+    border-inline-end: 2px solid currentColor;
+    rotate: 45deg;
+    transition:
+      rotate var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease),
+      translate var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-accordion details[open] > summary::after {
+    rotate: 135deg;
+    translate: 0 -0.125rem;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-accordion details > :not(summary) {
+    display: flow-root;
+    padding-inline: 0.875rem;
+    opacity: 1;
+    transition:
+      opacity var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease),
+      translate var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease);
+  }
+
+  @supports selector(::details-content) {
+    :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-accordion details {
+      interpolate-size: allow-keywords;
+    }
+
+    :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-accordion details::details-content {
+      block-size: 0;
+      content-visibility: hidden;
+      opacity: 0;
+      overflow: clip;
+      transition:
+        block-size var(--substrate-motion-duration-slow, 240ms)
+          var(--substrate-motion-easing, ease),
+        content-visibility var(--substrate-motion-duration-slow, 240ms)
+          var(--substrate-motion-easing, ease) allow-discrete,
+        opacity var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease);
+      transition-behavior: allow-discrete;
+    }
+
+    :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+      rc-accordion
+      details[open]::details-content {
+      block-size: auto;
+      content-visibility: visible;
+      opacity: 1;
+    }
+  }
+
+  @starting-style {
+    :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+      rc-accordion
+      details[open]
+      > :not(summary) {
+      opacity: 0;
+      translate: 0 -0.25rem;
+    }
+  }
+}

package/components/app-bar.css

@@ -0,0 +1,25 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-app-bar {
+    --rc-app-bar-background: color-mix(
+      in srgb,
+      var(--substrate-surface, Canvas) 88%,
+      transparent
+    );
+    --rc-app-bar-color: var(--rc-field-text, CanvasText);
+    --rc-app-bar-scroll-divider: var(--rc-border, 1px solid ButtonBorder);
+    --rc-app-bar-shadow: none;
+    -webkit-backdrop-filter: blur(16px);
+    backdrop-filter: blur(16px);
+    font-family: var(--rc-font-family, inherit);
+    position: relative;
+    z-index: var(--rc-app-bar-z-index, 1);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-app-bar[data-scrolled] {
+    --rc-app-bar-shadow: var(--substrate-shadow-sm, none);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-app-bar :is(button, [role='button']) {
+    border-radius: var(--substrate-radius-md, 0.5rem);
+  }
+}

package/components/combobox.css

@@ -0,0 +1,54 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-combobox {
+    display: inline-block;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-combobox::part(anchor) {
+    min-block-size: var(--rc-control-block-size, 2.5rem);
+    border: var(--rc-border, 1px solid ButtonBorder);
+    border-radius: var(--rc-control-radius, 0.5rem);
+    background: var(--rc-field, Field);
+    color: var(--rc-field-text, FieldText);
+    transition:
+      border-color var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease),
+      box-shadow var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-combobox::part(anchor):hover {
+    border-color: color-mix(in srgb, var(--rc-accent, Highlight) 55%, var(--rc-border-color));
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-combobox::part(anchor):focus-within {
+    outline: var(--rc-focus-ring, 2px solid Highlight);
+    outline-offset: var(--rc-focus-ring-offset, 2px);
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--rc-accent, Highlight) 16%, transparent);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-combobox::part(listbox) {
+    --rc-listbox-option-gap: var(--substrate-item-gap, 0.5rem);
+    --rc-listbox-option-min-block-size: 2.25rem;
+    --rc-listbox-option-padding-block: var(--substrate-item-padding-block, 0.55rem);
+    --rc-listbox-option-padding-inline: var(--substrate-item-padding-inline, 0.75rem);
+    --rc-listbox-hover-bg: color-mix(in srgb, var(--rc-accent, Highlight) 10%, transparent);
+    --rc-listbox-hover-color: var(--rc-field-text, FieldText);
+    --rc-listbox-active-bg: color-mix(in srgb, var(--rc-accent, Highlight) 16%, transparent);
+    --rc-listbox-active-color: var(--rc-field-text, FieldText);
+    --rc-listbox-selected-bg: var(--rc-highlight, Highlight);
+    --rc-listbox-selected-color: var(--rc-highlight-text, HighlightText);
+    border: var(--rc-border, 1px solid ButtonBorder);
+    border-radius: var(--substrate-radius-lg, 0.75rem);
+    background: var(--substrate-surface-raised, Canvas);
+    box-shadow: var(--rc-shadow, none);
+    padding-block: 0.25rem;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-combobox::part(toggle) {
+    border-radius: var(--substrate-radius-sm, 0.25rem);
+    transition: background-color var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-combobox::part(toggle):hover,
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-combobox[open]::part(toggle) {
+    background: color-mix(in srgb, var(--rc-accent, Highlight) 12%, transparent);
+  }
+}

package/components/dialog.css

@@ -0,0 +1,35 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-dialog > dialog {
+    border: var(--rc-border, 1px solid ButtonBorder);
+    border-radius: var(--substrate-radius-xl, 1rem);
+    background: var(--substrate-surface-raised, Canvas);
+    color: var(--rc-field-text, CanvasText);
+    box-shadow: var(--substrate-shadow-lg, none);
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    transition:
+      display var(--substrate-motion-duration-slow, 240ms) allow-discrete,
+      overlay var(--substrate-motion-duration-slow, 240ms) allow-discrete,
+      opacity var(--substrate-motion-duration-slow, 240ms) var(--substrate-motion-easing, ease),
+      transform var(--substrate-motion-duration-slow, 240ms) var(--substrate-motion-easing, ease);
+    transition-behavior: allow-discrete;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-dialog > dialog::backdrop {
+    background: color-mix(in srgb, CanvasText 32%, transparent);
+    transition: opacity var(--substrate-motion-duration-slow, 240ms)
+      var(--substrate-motion-easing, ease);
+  }
+
+  @starting-style {
+    :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-dialog > dialog[open] {
+      opacity: 0;
+      transform: translateY(0.5rem) scale(0.98);
+    }
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-dialog > dialog:not([open]) {
+    opacity: 0;
+    transform: translateY(0.5rem) scale(0.98);
+  }
+}

package/components/disclosure.css

@@ -0,0 +1,130 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-disclosure {
+    display: block;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-disclosure > details {
+    border: var(--rc-border, 1px solid ButtonBorder);
+    border-radius: var(--substrate-radius-lg, 0.75rem);
+    background: var(--substrate-surface-raised, Canvas);
+    overflow: clip;
+    transition:
+      border-color var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease),
+      box-shadow var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-disclosure > details[open] {
+    box-shadow: var(--substrate-shadow-sm, none);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-disclosure > details > summary {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 0.75rem;
+    align-items: center;
+    min-block-size: 2.75rem;
+    padding-block: 0.75rem;
+    padding-inline: 0.875rem;
+    cursor: pointer;
+    font-weight: 650;
+    transition:
+      background-color var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease),
+      color var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-disclosure
+    > details
+    > summary::marker {
+    content: '';
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-disclosure
+    > details
+    > summary::-webkit-details-marker {
+    display: none;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-disclosure
+    > details
+    > summary::after {
+    content: '';
+    inline-size: 0.5rem;
+    block-size: 0.5rem;
+    border-block-start: 2px solid currentColor;
+    border-inline-end: 2px solid currentColor;
+    rotate: 45deg;
+    transition:
+      rotate var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease),
+      translate var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-disclosure
+    > details[open]
+    > summary::after {
+    rotate: 135deg;
+    translate: 0 -0.125rem;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-disclosure
+    > details
+    > summary:hover {
+    background: color-mix(in srgb, var(--rc-accent, Highlight) 8%, transparent);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-disclosure
+    > details
+    > :not(summary) {
+    display: flow-root;
+    padding-inline: 0.875rem;
+    opacity: 1;
+    transition:
+      opacity var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease),
+      translate var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease);
+  }
+
+  @supports selector(::details-content) {
+    :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-disclosure > details {
+      interpolate-size: allow-keywords;
+    }
+
+    :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+      rc-disclosure
+      > details::details-content {
+      block-size: 0;
+      content-visibility: hidden;
+      opacity: 0;
+      overflow: clip;
+      transition:
+        block-size var(--substrate-motion-duration-slow, 240ms)
+          var(--substrate-motion-easing, ease),
+        content-visibility var(--substrate-motion-duration-slow, 240ms)
+          var(--substrate-motion-easing, ease) allow-discrete,
+        opacity var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease);
+      transition-behavior: allow-discrete;
+    }
+
+    :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+      rc-disclosure
+      > details[open]::details-content {
+      block-size: auto;
+      content-visibility: visible;
+      opacity: 1;
+    }
+  }
+
+  @starting-style {
+    :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+      rc-disclosure
+      > details[open]
+      > :not(summary) {
+      opacity: 0;
+      translate: 0 -0.25rem;
+    }
+  }
+}

package/components/fab.css

@@ -0,0 +1,23 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-fab {
+    --rc-fab-bg: var(--rc-accent, Highlight);
+    --rc-fab-color: var(--substrate-on-primary, HighlightText);
+    --rc-fab-radius: var(--substrate-radius-lg, 0.75rem);
+    --rc-fab-shadow: var(--substrate-shadow-md, none);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-fab > button {
+    transition:
+      box-shadow var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease),
+      transform var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-fab > button:hover {
+    box-shadow: var(--substrate-shadow-lg, none);
+    transform: translateY(-1px);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-fab > button:active {
+    transform: translateY(0);
+  }
+}

package/components/listbox.css

@@ -0,0 +1,27 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-listbox {
+    --rc-listbox-option-gap: var(--substrate-item-gap, 0.5rem);
+    --rc-listbox-option-min-block-size: 2.25rem;
+    --rc-listbox-option-padding-block: var(--substrate-item-padding-block, 0.55rem);
+    --rc-listbox-option-padding-inline: var(--substrate-item-padding-inline, 0.75rem);
+    --rc-listbox-option-transition:
+      background-color var(--substrate-motion-duration, 160ms)
+        var(--substrate-motion-easing, ease),
+      color var(--substrate-motion-duration, 160ms) var(--substrate-motion-easing, ease);
+    --rc-listbox-hover-bg: color-mix(in srgb, var(--rc-accent, Highlight) 10%, transparent);
+    --rc-listbox-hover-color: var(--rc-field-text, FieldText);
+    --rc-listbox-active-bg: color-mix(in srgb, var(--rc-accent, Highlight) 16%, transparent);
+    --rc-listbox-active-color: var(--rc-field-text, FieldText);
+    --rc-listbox-selected-bg: var(--rc-highlight, Highlight);
+    --rc-listbox-selected-color: var(--rc-highlight-text, HighlightText);
+    display: block;
+    border-radius: var(--substrate-radius-lg, 0.75rem);
+    font: var(--rc-font-weight, 400) var(--rc-font-size, 1em) / var(--rc-line-height, normal)
+      var(--rc-font-family, inherit);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-listbox[checkmark]
+    [part~='option-checkmark'] {
+    color: var(--rc-accent, Highlight);
+  }
+}

package/components/markdown-editor.css

@@ -0,0 +1,15 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-markdown-editor {
+    --rme-padding: 0.75rem;
+    --rme-border: var(--rc-border, 1px solid ButtonBorder);
+    --rme-radius: var(--substrate-radius-lg, 0.75rem);
+    --rme-background: var(--rc-field, Field);
+    --rme-color: var(--rc-field-text, FieldText);
+    --rme-toolbar-background: var(--substrate-surface-raised, Canvas);
+    --rme-toolbar-border: var(--rc-border, 1px solid ButtonBorder);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-markdown-editor::part(rich-view) {
+    line-height: var(--rc-line-height, normal);
+  }
+}

package/components/menu-button.css

@@ -0,0 +1,17 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-menu-button {
+    --rc-menu-button-trigger-background: var(--rc-button-bg, ButtonFace);
+    --rc-menu-button-trigger-color: var(--rc-button-text, ButtonText);
+    --rc-menu-button-trigger-hover-background: color-mix(
+      in srgb,
+      var(--rc-accent, Highlight) 10%,
+      var(--rc-button-bg, ButtonFace)
+    );
+    --rc-menu-button-trigger-open-background: color-mix(
+      in srgb,
+      var(--rc-accent, Highlight) 16%,
+      var(--rc-button-bg, ButtonFace)
+    );
+    display: inline-block;
+  }
+}

package/components/menu.css

@@ -0,0 +1,24 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-menu {
+    --rc-menu-item-gap: var(--substrate-item-gap, 0.5rem);
+    --rc-menu-item-min-block-size: 2.25rem;
+    --rc-menu-item-padding-block: var(--substrate-item-padding-block, 0.55rem);
+    --rc-menu-item-padding-inline: var(--substrate-item-padding-inline, 0.75rem);
+    --rc-menu-hover-bg: color-mix(in srgb, var(--rc-accent, Highlight) 10%, transparent);
+    --rc-menu-active-bg: color-mix(in srgb, var(--rc-accent, Highlight) 16%, transparent);
+    --rc-menu-check-size: 1.25rem;
+    --rc-menu-submenu-indicator-color: var(--rc-accent, Highlight);
+    display: inline-block;
+    border: var(--rc-border, 1px solid ButtonBorder);
+    border-radius: var(--substrate-radius-lg, 0.75rem);
+    background: var(--substrate-surface-raised, Canvas);
+    box-shadow: var(--rc-shadow, none);
+    padding-block: 0.25rem;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-menu [data-group-label] {
+    color: var(--substrate-on-surface-muted, GrayText);
+    font-size: 0.8em;
+    font-weight: 650;
+  }
+}

package/components/menubar.css

@@ -0,0 +1,17 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-menubar {
+    --rc-menubar-item-block-size: 2.25rem;
+    --rc-menubar-item-padding-inline: 0.75rem;
+    --rc-menubar-item-background: transparent;
+    --rc-menubar-item-open-background: color-mix(
+      in srgb,
+      var(--rc-accent, Highlight) 14%,
+      transparent
+    );
+    display: inline-block;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-menubar::part(root) {
+    gap: 0.125rem;
+  }
+}

package/components/modes.css

@@ -0,0 +1,24 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) {
+    background: var(--substrate-surface, Canvas);
+    color: var(--substrate-on-surface, CanvasText);
+    font-family: var(--rc-font-family, inherit);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) *,
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) *::before,
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) *::after {
+    box-sizing: border-box;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) :focus-visible {
+    outline: var(--rc-focus-ring, 2px solid Highlight);
+    outline-offset: var(--rc-focus-ring-offset, 2px);
+  }
+
+  @supports (view-transition-name: none) {
+    :where(.rc-theme-substrate, :host(.rc-theme-substrate)) [data-rc-view-transition] {
+      view-transition-name: var(--rc-view-transition-name, none);
+    }
+  }
+}

package/components/range-slider.css

@@ -0,0 +1,18 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-range-slider::part(thumb) {
+    box-shadow: var(--substrate-shadow-sm, none);
+    transition:
+      border-color var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease),
+      box-shadow var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease),
+      scale var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-range-slider::part(thumb):hover {
+    scale: 1.04;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-range-slider::part(value-display) {
+    color: var(--substrate-on-surface-muted, GrayText);
+    font-variant-numeric: tabular-nums;
+  }
+}

package/components/search-bar.css

@@ -0,0 +1,28 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-search-bar {
+    display: inline-block;
+    --rc-search-bar-radius: var(--substrate-radius-lg, 0.75rem);
+    --rc-search-bar-border: var(--rc-border, 1px solid ButtonBorder);
+    --rc-search-bar-shadow: var(--substrate-shadow-sm, none);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-search-bar::part(root) {
+    background: var(--rc-field, Field);
+    transition:
+      border-color var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease),
+      box-shadow var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-search-bar:hover::part(root) {
+    border-color: color-mix(in srgb, var(--rc-accent, Highlight) 55%, var(--rc-border-color));
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-search-bar:focus-within::part(root) {
+    outline: var(--rc-focus-ring, 2px solid Highlight);
+    outline-offset: var(--rc-focus-ring-offset, 2px);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-search-bar > input[type='search']:focus-visible {
+    outline: none;
+  }
+}

package/components/select.css

@@ -0,0 +1,53 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-select {
+    display: inline-block;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-select::part(trigger) {
+    min-block-size: var(--rc-control-block-size, 2.5rem);
+    border: var(--rc-border, 1px solid ButtonBorder);
+    border-radius: var(--rc-control-radius, 0.5rem);
+    background: var(--rc-field, Field);
+    color: var(--rc-field-text, FieldText);
+    transition:
+      border-color var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease),
+      box-shadow var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease),
+      background-color var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-select::part(trigger):hover {
+    border-color: color-mix(in srgb, var(--rc-accent, Highlight) 55%, var(--rc-border-color));
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-select::part(trigger):focus-visible,
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-select::part(trigger)[aria-expanded='true'] {
+    outline: var(--rc-focus-ring, 2px solid Highlight);
+    outline-offset: var(--rc-focus-ring-offset, 2px);
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--rc-accent, Highlight) 16%, transparent);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-select::part(listbox) {
+    --rc-listbox-option-gap: var(--substrate-item-gap, 0.5rem);
+    --rc-listbox-option-min-block-size: 2.25rem;
+    --rc-listbox-option-padding-block: var(--substrate-item-padding-block, 0.55rem);
+    --rc-listbox-option-padding-inline: var(--substrate-item-padding-inline, 0.75rem);
+    --rc-listbox-hover-bg: color-mix(in srgb, var(--rc-accent, Highlight) 10%, transparent);
+    --rc-listbox-hover-color: var(--rc-field-text, FieldText);
+    --rc-listbox-active-bg: color-mix(in srgb, var(--rc-accent, Highlight) 16%, transparent);
+    --rc-listbox-active-color: var(--rc-field-text, FieldText);
+    --rc-listbox-selected-bg: var(--rc-highlight, Highlight);
+    --rc-listbox-selected-color: var(--rc-highlight-text, HighlightText);
+    border: var(--rc-border, 1px solid ButtonBorder);
+    border-radius: var(--substrate-radius-lg, 0.75rem);
+    background: var(--substrate-surface-raised, Canvas);
+    box-shadow: var(--rc-shadow, none);
+    padding-block: 0.25rem;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-select::part(chip) {
+    border-radius: var(--substrate-radius-sm, 0.25rem);
+    background: var(--rc-highlight, Highlight);
+    color: var(--rc-highlight-text, HighlightText);
+  }
+}

package/components/slider.css

@@ -0,0 +1,10 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-slider::part(value-display) {
+    color: var(--substrate-on-surface-muted, GrayText);
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-slider input[type='range'] {
+    accent-color: var(--rc-accent, Highlight);
+  }
+}

package/components/splitter.css

@@ -0,0 +1,14 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-splitter {
+    --rc-splitter-separator-color: color-mix(
+      in srgb,
+      var(--rc-accent, Highlight) 8%,
+      Canvas
+    );
+    --rc-splitter-handle-color: color-mix(
+      in srgb,
+      var(--rc-accent, Highlight) 45%,
+      ButtonBorder
+    );
+  }
+}

package/components/textarea.css

@@ -0,0 +1,20 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-textarea {
+    --rc-textarea-padding: 0.75rem;
+    --rc-textarea-border: var(--rc-border, 1px solid ButtonBorder);
+    --rc-textarea-radius: var(--substrate-radius-lg, 0.75rem);
+    --rc-textarea-background: var(--rc-field, Field);
+    --rc-textarea-color: var(--rc-field-text, FieldText);
+    font-family: var(--rc-font-family, inherit);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-textarea::part(root) {
+    transition:
+      border-color var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease),
+      box-shadow var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-textarea::part(root):focus-within {
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--rc-accent, Highlight) 16%, transparent);
+  }
+}

package/components/toolbar.css

@@ -0,0 +1,31 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-toolbar {
+    display: inline-block;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-toolbar::part(root) {
+    gap: 0.125rem;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-toolbar > button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--substrate-radius-md, 0.5rem);
+    line-height: 1;
+    transition:
+      background-color var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease),
+      color var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-toolbar > button:hover {
+    background: color-mix(in srgb, var(--rc-accent, Highlight) 10%, transparent);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-toolbar
+    > button[aria-pressed='true'] {
+    background: var(--rc-highlight, Highlight);
+    color: var(--rc-highlight-text, HighlightText);
+  }
+}

package/components/transfer-list.css

@@ -0,0 +1,30 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-transfer-list {
+    --rc-transfer-list-gap: 1rem;
+    --rc-transfer-list-panel-border: var(--rc-border, 1px solid ButtonBorder);
+    --rc-transfer-list-panel-radius: var(--substrate-radius-lg, 0.75rem);
+    --rc-transfer-list-panel-background: var(--substrate-surface-raised, Canvas);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-transfer-list::part(panel),
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-transfer-list::part(listbox) {
+    box-shadow: var(--substrate-shadow-sm, none);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-transfer-list::part(listbox) {
+    --rc-listbox-option-gap: var(--substrate-item-gap, 0.5rem);
+    --rc-listbox-option-min-block-size: 2.25rem;
+    --rc-listbox-option-padding-block: var(--substrate-item-padding-block, 0.55rem);
+    --rc-listbox-option-padding-inline: var(--substrate-item-padding-inline, 0.75rem);
+    --rc-listbox-hover-bg: color-mix(in srgb, var(--rc-accent, Highlight) 10%, transparent);
+    --rc-listbox-hover-color: var(--rc-field-text, FieldText);
+    --rc-listbox-active-bg: color-mix(in srgb, var(--rc-accent, Highlight) 16%, transparent);
+    --rc-listbox-active-color: var(--rc-field-text, FieldText);
+    --rc-listbox-selected-bg: var(--rc-highlight, Highlight);
+    --rc-listbox-selected-color: var(--rc-highlight-text, HighlightText);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-transfer-list::part(button) {
+    border-radius: var(--rc-control-radius, 0.5rem);
+  }
+}

package/components/virtual-canvas.css

@@ -0,0 +1,8 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-virtual-canvas {
+    overflow: hidden;
+    border: var(--rc-border, 1px solid ButtonBorder);
+    border-radius: var(--substrate-radius-lg, 0.75rem);
+    background: var(--substrate-surface, Canvas);
+  }
+}

package/components.css

@@ -0,0 +1,23 @@
+@layer rc-theme-substrate.defaults, rc-theme-substrate.bridge, rc-theme-substrate.components;
+
+@import './components/listbox.css';
+@import './components/select.css';
+@import './components/combobox.css';
+@import './components/search-bar.css';
+@import './components/textarea.css';
+@import './components/markdown-editor.css';
+@import './components/transfer-list.css';
+@import './components/fab.css';
+@import './components/app-bar.css';
+@import './components/menu.css';
+@import './components/menu-button.css';
+@import './components/menubar.css';
+@import './components/toolbar.css';
+@import './components/slider.css';
+@import './components/range-slider.css';
+@import './components/splitter.css';
+@import './components/dialog.css';
+@import './components/disclosure.css';
+@import './components/accordion.css';
+@import './components/virtual-canvas.css';
+@import './components/modes.css';

package/defaults.css

@@ -0,0 +1,79 @@
+@layer rc-theme-substrate.defaults, rc-theme-substrate.bridge, rc-theme-substrate.components;
+
+@layer rc-theme-substrate.defaults {
+  /*
+   * Substrate reference tokens.
+   *
+   * These defaults are scoped so applications can place the theme at any app
+   * boundary. Import bridge.css alone when providing your own --substrate-* tokens.
+   */
+  .rc-theme-substrate,
+  :host(.rc-theme-substrate) {
+    color-scheme: light dark;
+
+    --substrate-primary: light-dark(oklch(57% 0.19 48), oklch(76% 0.15 58));
+    --substrate-on-primary: light-dark(oklch(99% 0.01 80), oklch(19% 0.04 45));
+    --substrate-primary-container: light-dark(oklch(94% 0.06 62), oklch(31% 0.08 48));
+    --substrate-on-primary-container: light-dark(oklch(27% 0.08 45), oklch(95% 0.05 66));
+
+    --substrate-surface: light-dark(oklch(99% 0.006 80), oklch(18% 0.012 72));
+    --substrate-surface-raised: light-dark(oklch(97% 0.012 78), oklch(23% 0.016 72));
+    --substrate-field: light-dark(oklch(100% 0 0), oklch(20% 0.014 72));
+    --substrate-on-surface: light-dark(oklch(19% 0.018 72), oklch(94% 0.01 80));
+    --substrate-on-surface-muted: light-dark(oklch(46% 0.018 72), oklch(73% 0.014 80));
+    --substrate-border-color: light-dark(oklch(83% 0.018 75), oklch(39% 0.018 72));
+    --substrate-shadow-color: light-dark(oklch(16% 0.03 60 / 18%), oklch(0% 0 0 / 42%));
+
+    --substrate-font-family:
+      Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    --substrate-font-size: 0.95rem;
+    --substrate-line-height: 1.45;
+    --substrate-font-weight: 450;
+
+    --substrate-radius-sm: 0.25rem;
+    --substrate-radius-md: 0.5rem;
+    --substrate-radius-lg: 0.75rem;
+    --substrate-radius-xl: 1rem;
+
+    --substrate-control-block-size: 2.5rem;
+    --substrate-control-padding-block: 0.5rem;
+    --substrate-control-padding-inline: 0.75rem;
+    --substrate-control-gap: 0.5rem;
+    --substrate-item-padding-block: 0.55rem;
+    --substrate-item-padding-inline: 0.75rem;
+    --substrate-item-gap: 0.5rem;
+
+    --substrate-shadow-sm: 0 1px 2px var(--substrate-shadow-color);
+    --substrate-shadow-md:
+      0 1px 2px var(--substrate-shadow-color), 0 10px 30px
+      color-mix(in oklch, var(--substrate-shadow-color) 65%, transparent);
+    --substrate-shadow-lg:
+      0 1px 2px var(--substrate-shadow-color), 0 18px 48px
+      color-mix(in oklch, var(--substrate-shadow-color) 80%, transparent);
+
+    --substrate-focus-ring: 2px solid var(--substrate-primary);
+    --substrate-focus-ring-offset: 2px;
+    --substrate-motion-duration: 160ms;
+    --substrate-motion-duration-slow: 240ms;
+    --substrate-motion-easing: cubic-bezier(0.2, 0, 0, 1);
+    --substrate-disabled-opacity: 0.52;
+  }
+
+  @media (forced-colors: active) {
+    .rc-theme-substrate,
+    :host(.rc-theme-substrate) {
+      --substrate-primary: Highlight;
+      --substrate-on-primary: HighlightText;
+      --substrate-primary-container: Highlight;
+      --substrate-on-primary-container: HighlightText;
+      --substrate-surface: Canvas;
+      --substrate-surface-raised: Canvas;
+      --substrate-field: Field;
+      --substrate-on-surface: CanvasText;
+      --substrate-on-surface-muted: GrayText;
+      --substrate-border-color: ButtonBorder;
+      --substrate-shadow-color: transparent;
+      --substrate-focus-ring: 2px solid Highlight;
+    }
+  }
+}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@rcarls/rc-theme-substrate",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.3.0",
+  "description": "Lightweight CSS reference theme for app-oriented rc-webcomponents layouts.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
+    "directory": "packages/rc-theme-substrate"
+  },
+  "homepage": "https://richardcarls.github.io/rc-webcomponents/guide/theme-previews",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": "./bridge.css",
+    "./bridge.css": "./bridge.css",
+    "./defaults.css": "./defaults.css",
+    "./components.css": "./components.css",
+    "./components/*.css": "./components/*.css",
+    "./theme.css": "./theme.css"
+  },
+  "files": [
+    "*.css",
+    "components",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "echo 'CSS-only package, no build step'",
+    "test:browser": "vitest --run",
+    "test:browser:chrome": "vitest --run --project=chromium",
+    "test:browser:firefox": "vitest --run --project=firefox"
+  },
+  "devDependencies": {
+    "@vitest/browser-playwright": "4.1.5",
+    "playwright": "^1.56.0",
+    "vite": "^7.1.7",
+    "vitest": "^4.0.6"
+  }
+}

package/theme.css

@@ -0,0 +1,3 @@
+@import './defaults.css';
+@import './bridge.css';
+@import './components.css';