@owodesign/owoui 0.1.3 → 0.1.4

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 (36) hide show
  1. package/README.md +6 -0
  2. package/dist/index.min.js +1 -1
  3. package/dist/storybook/index.min.js +9 -9
  4. package/dist/storybook-static/app.css +1715 -1637
  5. package/dist/storybook-static/assets/main.css +1 -1
  6. package/dist/storybook-static/assets/main.js +16 -16
  7. package/dist/tokens.d.ts +12 -8
  8. package/dist/tokens.min.js +1 -1
  9. package/package.json +1 -1
  10. package/src/preset-default.css +22 -22
  11. package/src/preset-elevated.css +22 -22
  12. package/src/preset-flat.css +22 -22
  13. package/src/preset-glass.css +22 -22
  14. package/src/styles/tokens.css +221 -203
  15. package/src/styles/ui/avatar.css +6 -6
  16. package/src/styles/ui/badge.css +25 -25
  17. package/src/styles/ui/button.css +26 -26
  18. package/src/styles/ui/collapsible.css +3 -3
  19. package/src/styles/ui/dialog.css +10 -10
  20. package/src/styles/ui/drawer.css +5 -5
  21. package/src/styles/ui/dropdown-menu.css +43 -43
  22. package/src/styles/ui/field.css +5 -5
  23. package/src/styles/ui/icon-button.css +14 -14
  24. package/src/styles/ui/input.css +9 -9
  25. package/src/styles/ui/panel.css +11 -11
  26. package/src/styles/ui/segmented-control.css +12 -12
  27. package/src/styles/ui/select.css +24 -24
  28. package/src/styles/ui/skeleton.css +15 -15
  29. package/src/styles/ui/status-notice.css +9 -9
  30. package/src/styles/ui/switch.css +10 -10
  31. package/src/styles/ui/tabs.css +14 -14
  32. package/src/styles/ui/textarea.css +2 -2
  33. package/src/styles/ui/toast.css +8 -8
  34. package/src/styles/ui/tooltip.css +5 -5
  35. package/src/theme-dark.css +75 -75
  36. package/src/theme-light.css +77 -76
