@rcarls/rc-theme-substrate 0.6.0 → 0.7.0

package/css-components/list.css

@@ -0,0 +1,34 @@
+@layer rc-theme-substrate.css-components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) .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-substrate, :host(.rc-theme-substrate)) .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-substrate, :host(.rc-theme-substrate)) .rc-list > li[aria-selected='true'],
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) .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-substrate, :host(.rc-theme-substrate))
+      .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-substrate.css-components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    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-substrate, :host(.rc-theme-substrate))
+    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-substrate.css-components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    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-substrate, :host(.rc-theme-substrate))
+    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-substrate.defaults, rc-theme-substrate.bridge, rc-theme-substrate.native, rc-theme-substrate.components, rc-theme-substrate.css-components,
+  rc-theme-substrate.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-substrate.css-components {
+  @media (forced-colors: active) {
+    :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+      :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-substrate.defaults, rc-theme-substrate.bridge, rc-theme-substrate.components;
+@layer rc-base, rc-theme-substrate.defaults, rc-theme-substrate.bridge, rc-theme-substrate.native, rc-theme-substrate.components, rc-theme-substrate.css-components,
+  rc-theme-substrate.overrides;
 
 @layer rc-theme-substrate.defaults {
   /*
@@ -24,6 +25,17 @@
     --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;
@@ -35,6 +47,7 @@
     --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;
@@ -57,6 +70,19 @@
     --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;
   }
 
@@ -72,6 +98,9 @@
       --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/native.css

@@ -0,0 +1,249 @@
+@layer rc-base, rc-theme-substrate.defaults, rc-theme-substrate.bridge, rc-theme-substrate.native, rc-theme-substrate.components, rc-theme-substrate.css-components,
+  rc-theme-substrate.overrides;
+
+/* Import defaults.css and bridge.css first when theme tokens are desired. */
+@layer rc-theme-substrate.native {
+  /*
+   * Native styles stop at native controls that are part of an RC-owned
+   * presentation, and at subtrees the consumer opts out with
+   * data-rc-native="off". These are element-level ownership contracts rather
+   * than host boundaries, so ordinary controls remain themed in layout
+   * components such as rc-toolbar, rc-card, rc-dialog, and rc-popover.
+   */
+  :where(.rc-theme-substrate:not([data-rc-native='off']))
+    :where(button, input, select, textarea, progress):not(
+      :where(
+        [data-rc-native='off'],
+        [data-rc-native='off'] *,
+        rc-button > :is(button, a[href]),
+        rc-chip > :is(button, a[href], label),
+        rc-chip > label > input:is([type='checkbox'], [type='radio']),
+        rc-combobox > select,
+        rc-fab > button,
+        rc-fab-menu > [slot='trigger'],
+        rc-field > :is(input, select, textarea),
+        rc-field > [data-rc-field-control] > :is(input, select, textarea),
+        rc-field > fieldset > :is(input, select, textarea),
+        rc-listbox > select,
+        rc-markdown-editor > textarea,
+        rc-navigation-rail > [slot='toggle'],
+        rc-menu-button > [slot='trigger'],
+        rc-progress > progress,
+        rc-range-slider > input[type='range'],
+        rc-search-bar > input[type='search'],
+        rc-segmented-button > fieldset input[type='radio'],
+        rc-select > select,
+        rc-slider > input[type='range'],
+        rc-switch > input[type='checkbox'],
+        rc-textarea > textarea,
+        rc-transfer-list > select
+      )
+    ),
+  :host(:not([data-rc-native='off']).rc-theme-substrate)
+    :where(button, input, select, textarea, progress):not(
+      :where(
+        [data-rc-native='off'],
+        [data-rc-native='off'] *,
+        rc-button > :is(button, a[href]),
+        rc-chip > :is(button, a[href], label),
+        rc-chip > label > input:is([type='checkbox'], [type='radio']),
+        rc-combobox > select,
+        rc-fab > button,
+        rc-fab-menu > [slot='trigger'],
+        rc-field > :is(input, select, textarea),
+        rc-field > [data-rc-field-control] > :is(input, select, textarea),
+        rc-field > fieldset > :is(input, select, textarea),
+        rc-listbox > select,
+        rc-markdown-editor > textarea,
+        rc-navigation-rail > [slot='toggle'],
+        rc-menu-button > [slot='trigger'],
+        rc-progress > progress,
+        rc-range-slider > input[type='range'],
+        rc-search-bar > input[type='search'],
+        rc-segmented-button > fieldset input[type='radio'],
+        rc-select > select,
+        rc-slider > input[type='range'],
+        rc-switch > input[type='checkbox'],
+        rc-textarea > textarea,
+        rc-transfer-list > select
+      )
+    ) {
+    &:where(button):not(:where(.rc-button, .rc-chip)) {
+      box-sizing: border-box;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--rc-button-gap, var(--rc-control-gap, 0.5rem));
+      min-block-size: var(--rc-button-block-size, var(--rc-control-block-size, 2.5rem));
+      padding-block: var(--rc-button-padding-block, var(--rc-control-padding-block, 0.5rem));
+      padding-inline: var(--rc-button-padding-inline, var(--rc-control-padding-inline, 1rem));
+      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-family: var(--rc-font-family, sans-serif);
+      font-size: var(--rc-font-size, 1rem);
+      font-weight: var(--rc-font-weight, 400);
+      line-height: var(--rc-line-height, normal);
+      cursor: pointer;
+    }
+
+    &:where(
+      input:is(
+        [type='text'],
+        [type='search'],
+        [type='email'],
+        [type='url'],
+        [type='tel'],
+        [type='number'],
+        [type='password'],
+        :where(:not([type]))
+      ),
+      select,
+      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-border, 1px solid ButtonBorder);
+      border-radius: var(--rc-control-radius, 0.5rem);
+      background: var(--rc-field, Field);
+      color: var(--rc-field-text, FieldText);
+      font-family: var(--rc-font-family, sans-serif);
+      font-size: var(--rc-font-size, 1rem);
+      font-weight: var(--rc-font-weight, 400);
+      line-height: var(--rc-line-height, normal);
+    }
+
+    &:where(select):not(:where(.rc-select)) {
+      cursor: pointer;
+    }
+
+    &:not(:where(.rc-button, .rc-chip, .rc-select, .rc-textarea)):focus-visible {
+      outline: var(--rc-focus-ring, 2px solid Highlight);
+      outline-offset: var(--rc-focus-ring-offset, 2px);
+    }
+
+    &:where(input[type='checkbox'], input[type='radio'], input[type='range']) {
+      min-block-size: auto;
+      padding: 0;
+      accent-color: var(--rc-accent, AccentColor);
+    }
+
+    &:where(input[type='range'], progress) {
+      inline-size: 100%;
+    }
+
+    &:where(progress) {
+      accent-color: var(--rc-accent, AccentColor);
+    }
+
+    &:not(:where(.rc-button, .rc-chip)):where(:disabled) {
+      color: var(--rc-text-disabled, GrayText);
+      cursor: not-allowed;
+    }
+  }
+}
+
+/* Reassert rc-base light-DOM row geometry after generic native presentation. */
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate:not([data-rc-native='off']))
+    :where(rc-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio'])):not(
+      :where([data-rc-native='off'], [data-rc-native='off'] *)
+    ),
+  :host(:not([data-rc-native='off']).rc-theme-substrate)
+    :where(rc-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio'])):not(
+      :where([data-rc-native='off'], [data-rc-native='off'] *)
+    ) {
+    display: flex;
+    gap: var(--rc-menu-item-gap, var(--rc-item-gap, 0.5em));
+    min-block-size: var(--rc-menu-item-min-block-size, 0px);
+    justify-content: normal;
+    padding: var(--rc-menu-item-padding-block, var(--rc-item-padding-block, 0.3em))
+      var(--rc-menu-item-padding-inline, var(--rc-item-padding-inline, 0.75em));
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: default;
+    outline: none;
+  }
+
+  :where(.rc-theme-substrate:not([data-rc-native='off']))
+    rc-menu
+    :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):hover:not(
+      :where([data-rc-native='off'], [data-rc-native='off'] *)
+    ),
+  :host(:not([data-rc-native='off']).rc-theme-substrate)
+    rc-menu
+    :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):hover:not(
+      :where([data-rc-native='off'], [data-rc-native='off'] *)
+    ) {
+    background: var(--rc-menu-hover-bg, color-mix(in srgb, Highlight 8%, transparent));
+    color: var(--rc-menu-hover-color, inherit);
+  }
+
+  :where(.rc-theme-substrate:not([data-rc-native='off']))
+    rc-menu
+    :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio'])[data-active]:not(
+      :where([data-rc-native='off'], [data-rc-native='off'] *)
+    ),
+  :host(:not([data-rc-native='off']).rc-theme-substrate)
+    rc-menu
+    :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio'])[data-active]:not(
+      :where([data-rc-native='off'], [data-rc-native='off'] *)
+    ) {
+    background: var(--rc-menu-active-bg, color-mix(in srgb, Highlight 8%, transparent));
+    color: var(--rc-menu-active-color, inherit);
+  }
+
+  :where(.rc-theme-substrate:not([data-rc-native='off']))
+    rc-menu
+    :is(
+      button:disabled,
+      [role='menuitem'][aria-disabled='true'],
+      [role='menuitemcheckbox'][aria-disabled='true'],
+      [role='menuitemradio'][aria-disabled='true']
+    ):not(:where([data-rc-native='off'], [data-rc-native='off'] *)),
+  :host(:not([data-rc-native='off']).rc-theme-substrate)
+    rc-menu
+    :is(
+      button:disabled,
+      [role='menuitem'][aria-disabled='true'],
+      [role='menuitemcheckbox'][aria-disabled='true'],
+      [role='menuitemradio'][aria-disabled='true']
+    ):not(:where([data-rc-native='off'], [data-rc-native='off'] *)) {
+    color: var(--rc-menu-disabled-color, var(--rc-text-disabled, GrayText));
+    opacity: var(--rc-menu-disabled-opacity, var(--rc-disabled-opacity, 0.55));
+    pointer-events: none;
+  }
+}
+
+@layer rc-theme-substrate.overrides {
+  :where(.rc-theme-substrate:not([data-rc-native='off']))
+    :where(
+      rc-adaptive-menu > [data-rc-action-overflowed] > :is(button, a[href]),
+      rc-adaptive-menu > :is(button, a[href])[data-rc-action-overflowed]
+    ):not(:where([data-rc-native='off'], [data-rc-native='off'] *)),
+  :host(:not([data-rc-native='off']).rc-theme-substrate)
+    :where(
+      rc-adaptive-menu > [data-rc-action-overflowed] > :is(button, a[href]),
+      rc-adaptive-menu > :is(button, a[href])[data-rc-action-overflowed]
+    ):not(:where([data-rc-native='off'], [data-rc-native='off'] *)) {
+    display: flex;
+    gap: var(--rc-adaptive-menu-item-gap, var(--rc-item-gap, 0.5em));
+    min-block-size: var(--rc-adaptive-menu-item-min-block-size, 2.5em);
+    padding: var(--rc-adaptive-menu-item-padding-block, var(--rc-item-padding-block, 0.3em))
+      var(--rc-adaptive-menu-item-padding-inline, var(--rc-item-padding-inline, 0.75em));
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    justify-content: normal;
+    text-decoration: none;
+  }
+}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Lightweight CSS reference theme for app-oriented rc-webcomponents layouts.",
   "repository": {
     "type": "git",
@@ -22,11 +22,15 @@
     "./defaults.css": "./defaults.css",
     "./components.css": "./components.css",
     "./components/*.css": "./components/*.css",
+    "./css-components.css": "./css-components.css",
+    "./css-components/*.css": "./css-components/*.css",
+    "./native.css": "./native.css",
     "./theme.css": "./theme.css"
   },
   "files": [
     "*.css",
     "components",
+    "css-components",
     "README.md"
   ],
   "scripts": {