@owodesign/owoui 0.1.4 → 0.1.5

package/dist/theme-dark.css

@@ -0,0 +1,230 @@
+/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
+:root, :host {
+  --owo-ref-color-neutral-900: #1a1a1a;
+  --owo-ref-color-neutral-700: #4a4a4a;
+  --owo-ref-color-neutral-600: #71717a;
+  --owo-ref-color-brand-primary: #1a1a1a;
+  --owo-ref-color-brand-primary-hover: #000000;
+  --owo-ref-color-surface-canvas: #ffffff;
+  --owo-ref-color-surface-base: #ffffff;
+  --owo-ref-color-surface-subtle: #fafaf9;
+  --owo-ref-color-surface-raised: #ffffff;
+  --owo-ref-color-surface-inset: #f5f5f4;
+  --owo-ref-color-surface-border: #e5e7eb;
+  --owo-ref-color-surface-ring: #d6d3d1;
+  --owo-ref-color-overlay-strong: rgba(15, 23, 42, 0.18);
+  --owo-ref-color-text-on-brand: #ffffff;
+  --owo-ref-shadow-raised: 0 10px 20px rgba(15, 23, 42, 0.08);
+  --owo-ref-shadow-popover: 0 18px 40px rgba(15, 23, 42, 0.10);
+  --owo-ref-color-status-success-bg: rgba(16, 185, 129, 0.10);
+  --owo-ref-color-status-success-border: rgba(16, 185, 129, 0.20);
+  --owo-ref-color-status-success-text: #047857;
+  --owo-ref-color-status-warning-bg: rgba(245, 158, 11, 0.10);
+  --owo-ref-color-status-warning-border: rgba(245, 158, 11, 0.20);
+  --owo-ref-color-status-warning-text: #b45309;
+  --owo-ref-color-status-danger-bg: rgba(239, 68, 68, 0.10);
+  --owo-ref-color-status-danger-border: rgba(239, 68, 68, 0.20);
+  --owo-ref-color-status-danger-text: #b91c1c;
+  --owo-ref-color-status-info-bg: rgba(14, 165, 233, 0.10);
+  --owo-ref-color-status-info-border: rgba(14, 165, 233, 0.20);
+  --owo-ref-color-status-info-text: #0369a1;
+  --owo-ref-font-heading: var(--font-source-serif-pro), var(--font-noto-serif-sc), "Source Serif 4", Georgia, "Times New Roman", serif;
+  --owo-ref-radius-sm: 0.5rem;
+  --owo-ref-radius-md: 0.75rem;
+  --owo-ref-radius-lg: 1rem;
+  --owo-ref-radius-xl: 1.5rem;
+  --owo-ref-radius-2xl: 2rem;
+  --owo-ref-radius-full: 9999px;
+  --owo-ref-motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --owo-ref-motion-ease-decelerate: cubic-bezier(0, 0, 0, 1);
+  --owo-ref-motion-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
+}
+:root {
+  --owo-sys-preset-surface-bg: var(--owo-sys-theme-surface-base);
+  --owo-sys-preset-surface-bg-subtle: var(--owo-sys-theme-surface-subtle);
+  --owo-sys-preset-surface-bg-raised: var(--owo-sys-theme-surface-raised);
+  --owo-sys-preset-surface-bg-inset: var(--owo-sys-theme-surface-inset);
+  --owo-sys-preset-surface-border: var(--owo-sys-theme-surface-border);
+  --owo-sys-preset-surface-border-muted: var(--owo-sys-theme-surface-border-muted);
+  --owo-sys-preset-surface-border-strong: var(--owo-sys-theme-surface-border-strong);
+  --owo-sys-preset-surface-shadow: var(--owo-ref-shadow-raised);
+  --owo-sys-preset-surface-shadow-strong: var(--owo-ref-shadow-popover);
+  --owo-sys-preset-surface-blur: 0px;
+  --owo-sys-preset-canvas-bg: var(--owo-sys-theme-surface-canvas);
+  --owo-sys-preset-canvas-bg-subtle: var(--owo-sys-theme-canvas-bg-subtle);
+  --owo-sys-preset-surface-container: var(--owo-sys-theme-surface-container);
+  --owo-sys-preset-surface-container-high: var(--owo-sys-theme-surface-container-high);
+  --owo-sys-preset-surface-container-highest: var(--owo-sys-theme-surface-container-highest);
+  --owo-sys-preset-control-radius-sm: var(--owo-ref-radius-sm);
+  --owo-sys-preset-control-radius-md: var(--owo-ref-radius-md);
+  --owo-sys-preset-control-radius-lg: var(--owo-ref-radius-lg);
+  --owo-sys-preset-control-radius-xl: var(--owo-ref-radius-xl);
+  --owo-sys-preset-control-radius-2xl: var(--owo-ref-radius-2xl);
+  --owo-sys-preset-control-radius-full: var(--owo-ref-radius-full);
+  --owo-sys-preset-control-border-width: 1px;
+  --owo-cmp-surface-bg: var(--owo-sys-preset-surface-bg);
+  --owo-cmp-surface-bg-subtle: var(--owo-sys-preset-surface-bg-subtle);
+  --owo-cmp-surface-bg-raised: var(--owo-sys-preset-surface-bg-raised);
+  --owo-cmp-surface-bg-inset: var(--owo-sys-preset-surface-bg-inset);
+  --owo-cmp-surface-border: var(--owo-sys-preset-surface-border);
+  --owo-cmp-surface-border-muted: var(--owo-sys-preset-surface-border-muted);
+  --owo-cmp-surface-border-strong: var(--owo-sys-preset-surface-border-strong);
+  --owo-cmp-surface-shadow: var(--owo-sys-preset-surface-shadow);
+  --owo-cmp-surface-shadow-strong: var(--owo-sys-preset-surface-shadow-strong);
+  --owo-cmp-surface-blur: var(--owo-sys-preset-surface-blur);
+  --owo-cmp-canvas-bg: var(--owo-sys-preset-canvas-bg);
+  --owo-cmp-canvas-bg-subtle: var(--owo-sys-preset-canvas-bg-subtle);
+  --owo-cmp-surface-container: var(--owo-sys-preset-surface-container);
+  --owo-cmp-surface-container-high: var(--owo-sys-preset-surface-container-high);
+  --owo-cmp-surface-container-highest: var(--owo-sys-preset-surface-container-highest);
+  --owo-cmp-text-primary: var(--owo-sys-theme-text-primary);
+  --owo-cmp-text-secondary: var(--owo-sys-theme-text-secondary);
+  --owo-cmp-text-muted: var(--owo-sys-theme-text-muted);
+  --owo-cmp-text-on-accent: var(--owo-sys-theme-text-on-accent);
+  --owo-cmp-accent-bg: var(--owo-sys-theme-accent-bg);
+  --owo-cmp-accent-bg-hover: var(--owo-sys-theme-accent-bg-hover);
+  --owo-cmp-accent-bg-muted: var(--owo-sys-theme-accent-bg-muted);
+  --owo-cmp-accent-text: var(--owo-sys-theme-text-on-accent);
+  --owo-cmp-accent-border: var(--owo-sys-theme-accent-border);
+  --owo-cmp-success-bg: var(--owo-sys-theme-success-bg);
+  --owo-cmp-success-border: var(--owo-sys-theme-success-border);
+  --owo-cmp-success-text: var(--owo-sys-theme-success-text);
+  --owo-cmp-warning-bg: var(--owo-sys-theme-warning-bg);
+  --owo-cmp-warning-border: var(--owo-sys-theme-warning-border);
+  --owo-cmp-warning-text: var(--owo-sys-theme-warning-text);
+  --owo-cmp-danger-bg: var(--owo-sys-theme-danger-bg);
+  --owo-cmp-danger-bg-emphasis: var(--owo-sys-theme-danger-bg-emphasis);
+  --owo-cmp-danger-border: var(--owo-sys-theme-danger-border);
+  --owo-cmp-danger-text: var(--owo-sys-theme-danger-text);
+  --owo-cmp-info-bg: var(--owo-sys-theme-info-bg);
+  --owo-cmp-info-border: var(--owo-sys-theme-info-border);
+  --owo-cmp-info-text: var(--owo-sys-theme-info-text);
+  --owo-cmp-control-radius-sm: var(--owo-sys-preset-control-radius-sm);
+  --owo-cmp-control-radius-md: var(--owo-sys-preset-control-radius-md);
+  --owo-cmp-control-radius-lg: var(--owo-sys-preset-control-radius-lg);
+  --owo-cmp-control-radius-xl: var(--owo-sys-preset-control-radius-xl);
+  --owo-cmp-control-radius-2xl: var(--owo-sys-preset-control-radius-2xl);
+  --owo-cmp-control-radius-full: var(--owo-sys-preset-control-radius-full);
+  --owo-cmp-control-border-width: var(--owo-sys-preset-control-border-width);
+  --owo-cmp-control-focus-ring: var(--owo-sys-theme-control-focus-ring);
+  --owo-cmp-control-focus-ring-offset: var(--owo-sys-theme-control-focus-ring-offset);
+  --owo-cmp-font-heading: var(--owo-ref-font-heading);
+  --owo-cmp-motion-duration-fast: 0.15s;
+  --owo-cmp-motion-duration-default: 0.2s;
+  --owo-cmp-motion-ease-standard: var(--owo-ref-motion-ease-standard);
+  --owo-cmp-motion-ease-decelerate: var(--owo-ref-motion-ease-decelerate);
+  --owo-cmp-motion-ease-accelerate: var(--owo-ref-motion-ease-accelerate);
+  --owo-cmp-density-compact: 0.875;
+  --owo-cmp-density-default: 1;
+  --owo-cmp-density-comfortable: 1.125;
+  --owo-cmp-overlay-bg: var(--owo-sys-theme-overlay-bg);
+  --owo-cmp-z-dropdown: 1000;
+  --owo-cmp-z-modal: 1100;
+  --owo-cmp-z-toast: 1200;
+  --owo-feedback-neutral-bg: var(--owo-cmp-surface-bg-raised);
+  --owo-feedback-neutral-border: var(--owo-cmp-surface-border);
+  --owo-feedback-neutral-text: var(--owo-cmp-text-primary);
+  --owo-feedback-neutral-icon: var(--owo-cmp-text-secondary);
+  --owo-feedback-info-bg: var(--owo-cmp-info-bg);
+  --owo-feedback-info-border: var(--owo-cmp-info-border);
+  --owo-feedback-info-text: var(--owo-cmp-info-text);
+  --owo-feedback-info-icon: var(--owo-cmp-info-text);
+  --owo-feedback-success-bg: var(--owo-cmp-success-bg);
+  --owo-feedback-success-border: var(--owo-cmp-success-border);
+  --owo-feedback-success-text: var(--owo-cmp-success-text);
+  --owo-feedback-success-icon: var(--owo-cmp-success-text);
+  --owo-feedback-warning-bg: var(--owo-cmp-warning-bg);
+  --owo-feedback-warning-border: var(--owo-cmp-warning-border);
+  --owo-feedback-warning-text: var(--owo-cmp-warning-text);
+  --owo-feedback-warning-icon: var(--owo-cmp-warning-text);
+  --owo-feedback-danger-bg: var(--owo-cmp-danger-bg);
+  --owo-feedback-danger-border: var(--owo-cmp-danger-border);
+  --owo-feedback-danger-text: var(--owo-cmp-danger-text);
+  --owo-feedback-danger-icon: var(--owo-cmp-danger-text);
+}
+:root[data-theme="dark"],
+.owoui-theme-dark {
+  --owo-ref-color-neutral-900: #fafafa;
+  --owo-ref-color-neutral-800: #e4e4e7;
+  --owo-ref-color-neutral-700: #d4d4d8;
+  --owo-ref-color-neutral-600: #a1a1aa;
+  --owo-ref-color-neutral-500: #71717a;
+  --owo-ref-color-neutral-400: #3f3f46;
+  --owo-ref-color-neutral-300: #27272a;
+  --owo-ref-color-neutral-200: #1f1f22;
+  --owo-ref-color-neutral-100: #18181a;
+  --owo-ref-color-brand-primary: #c6c6c7;
+  --owo-ref-color-brand-primary-hover: #d4d4d8;
+  --owo-ref-color-brand-accent: #a1a1aa;
+  --owo-ref-color-surface-canvas: #0e0e0e;
+  --owo-ref-color-surface-base: #18181b;
+  --owo-ref-color-surface-subtle: #1c1c1f;
+  --owo-ref-color-surface-raised: #27272a;
+  --owo-ref-color-surface-inset: #111113;
+  --owo-ref-color-surface-border: rgba(255, 255, 255, 0.12);
+  --owo-ref-color-surface-ring: rgba(255, 255, 255, 0.24);
+  --owo-ref-color-surface-overlay: rgba(0, 0, 0, 0.6);
+  --owo-ref-color-overlay-soft: rgba(0, 0, 0, 0.32);
+  --owo-ref-color-overlay-strong: rgba(0, 0, 0, 0.56);
+  --owo-ref-color-highlight-soft: rgba(255, 255, 255, 0.06);
+  --owo-ref-color-highlight-sheen: rgba(255, 255, 255, 0.08);
+  --owo-ref-color-text-on-brand: #1a1a1a;
+  --owo-ref-color-code-block-bg: #1e1e22;
+  --owo-ref-color-code-block-border: #2d2d32;
+  --owo-ref-color-code-block-divider: #27272c;
+  --owo-ref-color-code-inline-bg: #27272a;
+  --owo-ref-color-status-success-bg: rgba(16, 185, 129, 0.15);
+  --owo-ref-color-status-success-border: rgba(16, 185, 129, 0.3);
+  --owo-ref-color-status-success-text: #6ee7b7;
+  --owo-ref-color-status-warning-bg: rgba(245, 158, 11, 0.15);
+  --owo-ref-color-status-warning-border: rgba(245, 158, 11, 0.3);
+  --owo-ref-color-status-warning-text: #fbbf24;
+  --owo-ref-color-status-danger-bg: rgba(239, 68, 68, 0.15);
+  --owo-ref-color-status-danger-border: rgba(239, 68, 68, 0.3);
+  --owo-ref-color-status-danger-text: #fca5a5;
+  --owo-ref-color-status-info-bg: rgba(14, 165, 233, 0.15);
+  --owo-ref-color-status-info-border: rgba(14, 165, 233, 0.3);
+  --owo-ref-color-status-info-text: #7dd3fc;
+  --owo-sys-theme-surface-canvas: var(--owo-ref-color-surface-canvas);
+  --owo-sys-theme-surface-base: var(--owo-ref-color-surface-base);
+  --owo-sys-theme-surface-subtle: var(--owo-ref-color-surface-subtle);
+  --owo-sys-theme-surface-raised: var(--owo-ref-color-surface-raised);
+  --owo-sys-theme-surface-inset: var(--owo-ref-color-surface-inset);
+  --owo-sys-theme-surface-border: var(--owo-ref-color-surface-border);
+  --owo-sys-theme-surface-border-muted: rgba(255, 255, 255, 0.06);
+  --owo-sys-theme-surface-border-strong: var(--owo-ref-color-surface-ring);
+  --owo-sys-theme-canvas-bg-subtle: #0f0f11;
+  --owo-sys-theme-surface-container: #1e1e22;
+  --owo-sys-theme-surface-container-high: #252529;
+  --owo-sys-theme-surface-container-highest: #2d2d32;
+  --owo-sys-theme-text-primary: var(--owo-ref-color-neutral-900);
+  --owo-sys-theme-text-secondary: var(--owo-ref-color-neutral-700);
+  --owo-sys-theme-text-muted: var(--owo-ref-color-neutral-600);
+  --owo-sys-theme-text-on-accent: var(--owo-ref-color-text-on-brand);
+  --owo-sys-theme-accent-bg: var(--owo-ref-color-brand-primary);
+  --owo-sys-theme-accent-bg-hover: var(--owo-ref-color-brand-primary-hover);
+  --owo-sys-theme-accent-bg-muted: color-mix(in srgb, #1a1a1a 14%, #ffffff);
+  @supports (color: color-mix(in lab, red, red)) {
+    --owo-sys-theme-accent-bg-muted: color-mix(in srgb, var(--owo-ref-color-brand-primary) 14%, var(--owo-ref-color-surface-base));
+  }
+  --owo-sys-theme-accent-border: color-mix(in srgb, #1a1a1a 50%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    --owo-sys-theme-accent-border: color-mix(in srgb, var(--owo-ref-color-brand-primary) 50%, transparent);
+  }
+  --owo-sys-theme-success-bg: var(--owo-ref-color-status-success-bg);
+  --owo-sys-theme-success-border: var(--owo-ref-color-status-success-border);
+  --owo-sys-theme-success-text: var(--owo-ref-color-status-success-text);
+  --owo-sys-theme-warning-bg: var(--owo-ref-color-status-warning-bg);
+  --owo-sys-theme-warning-border: var(--owo-ref-color-status-warning-border);
+  --owo-sys-theme-warning-text: var(--owo-ref-color-status-warning-text);
+  --owo-sys-theme-danger-bg: var(--owo-ref-color-status-danger-bg);
+  --owo-sys-theme-danger-bg-emphasis: rgba(239, 68, 68, 0.24);
+  --owo-sys-theme-danger-border: var(--owo-ref-color-status-danger-border);
+  --owo-sys-theme-danger-text: var(--owo-ref-color-status-danger-text);
+  --owo-sys-theme-info-bg: var(--owo-ref-color-status-info-bg);
+  --owo-sys-theme-info-border: var(--owo-ref-color-status-info-border);
+  --owo-sys-theme-info-text: var(--owo-ref-color-status-info-text);
+  --owo-sys-theme-control-focus-ring: var(--owo-ref-color-surface-ring);
+  --owo-sys-theme-control-focus-ring-offset: var(--owo-ref-color-surface-base);
+  --owo-sys-theme-overlay-bg: var(--owo-ref-color-overlay-strong);
+}

package/{src/styles/tokens.css → dist/theme-light.css}

@@ -1,30 +1,10 @@
-/* ================================================================== */
-/*  tokens.css — Tailwind v4 theme registration + shared mapping      */
-/*                                                                     */
-/*  This file has TWO responsibilities:                                */
-/*  1. @theme: Register raw/ref CSS variables for Tailwind             */
-/*  2. :root: Shared ref -> sys -> cmp mapping chains                  */
-/*                                                                     */
-/*  Theme-specific values live in theme-light.css / theme-dark.css.    */
-/*  Do NOT add theme-specific colors here.                             */
-/* ================================================================== */
-
-@theme {
-  /* Neutral scale — initial values (light); overridden per-theme */
+/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
+:root, :host {
   --owo-ref-color-neutral-900: #1a1a1a;
-  --owo-ref-color-neutral-800: #2d2d2d;
   --owo-ref-color-neutral-700: #4a4a4a;
   --owo-ref-color-neutral-600: #71717a;
-  --owo-ref-color-neutral-500: #a1a1aa;
-  --owo-ref-color-neutral-400: #d4d4d8;
-  --owo-ref-color-neutral-300: #e4e4e7;
-
-  /* Brand — initial values (light); overridden per-theme */
   --owo-ref-color-brand-primary: #1a1a1a;
   --owo-ref-color-brand-primary-hover: #000000;
-  --owo-ref-color-brand-accent: #4a4a4a;
-
-  /* Surface — initial values (light); overridden per-theme */
   --owo-ref-color-surface-canvas: #ffffff;
   --owo-ref-color-surface-base: #ffffff;
   --owo-ref-color-surface-subtle: #fafaf9;
@@ -32,20 +12,10 @@
   --owo-ref-color-surface-inset: #f5f5f4;
   --owo-ref-color-surface-border: #e5e7eb;
   --owo-ref-color-surface-ring: #d6d3d1;
-  --owo-ref-color-surface-overlay: rgba(0, 0, 0, 0.4);
-  --owo-ref-color-overlay-soft: rgba(244, 238, 230, 0.56);
   --owo-ref-color-overlay-strong: rgba(15, 23, 42, 0.18);
-  --owo-ref-color-highlight-soft: rgba(255, 255, 255, 0.56);
-  --owo-ref-color-highlight-sheen: rgba(255, 255, 255, 0.34);
   --owo-ref-color-text-on-brand: #ffffff;
-  --owo-ref-color-code-block-bg: #f4f4f5;
-  --owo-ref-color-code-block-border: #e4e4e7;
-  --owo-ref-color-code-block-divider: #ececed;
-  --owo-ref-color-code-inline-bg: #f4f4f5;
   --owo-ref-shadow-raised: 0 10px 20px rgba(15, 23, 42, 0.08);
   --owo-ref-shadow-popover: 0 18px 40px rgba(15, 23, 42, 0.10);
-
-  /* Status — initial values (light); overridden per-theme */
   --owo-ref-color-status-success-bg: rgba(16, 185, 129, 0.10);
   --owo-ref-color-status-success-border: rgba(16, 185, 129, 0.20);
   --owo-ref-color-status-success-text: #047857;
@@ -58,37 +28,18 @@
   --owo-ref-color-status-info-bg: rgba(14, 165, 233, 0.10);
   --owo-ref-color-status-info-border: rgba(14, 165, 233, 0.20);
   --owo-ref-color-status-info-text: #0369a1;
-
-  /* Typography — shared across all themes */
-  --owo-ref-font-sans: var(--font-inter), var(--font-noto-sans-sc), system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Roboto, sans-serif;
   --owo-ref-font-heading: var(--font-source-serif-pro), var(--font-noto-serif-sc), "Source Serif 4", Georgia, "Times New Roman", serif;
-  --owo-ref-font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-
-  /* Radius — shared across all themes */
-  --owo-ref-radius-0: 0px;
-  --owo-ref-radius-xs: 0.375rem;
   --owo-ref-radius-sm: 0.5rem;
   --owo-ref-radius-md: 0.75rem;
   --owo-ref-radius-lg: 1rem;
   --owo-ref-radius-xl: 1.5rem;
   --owo-ref-radius-2xl: 2rem;
   --owo-ref-radius-full: 9999px;
-
-  /* Motion — shared across all themes */
   --owo-ref-motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
   --owo-ref-motion-ease-decelerate: cubic-bezier(0, 0, 0, 1);
   --owo-ref-motion-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
-  --owo-ref-motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
 }
-
-/* ================================================================== */
-/*  Shared mapping chains: ref -> sys -> cmp                           */
-/*  Theme files set --owo-sys-theme-*, presets set --owo-sys-preset-*  */
-/*  and this layer exposes the final --owo-cmp-* component contracts.  */
-/* ================================================================== */
-
 :root {
-  /* Preset defaults — theme -> preset (overridden by preset-*.css) */
   --owo-sys-preset-surface-bg: var(--owo-sys-theme-surface-base);
   --owo-sys-preset-surface-bg-subtle: var(--owo-sys-theme-surface-subtle);
   --owo-sys-preset-surface-bg-raised: var(--owo-sys-theme-surface-raised);
@@ -111,8 +62,6 @@
   --owo-sys-preset-control-radius-2xl: var(--owo-ref-radius-2xl);
   --owo-sys-preset-control-radius-full: var(--owo-ref-radius-full);
   --owo-sys-preset-control-border-width: 1px;
-
-  /* Final component contract layer — preset/theme -> cmp */
   --owo-cmp-surface-bg: var(--owo-sys-preset-surface-bg);
   --owo-cmp-surface-bg-subtle: var(--owo-sys-preset-surface-bg-subtle);
   --owo-cmp-surface-bg-raised: var(--owo-sys-preset-surface-bg-raised);
@@ -123,25 +72,20 @@
   --owo-cmp-surface-shadow: var(--owo-sys-preset-surface-shadow);
   --owo-cmp-surface-shadow-strong: var(--owo-sys-preset-surface-shadow-strong);
   --owo-cmp-surface-blur: var(--owo-sys-preset-surface-blur);
-
   --owo-cmp-canvas-bg: var(--owo-sys-preset-canvas-bg);
   --owo-cmp-canvas-bg-subtle: var(--owo-sys-preset-canvas-bg-subtle);
-
   --owo-cmp-surface-container: var(--owo-sys-preset-surface-container);
   --owo-cmp-surface-container-high: var(--owo-sys-preset-surface-container-high);
   --owo-cmp-surface-container-highest: var(--owo-sys-preset-surface-container-highest);
-
   --owo-cmp-text-primary: var(--owo-sys-theme-text-primary);
   --owo-cmp-text-secondary: var(--owo-sys-theme-text-secondary);
   --owo-cmp-text-muted: var(--owo-sys-theme-text-muted);
   --owo-cmp-text-on-accent: var(--owo-sys-theme-text-on-accent);
-
   --owo-cmp-accent-bg: var(--owo-sys-theme-accent-bg);
   --owo-cmp-accent-bg-hover: var(--owo-sys-theme-accent-bg-hover);
   --owo-cmp-accent-bg-muted: var(--owo-sys-theme-accent-bg-muted);
   --owo-cmp-accent-text: var(--owo-sys-theme-text-on-accent);
   --owo-cmp-accent-border: var(--owo-sys-theme-accent-border);
-
   --owo-cmp-success-bg: var(--owo-sys-theme-success-bg);
   --owo-cmp-success-border: var(--owo-sys-theme-success-border);
   --owo-cmp-success-text: var(--owo-sys-theme-success-text);
@@ -155,7 +99,6 @@
   --owo-cmp-info-bg: var(--owo-sys-theme-info-bg);
   --owo-cmp-info-border: var(--owo-sys-theme-info-border);
   --owo-cmp-info-text: var(--owo-sys-theme-info-text);
-
   --owo-cmp-control-radius-sm: var(--owo-sys-preset-control-radius-sm);
   --owo-cmp-control-radius-md: var(--owo-sys-preset-control-radius-md);
   --owo-cmp-control-radius-lg: var(--owo-sys-preset-control-radius-lg);
@@ -165,10 +108,7 @@
   --owo-cmp-control-border-width: var(--owo-sys-preset-control-border-width);
   --owo-cmp-control-focus-ring: var(--owo-sys-theme-control-focus-ring);
   --owo-cmp-control-focus-ring-offset: var(--owo-sys-theme-control-focus-ring-offset);
-
   --owo-cmp-font-heading: var(--owo-ref-font-heading);
-
-  /* Motion & density */
   --owo-cmp-motion-duration-fast: 0.15s;
   --owo-cmp-motion-duration-default: 0.2s;
   --owo-cmp-motion-ease-standard: var(--owo-ref-motion-ease-standard);
@@ -177,95 +117,115 @@
   --owo-cmp-density-compact: 0.875;
   --owo-cmp-density-default: 1;
   --owo-cmp-density-comfortable: 1.125;
-
-  /* Overlay & layering */
   --owo-cmp-overlay-bg: var(--owo-sys-theme-overlay-bg);
   --owo-cmp-z-dropdown: 1000;
   --owo-cmp-z-modal: 1100;
   --owo-cmp-z-toast: 1200;
-
-  /* Content layout — shared */
-  --content-min-width: 320px;
-  --content-preferred-width: 70vw;
-  --content-max-width: 960px;
-  --content-width: clamp(600px, 70vw, 960px);
-  --content-padding: 24px;
-  --header-top-margin: 64px;
-
-  /* App-specific derived variables — shared (reference --owo-cmp-* only) */
-  --publish-trigger-bg: var(--owo-cmp-surface-bg-subtle);
-  --publish-trigger-border: var(--owo-cmp-surface-border);
-  --publish-trigger-text: var(--owo-cmp-text-primary);
-  --publish-trigger-active-bg: var(--owo-cmp-accent-bg-muted);
-  --publish-popover-bg: var(--owo-cmp-surface-bg);
-  --publish-popover-border: var(--owo-cmp-surface-border);
-  --publish-popover-shadow: var(--owo-cmp-surface-shadow-strong);
-  --publish-section-bg: var(--owo-cmp-surface-bg-subtle);
-  --publish-section-border: var(--owo-cmp-surface-border);
-  --publish-fact-title: var(--owo-cmp-text-secondary);
-  --publish-fact-value: var(--owo-ref-color-neutral-900);
-  --publish-muted-text: var(--owo-cmp-text-secondary);
-  --publish-warning-bg: var(--owo-cmp-warning-bg);
-  --publish-warning-border: var(--owo-cmp-warning-border);
-  --publish-warning-text: var(--owo-cmp-warning-text);
-  --publish-danger-bg: var(--owo-cmp-danger-bg);
-  --publish-danger-border: var(--owo-cmp-danger-border);
-  --publish-danger-text: var(--owo-cmp-danger-text);
-  --publish-success-bg: var(--owo-cmp-success-bg);
-  --publish-success-border: var(--owo-cmp-success-border);
-  --publish-success-text: var(--owo-cmp-success-text);
-  --publish-progress-track: var(--owo-cmp-surface-bg-inset);
-  --publish-progress-fill: var(--owo-cmp-accent-bg);
-
-  --feedback-neutral-bg: var(--owo-cmp-surface-bg-raised);
-  --feedback-neutral-border: var(--owo-cmp-surface-border);
-  --feedback-neutral-text: var(--owo-cmp-text-primary);
-  --feedback-neutral-icon: var(--owo-cmp-text-secondary);
-  --feedback-info-bg: var(--owo-cmp-info-bg);
-  --feedback-info-border: var(--owo-cmp-info-border);
-  --feedback-info-text: var(--owo-cmp-info-text);
-  --feedback-info-icon: var(--owo-cmp-info-text);
-  --feedback-success-bg: var(--owo-cmp-success-bg);
-  --feedback-success-border: var(--owo-cmp-success-border);
-  --feedback-success-text: var(--owo-cmp-success-text);
-  --feedback-success-icon: var(--owo-cmp-success-text);
-  --feedback-warning-bg: var(--owo-cmp-warning-bg);
-  --feedback-warning-border: var(--owo-cmp-warning-border);
-  --feedback-warning-text: var(--owo-cmp-warning-text);
-  --feedback-warning-icon: var(--owo-cmp-warning-text);
-  --feedback-danger-bg: var(--owo-cmp-danger-bg);
-  --feedback-danger-border: var(--owo-cmp-danger-border);
-  --feedback-danger-text: var(--owo-cmp-danger-text);
-  --feedback-danger-icon: var(--owo-cmp-danger-text);
-
-  --toast-shadow: var(--owo-cmp-surface-shadow-strong);
-
-  --skeleton-bg: linear-gradient(
-    180deg,
-    color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 94%, white) 0%,
-    color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 100%, var(--owo-cmp-surface-border)) 100%
-  );
-  --skeleton-bg-emphasis: linear-gradient(
-    180deg,
-    color-mix(in srgb, var(--owo-cmp-surface-bg-subtle) 78%, var(--owo-ref-color-highlight-soft)) 0%,
-    color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 86%, var(--owo-cmp-surface-border)) 100%
-  );
-  --skeleton-sheen: linear-gradient(
-    100deg,
-    transparent 0%,
-    color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 28%,
-    color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 40%,
-    var(--owo-ref-color-highlight-sheen) 50%,
-    color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 60%,
-    color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 72%,
-    transparent 100%
-  );
-  --skeleton-top-highlight: var(--owo-ref-color-highlight-soft);
-
-  --workspace-transition-veil-bg: var(--owo-ref-color-overlay-soft);
-  --workspace-transition-stale-bg: color-mix(in srgb, var(--owo-ref-color-overlay-soft) 72%, transparent);
-
-  --tooltip-shadow: var(--owo-cmp-surface-shadow-strong);
-  --select-dropdown-shadow: var(--owo-cmp-surface-shadow-strong);
-  --drawer-panel-shadow: var(--owo-cmp-surface-shadow-strong);
+  --owo-feedback-neutral-bg: var(--owo-cmp-surface-bg-raised);
+  --owo-feedback-neutral-border: var(--owo-cmp-surface-border);
+  --owo-feedback-neutral-text: var(--owo-cmp-text-primary);
+  --owo-feedback-neutral-icon: var(--owo-cmp-text-secondary);
+  --owo-feedback-info-bg: var(--owo-cmp-info-bg);
+  --owo-feedback-info-border: var(--owo-cmp-info-border);
+  --owo-feedback-info-text: var(--owo-cmp-info-text);
+  --owo-feedback-info-icon: var(--owo-cmp-info-text);
+  --owo-feedback-success-bg: var(--owo-cmp-success-bg);
+  --owo-feedback-success-border: var(--owo-cmp-success-border);
+  --owo-feedback-success-text: var(--owo-cmp-success-text);
+  --owo-feedback-success-icon: var(--owo-cmp-success-text);
+  --owo-feedback-warning-bg: var(--owo-cmp-warning-bg);
+  --owo-feedback-warning-border: var(--owo-cmp-warning-border);
+  --owo-feedback-warning-text: var(--owo-cmp-warning-text);
+  --owo-feedback-warning-icon: var(--owo-cmp-warning-text);
+  --owo-feedback-danger-bg: var(--owo-cmp-danger-bg);
+  --owo-feedback-danger-border: var(--owo-cmp-danger-border);
+  --owo-feedback-danger-text: var(--owo-cmp-danger-text);
+  --owo-feedback-danger-icon: var(--owo-cmp-danger-text);
+}
+:root,
+:root[data-theme="light"],
+.owoui-theme-light {
+  --owo-ref-color-neutral-900: #1a1a1a;
+  --owo-ref-color-neutral-800: #2d2d2d;
+  --owo-ref-color-neutral-700: #4a4a4a;
+  --owo-ref-color-neutral-600: #71717a;
+  --owo-ref-color-neutral-500: #a1a1aa;
+  --owo-ref-color-neutral-400: #d4d4d8;
+  --owo-ref-color-neutral-300: #e4e4e7;
+  --owo-ref-color-neutral-200: #f0f0f2;
+  --owo-ref-color-neutral-100: #f8f8f9;
+  --owo-ref-color-brand-primary: #1a1a1a;
+  --owo-ref-color-brand-primary-hover: #000000;
+  --owo-ref-color-brand-accent: #4a4a4a;
+  --owo-ref-color-surface-canvas: #ffffff;
+  --owo-ref-color-surface-base: #ffffff;
+  --owo-ref-color-surface-subtle: #fafaf9;
+  --owo-ref-color-surface-raised: #ffffff;
+  --owo-ref-color-surface-inset: #f5f5f4;
+  --owo-ref-color-surface-border: #e5e7eb;
+  --owo-ref-color-surface-ring: #d6d3d1;
+  --owo-ref-color-surface-overlay: rgba(0, 0, 0, 0.4);
+  --owo-ref-color-overlay-soft: rgba(244, 238, 230, 0.56);
+  --owo-ref-color-overlay-strong: rgba(15, 23, 42, 0.18);
+  --owo-ref-color-highlight-soft: rgba(255, 255, 255, 0.56);
+  --owo-ref-color-highlight-sheen: rgba(255, 255, 255, 0.34);
+  --owo-ref-color-text-on-brand: #ffffff;
+  --owo-ref-color-code-block-bg: #f4f4f5;
+  --owo-ref-color-code-block-border: #e4e4e7;
+  --owo-ref-color-code-block-divider: #ececed;
+  --owo-ref-color-code-inline-bg: #f4f4f5;
+  --owo-ref-color-status-success-bg: rgba(16, 185, 129, 0.10);
+  --owo-ref-color-status-success-border: rgba(16, 185, 129, 0.20);
+  --owo-ref-color-status-success-text: #047857;
+  --owo-ref-color-status-warning-bg: rgba(245, 158, 11, 0.10);
+  --owo-ref-color-status-warning-border: rgba(245, 158, 11, 0.20);
+  --owo-ref-color-status-warning-text: #b45309;
+  --owo-ref-color-status-danger-bg: rgba(239, 68, 68, 0.10);
+  --owo-ref-color-status-danger-border: rgba(239, 68, 68, 0.20);
+  --owo-ref-color-status-danger-text: #b91c1c;
+  --owo-ref-color-status-info-bg: rgba(14, 165, 233, 0.10);
+  --owo-ref-color-status-info-border: rgba(14, 165, 233, 0.20);
+  --owo-ref-color-status-info-text: #0369a1;
+  --owo-sys-theme-surface-canvas: var(--owo-ref-color-surface-canvas);
+  --owo-sys-theme-surface-base: var(--owo-ref-color-surface-base);
+  --owo-sys-theme-surface-subtle: var(--owo-ref-color-surface-subtle);
+  --owo-sys-theme-surface-raised: var(--owo-ref-color-surface-raised);
+  --owo-sys-theme-surface-inset: var(--owo-ref-color-surface-inset);
+  --owo-sys-theme-surface-border: var(--owo-ref-color-surface-border);
+  --owo-sys-theme-surface-border-muted: rgba(0, 0, 0, 0.06);
+  --owo-sys-theme-surface-border-strong: var(--owo-ref-color-surface-ring);
+  --owo-sys-theme-canvas-bg-subtle: #f5f5f4;
+  --owo-sys-theme-surface-container: #f4f4f5;
+  --owo-sys-theme-surface-container-high: #ececed;
+  --owo-sys-theme-surface-container-highest: #e4e4e7;
+  --owo-sys-theme-text-primary: var(--owo-ref-color-neutral-900);
+  --owo-sys-theme-text-secondary: var(--owo-ref-color-neutral-700);
+  --owo-sys-theme-text-muted: var(--owo-ref-color-neutral-600);
+  --owo-sys-theme-text-on-accent: var(--owo-ref-color-text-on-brand);
+  --owo-sys-theme-accent-bg: var(--owo-ref-color-brand-primary);
+  --owo-sys-theme-accent-bg-hover: var(--owo-ref-color-brand-primary-hover);
+  --owo-sys-theme-accent-bg-muted: color-mix(in srgb, #1a1a1a 10%, #ffffff);
+  @supports (color: color-mix(in lab, red, red)) {
+    --owo-sys-theme-accent-bg-muted: color-mix(in srgb, var(--owo-ref-color-brand-primary) 10%, var(--owo-ref-color-surface-base));
+  }
+  --owo-sys-theme-accent-border: color-mix(in srgb, #1a1a1a 40%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    --owo-sys-theme-accent-border: color-mix(in srgb, var(--owo-ref-color-brand-primary) 40%, transparent);
+  }
+  --owo-sys-theme-success-bg: var(--owo-ref-color-status-success-bg);
+  --owo-sys-theme-success-border: var(--owo-ref-color-status-success-border);
+  --owo-sys-theme-success-text: var(--owo-ref-color-status-success-text);
+  --owo-sys-theme-warning-bg: var(--owo-ref-color-status-warning-bg);
+  --owo-sys-theme-warning-border: var(--owo-ref-color-status-warning-border);
+  --owo-sys-theme-warning-text: var(--owo-ref-color-status-warning-text);
+  --owo-sys-theme-danger-bg: var(--owo-ref-color-status-danger-bg);
+  --owo-sys-theme-danger-bg-emphasis: rgba(239, 68, 68, 0.18);
+  --owo-sys-theme-danger-border: var(--owo-ref-color-status-danger-border);
+  --owo-sys-theme-danger-text: var(--owo-ref-color-status-danger-text);
+  --owo-sys-theme-info-bg: var(--owo-ref-color-status-info-bg);
+  --owo-sys-theme-info-border: var(--owo-ref-color-status-info-border);
+  --owo-sys-theme-info-text: var(--owo-ref-color-status-info-text);
+  --owo-sys-theme-control-focus-ring: var(--owo-ref-color-surface-ring);
+  --owo-sys-theme-control-focus-ring-offset: var(--owo-ref-color-surface-base);
+  --owo-sys-theme-overlay-bg: var(--owo-ref-color-overlay-strong);
 }