@owodesign/owoui 0.1.3 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/README.md +22 -6
  2. package/dist/index.min.js +1 -1
  3. package/dist/preset-default.css +143 -0
  4. package/dist/preset-elevated.css +164 -0
  5. package/dist/preset-flat.css +144 -0
  6. package/dist/preset-glass.css +173 -0
  7. package/dist/storybook/index.min.js +9 -9
  8. package/dist/storybook-static/app.css +1832 -1974
  9. package/dist/storybook-static/assets/main.css +2 -2
  10. package/dist/storybook-static/assets/main.js +16 -16
  11. package/dist/style.css +2988 -0
  12. package/dist/theme-dark.css +230 -0
  13. package/dist/theme-light.css +231 -0
  14. package/dist/tokens.css +118 -0
  15. package/dist/tokens.d.ts +16 -9
  16. package/dist/tokens.min.js +1 -1
  17. package/package.json +25 -30
  18. package/src/preset-default.css +0 -27
  19. package/src/preset-elevated.css +0 -27
  20. package/src/preset-flat.css +0 -27
  21. package/src/preset-glass.css +0 -27
  22. package/src/style.css +0 -22
  23. package/src/styles/tokens.css +0 -253
  24. package/src/styles/ui/avatar.css +0 -13
  25. package/src/styles/ui/badge.css +0 -52
  26. package/src/styles/ui/button.css +0 -49
  27. package/src/styles/ui/collapsible.css +0 -13
  28. package/src/styles/ui/dialog.css +0 -37
  29. package/src/styles/ui/drawer.css +0 -15
  30. package/src/styles/ui/dropdown-menu.css +0 -132
  31. package/src/styles/ui/field.css +0 -12
  32. package/src/styles/ui/icon-button.css +0 -29
  33. package/src/styles/ui/input.css +0 -16
  34. package/src/styles/ui/panel.css +0 -23
  35. package/src/styles/ui/segmented-control.css +0 -28
  36. package/src/styles/ui/select.css +0 -52
  37. package/src/styles/ui/skeleton.css +0 -99
  38. package/src/styles/ui/status-notice.css +0 -49
  39. package/src/styles/ui/switch.css +0 -17
  40. package/src/styles/ui/tabs.css +0 -33
  41. package/src/styles/ui/textarea.css +0 -8
  42. package/src/styles/ui/toast.css +0 -57
  43. package/src/styles/ui/tooltip.css +0 -31
  44. package/src/theme-dark.css +0 -87
  45. package/src/theme-light.css +0 -102
  46. package/src/tokens.css +0 -1
