@rcarls/rc-theme-substrate 0.0.0-next-20260921045401

package/components/select.css

@@ -0,0 +1,74 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    :is(rc-select, rc-combobox)[popup-mode='dialog']::part(dialog) {
+    position: fixed;
+    inset: auto;
+    top: var(--rc-dialog-visual-viewport-top, 0);
+    left: var(--rc-dialog-visual-viewport-left, 0);
+    box-sizing: border-box;
+    inline-size: var(--rc-dialog-visual-viewport-width, 100dvw);
+    block-size: var(--rc-dialog-visual-viewport-height, 100dvh);
+    max-inline-size: none;
+    max-block-size: none;
+    margin: 0;
+    padding-block: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-bottom));
+    padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right));
+    resize: none;
+    overflow: hidden;
+    border-radius: 0;
+    box-shadow: none;
+    transform: none;
+  }
+
+  :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(--rc-list-item-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/snackbar.css

@@ -0,0 +1,23 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-snackbar {
+    --rc-snackbar-inset-block-end: 1rem;
+    --rc-snackbar-min-block-size: 3rem;
+    --rc-snackbar-max-inline-size: 30rem;
+    --rc-snackbar-padding-block: 0.75rem;
+    --rc-snackbar-padding-inline: 1rem;
+    --rc-snackbar-border: 0;
+    --rc-snackbar-radius: var(--substrate-radius-md, 0.5rem);
+    --rc-snackbar-bg: var(--substrate-inverse-surface, CanvasText);
+    --rc-snackbar-color: var(--substrate-inverse-on-surface, Canvas);
+    --rc-snackbar-action-color: var(--substrate-inverse-on-surface, Canvas);
+    --rc-snackbar-action-border: 0;
+    --rc-snackbar-action-radius: 9999px;
+    --rc-snackbar-action-padding-block: 0.5rem;
+    --rc-snackbar-action-padding-inline: 0.75rem;
+    --rc-snackbar-action-bg: transparent;
+    --rc-snackbar-action-font: 650 0.875rem / 1.25 var(--rc-font-family, inherit);
+    --rc-snackbar-shadow: var(--substrate-shadow-lg, var(--rc-shadow));
+    --rc-snackbar-focus-ring: var(--rc-focus-ring);
+    --rc-snackbar-focus-ring-offset: var(--rc-focus-ring-offset);
+  }
+}

package/components/splitter.css

@@ -0,0 +1,39 @@
+@layer rc-theme-substrate.components {
+  /*
+   * Geometry is deliberately left to the component's own defaults here; this
+   * theme only paints the splitter. See the matching assertion in
+   * components.test.ts.
+   */
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-splitter {
+    /*
+     * Both of these used to mix against the bare `Canvas` and `ButtonBorder`
+     * system colors, which have no value outside a browser and so could not
+     * reach the token export at all. Mixing against the theme's own surface and
+     * border keeps the intent and makes the result a real color.
+     */
+    --rc-splitter-separator-color: color-mix(
+      in srgb,
+      var(--rc-accent, Highlight) 8%,
+      var(--substrate-surface, Canvas)
+    );
+    --rc-splitter-handle-color: color-mix(
+      in srgb,
+      var(--rc-accent, Highlight) 45%,
+      var(--substrate-border-color, ButtonBorder)
+    );
+
+    --rc-splitter-handle-fill: var(--substrate-border-color, ButtonBorder);
+    --rc-splitter-handle-hover-fill: var(--rc-accent, Highlight);
+    --rc-splitter-handle-transition: var(--substrate-motion-effects-duration-default, 160ms);
+    --rc-splitter-keyline: var(--rc-border, 1px solid ButtonBorder);
+
+    --rc-splitter-collapse-button-bg: var(--substrate-surface-raised, ButtonFace);
+    --rc-splitter-collapse-button-hover-bg: color-mix(
+      in srgb,
+      var(--rc-accent, Highlight) 10%,
+      var(--substrate-surface-raised, ButtonFace)
+    );
+    --rc-splitter-collapse-button-border: var(--rc-border, 1px solid ButtonBorder);
+    --rc-splitter-collapse-button-color: var(--substrate-on-surface, ButtonText);
+  }
+}

package/components/switch.css

