@owodesign/owoui 0.1.3 → 0.1.5

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