@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/dist/storybook-static/app.css CHANGED
@@ -4,9 +4,10 @@
4
4
  @layer theme, base, components, utilities;
5
5
  @layer theme {
6
6
  :root, :host {
7
- --font-sans: var(--font-inter), var(--font-noto-sans-sc), system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Roboto, sans-serif;
8
- --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
9
- --color-black: #000;
7
+ --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
8
+ "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
9
+ --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
10
+ "Courier New", monospace;
10
11
  --color-white: #fff;
11
12
  --spacing: 0.25rem;
12
13
  --container-xs: 20rem;
@@ -44,50 +45,59 @@
44
45
  --radius-md: 0.375rem;
45
46
  --radius-lg: 0.5rem;
46
47
  --radius-xl: 0.75rem;
47
- --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
48
48
  --animate-spin: spin 1s linear infinite;
49
49
  --blur-sm: 8px;
50
50
  --default-transition-duration: 150ms;
51
51
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
52
52
  --default-font-family: var(--font-sans);
53
53
  --default-mono-font-family: var(--font-mono);
54
- --color-n900: #1a1a1a;
55
- --color-n800: #2d2d2d;
56
- --color-n700: #4a4a4a;
57
- --color-n600: #71717a;
58
- --color-n500: #a1a1aa;
59
- --color-n400: #d4d4d8;
60
- --color-brand-primary: #1a1a1a;
61
- --color-brand-primary-hover: #000000;
62
- --color-surface-canvas: #ffffff;
63
- --color-surface-base: #ffffff;
64
- --color-surface-subtle: #fafaf9;
65
- --color-surface-raised: #ffffff;
66
- --color-surface-inset: #f5f5f4;
67
- --color-surface-border: #e5e7eb;
68
- --color-surface-ring: #d6d3d1;
69
- --color-overlay-soft: rgba(244, 238, 230, 0.56);
70
- --color-overlay-strong: rgba(15, 23, 42, 0.18);
71
- --color-highlight-soft: rgba(255, 255, 255, 0.56);
72
- --color-highlight-sheen: rgba(255, 255, 255, 0.34);
73
- --color-text-on-brand: #ffffff;
74
- --color-code-block-bg: #f4f4f5;
75
- --shadow-raised: 0 10px 20px rgba(15, 23, 42, 0.08);
76
- --shadow-popover: 0 18px 40px rgba(15, 23, 42, 0.10);
77
- --color-admin-success-bg: rgba(16, 185, 129, 0.10);
78
- --color-admin-success-border: rgba(16, 185, 129, 0.20);
79
- --color-admin-success-text: #047857;
80
- --color-admin-warning-bg: rgba(245, 158, 11, 0.10);
81
- --color-admin-warning-border: rgba(245, 158, 11, 0.20);
82
- --color-admin-warning-text: #b45309;
83
- --color-admin-danger-bg: rgba(239, 68, 68, 0.10);
84
- --color-admin-danger-border: rgba(239, 68, 68, 0.20);
85
- --color-admin-danger-text: #b91c1c;
86
- --color-admin-info-bg: rgba(14, 165, 233, 0.10);
87
- --color-admin-info-border: rgba(14, 165, 233, 0.20);
88
- --color-admin-info-text: #0369a1;
89
- --font-heading: var(--font-source-serif-pro), var(--font-noto-serif-sc), "Source Serif 4", Georgia, "Times New Roman", serif;
90
- --ease-standard: cubic-bezier(0.2, 0, 0, 1);
54
+ --owo-ref-color-neutral-900: #1a1a1a;
55
+ --owo-ref-color-neutral-800: #2d2d2d;
56
+ --owo-ref-color-neutral-700: #4a4a4a;
57
+ --owo-ref-color-neutral-600: #71717a;
58
+ --owo-ref-color-neutral-500: #a1a1aa;
59
+ --owo-ref-color-brand-primary: #1a1a1a;
60
+ --owo-ref-color-brand-primary-hover: #000000;
61
+ --owo-ref-color-surface-canvas: #ffffff;
62
+ --owo-ref-color-surface-base: #ffffff;
63
+ --owo-ref-color-surface-subtle: #fafaf9;
64
+ --owo-ref-color-surface-raised: #ffffff;
65
+ --owo-ref-color-surface-inset: #f5f5f4;
66
+ --owo-ref-color-surface-border: #e5e7eb;
67
+ --owo-ref-color-surface-ring: #d6d3d1;
68
+ --owo-ref-color-overlay-soft: rgba(244, 238, 230, 0.56);
69
+ --owo-ref-color-overlay-strong: rgba(15, 23, 42, 0.18);
70
+ --owo-ref-color-highlight-soft: rgba(255, 255, 255, 0.56);
71
+ --owo-ref-color-highlight-sheen: rgba(255, 255, 255, 0.34);
72
+ --owo-ref-color-text-on-brand: #ffffff;
73
+ --owo-ref-color-code-block-bg: #f4f4f5;
74
+ --owo-ref-shadow-raised: 0 10px 20px rgba(15, 23, 42, 0.08);
75
+ --owo-ref-shadow-popover: 0 18px 40px rgba(15, 23, 42, 0.10);
76
+ --owo-ref-color-status-success-bg: rgba(16, 185, 129, 0.10);
77
+ --owo-ref-color-status-success-border: rgba(16, 185, 129, 0.20);
78
+ --owo-ref-color-status-success-text: #047857;
79
+ --owo-ref-color-status-warning-bg: rgba(245, 158, 11, 0.10);
80
+ --owo-ref-color-status-warning-border: rgba(245, 158, 11, 0.20);
81
+ --owo-ref-color-status-warning-text: #b45309;
82
+ --owo-ref-color-status-danger-bg: rgba(239, 68, 68, 0.10);
83
+ --owo-ref-color-status-danger-border: rgba(239, 68, 68, 0.20);
84
+ --owo-ref-color-status-danger-text: #b91c1c;
85
+ --owo-ref-color-status-info-bg: rgba(14, 165, 233, 0.10);
86
+ --owo-ref-color-status-info-border: rgba(14, 165, 233, 0.20);
87
+ --owo-ref-color-status-info-text: #0369a1;
88
+ --owo-ref-font-sans: var(--font-inter), var(--font-noto-sans-sc), system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Roboto, sans-serif;
89
+ --owo-ref-font-heading: var(--font-source-serif-pro), var(--font-noto-serif-sc), "Source Serif 4", Georgia, "Times New Roman", serif;
90
+ --owo-ref-font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
91
+ --owo-ref-radius-xs: 0.375rem;
92
+ --owo-ref-radius-sm: 0.5rem;
93
+ --owo-ref-radius-md: 0.75rem;
94
+ --owo-ref-radius-lg: 1rem;
95
+ --owo-ref-radius-xl: 1.5rem;
96
+ --owo-ref-radius-2xl: 2rem;
97
+ --owo-ref-radius-full: 9999px;
98
+ --owo-ref-motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
99
+ --owo-ref-motion-ease-decelerate: cubic-bezier(0, 0, 0, 1);
100
+ --owo-ref-motion-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
91
101
  }
92
102
  }