@@ -0,0 +1,28 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-switch {
+    --rc-switch-native-appearance: none;
+    --rc-switch-native-inline-size: 100%;
+    --rc-switch-native-block-size: 100%;
+    --rc-switch-native-margin: 0;
+    --rc-switch-native-opacity: 0;
+    --rc-switch-decoration-display: block;
+    --rc-switch-icon-display: grid;
+    --rc-switch-track-inline-size: 3.25rem;
+    --rc-switch-track-block-size: 2rem;
+    --rc-switch-track-border: var(--rc-border);
+    --rc-switch-track-radius: 9999px;
+    --rc-switch-track-bg: var(--substrate-surface-raised, ButtonFace);
+    --rc-switch-thumb-size: 1rem;
+    --rc-switch-thumb-offset: 0.375rem;
+    --rc-switch-thumb-bg: var(--substrate-on-surface-muted, ButtonText);
+    --rc-switch-selected-track-border-color: var(--rc-accent);
+    --rc-switch-selected-track-bg: var(--rc-accent);
+    --rc-switch-selected-thumb-size: 1.5rem;
+    --rc-switch-selected-thumb-bg: var(--substrate-on-primary, HighlightText);
+    --rc-switch-thumb-translate: 1.125rem;
+    --rc-switch-focus-ring: var(--rc-focus-ring);
+    --rc-switch-focus-ring-offset: var(--rc-focus-ring-offset);
+    --rc-switch-disabled-opacity: var(--rc-disabled-opacity);
+    --rc-switch-duration: var(--rc-motion-duration);
+  }
+}

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-border-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,36 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-toolbar {
+    display: inline-block;
+
+    --rc-toolbar-gap-inline: 0.125rem;
+    --rc-toolbar-padding-block: 0.25rem;
+    --rc-toolbar-padding-inline: 0.25rem;
+    --rc-toolbar-radius: var(--substrate-radius-md, 0.5rem);
+    --rc-toolbar-vertical-radius: var(--substrate-radius-md, 0.5rem);
+    --rc-toolbar-flex-wrap: nowrap;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-toolbar::part(root) {
+    gap: var(--rc-toolbar-gap-inline, 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-listbox-border: var(--rc-border, 1px solid ButtonBorder);
+    --rc-transfer-list-listbox-radius: var(--substrate-radius-lg, 0.75rem);
+    --rc-transfer-list-listbox-bg: 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(--rc-list-item-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,18 @@
+@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);
+
+    --rc-virtual-canvas-scrollbar-size: 0.75rem;
+    --rc-virtual-canvas-scrollbar-width: thin;
+    --rc-virtual-canvas-scrollbar-track-background: transparent;
+    --rc-virtual-canvas-scrollbar-thumb-background: color-mix(
+      in srgb,
+      var(--substrate-on-surface-muted, GrayText) 45%,
+      transparent
+    );
+    --rc-virtual-canvas-scrollbar-button-background: var(--substrate-surface-raised, ButtonFace);
+  }
+}

package/components.css

@@ -0,0 +1,41 @@
+@layer rc-theme-substrate.defaults, rc-theme-substrate.bridge, rc-theme-substrate.components;
+
+@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';
+@import './components/transfer-list.css';
+@import './components/button.css';
+@import './components/card.css';
+@import './components/chip.css';
+@import './components/list-item.css';
+@import './components/fab.css';
+@import './components/fab-menu.css';
+@import './components/app-bar.css';
+@import './components/menu.css';
+@import './components/menu-button.css';
+@import './components/menubar.css';
+@import './components/navigation-bar.css';
+@import './components/navigation-rail.css';
+@import './components/toolbar.css';
+@import './components/segmented-button.css';
+@import './components/slider.css';
+@import './components/progress.css';
+@import './components/snackbar.css';
+@import './components/range-slider.css';
+@import './components/splitter.css';
+@import './components/switch.css';
+@import './components/dialog.css';
+@import './components/disclosure.css';
+@import './components/accordion.css';
+@import './components/virtual-canvas.css';
+@import './components/adaptive-menu.css';
+@import './components/carousel.css';
+@import './components/chip-group.css';
+@import './components/scroller.css';
+@import './components/modes.css';

package/defaults.css

@@ -0,0 +1,108 @@
+@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%));
+
+    /* Flipped against the surface pair, for the snackbar and anything else
+     * that has to read as a layer above the page rather than part of it. */
+    --substrate-inverse-surface: light-dark(oklch(27% 0.018 72), oklch(93% 0.01 80));
+    --substrate-inverse-on-surface: light-dark(oklch(96% 0.01 80), oklch(21% 0.018 72));
+
+    /*
+     * Held at hue 25 so it reads as red rather than as a darker shade of the
+     * primary, which sits at hue 48. Clears 7:1 against the field in both modes.
+     */
+    --substrate-error: light-dark(oklch(47% 0.19 25), oklch(74% 0.15 25));
+
+    --substrate-font-family:
+      system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, Cantarell,
+      'Noto Sans', 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-radius-pill: 999px;
+
+    --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);
+    /*
+     * The shared spatial/effects scale (see the styling guide), kept as its
+     * own small set of primitives rather than derived from the two above:
+     * Substrate favors few named tokens over a layered primitive/semantic
+     * split, and the values only partly overlap (160/240ms already meant
+     * something as the flat scale; here they mean the spatial tier).
+     */
+    --substrate-motion-effects-duration-fast: 100ms;
+    --substrate-motion-effects-duration-default: 160ms;
+    --substrate-motion-effects-duration-slow: 240ms;
+    --substrate-motion-spatial-duration-fast: 160ms;
+    --substrate-motion-spatial-duration-default: 240ms;
+    --substrate-motion-spatial-duration-slow: 320ms;
+    --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-inverse-surface: CanvasText;
+      --substrate-inverse-on-surface: Canvas;
+      --substrate-error: Mark;
+      --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.0.0-next-20260921045401",
+  "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';