@owodesign/owoui 0.1.1 → 0.1.3

package/src/styles/ui/status-notice.css

@@ -12,6 +12,14 @@
   color: var(--status-notice-icon);
 }
 
+.ui-status-notice__title {
+  color: var(--ui-text-primary);
+}
+
+.ui-status-notice[data-layout="vertical"] .ui-status-notice__title {
+  color: var(--status-notice-text);
+}
+
 .ui-status-notice[data-tone="info"] {
   --status-notice-bg: var(--feedback-info-bg);
   --status-notice-border: var(--feedback-info-border);

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/styles/ui/tooltip.css

@@ -6,12 +6,17 @@
   background: var(--tooltip-bg);
   color: var(--tooltip-text);
   border: 1px solid var(--tooltip-border);
-  box-shadow: var(--tooltip-shadow);
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--tooltip-border) 55%, transparent),
+    var(--tooltip-shadow);
+  backdrop-filter: blur(10px);
 }
 
 .ui-tooltip__arrow {
   color: var(--tooltip-arrow-color);
-  filter: drop-shadow(0 1px 0 var(--tooltip-border));
+  filter:
+    drop-shadow(0 1px 0 var(--tooltip-border))
+    drop-shadow(0 0 0.5px color-mix(in srgb, var(--tooltip-border) 55%, transparent));
 }
 
 @keyframes tooltip-in {

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: #c6c6c7;
+  --color-brand-primary-hover: #d4d4d8;
+  --color-brand-accent: #a1a1aa;
+
+  --color-surface-canvas: #0e0e0e;
+  --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: #1a1a1a;
+
+  --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,102 @@
+@import "./styles/tokens.css";
+
+/* ================================================================== */
+/*  Light theme — all --color-* primitives + --theme-* mappings        */
+/*                                                                     */
+/*  :root (bare) is included so light acts as the default when no      */
+/*  explicit data-theme is set.                                        */
+/* ================================================================== */
+
+:root,
+:root[data-theme="light"],
+.owoui-theme-light {
+  /* Neutral scale */
+  --color-n900: #1a1a1a;
+  --color-n800: #2d2d2d;
+  --color-n700: #4a4a4a;
+  --color-n600: #71717a;
+  --color-n500: #a1a1aa;
+  --color-n400: #d4d4d8;
+  --color-n300: #e4e4e7;
+
+  /* Brand */
+  --color-brand-primary: #1a1a1a;
+  --color-brand-primary-hover: #000000;
+  --color-brand-accent: #4a4a4a;
+
+  /* Surfaces */
+  --color-surface-canvas: #ffffff;
+  --color-surface-base: #ffffff;
+  --color-surface-subtle: #fafaf9;
+  --color-surface-raised: #ffffff;
+  --color-surface-inset: #f5f5f4;
+  --color-surface-border: #e5e7eb;
+  --color-surface-ring: #d6d3d1;
+  --color-surface-overlay: rgba(0, 0, 0, 0.4);
+
+  /* Overlays & highlights */
+  --color-overlay-soft: rgba(244, 238, 230, 0.56);
+  --color-overlay-strong: rgba(15, 23, 42, 0.18);
+  --color-highlight-soft: rgba(255, 255, 255, 0.56);
+  --color-highlight-sheen: rgba(255, 255, 255, 0.34);
+
+  /* Text on brand */
+  --color-text-on-brand: #ffffff;
+
+  /* Code blocks */
+  --color-code-block-bg: #f4f4f5;
+  --color-code-block-border: #e4e4e7;
+  --color-code-block-divider: #ececed;
+  --color-code-inline-bg: #f4f4f5;
+
+  /* Status */
+  --color-admin-success-bg: rgba(16, 185, 129, 0.10);
+  --color-admin-success-border: rgba(16, 185, 129, 0.20);
+  --color-admin-success-text: #047857;
+  --color-admin-warning-bg: rgba(245, 158, 11, 0.10);
+  --color-admin-warning-border: rgba(245, 158, 11, 0.20);
+  --color-admin-warning-text: #b45309;
+  --color-admin-danger-bg: rgba(239, 68, 68, 0.10);
+  --color-admin-danger-border: rgba(239, 68, 68, 0.20);
+  --color-admin-danger-text: #b91c1c;
+  --color-admin-info-bg: rgba(14, 165, 233, 0.10);
+  --color-admin-info-border: rgba(14, 165, 233, 0.20);
+  --color-admin-info-text: #0369a1;
+
+  /* ---- Theme semantic mappings (--color-* → --theme-*) ---- */
+  --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/dark.css

@@ -1,70 +0,0 @@
-@import "./style.css";
-
-:root[data-theme="dark"],
-.owoui-theme-dark {
-  /* ── Neutral scale (inverted for dark context) ── */
-  --color-n900: #fafafa;
-  --color-n800: #e4e4e7;
-  --color-n700: #d4d4d8;
-  --color-n600: #a1a1aa;
-  --color-n500: #71717a;
-  --color-n400: #3f3f46;
-  --color-n300: #27272a;
-
-  /* ── Brand (adjusted for dark background legibility) ── */
-  --color-brand-primary: #e11d48;
-  --color-brand-primary-hover: #f43f5e;
-  --color-brand-accent: #fb7185;
-
-  /* ── Surfaces ── */
-  --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);
-
-  /* ── Overlay & highlight ── */
-  --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;
-
-  /* ── Code blocks ── */
-  --color-code-block-bg: #1e1e22;
-  --color-code-block-border: #2d2d32;
-  --color-code-block-divider: #27272c;
-  --color-code-inline-bg: #27272a;
-
-  /* ── Shadows (deeper for dark context) ── */
-  --shadow-raised: 0 10px 20px rgba(0, 0, 0, 0.30);
-  --shadow-popover: 0 18px 40px rgba(0, 0, 0, 0.40);
-
-  /* ── Feedback (lightened text for dark backgrounds) ── */
-  --color-admin-success-bg: rgba(16, 185, 129, 0.15);
-  --color-admin-success-border: rgba(16, 185, 129, 0.30);
-  --color-admin-success-text: #6ee7b7;
-  --color-admin-warning-bg: rgba(245, 158, 11, 0.15);
-  --color-admin-warning-border: rgba(245, 158, 11, 0.30);
-  --color-admin-warning-text: #fbbf24;
-  --color-admin-danger-bg: rgba(239, 68, 68, 0.15);
-  --color-admin-danger-border: rgba(239, 68, 68, 0.30);
-  --color-admin-danger-text: #fca5a5;
-  --color-admin-info-bg: rgba(14, 165, 233, 0.15);
-  --color-admin-info-border: rgba(14, 165, 233, 0.30);
-  --color-admin-info-text: #7dd3fc;
-
-  /* ── New semantic tokens: dark overrides ── */
-  --ui-canvas-bg-subtle: #0f0f11;
-  --ui-surface-border-muted: rgba(255, 255, 255, 0.06);
-  --ui-surface-container: #1e1e22;
-  --ui-surface-container-high: #252529;
-  --ui-surface-container-highest: #2d2d32;
-  --ui-accent-bg-muted: color-mix(in srgb, var(--color-brand-primary) 14%, var(--color-surface-base));
-  --ui-accent-border: color-mix(in srgb, var(--color-brand-primary) 50%, transparent);
-  --ui-danger-bg-emphasis: rgba(239, 68, 68, 0.24);
-}

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;
-}

