@owodesign/owoui 0.1.0 → 0.1.2

package/src/preset-default.css

@@ -0,0 +1,27 @@
+@import "./tokens.css";
+
+:root[data-preset="default"],
+.owoui-preset-default {
+  --preset-surface-bg: var(--theme-surface-base);
+  --preset-surface-bg-subtle: var(--theme-surface-subtle);
+  --preset-surface-bg-raised: var(--theme-surface-raised);
+  --preset-surface-bg-inset: var(--theme-surface-inset);
+  --preset-surface-border: var(--theme-surface-border);
+  --preset-surface-border-muted: var(--theme-surface-border-muted);
+  --preset-surface-border-strong: var(--theme-surface-border-strong);
+  --preset-surface-shadow: var(--shadow-raised);
+  --preset-surface-shadow-strong: var(--shadow-popover);
+  --preset-surface-blur: 0px;
+  --preset-canvas-bg: var(--theme-surface-canvas);
+  --preset-canvas-bg-subtle: var(--theme-canvas-bg-subtle);
+  --preset-surface-container: var(--theme-surface-container);
+  --preset-surface-container-high: var(--theme-surface-container-high);
+  --preset-surface-container-highest: var(--theme-surface-container-highest);
+  --preset-control-radius-sm: 0.5rem;
+  --preset-control-radius-md: 0.75rem;
+  --preset-control-radius-lg: 1rem;
+  --preset-control-radius-xl: 1.5rem;
+  --preset-control-radius-2xl: 2rem;
+  --preset-control-border-width: 1px;
+}
+

package/src/preset-elevated.css

@@ -0,0 +1,27 @@
+@import "./tokens.css";
+
+:root[data-preset="elevated"],
+.owoui-preset-elevated {
+  --preset-surface-bg: color-mix(in srgb, var(--theme-surface-base) 96%, var(--theme-surface-border-strong));
+  --preset-surface-bg-subtle: color-mix(in srgb, var(--theme-surface-subtle) 96%, var(--theme-surface-border-strong));
+  --preset-surface-bg-raised: color-mix(in srgb, var(--theme-surface-raised) 94%, var(--theme-surface-border-strong));
+  --preset-surface-bg-inset: var(--theme-surface-inset);
+  --preset-surface-border: color-mix(in srgb, var(--theme-surface-border) 88%, var(--theme-surface-border-strong));
+  --preset-surface-border-muted: var(--theme-surface-border-muted);
+  --preset-surface-border-strong: var(--theme-surface-border-strong);
+  --preset-surface-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
+  --preset-surface-shadow-strong: 0 28px 60px rgba(15, 23, 42, 0.18);
+  --preset-surface-blur: 0px;
+  --preset-canvas-bg: var(--theme-surface-canvas);
+  --preset-canvas-bg-subtle: var(--theme-canvas-bg-subtle);
+  --preset-surface-container: color-mix(in srgb, var(--theme-surface-container) 94%, var(--theme-surface-border-strong));
+  --preset-surface-container-high: color-mix(in srgb, var(--theme-surface-container-high) 94%, var(--theme-surface-border-strong));
+  --preset-surface-container-highest: color-mix(in srgb, var(--theme-surface-container-highest) 92%, var(--theme-surface-border-strong));
+  --preset-control-radius-sm: 0.625rem;
+  --preset-control-radius-md: 0.875rem;
+  --preset-control-radius-lg: 1.125rem;
+  --preset-control-radius-xl: 1.625rem;
+  --preset-control-radius-2xl: 2.125rem;
+  --preset-control-border-width: 1px;
+}
+

package/src/preset-flat.css

