@rcarls/rc-theme-tailwind 0.0.0-next-20261103014840

package/css-components.css

@@ -0,0 +1,31 @@
+@layer rc-base, rc-theme-tailwind.defaults, rc-theme-tailwind.bridge, rc-theme-tailwind.native, rc-theme-tailwind.components, rc-theme-tailwind.css-components,
+  rc-theme-tailwind.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-tailwind.css-components {
+  @media (forced-colors: active) {
+    :where(.rc-theme-tailwind, :host(.rc-theme-tailwind))
+      :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

@@ -0,0 +1,137 @@
+@layer rc-base, rc-theme-tailwind.defaults, rc-theme-tailwind.bridge, rc-theme-tailwind.native, rc-theme-tailwind.components, rc-theme-tailwind.css-components,
+  rc-theme-tailwind.overrides;
+
+@layer rc-theme-tailwind.defaults {
+  /*
+   * Tailwind CSS v4 reference tokens.
+   *
+   * These defaults are scoped so applications can place the theme at any app
+   * boundary. Import bridge.css alone when providing your own Tailwind theme.
+   */
+  .rc-theme-tailwind,
+  :host(.rc-theme-tailwind) {
+    color-scheme: light dark;
+
+    --color-cyan-600: light-dark(oklch(60.9% 0.126 221.723), oklch(71.5% 0.143 215.221));
+    --color-cyan-100: light-dark(oklch(95.6% 0.045 203.388), oklch(30.2% 0.056 229.695));
+    --color-cyan-950: light-dark(oklch(30.2% 0.056 229.695), oklch(95.6% 0.045 203.388));
+    --color-white: light-dark(oklch(100% 0 0), oklch(20.8% 0.042 265.755));
+    --color-slate-50: light-dark(oklch(98.4% 0.003 247.858), oklch(20.8% 0.042 265.755));
+    --color-slate-200: oklch(92.9% 0.013 255.508);
+    --color-slate-600: light-dark(oklch(44.6% 0.043 257.281), oklch(70.4% 0.04 256.788));
+    --color-slate-950: light-dark(oklch(12.9% 0.042 264.695), oklch(98.4% 0.003 247.858));
+    --color-slate-900: light-dark(oklch(20.8% 0.042 265.755), oklch(98.4% 0.003 247.858));
+    --color-red-600: light-dark(oklch(57.7% 0.245 27.325), oklch(70.4% 0.191 22.216));
+    --spacing: 0.25rem;
+    --font-sans: ui-sans-serif, system-ui, sans-serif;
+    --text-sm: 0.875rem;
+    --leading-normal: 1.5;
+    --font-weight-normal: 400;
+    --radius-sm: 0.25rem;
+    --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
+    --radius-full: 999px;
+    --shadow-sm: 0 1px 2px 0 rgb(2 6 23 / 10%);
+    --shadow-md: 0 4px 6px -1px rgb(2 6 23 / 12%);
+    --shadow-lg: 0 10px 15px -3px rgb(2 6 23 / 14%);
+    --ease-out: cubic-bezier(0.2, 0, 0, 1);
+
+    --tailwind-primary: var(--color-cyan-600);
+    --tailwind-on-primary: var(--color-white);
+    --tailwind-primary-container: var(--color-cyan-100);
+    --tailwind-on-primary-container: var(--color-cyan-950);
+    --tailwind-surface: var(--color-slate-50);
+    --tailwind-surface-raised: var(--color-white);
+    --tailwind-field: var(--color-white);
+    --tailwind-on-surface: var(--color-slate-950);
+    --tailwind-on-surface-muted: var(--color-slate-600);
+    --tailwind-border-color: var(--color-slate-200);
+    --tailwind-shadow-color: color-mix(in oklch, var(--color-slate-950) 18%, transparent);
+
+    /* 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. */
+    --tailwind-inverse-surface: var(--color-slate-900);
+    --tailwind-inverse-on-surface: var(--color-white);
+
+    /*
+     * Held in the red range so it reads as an error rather than a darker shade
+     * of the cyan primary. Clears 7:1 against the field in both modes.
+     */
+    --tailwind-error: var(--color-red-600);
+
+    --tailwind-font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
+    --tailwind-font-size: var(--text-sm, 0.875rem);
+    --tailwind-line-height: var(--leading-normal, 1.5);
+    --tailwind-font-weight: var(--font-weight-normal, 400);
+
+    --tailwind-radius-sm: var(--radius-sm, 0.25rem);
+    --tailwind-radius-md: var(--radius-md, 0.375rem);
+    --tailwind-radius-lg: var(--radius-lg, 0.5rem);
+    --tailwind-radius-xl: var(--radius-xl, 0.75rem);
+    --tailwind-radius-pill: var(--radius-full, 999px);
+
+    --tailwind-control-block-size: calc(var(--spacing, 0.25rem) * 10);
+    --tailwind-control-padding-block: calc(var(--spacing, 0.25rem) * 2);
+    --tailwind-control-padding-inline: calc(var(--spacing, 0.25rem) * 3);
+    --tailwind-control-gap: calc(var(--spacing, 0.25rem) * 2);
+    --tailwind-item-padding-block: calc(var(--spacing, 0.25rem) * 2.5);
+    --tailwind-item-padding-inline: calc(var(--spacing, 0.25rem) * 3);
+    --tailwind-item-gap: calc(var(--spacing, 0.25rem) * 2);
+
+    --tailwind-shadow-sm: var(--shadow-sm, 0 1px 2px 0 var(--tailwind-shadow-color));
+    --tailwind-shadow-md: var(--shadow-md, 0 4px 6px -1px var(--tailwind-shadow-color));
+    --tailwind-shadow-lg: var(--shadow-lg, 0 10px 15px -3px var(--tailwind-shadow-color));
+
+    --tailwind-focus-ring: 2px solid var(--color-cyan-600);
+    --tailwind-focus-ring-offset: 2px;
+    --tailwind-motion-duration: 160ms;
+    --tailwind-motion-duration-slow: 240ms;
+    --tailwind-motion-easing: var(--ease-out, 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:
+     * Tailwind 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).
+     */
+    --tailwind-motion-effects-duration-fast: 100ms;
+    --tailwind-motion-effects-duration-default: 160ms;
+    --tailwind-motion-effects-duration-slow: 240ms;
+    --tailwind-motion-spatial-duration-fast: 160ms;
+    --tailwind-motion-spatial-duration-default: 240ms;
+    --tailwind-motion-spatial-duration-slow: 320ms;
+    --tailwind-disabled-opacity: 0.52;
+  }
+
+  @media (forced-colors: active) {
+    .rc-theme-tailwind,
+    :host(.rc-theme-tailwind) {
+      --color-cyan-600: Highlight;
+      --color-cyan-100: Highlight;
+      --color-cyan-950: HighlightText;
+      --color-white: Canvas;
+      --color-slate-50: Canvas;
+      --color-slate-200: ButtonBorder;
+      --color-slate-600: GrayText;
+      --color-slate-950: CanvasText;
+      --color-slate-900: CanvasText;
+      --color-red-600: Mark;
+      --tailwind-primary: Highlight;
+      --tailwind-on-primary: HighlightText;
+      --tailwind-primary-container: Highlight;
+      --tailwind-on-primary-container: HighlightText;
+      --tailwind-surface: Canvas;
+      --tailwind-surface-raised: Canvas;
+      --tailwind-field: Field;
+      --tailwind-on-surface: CanvasText;
+      --tailwind-on-surface-muted: GrayText;
+      --tailwind-inverse-surface: CanvasText;
+      --tailwind-inverse-on-surface: Canvas;
+      --tailwind-error: Mark;
+      --tailwind-border-color: ButtonBorder;
+      --tailwind-shadow-color: transparent;
+      --tailwind-focus-ring: 2px solid Highlight;
+    }
+  }
+}

package/layers.css

@@ -0,0 +1,10 @@
+/*
+ * Cascade layer order for apps that also load Tailwind CSS v4. Import this
+ * before both Tailwind and this theme. It places the rc layers after
+ * Tailwind's `base` layer, so Preflight resets cannot override component
+ * structure or theme rules, and before `components` and `utilities`, so an
+ * app's own component classes and utilities still win over the theme.
+ */
+@layer theme, base, rc-base, rc-theme-tailwind.defaults, rc-theme-tailwind.bridge,
+  rc-theme-tailwind.native, rc-theme-tailwind.components, rc-theme-tailwind.css-components,
+  rc-theme-tailwind.overrides, components, utilities;

package/native.css

@@ -0,0 +1,249 @@
+@layer rc-base, rc-theme-tailwind.defaults, rc-theme-tailwind.bridge, rc-theme-tailwind.native, rc-theme-tailwind.components, rc-theme-tailwind.css-components,
+  rc-theme-tailwind.overrides;
+
+/* Import defaults.css and bridge.css first when theme tokens are desired. */
+@layer rc-theme-tailwind.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-tailwind: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-tailwind)
+    :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-tailwind.components {
+  :where(.rc-theme-tailwind: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-tailwind)
+    :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-tailwind: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-tailwind)
+    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-tailwind: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-tailwind)
+    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-tailwind: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-tailwind)
+    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-tailwind.overrides {
+  :where(.rc-theme-tailwind: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-tailwind)
+    :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

@@ -0,0 +1,49 @@
+{
+  "name": "@rcarls/rc-theme-tailwind",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.0.0-next-20261103014840",
+  "description": "CSS-only Tailwind CSS v4 token bridge and calm SaaS theme for rc-webcomponents.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
+    "directory": "packages/rc-theme-tailwind"
+  },
+  "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",
+    "./css-components.css": "./css-components.css",
+    "./css-components/*.css": "./css-components/*.css",
+    "./native.css": "./native.css",
+    "./theme.css": "./theme.css",
+    "./layers.css": "./layers.css"
+  },
+  "files": [
+    "*.css",
+    "components",
+    "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';