package/src/styles/ui/empty-state.css

@@ -1,34 +0,0 @@
-.ui-empty-state {
-  --empty-state-bg: var(--ui-surface-bg-raised);
-  --empty-state-border: var(--ui-surface-border);
-  --empty-state-title: var(--ui-text-primary);
-  --empty-state-text: var(--ui-text-muted);
-  --empty-state-icon: var(--ui-text-muted);
-  background: var(--empty-state-bg);
-  border-color: var(--empty-state-border);
-  color: var(--empty-state-text);
-}
-
-.ui-empty-state__icon {
-  color: var(--empty-state-icon);
-}
-
-.ui-empty-state__title {
-  color: var(--empty-state-title);
-}
-
-.ui-empty-state[data-tone="notice"] {
-  --empty-state-bg: var(--ui-info-bg);
-  --empty-state-border: var(--ui-info-border);
-  --empty-state-title: var(--ui-info-text);
-  --empty-state-text: var(--ui-info-text);
-  --empty-state-icon: var(--ui-info-text);
-}
-
-.ui-empty-state[data-tone="warning"] {
-  --empty-state-bg: var(--ui-warning-bg);
-  --empty-state-border: var(--ui-warning-border);
-  --empty-state-title: var(--ui-warning-text);
-  --empty-state-text: var(--ui-warning-text);
-  --empty-state-icon: var(--ui-warning-text);
-}