@@ -0,0 +1,27 @@
+@import "./tokens.css";
+
+:root[data-preset="flat"],
+.owoui-preset-flat {
+  --preset-surface-bg: var(--theme-surface-base);
+  --preset-surface-bg-subtle: var(--theme-surface-subtle);
+  --preset-surface-bg-raised: var(--theme-surface-base);
+  --preset-surface-bg-inset: var(--theme-surface-inset);
+  --preset-surface-border: var(--theme-surface-border);
+  --preset-surface-border-muted: var(--theme-surface-border-muted);
+  --preset-surface-border-strong: var(--theme-surface-border-strong);
+  --preset-surface-shadow: none;
+  --preset-surface-shadow-strong: none;
+  --preset-surface-blur: 0px;
+  --preset-canvas-bg: var(--theme-surface-canvas);
+  --preset-canvas-bg-subtle: var(--theme-canvas-bg-subtle);
+  --preset-surface-container: var(--theme-surface-container);
+  --preset-surface-container-high: var(--theme-surface-container);
+  --preset-surface-container-highest: var(--theme-surface-container-high);
+  --preset-control-radius-sm: 0.375rem;
+  --preset-control-radius-md: 0.625rem;
+  --preset-control-radius-lg: 0.875rem;
+  --preset-control-radius-xl: 1.25rem;
+  --preset-control-radius-2xl: 1.5rem;
+  --preset-control-border-width: 1px;
+}
+

package/src/preset-glass.css

@@ -0,0 +1,27 @@
+@import "./tokens.css";
+
+:root[data-preset="glass"],
+.owoui-preset-glass {
+  --preset-surface-bg: color-mix(in srgb, var(--theme-surface-base) 62%, transparent);
+  --preset-surface-bg-subtle: color-mix(in srgb, var(--theme-surface-subtle) 48%, transparent);
+  --preset-surface-bg-raised: color-mix(in srgb, var(--theme-surface-raised) 72%, transparent);
+  --preset-surface-bg-inset: color-mix(in srgb, var(--theme-surface-inset) 82%, transparent);
+  --preset-surface-border: color-mix(in srgb, var(--theme-surface-border-strong) 55%, transparent);
+  --preset-surface-border-muted: color-mix(in srgb, var(--theme-surface-border-muted) 60%, transparent);
+  --preset-surface-border-strong: color-mix(in srgb, var(--theme-surface-border-strong) 78%, transparent);
+  --preset-surface-shadow: 0 16px 44px rgba(15, 23, 42, 0.1);
+  --preset-surface-shadow-strong: 0 24px 64px rgba(15, 23, 42, 0.14);
+  --preset-surface-blur: 18px;
+  --preset-canvas-bg: var(--theme-surface-canvas);
+  --preset-canvas-bg-subtle: var(--theme-canvas-bg-subtle);
+  --preset-surface-container: color-mix(in srgb, var(--theme-surface-container) 70%, transparent);
+  --preset-surface-container-high: color-mix(in srgb, var(--theme-surface-container-high) 74%, transparent);
+  --preset-surface-container-highest: color-mix(in srgb, var(--theme-surface-container-highest) 78%, transparent);
+  --preset-control-radius-sm: 0.75rem;
+  --preset-control-radius-md: 1rem;
+  --preset-control-radius-lg: 1.25rem;
+  --preset-control-radius-xl: 1.75rem;
+  --preset-control-radius-2xl: 2.25rem;
+  --preset-control-border-width: 1px;
+}
+

package/src/style.css

@@ -3,6 +3,7 @@
 @import "./styles/ui/avatar.css";
 @import "./styles/ui/badge.css";
 @import "./styles/ui/button.css";
+@import "./styles/ui/collapsible.css";
 @import "./styles/ui/dialog.css";
 @import "./styles/ui/dropdown-menu.css";
 @import "./styles/ui/drawer.css";
@@ -16,5 +17,7 @@
 @import "./styles/ui/skeleton.css";
 @import "./styles/ui/status-notice.css";
 @import "./styles/ui/switch.css";
+@import "./styles/ui/tabs.css";
+@import "./styles/ui/textarea.css";
 @import "./styles/ui/toast.css";
 @import "./styles/ui/tooltip.css";

package/src/styles/tokens.css

@@ -28,6 +28,8 @@
   --color-highlight-sheen: rgba(255, 255, 255, 0.34);
   --color-text-on-brand: #ffffff;
   --color-code-block-bg: #f4f4f5;