package/src/styles/ui/status-notice.css CHANGED
@@ -1,4 +1,4 @@
1
- .ui-status-notice {
1
+ .owo-status-notice {
2
2
  --status-notice-bg: var(--feedback-neutral-bg);
3
3
  --status-notice-border: var(--feedback-neutral-border);
4
4
  --status-notice-text: var(--feedback-neutral-text);
@@ -8,40 +8,40 @@
8
8
  color: var(--status-notice-text);
9
9
  }
10
10
 
11
- .ui-status-notice__icon {
11
+ .owo-status-notice__icon {
12
12
  color: var(--status-notice-icon);
13
13
  }
14
14
 
15
- .ui-status-notice__title {
16
- color: var(--ui-text-primary);
15
+ .owo-status-notice__title {
16
+ color: var(--owo-cmp-text-primary);
17
17
  }
18
18
 
19
- .ui-status-notice[data-layout="vertical"] .ui-status-notice__title {
19
+ .owo-status-notice[data-layout="vertical"] .owo-status-notice__title {
20
20
  color: var(--status-notice-text);
21
21
  }
22
22
 
23
- .ui-status-notice[data-tone="info"] {
23
+ .owo-status-notice[data-tone="info"] {
24
24
  --status-notice-bg: var(--feedback-info-bg);
25
25
  --status-notice-border: var(--feedback-info-border);
26
26
  --status-notice-text: var(--feedback-info-text);
27
27
  --status-notice-icon: var(--feedback-info-icon);
28
28
  }
29
29
 
30
- .ui-status-notice[data-tone="success"] {
30
+ .owo-status-notice[data-tone="success"] {
31
31
  --status-notice-bg: var(--feedback-success-bg);
32
32
  --status-notice-border: var(--feedback-success-border);
33
33
  --status-notice-text: var(--feedback-success-text);
34
34
  --status-notice-icon: var(--feedback-success-icon);
35
35
  }
36
36
 
37
- .ui-status-notice[data-tone="warning"] {
37
+ .owo-status-notice[data-tone="warning"] {
38
38
  --status-notice-bg: var(--feedback-warning-bg);
39
39
  --status-notice-border: var(--feedback-warning-border);
40
40
  --status-notice-text: var(--feedback-warning-text);
41
41
  --status-notice-icon: var(--feedback-warning-icon);
42
42
  }
43
43
 
44
- .ui-status-notice[data-tone="danger"] {
44
+ .owo-status-notice[data-tone="danger"] {
45
45
  --status-notice-bg: var(--feedback-danger-bg);
46
46
  --status-notice-border: var(--feedback-danger-border);
47
47
  --status-notice-text: var(--feedback-danger-text);
package/src/styles/ui/switch.css CHANGED
@@ -1,17 +1,17 @@
1
- .ui-switch {
2
- background: var(--color-n400);
3
- --tw-ring-color: var(--ui-control-focus-ring);
4
- --tw-ring-offset-color: var(--ui-surface-bg);
1
+ .owo-switch {
2
+ background: var(--owo-cmp-surface-border-strong);
3
+ --tw-ring-color: var(--owo-cmp-control-focus-ring);
4
+ --tw-ring-offset-color: var(--owo-cmp-surface-bg);
5
5
  }
6
6
 
7
- .ui-switch[aria-checked="true"] {
8
- background: var(--ui-accent-bg);
7
+ .owo-switch[aria-checked="true"] {
8
+ background: var(--owo-cmp-accent-bg);
9
9
  }
10
10
 
11
- .ui-switch:hover:not(:disabled) {
12
- background: var(--color-n500);
11
+ .owo-switch:hover:not(:disabled) {
12
+ background: color-mix(in srgb, var(--owo-cmp-surface-border-strong) 82%, var(--owo-cmp-text-muted));
13
13
  }
14
14
 
15
- .ui-switch[aria-checked="true"]:hover:not(:disabled) {
16
- background: var(--ui-accent-bg-hover);
15
+ .owo-switch[aria-checked="true"]:hover:not(:disabled) {
16
+ background: var(--owo-cmp-accent-bg-hover);
17
17
  }
package/src/styles/ui/tabs.css CHANGED
@@ -1,33 +1,33 @@
1
- .ui-tabs__list {
2
- --tabs-border: var(--ui-surface-border);
1
+ .owo-tabs__list {
2
+ --tabs-border: var(--owo-cmp-surface-border);
3
3
  border-color: var(--tabs-border);
4
4
  }
5
5
 
6
- .ui-tabs__trigger {
7
- --tabs-text: var(--ui-text-muted);
8
- --tabs-hover-text: var(--ui-text-secondary);
9
- --tabs-active-text: var(--ui-text-primary);
10
- --tabs-active-border: var(--ui-accent-strong);
11
- --tabs-active-bg: color-mix(in srgb, var(--ui-accent-soft) 35%, transparent);
12
- --tabs-ring: var(--ui-control-focus-ring);
6
+ .owo-tabs__trigger {
7
+ --tabs-text: var(--owo-cmp-text-muted);
8
+ --tabs-hover-text: var(--owo-cmp-text-secondary);
9
+ --tabs-active-text: var(--owo-cmp-text-primary);
10
+ --tabs-active-border: var(--owo-cmp-accent-border);
11
+ --tabs-active-bg: color-mix(in srgb, var(--owo-cmp-accent-bg-muted) 35%, transparent);
12
+ --tabs-ring: var(--owo-cmp-control-focus-ring);
13
13
  border-bottom-color: transparent;
14
14
  color: var(--tabs-text);
15
15
  }
16
16
 
17
- .ui-tabs__trigger:hover {
17
+ .owo-tabs__trigger:hover {
18
18
  color: var(--tabs-hover-text);
19
19
  }
20
20
 
21
- .ui-tabs__trigger[data-state="active"] {
21
+ .owo-tabs__trigger[data-state="active"] {
22
22
  background: var(--tabs-active-bg);
23
23
  border-bottom-color: var(--tabs-active-border);
24
24
  color: var(--tabs-active-text);
25
25
  }
26
26
 
27
- .ui-tabs__trigger:focus-visible {
27
+ .owo-tabs__trigger:focus-visible {
28
28
  --tw-ring-color: var(--tabs-ring);
29
29
  }
30
30
 
31
- .ui-tabs__content {
32
- color: var(--ui-text-primary);
31
+ .owo-tabs__content {
32
+ color: var(--owo-cmp-text-primary);
33
33
  }
package/src/styles/ui/textarea.css CHANGED
@@ -1,8 +1,8 @@
1
- .ui-textarea {
1
+ .owo-textarea {
2
2
  min-height: calc(1.5em * 3 + 1rem);
3
3
  line-height: 1.5;
4
4
  }
5
5
 
6
- .ui-textarea[data-auto-resize="true"] {
6
+ .owo-textarea[data-auto-resize="true"] {
7
7
  overflow-y: hidden;
8
8
  }
package/src/styles/ui/toast.css CHANGED
@@ -1,4 +1,4 @@
1
- .ui-toast {
1
+ .owo-toast {
2
2
  --toast-bg: var(--feedback-neutral-bg);
3
3
  --toast-border: var(--feedback-neutral-border);
4
4
  --toast-text: var(--feedback-neutral-text);
@@ -6,39 +6,39 @@
6
6
  background: var(--toast-bg);
7
7
  border-color: var(--toast-border);
8
8
  color: var(--toast-text);
9
- box-shadow: var(--toast-shadow, var(--ui-surface-shadow-strong));
9
+ box-shadow: var(--toast-shadow, var(--owo-cmp-surface-shadow-strong));
10
10
  }
11
11
 
12
- .ui-toast__icon {
12
+ .owo-toast__icon {
13
13
  color: var(--toast-icon);
14
14
  }
15
15
 
16
- .ui-toast__title {
16
+ .owo-toast__title {
17
17
  color: inherit;
18
18
  }
19
19
 
20
- .ui-toast[data-tone="success"] {
20
+ .owo-toast[data-tone="success"] {
21
21
  --toast-bg: var(--feedback-success-bg);
22
22
  --toast-border: var(--feedback-success-border);
23
23
  --toast-text: var(--feedback-success-text);
24
24
  --toast-icon: var(--feedback-success-icon);
25
25
  }
26
26
 
27
- .ui-toast[data-tone="warning"] {
27
+ .owo-toast[data-tone="warning"] {
28
28
  --toast-bg: var(--feedback-warning-bg);
29
29
  --toast-border: var(--feedback-warning-border);
30
30
  --toast-text: var(--feedback-warning-text);
31
31
  --toast-icon: var(--feedback-warning-icon);
32
32
  }
33
33
 
34
- .ui-toast[data-tone="danger"] {
34
+ .owo-toast[data-tone="danger"] {
35
35
  --toast-bg: var(--feedback-danger-bg);
36
36
  --toast-border: var(--feedback-danger-border);
37
37
  --toast-text: var(--feedback-danger-text);
38
38
  --toast-icon: var(--feedback-danger-icon);
39
39
  }
40
40
 
41
- .ui-toast[data-tone="info"] {
41
+ .owo-toast[data-tone="info"] {
42
42
  --toast-bg: var(--feedback-info-bg);
43
43
  --toast-border: var(--feedback-info-border);
44
44
  --toast-text: var(--feedback-info-text);
package/src/styles/ui/tooltip.css CHANGED
@@ -1,7 +1,7 @@
1
- .ui-tooltip {
2
- --tooltip-bg: var(--ui-surface-bg-raised);
3
- --tooltip-border: var(--ui-surface-border);
4
- --tooltip-text: var(--ui-text-primary);
1
+ .owo-tooltip {
2
+ --tooltip-bg: var(--owo-cmp-surface-bg-raised);
3
+ --tooltip-border: var(--owo-cmp-surface-border);
4
+ --tooltip-text: var(--owo-cmp-text-primary);
5
5
  --tooltip-arrow-color: var(--tooltip-bg);
6
6
  background: var(--tooltip-bg);
7
7
  color: var(--tooltip-text);
@@ -12,7 +12,7 @@
12
12
  backdrop-filter: blur(10px);
13
13
  }
14
14
 
15
- .ui-tooltip__arrow {
15
+ .owo-tooltip__arrow {
16
16
  color: var(--tooltip-arrow-color);
17
17
  filter:
18
18
  drop-shadow(0 1px 0 var(--tooltip-border))
package/src/theme-dark.css CHANGED
@@ -2,86 +2,86 @@
2
2
 
3
3
  :root[data-theme="dark"],
4
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;
5
+ --owo-ref-color-neutral-900: #fafafa;
6
+ --owo-ref-color-neutral-800: #e4e4e7;
7
+ --owo-ref-color-neutral-700: #d4d4d8;
8
+ --owo-ref-color-neutral-600: #a1a1aa;
9
+ --owo-ref-color-neutral-500: #71717a;
10
+ --owo-ref-color-neutral-400: #3f3f46;
11
+ --owo-ref-color-neutral-300: #27272a;
12
12
 
13
- --color-brand-primary: #c6c6c7;
14
- --color-brand-primary-hover: #d4d4d8;
15
- --color-brand-accent: #a1a1aa;
13
+ --owo-ref-color-brand-primary: #c6c6c7;
14
+ --owo-ref-color-brand-primary-hover: #d4d4d8;
15
+ --owo-ref-color-brand-accent: #a1a1aa;
16
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);
17
+ --owo-ref-color-surface-canvas: #0e0e0e;
18
+ --owo-ref-color-surface-base: #18181b;
19
+ --owo-ref-color-surface-subtle: #1c1c1f;
20
+ --owo-ref-color-surface-raised: #27272a;
21
+ --owo-ref-color-surface-inset: #111113;
22
+ --owo-ref-color-surface-border: rgba(255, 255, 255, 0.12);
23
+ --owo-ref-color-surface-ring: rgba(255, 255, 255, 0.24);
24
+ --owo-ref-color-surface-overlay: rgba(0, 0, 0, 0.6);
25
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);
26
+ --owo-ref-color-overlay-soft: rgba(0, 0, 0, 0.32);
27
+ --owo-ref-color-overlay-strong: rgba(0, 0, 0, 0.56);
28
+ --owo-ref-color-highlight-soft: rgba(255, 255, 255, 0.06);
29
+ --owo-ref-color-highlight-sheen: rgba(255, 255, 255, 0.08);
30
30
 
31
- --color-text-on-brand: #1a1a1a;
31
+ --owo-ref-color-text-on-brand: #1a1a1a;
32
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;
33
+ --owo-ref-color-code-block-bg: #1e1e22;
34
+ --owo-ref-color-code-block-border: #2d2d32;
35
+ --owo-ref-color-code-block-divider: #27272c;
36
+ --owo-ref-color-code-inline-bg: #27272a;
37
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;
38
+ --owo-ref-color-status-success-bg: rgba(16, 185, 129, 0.15);
39
+ --owo-ref-color-status-success-border: rgba(16, 185, 129, 0.3);
40
+ --owo-ref-color-status-success-text: #6ee7b7;
41
+ --owo-ref-color-status-warning-bg: rgba(245, 158, 11, 0.15);
42
+ --owo-ref-color-status-warning-border: rgba(245, 158, 11, 0.3);
43
+ --owo-ref-color-status-warning-text: #fbbf24;
44
+ --owo-ref-color-status-danger-bg: rgba(239, 68, 68, 0.15);
45
+ --owo-ref-color-status-danger-border: rgba(239, 68, 68, 0.3);
46
+ --owo-ref-color-status-danger-text: #fca5a5;
47
+ --owo-ref-color-status-info-bg: rgba(14, 165, 233, 0.15);
48
+ --owo-ref-color-status-info-border: rgba(14, 165, 233, 0.3);
49
+ --owo-ref-color-status-info-text: #7dd3fc;
50
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);
51
+ --owo-sys-theme-surface-canvas: var(--owo-ref-color-surface-canvas);
52
+ --owo-sys-theme-surface-base: var(--owo-ref-color-surface-base);
53
+ --owo-sys-theme-surface-subtle: var(--owo-ref-color-surface-subtle);
54
+ --owo-sys-theme-surface-raised: var(--owo-ref-color-surface-raised);
55
+ --owo-sys-theme-surface-inset: var(--owo-ref-color-surface-inset);
56
+ --owo-sys-theme-surface-border: var(--owo-ref-color-surface-border);
57
+ --owo-sys-theme-surface-border-muted: rgba(255, 255, 255, 0.06);
58
+ --owo-sys-theme-surface-border-strong: var(--owo-ref-color-surface-ring);
59
+ --owo-sys-theme-canvas-bg-subtle: #0f0f11;
60
+ --owo-sys-theme-surface-container: #1e1e22;
61
+ --owo-sys-theme-surface-container-high: #252529;
62
+ --owo-sys-theme-surface-container-highest: #2d2d32;
63
+ --owo-sys-theme-text-primary: var(--owo-ref-color-neutral-800);
64
+ --owo-sys-theme-text-secondary: var(--owo-ref-color-neutral-600);
65
+ --owo-sys-theme-text-muted: var(--owo-ref-color-neutral-500);
66
+ --owo-sys-theme-text-on-accent: var(--owo-ref-color-text-on-brand);
67
+ --owo-sys-theme-accent-bg: var(--owo-ref-color-brand-primary);
68
+ --owo-sys-theme-accent-bg-hover: var(--owo-ref-color-brand-primary-hover);
69
+ --owo-sys-theme-accent-bg-muted: color-mix(in srgb, var(--owo-ref-color-brand-primary) 14%, var(--owo-ref-color-surface-base));
70
+ --owo-sys-theme-accent-border: color-mix(in srgb, var(--owo-ref-color-brand-primary) 50%, transparent);
71
+ --owo-sys-theme-success-bg: var(--owo-ref-color-status-success-bg);
72
+ --owo-sys-theme-success-border: var(--owo-ref-color-status-success-border);
73
+ --owo-sys-theme-success-text: var(--owo-ref-color-status-success-text);
74
+ --owo-sys-theme-warning-bg: var(--owo-ref-color-status-warning-bg);
75
+ --owo-sys-theme-warning-border: var(--owo-ref-color-status-warning-border);
76
+ --owo-sys-theme-warning-text: var(--owo-ref-color-status-warning-text);
77
+ --owo-sys-theme-danger-bg: var(--owo-ref-color-status-danger-bg);
78
+ --owo-sys-theme-danger-bg-emphasis: rgba(239, 68, 68, 0.24);
79
+ --owo-sys-theme-danger-border: var(--owo-ref-color-status-danger-border);
80
+ --owo-sys-theme-danger-text: var(--owo-ref-color-status-danger-text);
81
+ --owo-sys-theme-info-bg: var(--owo-ref-color-status-info-bg);
82
+ --owo-sys-theme-info-border: var(--owo-ref-color-status-info-border);
83
+ --owo-sys-theme-info-text: var(--owo-ref-color-status-info-text);
84
+ --owo-sys-theme-control-focus-ring: var(--owo-ref-color-surface-ring);
85
+ --owo-sys-theme-control-focus-ring-offset: var(--owo-ref-color-surface-base);
86
+ --owo-sys-theme-overlay-bg: var(--owo-ref-color-overlay-strong);
86
87
  }
87
-
package/src/theme-light.css CHANGED
@@ -1,7 +1,7 @@
1
1
  @import "./styles/tokens.css";
2
2
 
3
3
  /* ================================================================== */
4
- /* Light theme — all --color-* primitives + --theme-* mappings */
4
+ /* Light theme — all --owo-ref-* primitives + --owo-sys-theme-* maps */
5
5
  /* */
6
6
  /* :root (bare) is included so light acts as the default when no */
7
7
  /* explicit data-theme is set. */
@@ -11,92 +11,93 @@
11
11
  :root[data-theme="light"],
12
12
  .owoui-theme-light {
13
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;
14
+ --owo-ref-color-neutral-900: #1a1a1a;
15
+ --owo-ref-color-neutral-800: #2d2d2d;
16
+ --owo-ref-color-neutral-700: #4a4a4a;
17
+ --owo-ref-color-neutral-600: #71717a;
18
+ --owo-ref-color-neutral-500: #a1a1aa;
19
+ --owo-ref-color-neutral-400: #d4d4d8;
20
+ --owo-ref-color-neutral-300: #e4e4e7;
21
21
 
22
22
  /* Brand */
23
- --color-brand-primary: #1a1a1a;
24
- --color-brand-primary-hover: #000000;
25
- --color-brand-accent: #4a4a4a;
23
+ --owo-ref-color-brand-primary: #1a1a1a;
24
+ --owo-ref-color-brand-primary-hover: #000000;
25
+ --owo-ref-color-brand-accent: #4a4a4a;
26
26
 
27
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);
28
+ --owo-ref-color-surface-canvas: #ffffff;
29
+ --owo-ref-color-surface-base: #ffffff;
30
+ --owo-ref-color-surface-subtle: #fafaf9;
31
+ --owo-ref-color-surface-raised: #ffffff;
32
+ --owo-ref-color-surface-inset: #f5f5f4;
33
+ --owo-ref-color-surface-border: #e5e7eb;
34
+ --owo-ref-color-surface-ring: #d6d3d1;
35
+ --owo-ref-color-surface-overlay: rgba(0, 0, 0, 0.4);
36
36
 
37
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);
38
+ --owo-ref-color-overlay-soft: rgba(244, 238, 230, 0.56);
39
+ --owo-ref-color-overlay-strong: rgba(15, 23, 42, 0.18);
40
+ --owo-ref-color-highlight-soft: rgba(255, 255, 255, 0.56);
41
+ --owo-ref-color-highlight-sheen: rgba(255, 255, 255, 0.34);
42
42
 
43
43
  /* Text on brand */
44
- --color-text-on-brand: #ffffff;
44
+ --owo-ref-color-text-on-brand: #ffffff;
45
45
 
46
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;
47
+ --owo-ref-color-code-block-bg: #f4f4f5;
48
+ --owo-ref-color-code-block-border: #e4e4e7;
49
+ --owo-ref-color-code-block-divider: #ececed;
50
+ --owo-ref-color-code-inline-bg: #f4f4f5;
51
51
 
52
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;
53
+ --owo-ref-color-status-success-bg: rgba(16, 185, 129, 0.10);
54
+ --owo-ref-color-status-success-border: rgba(16, 185, 129, 0.20);
55
+ --owo-ref-color-status-success-text: #047857;
56
+ --owo-ref-color-status-warning-bg: rgba(245, 158, 11, 0.10);
57
+ --owo-ref-color-status-warning-border: rgba(245, 158, 11, 0.20);
58
+ --owo-ref-color-status-warning-text: #b45309;
59
+ --owo-ref-color-status-danger-bg: rgba(239, 68, 68, 0.10);
60
+ --owo-ref-color-status-danger-border: rgba(239, 68, 68, 0.20);
61
+ --owo-ref-color-status-danger-text: #b91c1c;
62
+ --owo-ref-color-status-info-bg: rgba(14, 165, 233, 0.10);
63
+ --owo-ref-color-status-info-border: rgba(14, 165, 233, 0.20);
64
+ --owo-ref-color-status-info-text: #0369a1;
65
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);
66
+ /* ---- Theme semantic mappings (--owo-ref-* -> --owo-sys-theme-*) ---- */
67
+ --owo-sys-theme-surface-canvas: var(--owo-ref-color-surface-canvas);
68
+ --owo-sys-theme-surface-base: var(--owo-ref-color-surface-base);
69
+ --owo-sys-theme-surface-subtle: var(--owo-ref-color-surface-subtle);
70
+ --owo-sys-theme-surface-raised: var(--owo-ref-color-surface-raised);
71
+ --owo-sys-theme-surface-inset: var(--owo-ref-color-surface-inset);
72
+ --owo-sys-theme-surface-border: var(--owo-ref-color-surface-border);
73
+ --owo-sys-theme-surface-border-muted: rgba(0, 0, 0, 0.06);
74
+ --owo-sys-theme-surface-border-strong: var(--owo-ref-color-surface-ring);
75
+ --owo-sys-theme-canvas-bg-subtle: #f5f5f4;
76
+ --owo-sys-theme-surface-container: #f4f4f5;
77
+ --owo-sys-theme-surface-container-high: #ececed;
78
+ --owo-sys-theme-surface-container-highest: #e4e4e7;
79
+ --owo-sys-theme-text-primary: var(--owo-ref-color-neutral-800);
80
+ --owo-sys-theme-text-secondary: var(--owo-ref-color-neutral-600);
81
+ --owo-sys-theme-text-muted: var(--owo-ref-color-neutral-500);
82
+ --owo-sys-theme-text-on-accent: var(--owo-ref-color-text-on-brand);
83
+ --owo-sys-theme-accent-bg: var(--owo-ref-color-brand-primary);
84
+ --owo-sys-theme-accent-bg-hover: var(--owo-ref-color-brand-primary-hover);
85
+ --owo-sys-theme-accent-bg-muted: color-mix(in srgb, var(--owo-ref-color-brand-primary) 10%, var(--owo-ref-color-surface-base));
86
+ --owo-sys-theme-accent-border: color-mix(in srgb, var(--owo-ref-color-brand-primary) 40%, transparent);
87
+ --owo-sys-theme-success-bg: var(--owo-ref-color-status-success-bg);
88
+ --owo-sys-theme-success-border: var(--owo-ref-color-status-success-border);
89
+ --owo-sys-theme-success-text: var(--owo-ref-color-status-success-text);
90
+ --owo-sys-theme-warning-bg: var(--owo-ref-color-status-warning-bg);
91
+ --owo-sys-theme-warning-border: var(--owo-ref-color-status-warning-border);
92
+ --owo-sys-theme-warning-text: var(--owo-ref-color-status-warning-text);
93
+ --owo-sys-theme-danger-bg: var(--owo-ref-color-status-danger-bg);
94
+ --owo-sys-theme-danger-bg-emphasis: rgba(239, 68, 68, 0.18);
95
+ --owo-sys-theme-danger-border: var(--owo-ref-color-status-danger-border);
96
+ --owo-sys-theme-danger-text: var(--owo-ref-color-status-danger-text);
97
+ --owo-sys-theme-info-bg: var(--owo-ref-color-status-info-bg);
98
+ --owo-sys-theme-info-border: var(--owo-ref-color-status-info-border);
99
+ --owo-sys-theme-info-text: var(--owo-ref-color-status-info-text);
100
+ --owo-sys-theme-control-focus-ring: var(--owo-ref-color-surface-ring);
101
+ --owo-sys-theme-control-focus-ring-offset: var(--owo-ref-color-surface-base);
102
+ --owo-sys-theme-overlay-bg: var(--owo-ref-color-overlay-strong);
102
103
  }