package/src/theme-dark.css DELETED
@@ -1,87 +0,0 @@
1
- @import "./tokens.css";
2
-
3
- :root[data-theme="dark"],
4
- .owoui-theme-dark {
5
- --color-n900: #fafafa;
6
- --color-n800: #e4e4e7;
7
- --color-n700: #d4d4d8;
8
- --color-n600: #a1a1aa;
9
- --color-n500: #71717a;
10
- --color-n400: #3f3f46;
11
- --color-n300: #27272a;
12
-
13
- --color-brand-primary: #c6c6c7;
14
- --color-brand-primary-hover: #d4d4d8;
15
- --color-brand-accent: #a1a1aa;
16
-
17
- --color-surface-canvas: #0e0e0e;
18
- --color-surface-base: #18181b;
19
- --color-surface-subtle: #1c1c1f;
20
- --color-surface-raised: #27272a;
21
- --color-surface-inset: #111113;
22
- --color-surface-border: rgba(255, 255, 255, 0.12);
23
- --color-surface-ring: rgba(255, 255, 255, 0.24);
24
- --color-surface-overlay: rgba(0, 0, 0, 0.6);
25
-
26
- --color-overlay-soft: rgba(0, 0, 0, 0.32);
27
- --color-overlay-strong: rgba(0, 0, 0, 0.56);
28
- --color-highlight-soft: rgba(255, 255, 255, 0.06);
29
- --color-highlight-sheen: rgba(255, 255, 255, 0.08);
30
-
31
- --color-text-on-brand: #1a1a1a;
32
-
33
- --color-code-block-bg: #1e1e22;
34
- --color-code-block-border: #2d2d32;
35
- --color-code-block-divider: #27272c;
36
- --color-code-inline-bg: #27272a;
37
-
38
- --color-admin-success-bg: rgba(16, 185, 129, 0.15);
39
- --color-admin-success-border: rgba(16, 185, 129, 0.3);
40
- --color-admin-success-text: #6ee7b7;
41
- --color-admin-warning-bg: rgba(245, 158, 11, 0.15);
42
- --color-admin-warning-border: rgba(245, 158, 11, 0.3);
43
- --color-admin-warning-text: #fbbf24;
44
- --color-admin-danger-bg: rgba(239, 68, 68, 0.15);
45
- --color-admin-danger-border: rgba(239, 68, 68, 0.3);
46
- --color-admin-danger-text: #fca5a5;
47
- --color-admin-info-bg: rgba(14, 165, 233, 0.15);
48
- --color-admin-info-border: rgba(14, 165, 233, 0.3);
49
- --color-admin-info-text: #7dd3fc;
50
-
51
- --theme-surface-canvas: var(--color-surface-canvas);
52
- --theme-surface-base: var(--color-surface-base);
53
- --theme-surface-subtle: var(--color-surface-subtle);
54
- --theme-surface-raised: var(--color-surface-raised);
55
- --theme-surface-inset: var(--color-surface-inset);
56
- --theme-surface-border: var(--color-surface-border);
57
- --theme-surface-border-muted: rgba(255, 255, 255, 0.06);
58
- --theme-surface-border-strong: var(--color-surface-ring);
59
- --theme-canvas-bg-subtle: #0f0f11;
60
- --theme-surface-container: #1e1e22;
61
- --theme-surface-container-high: #252529;
62
- --theme-surface-container-highest: #2d2d32;
63
- --theme-text-primary: var(--color-n800);
64
- --theme-text-secondary: var(--color-n600);
65
- --theme-text-muted: var(--color-n500);
66
- --theme-text-on-accent: var(--color-text-on-brand);
67
- --theme-accent-bg: var(--color-brand-primary);
68
- --theme-accent-bg-hover: var(--color-brand-primary-hover);
69
- --theme-accent-bg-muted: color-mix(in srgb, var(--color-brand-primary) 14%, var(--color-surface-base));
70
- --theme-accent-border: color-mix(in srgb, var(--color-brand-primary) 50%, transparent);
71
- --theme-success-bg: var(--color-admin-success-bg);
72
- --theme-success-border: var(--color-admin-success-border);
73
- --theme-success-text: var(--color-admin-success-text);
74
- --theme-warning-bg: var(--color-admin-warning-bg);
75
- --theme-warning-border: var(--color-admin-warning-border);
76
- --theme-warning-text: var(--color-admin-warning-text);
77
- --theme-danger-bg: var(--color-admin-danger-bg);
78
- --theme-danger-bg-emphasis: rgba(239, 68, 68, 0.24);
79
- --theme-danger-border: var(--color-admin-danger-border);
80
- --theme-danger-text: var(--color-admin-danger-text);
81
- --theme-info-bg: var(--color-admin-info-bg);
82
- --theme-info-border: var(--color-admin-info-border);
83
- --theme-info-text: var(--color-admin-info-text);
84
- --theme-control-focus-ring: var(--color-surface-ring);
85
- --theme-control-focus-ring-offset: var(--color-surface-base);
86
- }
87
-
package/src/theme-light.css DELETED
@@ -1,102 +0,0 @@
1
- @import "./styles/tokens.css";
2
-
3
- /* ================================================================== */
4
- /* Light theme — all --color-* primitives + --theme-* mappings */
5
- /* */
6
- /* :root (bare) is included so light acts as the default when no */
7
- /* explicit data-theme is set. */
8
- /* ================================================================== */
9
-
10
- :root,
11
- :root[data-theme="light"],
12
- .owoui-theme-light {
13
- /* Neutral scale */
14
- --color-n900: #1a1a1a;
15
- --color-n800: #2d2d2d;
16
- --color-n700: #4a4a4a;
17
- --color-n600: #71717a;
18
- --color-n500: #a1a1aa;
19
- --color-n400: #d4d4d8;
20
- --color-n300: #e4e4e7;
21
-
22
- /* Brand */
23
- --color-brand-primary: #1a1a1a;
24
- --color-brand-primary-hover: #000000;
25
- --color-brand-accent: #4a4a4a;
26
-
27
- /* Surfaces */
28
- --color-surface-canvas: #ffffff;
29
- --color-surface-base: #ffffff;
30
- --color-surface-subtle: #fafaf9;
31
- --color-surface-raised: #ffffff;
32
- --color-surface-inset: #f5f5f4;
33
- --color-surface-border: #e5e7eb;
34
- --color-surface-ring: #d6d3d1;
35
- --color-surface-overlay: rgba(0, 0, 0, 0.4);
36
-
37
- /* Overlays & highlights */
38
- --color-overlay-soft: rgba(244, 238, 230, 0.56);
39
- --color-overlay-strong: rgba(15, 23, 42, 0.18);
40
- --color-highlight-soft: rgba(255, 255, 255, 0.56);
41
- --color-highlight-sheen: rgba(255, 255, 255, 0.34);
42
-
43
- /* Text on brand */
44
- --color-text-on-brand: #ffffff;
45
-
46
- /* Code blocks */
47
- --color-code-block-bg: #f4f4f5;
48
- --color-code-block-border: #e4e4e7;
49
- --color-code-block-divider: #ececed;
50
- --color-code-inline-bg: #f4f4f5;
51
-
52
- /* Status */
53
- --color-admin-success-bg: rgba(16, 185, 129, 0.10);
54
- --color-admin-success-border: rgba(16, 185, 129, 0.20);
55
- --color-admin-success-text: #047857;
56
- --color-admin-warning-bg: rgba(245, 158, 11, 0.10);
57
- --color-admin-warning-border: rgba(245, 158, 11, 0.20);
58
- --color-admin-warning-text: #b45309;
59
- --color-admin-danger-bg: rgba(239, 68, 68, 0.10);
60
- --color-admin-danger-border: rgba(239, 68, 68, 0.20);
61
- --color-admin-danger-text: #b91c1c;
62
- --color-admin-info-bg: rgba(14, 165, 233, 0.10);
63
- --color-admin-info-border: rgba(14, 165, 233, 0.20);
64
- --color-admin-info-text: #0369a1;
65
-
66
- /* ---- Theme semantic mappings (--color-* → --theme-*) ---- */
67
- --theme-surface-canvas: var(--color-surface-canvas);
68
- --theme-surface-base: var(--color-surface-base);
69
- --theme-surface-subtle: var(--color-surface-subtle);
70
- --theme-surface-raised: var(--color-surface-raised);
71
- --theme-surface-inset: var(--color-surface-inset);
72
- --theme-surface-border: var(--color-surface-border);
73
- --theme-surface-border-muted: rgba(0, 0, 0, 0.06);
74
- --theme-surface-border-strong: var(--color-surface-ring);
75
- --theme-canvas-bg-subtle: #f5f5f4;
76
- --theme-surface-container: #f4f4f5;
77
- --theme-surface-container-high: #ececed;
78
- --theme-surface-container-highest: #e4e4e7;
79
- --theme-text-primary: var(--color-n800);
80
- --theme-text-secondary: var(--color-n600);
81
- --theme-text-muted: var(--color-n500);
82
- --theme-text-on-accent: var(--color-text-on-brand);
83
- --theme-accent-bg: var(--color-brand-primary);
84
- --theme-accent-bg-hover: var(--color-brand-primary-hover);
85
- --theme-accent-bg-muted: color-mix(in srgb, var(--color-brand-primary) 10%, var(--color-surface-base));
86
- --theme-accent-border: color-mix(in srgb, var(--color-brand-primary) 40%, transparent);
87
- --theme-success-bg: var(--color-admin-success-bg);
88
- --theme-success-border: var(--color-admin-success-border);
89
- --theme-success-text: var(--color-admin-success-text);
90
- --theme-warning-bg: var(--color-admin-warning-bg);
91
- --theme-warning-border: var(--color-admin-warning-border);
92
- --theme-warning-text: var(--color-admin-warning-text);
93
- --theme-danger-bg: var(--color-admin-danger-bg);
94
- --theme-danger-bg-emphasis: rgba(239, 68, 68, 0.18);
95
- --theme-danger-border: var(--color-admin-danger-border);
96
- --theme-danger-text: var(--color-admin-danger-text);
97
- --theme-info-bg: var(--color-admin-info-bg);
98
- --theme-info-border: var(--color-admin-info-border);
99
- --theme-info-text: var(--color-admin-info-text);
100
- --theme-control-focus-ring: var(--color-surface-ring);
101
- --theme-control-focus-ring-offset: var(--color-surface-base);
102
- }
package/src/tokens.css DELETED
@@ -1 +0,0 @@
1
- @import "./styles/tokens.css";