+  --color-code-block-border: #e4e4e7;
+  --color-code-block-divider: #ececed;
   --color-code-inline-bg: #f4f4f5;
   --shadow-raised: 0 10px 20px rgba(15, 23, 42, 0.08);
   --shadow-popover: 0 18px 40px rgba(15, 23, 42, 0.10);
@@ -55,44 +57,118 @@
 }
 
 :root {
-  --ui-surface-bg: var(--color-surface-base);
-  --ui-surface-bg-subtle: var(--color-surface-subtle);
-  --ui-surface-bg-raised: var(--color-surface-raised);
-  --ui-surface-bg-inset: var(--color-surface-inset);
-  --ui-surface-border: var(--color-surface-border);
-  --ui-surface-border-strong: var(--color-surface-ring);
-  --ui-surface-shadow: var(--shadow-raised);
-  --ui-surface-shadow-strong: var(--shadow-popover);
-  --ui-surface-blur: 0px;
-
-  --ui-text-primary: var(--color-n800);
-  --ui-text-secondary: var(--color-n600);
-  --ui-text-muted: var(--color-n500);
-  --ui-text-on-accent: var(--color-text-on-brand);
-
-  --ui-accent-bg: var(--color-brand-primary);
-  --ui-accent-bg-hover: var(--color-brand-primary-hover);
-  --ui-accent-text: var(--color-text-on-brand);
-
-  --ui-success-bg: var(--color-admin-success-bg);
-  --ui-success-border: var(--color-admin-success-border);
-  --ui-success-text: var(--color-admin-success-text);
-  --ui-warning-bg: var(--color-admin-warning-bg);
-  --ui-warning-border: var(--color-admin-warning-border);
-  --ui-warning-text: var(--color-admin-warning-text);
-  --ui-danger-bg: var(--color-admin-danger-bg);
-  --ui-danger-border: var(--color-admin-danger-border);
-  --ui-danger-text: var(--color-admin-danger-text);
-  --ui-info-bg: var(--color-admin-info-bg);
-  --ui-info-border: var(--color-admin-info-border);
-  --ui-info-text: var(--color-admin-info-text);
-
-  --ui-control-radius-sm: 0.5rem;
-  --ui-control-radius-md: 0.75rem;
-  --ui-control-radius-lg: 1rem;
-  --ui-control-border-width: 1px;
-  --ui-control-focus-ring: var(--color-surface-ring);
-  --ui-control-focus-ring-offset: var(--color-surface-base);
+  --theme-surface-canvas: var(--color-surface-canvas);
+  --theme-surface-base: var(--color-surface-base);
+  --theme-surface-subtle: var(--color-surface-subtle);
+  --theme-surface-raised: var(--color-surface-raised);
+  --theme-surface-inset: var(--color-surface-inset);
+  --theme-surface-border: var(--color-surface-border);
+  --theme-surface-border-muted: rgba(0, 0, 0, 0.06);
+  --theme-surface-border-strong: var(--color-surface-ring);
+  --theme-canvas-bg-subtle: #f5f5f4;
+  --theme-surface-container: #f4f4f5;
+  --theme-surface-container-high: #ececed;
+  --theme-surface-container-highest: #e4e4e7;
+  --theme-text-primary: var(--color-n800);
+  --theme-text-secondary: var(--color-n600);
+  --theme-text-muted: var(--color-n500);
+  --theme-text-on-accent: var(--color-text-on-brand);
+  --theme-accent-bg: var(--color-brand-primary);
+  --theme-accent-bg-hover: var(--color-brand-primary-hover);
+  --theme-accent-bg-muted: color-mix(in srgb, var(--color-brand-primary) 10%, var(--color-surface-base));
+  --theme-accent-border: color-mix(in srgb, var(--color-brand-primary) 40%, transparent);
+  --theme-success-bg: var(--color-admin-success-bg);
+  --theme-success-border: var(--color-admin-success-border);
+  --theme-success-text: var(--color-admin-success-text);
+  --theme-warning-bg: var(--color-admin-warning-bg);
+  --theme-warning-border: var(--color-admin-warning-border);
+  --theme-warning-text: var(--color-admin-warning-text);
+  --theme-danger-bg: var(--color-admin-danger-bg);
+  --theme-danger-bg-emphasis: rgba(239, 68, 68, 0.18);
+  --theme-danger-border: var(--color-admin-danger-border);
+  --theme-danger-text: var(--color-admin-danger-text);
+  --theme-info-bg: var(--color-admin-info-bg);
+  --theme-info-border: var(--color-admin-info-border);
+  --theme-info-text: var(--color-admin-info-text);
+  --theme-control-focus-ring: var(--color-surface-ring);
+  --theme-control-focus-ring-offset: var(--color-surface-base);
+
+  /* Signature Look: current qblog default preset qualities */
+  --preset-surface-bg: var(--theme-surface-base);
+  --preset-surface-bg-subtle: var(--theme-surface-subtle);
+  --preset-surface-bg-raised: var(--theme-surface-raised);
+  --preset-surface-bg-inset: var(--theme-surface-inset);
+  --preset-surface-border: var(--theme-surface-border);
+  --preset-surface-border-muted: var(--theme-surface-border-muted);
+  --preset-surface-border-strong: var(--theme-surface-border-strong);
+  --preset-surface-shadow: var(--shadow-raised);
+  --preset-surface-shadow-strong: var(--shadow-popover);
+  --preset-surface-blur: 0px;
+  --preset-canvas-bg: var(--theme-surface-canvas);
+  --preset-canvas-bg-subtle: var(--theme-canvas-bg-subtle);
+  --preset-surface-container: var(--theme-surface-container);
+  --preset-surface-container-high: var(--theme-surface-container-high);
+  --preset-surface-container-highest: var(--theme-surface-container-highest);
+  --preset-control-radius-sm: 0.5rem;
+  --preset-control-radius-md: 0.75rem;
+  --preset-control-radius-lg: 1rem;
+  --preset-control-radius-xl: 1.5rem;
+  --preset-control-radius-2xl: 2rem;
+  --preset-control-border-width: 1px;
+
+  --ui-surface-bg: var(--preset-surface-bg);
+  --ui-surface-bg-subtle: var(--preset-surface-bg-subtle);
+  --ui-surface-bg-raised: var(--preset-surface-bg-raised);
+  --ui-surface-bg-inset: var(--preset-surface-bg-inset);
+  --ui-surface-border: var(--preset-surface-border);
+  --ui-surface-border-muted: var(--preset-surface-border-muted);
+  --ui-surface-border-strong: var(--preset-surface-border-strong);
+  --ui-surface-shadow: var(--preset-surface-shadow);
+  --ui-surface-shadow-strong: var(--preset-surface-shadow-strong);
+  --ui-surface-blur: var(--preset-surface-blur);
+
+  --ui-canvas-bg: var(--preset-canvas-bg);
+  --ui-canvas-bg-subtle: var(--preset-canvas-bg-subtle);
+
+  --ui-surface-container: var(--preset-surface-container);
+  --ui-surface-container-high: var(--preset-surface-container-high);
+  --ui-surface-container-highest: var(--preset-surface-container-highest);
+
+  --ui-text-primary: var(--theme-text-primary);
+  --ui-text-secondary: var(--theme-text-secondary);
+  --ui-text-muted: var(--theme-text-muted);
+  --ui-text-on-accent: var(--theme-text-on-accent);
+
+  --ui-accent-bg: var(--theme-accent-bg);
+  --ui-accent-bg-hover: var(--theme-accent-bg-hover);
+  --ui-accent-bg-muted: var(--theme-accent-bg-muted);
+  --ui-accent-text: var(--theme-text-on-accent);
+  --ui-accent-border: var(--theme-accent-border);
+
+  --ui-success-bg: var(--theme-success-bg);
+  --ui-success-border: var(--theme-success-border);
+  --ui-success-text: var(--theme-success-text);
+  --ui-warning-bg: var(--theme-warning-bg);
+  --ui-warning-border: var(--theme-warning-border);
+  --ui-warning-text: var(--theme-warning-text);
+  --ui-danger-bg: var(--theme-danger-bg);
+  --ui-danger-bg-emphasis: var(--theme-danger-bg-emphasis);
+  --ui-danger-border: var(--theme-danger-border);
+  --ui-danger-text: var(--theme-danger-text);
+  --ui-info-bg: var(--theme-info-bg);
+  --ui-info-border: var(--theme-info-border);
+  --ui-info-text: var(--theme-info-text);
+
+  --ui-control-radius-sm: var(--preset-control-radius-sm);
+  --ui-control-radius-md: var(--preset-control-radius-md);
+  --ui-control-radius-lg: var(--preset-control-radius-lg);
+  --ui-control-radius-xl: var(--preset-control-radius-xl);
+  --ui-control-radius-2xl: var(--preset-control-radius-2xl);
+  --ui-control-border-width: var(--preset-control-border-width);
+  --ui-control-focus-ring: var(--theme-control-focus-ring);
+  --ui-control-focus-ring-offset: var(--theme-control-focus-ring-offset);
+
+  --ui-font-heading: var(--font-heading);
 
   --ui-motion-duration-fast: 0.15s;
   --ui-motion-duration-default: 0.2s;
@@ -109,29 +185,29 @@
   --content-padding: 24px;
   --header-top-margin: 64px;
 
-  --publish-trigger-bg: var(--color-surface-subtle);
-  --publish-trigger-border: var(--color-surface-border);
-  --publish-trigger-text: var(--color-n800);
-  --publish-trigger-active-bg: color-mix(in srgb, var(--color-brand-primary) 8%, var(--color-surface-base));
-  --publish-popover-bg: var(--color-surface-base);
-  --publish-popover-border: var(--color-surface-border);
-  --publish-popover-shadow: var(--shadow-popover);
-  --publish-section-bg: var(--color-surface-subtle);
-  --publish-section-border: var(--color-surface-border);
-  --publish-fact-title: var(--color-n600);
+  --publish-trigger-bg: var(--ui-surface-bg-subtle);
+  --publish-trigger-border: var(--ui-surface-border);
+  --publish-trigger-text: var(--ui-text-primary);
+  --publish-trigger-active-bg: var(--ui-accent-bg-muted);
+  --publish-popover-bg: var(--ui-surface-bg);
+  --publish-popover-border: var(--ui-surface-border);
+  --publish-popover-shadow: var(--ui-surface-shadow-strong);
+  --publish-section-bg: var(--ui-surface-bg-subtle);
+  --publish-section-border: var(--ui-surface-border);
+  --publish-fact-title: var(--ui-text-secondary);
   --publish-fact-value: var(--color-n900);
-  --publish-muted-text: var(--color-n600);
-  --publish-warning-bg: var(--color-admin-warning-bg);
-  --publish-warning-border: var(--color-admin-warning-border);
-  --publish-warning-text: var(--color-admin-warning-text);
-  --publish-danger-bg: var(--color-admin-danger-bg);
-  --publish-danger-border: var(--color-admin-danger-border);
-  --publish-danger-text: var(--color-admin-danger-text);
-  --publish-success-bg: var(--color-admin-success-bg);
-  --publish-success-border: var(--color-admin-success-border);
-  --publish-success-text: var(--color-admin-success-text);
-  --publish-progress-track: var(--color-surface-inset);
-  --publish-progress-fill: var(--color-brand-primary);
+  --publish-muted-text: var(--ui-text-secondary);
+  --publish-warning-bg: var(--ui-warning-bg);
+  --publish-warning-border: var(--ui-warning-border);
+  --publish-warning-text: var(--ui-warning-text);
+  --publish-danger-bg: var(--ui-danger-bg);
+  --publish-danger-border: var(--ui-danger-border);
+  --publish-danger-text: var(--ui-danger-text);
+  --publish-success-bg: var(--ui-success-bg);
+  --publish-success-border: var(--ui-success-border);
+  --publish-success-text: var(--ui-success-text);
+  --publish-progress-track: var(--ui-surface-bg-inset);
+  --publish-progress-fill: var(--ui-accent-bg);
 
   --feedback-neutral-bg: var(--ui-surface-bg-raised);
   --feedback-neutral-border: var(--ui-surface-border);

package/src/styles/ui/collapsible.css

@@ -0,0 +1,13 @@
+.ui-collapsible__trigger {
+  cursor: pointer;
+}
+
+.ui-collapsible__content {
+  height: auto;
+  overflow: hidden;
+  transition: height 180ms ease;
+}
+
+.ui-collapsible__content-inner {
+  min-height: 0;
+}

package/src/styles/ui/tabs.css

@@ -0,0 +1,33 @@
+.ui-tabs__list {
+  --tabs-border: var(--ui-surface-border);
+  border-color: var(--tabs-border);
+}
+
+.ui-tabs__trigger {
+  --tabs-text: var(--ui-text-muted);
+  --tabs-hover-text: var(--ui-text-secondary);
+  --tabs-active-text: var(--ui-text-primary);
+  --tabs-active-border: var(--ui-accent-strong);
+  --tabs-active-bg: color-mix(in srgb, var(--ui-accent-soft) 35%, transparent);
+  --tabs-ring: var(--ui-control-focus-ring);
+  border-bottom-color: transparent;
+  color: var(--tabs-text);
+}
+
+.ui-tabs__trigger:hover {
+  color: var(--tabs-hover-text);
+}
+
+.ui-tabs__trigger[data-state="active"] {
+  background: var(--tabs-active-bg);
+  border-bottom-color: var(--tabs-active-border);
+  color: var(--tabs-active-text);
+}
+
+.ui-tabs__trigger:focus-visible {
+  --tw-ring-color: var(--tabs-ring);
+}
+
+.ui-tabs__content {
+  color: var(--ui-text-primary);
+}

package/src/styles/ui/textarea.css

@@ -0,0 +1,8 @@
+.ui-textarea {
+  min-height: calc(1.5em * 3 + 1rem);
+  line-height: 1.5;
+}
+
+.ui-textarea[data-auto-resize="true"] {
+  overflow-y: hidden;
+}

package/src/theme-dark.css

@@ -0,0 +1,87 @@
+@import "./tokens.css";
+
+:root[data-theme="dark"],
+.owoui-theme-dark {
+  --color-n900: #fafafa;
+  --color-n800: #e4e4e7;
+  --color-n700: #d4d4d8;
+  --color-n600: #a1a1aa;
+  --color-n500: #71717a;
+  --color-n400: #3f3f46;
+  --color-n300: #27272a;
+
+  --color-brand-primary: #e11d48;
+  --color-brand-primary-hover: #f43f5e;
+  --color-brand-accent: #fb7185;
+
+  --color-surface-canvas: #09090b;
+  --color-surface-base: #18181b;
+  --color-surface-subtle: #1c1c1f;
+  --color-surface-raised: #27272a;
+  --color-surface-inset: #111113;
+  --color-surface-border: rgba(255, 255, 255, 0.12);
+  --color-surface-ring: rgba(255, 255, 255, 0.24);
+  --color-surface-overlay: rgba(0, 0, 0, 0.6);
+
+  --color-overlay-soft: rgba(0, 0, 0, 0.32);
+  --color-overlay-strong: rgba(0, 0, 0, 0.56);
+  --color-highlight-soft: rgba(255, 255, 255, 0.06);
+  --color-highlight-sheen: rgba(255, 255, 255, 0.08);
+
+  --color-text-on-brand: #ffffff;
+
+  --color-code-block-bg: #1e1e22;
+  --color-code-block-border: #2d2d32;
+  --color-code-block-divider: #27272c;
+  --color-code-inline-bg: #27272a;
+
+  --color-admin-success-bg: rgba(16, 185, 129, 0.15);
+  --color-admin-success-border: rgba(16, 185, 129, 0.3);
+  --color-admin-success-text: #6ee7b7;
+  --color-admin-warning-bg: rgba(245, 158, 11, 0.15);
+  --color-admin-warning-border: rgba(245, 158, 11, 0.3);
+  --color-admin-warning-text: #fbbf24;
+  --color-admin-danger-bg: rgba(239, 68, 68, 0.15);
+  --color-admin-danger-border: rgba(239, 68, 68, 0.3);
+  --color-admin-danger-text: #fca5a5;
+  --color-admin-info-bg: rgba(14, 165, 233, 0.15);
+  --color-admin-info-border: rgba(14, 165, 233, 0.3);
+  --color-admin-info-text: #7dd3fc;
+
+  --theme-surface-canvas: var(--color-surface-canvas);
+  --theme-surface-base: var(--color-surface-base);
+  --theme-surface-subtle: var(--color-surface-subtle);
+  --theme-surface-raised: var(--color-surface-raised);
+  --theme-surface-inset: var(--color-surface-inset);
+  --theme-surface-border: var(--color-surface-border);
+  --theme-surface-border-muted: rgba(255, 255, 255, 0.06);
+  --theme-surface-border-strong: var(--color-surface-ring);
+  --theme-canvas-bg-subtle: #0f0f11;
+  --theme-surface-container: #1e1e22;
+  --theme-surface-container-high: #252529;
+  --theme-surface-container-highest: #2d2d32;
+  --theme-text-primary: var(--color-n800);
+  --theme-text-secondary: var(--color-n600);
+  --theme-text-muted: var(--color-n500);
+  --theme-text-on-accent: var(--color-text-on-brand);
+  --theme-accent-bg: var(--color-brand-primary);
+  --theme-accent-bg-hover: var(--color-brand-primary-hover);
+  --theme-accent-bg-muted: color-mix(in srgb, var(--color-brand-primary) 14%, var(--color-surface-base));
+  --theme-accent-border: color-mix(in srgb, var(--color-brand-primary) 50%, transparent);
+  --theme-success-bg: var(--color-admin-success-bg);
+  --theme-success-border: var(--color-admin-success-border);
+  --theme-success-text: var(--color-admin-success-text);
+  --theme-warning-bg: var(--color-admin-warning-bg);
+  --theme-warning-border: var(--color-admin-warning-border);
+  --theme-warning-text: var(--color-admin-warning-text);
+  --theme-danger-bg: var(--color-admin-danger-bg);
+  --theme-danger-bg-emphasis: rgba(239, 68, 68, 0.24);
+  --theme-danger-border: var(--color-admin-danger-border);
+  --theme-danger-text: var(--color-admin-danger-text);
+  --theme-info-bg: var(--color-admin-info-bg);
+  --theme-info-border: var(--color-admin-info-border);
+  --theme-info-text: var(--color-admin-info-text);
+  --theme-control-focus-ring: var(--color-surface-ring);
+  --theme-control-focus-ring-offset: var(--color-surface-base);
+}
+

package/src/theme-light.css

@@ -0,0 +1,41 @@
+@import "./tokens.css";
+
+:root[data-theme="light"],
+.owoui-theme-light {
+  --theme-surface-canvas: var(--color-surface-canvas);
+  --theme-surface-base: var(--color-surface-base);
+  --theme-surface-subtle: var(--color-surface-subtle);
+  --theme-surface-raised: var(--color-surface-raised);
+  --theme-surface-inset: var(--color-surface-inset);
+  --theme-surface-border: var(--color-surface-border);
+  --theme-surface-border-muted: rgba(0, 0, 0, 0.06);
+  --theme-surface-border-strong: var(--color-surface-ring);
+  --theme-canvas-bg-subtle: #f5f5f4;
+  --theme-surface-container: #f4f4f5;
+  --theme-surface-container-high: #ececed;
+  --theme-surface-container-highest: #e4e4e7;
+  --theme-text-primary: var(--color-n800);
+  --theme-text-secondary: var(--color-n600);
+  --theme-text-muted: var(--color-n500);
+  --theme-text-on-accent: var(--color-text-on-brand);
+  --theme-accent-bg: var(--color-brand-primary);
+  --theme-accent-bg-hover: var(--color-brand-primary-hover);
+  --theme-accent-bg-muted: color-mix(in srgb, var(--color-brand-primary) 10%, var(--color-surface-base));
+  --theme-accent-border: color-mix(in srgb, var(--color-brand-primary) 40%, transparent);
+  --theme-success-bg: var(--color-admin-success-bg);
+  --theme-success-border: var(--color-admin-success-border);
+  --theme-success-text: var(--color-admin-success-text);
+  --theme-warning-bg: var(--color-admin-warning-bg);
+  --theme-warning-border: var(--color-admin-warning-border);
+  --theme-warning-text: var(--color-admin-warning-text);
+  --theme-danger-bg: var(--color-admin-danger-bg);
+  --theme-danger-bg-emphasis: rgba(239, 68, 68, 0.18);
+  --theme-danger-border: var(--color-admin-danger-border);
+  --theme-danger-text: var(--color-admin-danger-text);
+  --theme-info-bg: var(--color-admin-info-bg);
+  --theme-info-border: var(--color-admin-info-border);
+  --theme-info-text: var(--color-admin-info-text);
+  --theme-control-focus-ring: var(--color-surface-ring);
+  --theme-control-focus-ring-offset: var(--color-surface-base);
+}
+

package/src/elevated.css

@@ -1,20 +0,0 @@
-@import "./style.css";
-
-:root,
-.owoui-theme-elevated {
-  --color-surface-canvas: #f4f7fb;
-  --color-surface-base: rgba(255, 255, 255, 0.88);
-  --color-surface-subtle: rgba(248, 250, 252, 0.94);
-  --color-surface-raised: rgba(255, 255, 255, 0.96);
-  --color-surface-inset: #eef2f7;
-  --color-surface-border: rgba(148, 163, 184, 0.22);
-  --color-surface-ring: rgba(59, 130, 246, 0.28);
-  --color-overlay-soft: rgba(240, 244, 250, 0.62);
-  --color-overlay-strong: rgba(15, 23, 42, 0.24);
-  --shadow-raised: 0 16px 40px rgba(15, 23, 42, 0.14);
-  --shadow-popover: 0 28px 60px rgba(15, 23, 42, 0.18);
-  --drawer-panel-shadow: 0 28px 60px rgba(15, 23, 42, 0.18);
-  --select-dropdown-shadow: 0 22px 50px rgba(15, 23, 42, 0.16);
-  --tooltip-shadow: 0 14px 36px rgba(15, 23, 42, 0.14);
-  --theme-picker-shadow: 0 24px 56px rgba(15, 23, 42, 0.16);
-}

package/src/flat.css

@@ -1 +0,0 @@
-@import "./style.css";

package/src/glass.css

@@ -1,17 +0,0 @@
-@import "./style.css";
-
-:root,
-.owoui-theme-glass {
-  --color-surface-canvas: linear-gradient(180deg, #edf3ff 0%, #f7fbff 42%, #f2f7fb 100%);
-  --color-surface-base: rgba(255, 255, 255, 0.62);
-  --color-surface-subtle: rgba(255, 255, 255, 0.48);
-  --color-surface-raised: rgba(255, 255, 255, 0.72);
-  --color-surface-inset: rgba(236, 243, 251, 0.82);
-  --color-surface-border: rgba(255, 255, 255, 0.42);
-  --color-surface-ring: rgba(148, 163, 184, 0.28);
-  --color-overlay-soft: rgba(240, 246, 255, 0.48);
-  --color-overlay-strong: rgba(15, 23, 42, 0.18);
-  --shadow-raised: 0 16px 44px rgba(15, 23, 42, 0.10);
-  --shadow-popover: 0 24px 64px rgba(15, 23, 42, 0.14);
-  --ui-surface-blur: 18px;
-}