93
103
  @layer base {
@@ -319,17 +329,23 @@
319
329
  .z-10 {
320
330
  z-index: 10;
321
331
  }
322
- .z-20 {
323
- z-index: 20;
324
- }
325
332
  .z-40 {
326
333
  z-index: 40;
327
334
  }
328
335
  .z-50 {
329
336
  z-index: 50;
330
337
  }
331
- .z-\[9999\] {
332
- z-index: 9999;
338
+ .z-\[calc\(var\(--owo-cmp-z-modal\)\+1\)\] {
339
+ z-index: calc(var(--owo-cmp-z-modal) + 1);
340
+ }
341
+ .z-\[var\(--owo-cmp-z-dropdown\)\] {
342
+ z-index: var(--owo-cmp-z-dropdown);
343
+ }
344
+ .z-\[var\(--owo-cmp-z-modal\)\] {
345
+ z-index: var(--owo-cmp-z-modal);
346
+ }
347
+ .z-\[var\(--owo-cmp-z-toast\)\] {
348
+ z-index: var(--owo-cmp-z-toast);
333
349
  }
334
350
  .container {
335
351
  width: 100%;
@@ -662,14 +678,14 @@
662
678
  .transform {
663
679
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
664
680
  }
665
- .animate-\[dialog-in_0\.2s_var\(--ease-standard\)\] {
666
- animation: dialog-in 0.2s var(--ease-standard);
681
+ .animate-\[dialog-in_0\.2s_var\(--owo-cmp-motion-ease-standard\)\] {
682
+ animation: dialog-in 0.2s var(--owo-cmp-motion-ease-standard);
667
683
  }
668
- .animate-\[toast-in_0\.25s_var\(--ease-standard\)\] {
669
- animation: toast-in 0.25s var(--ease-standard);
684
+ .animate-\[toast-in_0\.25s_var\(--owo-cmp-motion-ease-standard\)\] {
685
+ animation: toast-in 0.25s var(--owo-cmp-motion-ease-standard);
670
686
  }
671
- .animate-\[tooltip-in_0\.15s_var\(--ease-standard\)\] {
672
- animation: tooltip-in 0.15s var(--ease-standard);
687
+ .animate-\[tooltip-in_0\.15s_var\(--owo-cmp-motion-ease-standard\)\] {
688
+ animation: tooltip-in 0.15s var(--owo-cmp-motion-ease-standard);
673
689
  }
674
690
  .animate-spin {
675
691
  animation: var(--animate-spin);
@@ -820,9 +836,9 @@
820
836
  border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
821
837
  }
822
838
  }
823
- .divide-\[var\(--ui-surface-border\)\] {
839
+ .divide-\[var\(--owo-cmp-surface-border\)\] {
824
840
  :where(& > :not(:last-child)) {
825
- border-color: var(--ui-surface-border);
841
+ border-color: var(--owo-cmp-surface-border);
826
842
  }
827
843
  }
828
844
  .truncate {
@@ -845,6 +861,21 @@
845
861
  .rounded {
846
862
  border-radius: 0.25rem;
847
863
  }
864
+ .rounded-\[var\(--owo-cmp-control-radius-full\)\] {
865
+ border-radius: var(--owo-cmp-control-radius-full);
866
+ }
867
+ .rounded-\[var\(--owo-cmp-control-radius-lg\)\] {
868
+ border-radius: var(--owo-cmp-control-radius-lg);
869
+ }
870
+ .rounded-\[var\(--owo-cmp-control-radius-md\)\] {
871
+ border-radius: var(--owo-cmp-control-radius-md);
872
+ }
873
+ .rounded-\[var\(--owo-cmp-control-radius-sm\)\] {
874
+ border-radius: var(--owo-cmp-control-radius-sm);
875
+ }
876
+ .rounded-\[var\(--owo-cmp-control-radius-xl\)\] {
877
+ border-radius: var(--owo-cmp-control-radius-xl);
878
+ }
848
879
  .rounded-full {
849
880
  border-radius: calc(infinity * 1px);
850
881
  }
@@ -861,9 +892,9 @@
861
892
  border-top-left-radius: 0.25rem;
862
893
  border-top-right-radius: 0.25rem;
863
894
  }
864
- .rounded-t-md {
865
- border-top-left-radius: var(--radius-md);
866
- border-top-right-radius: var(--radius-md);
895
+ .rounded-t-\[var\(--owo-cmp-control-radius-md\)\] {
896
+ border-top-left-radius: var(--owo-cmp-control-radius-md);
897
+ border-top-right-radius: var(--owo-cmp-control-radius-md);
867
898
  }
868
899
  .border {
869
900
  border-style: var(--tw-border-style);
@@ -893,59 +924,53 @@
893
924
  border-left-style: var(--tw-border-style);
894
925
  border-left-width: 1px;
895
926
  }
896
- .border-\[var\(--color-surface-border\)\] {
897
- border-color: var(--color-surface-border);
898
- }
899
927
  .border-\[var\(--drawer-border\)\] {
900
928
  border-color: var(--drawer-border);
901
929
  }
902
- .border-\[var\(--panel-section-border\,var\(--color-surface-border\)\)\] {
903
- border-color: var(--panel-section-border,var(--color-surface-border));
930
+ .border-\[var\(--owo-cmp-surface-border\)\] {
931
+ border-color: var(--owo-cmp-surface-border);
904
932
  }
905
- .border-\[var\(--ui-surface-border\)\] {
906
- border-color: var(--ui-surface-border);
933
+ .border-\[var\(--owo-cmp-surface-border-muted\)\] {
934
+ border-color: var(--owo-cmp-surface-border-muted);
907
935
  }
908
- .border-\[var\(--ui-surface-border-muted\)\] {
909
- border-color: var(--ui-surface-border-muted);
936
+ .border-\[var\(--owo-cmp-text-primary\)\] {
937
+ border-color: var(--owo-cmp-text-primary);
910
938
  }
911
- .border-\[var\(--ui-text-primary\)\] {
912
- border-color: var(--ui-text-primary);
939
+ .border-\[var\(--owo-ref-color-surface-border\)\] {
940
+ border-color: var(--owo-ref-color-surface-border);
941
+ }
942
+ .border-\[var\(--panel-section-border\,var\(--owo-ref-color-surface-border\)\)\] {
943
+ border-color: var(--panel-section-border,var(--owo-ref-color-surface-border));
913
944
  }
914
945
  .border-transparent {
915
946
  border-color: transparent;
916
947
  }
917
- .bg-\[var\(--color-code-block-bg\)\] {
918
- background-color: var(--color-code-block-bg);
919
- }
920
- .bg-\[var\(--color-overlay-strong\)\] {
921
- background-color: var(--color-overlay-strong);
948
+ .bg-\[var\(--owo-cmp-canvas-bg\)\] {
949
+ background-color: var(--owo-cmp-canvas-bg);
922
950
  }
923
- .bg-\[var\(--color-surface-base\)\] {
924
- background-color: var(--color-surface-base);
951
+ .bg-\[var\(--owo-cmp-overlay-bg\)\] {
952
+ background-color: var(--owo-cmp-overlay-bg);
925
953
  }
926
- .bg-\[var\(--color-surface-canvas\)\] {
927
- background-color: var(--color-surface-canvas);
954
+ .bg-\[var\(--owo-cmp-surface-bg\)\] {
955
+ background-color: var(--owo-cmp-surface-bg);
928
956
  }
929
- .bg-\[var\(--color-surface-subtle\)\] {
930
- background-color: var(--color-surface-subtle);
957
+ .bg-\[var\(--owo-cmp-surface-bg-inset\)\] {
958
+ background-color: var(--owo-cmp-surface-bg-inset);
931
959
  }
932
- .bg-\[var\(--ui-canvas-bg\)\] {
933
- background-color: var(--ui-canvas-bg);
960
+ .bg-\[var\(--owo-cmp-surface-bg-subtle\)\] {
961
+ background-color: var(--owo-cmp-surface-bg-subtle);
934
962
  }
935
- .bg-\[var\(--ui-surface-bg\)\] {
936
- background-color: var(--ui-surface-bg);
963
+ .bg-\[var\(--owo-ref-color-code-block-bg\)\] {
964
+ background-color: var(--owo-ref-color-code-block-bg);
937
965
  }
938
- .bg-\[var\(--ui-surface-bg-inset\)\] {
939
- background-color: var(--ui-surface-bg-inset);
966
+ .bg-\[var\(--owo-ref-color-surface-base\)\] {
967
+ background-color: var(--owo-ref-color-surface-base);
940
968
  }
941
- .bg-\[var\(--ui-surface-bg-subtle\)\] {
942
- background-color: var(--ui-surface-bg-subtle);
969
+ .bg-\[var\(--owo-ref-color-surface-canvas\)\] {
970
+ background-color: var(--owo-ref-color-surface-canvas);
943
971
  }
944
- .bg-black\/30 {
945
- background-color: color-mix(in srgb, #000 30%, transparent);
946
- @supports (color: color-mix(in lab, red, red)) {
947
- background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
948
- }
972
+ .bg-\[var\(--owo-ref-color-surface-subtle\)\] {
973
+ background-color: var(--owo-ref-color-surface-subtle);
949
974
  }
950
975
  .bg-white {
951
976
  background-color: var(--color-white);
@@ -1198,42 +1223,33 @@
1198
1223
  .text-\[var\(--badge-text\)\] {
1199
1224
  color: var(--badge-text);
1200
1225
  }
1201
- .text-\[var\(--color-n500\)\] {
1202
- color: var(--color-n500);
1226
+ .text-\[var\(--owo-cmp-accent-bg\)\] {
1227
+ color: var(--owo-cmp-accent-bg);
1203
1228
  }
1204
- .text-\[var\(--color-n600\)\] {
1205
- color: var(--color-n600);
1229
+ .text-\[var\(--owo-cmp-text-muted\)\] {
1230
+ color: var(--owo-cmp-text-muted);
1206
1231
  }
1207
- .text-\[var\(--color-n700\)\] {
1208
- color: var(--color-n700);
1232
+ .text-\[var\(--owo-cmp-text-primary\)\] {
1233
+ color: var(--owo-cmp-text-primary);
1209
1234
  }
1210
- .text-\[var\(--color-n800\)\] {
1211
- color: var(--color-n800);
1235
+ .text-\[var\(--owo-cmp-text-secondary\)\] {
1236
+ color: var(--owo-cmp-text-secondary);
1212
1237
  }
1213
- .text-\[var\(--ui-accent-bg\)\] {
1214
- color: var(--ui-accent-bg);
1238
+ .text-\[var\(--owo-ref-color-neutral-500\)\] {
1239
+ color: var(--owo-ref-color-neutral-500);
1215
1240
  }
1216
- .text-\[var\(--ui-text-muted\)\] {
1217
- color: var(--ui-text-muted);
1241
+ .text-\[var\(--owo-ref-color-neutral-600\)\] {
1242
+ color: var(--owo-ref-color-neutral-600);
1218
1243
  }
1219
- .text-\[var\(--ui-text-primary\)\] {
1220
- color: var(--ui-text-primary);
1244
+ .text-\[var\(--owo-ref-color-neutral-700\)\] {
1245
+ color: var(--owo-ref-color-neutral-700);
1221
1246
  }
1222
- .text-\[var\(--ui-text-secondary\)\] {
1223
- color: var(--ui-text-secondary);
1247
+ .text-\[var\(--owo-ref-color-neutral-800\)\] {
1248
+ color: var(--owo-ref-color-neutral-800);
1224
1249
  }
1225
1250
  .text-current {
1226
1251
  color: currentcolor;
1227
1252
  }
1228
- .text-n600 {
1229
- color: var(--color-n600);
1230
- }
1231
- .text-n700 {
1232
- color: var(--color-n700);
1233
- }
1234
- .text-n800 {
1235
- color: var(--color-n800);
1236
- }
1237
1253
  .uppercase {
1238
1254
  text-transform: uppercase;
1239
1255
  }
@@ -1310,9 +1326,13 @@
1310
1326
  --tw-duration: 200ms;
1311
1327
  transition-duration: 200ms;
1312
1328
  }
1313
- .ease-in-out {
1314
- --tw-ease: var(--ease-in-out);
1315
- transition-timing-function: var(--ease-in-out);
1329
+ .duration-\[var\(--owo-cmp-motion-duration-default\)\] {
1330
+ --tw-duration: var(--owo-cmp-motion-duration-default);
1331
+ transition-duration: var(--owo-cmp-motion-duration-default);
1332
+ }
1333
+ .ease-\[var\(--owo-cmp-motion-ease-standard\)\] {
1334
+ --tw-ease: var(--owo-cmp-motion-ease-standard);
1335
+ transition-timing-function: var(--owo-cmp-motion-ease-standard);
1316
1336
  }
1317
1337
  .select-none {
1318
1338
  -webkit-user-select: none;
@@ -1323,31 +1343,31 @@
1323
1343
  color: var(--field-placeholder);
1324
1344
  }
1325
1345
  }
1326
- .hover\:bg-\[var\(--ui-surface-bg-inset\)\] {
1346
+ .hover\:bg-\[var\(--owo-cmp-surface-bg-inset\)\] {
1327
1347
  &:hover {
1328
1348
  @media (hover: hover) {
1329
- background-color: var(--ui-surface-bg-inset);
1349
+ background-color: var(--owo-cmp-surface-bg-inset);
1330
1350
  }
1331
1351
  }
1332
1352
  }
1333
- .hover\:bg-\[var\(--ui-surface-bg-subtle\)\] {
1353
+ .hover\:bg-\[var\(--owo-cmp-surface-bg-subtle\)\] {
1334
1354
  &:hover {
1335
1355
  @media (hover: hover) {
1336
- background-color: var(--ui-surface-bg-subtle);
1356
+ background-color: var(--owo-cmp-surface-bg-subtle);
1337
1357
  }
1338
1358
  }
1339
1359
  }
1340
- .hover\:bg-\[var\(--ui-surface-container-highest\)\] {
1360
+ .hover\:bg-\[var\(--owo-cmp-surface-container-highest\)\] {
1341
1361
  &:hover {
1342
1362
  @media (hover: hover) {
1343
- background-color: var(--ui-surface-container-highest);
1363
+ background-color: var(--owo-cmp-surface-container-highest);
1344
1364
  }
1345
1365
  }
1346
1366
  }
1347
- .hover\:text-\[var\(--ui-text-primary\)\] {
1367
+ .hover\:text-\[var\(--owo-cmp-text-primary\)\] {
1348
1368
  &:hover {
1349
1369
  @media (hover: hover) {
1350
- color: var(--ui-text-primary);
1370
+ color: var(--owo-cmp-text-primary);
1351
1371
  }
1352
1372
  }
1353
1373
  }
@@ -1392,9 +1412,9 @@
1392
1412
  border-radius: 0.25rem;
1393
1413
  }
1394
1414
  }
1395
- .focus\:bg-\[var\(--ui-surface-bg\)\] {
1415
+ .focus\:bg-\[var\(--owo-cmp-surface-bg\)\] {
1396
1416
  &:focus {
1397
- background-color: var(--ui-surface-bg);
1417
+ background-color: var(--owo-cmp-surface-bg);
1398
1418
  }
1399
1419
  }
1400
1420
  .focus\:px-4 {
@@ -1526,151 +1546,159 @@
1526
1546
  }
1527
1547
  }
1528
1548
  :root {
1529
- --preset-surface-bg: var(--theme-surface-base);
1530
- --preset-surface-bg-subtle: var(--theme-surface-subtle);
1531
- --preset-surface-bg-raised: var(--theme-surface-raised);
1532
- --preset-surface-bg-inset: var(--theme-surface-inset);
1533
- --preset-surface-border: var(--theme-surface-border);
1534
- --preset-surface-border-muted: var(--theme-surface-border-muted);
1535
- --preset-surface-border-strong: var(--theme-surface-border-strong);
1536
- --preset-surface-shadow: var(--shadow-raised);
1537
- --preset-surface-shadow-strong: var(--shadow-popover);
1538
- --preset-surface-blur: 0px;
1539
- --preset-canvas-bg: var(--theme-surface-canvas);
1540
- --preset-canvas-bg-subtle: var(--theme-canvas-bg-subtle);
1541
- --preset-surface-container: var(--theme-surface-container);
1542
- --preset-surface-container-high: var(--theme-surface-container-high);
1543
- --preset-surface-container-highest: var(--theme-surface-container-highest);
1544
- --preset-control-radius-sm: 0.5rem;
1545
- --preset-control-radius-md: 0.75rem;
1546
- --preset-control-radius-lg: 1rem;
1547
- --preset-control-radius-xl: 1.5rem;
1548
- --preset-control-radius-2xl: 2rem;
1549
- --preset-control-border-width: 1px;
1550
- --ui-surface-bg: var(--preset-surface-bg);
1551
- --ui-surface-bg-subtle: var(--preset-surface-bg-subtle);
1552
- --ui-surface-bg-raised: var(--preset-surface-bg-raised);
1553
- --ui-surface-bg-inset: var(--preset-surface-bg-inset);
1554
- --ui-surface-border: var(--preset-surface-border);
1555
- --ui-surface-border-muted: var(--preset-surface-border-muted);
1556
- --ui-surface-border-strong: var(--preset-surface-border-strong);
1557
- --ui-surface-shadow: var(--preset-surface-shadow);
1558
- --ui-surface-shadow-strong: var(--preset-surface-shadow-strong);
1559
- --ui-surface-blur: var(--preset-surface-blur);
1560
- --ui-canvas-bg: var(--preset-canvas-bg);
1561
- --ui-canvas-bg-subtle: var(--preset-canvas-bg-subtle);
1562
- --ui-surface-container: var(--preset-surface-container);
1563
- --ui-surface-container-high: var(--preset-surface-container-high);
1564
- --ui-surface-container-highest: var(--preset-surface-container-highest);
1565
- --ui-text-primary: var(--theme-text-primary);
1566
- --ui-text-secondary: var(--theme-text-secondary);
1567
- --ui-text-muted: var(--theme-text-muted);
1568
- --ui-text-on-accent: var(--theme-text-on-accent);
1569
- --ui-accent-bg: var(--theme-accent-bg);
1570
- --ui-accent-bg-hover: var(--theme-accent-bg-hover);
1571
- --ui-accent-bg-muted: var(--theme-accent-bg-muted);
1572
- --ui-accent-text: var(--theme-text-on-accent);
1573
- --ui-accent-border: var(--theme-accent-border);
1574
- --ui-success-bg: var(--theme-success-bg);
1575
- --ui-success-border: var(--theme-success-border);
1576
- --ui-success-text: var(--theme-success-text);
1577
- --ui-warning-bg: var(--theme-warning-bg);
1578
- --ui-warning-border: var(--theme-warning-border);
1579
- --ui-warning-text: var(--theme-warning-text);
1580
- --ui-danger-bg: var(--theme-danger-bg);
1581
- --ui-danger-bg-emphasis: var(--theme-danger-bg-emphasis);
1582
- --ui-danger-border: var(--theme-danger-border);
1583
- --ui-danger-text: var(--theme-danger-text);
1584
- --ui-info-bg: var(--theme-info-bg);
1585
- --ui-info-border: var(--theme-info-border);
1586
- --ui-info-text: var(--theme-info-text);
1587
- --ui-control-radius-sm: var(--preset-control-radius-sm);
1588
- --ui-control-radius-md: var(--preset-control-radius-md);
1589
- --ui-control-radius-lg: var(--preset-control-radius-lg);
1590
- --ui-control-radius-xl: var(--preset-control-radius-xl);
1591
- --ui-control-radius-2xl: var(--preset-control-radius-2xl);
1592
- --ui-control-border-width: var(--preset-control-border-width);
1593
- --ui-control-focus-ring: var(--theme-control-focus-ring);
1594
- --ui-control-focus-ring-offset: var(--theme-control-focus-ring-offset);
1595
- --ui-font-heading: var(--font-heading);
1596
- --ui-motion-duration-fast: 0.15s;
1597
- --ui-motion-duration-default: 0.2s;
1598
- --ui-motion-ease-standard: var(--ease-standard);
1599
- --ui-density-compact: 0.875;
1600
- --ui-density-default: 1;
1601
- --ui-density-comfortable: 1.125;
1549
+ --owo-sys-preset-surface-bg: var(--owo-sys-theme-surface-base);
1550
+ --owo-sys-preset-surface-bg-subtle: var(--owo-sys-theme-surface-subtle);
1551
+ --owo-sys-preset-surface-bg-raised: var(--owo-sys-theme-surface-raised);
1552
+ --owo-sys-preset-surface-bg-inset: var(--owo-sys-theme-surface-inset);
1553
+ --owo-sys-preset-surface-border: var(--owo-sys-theme-surface-border);
1554
+ --owo-sys-preset-surface-border-muted: var(--owo-sys-theme-surface-border-muted);
1555
+ --owo-sys-preset-surface-border-strong: var(--owo-sys-theme-surface-border-strong);
1556
+ --owo-sys-preset-surface-shadow: var(--owo-ref-shadow-raised);
1557
+ --owo-sys-preset-surface-shadow-strong: var(--owo-ref-shadow-popover);
1558
+ --owo-sys-preset-surface-blur: 0px;
1559
+ --owo-sys-preset-canvas-bg: var(--owo-sys-theme-surface-canvas);
1560
+ --owo-sys-preset-canvas-bg-subtle: var(--owo-sys-theme-canvas-bg-subtle);
1561
+ --owo-sys-preset-surface-container: var(--owo-sys-theme-surface-container);
1562
+ --owo-sys-preset-surface-container-high: var(--owo-sys-theme-surface-container-high);
1563
+ --owo-sys-preset-surface-container-highest: var(--owo-sys-theme-surface-container-highest);
1564
+ --owo-sys-preset-control-radius-sm: var(--owo-ref-radius-sm);
1565
+ --owo-sys-preset-control-radius-md: var(--owo-ref-radius-md);
1566
+ --owo-sys-preset-control-radius-lg: var(--owo-ref-radius-lg);
1567
+ --owo-sys-preset-control-radius-xl: var(--owo-ref-radius-xl);
1568
+ --owo-sys-preset-control-radius-2xl: var(--owo-ref-radius-2xl);
1569
+ --owo-sys-preset-control-radius-full: var(--owo-ref-radius-full);
1570
+ --owo-sys-preset-control-border-width: 1px;
1571
+ --owo-cmp-surface-bg: var(--owo-sys-preset-surface-bg);
1572
+ --owo-cmp-surface-bg-subtle: var(--owo-sys-preset-surface-bg-subtle);
1573
+ --owo-cmp-surface-bg-raised: var(--owo-sys-preset-surface-bg-raised);
1574
+ --owo-cmp-surface-bg-inset: var(--owo-sys-preset-surface-bg-inset);
1575
+ --owo-cmp-surface-border: var(--owo-sys-preset-surface-border);
1576
+ --owo-cmp-surface-border-muted: var(--owo-sys-preset-surface-border-muted);
1577
+ --owo-cmp-surface-border-strong: var(--owo-sys-preset-surface-border-strong);
1578
+ --owo-cmp-surface-shadow: var(--owo-sys-preset-surface-shadow);
1579
+ --owo-cmp-surface-shadow-strong: var(--owo-sys-preset-surface-shadow-strong);
1580
+ --owo-cmp-surface-blur: var(--owo-sys-preset-surface-blur);
1581
+ --owo-cmp-canvas-bg: var(--owo-sys-preset-canvas-bg);
1582
+ --owo-cmp-canvas-bg-subtle: var(--owo-sys-preset-canvas-bg-subtle);
1583
+ --owo-cmp-surface-container: var(--owo-sys-preset-surface-container);
1584
+ --owo-cmp-surface-container-high: var(--owo-sys-preset-surface-container-high);
1585
+ --owo-cmp-surface-container-highest: var(--owo-sys-preset-surface-container-highest);
1586
+ --owo-cmp-text-primary: var(--owo-sys-theme-text-primary);
1587
+ --owo-cmp-text-secondary: var(--owo-sys-theme-text-secondary);
1588
+ --owo-cmp-text-muted: var(--owo-sys-theme-text-muted);
1589
+ --owo-cmp-text-on-accent: var(--owo-sys-theme-text-on-accent);
1590
+ --owo-cmp-accent-bg: var(--owo-sys-theme-accent-bg);
1591
+ --owo-cmp-accent-bg-hover: var(--owo-sys-theme-accent-bg-hover);
1592
+ --owo-cmp-accent-bg-muted: var(--owo-sys-theme-accent-bg-muted);
1593
+ --owo-cmp-accent-text: var(--owo-sys-theme-text-on-accent);
1594
+ --owo-cmp-accent-border: var(--owo-sys-theme-accent-border);
1595
+ --owo-cmp-success-bg: var(--owo-sys-theme-success-bg);
1596
+ --owo-cmp-success-border: var(--owo-sys-theme-success-border);
1597
+ --owo-cmp-success-text: var(--owo-sys-theme-success-text);
1598
+ --owo-cmp-warning-bg: var(--owo-sys-theme-warning-bg);
1599
+ --owo-cmp-warning-border: var(--owo-sys-theme-warning-border);
1600
+ --owo-cmp-warning-text: var(--owo-sys-theme-warning-text);
1601
+ --owo-cmp-danger-bg: var(--owo-sys-theme-danger-bg);
1602
+ --owo-cmp-danger-bg-emphasis: var(--owo-sys-theme-danger-bg-emphasis);
1603
+ --owo-cmp-danger-border: var(--owo-sys-theme-danger-border);
1604
+ --owo-cmp-danger-text: var(--owo-sys-theme-danger-text);
1605
+ --owo-cmp-info-bg: var(--owo-sys-theme-info-bg);
1606
+ --owo-cmp-info-border: var(--owo-sys-theme-info-border);
1607
+ --owo-cmp-info-text: var(--owo-sys-theme-info-text);
1608
+ --owo-cmp-control-radius-sm: var(--owo-sys-preset-control-radius-sm);
1609
+ --owo-cmp-control-radius-md: var(--owo-sys-preset-control-radius-md);
1610
+ --owo-cmp-control-radius-lg: var(--owo-sys-preset-control-radius-lg);
1611
+ --owo-cmp-control-radius-xl: var(--owo-sys-preset-control-radius-xl);
1612
+ --owo-cmp-control-radius-2xl: var(--owo-sys-preset-control-radius-2xl);
1613
+ --owo-cmp-control-radius-full: var(--owo-sys-preset-control-radius-full);
1614
+ --owo-cmp-control-border-width: var(--owo-sys-preset-control-border-width);
1615
+ --owo-cmp-control-focus-ring: var(--owo-sys-theme-control-focus-ring);
1616
+ --owo-cmp-control-focus-ring-offset: var(--owo-sys-theme-control-focus-ring-offset);
1617
+ --owo-cmp-font-heading: var(--owo-ref-font-heading);
1618
+ --owo-cmp-motion-duration-fast: 0.15s;
1619
+ --owo-cmp-motion-duration-default: 0.2s;
1620
+ --owo-cmp-motion-ease-standard: var(--owo-ref-motion-ease-standard);
1621
+ --owo-cmp-motion-ease-decelerate: var(--owo-ref-motion-ease-decelerate);
1622
+ --owo-cmp-motion-ease-accelerate: var(--owo-ref-motion-ease-accelerate);
1623
+ --owo-cmp-density-compact: 0.875;
1624
+ --owo-cmp-density-default: 1;
1625
+ --owo-cmp-density-comfortable: 1.125;
1626
+ --owo-cmp-overlay-bg: var(--owo-sys-theme-overlay-bg);
1627
+ --owo-cmp-z-dropdown: 1000;
1628
+ --owo-cmp-z-modal: 1100;
1629
+ --owo-cmp-z-toast: 1200;
1602
1630
  --content-min-width: 320px;
1603
1631
  --content-preferred-width: 70vw;
1604
1632
  --content-max-width: 960px;
1605
1633
  --content-width: clamp(600px, 70vw, 960px);
1606
1634
  --content-padding: 24px;
1607
1635
  --header-top-margin: 64px;
1608
- --publish-trigger-bg: var(--ui-surface-bg-subtle);
1609
- --publish-trigger-border: var(--ui-surface-border);
1610
- --publish-trigger-text: var(--ui-text-primary);
1611
- --publish-trigger-active-bg: var(--ui-accent-bg-muted);
1612
- --publish-popover-bg: var(--ui-surface-bg);
1613
- --publish-popover-border: var(--ui-surface-border);
1614
- --publish-popover-shadow: var(--ui-surface-shadow-strong);
1615
- --publish-section-bg: var(--ui-surface-bg-subtle);
1616
- --publish-section-border: var(--ui-surface-border);
1617
- --publish-fact-title: var(--ui-text-secondary);
1618
- --publish-fact-value: var(--color-n900);
1619
- --publish-muted-text: var(--ui-text-secondary);
1620
- --publish-warning-bg: var(--ui-warning-bg);
1621
- --publish-warning-border: var(--ui-warning-border);
1622
- --publish-warning-text: var(--ui-warning-text);
1623
- --publish-danger-bg: var(--ui-danger-bg);
1624
- --publish-danger-border: var(--ui-danger-border);
1625
- --publish-danger-text: var(--ui-danger-text);
1626
- --publish-success-bg: var(--ui-success-bg);
1627
- --publish-success-border: var(--ui-success-border);
1628
- --publish-success-text: var(--ui-success-text);
1629
- --publish-progress-track: var(--ui-surface-bg-inset);
1630
- --publish-progress-fill: var(--ui-accent-bg);
1631
- --feedback-neutral-bg: var(--ui-surface-bg-raised);
1632
- --feedback-neutral-border: var(--ui-surface-border);
1633
- --feedback-neutral-text: var(--ui-text-primary);
1634
- --feedback-neutral-icon: var(--ui-text-secondary);
1635
- --feedback-info-bg: var(--ui-info-bg);
1636
- --feedback-info-border: var(--ui-info-border);
1637
- --feedback-info-text: var(--ui-info-text);
1638
- --feedback-info-icon: var(--ui-info-text);
1639
- --feedback-success-bg: var(--ui-success-bg);
1640
- --feedback-success-border: var(--ui-success-border);
1641
- --feedback-success-text: var(--ui-success-text);
1642
- --feedback-success-icon: var(--ui-success-text);
1643
- --feedback-warning-bg: var(--ui-warning-bg);
1644
- --feedback-warning-border: var(--ui-warning-border);
1645
- --feedback-warning-text: var(--ui-warning-text);
1646
- --feedback-warning-icon: var(--ui-warning-text);
1647
- --feedback-danger-bg: var(--ui-danger-bg);
1648
- --feedback-danger-border: var(--ui-danger-border);
1649
- --feedback-danger-text: var(--ui-danger-text);
1650
- --feedback-danger-icon: var(--ui-danger-text);
1651
- --toast-shadow: var(--ui-surface-shadow-strong);
1636
+ --publish-trigger-bg: var(--owo-cmp-surface-bg-subtle);
1637
+ --publish-trigger-border: var(--owo-cmp-surface-border);
1638
+ --publish-trigger-text: var(--owo-cmp-text-primary);
1639
+ --publish-trigger-active-bg: var(--owo-cmp-accent-bg-muted);
1640
+ --publish-popover-bg: var(--owo-cmp-surface-bg);
1641
+ --publish-popover-border: var(--owo-cmp-surface-border);
1642
+ --publish-popover-shadow: var(--owo-cmp-surface-shadow-strong);
1643
+ --publish-section-bg: var(--owo-cmp-surface-bg-subtle);
1644
+ --publish-section-border: var(--owo-cmp-surface-border);
1645
+ --publish-fact-title: var(--owo-cmp-text-secondary);
1646
+ --publish-fact-value: var(--owo-ref-color-neutral-900);
1647
+ --publish-muted-text: var(--owo-cmp-text-secondary);
1648
+ --publish-warning-bg: var(--owo-cmp-warning-bg);
1649
+ --publish-warning-border: var(--owo-cmp-warning-border);
1650
+ --publish-warning-text: var(--owo-cmp-warning-text);
1651
+ --publish-danger-bg: var(--owo-cmp-danger-bg);
1652
+ --publish-danger-border: var(--owo-cmp-danger-border);
1653
+ --publish-danger-text: var(--owo-cmp-danger-text);
1654
+ --publish-success-bg: var(--owo-cmp-success-bg);
1655
+ --publish-success-border: var(--owo-cmp-success-border);
1656
+ --publish-success-text: var(--owo-cmp-success-text);
1657
+ --publish-progress-track: var(--owo-cmp-surface-bg-inset);
1658
+ --publish-progress-fill: var(--owo-cmp-accent-bg);
1659
+ --feedback-neutral-bg: var(--owo-cmp-surface-bg-raised);
1660
+ --feedback-neutral-border: var(--owo-cmp-surface-border);
1661
+ --feedback-neutral-text: var(--owo-cmp-text-primary);
1662
+ --feedback-neutral-icon: var(--owo-cmp-text-secondary);
1663
+ --feedback-info-bg: var(--owo-cmp-info-bg);
1664
+ --feedback-info-border: var(--owo-cmp-info-border);
1665
+ --feedback-info-text: var(--owo-cmp-info-text);
1666
+ --feedback-info-icon: var(--owo-cmp-info-text);
1667
+ --feedback-success-bg: var(--owo-cmp-success-bg);
1668
+ --feedback-success-border: var(--owo-cmp-success-border);
1669
+ --feedback-success-text: var(--owo-cmp-success-text);
1670
+ --feedback-success-icon: var(--owo-cmp-success-text);
1671
+ --feedback-warning-bg: var(--owo-cmp-warning-bg);
1672
+ --feedback-warning-border: var(--owo-cmp-warning-border);
1673
+ --feedback-warning-text: var(--owo-cmp-warning-text);
1674
+ --feedback-warning-icon: var(--owo-cmp-warning-text);
1675
+ --feedback-danger-bg: var(--owo-cmp-danger-bg);
1676
+ --feedback-danger-border: var(--owo-cmp-danger-border);
1677
+ --feedback-danger-text: var(--owo-cmp-danger-text);
1678
+ --feedback-danger-icon: var(--owo-cmp-danger-text);
1679
+ --toast-shadow: var(--owo-cmp-surface-shadow-strong);
1652
1680
  --skeleton-bg: linear-gradient(
1653
1681
  180deg,
1654
- var(--ui-surface-bg-inset) 0%,
1655
- var(--ui-surface-bg-inset) 100%
1682
+ var(--owo-cmp-surface-bg-inset) 0%,
1683
+ var(--owo-cmp-surface-bg-inset) 100%
1656
1684
  );
1657
1685
  @supports (color: color-mix(in lab, red, red)) {
1658
1686
  --skeleton-bg: linear-gradient(
1659
1687
  180deg,
1660
- color-mix(in srgb, var(--ui-surface-bg-inset) 94%, white) 0%,
1661
- color-mix(in srgb, var(--ui-surface-bg-inset) 100%, var(--ui-surface-border)) 100%
1688
+ color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 94%, white) 0%,
1689
+ color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 100%, var(--owo-cmp-surface-border)) 100%
1662
1690
  );
1663
1691
  }
1664
1692
  --skeleton-bg-emphasis: linear-gradient(
1665
1693
  180deg,
1666
- var(--ui-surface-bg-subtle) 0%,
1667
- var(--ui-surface-bg-inset) 100%
1694
+ var(--owo-cmp-surface-bg-subtle) 0%,
1695
+ var(--owo-cmp-surface-bg-inset) 100%
1668
1696
  );
1669
1697
  @supports (color: color-mix(in lab, red, red)) {
1670
1698
  --skeleton-bg-emphasis: linear-gradient(
1671
1699
  180deg,
1672
- color-mix(in srgb, var(--ui-surface-bg-subtle) 78%, var(--color-highlight-soft)) 0%,
1673
- color-mix(in srgb, var(--ui-surface-bg-inset) 86%, var(--ui-surface-border)) 100%
1700
+ color-mix(in srgb, var(--owo-cmp-surface-bg-subtle) 78%, var(--owo-ref-color-highlight-soft)) 0%,
1701
+ color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 86%, var(--owo-cmp-surface-border)) 100%
1674
1702
  );
1675
1703
  }
1676
1704
  --skeleton-sheen: linear-gradient(
@@ -1678,7 +1706,7 @@
1678
1706
  transparent 0%,
1679
1707
  color-mix(in srgb, rgba(255, 255, 255, 0.34) 10%, transparent) 28%,
1680
1708
  color-mix(in srgb, rgba(255, 255, 255, 0.34) 35%, transparent) 40%,
1681
- var(--color-highlight-sheen) 50%,
1709
+ var(--owo-ref-color-highlight-sheen) 50%,
1682
1710
  color-mix(in srgb, rgba(255, 255, 255, 0.34) 35%, transparent) 60%,
1683
1711
  color-mix(in srgb, rgba(255, 255, 255, 0.34) 10%, transparent) 72%,
1684
1712
  transparent 100%
@@ -1687,156 +1715,155 @@
1687
1715
  --skeleton-sheen: linear-gradient(
1688
1716
  100deg,
1689
1717
  transparent 0%,
1690
- color-mix(in srgb, var(--color-highlight-sheen) 10%, transparent) 28%,
1691
- color-mix(in srgb, var(--color-highlight-sheen) 35%, transparent) 40%,
1692
- var(--color-highlight-sheen) 50%,
1693
- color-mix(in srgb, var(--color-highlight-sheen) 35%, transparent) 60%,
1694
- color-mix(in srgb, var(--color-highlight-sheen) 10%, transparent) 72%,
1718
+ color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 28%,
1719
+ color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 40%,
1720
+ var(--owo-ref-color-highlight-sheen) 50%,
1721
+ color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 60%,
1722
+ color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 72%,
1695
1723
  transparent 100%
1696
1724
  );
1697
1725
  }
1698
- --skeleton-top-highlight: var(--color-highlight-soft);
1699
- --workspace-transition-veil-bg: var(--color-overlay-soft);
1726
+ --skeleton-top-highlight: var(--owo-ref-color-highlight-soft);
1727
+ --workspace-transition-veil-bg: var(--owo-ref-color-overlay-soft);
1700
1728
  --workspace-transition-stale-bg: color-mix(in srgb, rgba(244, 238, 230, 0.56) 72%, transparent);
1701
1729
  @supports (color: color-mix(in lab, red, red)) {
1702
- --workspace-transition-stale-bg: color-mix(in srgb, var(--color-overlay-soft) 72%, transparent);
1730
+ --workspace-transition-stale-bg: color-mix(in srgb, var(--owo-ref-color-overlay-soft) 72%, transparent);
1703
1731
  }
1704
- --tooltip-shadow: var(--ui-surface-shadow-strong);
1705
- --select-dropdown-shadow: var(--ui-surface-shadow-strong);
1706
- --theme-picker-shadow: var(--ui-surface-shadow-strong);
1707
- --drawer-panel-shadow: var(--ui-surface-shadow-strong);
1732
+ --tooltip-shadow: var(--owo-cmp-surface-shadow-strong);
1733
+ --select-dropdown-shadow: var(--owo-cmp-surface-shadow-strong);
1734
+ --drawer-panel-shadow: var(--owo-cmp-surface-shadow-strong);
1708
1735
  }
1709
- .ui-avatar {
1710
- --avatar-bg: var(--ui-surface-bg-inset);
1711
- --avatar-text: var(--ui-text-secondary);
1736
+ .owo-avatar {
1737
+ --avatar-bg: var(--owo-cmp-surface-bg-inset);
1738
+ --avatar-text: var(--owo-cmp-text-secondary);
1712
1739
  --avatar-border: transparent;
1713
1740
  background: var(--avatar-bg);
1714
1741
  color: var(--avatar-text);
1715
1742
  border: 1px solid var(--avatar-border);
1716
1743
  }
1717
- .ui-avatar[data-tone="subtle"] {
1718
- --avatar-bg: var(--ui-surface-bg-subtle);
1719
- --avatar-text: var(--ui-text-muted);
1744
+ .owo-avatar[data-tone="subtle"] {
1745
+ --avatar-bg: var(--owo-cmp-surface-bg-subtle);
1746
+ --avatar-text: var(--owo-cmp-text-muted);
1720
1747
  }
1721
- .ui-badge {
1722
- --badge-bg: var(--ui-surface-bg-inset);
1723
- --badge-text: var(--ui-text-secondary);
1748
+ .owo-badge {
1749
+ --badge-bg: var(--owo-cmp-surface-bg-inset);
1750
+ --badge-text: var(--owo-cmp-text-secondary);
1724
1751
  --badge-border: transparent;
1725
1752
  background: var(--badge-bg);
1726
1753
  border-color: var(--badge-border);
1727
1754
  }
1728
- .ui-badge[data-variant="outline"] {
1755
+ .owo-badge[data-variant="outline"] {
1729
1756
  --badge-bg: transparent;
1730
- --badge-border: var(--ui-surface-border);
1757
+ --badge-border: var(--owo-cmp-surface-border);
1731
1758
  }
1732
- .ui-badge[data-tone="info"] {
1733
- --badge-bg: var(--ui-info-bg);
1734
- --badge-text: var(--ui-info-text);
1735
- --badge-border: var(--ui-info-border);
1759
+ .owo-badge[data-tone="info"] {
1760
+ --badge-bg: var(--owo-cmp-info-bg);
1761
+ --badge-text: var(--owo-cmp-info-text);
1762
+ --badge-border: var(--owo-cmp-info-border);
1736
1763
  }
1737
- .ui-badge[data-tone="info"][data-variant="outline"] {
1764
+ .owo-badge[data-tone="info"][data-variant="outline"] {
1738
1765
  --badge-bg: transparent;
1739
1766
  }
1740
- .ui-badge[data-tone="success"] {
1741
- --badge-bg: var(--ui-success-bg);
1742
- --badge-text: var(--ui-success-text);
1743
- --badge-border: var(--ui-success-border);
1767
+ .owo-badge[data-tone="success"] {
1768
+ --badge-bg: var(--owo-cmp-success-bg);
1769
+ --badge-text: var(--owo-cmp-success-text);
1770
+ --badge-border: var(--owo-cmp-success-border);
1744
1771
  }
1745
- .ui-badge[data-tone="success"][data-variant="outline"] {
1772
+ .owo-badge[data-tone="success"][data-variant="outline"] {
1746
1773
  --badge-bg: transparent;
1747
1774
  }
1748
- .ui-badge[data-tone="warning"] {
1749
- --badge-bg: var(--ui-warning-bg);
1750
- --badge-text: var(--ui-warning-text);
1751
- --badge-border: var(--ui-warning-border);
1775
+ .owo-badge[data-tone="warning"] {
1776
+ --badge-bg: var(--owo-cmp-warning-bg);
1777
+ --badge-text: var(--owo-cmp-warning-text);
1778
+ --badge-border: var(--owo-cmp-warning-border);
1752
1779
  }
1753
- .ui-badge[data-tone="warning"][data-variant="outline"] {
1780
+ .owo-badge[data-tone="warning"][data-variant="outline"] {
1754
1781
  --badge-bg: transparent;
1755
1782
  }
1756
- .ui-badge[data-tone="danger"] {
1757
- --badge-bg: var(--ui-danger-bg);
1758
- --badge-text: var(--ui-danger-text);
1759
- --badge-border: var(--ui-danger-border);
1783
+ .owo-badge[data-tone="danger"] {
1784
+ --badge-bg: var(--owo-cmp-danger-bg);
1785
+ --badge-text: var(--owo-cmp-danger-text);
1786
+ --badge-border: var(--owo-cmp-danger-border);
1760
1787
  }
1761
- .ui-badge[data-tone="danger"][data-variant="outline"] {
1788
+ .owo-badge[data-tone="danger"][data-variant="outline"] {
1762
1789
  --badge-bg: transparent;
1763
1790
  }
1764
- .ui-button {
1765
- --button-bg: var(--ui-surface-bg);
1766
- --button-bg-hover: var(--ui-surface-bg-inset);
1767
- --button-bg-active: var(--ui-surface-bg-subtle);
1768
- --button-text: var(--ui-text-primary);
1769
- --button-border: var(--ui-surface-border);
1770
- --button-ring: var(--ui-control-focus-ring);
1791
+ .owo-button {
1792
+ --button-bg: var(--owo-cmp-surface-bg);
1793
+ --button-bg-hover: var(--owo-cmp-surface-bg-inset);
1794
+ --button-bg-active: var(--owo-cmp-surface-bg-subtle);
1795
+ --button-text: var(--owo-cmp-text-primary);
1796
+ --button-border: var(--owo-cmp-surface-border);
1797
+ --button-ring: var(--owo-cmp-control-focus-ring);
1771
1798
  --button-disabled-opacity: 0.5;
1772
1799
  background: var(--button-bg);
1773
1800
  color: var(--button-text);
1774
1801
  border-color: var(--button-border);
1775
1802
  }
1776
- .ui-button:hover {
1803
+ .owo-button:hover {
1777
1804
  background: var(--button-bg-hover);
1778
1805
  }
1779
- .ui-button:active {
1806
+ .owo-button:active {
1780
1807
  background: var(--button-bg-active);
1781
1808
  }
1782
- .ui-button:focus-visible {
1809
+ .owo-button:focus-visible {
1783
1810
  --tw-ring-color: var(--button-ring);
1784
1811
  }
1785
- .ui-button[data-variant="primary"] {
1786
- --button-bg: var(--ui-accent-bg);
1787
- --button-bg-hover: var(--ui-accent-bg-hover);
1788
- --button-bg-active: var(--ui-accent-bg-hover);
1812
+ .owo-button[data-variant="primary"] {
1813
+ --button-bg: var(--owo-cmp-accent-bg);
1814
+ --button-bg-hover: var(--owo-cmp-accent-bg-hover);
1815
+ --button-bg-active: var(--owo-cmp-accent-bg-hover);
1789
1816
  @supports (color: color-mix(in lab, red, red)) {
1790
- --button-bg-active: color-mix(in srgb, var(--ui-accent-bg-hover) 88%, black);
1817
+ --button-bg-active: color-mix(in srgb, var(--owo-cmp-accent-bg-hover) 88%, black);
1791
1818
  }
1792
- --button-text: var(--ui-accent-text);
1819
+ --button-text: var(--owo-cmp-accent-text);
1793
1820
  --button-border: transparent;
1794
1821
  }
1795
- .ui-button[data-variant="ghost"] {
1822
+ .owo-button[data-variant="ghost"] {
1796
1823
  --button-bg: transparent;
1797
- --button-bg-hover: var(--ui-surface-bg-inset);
1798
- --button-bg-active: var(--ui-surface-bg-subtle);
1799
- --button-text: var(--ui-text-secondary);
1824
+ --button-bg-hover: var(--owo-cmp-surface-bg-inset);
1825
+ --button-bg-active: var(--owo-cmp-surface-bg-subtle);
1826
+ --button-text: var(--owo-cmp-text-secondary);
1800
1827
  --button-border: transparent;
1801
1828
  }
1802
- .ui-button[data-variant="danger"] {
1803
- --button-bg: var(--ui-danger-bg);
1804
- --button-bg-hover: var(--ui-danger-bg);
1829
+ .owo-button[data-variant="danger"] {
1830
+ --button-bg: var(--owo-cmp-danger-bg);
1831
+ --button-bg-hover: var(--owo-cmp-danger-bg);
1805
1832
  @supports (color: color-mix(in lab, red, red)) {
1806
- --button-bg-hover: color-mix(in srgb, var(--ui-danger-bg) 92%, var(--ui-danger-border));
1833
+ --button-bg-hover: color-mix(in srgb, var(--owo-cmp-danger-bg) 92%, var(--owo-cmp-danger-border));
1807
1834
  }
1808
- --button-bg-active: var(--ui-danger-bg);
1835
+ --button-bg-active: var(--owo-cmp-danger-bg);
1809
1836
  @supports (color: color-mix(in lab, red, red)) {
1810
- --button-bg-active: color-mix(in srgb, var(--ui-danger-bg) 84%, var(--ui-danger-border));
1837
+ --button-bg-active: color-mix(in srgb, var(--owo-cmp-danger-bg) 84%, var(--owo-cmp-danger-border));
1811
1838
  }
1812
- --button-text: var(--ui-danger-text);
1813
- --button-border: var(--ui-danger-border);
1814
- --button-ring: var(--ui-danger-border);
1839
+ --button-text: var(--owo-cmp-danger-text);
1840
+ --button-border: var(--owo-cmp-danger-border);
1841
+ --button-ring: var(--owo-cmp-danger-border);
1815
1842
  }
1816
- .ui-collapsible__trigger {
1843
+ .owo-collapsible__trigger {
1817
1844
  cursor: pointer;
1818
1845
  }
1819
- .ui-collapsible__content {
1846
+ .owo-collapsible__content {
1820
1847
  height: auto;
1821
1848
  overflow: hidden;
1822
1849
  transition: height 180ms ease;
1823
1850
  }
1824
- .ui-collapsible__content-inner {
1851
+ .owo-collapsible__content-inner {
1825
1852
  min-height: 0;
1826
1853
  }
1827
- .ui-dialog-backdrop {
1828
- animation: dialog-backdrop-in 0.2s var(--ease-standard);
1854
+ .owo-dialog-backdrop {
1855
+ animation: dialog-backdrop-in 0.2s var(--owo-cmp-motion-ease-standard);
1829
1856
  }
1830
- .ui-dialog {
1831
- background: var(--ui-surface-bg-raised);
1832
- border: 1px solid var(--ui-surface-border);
1833
- color: var(--ui-text-primary);
1857
+ .owo-dialog {
1858
+ background: var(--owo-cmp-surface-bg-raised);
1859
+ border: 1px solid var(--owo-cmp-surface-border);
1860
+ color: var(--owo-cmp-text-primary);
1834
1861
  }
1835
- .ui-dialog__header {
1836
- color: var(--ui-text-primary);
1862
+ .owo-dialog__header {
1863
+ color: var(--owo-cmp-text-primary);
1837
1864
  }
1838
- .ui-dialog__body {
1839
- color: var(--ui-text-secondary);
1865
+ .owo-dialog__body {
1866
+ color: var(--owo-cmp-text-secondary);
1840
1867
  }
1841
1868
  @keyframes dialog-in {
1842
1869
  from {
@@ -1856,113 +1883,113 @@
1856
1883
  opacity: 1;
1857
1884
  }
1858
1885
  }
1859
- .ui-dropdown-menu__content {
1886
+ .owo-dropdown-menu__content {
1860
1887
  min-width: 12rem;
1861
1888
  overflow-y: auto;
1862
- border: 1px solid var(--ui-surface-border);
1863
- border-radius: var(--ui-control-radius-lg);
1864
- background: var(--ui-surface-bg-raised);
1865
- box-shadow: var(--ui-dropdown-menu-shadow, var(--ui-surface-shadow-strong));
1889
+ border: 1px solid var(--owo-cmp-surface-border);
1890
+ border-radius: var(--owo-cmp-control-radius-lg);
1891
+ background: var(--owo-cmp-surface-bg-raised);
1892
+ box-shadow: var(--_owo-dropdown-menu-shadow, var(--owo-cmp-surface-shadow-strong));
1866
1893
  padding: 0.375rem;
1867
- color: var(--ui-text-primary);
1894
+ color: var(--owo-cmp-text-primary);
1868
1895
  outline: none;
1869
- z-index: 1000;
1870
- animation: ui-dropdown-menu-in var(--ui-motion-duration-fast) var(--ui-motion-ease-standard);
1896
+ z-index: var(--owo-cmp-z-dropdown);
1897
+ animation: owo-dropdown-menu-in var(--owo-cmp-motion-duration-fast) var(--owo-cmp-motion-ease-standard);
1871
1898
  }
1872
- .ui-dropdown-menu__content[data-side="top"] {
1899
+ .owo-dropdown-menu__content[data-side="top"] {
1873
1900
  transform-origin: bottom center;
1874
1901
  }
1875
- .ui-dropdown-menu__content[data-side="bottom"] {
1902
+ .owo-dropdown-menu__content[data-side="bottom"] {
1876
1903
  transform-origin: top center;
1877
1904
  }
1878
- .ui-dropdown-menu__content[data-side="left"] {
1905
+ .owo-dropdown-menu__content[data-side="left"] {
1879
1906
  transform-origin: center right;
1880
1907
  }
1881
- .ui-dropdown-menu__content[data-side="right"] {
1908
+ .owo-dropdown-menu__content[data-side="right"] {
1882
1909
  transform-origin: center left;
1883
1910
  }
1884
- .ui-dropdown-menu__group + .ui-dropdown-menu__group {
1911
+ .owo-dropdown-menu__group + .owo-dropdown-menu__group {
1885
1912
  margin-top: 0.375rem;
1886
1913
  padding-top: 0.375rem;
1887
- border-top: 1px solid var(--ui-surface-border);
1914
+ border-top: 1px solid var(--owo-cmp-surface-border);
1888
1915
  @supports (color: color-mix(in lab, red, red)) {
1889
- border-top: 1px solid color-mix(in srgb, var(--ui-surface-border) 80%, transparent);
1916
+ border-top: 1px solid color-mix(in srgb, var(--owo-cmp-surface-border) 80%, transparent);
1890
1917
  }
1891
1918
  }
1892
- .ui-dropdown-menu__label {
1919
+ .owo-dropdown-menu__label {
1893
1920
  padding: 0.35rem 0.625rem 0.25rem;
1894
1921
  font-size: 0.675rem;
1895
1922
  font-weight: 700;
1896
1923
  letter-spacing: 0.12em;
1897
1924
  text-transform: uppercase;
1898
- color: var(--ui-text-muted);
1925
+ color: var(--owo-cmp-text-muted);
1899
1926
  }
1900
- .ui-dropdown-menu__separator {
1927
+ .owo-dropdown-menu__separator {
1901
1928
  margin: 0.375rem 0.25rem;
1902
- border-top: 1px solid var(--ui-surface-border);
1929
+ border-top: 1px solid var(--owo-cmp-surface-border);
1903
1930
  @supports (color: color-mix(in lab, red, red)) {
1904
- border-top: 1px solid color-mix(in srgb, var(--ui-surface-border) 82%, transparent);
1931
+ border-top: 1px solid color-mix(in srgb, var(--owo-cmp-surface-border) 82%, transparent);
1905
1932
  }
1906
1933
  }
1907
- .ui-dropdown-menu__item {
1934
+ .owo-dropdown-menu__item {
1908
1935
  display: flex;
1909
1936
  width: 100%;
1910
1937
  align-items: center;
1911
1938
  gap: 0.75rem;
1912
1939
  border: 0;
1913
- border-radius: calc(var(--ui-control-radius-md) - 0.125rem);
1940
+ border-radius: calc(var(--owo-cmp-control-radius-md) - 0.125rem);
1914
1941
  background: transparent;
1915
1942
  padding: 0.625rem 0.75rem;
1916
1943
  text-align: left;
1917
1944
  color: inherit;
1918
1945
  cursor: default;
1919
- transition: background-color var(--ui-motion-duration-fast) var(--ui-motion-ease-standard), color var(--ui-motion-duration-fast) var(--ui-motion-ease-standard);
1946
+ transition: background-color var(--owo-cmp-motion-duration-fast) var(--owo-cmp-motion-ease-standard), color var(--owo-cmp-motion-duration-fast) var(--owo-cmp-motion-ease-standard);
1920
1947
  }
1921
- .ui-dropdown-menu__item:hover, .ui-dropdown-menu__item[data-highlighted] {
1922
- background: var(--ui-surface-bg-inset);
1948
+ .owo-dropdown-menu__item:hover, .owo-dropdown-menu__item[data-highlighted] {
1949
+ background: var(--owo-cmp-surface-bg-inset);
1923
1950
  }
1924
- .ui-dropdown-menu__item[data-selected] {
1925
- background: var(--ui-accent-bg);
1951
+ .owo-dropdown-menu__item[data-selected] {
1952
+ background: var(--owo-cmp-accent-bg);
1926
1953
  @supports (color: color-mix(in lab, red, red)) {
1927
- background: color-mix(in srgb, var(--ui-accent-bg) 10%, var(--ui-surface-bg-raised));
1954
+ background: color-mix(in srgb, var(--owo-cmp-accent-bg) 10%, var(--owo-cmp-surface-bg-raised));
1928
1955
  }
1929
1956
  }
1930
- .ui-dropdown-menu__item[data-selected] .ui-dropdown-menu__item-main {
1931
- color: var(--ui-text-primary);
1957
+ .owo-dropdown-menu__item[data-selected] .owo-dropdown-menu__item-main {
1958
+ color: var(--owo-cmp-text-primary);
1932
1959
  font-weight: 600;
1933
1960
  }
1934
- .ui-dropdown-menu__item[data-disabled] {
1961
+ .owo-dropdown-menu__item[data-disabled] {
1935
1962
  opacity: 0.5;
1936
1963
  cursor: not-allowed;
1937
1964
  }
1938
- .ui-dropdown-menu__item[data-destructive] {
1939
- color: var(--ui-danger-text);
1965
+ .owo-dropdown-menu__item[data-destructive] {
1966
+ color: var(--owo-cmp-danger-text);
1940
1967
  }
1941
- .ui-dropdown-menu__item--inset {
1968
+ .owo-dropdown-menu__item--inset {
1942
1969
  padding-left: 1rem;
1943
1970
  }
1944
- .ui-dropdown-menu__item-main {
1971
+ .owo-dropdown-menu__item-main {
1945
1972
  min-width: 0;
1946
1973
  flex: 1 1 auto;
1947
1974
  overflow: hidden;
1948
1975
  text-overflow: ellipsis;
1949
1976
  white-space: nowrap;
1950
1977
  }
1951
- .ui-dropdown-menu__shortcut, .ui-dropdown-menu__indicator, .ui-dropdown-menu__submenu-indicator {
1978
+ .owo-dropdown-menu__shortcut, .owo-dropdown-menu__indicator, .owo-dropdown-menu__submenu-indicator {
1952
1979
  flex: 0 0 auto;
1953
- color: var(--ui-text-muted);
1980
+ color: var(--owo-cmp-text-muted);
1954
1981
  font-size: 0.75rem;
1955
1982
  }
1956
- .ui-dropdown-menu__indicator {
1983
+ .owo-dropdown-menu__indicator {
1957
1984
  min-width: 1rem;
1958
1985
  text-align: center;
1959
- color: var(--ui-accent-bg);
1986
+ color: var(--owo-cmp-accent-bg);
1960
1987
  font-weight: 700;
1961
1988
  }
1962
- .ui-dropdown-menu__sub-trigger[data-state="open"] {
1963
- background: var(--ui-surface-bg-inset);
1989
+ .owo-dropdown-menu__sub-trigger[data-state="open"] {
1990
+ background: var(--owo-cmp-surface-bg-inset);
1964
1991
  }
1965
- @keyframes ui-dropdown-menu-in {
1992
+ @keyframes owo-dropdown-menu-in {
1966
1993
  from {
1967
1994
  opacity: 0;
1968
1995
  transform: scale(0.98);
@@ -1972,174 +1999,174 @@
1972
1999
  transform: scale(1);
1973
2000
  }
1974
2001
  }
1975
- .ui-drawer {
1976
- --drawer-surface: var(--ui-surface-bg-raised);
1977
- --drawer-border: var(--ui-surface-border);
2002
+ .owo-drawer {
2003
+ --drawer-surface: var(--owo-cmp-surface-bg-raised);
2004
+ --drawer-border: var(--owo-cmp-surface-border);
1978
2005
  --drawer-shadow: var(--drawer-panel-shadow);
1979
2006
  will-change: transform;
1980
2007
  background: var(--drawer-surface);
1981
2008
  border-color: var(--drawer-border);
1982
2009
  box-shadow: var(--drawer-shadow);
1983
2010
  }
1984
- .ui-drawer-backdrop {
1985
- --drawer-backdrop: var(--color-overlay-strong);
2011
+ .owo-drawer-backdrop {
2012
+ --drawer-backdrop: var(--owo-cmp-overlay-bg);
1986
2013
  border: 0;
1987
2014
  background: var(--drawer-backdrop);
1988
2015
  }
1989
- .ui-field {
1990
- --field-label: var(--ui-text-secondary);
1991
- --field-help: var(--ui-text-muted);
2016
+ .owo-field {
2017
+ --field-label: var(--owo-cmp-text-secondary);
2018
+ --field-help: var(--owo-cmp-text-muted);
1992
2019
  }
1993
- .ui-field__label {
2020
+ .owo-field__label {
1994
2021
  color: var(--field-label);
1995
2022
  }
1996
- .ui-field__help {
2023
+ .owo-field__help {
1997
2024
  color: var(--field-help);
1998
2025
  }
1999
- .ui-icon-button {
2026
+ .owo-icon-button {
2000
2027
  --icon-button-bg: transparent;
2001
- --icon-button-bg-hover: var(--ui-surface-bg-inset);
2002
- --icon-button-bg-active: var(--ui-surface-bg-subtle);
2003
- --icon-button-text: var(--ui-text-muted);
2004
- --icon-button-ring: var(--ui-control-focus-ring);
2028
+ --icon-button-bg-hover: var(--owo-cmp-surface-bg-inset);
2029
+ --icon-button-bg-active: var(--owo-cmp-surface-bg-subtle);
2030
+ --icon-button-text: var(--owo-cmp-text-muted);
2031
+ --icon-button-ring: var(--owo-cmp-control-focus-ring);
2005
2032
  background: var(--icon-button-bg);
2006
2033
  color: var(--icon-button-text);
2007
2034
  }
2008
- .ui-icon-button:hover {
2035
+ .owo-icon-button:hover {
2009
2036
  background: var(--icon-button-bg-hover);
2010
- color: var(--ui-text-primary);
2037
+ color: var(--owo-cmp-text-primary);
2011
2038
  }
2012
- .ui-icon-button:active {
2039
+ .owo-icon-button:active {
2013
2040
  background: var(--icon-button-bg-active);
2014
2041
  }
2015
- .ui-icon-button:focus-visible {
2042
+ .owo-icon-button:focus-visible {
2016
2043
  --tw-ring-color: var(--icon-button-ring);
2017
2044
  }
2018
- .ui-icon-button[data-variant="subtle"] {
2019
- --icon-button-bg: var(--ui-surface-bg-inset);
2020
- --icon-button-bg-hover: var(--ui-surface-bg-subtle);
2021
- --icon-button-bg-active: var(--ui-surface-bg-raised);
2022
- --icon-button-text: var(--ui-text-primary);
2023
- }
2024
- .ui-input {
2025
- --field-bg: var(--ui-surface-bg);
2026
- --field-border: var(--ui-surface-border);
2027
- --field-text: var(--ui-text-primary);
2028
- --field-placeholder: var(--ui-text-muted);
2029
- --field-ring: var(--ui-control-focus-ring);
2045
+ .owo-icon-button[data-variant="subtle"] {
2046
+ --icon-button-bg: var(--owo-cmp-surface-bg-inset);
2047
+ --icon-button-bg-hover: var(--owo-cmp-surface-bg-subtle);
2048
+ --icon-button-bg-active: var(--owo-cmp-surface-bg-raised);
2049
+ --icon-button-text: var(--owo-cmp-text-primary);
2050
+ }
2051
+ .owo-input {
2052
+ --field-bg: var(--owo-cmp-surface-bg);
2053
+ --field-border: var(--owo-cmp-surface-border);
2054
+ --field-text: var(--owo-cmp-text-primary);
2055
+ --field-placeholder: var(--owo-cmp-text-muted);
2056
+ --field-ring: var(--owo-cmp-control-focus-ring);
2030
2057
  background: var(--field-bg);
2031
2058
  border: 1px solid var(--field-border);
2032
2059
  color: var(--field-text);
2033
2060
  --tw-ring-color: var(--field-ring);
2034
2061
  }
2035
- .ui-input[data-tone="warning"] {
2036
- --field-border: var(--ui-warning-border);
2037
- --field-ring: var(--ui-warning-border);
2062
+ .owo-input[data-tone="warning"] {
2063
+ --field-border: var(--owo-cmp-warning-border);
2064
+ --field-ring: var(--owo-cmp-warning-border);
2038
2065
  }
2039
- .ui-panel {
2040
- --panel-bg: var(--ui-surface-bg);
2041
- --panel-border: var(--ui-surface-border);
2042
- --panel-section-border: var(--ui-surface-border);
2066
+ .owo-panel {
2067
+ --panel-bg: var(--owo-cmp-surface-bg);
2068
+ --panel-border: var(--owo-cmp-surface-border);
2069
+ --panel-section-border: var(--owo-cmp-surface-border);
2043
2070
  --panel-shadow: none;
2044
2071
  background: var(--panel-bg);
2045
2072
  border-color: var(--panel-border);
2046
2073
  box-shadow: var(--panel-shadow);
2047
2074
  }
2048
- .ui-panel-header, .ui-panel-footer {
2075
+ .owo-panel-header, .owo-panel-footer {
2049
2076
  border-color: var(--panel-section-border);
2050
2077
  }
2051
- .ui-panel[data-variant="subtle"] {
2052
- --panel-bg: var(--ui-surface-bg-subtle);
2053
- }
2054
- .ui-panel[data-variant="raised"] {
2055
- --panel-bg: var(--ui-surface-bg-raised);
2056
- --panel-shadow: var(--ui-surface-shadow);
2057
- }
2058
- .ui-segmented-control {
2059
- --segmented-bg: var(--ui-surface-bg-inset);
2060
- --segmented-border: var(--ui-surface-border);
2061
- --segmented-item-text: var(--ui-text-muted);
2062
- --segmented-item-hover-text: var(--ui-text-secondary);
2063
- --segmented-item-active-bg: var(--ui-surface-bg-raised);
2064
- --segmented-item-active-text: var(--ui-text-primary);
2065
- --segmented-ring: var(--ui-control-focus-ring);
2078
+ .owo-panel[data-variant="subtle"] {
2079
+ --panel-bg: var(--owo-cmp-surface-bg-subtle);
2080
+ }
2081
+ .owo-panel[data-variant="raised"] {
2082
+ --panel-bg: var(--owo-cmp-surface-bg-raised);
2083
+ --panel-shadow: var(--owo-cmp-surface-shadow);
2084
+ }
2085
+ .owo-segmented-control {
2086
+ --segmented-bg: var(--owo-cmp-surface-bg-inset);
2087
+ --segmented-border: var(--owo-cmp-surface-border);
2088
+ --segmented-item-text: var(--owo-cmp-text-muted);
2089
+ --segmented-item-hover-text: var(--owo-cmp-text-secondary);
2090
+ --segmented-item-active-bg: var(--owo-cmp-surface-bg-raised);
2091
+ --segmented-item-active-text: var(--owo-cmp-text-primary);
2092
+ --segmented-ring: var(--owo-cmp-control-focus-ring);
2066
2093
  background: var(--segmented-bg);
2067
2094
  --tw-ring-color: var(--segmented-border);
2068
2095
  }
2069
- .ui-segmented-control__item {
2096
+ .owo-segmented-control__item {
2070
2097
  color: var(--segmented-item-text);
2071
2098
  }
2072
- .ui-segmented-control__item:hover {
2099
+ .owo-segmented-control__item:hover {
2073
2100
  color: var(--segmented-item-hover-text);
2074
2101
  }
2075
- .ui-segmented-control__item[data-active="true"] {
2102
+ .owo-segmented-control__item[data-active="true"] {
2076
2103
  background: var(--segmented-item-active-bg);
2077
2104
  color: var(--segmented-item-active-text);
2078
2105
  }
2079
- .ui-segmented-control__item:focus-visible {
2106
+ .owo-segmented-control__item:focus-visible {
2080
2107
  --tw-ring-color: var(--segmented-ring);
2081
2108
  }
2082
- .ui-select__trigger {
2083
- --select-bg: var(--ui-surface-bg);
2084
- --select-border: var(--ui-surface-border);
2085
- --select-text: var(--ui-text-primary);
2086
- --select-ring: var(--ui-control-focus-ring);
2109
+ .owo-select__trigger {
2110
+ --select-bg: var(--owo-cmp-surface-bg);
2111
+ --select-border: var(--owo-cmp-surface-border);
2112
+ --select-text: var(--owo-cmp-text-primary);
2113
+ --select-ring: var(--owo-cmp-control-focus-ring);
2087
2114
  background: var(--select-bg);
2088
2115
  border: 0.5px solid var(--select-border);
2089
2116
  color: var(--select-text);
2090
2117
  --tw-ring-color: var(--select-ring);
2091
2118
  }
2092
- .ui-select__trigger:hover:not(:disabled) {
2093
- --select-border: var(--ui-surface-border-strong);
2119
+ .owo-select__trigger:hover:not(:disabled) {
2120
+ --select-border: var(--owo-cmp-surface-border-strong);
2094
2121
  }
2095
- .ui-select__trigger[data-open] {
2096
- --select-border: var(--ui-surface-border-strong);
2122
+ .owo-select__trigger[data-open] {
2123
+ --select-border: var(--owo-cmp-surface-border-strong);
2097
2124
  }
2098
- .ui-select__trigger[data-tone="warning"] {
2099
- --select-border: var(--ui-warning-border);
2100
- --select-ring: var(--ui-warning-border);
2125
+ .owo-select__trigger[data-tone="warning"] {
2126
+ --select-border: var(--owo-cmp-warning-border);
2127
+ --select-ring: var(--owo-cmp-warning-border);
2101
2128
  }
2102
- .ui-select__trigger:disabled {
2129
+ .owo-select__trigger:disabled {
2103
2130
  cursor: not-allowed;
2104
2131
  opacity: 0.5;
2105
2132
  }
2106
- .ui-select__placeholder {
2107
- color: var(--ui-text-muted);
2133
+ .owo-select__placeholder {
2134
+ color: var(--owo-cmp-text-muted);
2108
2135
  }
2109
- .ui-select__chevron {
2110
- color: var(--ui-text-muted);
2136
+ .owo-select__chevron {
2137
+ color: var(--owo-cmp-text-muted);
2111
2138
  }
2112
- .ui-select__dropdown {
2113
- background: var(--ui-surface-bg-raised);
2114
- --tw-ring-color: var(--ui-surface-border);
2139
+ .owo-select__dropdown {
2140
+ background: var(--owo-cmp-surface-bg-raised);
2141
+ --tw-ring-color: var(--owo-cmp-surface-border);
2115
2142
  box-shadow: var(--select-dropdown-shadow);
2116
2143
  }
2117
- .ui-select__option[data-focused] {
2118
- background: var(--ui-surface-bg-inset);
2144
+ .owo-select__option[data-focused] {
2145
+ background: var(--owo-cmp-surface-bg-inset);
2119
2146
  }
2120
- .ui-select__option[data-selected] {
2121
- color: var(--ui-accent-bg);
2147
+ .owo-select__option[data-selected] {
2148
+ color: var(--owo-cmp-accent-bg);
2122
2149
  font-weight: 500;
2123
2150
  }
2124
- .ui-skeleton {
2125
- --ui-skeleton-scan-duration: 3.6s;
2151
+ .owo-skeleton {
2152
+ --_owo-skeleton-scan-duration: 3.6s;
2126
2153
  position: relative;
2127
2154
  overflow: hidden;
2128
2155
  background: var(--skeleton-bg);
2129
2156
  box-shadow: inset 0 1px 0 var(--skeleton-top-highlight);
2130
2157
  transform: translateZ(0);
2131
2158
  }
2132
- .ui-skeleton[data-tone='emphasis'] {
2159
+ .owo-skeleton[data-tone='emphasis'] {
2133
2160
  background: var(--skeleton-bg-emphasis);
2134
2161
  }
2135
- .ui-skeleton::before {
2162
+ .owo-skeleton::before {
2136
2163
  content: "";
2137
2164
  position: absolute;
2138
2165
  inset: 0;
2139
2166
  background: inherit;
2140
2167
  opacity: 0.84;
2141
2168
  }
2142
- .ui-skeleton::after {
2169
+ .owo-skeleton::after {
2143
2170
  content: "";
2144
2171
  position: absolute;
2145
2172
  inset: -35%;
@@ -2148,21 +2175,21 @@
2148
2175
  opacity: 0;
2149
2176
  will-change: transform, opacity;
2150
2177
  }
2151
- .ui-skeleton[data-animation='pulse']::after {
2178
+ .owo-skeleton[data-animation='pulse']::after {
2152
2179
  display: none;
2153
2180
  }
2154
- .ui-skeleton[data-animation='pulse']::before {
2155
- animation: ui-skeleton-breathe 2.6s var(--ease-standard) infinite;
2181
+ .owo-skeleton[data-animation='pulse']::before {
2182
+ animation: owo-skeleton-breathe 2.6s var(--owo-cmp-motion-ease-standard) infinite;
2156
2183
  }
2157
- .ui-skeleton[data-animation='scan']::before {
2184
+ .owo-skeleton[data-animation='scan']::before {
2158
2185
  opacity: 1;
2159
2186
  filter: none;
2160
2187
  }
2161
- .ui-skeleton[data-animation='scan']::after {
2188
+ .owo-skeleton[data-animation='scan']::after {
2162
2189
  opacity: 1;
2163
- animation: ui-skeleton-scan var(--ui-skeleton-scan-duration) cubic-bezier(0.3, 0, 0.2, 1) infinite;
2190
+ animation: owo-skeleton-scan var(--_owo-skeleton-scan-duration) cubic-bezier(0.3, 0, 0.2, 1) infinite;
2164
2191
  }
2165
- @keyframes ui-skeleton-breathe {
2192
+ @keyframes owo-skeleton-breathe {
2166
2193
  0%, 100% {
2167
2194
  opacity: 0.8;
2168
2195
  filter: saturate(0.96) brightness(0.98);
@@ -2172,7 +2199,7 @@
2172
2199
  filter: saturate(1.04) brightness(1.04);
2173
2200
  }
2174
2201
  }
2175
- @keyframes ui-skeleton-scan {
2202
+ @keyframes owo-skeleton-scan {
2176
2203
  0% {
2177
2204
  transform: translateX(-140%) skewX(-14deg);
2178
2205
  opacity: 0;
@@ -2193,17 +2220,17 @@
2193
2220
  }
2194
2221
  }
2195
2222
  @media (prefers-reduced-motion: reduce) {
2196
- .ui-skeleton::before {
2223
+ .owo-skeleton::before {
2197
2224
  animation: none;
2198
2225
  opacity: 0.94;
2199
2226
  filter: none;
2200
2227
  }
2201
- .ui-skeleton::after {
2228
+ .owo-skeleton::after {
2202
2229
  animation: none;
2203
2230
  opacity: 0;
2204
2231
  }
2205
2232
  }
2206
- .ui-status-notice {
2233
+ .owo-status-notice {
2207
2234
  --status-notice-bg: var(--feedback-neutral-bg);
2208
2235
  --status-notice-border: var(--feedback-neutral-border);
2209
2236
  --status-notice-text: var(--feedback-neutral-text);
@@ -2212,92 +2239,95 @@
2212
2239
  border-color: var(--status-notice-border);
2213
2240
  color: var(--status-notice-text);
2214
2241
  }
2215
- .ui-status-notice__icon {
2242
+ .owo-status-notice__icon {
2216
2243
  color: var(--status-notice-icon);
2217
2244
  }
2218
- .ui-status-notice__title {
2219
- color: var(--ui-text-primary);
2245
+ .owo-status-notice__title {
2246
+ color: var(--owo-cmp-text-primary);
2220
2247
  }
2221
- .ui-status-notice[data-layout="vertical"] .ui-status-notice__title {
2248
+ .owo-status-notice[data-layout="vertical"] .owo-status-notice__title {
2222
2249
  color: var(--status-notice-text);
2223
2250
  }
2224
- .ui-status-notice[data-tone="info"] {
2251
+ .owo-status-notice[data-tone="info"] {
2225
2252
  --status-notice-bg: var(--feedback-info-bg);
2226
2253
  --status-notice-border: var(--feedback-info-border);
2227
2254
  --status-notice-text: var(--feedback-info-text);
2228
2255
  --status-notice-icon: var(--feedback-info-icon);
2229
2256
  }
2230
- .ui-status-notice[data-tone="success"] {
2257
+ .owo-status-notice[data-tone="success"] {
2231
2258
  --status-notice-bg: var(--feedback-success-bg);
2232
2259
  --status-notice-border: var(--feedback-success-border);
2233
2260
  --status-notice-text: var(--feedback-success-text);
2234
2261
  --status-notice-icon: var(--feedback-success-icon);
2235
2262
  }
2236
- .ui-status-notice[data-tone="warning"] {
2263
+ .owo-status-notice[data-tone="warning"] {
2237
2264
  --status-notice-bg: var(--feedback-warning-bg);
2238
2265
  --status-notice-border: var(--feedback-warning-border);
2239
2266
  --status-notice-text: var(--feedback-warning-text);
2240
2267
  --status-notice-icon: var(--feedback-warning-icon);
2241
2268
  }
2242
- .ui-status-notice[data-tone="danger"] {
2269
+ .owo-status-notice[data-tone="danger"] {
2243
2270
  --status-notice-bg: var(--feedback-danger-bg);
2244
2271
  --status-notice-border: var(--feedback-danger-border);
2245
2272
  --status-notice-text: var(--feedback-danger-text);
2246
2273
  --status-notice-icon: var(--feedback-danger-icon);
2247
2274
  }
2248
- .ui-switch {
2249
- background: var(--color-n400);
2250
- --tw-ring-color: var(--ui-control-focus-ring);
2251
- --tw-ring-offset-color: var(--ui-surface-bg);
2275
+ .owo-switch {
2276
+ background: var(--owo-cmp-surface-border-strong);
2277
+ --tw-ring-color: var(--owo-cmp-control-focus-ring);
2278
+ --tw-ring-offset-color: var(--owo-cmp-surface-bg);
2252
2279
  }
2253
- .ui-switch[aria-checked="true"] {
2254
- background: var(--ui-accent-bg);
2280
+ .owo-switch[aria-checked="true"] {
2281
+ background: var(--owo-cmp-accent-bg);
2255
2282
  }
2256
- .ui-switch:hover:not(:disabled) {
2257
- background: var(--color-n500);
2283
+ .owo-switch:hover:not(:disabled) {
2284
+ background: var(--owo-cmp-surface-border-strong);
2285
+ @supports (color: color-mix(in lab, red, red)) {
2286
+ background: color-mix(in srgb, var(--owo-cmp-surface-border-strong) 82%, var(--owo-cmp-text-muted));
2287
+ }
2258
2288
  }
2259
- .ui-switch[aria-checked="true"]:hover:not(:disabled) {
2260
- background: var(--ui-accent-bg-hover);
2289
+ .owo-switch[aria-checked="true"]:hover:not(:disabled) {
2290
+ background: var(--owo-cmp-accent-bg-hover);
2261
2291
  }
2262
- .ui-tabs__list {
2263
- --tabs-border: var(--ui-surface-border);
2292
+ .owo-tabs__list {
2293
+ --tabs-border: var(--owo-cmp-surface-border);
2264
2294
  border-color: var(--tabs-border);
2265
2295
  }
2266
- .ui-tabs__trigger {
2267
- --tabs-text: var(--ui-text-muted);
2268
- --tabs-hover-text: var(--ui-text-secondary);
2269
- --tabs-active-text: var(--ui-text-primary);
2270
- --tabs-active-border: var(--ui-accent-strong);
2271
- --tabs-active-bg: var(--ui-accent-soft);
2296
+ .owo-tabs__trigger {
2297
+ --tabs-text: var(--owo-cmp-text-muted);
2298
+ --tabs-hover-text: var(--owo-cmp-text-secondary);
2299
+ --tabs-active-text: var(--owo-cmp-text-primary);
2300
+ --tabs-active-border: var(--owo-cmp-accent-border);
2301
+ --tabs-active-bg: var(--owo-cmp-accent-bg-muted);
2272
2302
  @supports (color: color-mix(in lab, red, red)) {
2273
- --tabs-active-bg: color-mix(in srgb, var(--ui-accent-soft) 35%, transparent);
2303
+ --tabs-active-bg: color-mix(in srgb, var(--owo-cmp-accent-bg-muted) 35%, transparent);
2274
2304
  }
2275
- --tabs-ring: var(--ui-control-focus-ring);
2305
+ --tabs-ring: var(--owo-cmp-control-focus-ring);
2276
2306
  border-bottom-color: transparent;
2277
2307
  color: var(--tabs-text);
2278
2308
  }
2279
- .ui-tabs__trigger:hover {
2309
+ .owo-tabs__trigger:hover {
2280
2310
  color: var(--tabs-hover-text);
2281
2311
  }
2282
- .ui-tabs__trigger[data-state="active"] {
2312
+ .owo-tabs__trigger[data-state="active"] {
2283
2313
  background: var(--tabs-active-bg);
2284
2314
  border-bottom-color: var(--tabs-active-border);
2285
2315
  color: var(--tabs-active-text);
2286
2316
  }
2287
- .ui-tabs__trigger:focus-visible {
2317
+ .owo-tabs__trigger:focus-visible {
2288
2318
  --tw-ring-color: var(--tabs-ring);
2289
2319
  }
2290
- .ui-tabs__content {
2291
- color: var(--ui-text-primary);
2320
+ .owo-tabs__content {
2321
+ color: var(--owo-cmp-text-primary);
2292
2322
  }
2293
- .ui-textarea {
2323
+ .owo-textarea {
2294
2324
  min-height: calc(1.5em * 3 + 1rem);
2295
2325
  line-height: 1.5;
2296
2326
  }
2297
- .ui-textarea[data-auto-resize="true"] {
2327
+ .owo-textarea[data-auto-resize="true"] {
2298
2328
  overflow-y: hidden;
2299
2329
  }
2300
- .ui-toast {
2330
+ .owo-toast {
2301
2331
  --toast-bg: var(--feedback-neutral-bg);
2302
2332
  --toast-border: var(--feedback-neutral-border);
2303
2333
  --toast-text: var(--feedback-neutral-text);
@@ -2305,33 +2335,33 @@
2305
2335
  background: var(--toast-bg);
2306
2336
  border-color: var(--toast-border);
2307
2337
  color: var(--toast-text);
2308
- box-shadow: var(--toast-shadow, var(--ui-surface-shadow-strong));
2338
+ box-shadow: var(--toast-shadow, var(--owo-cmp-surface-shadow-strong));
2309
2339
  }
2310
- .ui-toast__icon {
2340
+ .owo-toast__icon {
2311
2341
  color: var(--toast-icon);
2312
2342
  }
2313
- .ui-toast__title {
2343
+ .owo-toast__title {
2314
2344
  color: inherit;
2315
2345
  }
2316
- .ui-toast[data-tone="success"] {
2346
+ .owo-toast[data-tone="success"] {
2317
2347
  --toast-bg: var(--feedback-success-bg);
2318
2348
  --toast-border: var(--feedback-success-border);
2319
2349
  --toast-text: var(--feedback-success-text);
2320
2350
  --toast-icon: var(--feedback-success-icon);
2321
2351
  }
2322
- .ui-toast[data-tone="warning"] {
2352
+ .owo-toast[data-tone="warning"] {
2323
2353
  --toast-bg: var(--feedback-warning-bg);
2324
2354
  --toast-border: var(--feedback-warning-border);
2325
2355
  --toast-text: var(--feedback-warning-text);
2326
2356
  --toast-icon: var(--feedback-warning-icon);
2327
2357
  }
2328
- .ui-toast[data-tone="danger"] {
2358
+ .owo-toast[data-tone="danger"] {
2329
2359
  --toast-bg: var(--feedback-danger-bg);
2330
2360
  --toast-border: var(--feedback-danger-border);
2331
2361
  --toast-text: var(--feedback-danger-text);
2332
2362
  --toast-icon: var(--feedback-danger-icon);
2333
2363
  }
2334
- .ui-toast[data-tone="info"] {
2364
+ .owo-toast[data-tone="info"] {
2335
2365
  --toast-bg: var(--feedback-info-bg);
2336
2366
  --toast-border: var(--feedback-info-border);
2337
2367
  --toast-text: var(--feedback-info-text);
@@ -2347,10 +2377,10 @@
2347
2377
  transform: translateY(0) scale(1);
2348
2378
  }
2349
2379
  }
2350
- .ui-tooltip {
2351
- --tooltip-bg: var(--ui-surface-bg-raised);
2352
- --tooltip-border: var(--ui-surface-border);
2353
- --tooltip-text: var(--ui-text-primary);
2380
+ .owo-tooltip {
2381
+ --tooltip-bg: var(--owo-cmp-surface-bg-raised);
2382
+ --tooltip-border: var(--owo-cmp-surface-border);
2383
+ --tooltip-text: var(--owo-cmp-text-primary);
2354
2384
  --tooltip-arrow-color: var(--tooltip-bg);
2355
2385
  background: var(--tooltip-bg);
2356
2386
  color: var(--tooltip-text);
@@ -2361,7 +2391,7 @@
2361
2391
  }
2362
2392
  backdrop-filter: blur(10px);
2363
2393
  }
2364
- .ui-tooltip__arrow {
2394
+ .owo-tooltip__arrow {
2365
2395
  color: var(--tooltip-arrow-color);
2366
2396
  filter: drop-shadow(0 1px 0 var(--tooltip-border)) drop-shadow(0 0 0.5px var(--tooltip-border));
2367
2397
  @supports (color: color-mix(in lab, red, red)) {
@@ -2379,151 +2409,159 @@
2379
2409
  }
2380
2410
  }
2381
2411
  :root {
2382
- --preset-surface-bg: var(--theme-surface-base);
2383
- --preset-surface-bg-subtle: var(--theme-surface-subtle);
2384
- --preset-surface-bg-raised: var(--theme-surface-raised);
2385
- --preset-surface-bg-inset: var(--theme-surface-inset);
2386
- --preset-surface-border: var(--theme-surface-border);
2387
- --preset-surface-border-muted: var(--theme-surface-border-muted);
2388
- --preset-surface-border-strong: var(--theme-surface-border-strong);
2389
- --preset-surface-shadow: var(--shadow-raised);
2390
- --preset-surface-shadow-strong: var(--shadow-popover);
2391
- --preset-surface-blur: 0px;
2392
- --preset-canvas-bg: var(--theme-surface-canvas);
2393
- --preset-canvas-bg-subtle: var(--theme-canvas-bg-subtle);
2394
- --preset-surface-container: var(--theme-surface-container);
2395
- --preset-surface-container-high: var(--theme-surface-container-high);
2396
- --preset-surface-container-highest: var(--theme-surface-container-highest);
2397
- --preset-control-radius-sm: 0.5rem;
2398
- --preset-control-radius-md: 0.75rem;
2399
- --preset-control-radius-lg: 1rem;
2400
- --preset-control-radius-xl: 1.5rem;
2401
- --preset-control-radius-2xl: 2rem;
2402
- --preset-control-border-width: 1px;
2403
- --ui-surface-bg: var(--preset-surface-bg);
2404
- --ui-surface-bg-subtle: var(--preset-surface-bg-subtle);
2405
- --ui-surface-bg-raised: var(--preset-surface-bg-raised);
2406
- --ui-surface-bg-inset: var(--preset-surface-bg-inset);
2407
- --ui-surface-border: var(--preset-surface-border);
2408
- --ui-surface-border-muted: var(--preset-surface-border-muted);
2409
- --ui-surface-border-strong: var(--preset-surface-border-strong);
2410
- --ui-surface-shadow: var(--preset-surface-shadow);
2411
- --ui-surface-shadow-strong: var(--preset-surface-shadow-strong);
2412
- --ui-surface-blur: var(--preset-surface-blur);
2413
- --ui-canvas-bg: var(--preset-canvas-bg);
2414
- --ui-canvas-bg-subtle: var(--preset-canvas-bg-subtle);
2415
- --ui-surface-container: var(--preset-surface-container);
2416
- --ui-surface-container-high: var(--preset-surface-container-high);
2417
- --ui-surface-container-highest: var(--preset-surface-container-highest);
2418
- --ui-text-primary: var(--theme-text-primary);
2419
- --ui-text-secondary: var(--theme-text-secondary);
2420
- --ui-text-muted: var(--theme-text-muted);
2421
- --ui-text-on-accent: var(--theme-text-on-accent);
2422
- --ui-accent-bg: var(--theme-accent-bg);
2423
- --ui-accent-bg-hover: var(--theme-accent-bg-hover);
2424
- --ui-accent-bg-muted: var(--theme-accent-bg-muted);
2425
- --ui-accent-text: var(--theme-text-on-accent);
2426
- --ui-accent-border: var(--theme-accent-border);
2427
- --ui-success-bg: var(--theme-success-bg);
2428
- --ui-success-border: var(--theme-success-border);
2429
- --ui-success-text: var(--theme-success-text);
2430
- --ui-warning-bg: var(--theme-warning-bg);
2431
- --ui-warning-border: var(--theme-warning-border);
2432
- --ui-warning-text: var(--theme-warning-text);
2433
- --ui-danger-bg: var(--theme-danger-bg);
2434
- --ui-danger-bg-emphasis: var(--theme-danger-bg-emphasis);
2435
- --ui-danger-border: var(--theme-danger-border);
2436
- --ui-danger-text: var(--theme-danger-text);
2437
- --ui-info-bg: var(--theme-info-bg);
2438
- --ui-info-border: var(--theme-info-border);
2439
- --ui-info-text: var(--theme-info-text);
2440
- --ui-control-radius-sm: var(--preset-control-radius-sm);
2441
- --ui-control-radius-md: var(--preset-control-radius-md);
2442
- --ui-control-radius-lg: var(--preset-control-radius-lg);
2443
- --ui-control-radius-xl: var(--preset-control-radius-xl);
2444
- --ui-control-radius-2xl: var(--preset-control-radius-2xl);
2445
- --ui-control-border-width: var(--preset-control-border-width);
2446
- --ui-control-focus-ring: var(--theme-control-focus-ring);
2447
- --ui-control-focus-ring-offset: var(--theme-control-focus-ring-offset);
2448
- --ui-font-heading: var(--font-heading);
2449
- --ui-motion-duration-fast: 0.15s;
2450
- --ui-motion-duration-default: 0.2s;
2451
- --ui-motion-ease-standard: var(--ease-standard);
2452
- --ui-density-compact: 0.875;
2453
- --ui-density-default: 1;
2454
- --ui-density-comfortable: 1.125;
2412
+ --owo-sys-preset-surface-bg: var(--owo-sys-theme-surface-base);
2413
+ --owo-sys-preset-surface-bg-subtle: var(--owo-sys-theme-surface-subtle);
2414
+ --owo-sys-preset-surface-bg-raised: var(--owo-sys-theme-surface-raised);
2415
+ --owo-sys-preset-surface-bg-inset: var(--owo-sys-theme-surface-inset);
2416
+ --owo-sys-preset-surface-border: var(--owo-sys-theme-surface-border);
2417
+ --owo-sys-preset-surface-border-muted: var(--owo-sys-theme-surface-border-muted);
2418
+ --owo-sys-preset-surface-border-strong: var(--owo-sys-theme-surface-border-strong);
2419
+ --owo-sys-preset-surface-shadow: var(--owo-ref-shadow-raised);
2420
+ --owo-sys-preset-surface-shadow-strong: var(--owo-ref-shadow-popover);
2421
+ --owo-sys-preset-surface-blur: 0px;
2422
+ --owo-sys-preset-canvas-bg: var(--owo-sys-theme-surface-canvas);
2423
+ --owo-sys-preset-canvas-bg-subtle: var(--owo-sys-theme-canvas-bg-subtle);
2424
+ --owo-sys-preset-surface-container: var(--owo-sys-theme-surface-container);
2425
+ --owo-sys-preset-surface-container-high: var(--owo-sys-theme-surface-container-high);
2426
+ --owo-sys-preset-surface-container-highest: var(--owo-sys-theme-surface-container-highest);
2427
+ --owo-sys-preset-control-radius-sm: var(--owo-ref-radius-sm);
2428
+ --owo-sys-preset-control-radius-md: var(--owo-ref-radius-md);
2429
+ --owo-sys-preset-control-radius-lg: var(--owo-ref-radius-lg);
2430
+ --owo-sys-preset-control-radius-xl: var(--owo-ref-radius-xl);
2431
+ --owo-sys-preset-control-radius-2xl: var(--owo-ref-radius-2xl);
2432
+ --owo-sys-preset-control-radius-full: var(--owo-ref-radius-full);
2433
+ --owo-sys-preset-control-border-width: 1px;
2434
+ --owo-cmp-surface-bg: var(--owo-sys-preset-surface-bg);
2435
+ --owo-cmp-surface-bg-subtle: var(--owo-sys-preset-surface-bg-subtle);
2436
+ --owo-cmp-surface-bg-raised: var(--owo-sys-preset-surface-bg-raised);
2437
+ --owo-cmp-surface-bg-inset: var(--owo-sys-preset-surface-bg-inset);
2438
+ --owo-cmp-surface-border: var(--owo-sys-preset-surface-border);
2439
+ --owo-cmp-surface-border-muted: var(--owo-sys-preset-surface-border-muted);
2440
+ --owo-cmp-surface-border-strong: var(--owo-sys-preset-surface-border-strong);
2441
+ --owo-cmp-surface-shadow: var(--owo-sys-preset-surface-shadow);
2442
+ --owo-cmp-surface-shadow-strong: var(--owo-sys-preset-surface-shadow-strong);
2443
+ --owo-cmp-surface-blur: var(--owo-sys-preset-surface-blur);
2444
+ --owo-cmp-canvas-bg: var(--owo-sys-preset-canvas-bg);
2445
+ --owo-cmp-canvas-bg-subtle: var(--owo-sys-preset-canvas-bg-subtle);
2446
+ --owo-cmp-surface-container: var(--owo-sys-preset-surface-container);
2447
+ --owo-cmp-surface-container-high: var(--owo-sys-preset-surface-container-high);
2448
+ --owo-cmp-surface-container-highest: var(--owo-sys-preset-surface-container-highest);
2449
+ --owo-cmp-text-primary: var(--owo-sys-theme-text-primary);
2450
+ --owo-cmp-text-secondary: var(--owo-sys-theme-text-secondary);
2451
+ --owo-cmp-text-muted: var(--owo-sys-theme-text-muted);
2452
+ --owo-cmp-text-on-accent: var(--owo-sys-theme-text-on-accent);
2453
+ --owo-cmp-accent-bg: var(--owo-sys-theme-accent-bg);
2454
+ --owo-cmp-accent-bg-hover: var(--owo-sys-theme-accent-bg-hover);
2455
+ --owo-cmp-accent-bg-muted: var(--owo-sys-theme-accent-bg-muted);
2456
+ --owo-cmp-accent-text: var(--owo-sys-theme-text-on-accent);
2457
+ --owo-cmp-accent-border: var(--owo-sys-theme-accent-border);
2458
+ --owo-cmp-success-bg: var(--owo-sys-theme-success-bg);
2459
+ --owo-cmp-success-border: var(--owo-sys-theme-success-border);
2460
+ --owo-cmp-success-text: var(--owo-sys-theme-success-text);
2461
+ --owo-cmp-warning-bg: var(--owo-sys-theme-warning-bg);
2462
+ --owo-cmp-warning-border: var(--owo-sys-theme-warning-border);
2463
+ --owo-cmp-warning-text: var(--owo-sys-theme-warning-text);
2464
+ --owo-cmp-danger-bg: var(--owo-sys-theme-danger-bg);
2465
+ --owo-cmp-danger-bg-emphasis: var(--owo-sys-theme-danger-bg-emphasis);
2466
+ --owo-cmp-danger-border: var(--owo-sys-theme-danger-border);
2467
+ --owo-cmp-danger-text: var(--owo-sys-theme-danger-text);
2468
+ --owo-cmp-info-bg: var(--owo-sys-theme-info-bg);
2469
+ --owo-cmp-info-border: var(--owo-sys-theme-info-border);
2470
+ --owo-cmp-info-text: var(--owo-sys-theme-info-text);
2471
+ --owo-cmp-control-radius-sm: var(--owo-sys-preset-control-radius-sm);
2472
+ --owo-cmp-control-radius-md: var(--owo-sys-preset-control-radius-md);
2473
+ --owo-cmp-control-radius-lg: var(--owo-sys-preset-control-radius-lg);
2474
+ --owo-cmp-control-radius-xl: var(--owo-sys-preset-control-radius-xl);
2475
+ --owo-cmp-control-radius-2xl: var(--owo-sys-preset-control-radius-2xl);
2476
+ --owo-cmp-control-radius-full: var(--owo-sys-preset-control-radius-full);
2477
+ --owo-cmp-control-border-width: var(--owo-sys-preset-control-border-width);
2478
+ --owo-cmp-control-focus-ring: var(--owo-sys-theme-control-focus-ring);
2479
+ --owo-cmp-control-focus-ring-offset: var(--owo-sys-theme-control-focus-ring-offset);
2480
+ --owo-cmp-font-heading: var(--owo-ref-font-heading);
2481
+ --owo-cmp-motion-duration-fast: 0.15s;
2482
+ --owo-cmp-motion-duration-default: 0.2s;
2483
+ --owo-cmp-motion-ease-standard: var(--owo-ref-motion-ease-standard);
2484
+ --owo-cmp-motion-ease-decelerate: var(--owo-ref-motion-ease-decelerate);
2485
+ --owo-cmp-motion-ease-accelerate: var(--owo-ref-motion-ease-accelerate);
2486
+ --owo-cmp-density-compact: 0.875;
2487
+ --owo-cmp-density-default: 1;
2488
+ --owo-cmp-density-comfortable: 1.125;
2489
+ --owo-cmp-overlay-bg: var(--owo-sys-theme-overlay-bg);
2490
+ --owo-cmp-z-dropdown: 1000;
2491
+ --owo-cmp-z-modal: 1100;
2492
+ --owo-cmp-z-toast: 1200;
2455
2493
  --content-min-width: 320px;
2456
2494
  --content-preferred-width: 70vw;
2457
2495
  --content-max-width: 960px;
2458
2496
  --content-width: clamp(600px, 70vw, 960px);
2459
2497
  --content-padding: 24px;
2460
2498
  --header-top-margin: 64px;
2461
- --publish-trigger-bg: var(--ui-surface-bg-subtle);
2462
- --publish-trigger-border: var(--ui-surface-border);
2463
- --publish-trigger-text: var(--ui-text-primary);
2464
- --publish-trigger-active-bg: var(--ui-accent-bg-muted);
2465
- --publish-popover-bg: var(--ui-surface-bg);
2466
- --publish-popover-border: var(--ui-surface-border);
2467
- --publish-popover-shadow: var(--ui-surface-shadow-strong);
2468
- --publish-section-bg: var(--ui-surface-bg-subtle);
2469
- --publish-section-border: var(--ui-surface-border);
2470
- --publish-fact-title: var(--ui-text-secondary);
2471
- --publish-fact-value: var(--color-n900);
2472
- --publish-muted-text: var(--ui-text-secondary);
2473
- --publish-warning-bg: var(--ui-warning-bg);
2474
- --publish-warning-border: var(--ui-warning-border);
2475
- --publish-warning-text: var(--ui-warning-text);
2476
- --publish-danger-bg: var(--ui-danger-bg);
2477
- --publish-danger-border: var(--ui-danger-border);
2478
- --publish-danger-text: var(--ui-danger-text);
2479
- --publish-success-bg: var(--ui-success-bg);
2480
- --publish-success-border: var(--ui-success-border);
2481
- --publish-success-text: var(--ui-success-text);
2482
- --publish-progress-track: var(--ui-surface-bg-inset);
2483
- --publish-progress-fill: var(--ui-accent-bg);
2484
- --feedback-neutral-bg: var(--ui-surface-bg-raised);
2485
- --feedback-neutral-border: var(--ui-surface-border);
2486
- --feedback-neutral-text: var(--ui-text-primary);
2487
- --feedback-neutral-icon: var(--ui-text-secondary);
2488
- --feedback-info-bg: var(--ui-info-bg);
2489
- --feedback-info-border: var(--ui-info-border);
2490
- --feedback-info-text: var(--ui-info-text);
2491
- --feedback-info-icon: var(--ui-info-text);
2492
- --feedback-success-bg: var(--ui-success-bg);
2493
- --feedback-success-border: var(--ui-success-border);
2494
- --feedback-success-text: var(--ui-success-text);
2495
- --feedback-success-icon: var(--ui-success-text);
2496
- --feedback-warning-bg: var(--ui-warning-bg);
2497
- --feedback-warning-border: var(--ui-warning-border);
2498
- --feedback-warning-text: var(--ui-warning-text);
2499
- --feedback-warning-icon: var(--ui-warning-text);
2500
- --feedback-danger-bg: var(--ui-danger-bg);
2501
- --feedback-danger-border: var(--ui-danger-border);
2502
- --feedback-danger-text: var(--ui-danger-text);
2503
- --feedback-danger-icon: var(--ui-danger-text);
2504
- --toast-shadow: var(--ui-surface-shadow-strong);
2499
+ --publish-trigger-bg: var(--owo-cmp-surface-bg-subtle);
2500
+ --publish-trigger-border: var(--owo-cmp-surface-border);
2501
+ --publish-trigger-text: var(--owo-cmp-text-primary);
2502
+ --publish-trigger-active-bg: var(--owo-cmp-accent-bg-muted);
2503
+ --publish-popover-bg: var(--owo-cmp-surface-bg);
2504
+ --publish-popover-border: var(--owo-cmp-surface-border);
2505
+ --publish-popover-shadow: var(--owo-cmp-surface-shadow-strong);
2506
+ --publish-section-bg: var(--owo-cmp-surface-bg-subtle);
2507
+ --publish-section-border: var(--owo-cmp-surface-border);
2508
+ --publish-fact-title: var(--owo-cmp-text-secondary);
2509
+ --publish-fact-value: var(--owo-ref-color-neutral-900);
2510
+ --publish-muted-text: var(--owo-cmp-text-secondary);
2511
+ --publish-warning-bg: var(--owo-cmp-warning-bg);
2512
+ --publish-warning-border: var(--owo-cmp-warning-border);
2513
+ --publish-warning-text: var(--owo-cmp-warning-text);
2514
+ --publish-danger-bg: var(--owo-cmp-danger-bg);
2515
+ --publish-danger-border: var(--owo-cmp-danger-border);
2516
+ --publish-danger-text: var(--owo-cmp-danger-text);
2517
+ --publish-success-bg: var(--owo-cmp-success-bg);
2518
+ --publish-success-border: var(--owo-cmp-success-border);
2519
+ --publish-success-text: var(--owo-cmp-success-text);
2520
+ --publish-progress-track: var(--owo-cmp-surface-bg-inset);
2521
+ --publish-progress-fill: var(--owo-cmp-accent-bg);
2522
+ --feedback-neutral-bg: var(--owo-cmp-surface-bg-raised);
2523
+ --feedback-neutral-border: var(--owo-cmp-surface-border);
2524
+ --feedback-neutral-text: var(--owo-cmp-text-primary);
2525
+ --feedback-neutral-icon: var(--owo-cmp-text-secondary);
2526
+ --feedback-info-bg: var(--owo-cmp-info-bg);
2527
+ --feedback-info-border: var(--owo-cmp-info-border);
2528
+ --feedback-info-text: var(--owo-cmp-info-text);
2529
+ --feedback-info-icon: var(--owo-cmp-info-text);
2530
+ --feedback-success-bg: var(--owo-cmp-success-bg);
2531
+ --feedback-success-border: var(--owo-cmp-success-border);
2532
+ --feedback-success-text: var(--owo-cmp-success-text);
2533
+ --feedback-success-icon: var(--owo-cmp-success-text);
2534
+ --feedback-warning-bg: var(--owo-cmp-warning-bg);
2535
+ --feedback-warning-border: var(--owo-cmp-warning-border);
2536
+ --feedback-warning-text: var(--owo-cmp-warning-text);
2537
+ --feedback-warning-icon: var(--owo-cmp-warning-text);
2538
+ --feedback-danger-bg: var(--owo-cmp-danger-bg);
2539
+ --feedback-danger-border: var(--owo-cmp-danger-border);
2540
+ --feedback-danger-text: var(--owo-cmp-danger-text);
2541
+ --feedback-danger-icon: var(--owo-cmp-danger-text);
2542
+ --toast-shadow: var(--owo-cmp-surface-shadow-strong);
2505
2543
  --skeleton-bg: linear-gradient(
2506
2544
  180deg,
2507
- var(--ui-surface-bg-inset) 0%,
2508
- var(--ui-surface-bg-inset) 100%
2545
+ var(--owo-cmp-surface-bg-inset) 0%,
2546
+ var(--owo-cmp-surface-bg-inset) 100%
2509
2547
  );
2510
2548
  @supports (color: color-mix(in lab, red, red)) {
2511
2549
  --skeleton-bg: linear-gradient(
2512
2550
  180deg,
2513
- color-mix(in srgb, var(--ui-surface-bg-inset) 94%, white) 0%,
2514
- color-mix(in srgb, var(--ui-surface-bg-inset) 100%, var(--ui-surface-border)) 100%
2551
+ color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 94%, white) 0%,
2552
+ color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 100%, var(--owo-cmp-surface-border)) 100%
2515
2553
  );
2516
2554
  }
2517
2555
  --skeleton-bg-emphasis: linear-gradient(
2518
2556
  180deg,
2519
- var(--ui-surface-bg-subtle) 0%,
2520
- var(--ui-surface-bg-inset) 100%
2557
+ var(--owo-cmp-surface-bg-subtle) 0%,
2558
+ var(--owo-cmp-surface-bg-inset) 100%
2521
2559
  );
2522
2560
  @supports (color: color-mix(in lab, red, red)) {
2523
2561
  --skeleton-bg-emphasis: linear-gradient(
2524
2562
  180deg,
2525
- color-mix(in srgb, var(--ui-surface-bg-subtle) 78%, var(--color-highlight-soft)) 0%,
2526
- color-mix(in srgb, var(--ui-surface-bg-inset) 86%, var(--ui-surface-border)) 100%
2563
+ color-mix(in srgb, var(--owo-cmp-surface-bg-subtle) 78%, var(--owo-ref-color-highlight-soft)) 0%,
2564
+ color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 86%, var(--owo-cmp-surface-border)) 100%
2527
2565
  );
2528
2566
  }
2529
2567
  --skeleton-sheen: linear-gradient(
@@ -2531,7 +2569,7 @@
2531
2569
  transparent 0%,
2532
2570
  color-mix(in srgb, rgba(255, 255, 255, 0.34) 10%, transparent) 28%,
2533
2571
  color-mix(in srgb, rgba(255, 255, 255, 0.34) 35%, transparent) 40%,
2534
- var(--color-highlight-sheen) 50%,
2572
+ var(--owo-ref-color-highlight-sheen) 50%,
2535
2573
  color-mix(in srgb, rgba(255, 255, 255, 0.34) 35%, transparent) 60%,
2536
2574
  color-mix(in srgb, rgba(255, 255, 255, 0.34) 10%, transparent) 72%,
2537
2575
  transparent 100%
@@ -2540,253 +2578,261 @@
2540
2578
  --skeleton-sheen: linear-gradient(
2541
2579
  100deg,
2542
2580
  transparent 0%,
2543
- color-mix(in srgb, var(--color-highlight-sheen) 10%, transparent) 28%,
2544
- color-mix(in srgb, var(--color-highlight-sheen) 35%, transparent) 40%,
2545
- var(--color-highlight-sheen) 50%,
2546
- color-mix(in srgb, var(--color-highlight-sheen) 35%, transparent) 60%,
2547
- color-mix(in srgb, var(--color-highlight-sheen) 10%, transparent) 72%,
2581
+ color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 28%,
2582
+ color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 40%,
2583
+ var(--owo-ref-color-highlight-sheen) 50%,
2584
+ color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 60%,
2585
+ color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 72%,
2548
2586
  transparent 100%
2549
2587
  );
2550
2588
  }
2551
- --skeleton-top-highlight: var(--color-highlight-soft);
2552
- --workspace-transition-veil-bg: var(--color-overlay-soft);
2589
+ --skeleton-top-highlight: var(--owo-ref-color-highlight-soft);
2590
+ --workspace-transition-veil-bg: var(--owo-ref-color-overlay-soft);
2553
2591
  --workspace-transition-stale-bg: color-mix(in srgb, rgba(244, 238, 230, 0.56) 72%, transparent);
2554
2592
  @supports (color: color-mix(in lab, red, red)) {
2555
- --workspace-transition-stale-bg: color-mix(in srgb, var(--color-overlay-soft) 72%, transparent);
2593
+ --workspace-transition-stale-bg: color-mix(in srgb, var(--owo-ref-color-overlay-soft) 72%, transparent);
2556
2594
  }
2557
- --tooltip-shadow: var(--ui-surface-shadow-strong);
2558
- --select-dropdown-shadow: var(--ui-surface-shadow-strong);
2559
- --theme-picker-shadow: var(--ui-surface-shadow-strong);
2560
- --drawer-panel-shadow: var(--ui-surface-shadow-strong);
2595
+ --tooltip-shadow: var(--owo-cmp-surface-shadow-strong);
2596
+ --select-dropdown-shadow: var(--owo-cmp-surface-shadow-strong);
2597
+ --drawer-panel-shadow: var(--owo-cmp-surface-shadow-strong);
2561
2598
  }
2562
2599
  :root, :root[data-theme="light"], .owoui-theme-light {
2563
- --color-n900: #1a1a1a;
2564
- --color-n800: #2d2d2d;
2565
- --color-n700: #4a4a4a;
2566
- --color-n600: #71717a;
2567
- --color-n500: #a1a1aa;
2568
- --color-n400: #d4d4d8;
2569
- --color-n300: #e4e4e7;
2570
- --color-brand-primary: #1a1a1a;
2571
- --color-brand-primary-hover: #000000;
2572
- --color-brand-accent: #4a4a4a;
2573
- --color-surface-canvas: #ffffff;
2574
- --color-surface-base: #ffffff;
2575
- --color-surface-subtle: #fafaf9;
2576
- --color-surface-raised: #ffffff;
2577
- --color-surface-inset: #f5f5f4;
2578
- --color-surface-border: #e5e7eb;
2579
- --color-surface-ring: #d6d3d1;
2580
- --color-surface-overlay: rgba(0, 0, 0, 0.4);
2581
- --color-overlay-soft: rgba(244, 238, 230, 0.56);
2582
- --color-overlay-strong: rgba(15, 23, 42, 0.18);
2583
- --color-highlight-soft: rgba(255, 255, 255, 0.56);
2584
- --color-highlight-sheen: rgba(255, 255, 255, 0.34);
2585
- --color-text-on-brand: #ffffff;
2586
- --color-code-block-bg: #f4f4f5;
2587
- --color-code-block-border: #e4e4e7;
2588
- --color-code-block-divider: #ececed;
2589
- --color-code-inline-bg: #f4f4f5;
2590
- --color-admin-success-bg: rgba(16, 185, 129, 0.10);
2591
- --color-admin-success-border: rgba(16, 185, 129, 0.20);
2592
- --color-admin-success-text: #047857;
2593
- --color-admin-warning-bg: rgba(245, 158, 11, 0.10);
2594
- --color-admin-warning-border: rgba(245, 158, 11, 0.20);
2595
- --color-admin-warning-text: #b45309;
2596
- --color-admin-danger-bg: rgba(239, 68, 68, 0.10);
2597
- --color-admin-danger-border: rgba(239, 68, 68, 0.20);
2598
- --color-admin-danger-text: #b91c1c;
2599
- --color-admin-info-bg: rgba(14, 165, 233, 0.10);
2600
- --color-admin-info-border: rgba(14, 165, 233, 0.20);
2601
- --color-admin-info-text: #0369a1;
2602
- --theme-surface-canvas: var(--color-surface-canvas);
2603
- --theme-surface-base: var(--color-surface-base);
2604
- --theme-surface-subtle: var(--color-surface-subtle);
2605
- --theme-surface-raised: var(--color-surface-raised);
2606
- --theme-surface-inset: var(--color-surface-inset);
2607
- --theme-surface-border: var(--color-surface-border);
2608
- --theme-surface-border-muted: rgba(0, 0, 0, 0.06);
2609
- --theme-surface-border-strong: var(--color-surface-ring);
2610
- --theme-canvas-bg-subtle: #f5f5f4;
2611
- --theme-surface-container: #f4f4f5;
2612
- --theme-surface-container-high: #ececed;
2613
- --theme-surface-container-highest: #e4e4e7;
2614
- --theme-text-primary: var(--color-n800);
2615
- --theme-text-secondary: var(--color-n600);
2616
- --theme-text-muted: var(--color-n500);
2617
- --theme-text-on-accent: var(--color-text-on-brand);
2618
- --theme-accent-bg: var(--color-brand-primary);
2619
- --theme-accent-bg-hover: var(--color-brand-primary-hover);
2620
- --theme-accent-bg-muted: color-mix(in srgb, #1a1a1a 10%, #ffffff);
2600
+ --owo-ref-color-neutral-900: #1a1a1a;
2601
+ --owo-ref-color-neutral-800: #2d2d2d;
2602
+ --owo-ref-color-neutral-700: #4a4a4a;
2603
+ --owo-ref-color-neutral-600: #71717a;
2604
+ --owo-ref-color-neutral-500: #a1a1aa;
2605
+ --owo-ref-color-neutral-400: #d4d4d8;
2606
+ --owo-ref-color-neutral-300: #e4e4e7;
2607
+ --owo-ref-color-brand-primary: #1a1a1a;
2608
+ --owo-ref-color-brand-primary-hover: #000000;
2609
+ --owo-ref-color-brand-accent: #4a4a4a;
2610
+ --owo-ref-color-surface-canvas: #ffffff;
2611
+ --owo-ref-color-surface-base: #ffffff;
2612
+ --owo-ref-color-surface-subtle: #fafaf9;
2613
+ --owo-ref-color-surface-raised: #ffffff;
2614
+ --owo-ref-color-surface-inset: #f5f5f4;
2615
+ --owo-ref-color-surface-border: #e5e7eb;
2616
+ --owo-ref-color-surface-ring: #d6d3d1;
2617
+ --owo-ref-color-surface-overlay: rgba(0, 0, 0, 0.4);
2618
+ --owo-ref-color-overlay-soft: rgba(244, 238, 230, 0.56);
2619
+ --owo-ref-color-overlay-strong: rgba(15, 23, 42, 0.18);
2620
+ --owo-ref-color-highlight-soft: rgba(255, 255, 255, 0.56);
2621
+ --owo-ref-color-highlight-sheen: rgba(255, 255, 255, 0.34);
2622
+ --owo-ref-color-text-on-brand: #ffffff;
2623
+ --owo-ref-color-code-block-bg: #f4f4f5;
2624
+ --owo-ref-color-code-block-border: #e4e4e7;
2625
+ --owo-ref-color-code-block-divider: #ececed;
2626
+ --owo-ref-color-code-inline-bg: #f4f4f5;
2627
+ --owo-ref-color-status-success-bg: rgba(16, 185, 129, 0.10);
2628
+ --owo-ref-color-status-success-border: rgba(16, 185, 129, 0.20);
2629
+ --owo-ref-color-status-success-text: #047857;
2630
+ --owo-ref-color-status-warning-bg: rgba(245, 158, 11, 0.10);
2631
+ --owo-ref-color-status-warning-border: rgba(245, 158, 11, 0.20);
2632
+ --owo-ref-color-status-warning-text: #b45309;
2633
+ --owo-ref-color-status-danger-bg: rgba(239, 68, 68, 0.10);
2634
+ --owo-ref-color-status-danger-border: rgba(239, 68, 68, 0.20);
2635
+ --owo-ref-color-status-danger-text: #b91c1c;
2636
+ --owo-ref-color-status-info-bg: rgba(14, 165, 233, 0.10);
2637
+ --owo-ref-color-status-info-border: rgba(14, 165, 233, 0.20);
2638
+ --owo-ref-color-status-info-text: #0369a1;
2639
+ --owo-sys-theme-surface-canvas: var(--owo-ref-color-surface-canvas);
2640
+ --owo-sys-theme-surface-base: var(--owo-ref-color-surface-base);
2641
+ --owo-sys-theme-surface-subtle: var(--owo-ref-color-surface-subtle);
2642
+ --owo-sys-theme-surface-raised: var(--owo-ref-color-surface-raised);
2643
+ --owo-sys-theme-surface-inset: var(--owo-ref-color-surface-inset);
2644
+ --owo-sys-theme-surface-border: var(--owo-ref-color-surface-border);
2645
+ --owo-sys-theme-surface-border-muted: rgba(0, 0, 0, 0.06);
2646
+ --owo-sys-theme-surface-border-strong: var(--owo-ref-color-surface-ring);
2647
+ --owo-sys-theme-canvas-bg-subtle: #f5f5f4;
2648
+ --owo-sys-theme-surface-container: #f4f4f5;
2649
+ --owo-sys-theme-surface-container-high: #ececed;
2650
+ --owo-sys-theme-surface-container-highest: #e4e4e7;
2651
+ --owo-sys-theme-text-primary: var(--owo-ref-color-neutral-800);
2652
+ --owo-sys-theme-text-secondary: var(--owo-ref-color-neutral-600);
2653
+ --owo-sys-theme-text-muted: var(--owo-ref-color-neutral-500);
2654
+ --owo-sys-theme-text-on-accent: var(--owo-ref-color-text-on-brand);
2655
+ --owo-sys-theme-accent-bg: var(--owo-ref-color-brand-primary);
2656
+ --owo-sys-theme-accent-bg-hover: var(--owo-ref-color-brand-primary-hover);
2657
+ --owo-sys-theme-accent-bg-muted: color-mix(in srgb, #1a1a1a 10%, #ffffff);
2621
2658
  @supports (color: color-mix(in lab, red, red)) {
2622
- --theme-accent-bg-muted: color-mix(in srgb, var(--color-brand-primary) 10%, var(--color-surface-base));
2659
+ --owo-sys-theme-accent-bg-muted: color-mix(in srgb, var(--owo-ref-color-brand-primary) 10%, var(--owo-ref-color-surface-base));
2623
2660
  }
2624
- --theme-accent-border: color-mix(in srgb, #1a1a1a 40%, transparent);
2661
+ --owo-sys-theme-accent-border: color-mix(in srgb, #1a1a1a 40%, transparent);
2625
2662
  @supports (color: color-mix(in lab, red, red)) {
2626
- --theme-accent-border: color-mix(in srgb, var(--color-brand-primary) 40%, transparent);
2627
- }
2628
- --theme-success-bg: var(--color-admin-success-bg);
2629
- --theme-success-border: var(--color-admin-success-border);
2630
- --theme-success-text: var(--color-admin-success-text);
2631
- --theme-warning-bg: var(--color-admin-warning-bg);
2632
- --theme-warning-border: var(--color-admin-warning-border);
2633
- --theme-warning-text: var(--color-admin-warning-text);
2634
- --theme-danger-bg: var(--color-admin-danger-bg);
2635
- --theme-danger-bg-emphasis: rgba(239, 68, 68, 0.18);
2636
- --theme-danger-border: var(--color-admin-danger-border);
2637
- --theme-danger-text: var(--color-admin-danger-text);
2638
- --theme-info-bg: var(--color-admin-info-bg);
2639
- --theme-info-border: var(--color-admin-info-border);
2640
- --theme-info-text: var(--color-admin-info-text);
2641
- --theme-control-focus-ring: var(--color-surface-ring);
2642
- --theme-control-focus-ring-offset: var(--color-surface-base);
2663
+ --owo-sys-theme-accent-border: color-mix(in srgb, var(--owo-ref-color-brand-primary) 40%, transparent);
2664
+ }
2665
+ --owo-sys-theme-success-bg: var(--owo-ref-color-status-success-bg);
2666
+ --owo-sys-theme-success-border: var(--owo-ref-color-status-success-border);
2667
+ --owo-sys-theme-success-text: var(--owo-ref-color-status-success-text);
2668
+ --owo-sys-theme-warning-bg: var(--owo-ref-color-status-warning-bg);
2669
+ --owo-sys-theme-warning-border: var(--owo-ref-color-status-warning-border);
2670
+ --owo-sys-theme-warning-text: var(--owo-ref-color-status-warning-text);
2671
+ --owo-sys-theme-danger-bg: var(--owo-ref-color-status-danger-bg);
2672
+ --owo-sys-theme-danger-bg-emphasis: rgba(239, 68, 68, 0.18);
2673
+ --owo-sys-theme-danger-border: var(--owo-ref-color-status-danger-border);
2674
+ --owo-sys-theme-danger-text: var(--owo-ref-color-status-danger-text);
2675
+ --owo-sys-theme-info-bg: var(--owo-ref-color-status-info-bg);
2676
+ --owo-sys-theme-info-border: var(--owo-ref-color-status-info-border);
2677
+ --owo-sys-theme-info-text: var(--owo-ref-color-status-info-text);
2678
+ --owo-sys-theme-control-focus-ring: var(--owo-ref-color-surface-ring);
2679
+ --owo-sys-theme-control-focus-ring-offset: var(--owo-ref-color-surface-base);
2680
+ --owo-sys-theme-overlay-bg: var(--owo-ref-color-overlay-strong);
2643
2681
  }
2644
2682
  :root {
2645
- --preset-surface-bg: var(--theme-surface-base);
2646
- --preset-surface-bg-subtle: var(--theme-surface-subtle);
2647
- --preset-surface-bg-raised: var(--theme-surface-raised);
2648
- --preset-surface-bg-inset: var(--theme-surface-inset);
2649
- --preset-surface-border: var(--theme-surface-border);
2650
- --preset-surface-border-muted: var(--theme-surface-border-muted);
2651
- --preset-surface-border-strong: var(--theme-surface-border-strong);
2652
- --preset-surface-shadow: var(--shadow-raised);
2653
- --preset-surface-shadow-strong: var(--shadow-popover);
2654
- --preset-surface-blur: 0px;
2655
- --preset-canvas-bg: var(--theme-surface-canvas);
2656
- --preset-canvas-bg-subtle: var(--theme-canvas-bg-subtle);
2657
- --preset-surface-container: var(--theme-surface-container);
2658
- --preset-surface-container-high: var(--theme-surface-container-high);
2659
- --preset-surface-container-highest: var(--theme-surface-container-highest);
2660
- --preset-control-radius-sm: 0.5rem;
2661
- --preset-control-radius-md: 0.75rem;
2662
- --preset-control-radius-lg: 1rem;
2663
- --preset-control-radius-xl: 1.5rem;
2664
- --preset-control-radius-2xl: 2rem;
2665
- --preset-control-border-width: 1px;
2666
- --ui-surface-bg: var(--preset-surface-bg);
2667
- --ui-surface-bg-subtle: var(--preset-surface-bg-subtle);
2668
- --ui-surface-bg-raised: var(--preset-surface-bg-raised);
2669
- --ui-surface-bg-inset: var(--preset-surface-bg-inset);
2670
- --ui-surface-border: var(--preset-surface-border);
2671
- --ui-surface-border-muted: var(--preset-surface-border-muted);
2672
- --ui-surface-border-strong: var(--preset-surface-border-strong);
2673
- --ui-surface-shadow: var(--preset-surface-shadow);
2674
- --ui-surface-shadow-strong: var(--preset-surface-shadow-strong);
2675
- --ui-surface-blur: var(--preset-surface-blur);
2676
- --ui-canvas-bg: var(--preset-canvas-bg);
2677
- --ui-canvas-bg-subtle: var(--preset-canvas-bg-subtle);
2678
- --ui-surface-container: var(--preset-surface-container);
2679
- --ui-surface-container-high: var(--preset-surface-container-high);
2680
- --ui-surface-container-highest: var(--preset-surface-container-highest);
2681
- --ui-text-primary: var(--theme-text-primary);
2682
- --ui-text-secondary: var(--theme-text-secondary);
2683
- --ui-text-muted: var(--theme-text-muted);
2684
- --ui-text-on-accent: var(--theme-text-on-accent);
2685
- --ui-accent-bg: var(--theme-accent-bg);
2686
- --ui-accent-bg-hover: var(--theme-accent-bg-hover);
2687
- --ui-accent-bg-muted: var(--theme-accent-bg-muted);
2688
- --ui-accent-text: var(--theme-text-on-accent);
2689
- --ui-accent-border: var(--theme-accent-border);
2690
- --ui-success-bg: var(--theme-success-bg);
2691
- --ui-success-border: var(--theme-success-border);
2692
- --ui-success-text: var(--theme-success-text);
2693
- --ui-warning-bg: var(--theme-warning-bg);
2694
- --ui-warning-border: var(--theme-warning-border);
2695
- --ui-warning-text: var(--theme-warning-text);
2696
- --ui-danger-bg: var(--theme-danger-bg);
2697
- --ui-danger-bg-emphasis: var(--theme-danger-bg-emphasis);
2698
- --ui-danger-border: var(--theme-danger-border);
2699
- --ui-danger-text: var(--theme-danger-text);
2700
- --ui-info-bg: var(--theme-info-bg);
2701
- --ui-info-border: var(--theme-info-border);
2702
- --ui-info-text: var(--theme-info-text);
2703
- --ui-control-radius-sm: var(--preset-control-radius-sm);
2704
- --ui-control-radius-md: var(--preset-control-radius-md);
2705
- --ui-control-radius-lg: var(--preset-control-radius-lg);
2706
- --ui-control-radius-xl: var(--preset-control-radius-xl);
2707
- --ui-control-radius-2xl: var(--preset-control-radius-2xl);
2708
- --ui-control-border-width: var(--preset-control-border-width);
2709
- --ui-control-focus-ring: var(--theme-control-focus-ring);
2710
- --ui-control-focus-ring-offset: var(--theme-control-focus-ring-offset);
2711
- --ui-font-heading: var(--font-heading);
2712
- --ui-motion-duration-fast: 0.15s;
2713
- --ui-motion-duration-default: 0.2s;
2714
- --ui-motion-ease-standard: var(--ease-standard);
2715
- --ui-density-compact: 0.875;
2716
- --ui-density-default: 1;
2717
- --ui-density-comfortable: 1.125;
2683
+ --owo-sys-preset-surface-bg: var(--owo-sys-theme-surface-base);
2684
+ --owo-sys-preset-surface-bg-subtle: var(--owo-sys-theme-surface-subtle);
2685
+ --owo-sys-preset-surface-bg-raised: var(--owo-sys-theme-surface-raised);
2686
+ --owo-sys-preset-surface-bg-inset: var(--owo-sys-theme-surface-inset);
2687
+ --owo-sys-preset-surface-border: var(--owo-sys-theme-surface-border);
2688
+ --owo-sys-preset-surface-border-muted: var(--owo-sys-theme-surface-border-muted);
2689
+ --owo-sys-preset-surface-border-strong: var(--owo-sys-theme-surface-border-strong);
2690
+ --owo-sys-preset-surface-shadow: var(--owo-ref-shadow-raised);
2691
+ --owo-sys-preset-surface-shadow-strong: var(--owo-ref-shadow-popover);
2692
+ --owo-sys-preset-surface-blur: 0px;
2693
+ --owo-sys-preset-canvas-bg: var(--owo-sys-theme-surface-canvas);
2694
+ --owo-sys-preset-canvas-bg-subtle: var(--owo-sys-theme-canvas-bg-subtle);
2695
+ --owo-sys-preset-surface-container: var(--owo-sys-theme-surface-container);
2696
+ --owo-sys-preset-surface-container-high: var(--owo-sys-theme-surface-container-high);
2697
+ --owo-sys-preset-surface-container-highest: var(--owo-sys-theme-surface-container-highest);
2698
+ --owo-sys-preset-control-radius-sm: var(--owo-ref-radius-sm);
2699
+ --owo-sys-preset-control-radius-md: var(--owo-ref-radius-md);
2700
+ --owo-sys-preset-control-radius-lg: var(--owo-ref-radius-lg);
2701
+ --owo-sys-preset-control-radius-xl: var(--owo-ref-radius-xl);
2702
+ --owo-sys-preset-control-radius-2xl: var(--owo-ref-radius-2xl);
2703
+ --owo-sys-preset-control-radius-full: var(--owo-ref-radius-full);
2704
+ --owo-sys-preset-control-border-width: 1px;
2705
+ --owo-cmp-surface-bg: var(--owo-sys-preset-surface-bg);
2706
+ --owo-cmp-surface-bg-subtle: var(--owo-sys-preset-surface-bg-subtle);
2707
+ --owo-cmp-surface-bg-raised: var(--owo-sys-preset-surface-bg-raised);
2708
+ --owo-cmp-surface-bg-inset: var(--owo-sys-preset-surface-bg-inset);
2709
+ --owo-cmp-surface-border: var(--owo-sys-preset-surface-border);
2710
+ --owo-cmp-surface-border-muted: var(--owo-sys-preset-surface-border-muted);
2711
+ --owo-cmp-surface-border-strong: var(--owo-sys-preset-surface-border-strong);
2712
+ --owo-cmp-surface-shadow: var(--owo-sys-preset-surface-shadow);
2713
+ --owo-cmp-surface-shadow-strong: var(--owo-sys-preset-surface-shadow-strong);
2714
+ --owo-cmp-surface-blur: var(--owo-sys-preset-surface-blur);
2715
+ --owo-cmp-canvas-bg: var(--owo-sys-preset-canvas-bg);
2716
+ --owo-cmp-canvas-bg-subtle: var(--owo-sys-preset-canvas-bg-subtle);
2717
+ --owo-cmp-surface-container: var(--owo-sys-preset-surface-container);
2718
+ --owo-cmp-surface-container-high: var(--owo-sys-preset-surface-container-high);
2719
+ --owo-cmp-surface-container-highest: var(--owo-sys-preset-surface-container-highest);
2720
+ --owo-cmp-text-primary: var(--owo-sys-theme-text-primary);
2721
+ --owo-cmp-text-secondary: var(--owo-sys-theme-text-secondary);
2722
+ --owo-cmp-text-muted: var(--owo-sys-theme-text-muted);
2723
+ --owo-cmp-text-on-accent: var(--owo-sys-theme-text-on-accent);
2724
+ --owo-cmp-accent-bg: var(--owo-sys-theme-accent-bg);
2725
+ --owo-cmp-accent-bg-hover: var(--owo-sys-theme-accent-bg-hover);
2726
+ --owo-cmp-accent-bg-muted: var(--owo-sys-theme-accent-bg-muted);
2727
+ --owo-cmp-accent-text: var(--owo-sys-theme-text-on-accent);
2728
+ --owo-cmp-accent-border: var(--owo-sys-theme-accent-border);
2729
+ --owo-cmp-success-bg: var(--owo-sys-theme-success-bg);
2730
+ --owo-cmp-success-border: var(--owo-sys-theme-success-border);
2731
+ --owo-cmp-success-text: var(--owo-sys-theme-success-text);
2732
+ --owo-cmp-warning-bg: var(--owo-sys-theme-warning-bg);
2733
+ --owo-cmp-warning-border: var(--owo-sys-theme-warning-border);
2734
+ --owo-cmp-warning-text: var(--owo-sys-theme-warning-text);
2735
+ --owo-cmp-danger-bg: var(--owo-sys-theme-danger-bg);
2736
+ --owo-cmp-danger-bg-emphasis: var(--owo-sys-theme-danger-bg-emphasis);
2737
+ --owo-cmp-danger-border: var(--owo-sys-theme-danger-border);
2738
+ --owo-cmp-danger-text: var(--owo-sys-theme-danger-text);
2739
+ --owo-cmp-info-bg: var(--owo-sys-theme-info-bg);
2740
+ --owo-cmp-info-border: var(--owo-sys-theme-info-border);
2741
+ --owo-cmp-info-text: var(--owo-sys-theme-info-text);
2742
+ --owo-cmp-control-radius-sm: var(--owo-sys-preset-control-radius-sm);
2743
+ --owo-cmp-control-radius-md: var(--owo-sys-preset-control-radius-md);
2744
+ --owo-cmp-control-radius-lg: var(--owo-sys-preset-control-radius-lg);
2745
+ --owo-cmp-control-radius-xl: var(--owo-sys-preset-control-radius-xl);
2746
+ --owo-cmp-control-radius-2xl: var(--owo-sys-preset-control-radius-2xl);
2747
+ --owo-cmp-control-radius-full: var(--owo-sys-preset-control-radius-full);
2748
+ --owo-cmp-control-border-width: var(--owo-sys-preset-control-border-width);
2749
+ --owo-cmp-control-focus-ring: var(--owo-sys-theme-control-focus-ring);
2750
+ --owo-cmp-control-focus-ring-offset: var(--owo-sys-theme-control-focus-ring-offset);
2751
+ --owo-cmp-font-heading: var(--owo-ref-font-heading);
2752
+ --owo-cmp-motion-duration-fast: 0.15s;
2753
+ --owo-cmp-motion-duration-default: 0.2s;
2754
+ --owo-cmp-motion-ease-standard: var(--owo-ref-motion-ease-standard);
2755
+ --owo-cmp-motion-ease-decelerate: var(--owo-ref-motion-ease-decelerate);
2756
+ --owo-cmp-motion-ease-accelerate: var(--owo-ref-motion-ease-accelerate);
2757
+ --owo-cmp-density-compact: 0.875;
2758
+ --owo-cmp-density-default: 1;
2759
+ --owo-cmp-density-comfortable: 1.125;
2760
+ --owo-cmp-overlay-bg: var(--owo-sys-theme-overlay-bg);
2761
+ --owo-cmp-z-dropdown: 1000;
2762
+ --owo-cmp-z-modal: 1100;
2763
+ --owo-cmp-z-toast: 1200;
2718
2764
  --content-min-width: 320px;
2719
2765
  --content-preferred-width: 70vw;
2720
2766
  --content-max-width: 960px;
2721
2767
  --content-width: clamp(600px, 70vw, 960px);
2722
2768
  --content-padding: 24px;
2723
2769
  --header-top-margin: 64px;
2724
- --publish-trigger-bg: var(--ui-surface-bg-subtle);
2725
- --publish-trigger-border: var(--ui-surface-border);
2726
- --publish-trigger-text: var(--ui-text-primary);
2727
- --publish-trigger-active-bg: var(--ui-accent-bg-muted);
2728
- --publish-popover-bg: var(--ui-surface-bg);
2729
- --publish-popover-border: var(--ui-surface-border);
2730
- --publish-popover-shadow: var(--ui-surface-shadow-strong);
2731
- --publish-section-bg: var(--ui-surface-bg-subtle);
2732
- --publish-section-border: var(--ui-surface-border);
2733
- --publish-fact-title: var(--ui-text-secondary);
2734
- --publish-fact-value: var(--color-n900);
2735
- --publish-muted-text: var(--ui-text-secondary);
2736
- --publish-warning-bg: var(--ui-warning-bg);
2737
- --publish-warning-border: var(--ui-warning-border);
2738
- --publish-warning-text: var(--ui-warning-text);
2739
- --publish-danger-bg: var(--ui-danger-bg);
2740
- --publish-danger-border: var(--ui-danger-border);
2741
- --publish-danger-text: var(--ui-danger-text);
2742
- --publish-success-bg: var(--ui-success-bg);
2743
- --publish-success-border: var(--ui-success-border);
2744
- --publish-success-text: var(--ui-success-text);
2745
- --publish-progress-track: var(--ui-surface-bg-inset);
2746
- --publish-progress-fill: var(--ui-accent-bg);
2747
- --feedback-neutral-bg: var(--ui-surface-bg-raised);
2748
- --feedback-neutral-border: var(--ui-surface-border);
2749
- --feedback-neutral-text: var(--ui-text-primary);
2750
- --feedback-neutral-icon: var(--ui-text-secondary);
2751
- --feedback-info-bg: var(--ui-info-bg);
2752
- --feedback-info-border: var(--ui-info-border);
2753
- --feedback-info-text: var(--ui-info-text);
2754
- --feedback-info-icon: var(--ui-info-text);
2755
- --feedback-success-bg: var(--ui-success-bg);
2756
- --feedback-success-border: var(--ui-success-border);
2757
- --feedback-success-text: var(--ui-success-text);
2758
- --feedback-success-icon: var(--ui-success-text);
2759
- --feedback-warning-bg: var(--ui-warning-bg);
2760
- --feedback-warning-border: var(--ui-warning-border);
2761
- --feedback-warning-text: var(--ui-warning-text);
2762
- --feedback-warning-icon: var(--ui-warning-text);
2763
- --feedback-danger-bg: var(--ui-danger-bg);
2764
- --feedback-danger-border: var(--ui-danger-border);
2765
- --feedback-danger-text: var(--ui-danger-text);
2766
- --feedback-danger-icon: var(--ui-danger-text);
2767
- --toast-shadow: var(--ui-surface-shadow-strong);
2770
+ --publish-trigger-bg: var(--owo-cmp-surface-bg-subtle);
2771
+ --publish-trigger-border: var(--owo-cmp-surface-border);
2772
+ --publish-trigger-text: var(--owo-cmp-text-primary);
2773
+ --publish-trigger-active-bg: var(--owo-cmp-accent-bg-muted);
2774
+ --publish-popover-bg: var(--owo-cmp-surface-bg);
2775
+ --publish-popover-border: var(--owo-cmp-surface-border);
2776
+ --publish-popover-shadow: var(--owo-cmp-surface-shadow-strong);
2777
+ --publish-section-bg: var(--owo-cmp-surface-bg-subtle);
2778
+ --publish-section-border: var(--owo-cmp-surface-border);
2779
+ --publish-fact-title: var(--owo-cmp-text-secondary);
2780
+ --publish-fact-value: var(--owo-ref-color-neutral-900);
2781
+ --publish-muted-text: var(--owo-cmp-text-secondary);
2782
+ --publish-warning-bg: var(--owo-cmp-warning-bg);
2783
+ --publish-warning-border: var(--owo-cmp-warning-border);
2784
+ --publish-warning-text: var(--owo-cmp-warning-text);
2785
+ --publish-danger-bg: var(--owo-cmp-danger-bg);
2786
+ --publish-danger-border: var(--owo-cmp-danger-border);
2787
+ --publish-danger-text: var(--owo-cmp-danger-text);
2788
+ --publish-success-bg: var(--owo-cmp-success-bg);
2789
+ --publish-success-border: var(--owo-cmp-success-border);
2790
+ --publish-success-text: var(--owo-cmp-success-text);
2791
+ --publish-progress-track: var(--owo-cmp-surface-bg-inset);
2792
+ --publish-progress-fill: var(--owo-cmp-accent-bg);
2793
+ --feedback-neutral-bg: var(--owo-cmp-surface-bg-raised);
2794
+ --feedback-neutral-border: var(--owo-cmp-surface-border);
2795
+ --feedback-neutral-text: var(--owo-cmp-text-primary);
2796
+ --feedback-neutral-icon: var(--owo-cmp-text-secondary);
2797
+ --feedback-info-bg: var(--owo-cmp-info-bg);
2798
+ --feedback-info-border: var(--owo-cmp-info-border);
2799
+ --feedback-info-text: var(--owo-cmp-info-text);
2800
+ --feedback-info-icon: var(--owo-cmp-info-text);
2801
+ --feedback-success-bg: var(--owo-cmp-success-bg);
2802
+ --feedback-success-border: var(--owo-cmp-success-border);
2803
+ --feedback-success-text: var(--owo-cmp-success-text);
2804
+ --feedback-success-icon: var(--owo-cmp-success-text);
2805
+ --feedback-warning-bg: var(--owo-cmp-warning-bg);
2806
+ --feedback-warning-border: var(--owo-cmp-warning-border);
2807
+ --feedback-warning-text: var(--owo-cmp-warning-text);
2808
+ --feedback-warning-icon: var(--owo-cmp-warning-text);
2809
+ --feedback-danger-bg: var(--owo-cmp-danger-bg);
2810
+ --feedback-danger-border: var(--owo-cmp-danger-border);
2811
+ --feedback-danger-text: var(--owo-cmp-danger-text);
2812
+ --feedback-danger-icon: var(--owo-cmp-danger-text);
2813
+ --toast-shadow: var(--owo-cmp-surface-shadow-strong);
2768
2814
  --skeleton-bg: linear-gradient(
2769
2815
  180deg,
2770
- var(--ui-surface-bg-inset) 0%,
2771
- var(--ui-surface-bg-inset) 100%
2816
+ var(--owo-cmp-surface-bg-inset) 0%,
2817
+ var(--owo-cmp-surface-bg-inset) 100%
2772
2818
  );
2773
2819
  @supports (color: color-mix(in lab, red, red)) {
2774
2820
  --skeleton-bg: linear-gradient(
2775
2821
  180deg,
2776
- color-mix(in srgb, var(--ui-surface-bg-inset) 94%, white) 0%,
2777
- color-mix(in srgb, var(--ui-surface-bg-inset) 100%, var(--ui-surface-border)) 100%
2822
+ color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 94%, white) 0%,
2823
+ color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 100%, var(--owo-cmp-surface-border)) 100%
2778
2824
  );
2779
2825
  }
2780
2826
  --skeleton-bg-emphasis: linear-gradient(
2781
2827
  180deg,
2782
- var(--ui-surface-bg-subtle) 0%,
2783
- var(--ui-surface-bg-inset) 100%
2828
+ var(--owo-cmp-surface-bg-subtle) 0%,
2829
+ var(--owo-cmp-surface-bg-inset) 100%
2784
2830
  );
2785
2831
  @supports (color: color-mix(in lab, red, red)) {
2786
2832
  --skeleton-bg-emphasis: linear-gradient(
2787
2833
  180deg,
2788
- color-mix(in srgb, var(--ui-surface-bg-subtle) 78%, var(--color-highlight-soft)) 0%,
2789
- color-mix(in srgb, var(--ui-surface-bg-inset) 86%, var(--ui-surface-border)) 100%
2834
+ color-mix(in srgb, var(--owo-cmp-surface-bg-subtle) 78%, var(--owo-ref-color-highlight-soft)) 0%,
2835
+ color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 86%, var(--owo-cmp-surface-border)) 100%
2790
2836
  );
2791
2837
  }
2792
2838
  --skeleton-sheen: linear-gradient(
@@ -2794,7 +2840,7 @@
2794
2840
  transparent 0%,
2795
2841
  color-mix(in srgb, rgba(255, 255, 255, 0.34) 10%, transparent) 28%,
2796
2842
  color-mix(in srgb, rgba(255, 255, 255, 0.34) 35%, transparent) 40%,
2797
- var(--color-highlight-sheen) 50%,
2843
+ var(--owo-ref-color-highlight-sheen) 50%,
2798
2844
  color-mix(in srgb, rgba(255, 255, 255, 0.34) 35%, transparent) 60%,
2799
2845
  color-mix(in srgb, rgba(255, 255, 255, 0.34) 10%, transparent) 72%,
2800
2846
  transparent 100%
@@ -2803,253 +2849,261 @@
2803
2849
  --skeleton-sheen: linear-gradient(
2804
2850
  100deg,
2805
2851
  transparent 0%,
2806
- color-mix(in srgb, var(--color-highlight-sheen) 10%, transparent) 28%,
2807
- color-mix(in srgb, var(--color-highlight-sheen) 35%, transparent) 40%,
2808
- var(--color-highlight-sheen) 50%,
2809
- color-mix(in srgb, var(--color-highlight-sheen) 35%, transparent) 60%,
2810
- color-mix(in srgb, var(--color-highlight-sheen) 10%, transparent) 72%,
2852
+ color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 28%,
2853
+ color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 40%,
2854
+ var(--owo-ref-color-highlight-sheen) 50%,
2855
+ color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 60%,
2856
+ color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 72%,
2811
2857
  transparent 100%
2812
2858
  );
2813
2859
  }
2814
- --skeleton-top-highlight: var(--color-highlight-soft);
2815
- --workspace-transition-veil-bg: var(--color-overlay-soft);
2860
+ --skeleton-top-highlight: var(--owo-ref-color-highlight-soft);
2861
+ --workspace-transition-veil-bg: var(--owo-ref-color-overlay-soft);
2816
2862
  --workspace-transition-stale-bg: color-mix(in srgb, rgba(244, 238, 230, 0.56) 72%, transparent);
2817
2863
  @supports (color: color-mix(in lab, red, red)) {
2818
- --workspace-transition-stale-bg: color-mix(in srgb, var(--color-overlay-soft) 72%, transparent);
2864
+ --workspace-transition-stale-bg: color-mix(in srgb, var(--owo-ref-color-overlay-soft) 72%, transparent);
2819
2865
  }
2820
- --tooltip-shadow: var(--ui-surface-shadow-strong);
2821
- --select-dropdown-shadow: var(--ui-surface-shadow-strong);
2822
- --theme-picker-shadow: var(--ui-surface-shadow-strong);
2823
- --drawer-panel-shadow: var(--ui-surface-shadow-strong);
2866
+ --tooltip-shadow: var(--owo-cmp-surface-shadow-strong);
2867
+ --select-dropdown-shadow: var(--owo-cmp-surface-shadow-strong);
2868
+ --drawer-panel-shadow: var(--owo-cmp-surface-shadow-strong);
2824
2869
  }
2825
2870
  :root[data-theme="dark"], .owoui-theme-dark {
2826
- --color-n900: #fafafa;
2827
- --color-n800: #e4e4e7;
2828
- --color-n700: #d4d4d8;
2829
- --color-n600: #a1a1aa;
2830
- --color-n500: #71717a;
2831
- --color-n400: #3f3f46;
2832
- --color-n300: #27272a;
2833
- --color-brand-primary: #c6c6c7;
2834
- --color-brand-primary-hover: #d4d4d8;
2835
- --color-brand-accent: #a1a1aa;
2836
- --color-surface-canvas: #0e0e0e;
2837
- --color-surface-base: #18181b;
2838
- --color-surface-subtle: #1c1c1f;
2839
- --color-surface-raised: #27272a;
2840
- --color-surface-inset: #111113;
2841
- --color-surface-border: rgba(255, 255, 255, 0.12);
2842
- --color-surface-ring: rgba(255, 255, 255, 0.24);
2843
- --color-surface-overlay: rgba(0, 0, 0, 0.6);
2844
- --color-overlay-soft: rgba(0, 0, 0, 0.32);
2845
- --color-overlay-strong: rgba(0, 0, 0, 0.56);
2846
- --color-highlight-soft: rgba(255, 255, 255, 0.06);
2847
- --color-highlight-sheen: rgba(255, 255, 255, 0.08);
2848
- --color-text-on-brand: #1a1a1a;
2849
- --color-code-block-bg: #1e1e22;
2850
- --color-code-block-border: #2d2d32;
2851
- --color-code-block-divider: #27272c;
2852
- --color-code-inline-bg: #27272a;
2853
- --color-admin-success-bg: rgba(16, 185, 129, 0.15);
2854
- --color-admin-success-border: rgba(16, 185, 129, 0.3);
2855
- --color-admin-success-text: #6ee7b7;
2856
- --color-admin-warning-bg: rgba(245, 158, 11, 0.15);
2857
- --color-admin-warning-border: rgba(245, 158, 11, 0.3);
2858
- --color-admin-warning-text: #fbbf24;
2859
- --color-admin-danger-bg: rgba(239, 68, 68, 0.15);
2860
- --color-admin-danger-border: rgba(239, 68, 68, 0.3);
2861
- --color-admin-danger-text: #fca5a5;
2862
- --color-admin-info-bg: rgba(14, 165, 233, 0.15);
2863
- --color-admin-info-border: rgba(14, 165, 233, 0.3);
2864
- --color-admin-info-text: #7dd3fc;
2865
- --theme-surface-canvas: var(--color-surface-canvas);
2866
- --theme-surface-base: var(--color-surface-base);
2867
- --theme-surface-subtle: var(--color-surface-subtle);
2868
- --theme-surface-raised: var(--color-surface-raised);
2869
- --theme-surface-inset: var(--color-surface-inset);
2870
- --theme-surface-border: var(--color-surface-border);
2871
- --theme-surface-border-muted: rgba(255, 255, 255, 0.06);
2872
- --theme-surface-border-strong: var(--color-surface-ring);
2873
- --theme-canvas-bg-subtle: #0f0f11;
2874
- --theme-surface-container: #1e1e22;
2875
- --theme-surface-container-high: #252529;
2876
- --theme-surface-container-highest: #2d2d32;
2877
- --theme-text-primary: var(--color-n800);
2878
- --theme-text-secondary: var(--color-n600);
2879
- --theme-text-muted: var(--color-n500);
2880
- --theme-text-on-accent: var(--color-text-on-brand);
2881
- --theme-accent-bg: var(--color-brand-primary);
2882
- --theme-accent-bg-hover: var(--color-brand-primary-hover);
2883
- --theme-accent-bg-muted: color-mix(in srgb, #1a1a1a 14%, #ffffff);
2871
+ --owo-ref-color-neutral-900: #fafafa;
2872
+ --owo-ref-color-neutral-800: #e4e4e7;
2873
+ --owo-ref-color-neutral-700: #d4d4d8;
2874
+ --owo-ref-color-neutral-600: #a1a1aa;
2875
+ --owo-ref-color-neutral-500: #71717a;
2876
+ --owo-ref-color-neutral-400: #3f3f46;
2877
+ --owo-ref-color-neutral-300: #27272a;
2878
+ --owo-ref-color-brand-primary: #c6c6c7;
2879
+ --owo-ref-color-brand-primary-hover: #d4d4d8;
2880
+ --owo-ref-color-brand-accent: #a1a1aa;
2881
+ --owo-ref-color-surface-canvas: #0e0e0e;
2882
+ --owo-ref-color-surface-base: #18181b;
2883
+ --owo-ref-color-surface-subtle: #1c1c1f;
2884
+ --owo-ref-color-surface-raised: #27272a;
2885
+ --owo-ref-color-surface-inset: #111113;
2886
+ --owo-ref-color-surface-border: rgba(255, 255, 255, 0.12);
2887
+ --owo-ref-color-surface-ring: rgba(255, 255, 255, 0.24);
2888
+ --owo-ref-color-surface-overlay: rgba(0, 0, 0, 0.6);
2889
+ --owo-ref-color-overlay-soft: rgba(0, 0, 0, 0.32);
2890
+ --owo-ref-color-overlay-strong: rgba(0, 0, 0, 0.56);
2891
+ --owo-ref-color-highlight-soft: rgba(255, 255, 255, 0.06);
2892
+ --owo-ref-color-highlight-sheen: rgba(255, 255, 255, 0.08);
2893
+ --owo-ref-color-text-on-brand: #1a1a1a;
2894
+ --owo-ref-color-code-block-bg: #1e1e22;
2895
+ --owo-ref-color-code-block-border: #2d2d32;
2896
+ --owo-ref-color-code-block-divider: #27272c;
2897
+ --owo-ref-color-code-inline-bg: #27272a;
2898
+ --owo-ref-color-status-success-bg: rgba(16, 185, 129, 0.15);
2899
+ --owo-ref-color-status-success-border: rgba(16, 185, 129, 0.3);
2900
+ --owo-ref-color-status-success-text: #6ee7b7;
2901
+ --owo-ref-color-status-warning-bg: rgba(245, 158, 11, 0.15);
2902
+ --owo-ref-color-status-warning-border: rgba(245, 158, 11, 0.3);
2903
+ --owo-ref-color-status-warning-text: #fbbf24;
2904
+ --owo-ref-color-status-danger-bg: rgba(239, 68, 68, 0.15);
2905
+ --owo-ref-color-status-danger-border: rgba(239, 68, 68, 0.3);
2906
+ --owo-ref-color-status-danger-text: #fca5a5;
2907
+ --owo-ref-color-status-info-bg: rgba(14, 165, 233, 0.15);
2908
+ --owo-ref-color-status-info-border: rgba(14, 165, 233, 0.3);
2909
+ --owo-ref-color-status-info-text: #7dd3fc;
2910
+ --owo-sys-theme-surface-canvas: var(--owo-ref-color-surface-canvas);
2911
+ --owo-sys-theme-surface-base: var(--owo-ref-color-surface-base);
2912
+ --owo-sys-theme-surface-subtle: var(--owo-ref-color-surface-subtle);
2913
+ --owo-sys-theme-surface-raised: var(--owo-ref-color-surface-raised);
2914
+ --owo-sys-theme-surface-inset: var(--owo-ref-color-surface-inset);
2915
+ --owo-sys-theme-surface-border: var(--owo-ref-color-surface-border);
2916
+ --owo-sys-theme-surface-border-muted: rgba(255, 255, 255, 0.06);
2917
+ --owo-sys-theme-surface-border-strong: var(--owo-ref-color-surface-ring);
2918
+ --owo-sys-theme-canvas-bg-subtle: #0f0f11;
2919
+ --owo-sys-theme-surface-container: #1e1e22;
2920
+ --owo-sys-theme-surface-container-high: #252529;
2921
+ --owo-sys-theme-surface-container-highest: #2d2d32;
2922
+ --owo-sys-theme-text-primary: var(--owo-ref-color-neutral-800);
2923
+ --owo-sys-theme-text-secondary: var(--owo-ref-color-neutral-600);
2924
+ --owo-sys-theme-text-muted: var(--owo-ref-color-neutral-500);
2925
+ --owo-sys-theme-text-on-accent: var(--owo-ref-color-text-on-brand);
2926
+ --owo-sys-theme-accent-bg: var(--owo-ref-color-brand-primary);
2927
+ --owo-sys-theme-accent-bg-hover: var(--owo-ref-color-brand-primary-hover);
2928
+ --owo-sys-theme-accent-bg-muted: color-mix(in srgb, #1a1a1a 14%, #ffffff);
2884
2929
  @supports (color: color-mix(in lab, red, red)) {
2885
- --theme-accent-bg-muted: color-mix(in srgb, var(--color-brand-primary) 14%, var(--color-surface-base));
2930
+ --owo-sys-theme-accent-bg-muted: color-mix(in srgb, var(--owo-ref-color-brand-primary) 14%, var(--owo-ref-color-surface-base));
2886
2931
  }
2887
- --theme-accent-border: color-mix(in srgb, #1a1a1a 50%, transparent);
2932
+ --owo-sys-theme-accent-border: color-mix(in srgb, #1a1a1a 50%, transparent);
2888
2933
  @supports (color: color-mix(in lab, red, red)) {
2889
- --theme-accent-border: color-mix(in srgb, var(--color-brand-primary) 50%, transparent);
2890
- }
2891
- --theme-success-bg: var(--color-admin-success-bg);
2892
- --theme-success-border: var(--color-admin-success-border);
2893
- --theme-success-text: var(--color-admin-success-text);
2894
- --theme-warning-bg: var(--color-admin-warning-bg);
2895
- --theme-warning-border: var(--color-admin-warning-border);
2896
- --theme-warning-text: var(--color-admin-warning-text);
2897
- --theme-danger-bg: var(--color-admin-danger-bg);
2898
- --theme-danger-bg-emphasis: rgba(239, 68, 68, 0.24);
2899
- --theme-danger-border: var(--color-admin-danger-border);
2900
- --theme-danger-text: var(--color-admin-danger-text);
2901
- --theme-info-bg: var(--color-admin-info-bg);
2902
- --theme-info-border: var(--color-admin-info-border);
2903
- --theme-info-text: var(--color-admin-info-text);
2904
- --theme-control-focus-ring: var(--color-surface-ring);
2905
- --theme-control-focus-ring-offset: var(--color-surface-base);
2934
+ --owo-sys-theme-accent-border: color-mix(in srgb, var(--owo-ref-color-brand-primary) 50%, transparent);
2935
+ }
2936
+ --owo-sys-theme-success-bg: var(--owo-ref-color-status-success-bg);
2937
+ --owo-sys-theme-success-border: var(--owo-ref-color-status-success-border);
2938
+ --owo-sys-theme-success-text: var(--owo-ref-color-status-success-text);
2939
+ --owo-sys-theme-warning-bg: var(--owo-ref-color-status-warning-bg);
2940
+ --owo-sys-theme-warning-border: var(--owo-ref-color-status-warning-border);
2941
+ --owo-sys-theme-warning-text: var(--owo-ref-color-status-warning-text);
2942
+ --owo-sys-theme-danger-bg: var(--owo-ref-color-status-danger-bg);
2943
+ --owo-sys-theme-danger-bg-emphasis: rgba(239, 68, 68, 0.24);
2944
+ --owo-sys-theme-danger-border: var(--owo-ref-color-status-danger-border);
2945
+ --owo-sys-theme-danger-text: var(--owo-ref-color-status-danger-text);
2946
+ --owo-sys-theme-info-bg: var(--owo-ref-color-status-info-bg);
2947
+ --owo-sys-theme-info-border: var(--owo-ref-color-status-info-border);
2948
+ --owo-sys-theme-info-text: var(--owo-ref-color-status-info-text);
2949
+ --owo-sys-theme-control-focus-ring: var(--owo-ref-color-surface-ring);
2950
+ --owo-sys-theme-control-focus-ring-offset: var(--owo-ref-color-surface-base);
2951
+ --owo-sys-theme-overlay-bg: var(--owo-ref-color-overlay-strong);
2906
2952
  }
2907
2953
  :root {
2908
- --preset-surface-bg: var(--theme-surface-base);
2909
- --preset-surface-bg-subtle: var(--theme-surface-subtle);
2910
- --preset-surface-bg-raised: var(--theme-surface-raised);
2911
- --preset-surface-bg-inset: var(--theme-surface-inset);
2912
- --preset-surface-border: var(--theme-surface-border);
2913
- --preset-surface-border-muted: var(--theme-surface-border-muted);
2914
- --preset-surface-border-strong: var(--theme-surface-border-strong);
2915
- --preset-surface-shadow: var(--shadow-raised);
2916
- --preset-surface-shadow-strong: var(--shadow-popover);
2917
- --preset-surface-blur: 0px;
2918
- --preset-canvas-bg: var(--theme-surface-canvas);
2919
- --preset-canvas-bg-subtle: var(--theme-canvas-bg-subtle);
2920
- --preset-surface-container: var(--theme-surface-container);
2921
- --preset-surface-container-high: var(--theme-surface-container-high);
2922
- --preset-surface-container-highest: var(--theme-surface-container-highest);
2923
- --preset-control-radius-sm: 0.5rem;
2924
- --preset-control-radius-md: 0.75rem;
2925
- --preset-control-radius-lg: 1rem;
2926
- --preset-control-radius-xl: 1.5rem;
2927
- --preset-control-radius-2xl: 2rem;
2928
- --preset-control-border-width: 1px;
2929
- --ui-surface-bg: var(--preset-surface-bg);
2930
- --ui-surface-bg-subtle: var(--preset-surface-bg-subtle);
2931
- --ui-surface-bg-raised: var(--preset-surface-bg-raised);
2932
- --ui-surface-bg-inset: var(--preset-surface-bg-inset);
2933
- --ui-surface-border: var(--preset-surface-border);
2934
- --ui-surface-border-muted: var(--preset-surface-border-muted);
2935
- --ui-surface-border-strong: var(--preset-surface-border-strong);
2936
- --ui-surface-shadow: var(--preset-surface-shadow);
2937
- --ui-surface-shadow-strong: var(--preset-surface-shadow-strong);
2938
- --ui-surface-blur: var(--preset-surface-blur);
2939
- --ui-canvas-bg: var(--preset-canvas-bg);
2940
- --ui-canvas-bg-subtle: var(--preset-canvas-bg-subtle);
2941
- --ui-surface-container: var(--preset-surface-container);
2942
- --ui-surface-container-high: var(--preset-surface-container-high);
2943
- --ui-surface-container-highest: var(--preset-surface-container-highest);
2944
- --ui-text-primary: var(--theme-text-primary);
2945
- --ui-text-secondary: var(--theme-text-secondary);
2946
- --ui-text-muted: var(--theme-text-muted);
2947
- --ui-text-on-accent: var(--theme-text-on-accent);
2948
- --ui-accent-bg: var(--theme-accent-bg);
2949
- --ui-accent-bg-hover: var(--theme-accent-bg-hover);
2950
- --ui-accent-bg-muted: var(--theme-accent-bg-muted);
2951
- --ui-accent-text: var(--theme-text-on-accent);
2952
- --ui-accent-border: var(--theme-accent-border);
2953
- --ui-success-bg: var(--theme-success-bg);
2954
- --ui-success-border: var(--theme-success-border);
2955
- --ui-success-text: var(--theme-success-text);
2956
- --ui-warning-bg: var(--theme-warning-bg);
2957
- --ui-warning-border: var(--theme-warning-border);
2958
- --ui-warning-text: var(--theme-warning-text);
2959
- --ui-danger-bg: var(--theme-danger-bg);
2960
- --ui-danger-bg-emphasis: var(--theme-danger-bg-emphasis);
2961
- --ui-danger-border: var(--theme-danger-border);
2962
- --ui-danger-text: var(--theme-danger-text);
2963
- --ui-info-bg: var(--theme-info-bg);
2964
- --ui-info-border: var(--theme-info-border);
2965
- --ui-info-text: var(--theme-info-text);
2966
- --ui-control-radius-sm: var(--preset-control-radius-sm);
2967
- --ui-control-radius-md: var(--preset-control-radius-md);
2968
- --ui-control-radius-lg: var(--preset-control-radius-lg);
2969
- --ui-control-radius-xl: var(--preset-control-radius-xl);
2970
- --ui-control-radius-2xl: var(--preset-control-radius-2xl);
2971
- --ui-control-border-width: var(--preset-control-border-width);
2972
- --ui-control-focus-ring: var(--theme-control-focus-ring);
2973
- --ui-control-focus-ring-offset: var(--theme-control-focus-ring-offset);
2974
- --ui-font-heading: var(--font-heading);
2975
- --ui-motion-duration-fast: 0.15s;
2976
- --ui-motion-duration-default: 0.2s;
2977
- --ui-motion-ease-standard: var(--ease-standard);
2978
- --ui-density-compact: 0.875;
2979
- --ui-density-default: 1;
2980
- --ui-density-comfortable: 1.125;
2954
+ --owo-sys-preset-surface-bg: var(--owo-sys-theme-surface-base);
2955
+ --owo-sys-preset-surface-bg-subtle: var(--owo-sys-theme-surface-subtle);
2956
+ --owo-sys-preset-surface-bg-raised: var(--owo-sys-theme-surface-raised);
2957
+ --owo-sys-preset-surface-bg-inset: var(--owo-sys-theme-surface-inset);
2958
+ --owo-sys-preset-surface-border: var(--owo-sys-theme-surface-border);
2959
+ --owo-sys-preset-surface-border-muted: var(--owo-sys-theme-surface-border-muted);
2960
+ --owo-sys-preset-surface-border-strong: var(--owo-sys-theme-surface-border-strong);
2961
+ --owo-sys-preset-surface-shadow: var(--owo-ref-shadow-raised);
2962
+ --owo-sys-preset-surface-shadow-strong: var(--owo-ref-shadow-popover);
2963
+ --owo-sys-preset-surface-blur: 0px;
2964
+ --owo-sys-preset-canvas-bg: var(--owo-sys-theme-surface-canvas);
2965
+ --owo-sys-preset-canvas-bg-subtle: var(--owo-sys-theme-canvas-bg-subtle);
2966
+ --owo-sys-preset-surface-container: var(--owo-sys-theme-surface-container);
2967
+ --owo-sys-preset-surface-container-high: var(--owo-sys-theme-surface-container-high);
2968
+ --owo-sys-preset-surface-container-highest: var(--owo-sys-theme-surface-container-highest);
2969
+ --owo-sys-preset-control-radius-sm: var(--owo-ref-radius-sm);
2970
+ --owo-sys-preset-control-radius-md: var(--owo-ref-radius-md);
2971
+ --owo-sys-preset-control-radius-lg: var(--owo-ref-radius-lg);
2972
+ --owo-sys-preset-control-radius-xl: var(--owo-ref-radius-xl);
2973
+ --owo-sys-preset-control-radius-2xl: var(--owo-ref-radius-2xl);
2974
+ --owo-sys-preset-control-radius-full: var(--owo-ref-radius-full);
2975
+ --owo-sys-preset-control-border-width: 1px;
2976
+ --owo-cmp-surface-bg: var(--owo-sys-preset-surface-bg);
2977
+ --owo-cmp-surface-bg-subtle: var(--owo-sys-preset-surface-bg-subtle);
2978
+ --owo-cmp-surface-bg-raised: var(--owo-sys-preset-surface-bg-raised);
2979
+ --owo-cmp-surface-bg-inset: var(--owo-sys-preset-surface-bg-inset);
2980
+ --owo-cmp-surface-border: var(--owo-sys-preset-surface-border);
2981
+ --owo-cmp-surface-border-muted: var(--owo-sys-preset-surface-border-muted);
2982
+ --owo-cmp-surface-border-strong: var(--owo-sys-preset-surface-border-strong);
2983
+ --owo-cmp-surface-shadow: var(--owo-sys-preset-surface-shadow);
2984
+ --owo-cmp-surface-shadow-strong: var(--owo-sys-preset-surface-shadow-strong);
2985
+ --owo-cmp-surface-blur: var(--owo-sys-preset-surface-blur);
2986
+ --owo-cmp-canvas-bg: var(--owo-sys-preset-canvas-bg);
2987
+ --owo-cmp-canvas-bg-subtle: var(--owo-sys-preset-canvas-bg-subtle);
2988
+ --owo-cmp-surface-container: var(--owo-sys-preset-surface-container);
2989
+ --owo-cmp-surface-container-high: var(--owo-sys-preset-surface-container-high);
2990
+ --owo-cmp-surface-container-highest: var(--owo-sys-preset-surface-container-highest);
2991
+ --owo-cmp-text-primary: var(--owo-sys-theme-text-primary);
2992
+ --owo-cmp-text-secondary: var(--owo-sys-theme-text-secondary);
2993
+ --owo-cmp-text-muted: var(--owo-sys-theme-text-muted);
2994
+ --owo-cmp-text-on-accent: var(--owo-sys-theme-text-on-accent);
2995
+ --owo-cmp-accent-bg: var(--owo-sys-theme-accent-bg);
2996
+ --owo-cmp-accent-bg-hover: var(--owo-sys-theme-accent-bg-hover);
2997
+ --owo-cmp-accent-bg-muted: var(--owo-sys-theme-accent-bg-muted);
2998
+ --owo-cmp-accent-text: var(--owo-sys-theme-text-on-accent);
2999
+ --owo-cmp-accent-border: var(--owo-sys-theme-accent-border);
3000
+ --owo-cmp-success-bg: var(--owo-sys-theme-success-bg);
3001
+ --owo-cmp-success-border: var(--owo-sys-theme-success-border);
3002
+ --owo-cmp-success-text: var(--owo-sys-theme-success-text);
3003
+ --owo-cmp-warning-bg: var(--owo-sys-theme-warning-bg);
3004
+ --owo-cmp-warning-border: var(--owo-sys-theme-warning-border);
3005
+ --owo-cmp-warning-text: var(--owo-sys-theme-warning-text);
3006
+ --owo-cmp-danger-bg: var(--owo-sys-theme-danger-bg);
3007
+ --owo-cmp-danger-bg-emphasis: var(--owo-sys-theme-danger-bg-emphasis);
3008
+ --owo-cmp-danger-border: var(--owo-sys-theme-danger-border);
3009
+ --owo-cmp-danger-text: var(--owo-sys-theme-danger-text);
3010
+ --owo-cmp-info-bg: var(--owo-sys-theme-info-bg);
3011
+ --owo-cmp-info-border: var(--owo-sys-theme-info-border);
3012
+ --owo-cmp-info-text: var(--owo-sys-theme-info-text);
3013
+ --owo-cmp-control-radius-sm: var(--owo-sys-preset-control-radius-sm);
3014
+ --owo-cmp-control-radius-md: var(--owo-sys-preset-control-radius-md);
3015
+ --owo-cmp-control-radius-lg: var(--owo-sys-preset-control-radius-lg);
3016
+ --owo-cmp-control-radius-xl: var(--owo-sys-preset-control-radius-xl);
3017
+ --owo-cmp-control-radius-2xl: var(--owo-sys-preset-control-radius-2xl);
3018
+ --owo-cmp-control-radius-full: var(--owo-sys-preset-control-radius-full);
3019
+ --owo-cmp-control-border-width: var(--owo-sys-preset-control-border-width);
3020
+ --owo-cmp-control-focus-ring: var(--owo-sys-theme-control-focus-ring);
3021
+ --owo-cmp-control-focus-ring-offset: var(--owo-sys-theme-control-focus-ring-offset);
3022
+ --owo-cmp-font-heading: var(--owo-ref-font-heading);
3023
+ --owo-cmp-motion-duration-fast: 0.15s;
3024
+ --owo-cmp-motion-duration-default: 0.2s;
3025
+ --owo-cmp-motion-ease-standard: var(--owo-ref-motion-ease-standard);
3026
+ --owo-cmp-motion-ease-decelerate: var(--owo-ref-motion-ease-decelerate);
3027
+ --owo-cmp-motion-ease-accelerate: var(--owo-ref-motion-ease-accelerate);
3028
+ --owo-cmp-density-compact: 0.875;
3029
+ --owo-cmp-density-default: 1;
3030
+ --owo-cmp-density-comfortable: 1.125;
3031
+ --owo-cmp-overlay-bg: var(--owo-sys-theme-overlay-bg);
3032
+ --owo-cmp-z-dropdown: 1000;
3033
+ --owo-cmp-z-modal: 1100;
3034
+ --owo-cmp-z-toast: 1200;
2981
3035
  --content-min-width: 320px;
2982
3036
  --content-preferred-width: 70vw;
2983
3037
  --content-max-width: 960px;
2984
3038
  --content-width: clamp(600px, 70vw, 960px);
2985
3039
  --content-padding: 24px;
2986
3040
  --header-top-margin: 64px;
2987
- --publish-trigger-bg: var(--ui-surface-bg-subtle);
2988
- --publish-trigger-border: var(--ui-surface-border);
2989
- --publish-trigger-text: var(--ui-text-primary);
2990
- --publish-trigger-active-bg: var(--ui-accent-bg-muted);
2991
- --publish-popover-bg: var(--ui-surface-bg);
2992
- --publish-popover-border: var(--ui-surface-border);
2993
- --publish-popover-shadow: var(--ui-surface-shadow-strong);
2994
- --publish-section-bg: var(--ui-surface-bg-subtle);
2995
- --publish-section-border: var(--ui-surface-border);
2996
- --publish-fact-title: var(--ui-text-secondary);
2997
- --publish-fact-value: var(--color-n900);
2998
- --publish-muted-text: var(--ui-text-secondary);
2999
- --publish-warning-bg: var(--ui-warning-bg);
3000
- --publish-warning-border: var(--ui-warning-border);
3001
- --publish-warning-text: var(--ui-warning-text);
3002
- --publish-danger-bg: var(--ui-danger-bg);
3003
- --publish-danger-border: var(--ui-danger-border);
3004
- --publish-danger-text: var(--ui-danger-text);
3005
- --publish-success-bg: var(--ui-success-bg);
3006
- --publish-success-border: var(--ui-success-border);
3007
- --publish-success-text: var(--ui-success-text);
3008
- --publish-progress-track: var(--ui-surface-bg-inset);
3009
- --publish-progress-fill: var(--ui-accent-bg);
3010
- --feedback-neutral-bg: var(--ui-surface-bg-raised);
3011
- --feedback-neutral-border: var(--ui-surface-border);
3012
- --feedback-neutral-text: var(--ui-text-primary);
3013
- --feedback-neutral-icon: var(--ui-text-secondary);
3014
- --feedback-info-bg: var(--ui-info-bg);
3015
- --feedback-info-border: var(--ui-info-border);
3016
- --feedback-info-text: var(--ui-info-text);
3017
- --feedback-info-icon: var(--ui-info-text);
3018
- --feedback-success-bg: var(--ui-success-bg);
3019
- --feedback-success-border: var(--ui-success-border);
3020
- --feedback-success-text: var(--ui-success-text);
3021
- --feedback-success-icon: var(--ui-success-text);
3022
- --feedback-warning-bg: var(--ui-warning-bg);
3023
- --feedback-warning-border: var(--ui-warning-border);
3024
- --feedback-warning-text: var(--ui-warning-text);
3025
- --feedback-warning-icon: var(--ui-warning-text);
3026
- --feedback-danger-bg: var(--ui-danger-bg);
3027
- --feedback-danger-border: var(--ui-danger-border);
3028
- --feedback-danger-text: var(--ui-danger-text);
3029
- --feedback-danger-icon: var(--ui-danger-text);
3030
- --toast-shadow: var(--ui-surface-shadow-strong);
3041
+ --publish-trigger-bg: var(--owo-cmp-surface-bg-subtle);
3042
+ --publish-trigger-border: var(--owo-cmp-surface-border);
3043
+ --publish-trigger-text: var(--owo-cmp-text-primary);
3044
+ --publish-trigger-active-bg: var(--owo-cmp-accent-bg-muted);
3045
+ --publish-popover-bg: var(--owo-cmp-surface-bg);
3046
+ --publish-popover-border: var(--owo-cmp-surface-border);
3047
+ --publish-popover-shadow: var(--owo-cmp-surface-shadow-strong);
3048
+ --publish-section-bg: var(--owo-cmp-surface-bg-subtle);
3049
+ --publish-section-border: var(--owo-cmp-surface-border);
3050
+ --publish-fact-title: var(--owo-cmp-text-secondary);
3051
+ --publish-fact-value: var(--owo-ref-color-neutral-900);
3052
+ --publish-muted-text: var(--owo-cmp-text-secondary);
3053
+ --publish-warning-bg: var(--owo-cmp-warning-bg);
3054
+ --publish-warning-border: var(--owo-cmp-warning-border);
3055
+ --publish-warning-text: var(--owo-cmp-warning-text);
3056
+ --publish-danger-bg: var(--owo-cmp-danger-bg);
3057
+ --publish-danger-border: var(--owo-cmp-danger-border);
3058
+ --publish-danger-text: var(--owo-cmp-danger-text);
3059
+ --publish-success-bg: var(--owo-cmp-success-bg);
3060
+ --publish-success-border: var(--owo-cmp-success-border);
3061
+ --publish-success-text: var(--owo-cmp-success-text);
3062
+ --publish-progress-track: var(--owo-cmp-surface-bg-inset);
3063
+ --publish-progress-fill: var(--owo-cmp-accent-bg);
3064
+ --feedback-neutral-bg: var(--owo-cmp-surface-bg-raised);
3065
+ --feedback-neutral-border: var(--owo-cmp-surface-border);
3066
+ --feedback-neutral-text: var(--owo-cmp-text-primary);
3067
+ --feedback-neutral-icon: var(--owo-cmp-text-secondary);
3068
+ --feedback-info-bg: var(--owo-cmp-info-bg);
3069
+ --feedback-info-border: var(--owo-cmp-info-border);
3070
+ --feedback-info-text: var(--owo-cmp-info-text);
3071
+ --feedback-info-icon: var(--owo-cmp-info-text);
3072
+ --feedback-success-bg: var(--owo-cmp-success-bg);
3073
+ --feedback-success-border: var(--owo-cmp-success-border);
3074
+ --feedback-success-text: var(--owo-cmp-success-text);
3075
+ --feedback-success-icon: var(--owo-cmp-success-text);
3076
+ --feedback-warning-bg: var(--owo-cmp-warning-bg);
3077
+ --feedback-warning-border: var(--owo-cmp-warning-border);
3078
+ --feedback-warning-text: var(--owo-cmp-warning-text);
3079
+ --feedback-warning-icon: var(--owo-cmp-warning-text);
3080
+ --feedback-danger-bg: var(--owo-cmp-danger-bg);
3081
+ --feedback-danger-border: var(--owo-cmp-danger-border);
3082
+ --feedback-danger-text: var(--owo-cmp-danger-text);
3083
+ --feedback-danger-icon: var(--owo-cmp-danger-text);
3084
+ --toast-shadow: var(--owo-cmp-surface-shadow-strong);
3031
3085
  --skeleton-bg: linear-gradient(
3032
3086
  180deg,
3033
- var(--ui-surface-bg-inset) 0%,
3034
- var(--ui-surface-bg-inset) 100%
3087
+ var(--owo-cmp-surface-bg-inset) 0%,
3088
+ var(--owo-cmp-surface-bg-inset) 100%
3035
3089
  );
3036
3090
  @supports (color: color-mix(in lab, red, red)) {
3037
3091
  --skeleton-bg: linear-gradient(
3038
3092
  180deg,
3039
- color-mix(in srgb, var(--ui-surface-bg-inset) 94%, white) 0%,
3040
- color-mix(in srgb, var(--ui-surface-bg-inset) 100%, var(--ui-surface-border)) 100%
3093
+ color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 94%, white) 0%,
3094
+ color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 100%, var(--owo-cmp-surface-border)) 100%
3041
3095
  );
3042
3096
  }
3043
3097
  --skeleton-bg-emphasis: linear-gradient(
3044
3098
  180deg,
3045
- var(--ui-surface-bg-subtle) 0%,
3046
- var(--ui-surface-bg-inset) 100%
3099
+ var(--owo-cmp-surface-bg-subtle) 0%,
3100
+ var(--owo-cmp-surface-bg-inset) 100%
3047
3101
  );
3048
3102
  @supports (color: color-mix(in lab, red, red)) {
3049
3103
  --skeleton-bg-emphasis: linear-gradient(
3050
3104
  180deg,
3051
- color-mix(in srgb, var(--ui-surface-bg-subtle) 78%, var(--color-highlight-soft)) 0%,
3052
- color-mix(in srgb, var(--ui-surface-bg-inset) 86%, var(--ui-surface-border)) 100%
3105
+ color-mix(in srgb, var(--owo-cmp-surface-bg-subtle) 78%, var(--owo-ref-color-highlight-soft)) 0%,
3106
+ color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 86%, var(--owo-cmp-surface-border)) 100%
3053
3107
  );
3054
3108
  }
3055
3109
  --skeleton-sheen: linear-gradient(
@@ -3057,7 +3111,7 @@
3057
3111
  transparent 0%,
3058
3112
  color-mix(in srgb, rgba(255, 255, 255, 0.34) 10%, transparent) 28%,
3059
3113
  color-mix(in srgb, rgba(255, 255, 255, 0.34) 35%, transparent) 40%,
3060
- var(--color-highlight-sheen) 50%,
3114
+ var(--owo-ref-color-highlight-sheen) 50%,
3061
3115
  color-mix(in srgb, rgba(255, 255, 255, 0.34) 35%, transparent) 60%,
3062
3116
  color-mix(in srgb, rgba(255, 255, 255, 0.34) 10%, transparent) 72%,
3063
3117
  transparent 100%
@@ -3066,194 +3120,202 @@
3066
3120
  --skeleton-sheen: linear-gradient(
3067
3121
  100deg,
3068
3122
  transparent 0%,
3069
- color-mix(in srgb, var(--color-highlight-sheen) 10%, transparent) 28%,
3070
- color-mix(in srgb, var(--color-highlight-sheen) 35%, transparent) 40%,
3071
- var(--color-highlight-sheen) 50%,
3072
- color-mix(in srgb, var(--color-highlight-sheen) 35%, transparent) 60%,
3073
- color-mix(in srgb, var(--color-highlight-sheen) 10%, transparent) 72%,
3123
+ color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 28%,
3124
+ color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 40%,
3125
+ var(--owo-ref-color-highlight-sheen) 50%,
3126
+ color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 60%,
3127
+ color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 72%,
3074
3128
  transparent 100%
3075
3129
  );
3076
3130
  }
3077
- --skeleton-top-highlight: var(--color-highlight-soft);
3078
- --workspace-transition-veil-bg: var(--color-overlay-soft);
3131
+ --skeleton-top-highlight: var(--owo-ref-color-highlight-soft);
3132
+ --workspace-transition-veil-bg: var(--owo-ref-color-overlay-soft);
3079
3133
  --workspace-transition-stale-bg: color-mix(in srgb, rgba(244, 238, 230, 0.56) 72%, transparent);
3080
3134
  @supports (color: color-mix(in lab, red, red)) {
3081
- --workspace-transition-stale-bg: color-mix(in srgb, var(--color-overlay-soft) 72%, transparent);
3135
+ --workspace-transition-stale-bg: color-mix(in srgb, var(--owo-ref-color-overlay-soft) 72%, transparent);
3082
3136
  }
3083
- --tooltip-shadow: var(--ui-surface-shadow-strong);
3084
- --select-dropdown-shadow: var(--ui-surface-shadow-strong);
3085
- --theme-picker-shadow: var(--ui-surface-shadow-strong);
3086
- --drawer-panel-shadow: var(--ui-surface-shadow-strong);
3137
+ --tooltip-shadow: var(--owo-cmp-surface-shadow-strong);
3138
+ --select-dropdown-shadow: var(--owo-cmp-surface-shadow-strong);
3139
+ --drawer-panel-shadow: var(--owo-cmp-surface-shadow-strong);
3087
3140
  }
3088
3141
  :root[data-preset="default"], .owoui-preset-default {
3089
- --preset-surface-bg: var(--theme-surface-base);
3090
- --preset-surface-bg-subtle: var(--theme-surface-subtle);
3091
- --preset-surface-bg-raised: var(--theme-surface-raised);
3092
- --preset-surface-bg-inset: var(--theme-surface-inset);
3093
- --preset-surface-border: var(--theme-surface-border);
3094
- --preset-surface-border-muted: var(--theme-surface-border-muted);
3095
- --preset-surface-border-strong: var(--theme-surface-border-strong);
3096
- --preset-surface-shadow: var(--shadow-raised);
3097
- --preset-surface-shadow-strong: var(--shadow-popover);
3098
- --preset-surface-blur: 0px;
3099
- --preset-canvas-bg: var(--theme-surface-canvas);
3100
- --preset-canvas-bg-subtle: var(--theme-canvas-bg-subtle);
3101
- --preset-surface-container: var(--theme-surface-container);
3102
- --preset-surface-container-high: var(--theme-surface-container-high);
3103
- --preset-surface-container-highest: var(--theme-surface-container-highest);
3104
- --preset-control-radius-sm: 0.5rem;
3105
- --preset-control-radius-md: 0.75rem;
3106
- --preset-control-radius-lg: 1rem;
3107
- --preset-control-radius-xl: 1.5rem;
3108
- --preset-control-radius-2xl: 2rem;
3109
- --preset-control-border-width: 1px;
3142
+ --owo-sys-preset-surface-bg: var(--owo-sys-theme-surface-base);
3143
+ --owo-sys-preset-surface-bg-subtle: var(--owo-sys-theme-surface-subtle);
3144
+ --owo-sys-preset-surface-bg-raised: var(--owo-sys-theme-surface-raised);
3145
+ --owo-sys-preset-surface-bg-inset: var(--owo-sys-theme-surface-inset);
3146
+ --owo-sys-preset-surface-border: var(--owo-sys-theme-surface-border);
3147
+ --owo-sys-preset-surface-border-muted: var(--owo-sys-theme-surface-border-muted);
3148
+ --owo-sys-preset-surface-border-strong: var(--owo-sys-theme-surface-border-strong);
3149
+ --owo-sys-preset-surface-shadow: var(--owo-ref-shadow-raised);
3150
+ --owo-sys-preset-surface-shadow-strong: var(--owo-ref-shadow-popover);
3151
+ --owo-sys-preset-surface-blur: 0px;
3152
+ --owo-sys-preset-canvas-bg: var(--owo-sys-theme-surface-canvas);
3153
+ --owo-sys-preset-canvas-bg-subtle: var(--owo-sys-theme-canvas-bg-subtle);
3154
+ --owo-sys-preset-surface-container: var(--owo-sys-theme-surface-container);
3155
+ --owo-sys-preset-surface-container-high: var(--owo-sys-theme-surface-container-high);
3156
+ --owo-sys-preset-surface-container-highest: var(--owo-sys-theme-surface-container-highest);
3157
+ --owo-sys-preset-control-radius-sm: var(--owo-ref-radius-sm);
3158
+ --owo-sys-preset-control-radius-md: var(--owo-ref-radius-md);
3159
+ --owo-sys-preset-control-radius-lg: var(--owo-ref-radius-lg);
3160
+ --owo-sys-preset-control-radius-xl: var(--owo-ref-radius-xl);
3161
+ --owo-sys-preset-control-radius-2xl: var(--owo-ref-radius-2xl);
3162
+ --owo-sys-preset-control-radius-full: var(--owo-ref-radius-full);
3163
+ --owo-sys-preset-control-border-width: 1px;
3110
3164
  }
3111
3165
  :root {
3112
- --preset-surface-bg: var(--theme-surface-base);
3113
- --preset-surface-bg-subtle: var(--theme-surface-subtle);
3114
- --preset-surface-bg-raised: var(--theme-surface-raised);
3115
- --preset-surface-bg-inset: var(--theme-surface-inset);
3116
- --preset-surface-border: var(--theme-surface-border);
3117
- --preset-surface-border-muted: var(--theme-surface-border-muted);
3118
- --preset-surface-border-strong: var(--theme-surface-border-strong);
3119
- --preset-surface-shadow: var(--shadow-raised);
3120
- --preset-surface-shadow-strong: var(--shadow-popover);
3121
- --preset-surface-blur: 0px;
3122
- --preset-canvas-bg: var(--theme-surface-canvas);
3123
- --preset-canvas-bg-subtle: var(--theme-canvas-bg-subtle);
3124
- --preset-surface-container: var(--theme-surface-container);
3125
- --preset-surface-container-high: var(--theme-surface-container-high);
3126
- --preset-surface-container-highest: var(--theme-surface-container-highest);
3127
- --preset-control-radius-sm: 0.5rem;
3128
- --preset-control-radius-md: 0.75rem;
3129
- --preset-control-radius-lg: 1rem;
3130
- --preset-control-radius-xl: 1.5rem;
3131
- --preset-control-radius-2xl: 2rem;
3132
- --preset-control-border-width: 1px;
3133
- --ui-surface-bg: var(--preset-surface-bg);
3134
- --ui-surface-bg-subtle: var(--preset-surface-bg-subtle);
3135
- --ui-surface-bg-raised: var(--preset-surface-bg-raised);
3136
- --ui-surface-bg-inset: var(--preset-surface-bg-inset);
3137
- --ui-surface-border: var(--preset-surface-border);
3138
- --ui-surface-border-muted: var(--preset-surface-border-muted);
3139
- --ui-surface-border-strong: var(--preset-surface-border-strong);
3140
- --ui-surface-shadow: var(--preset-surface-shadow);
3141
- --ui-surface-shadow-strong: var(--preset-surface-shadow-strong);
3142
- --ui-surface-blur: var(--preset-surface-blur);
3143
- --ui-canvas-bg: var(--preset-canvas-bg);
3144
- --ui-canvas-bg-subtle: var(--preset-canvas-bg-subtle);
3145
- --ui-surface-container: var(--preset-surface-container);
3146
- --ui-surface-container-high: var(--preset-surface-container-high);
3147
- --ui-surface-container-highest: var(--preset-surface-container-highest);
3148
- --ui-text-primary: var(--theme-text-primary);
3149
- --ui-text-secondary: var(--theme-text-secondary);
3150
- --ui-text-muted: var(--theme-text-muted);
3151
- --ui-text-on-accent: var(--theme-text-on-accent);
3152
- --ui-accent-bg: var(--theme-accent-bg);
3153
- --ui-accent-bg-hover: var(--theme-accent-bg-hover);
3154
- --ui-accent-bg-muted: var(--theme-accent-bg-muted);
3155
- --ui-accent-text: var(--theme-text-on-accent);
3156
- --ui-accent-border: var(--theme-accent-border);
3157
- --ui-success-bg: var(--theme-success-bg);
3158
- --ui-success-border: var(--theme-success-border);
3159
- --ui-success-text: var(--theme-success-text);
3160
- --ui-warning-bg: var(--theme-warning-bg);
3161
- --ui-warning-border: var(--theme-warning-border);
3162
- --ui-warning-text: var(--theme-warning-text);
3163
- --ui-danger-bg: var(--theme-danger-bg);
3164
- --ui-danger-bg-emphasis: var(--theme-danger-bg-emphasis);
3165
- --ui-danger-border: var(--theme-danger-border);
3166
- --ui-danger-text: var(--theme-danger-text);
3167
- --ui-info-bg: var(--theme-info-bg);
3168
- --ui-info-border: var(--theme-info-border);
3169
- --ui-info-text: var(--theme-info-text);
3170
- --ui-control-radius-sm: var(--preset-control-radius-sm);
3171
- --ui-control-radius-md: var(--preset-control-radius-md);
3172
- --ui-control-radius-lg: var(--preset-control-radius-lg);
3173
- --ui-control-radius-xl: var(--preset-control-radius-xl);
3174
- --ui-control-radius-2xl: var(--preset-control-radius-2xl);
3175
- --ui-control-border-width: var(--preset-control-border-width);
3176
- --ui-control-focus-ring: var(--theme-control-focus-ring);
3177
- --ui-control-focus-ring-offset: var(--theme-control-focus-ring-offset);
3178
- --ui-font-heading: var(--font-heading);
3179
- --ui-motion-duration-fast: 0.15s;
3180
- --ui-motion-duration-default: 0.2s;
3181
- --ui-motion-ease-standard: var(--ease-standard);
3182
- --ui-density-compact: 0.875;
3183
- --ui-density-default: 1;
3184
- --ui-density-comfortable: 1.125;
3166
+ --owo-sys-preset-surface-bg: var(--owo-sys-theme-surface-base);
3167
+ --owo-sys-preset-surface-bg-subtle: var(--owo-sys-theme-surface-subtle);
3168
+ --owo-sys-preset-surface-bg-raised: var(--owo-sys-theme-surface-raised);
3169
+ --owo-sys-preset-surface-bg-inset: var(--owo-sys-theme-surface-inset);
3170
+ --owo-sys-preset-surface-border: var(--owo-sys-theme-surface-border);
3171
+ --owo-sys-preset-surface-border-muted: var(--owo-sys-theme-surface-border-muted);
3172
+ --owo-sys-preset-surface-border-strong: var(--owo-sys-theme-surface-border-strong);
3173
+ --owo-sys-preset-surface-shadow: var(--owo-ref-shadow-raised);
3174
+ --owo-sys-preset-surface-shadow-strong: var(--owo-ref-shadow-popover);
3175
+ --owo-sys-preset-surface-blur: 0px;
3176
+ --owo-sys-preset-canvas-bg: var(--owo-sys-theme-surface-canvas);
3177
+ --owo-sys-preset-canvas-bg-subtle: var(--owo-sys-theme-canvas-bg-subtle);
3178
+ --owo-sys-preset-surface-container: var(--owo-sys-theme-surface-container);
3179
+ --owo-sys-preset-surface-container-high: var(--owo-sys-theme-surface-container-high);
3180
+ --owo-sys-preset-surface-container-highest: var(--owo-sys-theme-surface-container-highest);
3181
+ --owo-sys-preset-control-radius-sm: var(--owo-ref-radius-sm);
3182
+ --owo-sys-preset-control-radius-md: var(--owo-ref-radius-md);
3183
+ --owo-sys-preset-control-radius-lg: var(--owo-ref-radius-lg);
3184
+ --owo-sys-preset-control-radius-xl: var(--owo-ref-radius-xl);
3185
+ --owo-sys-preset-control-radius-2xl: var(--owo-ref-radius-2xl);
3186
+ --owo-sys-preset-control-radius-full: var(--owo-ref-radius-full);
3187
+ --owo-sys-preset-control-border-width: 1px;
3188
+ --owo-cmp-surface-bg: var(--owo-sys-preset-surface-bg);
3189
+ --owo-cmp-surface-bg-subtle: var(--owo-sys-preset-surface-bg-subtle);
3190
+ --owo-cmp-surface-bg-raised: var(--owo-sys-preset-surface-bg-raised);
3191
+ --owo-cmp-surface-bg-inset: var(--owo-sys-preset-surface-bg-inset);
3192
+ --owo-cmp-surface-border: var(--owo-sys-preset-surface-border);
3193
+ --owo-cmp-surface-border-muted: var(--owo-sys-preset-surface-border-muted);
3194
+ --owo-cmp-surface-border-strong: var(--owo-sys-preset-surface-border-strong);
3195
+ --owo-cmp-surface-shadow: var(--owo-sys-preset-surface-shadow);
3196
+ --owo-cmp-surface-shadow-strong: var(--owo-sys-preset-surface-shadow-strong);
3197
+ --owo-cmp-surface-blur: var(--owo-sys-preset-surface-blur);
3198
+ --owo-cmp-canvas-bg: var(--owo-sys-preset-canvas-bg);
3199
+ --owo-cmp-canvas-bg-subtle: var(--owo-sys-preset-canvas-bg-subtle);
3200
+ --owo-cmp-surface-container: var(--owo-sys-preset-surface-container);
3201
+ --owo-cmp-surface-container-high: var(--owo-sys-preset-surface-container-high);
3202
+ --owo-cmp-surface-container-highest: var(--owo-sys-preset-surface-container-highest);
3203
+ --owo-cmp-text-primary: var(--owo-sys-theme-text-primary);
3204
+ --owo-cmp-text-secondary: var(--owo-sys-theme-text-secondary);
3205
+ --owo-cmp-text-muted: var(--owo-sys-theme-text-muted);
3206
+ --owo-cmp-text-on-accent: var(--owo-sys-theme-text-on-accent);
3207
+ --owo-cmp-accent-bg: var(--owo-sys-theme-accent-bg);
3208
+ --owo-cmp-accent-bg-hover: var(--owo-sys-theme-accent-bg-hover);
3209
+ --owo-cmp-accent-bg-muted: var(--owo-sys-theme-accent-bg-muted);
3210
+ --owo-cmp-accent-text: var(--owo-sys-theme-text-on-accent);
3211
+ --owo-cmp-accent-border: var(--owo-sys-theme-accent-border);
3212
+ --owo-cmp-success-bg: var(--owo-sys-theme-success-bg);
3213
+ --owo-cmp-success-border: var(--owo-sys-theme-success-border);
3214
+ --owo-cmp-success-text: var(--owo-sys-theme-success-text);
3215
+ --owo-cmp-warning-bg: var(--owo-sys-theme-warning-bg);
3216
+ --owo-cmp-warning-border: var(--owo-sys-theme-warning-border);
3217
+ --owo-cmp-warning-text: var(--owo-sys-theme-warning-text);
3218
+ --owo-cmp-danger-bg: var(--owo-sys-theme-danger-bg);
3219
+ --owo-cmp-danger-bg-emphasis: var(--owo-sys-theme-danger-bg-emphasis);
3220
+ --owo-cmp-danger-border: var(--owo-sys-theme-danger-border);
3221
+ --owo-cmp-danger-text: var(--owo-sys-theme-danger-text);
3222
+ --owo-cmp-info-bg: var(--owo-sys-theme-info-bg);
3223
+ --owo-cmp-info-border: var(--owo-sys-theme-info-border);
3224
+ --owo-cmp-info-text: var(--owo-sys-theme-info-text);
3225
+ --owo-cmp-control-radius-sm: var(--owo-sys-preset-control-radius-sm);
3226
+ --owo-cmp-control-radius-md: var(--owo-sys-preset-control-radius-md);
3227
+ --owo-cmp-control-radius-lg: var(--owo-sys-preset-control-radius-lg);
3228
+ --owo-cmp-control-radius-xl: var(--owo-sys-preset-control-radius-xl);
3229
+ --owo-cmp-control-radius-2xl: var(--owo-sys-preset-control-radius-2xl);
3230
+ --owo-cmp-control-radius-full: var(--owo-sys-preset-control-radius-full);
3231
+ --owo-cmp-control-border-width: var(--owo-sys-preset-control-border-width);
3232
+ --owo-cmp-control-focus-ring: var(--owo-sys-theme-control-focus-ring);
3233
+ --owo-cmp-control-focus-ring-offset: var(--owo-sys-theme-control-focus-ring-offset);
3234
+ --owo-cmp-font-heading: var(--owo-ref-font-heading);
3235
+ --owo-cmp-motion-duration-fast: 0.15s;
3236
+ --owo-cmp-motion-duration-default: 0.2s;
3237
+ --owo-cmp-motion-ease-standard: var(--owo-ref-motion-ease-standard);
3238
+ --owo-cmp-motion-ease-decelerate: var(--owo-ref-motion-ease-decelerate);
3239
+ --owo-cmp-motion-ease-accelerate: var(--owo-ref-motion-ease-accelerate);
3240
+ --owo-cmp-density-compact: 0.875;
3241
+ --owo-cmp-density-default: 1;
3242
+ --owo-cmp-density-comfortable: 1.125;
3243
+ --owo-cmp-overlay-bg: var(--owo-sys-theme-overlay-bg);
3244
+ --owo-cmp-z-dropdown: 1000;
3245
+ --owo-cmp-z-modal: 1100;
3246
+ --owo-cmp-z-toast: 1200;
3185
3247
  --content-min-width: 320px;
3186
3248
  --content-preferred-width: 70vw;
3187
3249
  --content-max-width: 960px;
3188
3250
  --content-width: clamp(600px, 70vw, 960px);
3189
3251
  --content-padding: 24px;
3190
3252
  --header-top-margin: 64px;
3191
- --publish-trigger-bg: var(--ui-surface-bg-subtle);
3192
- --publish-trigger-border: var(--ui-surface-border);
3193
- --publish-trigger-text: var(--ui-text-primary);
3194
- --publish-trigger-active-bg: var(--ui-accent-bg-muted);
3195
- --publish-popover-bg: var(--ui-surface-bg);
3196
- --publish-popover-border: var(--ui-surface-border);
3197
- --publish-popover-shadow: var(--ui-surface-shadow-strong);
3198
- --publish-section-bg: var(--ui-surface-bg-subtle);
3199
- --publish-section-border: var(--ui-surface-border);
3200
- --publish-fact-title: var(--ui-text-secondary);
3201
- --publish-fact-value: var(--color-n900);
3202
- --publish-muted-text: var(--ui-text-secondary);
3203
- --publish-warning-bg: var(--ui-warning-bg);
3204
- --publish-warning-border: var(--ui-warning-border);
3205
- --publish-warning-text: var(--ui-warning-text);
3206
- --publish-danger-bg: var(--ui-danger-bg);
3207
- --publish-danger-border: var(--ui-danger-border);
3208
- --publish-danger-text: var(--ui-danger-text);
3209
- --publish-success-bg: var(--ui-success-bg);
3210
- --publish-success-border: var(--ui-success-border);
3211
- --publish-success-text: var(--ui-success-text);
3212
- --publish-progress-track: var(--ui-surface-bg-inset);
3213
- --publish-progress-fill: var(--ui-accent-bg);
3214
- --feedback-neutral-bg: var(--ui-surface-bg-raised);
3215
- --feedback-neutral-border: var(--ui-surface-border);
3216
- --feedback-neutral-text: var(--ui-text-primary);
3217
- --feedback-neutral-icon: var(--ui-text-secondary);
3218
- --feedback-info-bg: var(--ui-info-bg);
3219
- --feedback-info-border: var(--ui-info-border);
3220
- --feedback-info-text: var(--ui-info-text);
3221
- --feedback-info-icon: var(--ui-info-text);
3222
- --feedback-success-bg: var(--ui-success-bg);
3223
- --feedback-success-border: var(--ui-success-border);
3224
- --feedback-success-text: var(--ui-success-text);
3225
- --feedback-success-icon: var(--ui-success-text);
3226
- --feedback-warning-bg: var(--ui-warning-bg);
3227
- --feedback-warning-border: var(--ui-warning-border);
3228
- --feedback-warning-text: var(--ui-warning-text);
3229
- --feedback-warning-icon: var(--ui-warning-text);
3230
- --feedback-danger-bg: var(--ui-danger-bg);
3231
- --feedback-danger-border: var(--ui-danger-border);
3232
- --feedback-danger-text: var(--ui-danger-text);
3233
- --feedback-danger-icon: var(--ui-danger-text);
3234
- --toast-shadow: var(--ui-surface-shadow-strong);
3253
+ --publish-trigger-bg: var(--owo-cmp-surface-bg-subtle);
3254
+ --publish-trigger-border: var(--owo-cmp-surface-border);
3255
+ --publish-trigger-text: var(--owo-cmp-text-primary);
3256
+ --publish-trigger-active-bg: var(--owo-cmp-accent-bg-muted);
3257
+ --publish-popover-bg: var(--owo-cmp-surface-bg);
3258
+ --publish-popover-border: var(--owo-cmp-surface-border);
3259
+ --publish-popover-shadow: var(--owo-cmp-surface-shadow-strong);
3260
+ --publish-section-bg: var(--owo-cmp-surface-bg-subtle);
3261
+ --publish-section-border: var(--owo-cmp-surface-border);
3262
+ --publish-fact-title: var(--owo-cmp-text-secondary);
3263
+ --publish-fact-value: var(--owo-ref-color-neutral-900);
3264
+ --publish-muted-text: var(--owo-cmp-text-secondary);
3265
+ --publish-warning-bg: var(--owo-cmp-warning-bg);
3266
+ --publish-warning-border: var(--owo-cmp-warning-border);
3267
+ --publish-warning-text: var(--owo-cmp-warning-text);
3268
+ --publish-danger-bg: var(--owo-cmp-danger-bg);
3269
+ --publish-danger-border: var(--owo-cmp-danger-border);
3270
+ --publish-danger-text: var(--owo-cmp-danger-text);
3271
+ --publish-success-bg: var(--owo-cmp-success-bg);
3272
+ --publish-success-border: var(--owo-cmp-success-border);
3273
+ --publish-success-text: var(--owo-cmp-success-text);
3274
+ --publish-progress-track: var(--owo-cmp-surface-bg-inset);
3275
+ --publish-progress-fill: var(--owo-cmp-accent-bg);
3276
+ --feedback-neutral-bg: var(--owo-cmp-surface-bg-raised);
3277
+ --feedback-neutral-border: var(--owo-cmp-surface-border);
3278
+ --feedback-neutral-text: var(--owo-cmp-text-primary);
3279
+ --feedback-neutral-icon: var(--owo-cmp-text-secondary);
3280
+ --feedback-info-bg: var(--owo-cmp-info-bg);
3281
+ --feedback-info-border: var(--owo-cmp-info-border);
3282
+ --feedback-info-text: var(--owo-cmp-info-text);
3283
+ --feedback-info-icon: var(--owo-cmp-info-text);
3284
+ --feedback-success-bg: var(--owo-cmp-success-bg);
3285
+ --feedback-success-border: var(--owo-cmp-success-border);
3286
+ --feedback-success-text: var(--owo-cmp-success-text);
3287
+ --feedback-success-icon: var(--owo-cmp-success-text);
3288
+ --feedback-warning-bg: var(--owo-cmp-warning-bg);
3289
+ --feedback-warning-border: var(--owo-cmp-warning-border);
3290
+ --feedback-warning-text: var(--owo-cmp-warning-text);
3291
+ --feedback-warning-icon: var(--owo-cmp-warning-text);
3292
+ --feedback-danger-bg: var(--owo-cmp-danger-bg);
3293
+ --feedback-danger-border: var(--owo-cmp-danger-border);
3294
+ --feedback-danger-text: var(--owo-cmp-danger-text);
3295
+ --feedback-danger-icon: var(--owo-cmp-danger-text);
3296
+ --toast-shadow: var(--owo-cmp-surface-shadow-strong);
3235
3297
  --skeleton-bg: linear-gradient(
3236
3298
  180deg,
3237
- var(--ui-surface-bg-inset) 0%,
3238
- var(--ui-surface-bg-inset) 100%
3299
+ var(--owo-cmp-surface-bg-inset) 0%,
3300
+ var(--owo-cmp-surface-bg-inset) 100%
3239
3301
  );
3240
3302
  @supports (color: color-mix(in lab, red, red)) {
3241
3303
  --skeleton-bg: linear-gradient(
3242
3304
  180deg,
3243
- color-mix(in srgb, var(--ui-surface-bg-inset) 94%, white) 0%,
3244
- color-mix(in srgb, var(--ui-surface-bg-inset) 100%, var(--ui-surface-border)) 100%
3305
+ color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 94%, white) 0%,
3306
+ color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 100%, var(--owo-cmp-surface-border)) 100%
3245
3307
  );
3246
3308
  }
3247
3309
  --skeleton-bg-emphasis: linear-gradient(
3248
3310
  180deg,
3249
- var(--ui-surface-bg-subtle) 0%,
3250
- var(--ui-surface-bg-inset) 100%
3311
+ var(--owo-cmp-surface-bg-subtle) 0%,
3312
+ var(--owo-cmp-surface-bg-inset) 100%
3251
3313
  );
3252
3314
  @supports (color: color-mix(in lab, red, red)) {
3253
3315
  --skeleton-bg-emphasis: linear-gradient(
3254
3316
  180deg,
3255
- color-mix(in srgb, var(--ui-surface-bg-subtle) 78%, var(--color-highlight-soft)) 0%,
3256
- color-mix(in srgb, var(--ui-surface-bg-inset) 86%, var(--ui-surface-border)) 100%
3317
+ color-mix(in srgb, var(--owo-cmp-surface-bg-subtle) 78%, var(--owo-ref-color-highlight-soft)) 0%,
3318
+ color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 86%, var(--owo-cmp-surface-border)) 100%
3257
3319
  );
3258
3320
  }
3259
3321
  --skeleton-sheen: linear-gradient(
@@ -3261,7 +3323,7 @@
3261
3323
  transparent 0%,
3262
3324
  color-mix(in srgb, rgba(255, 255, 255, 0.34) 10%, transparent) 28%,
3263
3325
  color-mix(in srgb, rgba(255, 255, 255, 0.34) 35%, transparent) 40%,
3264
- var(--color-highlight-sheen) 50%,
3326
+ var(--owo-ref-color-highlight-sheen) 50%,
3265
3327
  color-mix(in srgb, rgba(255, 255, 255, 0.34) 35%, transparent) 60%,
3266
3328
  color-mix(in srgb, rgba(255, 255, 255, 0.34) 10%, transparent) 72%,
3267
3329
  transparent 100%
@@ -3270,194 +3332,202 @@
3270
3332
  --skeleton-sheen: linear-gradient(
3271
3333
  100deg,
3272
3334
  transparent 0%,
3273
- color-mix(in srgb, var(--color-highlight-sheen) 10%, transparent) 28%,
3274
- color-mix(in srgb, var(--color-highlight-sheen) 35%, transparent) 40%,
3275
- var(--color-highlight-sheen) 50%,
3276
- color-mix(in srgb, var(--color-highlight-sheen) 35%, transparent) 60%,
3277
- color-mix(in srgb, var(--color-highlight-sheen) 10%, transparent) 72%,
3335
+ color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 28%,
3336
+ color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 40%,
3337
+ var(--owo-ref-color-highlight-sheen) 50%,
3338
+ color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 60%,
3339
+ color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 72%,
3278
3340
  transparent 100%
3279
3341
  );
3280
3342
  }
3281
- --skeleton-top-highlight: var(--color-highlight-soft);
3282
- --workspace-transition-veil-bg: var(--color-overlay-soft);
3343
+ --skeleton-top-highlight: var(--owo-ref-color-highlight-soft);
3344
+ --workspace-transition-veil-bg: var(--owo-ref-color-overlay-soft);
3283
3345
  --workspace-transition-stale-bg: color-mix(in srgb, rgba(244, 238, 230, 0.56) 72%, transparent);
3284
3346
  @supports (color: color-mix(in lab, red, red)) {
3285
- --workspace-transition-stale-bg: color-mix(in srgb, var(--color-overlay-soft) 72%, transparent);
3347
+ --workspace-transition-stale-bg: color-mix(in srgb, var(--owo-ref-color-overlay-soft) 72%, transparent);
3286
3348
  }
3287
- --tooltip-shadow: var(--ui-surface-shadow-strong);
3288
- --select-dropdown-shadow: var(--ui-surface-shadow-strong);
3289
- --theme-picker-shadow: var(--ui-surface-shadow-strong);
3290
- --drawer-panel-shadow: var(--ui-surface-shadow-strong);
3349
+ --tooltip-shadow: var(--owo-cmp-surface-shadow-strong);
3350
+ --select-dropdown-shadow: var(--owo-cmp-surface-shadow-strong);
3351
+ --drawer-panel-shadow: var(--owo-cmp-surface-shadow-strong);
3291
3352
  }
3292
3353
  :root[data-preset="flat"], .owoui-preset-flat {
3293
- --preset-surface-bg: var(--theme-surface-base);
3294
- --preset-surface-bg-subtle: var(--theme-surface-subtle);
3295
- --preset-surface-bg-raised: var(--theme-surface-base);
3296
- --preset-surface-bg-inset: var(--theme-surface-inset);
3297
- --preset-surface-border: var(--theme-surface-border);
3298
- --preset-surface-border-muted: var(--theme-surface-border-muted);
3299
- --preset-surface-border-strong: var(--theme-surface-border-strong);
3300
- --preset-surface-shadow: none;
3301
- --preset-surface-shadow-strong: none;
3302
- --preset-surface-blur: 0px;
3303
- --preset-canvas-bg: var(--theme-surface-canvas);
3304
- --preset-canvas-bg-subtle: var(--theme-canvas-bg-subtle);
3305
- --preset-surface-container: var(--theme-surface-container);
3306
- --preset-surface-container-high: var(--theme-surface-container);
3307
- --preset-surface-container-highest: var(--theme-surface-container-high);
3308
- --preset-control-radius-sm: 0.375rem;
3309
- --preset-control-radius-md: 0.625rem;
3310
- --preset-control-radius-lg: 0.875rem;
3311
- --preset-control-radius-xl: 1.25rem;
3312
- --preset-control-radius-2xl: 1.5rem;
3313
- --preset-control-border-width: 1px;
3354
+ --owo-sys-preset-surface-bg: var(--owo-sys-theme-surface-base);
3355
+ --owo-sys-preset-surface-bg-subtle: var(--owo-sys-theme-surface-subtle);
3356
+ --owo-sys-preset-surface-bg-raised: var(--owo-sys-theme-surface-base);
3357
+ --owo-sys-preset-surface-bg-inset: var(--owo-sys-theme-surface-inset);
3358
+ --owo-sys-preset-surface-border: var(--owo-sys-theme-surface-border);
3359
+ --owo-sys-preset-surface-border-muted: var(--owo-sys-theme-surface-border-muted);
3360
+ --owo-sys-preset-surface-border-strong: var(--owo-sys-theme-surface-border-strong);
3361
+ --owo-sys-preset-surface-shadow: none;
3362
+ --owo-sys-preset-surface-shadow-strong: none;
3363
+ --owo-sys-preset-surface-blur: 0px;
3364
+ --owo-sys-preset-canvas-bg: var(--owo-sys-theme-surface-canvas);
3365
+ --owo-sys-preset-canvas-bg-subtle: var(--owo-sys-theme-canvas-bg-subtle);
3366
+ --owo-sys-preset-surface-container: var(--owo-sys-theme-surface-container);
3367
+ --owo-sys-preset-surface-container-high: var(--owo-sys-theme-surface-container);
3368
+ --owo-sys-preset-surface-container-highest: var(--owo-sys-theme-surface-container-high);
3369
+ --owo-sys-preset-control-radius-sm: var(--owo-ref-radius-xs);
3370
+ --owo-sys-preset-control-radius-md: calc(var(--owo-ref-radius-sm) + 0.125rem);
3371
+ --owo-sys-preset-control-radius-lg: calc(var(--owo-ref-radius-md) + 0.125rem);
3372
+ --owo-sys-preset-control-radius-xl: calc(var(--owo-ref-radius-lg) + 0.25rem);
3373
+ --owo-sys-preset-control-radius-2xl: var(--owo-ref-radius-xl);
3374
+ --owo-sys-preset-control-radius-full: var(--owo-ref-radius-full);
3375
+ --owo-sys-preset-control-border-width: 1px;
3314
3376
  }
3315
3377
  :root {
3316
- --preset-surface-bg: var(--theme-surface-base);
3317
- --preset-surface-bg-subtle: var(--theme-surface-subtle);
3318
- --preset-surface-bg-raised: var(--theme-surface-raised);
3319
- --preset-surface-bg-inset: var(--theme-surface-inset);
3320
- --preset-surface-border: var(--theme-surface-border);
3321
- --preset-surface-border-muted: var(--theme-surface-border-muted);
3322
- --preset-surface-border-strong: var(--theme-surface-border-strong);
3323
- --preset-surface-shadow: var(--shadow-raised);
3324
- --preset-surface-shadow-strong: var(--shadow-popover);
3325
- --preset-surface-blur: 0px;
3326
- --preset-canvas-bg: var(--theme-surface-canvas);
3327
- --preset-canvas-bg-subtle: var(--theme-canvas-bg-subtle);
3328
- --preset-surface-container: var(--theme-surface-container);
3329
- --preset-surface-container-high: var(--theme-surface-container-high);
3330
- --preset-surface-container-highest: var(--theme-surface-container-highest);
3331
- --preset-control-radius-sm: 0.5rem;
3332
- --preset-control-radius-md: 0.75rem;
3333
- --preset-control-radius-lg: 1rem;
3334
- --preset-control-radius-xl: 1.5rem;
3335
- --preset-control-radius-2xl: 2rem;
3336
- --preset-control-border-width: 1px;
3337
- --ui-surface-bg: var(--preset-surface-bg);
3338
- --ui-surface-bg-subtle: var(--preset-surface-bg-subtle);
3339
- --ui-surface-bg-raised: var(--preset-surface-bg-raised);
3340
- --ui-surface-bg-inset: var(--preset-surface-bg-inset);
3341
- --ui-surface-border: var(--preset-surface-border);
3342
- --ui-surface-border-muted: var(--preset-surface-border-muted);
3343
- --ui-surface-border-strong: var(--preset-surface-border-strong);
3344
- --ui-surface-shadow: var(--preset-surface-shadow);
3345
- --ui-surface-shadow-strong: var(--preset-surface-shadow-strong);
3346
- --ui-surface-blur: var(--preset-surface-blur);
3347
- --ui-canvas-bg: var(--preset-canvas-bg);
3348
- --ui-canvas-bg-subtle: var(--preset-canvas-bg-subtle);
3349
- --ui-surface-container: var(--preset-surface-container);
3350
- --ui-surface-container-high: var(--preset-surface-container-high);
3351
- --ui-surface-container-highest: var(--preset-surface-container-highest);
3352
- --ui-text-primary: var(--theme-text-primary);
3353
- --ui-text-secondary: var(--theme-text-secondary);
3354
- --ui-text-muted: var(--theme-text-muted);
3355
- --ui-text-on-accent: var(--theme-text-on-accent);
3356
- --ui-accent-bg: var(--theme-accent-bg);
3357
- --ui-accent-bg-hover: var(--theme-accent-bg-hover);
3358
- --ui-accent-bg-muted: var(--theme-accent-bg-muted);
3359
- --ui-accent-text: var(--theme-text-on-accent);
3360
- --ui-accent-border: var(--theme-accent-border);
3361
- --ui-success-bg: var(--theme-success-bg);
3362
- --ui-success-border: var(--theme-success-border);
3363
- --ui-success-text: var(--theme-success-text);
3364
- --ui-warning-bg: var(--theme-warning-bg);
3365
- --ui-warning-border: var(--theme-warning-border);
3366
- --ui-warning-text: var(--theme-warning-text);
3367
- --ui-danger-bg: var(--theme-danger-bg);
3368
- --ui-danger-bg-emphasis: var(--theme-danger-bg-emphasis);
3369
- --ui-danger-border: var(--theme-danger-border);
3370
- --ui-danger-text: var(--theme-danger-text);
3371
- --ui-info-bg: var(--theme-info-bg);
3372
- --ui-info-border: var(--theme-info-border);
3373
- --ui-info-text: var(--theme-info-text);
3374
- --ui-control-radius-sm: var(--preset-control-radius-sm);
3375
- --ui-control-radius-md: var(--preset-control-radius-md);
3376
- --ui-control-radius-lg: var(--preset-control-radius-lg);
3377
- --ui-control-radius-xl: var(--preset-control-radius-xl);
3378
- --ui-control-radius-2xl: var(--preset-control-radius-2xl);
3379
- --ui-control-border-width: var(--preset-control-border-width);
3380
- --ui-control-focus-ring: var(--theme-control-focus-ring);
3381
- --ui-control-focus-ring-offset: var(--theme-control-focus-ring-offset);
3382
- --ui-font-heading: var(--font-heading);
3383
- --ui-motion-duration-fast: 0.15s;
3384
- --ui-motion-duration-default: 0.2s;
3385
- --ui-motion-ease-standard: var(--ease-standard);
3386
- --ui-density-compact: 0.875;
3387
- --ui-density-default: 1;
3388
- --ui-density-comfortable: 1.125;
3378
+ --owo-sys-preset-surface-bg: var(--owo-sys-theme-surface-base);
3379
+ --owo-sys-preset-surface-bg-subtle: var(--owo-sys-theme-surface-subtle);
3380
+ --owo-sys-preset-surface-bg-raised: var(--owo-sys-theme-surface-raised);
3381
+ --owo-sys-preset-surface-bg-inset: var(--owo-sys-theme-surface-inset);
3382
+ --owo-sys-preset-surface-border: var(--owo-sys-theme-surface-border);
3383
+ --owo-sys-preset-surface-border-muted: var(--owo-sys-theme-surface-border-muted);
3384
+ --owo-sys-preset-surface-border-strong: var(--owo-sys-theme-surface-border-strong);
3385
+ --owo-sys-preset-surface-shadow: var(--owo-ref-shadow-raised);
3386
+ --owo-sys-preset-surface-shadow-strong: var(--owo-ref-shadow-popover);
3387
+ --owo-sys-preset-surface-blur: 0px;
3388
+ --owo-sys-preset-canvas-bg: var(--owo-sys-theme-surface-canvas);
3389
+ --owo-sys-preset-canvas-bg-subtle: var(--owo-sys-theme-canvas-bg-subtle);
3390
+ --owo-sys-preset-surface-container: var(--owo-sys-theme-surface-container);
3391
+ --owo-sys-preset-surface-container-high: var(--owo-sys-theme-surface-container-high);
3392
+ --owo-sys-preset-surface-container-highest: var(--owo-sys-theme-surface-container-highest);
3393
+ --owo-sys-preset-control-radius-sm: var(--owo-ref-radius-sm);
3394
+ --owo-sys-preset-control-radius-md: var(--owo-ref-radius-md);
3395
+ --owo-sys-preset-control-radius-lg: var(--owo-ref-radius-lg);
3396
+ --owo-sys-preset-control-radius-xl: var(--owo-ref-radius-xl);
3397
+ --owo-sys-preset-control-radius-2xl: var(--owo-ref-radius-2xl);
3398
+ --owo-sys-preset-control-radius-full: var(--owo-ref-radius-full);
3399
+ --owo-sys-preset-control-border-width: 1px;
3400
+ --owo-cmp-surface-bg: var(--owo-sys-preset-surface-bg);
3401
+ --owo-cmp-surface-bg-subtle: var(--owo-sys-preset-surface-bg-subtle);
3402
+ --owo-cmp-surface-bg-raised: var(--owo-sys-preset-surface-bg-raised);
3403
+ --owo-cmp-surface-bg-inset: var(--owo-sys-preset-surface-bg-inset);
3404
+ --owo-cmp-surface-border: var(--owo-sys-preset-surface-border);
3405
+ --owo-cmp-surface-border-muted: var(--owo-sys-preset-surface-border-muted);
3406
+ --owo-cmp-surface-border-strong: var(--owo-sys-preset-surface-border-strong);
3407
+ --owo-cmp-surface-shadow: var(--owo-sys-preset-surface-shadow);
3408
+ --owo-cmp-surface-shadow-strong: var(--owo-sys-preset-surface-shadow-strong);
3409
+ --owo-cmp-surface-blur: var(--owo-sys-preset-surface-blur);
3410
+ --owo-cmp-canvas-bg: var(--owo-sys-preset-canvas-bg);
3411
+ --owo-cmp-canvas-bg-subtle: var(--owo-sys-preset-canvas-bg-subtle);
3412
+ --owo-cmp-surface-container: var(--owo-sys-preset-surface-container);
3413
+ --owo-cmp-surface-container-high: var(--owo-sys-preset-surface-container-high);
3414
+ --owo-cmp-surface-container-highest: var(--owo-sys-preset-surface-container-highest);
3415
+ --owo-cmp-text-primary: var(--owo-sys-theme-text-primary);
3416
+ --owo-cmp-text-secondary: var(--owo-sys-theme-text-secondary);
3417
+ --owo-cmp-text-muted: var(--owo-sys-theme-text-muted);
3418
+ --owo-cmp-text-on-accent: var(--owo-sys-theme-text-on-accent);
3419
+ --owo-cmp-accent-bg: var(--owo-sys-theme-accent-bg);
3420
+ --owo-cmp-accent-bg-hover: var(--owo-sys-theme-accent-bg-hover);
3421
+ --owo-cmp-accent-bg-muted: var(--owo-sys-theme-accent-bg-muted);
3422
+ --owo-cmp-accent-text: var(--owo-sys-theme-text-on-accent);
3423
+ --owo-cmp-accent-border: var(--owo-sys-theme-accent-border);
3424
+ --owo-cmp-success-bg: var(--owo-sys-theme-success-bg);
3425
+ --owo-cmp-success-border: var(--owo-sys-theme-success-border);
3426
+ --owo-cmp-success-text: var(--owo-sys-theme-success-text);
3427
+ --owo-cmp-warning-bg: var(--owo-sys-theme-warning-bg);
3428
+ --owo-cmp-warning-border: var(--owo-sys-theme-warning-border);
3429
+ --owo-cmp-warning-text: var(--owo-sys-theme-warning-text);
3430
+ --owo-cmp-danger-bg: var(--owo-sys-theme-danger-bg);
3431
+ --owo-cmp-danger-bg-emphasis: var(--owo-sys-theme-danger-bg-emphasis);
3432
+ --owo-cmp-danger-border: var(--owo-sys-theme-danger-border);
3433
+ --owo-cmp-danger-text: var(--owo-sys-theme-danger-text);
3434
+ --owo-cmp-info-bg: var(--owo-sys-theme-info-bg);
3435
+ --owo-cmp-info-border: var(--owo-sys-theme-info-border);
3436
+ --owo-cmp-info-text: var(--owo-sys-theme-info-text);
3437
+ --owo-cmp-control-radius-sm: var(--owo-sys-preset-control-radius-sm);
3438
+ --owo-cmp-control-radius-md: var(--owo-sys-preset-control-radius-md);
3439
+ --owo-cmp-control-radius-lg: var(--owo-sys-preset-control-radius-lg);
3440
+ --owo-cmp-control-radius-xl: var(--owo-sys-preset-control-radius-xl);
3441
+ --owo-cmp-control-radius-2xl: var(--owo-sys-preset-control-radius-2xl);
3442
+ --owo-cmp-control-radius-full: var(--owo-sys-preset-control-radius-full);
3443
+ --owo-cmp-control-border-width: var(--owo-sys-preset-control-border-width);
3444
+ --owo-cmp-control-focus-ring: var(--owo-sys-theme-control-focus-ring);
3445
+ --owo-cmp-control-focus-ring-offset: var(--owo-sys-theme-control-focus-ring-offset);
3446
+ --owo-cmp-font-heading: var(--owo-ref-font-heading);
3447
+ --owo-cmp-motion-duration-fast: 0.15s;
3448
+ --owo-cmp-motion-duration-default: 0.2s;
3449
+ --owo-cmp-motion-ease-standard: var(--owo-ref-motion-ease-standard);
3450
+ --owo-cmp-motion-ease-decelerate: var(--owo-ref-motion-ease-decelerate);
3451
+ --owo-cmp-motion-ease-accelerate: var(--owo-ref-motion-ease-accelerate);
3452
+ --owo-cmp-density-compact: 0.875;
3453
+ --owo-cmp-density-default: 1;
3454
+ --owo-cmp-density-comfortable: 1.125;
3455
+ --owo-cmp-overlay-bg: var(--owo-sys-theme-overlay-bg);
3456
+ --owo-cmp-z-dropdown: 1000;
3457
+ --owo-cmp-z-modal: 1100;
3458
+ --owo-cmp-z-toast: 1200;
3389
3459
  --content-min-width: 320px;
3390
3460
  --content-preferred-width: 70vw;
3391
3461
  --content-max-width: 960px;
3392
3462
  --content-width: clamp(600px, 70vw, 960px);
3393
3463
  --content-padding: 24px;
3394
3464
  --header-top-margin: 64px;
3395
- --publish-trigger-bg: var(--ui-surface-bg-subtle);
3396
- --publish-trigger-border: var(--ui-surface-border);
3397
- --publish-trigger-text: var(--ui-text-primary);
3398
- --publish-trigger-active-bg: var(--ui-accent-bg-muted);
3399
- --publish-popover-bg: var(--ui-surface-bg);
3400
- --publish-popover-border: var(--ui-surface-border);
3401
- --publish-popover-shadow: var(--ui-surface-shadow-strong);
3402
- --publish-section-bg: var(--ui-surface-bg-subtle);
3403
- --publish-section-border: var(--ui-surface-border);
3404
- --publish-fact-title: var(--ui-text-secondary);
3405
- --publish-fact-value: var(--color-n900);
3406
- --publish-muted-text: var(--ui-text-secondary);
3407
- --publish-warning-bg: var(--ui-warning-bg);
3408
- --publish-warning-border: var(--ui-warning-border);
3409
- --publish-warning-text: var(--ui-warning-text);
3410
- --publish-danger-bg: var(--ui-danger-bg);
3411
- --publish-danger-border: var(--ui-danger-border);
3412
- --publish-danger-text: var(--ui-danger-text);
3413
- --publish-success-bg: var(--ui-success-bg);
3414
- --publish-success-border: var(--ui-success-border);
3415
- --publish-success-text: var(--ui-success-text);
3416
- --publish-progress-track: var(--ui-surface-bg-inset);
3417
- --publish-progress-fill: var(--ui-accent-bg);
3418
- --feedback-neutral-bg: var(--ui-surface-bg-raised);
3419
- --feedback-neutral-border: var(--ui-surface-border);
3420
- --feedback-neutral-text: var(--ui-text-primary);
3421
- --feedback-neutral-icon: var(--ui-text-secondary);
3422
- --feedback-info-bg: var(--ui-info-bg);
3423
- --feedback-info-border: var(--ui-info-border);
3424
- --feedback-info-text: var(--ui-info-text);
3425
- --feedback-info-icon: var(--ui-info-text);
3426
- --feedback-success-bg: var(--ui-success-bg);
3427
- --feedback-success-border: var(--ui-success-border);
3428
- --feedback-success-text: var(--ui-success-text);
3429
- --feedback-success-icon: var(--ui-success-text);
3430
- --feedback-warning-bg: var(--ui-warning-bg);
3431
- --feedback-warning-border: var(--ui-warning-border);
3432
- --feedback-warning-text: var(--ui-warning-text);
3433
- --feedback-warning-icon: var(--ui-warning-text);
3434
- --feedback-danger-bg: var(--ui-danger-bg);
3435
- --feedback-danger-border: var(--ui-danger-border);
3436
- --feedback-danger-text: var(--ui-danger-text);
3437
- --feedback-danger-icon: var(--ui-danger-text);
3438
- --toast-shadow: var(--ui-surface-shadow-strong);
3465
+ --publish-trigger-bg: var(--owo-cmp-surface-bg-subtle);
3466
+ --publish-trigger-border: var(--owo-cmp-surface-border);
3467
+ --publish-trigger-text: var(--owo-cmp-text-primary);
3468
+ --publish-trigger-active-bg: var(--owo-cmp-accent-bg-muted);
3469
+ --publish-popover-bg: var(--owo-cmp-surface-bg);
3470
+ --publish-popover-border: var(--owo-cmp-surface-border);
3471
+ --publish-popover-shadow: var(--owo-cmp-surface-shadow-strong);
3472
+ --publish-section-bg: var(--owo-cmp-surface-bg-subtle);
3473
+ --publish-section-border: var(--owo-cmp-surface-border);
3474
+ --publish-fact-title: var(--owo-cmp-text-secondary);
3475
+ --publish-fact-value: var(--owo-ref-color-neutral-900);
3476
+ --publish-muted-text: var(--owo-cmp-text-secondary);
3477
+ --publish-warning-bg: var(--owo-cmp-warning-bg);
3478
+ --publish-warning-border: var(--owo-cmp-warning-border);
3479
+ --publish-warning-text: var(--owo-cmp-warning-text);
3480
+ --publish-danger-bg: var(--owo-cmp-danger-bg);
3481
+ --publish-danger-border: var(--owo-cmp-danger-border);
3482
+ --publish-danger-text: var(--owo-cmp-danger-text);
3483
+ --publish-success-bg: var(--owo-cmp-success-bg);
3484
+ --publish-success-border: var(--owo-cmp-success-border);
3485
+ --publish-success-text: var(--owo-cmp-success-text);
3486
+ --publish-progress-track: var(--owo-cmp-surface-bg-inset);
3487
+ --publish-progress-fill: var(--owo-cmp-accent-bg);
3488
+ --feedback-neutral-bg: var(--owo-cmp-surface-bg-raised);
3489
+ --feedback-neutral-border: var(--owo-cmp-surface-border);
3490
+ --feedback-neutral-text: var(--owo-cmp-text-primary);
3491
+ --feedback-neutral-icon: var(--owo-cmp-text-secondary);
3492
+ --feedback-info-bg: var(--owo-cmp-info-bg);
3493
+ --feedback-info-border: var(--owo-cmp-info-border);
3494
+ --feedback-info-text: var(--owo-cmp-info-text);
3495
+ --feedback-info-icon: var(--owo-cmp-info-text);
3496
+ --feedback-success-bg: var(--owo-cmp-success-bg);
3497
+ --feedback-success-border: var(--owo-cmp-success-border);
3498
+ --feedback-success-text: var(--owo-cmp-success-text);
3499
+ --feedback-success-icon: var(--owo-cmp-success-text);
3500
+ --feedback-warning-bg: var(--owo-cmp-warning-bg);
3501
+ --feedback-warning-border: var(--owo-cmp-warning-border);
3502
+ --feedback-warning-text: var(--owo-cmp-warning-text);
3503
+ --feedback-warning-icon: var(--owo-cmp-warning-text);
3504
+ --feedback-danger-bg: var(--owo-cmp-danger-bg);
3505
+ --feedback-danger-border: var(--owo-cmp-danger-border);
3506
+ --feedback-danger-text: var(--owo-cmp-danger-text);
3507
+ --feedback-danger-icon: var(--owo-cmp-danger-text);
3508
+ --toast-shadow: var(--owo-cmp-surface-shadow-strong);
3439
3509
  --skeleton-bg: linear-gradient(
3440
3510
  180deg,
3441
- var(--ui-surface-bg-inset) 0%,
3442
- var(--ui-surface-bg-inset) 100%
3511
+ var(--owo-cmp-surface-bg-inset) 0%,
3512
+ var(--owo-cmp-surface-bg-inset) 100%
3443
3513
  );
3444
3514
  @supports (color: color-mix(in lab, red, red)) {
3445
3515
  --skeleton-bg: linear-gradient(
3446
3516
  180deg,
3447
- color-mix(in srgb, var(--ui-surface-bg-inset) 94%, white) 0%,
3448
- color-mix(in srgb, var(--ui-surface-bg-inset) 100%, var(--ui-surface-border)) 100%
3517
+ color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 94%, white) 0%,
3518
+ color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 100%, var(--owo-cmp-surface-border)) 100%
3449
3519
  );
3450
3520
  }
3451
3521
  --skeleton-bg-emphasis: linear-gradient(
3452
3522
  180deg,
3453
- var(--ui-surface-bg-subtle) 0%,
3454
- var(--ui-surface-bg-inset) 100%
3523
+ var(--owo-cmp-surface-bg-subtle) 0%,
3524
+ var(--owo-cmp-surface-bg-inset) 100%
3455
3525
  );
3456
3526
  @supports (color: color-mix(in lab, red, red)) {
3457
3527
  --skeleton-bg-emphasis: linear-gradient(
3458
3528
  180deg,
3459
- color-mix(in srgb, var(--ui-surface-bg-subtle) 78%, var(--color-highlight-soft)) 0%,
3460
- color-mix(in srgb, var(--ui-surface-bg-inset) 86%, var(--ui-surface-border)) 100%
3529
+ color-mix(in srgb, var(--owo-cmp-surface-bg-subtle) 78%, var(--owo-ref-color-highlight-soft)) 0%,
3530
+ color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 86%, var(--owo-cmp-surface-border)) 100%
3461
3531
  );
3462
3532
  }
3463
3533
  --skeleton-sheen: linear-gradient(
@@ -3465,7 +3535,7 @@
3465
3535
  transparent 0%,
3466
3536
  color-mix(in srgb, rgba(255, 255, 255, 0.34) 10%, transparent) 28%,
3467
3537
  color-mix(in srgb, rgba(255, 255, 255, 0.34) 35%, transparent) 40%,
3468
- var(--color-highlight-sheen) 50%,
3538
+ var(--owo-ref-color-highlight-sheen) 50%,
3469
3539
  color-mix(in srgb, rgba(255, 255, 255, 0.34) 35%, transparent) 60%,
3470
3540
  color-mix(in srgb, rgba(255, 255, 255, 0.34) 10%, transparent) 72%,
3471
3541
  transparent 100%
@@ -3474,215 +3544,223 @@
3474
3544
  --skeleton-sheen: linear-gradient(
3475
3545
  100deg,
3476
3546
  transparent 0%,
3477
- color-mix(in srgb, var(--color-highlight-sheen) 10%, transparent) 28%,
3478
- color-mix(in srgb, var(--color-highlight-sheen) 35%, transparent) 40%,
3479
- var(--color-highlight-sheen) 50%,
3480
- color-mix(in srgb, var(--color-highlight-sheen) 35%, transparent) 60%,
3481
- color-mix(in srgb, var(--color-highlight-sheen) 10%, transparent) 72%,
3547
+ color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 28%,
3548
+ color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 40%,
3549
+ var(--owo-ref-color-highlight-sheen) 50%,
3550
+ color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 60%,
3551
+ color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 72%,
3482
3552
  transparent 100%
3483
3553
  );
3484
3554
  }
3485
- --skeleton-top-highlight: var(--color-highlight-soft);
3486
- --workspace-transition-veil-bg: var(--color-overlay-soft);
3555
+ --skeleton-top-highlight: var(--owo-ref-color-highlight-soft);
3556
+ --workspace-transition-veil-bg: var(--owo-ref-color-overlay-soft);
3487
3557
  --workspace-transition-stale-bg: color-mix(in srgb, rgba(244, 238, 230, 0.56) 72%, transparent);
3488
3558
  @supports (color: color-mix(in lab, red, red)) {
3489
- --workspace-transition-stale-bg: color-mix(in srgb, var(--color-overlay-soft) 72%, transparent);
3559
+ --workspace-transition-stale-bg: color-mix(in srgb, var(--owo-ref-color-overlay-soft) 72%, transparent);
3490
3560
  }
3491
- --tooltip-shadow: var(--ui-surface-shadow-strong);
3492
- --select-dropdown-shadow: var(--ui-surface-shadow-strong);
3493
- --theme-picker-shadow: var(--ui-surface-shadow-strong);
3494
- --drawer-panel-shadow: var(--ui-surface-shadow-strong);
3561
+ --tooltip-shadow: var(--owo-cmp-surface-shadow-strong);
3562
+ --select-dropdown-shadow: var(--owo-cmp-surface-shadow-strong);
3563
+ --drawer-panel-shadow: var(--owo-cmp-surface-shadow-strong);
3495
3564
  }
3496
3565
  :root[data-preset="elevated"], .owoui-preset-elevated {
3497
- --preset-surface-bg: var(--theme-surface-base);
3566
+ --owo-sys-preset-surface-bg: var(--owo-sys-theme-surface-base);
3498
3567
  @supports (color: color-mix(in lab, red, red)) {
3499
- --preset-surface-bg: color-mix(in srgb, var(--theme-surface-base) 96%, var(--theme-surface-border-strong));
3568
+ --owo-sys-preset-surface-bg: color-mix(in srgb, var(--owo-sys-theme-surface-base) 96%, var(--owo-sys-theme-surface-border-strong));
3500
3569
  }
3501
- --preset-surface-bg-subtle: var(--theme-surface-subtle);
3570
+ --owo-sys-preset-surface-bg-subtle: var(--owo-sys-theme-surface-subtle);
3502
3571
  @supports (color: color-mix(in lab, red, red)) {
3503
- --preset-surface-bg-subtle: color-mix(in srgb, var(--theme-surface-subtle) 96%, var(--theme-surface-border-strong));
3572
+ --owo-sys-preset-surface-bg-subtle: color-mix(in srgb, var(--owo-sys-theme-surface-subtle) 96%, var(--owo-sys-theme-surface-border-strong));
3504
3573
  }
3505
- --preset-surface-bg-raised: var(--theme-surface-raised);
3574
+ --owo-sys-preset-surface-bg-raised: var(--owo-sys-theme-surface-raised);
3506
3575
  @supports (color: color-mix(in lab, red, red)) {
3507
- --preset-surface-bg-raised: color-mix(in srgb, var(--theme-surface-raised) 94%, var(--theme-surface-border-strong));
3576
+ --owo-sys-preset-surface-bg-raised: color-mix(in srgb, var(--owo-sys-theme-surface-raised) 94%, var(--owo-sys-theme-surface-border-strong));
3508
3577
  }
3509
- --preset-surface-bg-inset: var(--theme-surface-inset);
3510
- --preset-surface-border: var(--theme-surface-border);
3578
+ --owo-sys-preset-surface-bg-inset: var(--owo-sys-theme-surface-inset);
3579
+ --owo-sys-preset-surface-border: var(--owo-sys-theme-surface-border);
3511
3580
  @supports (color: color-mix(in lab, red, red)) {
3512
- --preset-surface-border: color-mix(in srgb, var(--theme-surface-border) 88%, var(--theme-surface-border-strong));
3513
- }
3514
- --preset-surface-border-muted: var(--theme-surface-border-muted);
3515
- --preset-surface-border-strong: var(--theme-surface-border-strong);
3516
- --preset-surface-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
3517
- --preset-surface-shadow-strong: 0 28px 60px rgba(15, 23, 42, 0.18);
3518
- --preset-surface-blur: 0px;
3519
- --preset-canvas-bg: var(--theme-surface-canvas);
3520
- --preset-canvas-bg-subtle: var(--theme-canvas-bg-subtle);
3521
- --preset-surface-container: var(--theme-surface-container);
3581
+ --owo-sys-preset-surface-border: color-mix(in srgb, var(--owo-sys-theme-surface-border) 88%, var(--owo-sys-theme-surface-border-strong));
3582
+ }
3583
+ --owo-sys-preset-surface-border-muted: var(--owo-sys-theme-surface-border-muted);
3584
+ --owo-sys-preset-surface-border-strong: var(--owo-sys-theme-surface-border-strong);
3585
+ --owo-sys-preset-surface-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
3586
+ --owo-sys-preset-surface-shadow-strong: 0 28px 60px rgba(15, 23, 42, 0.18);
3587
+ --owo-sys-preset-surface-blur: 0px;
3588
+ --owo-sys-preset-canvas-bg: var(--owo-sys-theme-surface-canvas);
3589
+ --owo-sys-preset-canvas-bg-subtle: var(--owo-sys-theme-canvas-bg-subtle);
3590
+ --owo-sys-preset-surface-container: var(--owo-sys-theme-surface-container);
3522
3591
  @supports (color: color-mix(in lab, red, red)) {
3523
- --preset-surface-container: color-mix(in srgb, var(--theme-surface-container) 94%, var(--theme-surface-border-strong));
3592
+ --owo-sys-preset-surface-container: color-mix(in srgb, var(--owo-sys-theme-surface-container) 94%, var(--owo-sys-theme-surface-border-strong));
3524
3593
  }
3525
- --preset-surface-container-high: var(--theme-surface-container-high);
3594
+ --owo-sys-preset-surface-container-high: var(--owo-sys-theme-surface-container-high);
3526
3595
  @supports (color: color-mix(in lab, red, red)) {
3527
- --preset-surface-container-high: color-mix(in srgb, var(--theme-surface-container-high) 94%, var(--theme-surface-border-strong));
3596
+ --owo-sys-preset-surface-container-high: color-mix(in srgb, var(--owo-sys-theme-surface-container-high) 94%, var(--owo-sys-theme-surface-border-strong));
3528
3597
  }
3529
- --preset-surface-container-highest: var(--theme-surface-container-highest);
3598
+ --owo-sys-preset-surface-container-highest: var(--owo-sys-theme-surface-container-highest);
3530
3599
  @supports (color: color-mix(in lab, red, red)) {
3531
- --preset-surface-container-highest: color-mix(in srgb, var(--theme-surface-container-highest) 92%, var(--theme-surface-border-strong));
3600
+ --owo-sys-preset-surface-container-highest: color-mix(in srgb, var(--owo-sys-theme-surface-container-highest) 92%, var(--owo-sys-theme-surface-border-strong));
3532
3601
  }
3533
- --preset-control-radius-sm: 0.625rem;
3534
- --preset-control-radius-md: 0.875rem;
3535
- --preset-control-radius-lg: 1.125rem;
3536
- --preset-control-radius-xl: 1.625rem;
3537
- --preset-control-radius-2xl: 2.125rem;
3538
- --preset-control-border-width: 1px;
3602
+ --owo-sys-preset-control-radius-sm: calc(var(--owo-ref-radius-sm) + 0.125rem);
3603
+ --owo-sys-preset-control-radius-md: calc(var(--owo-ref-radius-md) + 0.125rem);
3604
+ --owo-sys-preset-control-radius-lg: calc(var(--owo-ref-radius-lg) + 0.125rem);
3605
+ --owo-sys-preset-control-radius-xl: calc(var(--owo-ref-radius-xl) + 0.125rem);
3606
+ --owo-sys-preset-control-radius-2xl: calc(var(--owo-ref-radius-2xl) + 0.125rem);
3607
+ --owo-sys-preset-control-radius-full: var(--owo-ref-radius-full);
3608
+ --owo-sys-preset-control-border-width: 1px;
3539
3609
  }
3540
3610
  :root {
3541
- --preset-surface-bg: var(--theme-surface-base);
3542
- --preset-surface-bg-subtle: var(--theme-surface-subtle);
3543
- --preset-surface-bg-raised: var(--theme-surface-raised);
3544
- --preset-surface-bg-inset: var(--theme-surface-inset);
3545
- --preset-surface-border: var(--theme-surface-border);
3546
- --preset-surface-border-muted: var(--theme-surface-border-muted);
3547
- --preset-surface-border-strong: var(--theme-surface-border-strong);
3548
- --preset-surface-shadow: var(--shadow-raised);
3549
- --preset-surface-shadow-strong: var(--shadow-popover);
3550
- --preset-surface-blur: 0px;
3551
- --preset-canvas-bg: var(--theme-surface-canvas);
3552
- --preset-canvas-bg-subtle: var(--theme-canvas-bg-subtle);
3553
- --preset-surface-container: var(--theme-surface-container);
3554
- --preset-surface-container-high: var(--theme-surface-container-high);
3555
- --preset-surface-container-highest: var(--theme-surface-container-highest);
3556
- --preset-control-radius-sm: 0.5rem;
3557
- --preset-control-radius-md: 0.75rem;
3558
- --preset-control-radius-lg: 1rem;
3559
- --preset-control-radius-xl: 1.5rem;
3560
- --preset-control-radius-2xl: 2rem;
3561
- --preset-control-border-width: 1px;
3562
- --ui-surface-bg: var(--preset-surface-bg);
3563
- --ui-surface-bg-subtle: var(--preset-surface-bg-subtle);
3564
- --ui-surface-bg-raised: var(--preset-surface-bg-raised);
3565
- --ui-surface-bg-inset: var(--preset-surface-bg-inset);
3566
- --ui-surface-border: var(--preset-surface-border);
3567
- --ui-surface-border-muted: var(--preset-surface-border-muted);
3568
- --ui-surface-border-strong: var(--preset-surface-border-strong);
3569
- --ui-surface-shadow: var(--preset-surface-shadow);
3570
- --ui-surface-shadow-strong: var(--preset-surface-shadow-strong);
3571
- --ui-surface-blur: var(--preset-surface-blur);
3572
- --ui-canvas-bg: var(--preset-canvas-bg);
3573
- --ui-canvas-bg-subtle: var(--preset-canvas-bg-subtle);
3574
- --ui-surface-container: var(--preset-surface-container);
3575
- --ui-surface-container-high: var(--preset-surface-container-high);
3576
- --ui-surface-container-highest: var(--preset-surface-container-highest);
3577
- --ui-text-primary: var(--theme-text-primary);
3578
- --ui-text-secondary: var(--theme-text-secondary);
3579
- --ui-text-muted: var(--theme-text-muted);
3580
- --ui-text-on-accent: var(--theme-text-on-accent);
3581
- --ui-accent-bg: var(--theme-accent-bg);
3582
- --ui-accent-bg-hover: var(--theme-accent-bg-hover);
3583
- --ui-accent-bg-muted: var(--theme-accent-bg-muted);
3584
- --ui-accent-text: var(--theme-text-on-accent);
3585
- --ui-accent-border: var(--theme-accent-border);
3586
- --ui-success-bg: var(--theme-success-bg);
3587
- --ui-success-border: var(--theme-success-border);
3588
- --ui-success-text: var(--theme-success-text);
3589
- --ui-warning-bg: var(--theme-warning-bg);
3590
- --ui-warning-border: var(--theme-warning-border);
3591
- --ui-warning-text: var(--theme-warning-text);
3592
- --ui-danger-bg: var(--theme-danger-bg);
3593
- --ui-danger-bg-emphasis: var(--theme-danger-bg-emphasis);
3594
- --ui-danger-border: var(--theme-danger-border);
3595
- --ui-danger-text: var(--theme-danger-text);
3596
- --ui-info-bg: var(--theme-info-bg);
3597
- --ui-info-border: var(--theme-info-border);
3598
- --ui-info-text: var(--theme-info-text);
3599
- --ui-control-radius-sm: var(--preset-control-radius-sm);
3600
- --ui-control-radius-md: var(--preset-control-radius-md);
3601
- --ui-control-radius-lg: var(--preset-control-radius-lg);
3602
- --ui-control-radius-xl: var(--preset-control-radius-xl);
3603
- --ui-control-radius-2xl: var(--preset-control-radius-2xl);
3604
- --ui-control-border-width: var(--preset-control-border-width);
3605
- --ui-control-focus-ring: var(--theme-control-focus-ring);
3606
- --ui-control-focus-ring-offset: var(--theme-control-focus-ring-offset);
3607
- --ui-font-heading: var(--font-heading);
3608
- --ui-motion-duration-fast: 0.15s;
3609
- --ui-motion-duration-default: 0.2s;
3610
- --ui-motion-ease-standard: var(--ease-standard);
3611
- --ui-density-compact: 0.875;
3612
- --ui-density-default: 1;
3613
- --ui-density-comfortable: 1.125;
3611
+ --owo-sys-preset-surface-bg: var(--owo-sys-theme-surface-base);
3612
+ --owo-sys-preset-surface-bg-subtle: var(--owo-sys-theme-surface-subtle);
3613
+ --owo-sys-preset-surface-bg-raised: var(--owo-sys-theme-surface-raised);
3614
+ --owo-sys-preset-surface-bg-inset: var(--owo-sys-theme-surface-inset);
3615
+ --owo-sys-preset-surface-border: var(--owo-sys-theme-surface-border);
3616
+ --owo-sys-preset-surface-border-muted: var(--owo-sys-theme-surface-border-muted);
3617
+ --owo-sys-preset-surface-border-strong: var(--owo-sys-theme-surface-border-strong);
3618
+ --owo-sys-preset-surface-shadow: var(--owo-ref-shadow-raised);
3619
+ --owo-sys-preset-surface-shadow-strong: var(--owo-ref-shadow-popover);
3620
+ --owo-sys-preset-surface-blur: 0px;
3621
+ --owo-sys-preset-canvas-bg: var(--owo-sys-theme-surface-canvas);
3622
+ --owo-sys-preset-canvas-bg-subtle: var(--owo-sys-theme-canvas-bg-subtle);
3623
+ --owo-sys-preset-surface-container: var(--owo-sys-theme-surface-container);
3624
+ --owo-sys-preset-surface-container-high: var(--owo-sys-theme-surface-container-high);
3625
+ --owo-sys-preset-surface-container-highest: var(--owo-sys-theme-surface-container-highest);
3626
+ --owo-sys-preset-control-radius-sm: var(--owo-ref-radius-sm);
3627
+ --owo-sys-preset-control-radius-md: var(--owo-ref-radius-md);
3628
+ --owo-sys-preset-control-radius-lg: var(--owo-ref-radius-lg);
3629
+ --owo-sys-preset-control-radius-xl: var(--owo-ref-radius-xl);
3630
+ --owo-sys-preset-control-radius-2xl: var(--owo-ref-radius-2xl);
3631
+ --owo-sys-preset-control-radius-full: var(--owo-ref-radius-full);
3632
+ --owo-sys-preset-control-border-width: 1px;
3633
+ --owo-cmp-surface-bg: var(--owo-sys-preset-surface-bg);
3634
+ --owo-cmp-surface-bg-subtle: var(--owo-sys-preset-surface-bg-subtle);
3635
+ --owo-cmp-surface-bg-raised: var(--owo-sys-preset-surface-bg-raised);
3636
+ --owo-cmp-surface-bg-inset: var(--owo-sys-preset-surface-bg-inset);
3637
+ --owo-cmp-surface-border: var(--owo-sys-preset-surface-border);
3638
+ --owo-cmp-surface-border-muted: var(--owo-sys-preset-surface-border-muted);
3639
+ --owo-cmp-surface-border-strong: var(--owo-sys-preset-surface-border-strong);
3640
+ --owo-cmp-surface-shadow: var(--owo-sys-preset-surface-shadow);
3641
+ --owo-cmp-surface-shadow-strong: var(--owo-sys-preset-surface-shadow-strong);
3642
+ --owo-cmp-surface-blur: var(--owo-sys-preset-surface-blur);
3643
+ --owo-cmp-canvas-bg: var(--owo-sys-preset-canvas-bg);
3644
+ --owo-cmp-canvas-bg-subtle: var(--owo-sys-preset-canvas-bg-subtle);
3645
+ --owo-cmp-surface-container: var(--owo-sys-preset-surface-container);
3646
+ --owo-cmp-surface-container-high: var(--owo-sys-preset-surface-container-high);
3647
+ --owo-cmp-surface-container-highest: var(--owo-sys-preset-surface-container-highest);
3648
+ --owo-cmp-text-primary: var(--owo-sys-theme-text-primary);
3649
+ --owo-cmp-text-secondary: var(--owo-sys-theme-text-secondary);
3650
+ --owo-cmp-text-muted: var(--owo-sys-theme-text-muted);
3651
+ --owo-cmp-text-on-accent: var(--owo-sys-theme-text-on-accent);
3652
+ --owo-cmp-accent-bg: var(--owo-sys-theme-accent-bg);
3653
+ --owo-cmp-accent-bg-hover: var(--owo-sys-theme-accent-bg-hover);
3654
+ --owo-cmp-accent-bg-muted: var(--owo-sys-theme-accent-bg-muted);
3655
+ --owo-cmp-accent-text: var(--owo-sys-theme-text-on-accent);
3656
+ --owo-cmp-accent-border: var(--owo-sys-theme-accent-border);
3657
+ --owo-cmp-success-bg: var(--owo-sys-theme-success-bg);
3658
+ --owo-cmp-success-border: var(--owo-sys-theme-success-border);
3659
+ --owo-cmp-success-text: var(--owo-sys-theme-success-text);
3660
+ --owo-cmp-warning-bg: var(--owo-sys-theme-warning-bg);
3661
+ --owo-cmp-warning-border: var(--owo-sys-theme-warning-border);
3662
+ --owo-cmp-warning-text: var(--owo-sys-theme-warning-text);
3663
+ --owo-cmp-danger-bg: var(--owo-sys-theme-danger-bg);
3664
+ --owo-cmp-danger-bg-emphasis: var(--owo-sys-theme-danger-bg-emphasis);
3665
+ --owo-cmp-danger-border: var(--owo-sys-theme-danger-border);
3666
+ --owo-cmp-danger-text: var(--owo-sys-theme-danger-text);
3667
+ --owo-cmp-info-bg: var(--owo-sys-theme-info-bg);
3668
+ --owo-cmp-info-border: var(--owo-sys-theme-info-border);
3669
+ --owo-cmp-info-text: var(--owo-sys-theme-info-text);
3670
+ --owo-cmp-control-radius-sm: var(--owo-sys-preset-control-radius-sm);
3671
+ --owo-cmp-control-radius-md: var(--owo-sys-preset-control-radius-md);
3672
+ --owo-cmp-control-radius-lg: var(--owo-sys-preset-control-radius-lg);
3673
+ --owo-cmp-control-radius-xl: var(--owo-sys-preset-control-radius-xl);
3674
+ --owo-cmp-control-radius-2xl: var(--owo-sys-preset-control-radius-2xl);
3675
+ --owo-cmp-control-radius-full: var(--owo-sys-preset-control-radius-full);
3676
+ --owo-cmp-control-border-width: var(--owo-sys-preset-control-border-width);
3677
+ --owo-cmp-control-focus-ring: var(--owo-sys-theme-control-focus-ring);
3678
+ --owo-cmp-control-focus-ring-offset: var(--owo-sys-theme-control-focus-ring-offset);
3679
+ --owo-cmp-font-heading: var(--owo-ref-font-heading);
3680
+ --owo-cmp-motion-duration-fast: 0.15s;
3681
+ --owo-cmp-motion-duration-default: 0.2s;
3682
+ --owo-cmp-motion-ease-standard: var(--owo-ref-motion-ease-standard);
3683
+ --owo-cmp-motion-ease-decelerate: var(--owo-ref-motion-ease-decelerate);
3684
+ --owo-cmp-motion-ease-accelerate: var(--owo-ref-motion-ease-accelerate);
3685
+ --owo-cmp-density-compact: 0.875;
3686
+ --owo-cmp-density-default: 1;
3687
+ --owo-cmp-density-comfortable: 1.125;
3688
+ --owo-cmp-overlay-bg: var(--owo-sys-theme-overlay-bg);
3689
+ --owo-cmp-z-dropdown: 1000;
3690
+ --owo-cmp-z-modal: 1100;
3691
+ --owo-cmp-z-toast: 1200;
3614
3692
  --content-min-width: 320px;
3615
3693
  --content-preferred-width: 70vw;
3616
3694
  --content-max-width: 960px;
3617
3695
  --content-width: clamp(600px, 70vw, 960px);
3618
3696
  --content-padding: 24px;
3619
3697
  --header-top-margin: 64px;
3620
- --publish-trigger-bg: var(--ui-surface-bg-subtle);
3621
- --publish-trigger-border: var(--ui-surface-border);
3622
- --publish-trigger-text: var(--ui-text-primary);
3623
- --publish-trigger-active-bg: var(--ui-accent-bg-muted);
3624
- --publish-popover-bg: var(--ui-surface-bg);
3625
- --publish-popover-border: var(--ui-surface-border);
3626
- --publish-popover-shadow: var(--ui-surface-shadow-strong);
3627
- --publish-section-bg: var(--ui-surface-bg-subtle);
3628
- --publish-section-border: var(--ui-surface-border);
3629
- --publish-fact-title: var(--ui-text-secondary);
3630
- --publish-fact-value: var(--color-n900);
3631
- --publish-muted-text: var(--ui-text-secondary);
3632
- --publish-warning-bg: var(--ui-warning-bg);
3633
- --publish-warning-border: var(--ui-warning-border);
3634
- --publish-warning-text: var(--ui-warning-text);
3635
- --publish-danger-bg: var(--ui-danger-bg);
3636
- --publish-danger-border: var(--ui-danger-border);
3637
- --publish-danger-text: var(--ui-danger-text);
3638
- --publish-success-bg: var(--ui-success-bg);
3639
- --publish-success-border: var(--ui-success-border);
3640
- --publish-success-text: var(--ui-success-text);
3641
- --publish-progress-track: var(--ui-surface-bg-inset);
3642
- --publish-progress-fill: var(--ui-accent-bg);
3643
- --feedback-neutral-bg: var(--ui-surface-bg-raised);
3644
- --feedback-neutral-border: var(--ui-surface-border);
3645
- --feedback-neutral-text: var(--ui-text-primary);
3646
- --feedback-neutral-icon: var(--ui-text-secondary);
3647
- --feedback-info-bg: var(--ui-info-bg);
3648
- --feedback-info-border: var(--ui-info-border);
3649
- --feedback-info-text: var(--ui-info-text);
3650
- --feedback-info-icon: var(--ui-info-text);
3651
- --feedback-success-bg: var(--ui-success-bg);
3652
- --feedback-success-border: var(--ui-success-border);
3653
- --feedback-success-text: var(--ui-success-text);
3654
- --feedback-success-icon: var(--ui-success-text);
3655
- --feedback-warning-bg: var(--ui-warning-bg);
3656
- --feedback-warning-border: var(--ui-warning-border);
3657
- --feedback-warning-text: var(--ui-warning-text);
3658
- --feedback-warning-icon: var(--ui-warning-text);
3659
- --feedback-danger-bg: var(--ui-danger-bg);
3660
- --feedback-danger-border: var(--ui-danger-border);
3661
- --feedback-danger-text: var(--ui-danger-text);
3662
- --feedback-danger-icon: var(--ui-danger-text);
3663
- --toast-shadow: var(--ui-surface-shadow-strong);
3698
+ --publish-trigger-bg: var(--owo-cmp-surface-bg-subtle);
3699
+ --publish-trigger-border: var(--owo-cmp-surface-border);
3700
+ --publish-trigger-text: var(--owo-cmp-text-primary);
3701
+ --publish-trigger-active-bg: var(--owo-cmp-accent-bg-muted);
3702
+ --publish-popover-bg: var(--owo-cmp-surface-bg);
3703
+ --publish-popover-border: var(--owo-cmp-surface-border);
3704
+ --publish-popover-shadow: var(--owo-cmp-surface-shadow-strong);
3705
+ --publish-section-bg: var(--owo-cmp-surface-bg-subtle);
3706
+ --publish-section-border: var(--owo-cmp-surface-border);
3707
+ --publish-fact-title: var(--owo-cmp-text-secondary);
3708
+ --publish-fact-value: var(--owo-ref-color-neutral-900);
3709
+ --publish-muted-text: var(--owo-cmp-text-secondary);
3710
+ --publish-warning-bg: var(--owo-cmp-warning-bg);
3711
+ --publish-warning-border: var(--owo-cmp-warning-border);
3712
+ --publish-warning-text: var(--owo-cmp-warning-text);
3713
+ --publish-danger-bg: var(--owo-cmp-danger-bg);
3714
+ --publish-danger-border: var(--owo-cmp-danger-border);
3715
+ --publish-danger-text: var(--owo-cmp-danger-text);
3716
+ --publish-success-bg: var(--owo-cmp-success-bg);
3717
+ --publish-success-border: var(--owo-cmp-success-border);
3718
+ --publish-success-text: var(--owo-cmp-success-text);
3719
+ --publish-progress-track: var(--owo-cmp-surface-bg-inset);
3720
+ --publish-progress-fill: var(--owo-cmp-accent-bg);
3721
+ --feedback-neutral-bg: var(--owo-cmp-surface-bg-raised);
3722
+ --feedback-neutral-border: var(--owo-cmp-surface-border);
3723
+ --feedback-neutral-text: var(--owo-cmp-text-primary);
3724
+ --feedback-neutral-icon: var(--owo-cmp-text-secondary);
3725
+ --feedback-info-bg: var(--owo-cmp-info-bg);
3726
+ --feedback-info-border: var(--owo-cmp-info-border);
3727
+ --feedback-info-text: var(--owo-cmp-info-text);
3728
+ --feedback-info-icon: var(--owo-cmp-info-text);
3729
+ --feedback-success-bg: var(--owo-cmp-success-bg);
3730
+ --feedback-success-border: var(--owo-cmp-success-border);
3731
+ --feedback-success-text: var(--owo-cmp-success-text);
3732
+ --feedback-success-icon: var(--owo-cmp-success-text);
3733
+ --feedback-warning-bg: var(--owo-cmp-warning-bg);
3734
+ --feedback-warning-border: var(--owo-cmp-warning-border);
3735
+ --feedback-warning-text: var(--owo-cmp-warning-text);
3736
+ --feedback-warning-icon: var(--owo-cmp-warning-text);
3737
+ --feedback-danger-bg: var(--owo-cmp-danger-bg);
3738
+ --feedback-danger-border: var(--owo-cmp-danger-border);
3739
+ --feedback-danger-text: var(--owo-cmp-danger-text);
3740
+ --feedback-danger-icon: var(--owo-cmp-danger-text);
3741
+ --toast-shadow: var(--owo-cmp-surface-shadow-strong);
3664
3742
  --skeleton-bg: linear-gradient(
3665
3743
  180deg,
3666
- var(--ui-surface-bg-inset) 0%,
3667
- var(--ui-surface-bg-inset) 100%
3744
+ var(--owo-cmp-surface-bg-inset) 0%,
3745
+ var(--owo-cmp-surface-bg-inset) 100%
3668
3746
  );
3669
3747
  @supports (color: color-mix(in lab, red, red)) {
3670
3748
  --skeleton-bg: linear-gradient(
3671
3749
  180deg,
3672
- color-mix(in srgb, var(--ui-surface-bg-inset) 94%, white) 0%,
3673
- color-mix(in srgb, var(--ui-surface-bg-inset) 100%, var(--ui-surface-border)) 100%
3750
+ color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 94%, white) 0%,
3751
+ color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 100%, var(--owo-cmp-surface-border)) 100%
3674
3752
  );
3675
3753
  }
3676
3754
  --skeleton-bg-emphasis: linear-gradient(
3677
3755
  180deg,
3678
- var(--ui-surface-bg-subtle) 0%,
3679
- var(--ui-surface-bg-inset) 100%
3756
+ var(--owo-cmp-surface-bg-subtle) 0%,
3757
+ var(--owo-cmp-surface-bg-inset) 100%
3680
3758
  );
3681
3759
  @supports (color: color-mix(in lab, red, red)) {
3682
3760
  --skeleton-bg-emphasis: linear-gradient(
3683
3761
  180deg,
3684
- color-mix(in srgb, var(--ui-surface-bg-subtle) 78%, var(--color-highlight-soft)) 0%,
3685
- color-mix(in srgb, var(--ui-surface-bg-inset) 86%, var(--ui-surface-border)) 100%
3762
+ color-mix(in srgb, var(--owo-cmp-surface-bg-subtle) 78%, var(--owo-ref-color-highlight-soft)) 0%,
3763
+ color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 86%, var(--owo-cmp-surface-border)) 100%
3686
3764
  );
3687
3765
  }
3688
3766
  --skeleton-sheen: linear-gradient(
@@ -3690,7 +3768,7 @@
3690
3768
  transparent 0%,
3691
3769
  color-mix(in srgb, rgba(255, 255, 255, 0.34) 10%, transparent) 28%,
3692
3770
  color-mix(in srgb, rgba(255, 255, 255, 0.34) 35%, transparent) 40%,
3693
- var(--color-highlight-sheen) 50%,
3771
+ var(--owo-ref-color-highlight-sheen) 50%,
3694
3772
  color-mix(in srgb, rgba(255, 255, 255, 0.34) 35%, transparent) 60%,
3695
3773
  color-mix(in srgb, rgba(255, 255, 255, 0.34) 10%, transparent) 72%,
3696
3774
  transparent 100%
@@ -3699,77 +3777,77 @@
3699
3777
  --skeleton-sheen: linear-gradient(
3700
3778
  100deg,
3701
3779
  transparent 0%,
3702
- color-mix(in srgb, var(--color-highlight-sheen) 10%, transparent) 28%,
3703
- color-mix(in srgb, var(--color-highlight-sheen) 35%, transparent) 40%,
3704
- var(--color-highlight-sheen) 50%,
3705
- color-mix(in srgb, var(--color-highlight-sheen) 35%, transparent) 60%,
3706
- color-mix(in srgb, var(--color-highlight-sheen) 10%, transparent) 72%,
3780
+ color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 28%,
3781
+ color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 40%,
3782
+ var(--owo-ref-color-highlight-sheen) 50%,
3783
+ color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 60%,
3784
+ color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 72%,
3707
3785
  transparent 100%
3708
3786
  );
3709
3787
  }
3710
- --skeleton-top-highlight: var(--color-highlight-soft);
3711
- --workspace-transition-veil-bg: var(--color-overlay-soft);
3788
+ --skeleton-top-highlight: var(--owo-ref-color-highlight-soft);
3789
+ --workspace-transition-veil-bg: var(--owo-ref-color-overlay-soft);
3712
3790
  --workspace-transition-stale-bg: color-mix(in srgb, rgba(244, 238, 230, 0.56) 72%, transparent);
3713
3791
  @supports (color: color-mix(in lab, red, red)) {
3714
- --workspace-transition-stale-bg: color-mix(in srgb, var(--color-overlay-soft) 72%, transparent);
3792
+ --workspace-transition-stale-bg: color-mix(in srgb, var(--owo-ref-color-overlay-soft) 72%, transparent);
3715
3793
  }
3716
- --tooltip-shadow: var(--ui-surface-shadow-strong);
3717
- --select-dropdown-shadow: var(--ui-surface-shadow-strong);
3718
- --theme-picker-shadow: var(--ui-surface-shadow-strong);
3719
- --drawer-panel-shadow: var(--ui-surface-shadow-strong);
3794
+ --tooltip-shadow: var(--owo-cmp-surface-shadow-strong);
3795
+ --select-dropdown-shadow: var(--owo-cmp-surface-shadow-strong);
3796
+ --drawer-panel-shadow: var(--owo-cmp-surface-shadow-strong);
3720
3797
  }
3721
3798
  :root[data-preset="glass"], .owoui-preset-glass {
3722
- --preset-surface-bg: var(--theme-surface-base);
3799
+ --owo-sys-preset-surface-bg: var(--owo-sys-theme-surface-base);
3723
3800
  @supports (color: color-mix(in lab, red, red)) {
3724
- --preset-surface-bg: color-mix(in srgb, var(--theme-surface-base) 62%, transparent);
3801
+ --owo-sys-preset-surface-bg: color-mix(in srgb, var(--owo-sys-theme-surface-base) 62%, transparent);
3725
3802
  }
3726
- --preset-surface-bg-subtle: var(--theme-surface-subtle);
3803
+ --owo-sys-preset-surface-bg-subtle: var(--owo-sys-theme-surface-subtle);
3727
3804
  @supports (color: color-mix(in lab, red, red)) {
3728
- --preset-surface-bg-subtle: color-mix(in srgb, var(--theme-surface-subtle) 48%, transparent);
3805
+ --owo-sys-preset-surface-bg-subtle: color-mix(in srgb, var(--owo-sys-theme-surface-subtle) 48%, transparent);
3729
3806
  }
3730
- --preset-surface-bg-raised: var(--theme-surface-raised);
3807
+ --owo-sys-preset-surface-bg-raised: var(--owo-sys-theme-surface-raised);
3731
3808
  @supports (color: color-mix(in lab, red, red)) {
3732
- --preset-surface-bg-raised: color-mix(in srgb, var(--theme-surface-raised) 72%, transparent);
3809
+ --owo-sys-preset-surface-bg-raised: color-mix(in srgb, var(--owo-sys-theme-surface-raised) 72%, transparent);
3733
3810
  }
3734
- --preset-surface-bg-inset: var(--theme-surface-inset);
3811
+ --owo-sys-preset-surface-bg-inset: var(--owo-sys-theme-surface-inset);
3735
3812
  @supports (color: color-mix(in lab, red, red)) {
3736
- --preset-surface-bg-inset: color-mix(in srgb, var(--theme-surface-inset) 82%, transparent);
3813
+ --owo-sys-preset-surface-bg-inset: color-mix(in srgb, var(--owo-sys-theme-surface-inset) 82%, transparent);
3737
3814
  }
3738
- --preset-surface-border: var(--theme-surface-border-strong);
3815
+ --owo-sys-preset-surface-border: var(--owo-sys-theme-surface-border-strong);
3739
3816
  @supports (color: color-mix(in lab, red, red)) {
3740
- --preset-surface-border: color-mix(in srgb, var(--theme-surface-border-strong) 55%, transparent);
3817
+ --owo-sys-preset-surface-border: color-mix(in srgb, var(--owo-sys-theme-surface-border-strong) 55%, transparent);
3741
3818
  }
3742
- --preset-surface-border-muted: var(--theme-surface-border-muted);
3819
+ --owo-sys-preset-surface-border-muted: var(--owo-sys-theme-surface-border-muted);
3743
3820
  @supports (color: color-mix(in lab, red, red)) {
3744
- --preset-surface-border-muted: color-mix(in srgb, var(--theme-surface-border-muted) 60%, transparent);
3821
+ --owo-sys-preset-surface-border-muted: color-mix(in srgb, var(--owo-sys-theme-surface-border-muted) 60%, transparent);
3745
3822
  }
3746
- --preset-surface-border-strong: var(--theme-surface-border-strong);
3823
+ --owo-sys-preset-surface-border-strong: var(--owo-sys-theme-surface-border-strong);
3747
3824
  @supports (color: color-mix(in lab, red, red)) {
3748
- --preset-surface-border-strong: color-mix(in srgb, var(--theme-surface-border-strong) 78%, transparent);
3749
- }
3750
- --preset-surface-shadow: 0 16px 44px rgba(15, 23, 42, 0.1);
3751
- --preset-surface-shadow-strong: 0 24px 64px rgba(15, 23, 42, 0.14);
3752
- --preset-surface-blur: 18px;
3753
- --preset-canvas-bg: var(--theme-surface-canvas);
3754
- --preset-canvas-bg-subtle: var(--theme-canvas-bg-subtle);
3755
- --preset-surface-container: var(--theme-surface-container);
3825
+ --owo-sys-preset-surface-border-strong: color-mix(in srgb, var(--owo-sys-theme-surface-border-strong) 78%, transparent);
3826
+ }
3827
+ --owo-sys-preset-surface-shadow: 0 16px 44px rgba(15, 23, 42, 0.1);
3828
+ --owo-sys-preset-surface-shadow-strong: 0 24px 64px rgba(15, 23, 42, 0.14);
3829
+ --owo-sys-preset-surface-blur: 18px;
3830
+ --owo-sys-preset-canvas-bg: var(--owo-sys-theme-surface-canvas);
3831
+ --owo-sys-preset-canvas-bg-subtle: var(--owo-sys-theme-canvas-bg-subtle);
3832
+ --owo-sys-preset-surface-container: var(--owo-sys-theme-surface-container);
3756
3833
  @supports (color: color-mix(in lab, red, red)) {
3757
- --preset-surface-container: color-mix(in srgb, var(--theme-surface-container) 70%, transparent);
3834
+ --owo-sys-preset-surface-container: color-mix(in srgb, var(--owo-sys-theme-surface-container) 70%, transparent);
3758
3835
  }
3759
- --preset-surface-container-high: var(--theme-surface-container-high);
3836
+ --owo-sys-preset-surface-container-high: var(--owo-sys-theme-surface-container-high);
3760
3837
  @supports (color: color-mix(in lab, red, red)) {
3761
- --preset-surface-container-high: color-mix(in srgb, var(--theme-surface-container-high) 74%, transparent);
3838
+ --owo-sys-preset-surface-container-high: color-mix(in srgb, var(--owo-sys-theme-surface-container-high) 74%, transparent);
3762
3839
  }
3763
- --preset-surface-container-highest: var(--theme-surface-container-highest);
3840
+ --owo-sys-preset-surface-container-highest: var(--owo-sys-theme-surface-container-highest);
3764
3841
  @supports (color: color-mix(in lab, red, red)) {
3765
- --preset-surface-container-highest: color-mix(in srgb, var(--theme-surface-container-highest) 78%, transparent);
3842
+ --owo-sys-preset-surface-container-highest: color-mix(in srgb, var(--owo-sys-theme-surface-container-highest) 78%, transparent);
3766
3843
  }
3767
- --preset-control-radius-sm: 0.75rem;
3768
- --preset-control-radius-md: 1rem;
3769
- --preset-control-radius-lg: 1.25rem;
3770
- --preset-control-radius-xl: 1.75rem;
3771
- --preset-control-radius-2xl: 2.25rem;
3772
- --preset-control-border-width: 1px;
3844
+ --owo-sys-preset-control-radius-sm: var(--owo-ref-radius-md);
3845
+ --owo-sys-preset-control-radius-md: var(--owo-ref-radius-lg);
3846
+ --owo-sys-preset-control-radius-lg: calc(var(--owo-ref-radius-lg) + 0.25rem);
3847
+ --owo-sys-preset-control-radius-xl: calc(var(--owo-ref-radius-xl) + 0.25rem);
3848
+ --owo-sys-preset-control-radius-2xl: calc(var(--owo-ref-radius-2xl) + 0.25rem);
3849
+ --owo-sys-preset-control-radius-full: var(--owo-ref-radius-full);
3850
+ --owo-sys-preset-control-border-width: 1px;
3773
3851
  }
3774
3852
  :root {
3775
3853
  --font-inter: 'Inter', sans-serif;
@@ -3783,9 +3861,9 @@
3783
3861
  }
3784
3862
  body {
3785
3863
  margin: 0;
3786
- font-family: var(--font-sans);
3787
- color: var(--ui-text-primary);
3788
- background: var(--ui-canvas-bg);
3864
+ font-family: var(--owo-ref-font-sans);
3865
+ color: var(--owo-cmp-text-primary);
3866
+ background: var(--owo-cmp-canvas-bg);
3789
3867
  line-height: 1.5;
3790
3868
  -webkit-font-smoothing: antialiased;
3791
3869
  }
@@ -3800,31 +3878,31 @@
3800
3878
  .sb-dot-grid {
3801
3879
  background-image: radial-gradient(
3802
3880
  circle at 1px 1px,
3803
- var(--ui-surface-border) 0.5px,
3881
+ var(--owo-cmp-surface-border) 0.5px,
3804
3882
  transparent 0
3805
3883
  );
3806
3884
  @supports (color: color-mix(in lab, red, red)) {
3807
3885
  background-image: radial-gradient(
3808
3886
  circle at 1px 1px,
3809
- color-mix(in srgb, var(--ui-surface-border) 50%, transparent) 0.5px,
3887
+ color-mix(in srgb, var(--owo-cmp-surface-border) 50%, transparent) 0.5px,
3810
3888
  transparent 0
3811
3889
  );
3812
3890
  }
3813
3891
  background-size: 20px 20px;
3814
3892
  }
3815
- .sb-glass-btn.ui-icon-button {
3816
- border-radius: var(--ui-control-radius-sm);
3817
- border: 1px solid var(--ui-surface-border);
3818
- background: var(--ui-surface-bg);
3893
+ .sb-glass-btn.owo-icon-button {
3894
+ border-radius: var(--owo-cmp-control-radius-sm);
3895
+ border: 1px solid var(--owo-cmp-surface-border);
3896
+ background: var(--owo-cmp-surface-bg);
3819
3897
  @supports (color: color-mix(in lab, red, red)) {
3820
- background: color-mix(in srgb, var(--ui-surface-bg) 80%, transparent);
3898
+ background: color-mix(in srgb, var(--owo-cmp-surface-bg) 80%, transparent);
3821
3899
  }
3822
3900
  backdrop-filter: blur(12px);
3823
- color: var(--ui-text-muted);
3901
+ color: var(--owo-cmp-text-muted);
3824
3902
  }
3825
- .sb-glass-btn.ui-icon-button:hover:not(:disabled) {
3826
- color: var(--ui-text-primary);
3827
- background: var(--ui-surface-bg);
3903
+ .sb-glass-btn.owo-icon-button:hover:not(:disabled) {
3904
+ color: var(--owo-cmp-text-primary);
3905
+ background: var(--owo-cmp-surface-bg);
3828
3906
  }
3829
3907
  .sb-sidebar::-webkit-scrollbar {
3830
3908
  width: 4px;
@@ -3833,35 +3911,35 @@
3833
3911
  background: transparent;
3834
3912
  }
3835
3913
  .sb-sidebar::-webkit-scrollbar-thumb {
3836
- background: var(--ui-surface-border);
3914
+ background: var(--owo-cmp-surface-border);
3837
3915
  border-radius: 10px;
3838
3916
  }
3839
- .sb-controls .ui-select__trigger {
3917
+ .sb-controls .owo-select__trigger {
3840
3918
  min-height: unset;
3841
3919
  padding: 0.5rem 0.75rem;
3842
3920
  font-size: 0.875rem;
3843
3921
  line-height: 1.25rem;
3844
3922
  }
3845
- .sb-theme-toggle.ui-icon-button {
3923
+ .sb-theme-toggle.owo-icon-button {
3846
3924
  border-radius: 0.5rem;
3847
- border: 1px solid var(--ui-surface-border);
3925
+ border: 1px solid var(--owo-cmp-surface-border);
3848
3926
  }
3849
- .sb-sidebar-select .ui-select__trigger {
3927
+ .sb-sidebar-select .owo-select__trigger {
3850
3928
  min-height: unset;
3851
3929
  padding: 0.5rem 0.75rem;
3852
3930
  font-size: 0.75rem;
3853
3931
  line-height: 1rem;
3854
3932
  }
3855
- .sb-copy-btn.ui-button {
3933
+ .sb-copy-btn.owo-button {
3856
3934
  min-height: 2.5rem;
3857
3935
  font-size: 0.75rem;
3858
3936
  font-weight: 700;
3859
3937
  }
3860
- .sb-search-input.ui-input {
3938
+ .sb-search-input.owo-input {
3861
3939
  padding-top: 0.375rem;
3862
3940
  padding-bottom: 0.375rem;
3863
3941
  }
3864
- .sb-code-toggle.ui-button {
3942
+ .sb-code-toggle.owo-button {
3865
3943
  font-size: 0.6875rem;
3866
3944
  min-height: unset;
3867
3945
  padding: 0.25rem 0.625rem;
@@ -3873,7 +3951,7 @@
3873
3951
  background: transparent;
3874
3952
  }
3875
3953
  #sb-main::-webkit-scrollbar-thumb {
3876
- background: var(--ui-surface-border);
3954
+ background: var(--owo-cmp-surface-border);
3877
3955
  border-radius: 10px;
3878
3956
  }
3879
3957
  @property --tw-translate-x {