@pathscale/ui 1.2.9 → 1.2.11

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 (125) hide show
  1. package/LICENSE +22 -22
  2. package/README.md +59 -59
  3. package/dist/components/accordion/Accordion.css +158 -158
  4. package/dist/components/alert/Alert.css +116 -116
  5. package/dist/components/avatar/Avatar.css +124 -124
  6. package/dist/components/badge/Badge.css +164 -164
  7. package/dist/components/breadcrumbs/Breadcrumbs.css +63 -63
  8. package/dist/components/button/Button.css +194 -194
  9. package/dist/components/button-group/ButtonGroup.css +117 -117
  10. package/dist/components/calendar/Calendar.css +258 -258
  11. package/dist/components/card/Card.css +110 -110
  12. package/dist/components/chatbubble/ChatBubble.css +164 -164
  13. package/dist/components/checkbox/Checkbox.css +183 -183
  14. package/dist/components/checkbox-group/CheckboxGroup.css +10 -10
  15. package/dist/components/chip/Chip.css +197 -197
  16. package/dist/components/close-button/CloseButton.css +81 -81
  17. package/dist/components/color-area/ColorArea.css +54 -54
  18. package/dist/components/color-field/ColorField.css +88 -88
  19. package/dist/components/color-picker/ColorPicker.css +28 -28
  20. package/dist/components/color-slider/ColorSlider.css +57 -57
  21. package/dist/components/color-swatch/ColorSwatch.css +84 -84
  22. package/dist/components/color-swatch-picker/ColorSwatchPicker.css +12 -12
  23. package/dist/components/color-wheel-flower/ColorWheelFlower.css +147 -147
  24. package/dist/components/combo-box/ComboBox.css +344 -344
  25. package/dist/components/date-field/DateField.css +215 -215
  26. package/dist/components/date-picker/DatePicker.css +143 -143
  27. package/dist/components/date-range-picker/DateRangePicker.css +149 -149
  28. package/dist/components/description/Description.css +10 -10
  29. package/dist/components/disclosure/Disclosure.css +84 -84
  30. package/dist/components/disclosure-group/DisclosureGroup.css +9 -9
  31. package/dist/components/drawer/Drawer.css +463 -463
  32. package/dist/components/dropdown/Dropdown.css +211 -211
  33. package/dist/components/empty-state/EmptyState.css +39 -39
  34. package/dist/components/error-message/ErrorMessage.css +20 -20
  35. package/dist/components/field-error/FieldError.css +27 -27
  36. package/dist/components/fieldset/Fieldset.css +30 -30
  37. package/dist/components/flex/Flex.css +5 -5
  38. package/dist/components/floating-dock/FloatingDock.css +208 -208
  39. package/dist/components/footer/footer.css +51 -51
  40. package/dist/components/form/Form.css +5 -5
  41. package/dist/components/glass-panel/GlassPanel.css +359 -359
  42. package/dist/components/glow-card/GlowCard.css +100 -100
  43. package/dist/components/grid/Grid.css +5 -5
  44. package/dist/components/header/Header.css +13 -13
  45. package/dist/components/icon/Icon.css +10 -10
  46. package/dist/components/immersive-landing/ImmersiveLanding.css +565 -565
  47. package/dist/components/input/Input.css +155 -155
  48. package/dist/components/input-group/InputGroup.css +172 -172
  49. package/dist/components/input-otp/InputOTP.css +170 -170
  50. package/dist/components/kbd/Kbd.css +60 -60
  51. package/dist/components/label/Label.css +30 -30
  52. package/dist/components/language-switcher/LanguageSwitcher.css +56 -56
  53. package/dist/components/link/Link.css +131 -131
  54. package/dist/components/list-box/ListBox.css +148 -148
  55. package/dist/components/live-chat/LiveChat.css +324 -324
  56. package/dist/components/menu/Menu.css +199 -199
  57. package/dist/components/metal-border/MetalBorder.classes.d.ts +26 -0
  58. package/dist/components/metal-border/MetalBorder.classes.js +27 -0
  59. package/dist/components/metal-border/MetalBorder.css +40 -0
  60. package/dist/components/metal-border/MetalBorder.d.ts +20 -0
  61. package/dist/components/metal-border/MetalBorder.js +322 -0
  62. package/dist/components/metal-border/engine/color.d.ts +4 -0
  63. package/dist/components/metal-border/engine/color.js +69 -0
  64. package/dist/components/metal-border/engine/glow/geometry.d.ts +35 -0
  65. package/dist/components/metal-border/engine/glow/geometry.js +176 -0
  66. package/dist/components/metal-border/engine/glow/glow.d.ts +38 -0
  67. package/dist/components/metal-border/engine/glow/glow.js +246 -0
  68. package/dist/components/metal-border/engine/index.d.ts +4 -0
  69. package/dist/components/metal-border/engine/index.js +2 -0
  70. package/dist/components/metal-border/engine/perfConfig.d.ts +9 -0
  71. package/dist/components/metal-border/engine/perfConfig.js +10 -0
  72. package/dist/components/metal-border/engine/presets.d.ts +57 -0
  73. package/dist/components/metal-border/engine/presets.js +214 -0
  74. package/dist/components/metal-border/engine/renderer/core.d.ts +69 -0
  75. package/dist/components/metal-border/engine/renderer/core.js +156 -0
  76. package/dist/components/metal-border/engine/renderer/loop.d.ts +30 -0
  77. package/dist/components/metal-border/engine/renderer/loop.js +248 -0
  78. package/dist/components/metal-border/engine/renderer/sampling.d.ts +14 -0
  79. package/dist/components/metal-border/engine/renderer/sampling.js +145 -0
  80. package/dist/components/metal-border/engine/shaders.d.ts +36 -0
  81. package/dist/components/metal-border/engine/shaders.js +215 -0
  82. package/dist/components/metal-border/engine/tween.d.ts +17 -0
  83. package/dist/components/metal-border/engine/tween.js +28 -0
  84. package/dist/components/metal-border/index.d.ts +2 -0
  85. package/dist/components/metal-border/index.js +1 -0
  86. package/dist/components/meter/Meter.css +89 -89
  87. package/dist/components/modal/Modal.css +320 -320
  88. package/dist/components/navbar/Navbar.css +110 -110
  89. package/dist/components/noise-background/NoiseBackground.css +66 -66
  90. package/dist/components/number-field/NumberField.css +198 -198
  91. package/dist/components/pagination/Pagination.css +121 -121
  92. package/dist/components/popover/Popover.css +117 -117
  93. package/dist/components/progress-bar/ProgressBar.css +104 -104
  94. package/dist/components/progress-circle/ProgressCircle.css +82 -82
  95. package/dist/components/radio/Radio.css +129 -129
  96. package/dist/components/radio-group/RadioGroup.css +58 -58
  97. package/dist/components/range-calendar/RangeCalendar.css +51 -51
  98. package/dist/components/scroll-shadow/ScrollShadow.css +93 -93
  99. package/dist/components/search-field/SearchField.css +183 -183
  100. package/dist/components/select/Select.css +284 -284
  101. package/dist/components/separator/Separator.css +35 -35
  102. package/dist/components/skeleton/Skeleton.css +95 -95
  103. package/dist/components/slider/Slider.css +122 -122
  104. package/dist/components/spinner/Spinner.css +131 -131
  105. package/dist/components/surface/Surface.css +37 -37
  106. package/dist/components/table/Table.css +426 -426
  107. package/dist/components/tabs/Tabs.css +203 -203
  108. package/dist/components/tag/Tag.css +121 -121
  109. package/dist/components/tag-group/TagGroup.css +22 -22
  110. package/dist/components/text/Text.css +66 -66
  111. package/dist/components/text-area/TextArea.css +95 -95
  112. package/dist/components/text-field/TextField.css +33 -33
  113. package/dist/components/time-field/TimeField.css +215 -215
  114. package/dist/components/toast/Toast.css +344 -344
  115. package/dist/components/toggle/Toggle.css +237 -237
  116. package/dist/components/toolbar/Toolbar.css +55 -55
  117. package/dist/components/tooltip/Tooltip.css +153 -153
  118. package/dist/index.css +74 -74
  119. package/dist/index.d.ts +2 -0
  120. package/dist/index.js +1 -0
  121. package/dist/purge-manifest.json +15100 -14847
  122. package/dist/styles/base/index.css +43 -43
  123. package/dist/styles/themes/dark.css +141 -141
  124. package/dist/styles/themes/light.css +143 -143
  125. package/package.json +3 -3
@@ -1,43 +1,43 @@
1
- @layer base {
2
- html {
3
- scrollbar-color: var(--color-base-300) transparent;
4
- }
5
-
6
- body {
7
- color: var(--color-base-content);
8
- background: var(--color-base-100);
9
- overflow-x: clip;
10
- touch-action: manipulation;
11
- }
12
-
13
- *::selection {
14
- color: var(--color-primary-content);
15
- background: var(--color-primary);
16
- }
17
-
18
- .resize-y {
19
- resize: vertical;
20
- }
21
-
22
- .resize-x {
23
- resize: horizontal;
24
- }
25
-
26
- .resize-both {
27
- resize: both;
28
- }
29
-
30
- .resize-none {
31
- resize: none;
32
- }
33
- }
34
-
35
- @layer components {
36
- .table tr.active {
37
- background-color: var(--b2);
38
- }
39
-
40
- .table.table-hover tbody tr:hover {
41
- background-color: var(--b2);
42
- }
43
- }
1
+ @layer base {
2
+ html {
3
+ scrollbar-color: var(--color-base-300) transparent;
4
+ }
5
+
6
+ body {
7
+ color: var(--color-base-content);
8
+ background: var(--color-base-100);
9
+ overflow-x: clip;
10
+ touch-action: manipulation;
11
+ }
12
+
13
+ *::selection {
14
+ color: var(--color-primary-content);
15
+ background: var(--color-primary);
16
+ }
17
+
18
+ .resize-y {
19
+ resize: vertical;
20
+ }
21
+
22
+ .resize-x {
23
+ resize: horizontal;
24
+ }
25
+
26
+ .resize-both {
27
+ resize: both;
28
+ }
29
+
30
+ .resize-none {
31
+ resize: none;
32
+ }
33
+ }
34
+
35
+ @layer components {
36
+ .table tr.active {
37
+ background-color: var(--b2);
38
+ }
39
+
40
+ .table.table-hover tbody tr:hover {
41
+ background-color: var(--b2);
42
+ }
43
+ }
@@ -1,141 +1,141 @@
1
- @layer theme {
2
- [data-theme="dark"] {
3
- /* Base colors */
4
- --color-primary: var(--color-blue-500);
5
- --color-primary-content: var(--color-white);
6
- --color-secondary: var(--color-purple-500);
7
- --color-secondary-content: var(--color-white);
8
- --color-accent: var(--color-sky-500);
9
- --color-accent-content: var(--color-white);
10
- --color-accent-foreground: var(--color-white);
11
- --color-accent-soft: color-mix(
12
- in oklab,
13
- var(--color-sky-500) 20%,
14
- var(--color-gray-900)
15
- );
16
- --color-accent-soft-foreground: var(--color-sky-400);
17
- --color-accent-soft-hover: color-mix(
18
- in oklab,
19
- var(--color-sky-500) 28%,
20
- var(--color-gray-900)
21
- );
22
- --color-accent-hover: var(--color-sky-400);
23
- --color-neutral: var(--color-gray-700);
24
- --color-neutral-content: var(--color-gray-100);
25
-
26
- /* Semantic colors */
27
- --color-info: var(--color-blue-400);
28
- --color-info-content: var(--color-gray-900);
29
- --color-success: var(--color-emerald-500);
30
- --color-success-content: var(--color-gray-900);
31
- --color-success-foreground: var(--color-white);
32
- --color-success-soft: color-mix(
33
- in oklab,
34
- var(--color-emerald-500) 20%,
35
- var(--color-gray-900)
36
- );
37
- --color-success-soft-foreground: var(--color-emerald-400);
38
- --color-warning: var(--color-amber-400);
39
- --color-warning-content: var(--color-gray-900);
40
- --color-warning-foreground: var(--color-gray-900);
41
- --color-warning-soft: color-mix(
42
- in oklab,
43
- var(--color-amber-400) 20%,
44
- var(--color-gray-900)
45
- );
46
- --color-warning-soft-foreground: var(--color-amber-300);
47
- --color-error: var(--color-rose-500);
48
- --color-error-content: var(--color-white);
49
- --color-danger: var(--color-rose-500);
50
- --color-danger-foreground: var(--color-white);
51
- --color-danger-soft: color-mix(
52
- in oklab,
53
- var(--color-rose-500) 20%,
54
- var(--color-gray-900)
55
- );
56
- --color-danger-soft-foreground: var(--color-rose-400);
57
-
58
- /* HeroUI generic tokens */
59
- --color-default: var(--color-gray-700);
60
- --color-default-foreground: var(--color-gray-100);
61
- --color-default-hover: var(--color-gray-600);
62
- --color-background: var(--color-gray-900);
63
- --color-foreground: var(--color-gray-100);
64
-
65
- /* Base background colors */
66
- --color-base-100: var(--color-gray-900);
67
- --color-base-200: var(--color-gray-800);
68
- --color-base-300: var(--color-gray-700);
69
- --color-base-content: var(--color-gray-100);
70
-
71
- /* Legacy support */
72
- --color-bg-body: var(--color-gray-900);
73
- --color-bg-inverse: var(--color-white);
74
- --color-bg-primary: var(--color-gray-800);
75
- --color-bg-secondary: var(--color-gray-700);
76
- --color-bg-tertiary: var(--color-gray-600);
77
- --color-bg-positive: var(--color-emerald-500);
78
- --color-bg-destructive: var(--color-rose-500);
79
-
80
- --color-fg-body: var(--color-gray-100);
81
- --color-fg-inverse: var(--color-gray-900);
82
- --color-fg-primary: var(--color-gray-200);
83
- --color-fg-secondary: var(--color-gray-300);
84
- --color-fg-tertiary: var(--color-gray-400);
85
- --color-fg-positive: var(--color-emerald-400);
86
- --color-fg-destructive: var(--color-rose-400);
87
-
88
- /* Daisy-compatible aliases and structural tokens */
89
- --b1: var(--color-base-100);
90
- --b2: var(--color-base-200);
91
- --b3: var(--color-base-300);
92
- --bc: var(--color-base-content);
93
- --radius-selector: 0.375rem;
94
- --radius-field: 0.375rem;
95
- --radius-box: 0.75rem;
96
- --size-selector: 0.25rem;
97
- --size-field: 0.25rem;
98
- --border: 1px;
99
- --depth: 0;
100
- --noise: 1;
101
-
102
- /* Glass surface tokens */
103
- --glass-background-color: white;
104
- --glass-background-opacity: 0.96%;
105
- --glass-border-color: white;
106
- --glass-border-opacity: 30%;
107
- --glass-highlight-color: white;
108
- --glass-highlight-opacity: 6.4%;
109
- --glass-bottom-highlight-opacity: 3.2%;
110
- --glass-edge-highlight-opacity: 8%;
111
- --glass-inner-glow-rgb: 255 255 255;
112
- --glass-inner-glow-alpha: 0.15;
113
- --glass-inner-glow-blur: 2px;
114
- --glass-inner-glow-spread: 0px;
115
- --glass-depth-top-glow-opacity: 8%;
116
- --glass-depth-bottom-glow-opacity: 12%;
117
- --glass-depth-sheen-opacity: 7.5%;
118
- --glass-depth-sheen-size: 70%;
119
- --glass-depth-surface-opacity: 0%;
120
- --glass-depth-surface-size: 82%;
121
- --glass-rim-start-color: var(--color-base-content);
122
- --glass-rim-start-opacity: 21%;
123
- --glass-rim-end-color: white;
124
- --glass-rim-end-opacity: 35%;
125
- --glass-glow-ring-opacity: 10%;
126
- --glass-liquid-edge-size: 3px;
127
- --glass-liquid-inner-blur: 18px;
128
- --glass-border-radius: 20px;
129
- --glass-blur: 50px;
130
- --glass-saturation: 1.2;
131
- --glass-brightness: 1;
132
- --glass-shadow-depth: 0 8px 32px rgb(0 0 0 / 10%);
133
- --glass-fallback-background-opacity: 78%;
134
- }
135
- }
136
-
137
- @layer base {
138
- [data-theme="dark"] {
139
- color-scheme: only dark;
140
- }
141
- }
1
+ @layer theme {
2
+ [data-theme="dark"] {
3
+ /* Base colors */
4
+ --color-primary: var(--color-blue-500);
5
+ --color-primary-content: var(--color-white);
6
+ --color-secondary: var(--color-purple-500);
7
+ --color-secondary-content: var(--color-white);
8
+ --color-accent: var(--color-sky-500);
9
+ --color-accent-content: var(--color-white);
10
+ --color-accent-foreground: var(--color-white);
11
+ --color-accent-soft: color-mix(
12
+ in oklab,
13
+ var(--color-sky-500) 20%,
14
+ var(--color-gray-900)
15
+ );
16
+ --color-accent-soft-foreground: var(--color-sky-400);
17
+ --color-accent-soft-hover: color-mix(
18
+ in oklab,
19
+ var(--color-sky-500) 28%,
20
+ var(--color-gray-900)
21
+ );
22
+ --color-accent-hover: var(--color-sky-400);
23
+ --color-neutral: var(--color-gray-700);
24
+ --color-neutral-content: var(--color-gray-100);
25
+
26
+ /* Semantic colors */
27
+ --color-info: var(--color-blue-400);
28
+ --color-info-content: var(--color-gray-900);
29
+ --color-success: var(--color-emerald-500);
30
+ --color-success-content: var(--color-gray-900);
31
+ --color-success-foreground: var(--color-white);
32
+ --color-success-soft: color-mix(
33
+ in oklab,
34
+ var(--color-emerald-500) 20%,
35
+ var(--color-gray-900)
36
+ );
37
+ --color-success-soft-foreground: var(--color-emerald-400);
38
+ --color-warning: var(--color-amber-400);
39
+ --color-warning-content: var(--color-gray-900);
40
+ --color-warning-foreground: var(--color-gray-900);
41
+ --color-warning-soft: color-mix(
42
+ in oklab,
43
+ var(--color-amber-400) 20%,
44
+ var(--color-gray-900)
45
+ );
46
+ --color-warning-soft-foreground: var(--color-amber-300);
47
+ --color-error: var(--color-rose-500);
48
+ --color-error-content: var(--color-white);
49
+ --color-danger: var(--color-rose-500);
50
+ --color-danger-foreground: var(--color-white);
51
+ --color-danger-soft: color-mix(
52
+ in oklab,
53
+ var(--color-rose-500) 20%,
54
+ var(--color-gray-900)
55
+ );
56
+ --color-danger-soft-foreground: var(--color-rose-400);
57
+
58
+ /* HeroUI generic tokens */
59
+ --color-default: var(--color-gray-700);
60
+ --color-default-foreground: var(--color-gray-100);
61
+ --color-default-hover: var(--color-gray-600);
62
+ --color-background: var(--color-gray-900);
63
+ --color-foreground: var(--color-gray-100);
64
+
65
+ /* Base background colors */
66
+ --color-base-100: var(--color-gray-900);
67
+ --color-base-200: var(--color-gray-800);
68
+ --color-base-300: var(--color-gray-700);
69
+ --color-base-content: var(--color-gray-100);
70
+
71
+ /* Legacy support */
72
+ --color-bg-body: var(--color-gray-900);
73
+ --color-bg-inverse: var(--color-white);
74
+ --color-bg-primary: var(--color-gray-800);
75
+ --color-bg-secondary: var(--color-gray-700);
76
+ --color-bg-tertiary: var(--color-gray-600);
77
+ --color-bg-positive: var(--color-emerald-500);
78
+ --color-bg-destructive: var(--color-rose-500);
79
+
80
+ --color-fg-body: var(--color-gray-100);
81
+ --color-fg-inverse: var(--color-gray-900);
82
+ --color-fg-primary: var(--color-gray-200);
83
+ --color-fg-secondary: var(--color-gray-300);
84
+ --color-fg-tertiary: var(--color-gray-400);
85
+ --color-fg-positive: var(--color-emerald-400);
86
+ --color-fg-destructive: var(--color-rose-400);
87
+
88
+ /* Daisy-compatible aliases and structural tokens */
89
+ --b1: var(--color-base-100);
90
+ --b2: var(--color-base-200);
91
+ --b3: var(--color-base-300);
92
+ --bc: var(--color-base-content);
93
+ --radius-selector: 0.375rem;
94
+ --radius-field: 0.375rem;
95
+ --radius-box: 0.75rem;
96
+ --size-selector: 0.25rem;
97
+ --size-field: 0.25rem;
98
+ --border: 1px;
99
+ --depth: 0;
100
+ --noise: 1;
101
+
102
+ /* Glass surface tokens */
103
+ --glass-background-color: white;
104
+ --glass-background-opacity: 0.96%;
105
+ --glass-border-color: white;
106
+ --glass-border-opacity: 30%;
107
+ --glass-highlight-color: white;
108
+ --glass-highlight-opacity: 6.4%;
109
+ --glass-bottom-highlight-opacity: 3.2%;
110
+ --glass-edge-highlight-opacity: 8%;
111
+ --glass-inner-glow-rgb: 255 255 255;
112
+ --glass-inner-glow-alpha: 0.15;
113
+ --glass-inner-glow-blur: 2px;
114
+ --glass-inner-glow-spread: 0px;
115
+ --glass-depth-top-glow-opacity: 8%;
116
+ --glass-depth-bottom-glow-opacity: 12%;
117
+ --glass-depth-sheen-opacity: 7.5%;
118
+ --glass-depth-sheen-size: 70%;
119
+ --glass-depth-surface-opacity: 0%;
120
+ --glass-depth-surface-size: 82%;
121
+ --glass-rim-start-color: var(--color-base-content);
122
+ --glass-rim-start-opacity: 21%;
123
+ --glass-rim-end-color: white;
124
+ --glass-rim-end-opacity: 35%;
125
+ --glass-glow-ring-opacity: 10%;
126
+ --glass-liquid-edge-size: 3px;
127
+ --glass-liquid-inner-blur: 18px;
128
+ --glass-border-radius: 20px;
129
+ --glass-blur: 50px;
130
+ --glass-saturation: 1.2;
131
+ --glass-brightness: 1;
132
+ --glass-shadow-depth: 0 8px 32px rgb(0 0 0 / 10%);
133
+ --glass-fallback-background-opacity: 78%;
134
+ }
135
+ }
136
+
137
+ @layer base {
138
+ [data-theme="dark"] {
139
+ color-scheme: only dark;
140
+ }
141
+ }
@@ -1,143 +1,143 @@
1
- @layer theme {
2
- :root:not([data-theme]),
3
- [data-theme="light"] {
4
- /* Base colors */
5
- --color-primary: var(--color-blue-600);
6
- --color-primary-content: var(--color-white);
7
- --color-secondary: var(--color-purple-600);
8
- --color-secondary-content: var(--color-white);
9
- --color-accent: var(--color-sky-600);
10
- --color-accent-content: var(--color-white);
11
- --color-accent-foreground: var(--color-white);
12
- --color-accent-soft: color-mix(
13
- in oklab,
14
- var(--color-sky-600) 15%,
15
- var(--color-white)
16
- );
17
- --color-accent-soft-foreground: var(--color-sky-700);
18
- --color-accent-soft-hover: color-mix(
19
- in oklab,
20
- var(--color-sky-600) 22%,
21
- var(--color-white)
22
- );
23
- --color-accent-hover: var(--color-sky-700);
24
- --color-neutral: var(--color-gray-600);
25
- --color-neutral-content: var(--color-white);
26
-
27
- /* Semantic colors */
28
- --color-info: var(--color-blue-500);
29
- --color-info-content: var(--color-white);
30
- --color-success: var(--color-emerald-600);
31
- --color-success-content: var(--color-white);
32
- --color-success-foreground: var(--color-white);
33
- --color-success-soft: color-mix(
34
- in oklab,
35
- var(--color-emerald-600) 15%,
36
- var(--color-white)
37
- );
38
- --color-success-soft-foreground: var(--color-emerald-700);
39
- --color-warning: var(--color-amber-500);
40
- --color-warning-content: var(--color-black);
41
- --color-warning-foreground: var(--color-black);
42
- --color-warning-soft: color-mix(
43
- in oklab,
44
- var(--color-amber-500) 15%,
45
- var(--color-white)
46
- );
47
- --color-warning-soft-foreground: var(--color-amber-700);
48
- --color-error: var(--color-rose-600);
49
- --color-error-content: var(--color-white);
50
- --color-danger: var(--color-rose-600);
51
- --color-danger-foreground: var(--color-white);
52
- --color-danger-soft: color-mix(
53
- in oklab,
54
- var(--color-rose-600) 15%,
55
- var(--color-white)
56
- );
57
- --color-danger-soft-foreground: var(--color-rose-700);
58
-
59
- /* HeroUI generic tokens */
60
- --color-default: var(--color-gray-200);
61
- --color-default-foreground: var(--color-gray-800);
62
- --color-default-hover: var(--color-gray-300);
63
- --color-background: var(--color-white);
64
- --color-foreground: var(--color-gray-900);
65
-
66
- /* Base background colors */
67
- --color-base-100: var(--color-white);
68
- --color-base-200: var(--color-gray-100);
69
- --color-base-300: var(--color-gray-200);
70
- --color-base-content: var(--color-gray-900);
71
-
72
- /* Legacy support */
73
- --color-bg-body: var(--color-white);
74
- --color-bg-inverse: var(--color-gray-900);
75
- --color-bg-primary: var(--color-gray-100);
76
- --color-bg-secondary: var(--color-gray-200);
77
- --color-bg-tertiary: var(--color-gray-300);
78
- --color-bg-positive: var(--color-emerald-600);
79
- --color-bg-destructive: var(--color-rose-600);
80
-
81
- --color-fg-body: var(--color-gray-900);
82
- --color-fg-inverse: var(--color-white);
83
- --color-fg-primary: var(--color-gray-800);
84
- --color-fg-secondary: var(--color-gray-700);
85
- --color-fg-tertiary: var(--color-gray-600);
86
- --color-fg-positive: var(--color-emerald-700);
87
- --color-fg-destructive: var(--color-rose-700);
88
-
89
- /* Daisy-compatible aliases and structural tokens */
90
- --b1: var(--color-base-100);
91
- --b2: var(--color-base-200);
92
- --b3: var(--color-base-300);
93
- --bc: var(--color-base-content);
94
- --radius-selector: 0.375rem;
95
- --radius-field: 0.375rem;
96
- --radius-box: 0.75rem;
97
- --size-selector: 0.25rem;
98
- --size-field: 0.25rem;
99
- --border: 1px;
100
- --depth: 0;
101
- --noise: 1;
102
-
103
- /* Glass surface tokens */
104
- --glass-background-color: white;
105
- --glass-background-opacity: 0.96%;
106
- --glass-border-color: white;
107
- --glass-border-opacity: 30%;
108
- --glass-highlight-color: white;
109
- --glass-highlight-opacity: 6.4%;
110
- --glass-bottom-highlight-opacity: 3.2%;
111
- --glass-edge-highlight-opacity: 8%;
112
- --glass-inner-glow-rgb: 255 255 255;
113
- --glass-inner-glow-alpha: 0.15;
114
- --glass-inner-glow-blur: 2px;
115
- --glass-inner-glow-spread: 0px;
116
- --glass-depth-top-glow-opacity: 8%;
117
- --glass-depth-bottom-glow-opacity: 12%;
118
- --glass-depth-sheen-opacity: 7.5%;
119
- --glass-depth-sheen-size: 70%;
120
- --glass-depth-surface-opacity: 0%;
121
- --glass-depth-surface-size: 82%;
122
- --glass-rim-start-color: var(--color-base-content);
123
- --glass-rim-start-opacity: 21%;
124
- --glass-rim-end-color: white;
125
- --glass-rim-end-opacity: 35%;
126
- --glass-glow-ring-opacity: 10%;
127
- --glass-liquid-edge-size: 3px;
128
- --glass-liquid-inner-blur: 18px;
129
- --glass-border-radius: 20px;
130
- --glass-blur: 50px;
131
- --glass-saturation: 1.2;
132
- --glass-brightness: 1;
133
- --glass-shadow-depth: 0 8px 32px rgb(0 0 0 / 10%);
134
- --glass-fallback-background-opacity: 78%;
135
- }
136
- }
137
-
138
- @layer base {
139
- :root:not([data-theme]),
140
- [data-theme="light"] {
141
- color-scheme: only light;
142
- }
143
- }
1
+ @layer theme {
2
+ :root:not([data-theme]),
3
+ [data-theme="light"] {
4
+ /* Base colors */
5
+ --color-primary: var(--color-blue-600);
6
+ --color-primary-content: var(--color-white);
7
+ --color-secondary: var(--color-purple-600);
8
+ --color-secondary-content: var(--color-white);
9
+ --color-accent: var(--color-sky-600);
10
+ --color-accent-content: var(--color-white);
11
+ --color-accent-foreground: var(--color-white);
12
+ --color-accent-soft: color-mix(
13
+ in oklab,
14
+ var(--color-sky-600) 15%,
15
+ var(--color-white)
16
+ );
17
+ --color-accent-soft-foreground: var(--color-sky-700);
18
+ --color-accent-soft-hover: color-mix(
19
+ in oklab,
20
+ var(--color-sky-600) 22%,
21
+ var(--color-white)
22
+ );
23
+ --color-accent-hover: var(--color-sky-700);
24
+ --color-neutral: var(--color-gray-600);
25
+ --color-neutral-content: var(--color-white);
26
+
27
+ /* Semantic colors */
28
+ --color-info: var(--color-blue-500);
29
+ --color-info-content: var(--color-white);
30
+ --color-success: var(--color-emerald-600);
31
+ --color-success-content: var(--color-white);
32
+ --color-success-foreground: var(--color-white);
33
+ --color-success-soft: color-mix(
34
+ in oklab,
35
+ var(--color-emerald-600) 15%,
36
+ var(--color-white)
37
+ );
38
+ --color-success-soft-foreground: var(--color-emerald-700);
39
+ --color-warning: var(--color-amber-500);
40
+ --color-warning-content: var(--color-black);
41
+ --color-warning-foreground: var(--color-black);
42
+ --color-warning-soft: color-mix(
43
+ in oklab,
44
+ var(--color-amber-500) 15%,
45
+ var(--color-white)
46
+ );
47
+ --color-warning-soft-foreground: var(--color-amber-700);
48
+ --color-error: var(--color-rose-600);
49
+ --color-error-content: var(--color-white);
50
+ --color-danger: var(--color-rose-600);
51
+ --color-danger-foreground: var(--color-white);
52
+ --color-danger-soft: color-mix(
53
+ in oklab,
54
+ var(--color-rose-600) 15%,
55
+ var(--color-white)
56
+ );
57
+ --color-danger-soft-foreground: var(--color-rose-700);
58
+
59
+ /* HeroUI generic tokens */
60
+ --color-default: var(--color-gray-200);
61
+ --color-default-foreground: var(--color-gray-800);
62
+ --color-default-hover: var(--color-gray-300);
63
+ --color-background: var(--color-white);
64
+ --color-foreground: var(--color-gray-900);
65
+
66
+ /* Base background colors */
67
+ --color-base-100: var(--color-white);
68
+ --color-base-200: var(--color-gray-100);
69
+ --color-base-300: var(--color-gray-200);
70
+ --color-base-content: var(--color-gray-900);
71
+
72
+ /* Legacy support */
73
+ --color-bg-body: var(--color-white);
74
+ --color-bg-inverse: var(--color-gray-900);
75
+ --color-bg-primary: var(--color-gray-100);
76
+ --color-bg-secondary: var(--color-gray-200);
77
+ --color-bg-tertiary: var(--color-gray-300);
78
+ --color-bg-positive: var(--color-emerald-600);
79
+ --color-bg-destructive: var(--color-rose-600);
80
+
81
+ --color-fg-body: var(--color-gray-900);
82
+ --color-fg-inverse: var(--color-white);
83
+ --color-fg-primary: var(--color-gray-800);
84
+ --color-fg-secondary: var(--color-gray-700);
85
+ --color-fg-tertiary: var(--color-gray-600);
86
+ --color-fg-positive: var(--color-emerald-700);
87
+ --color-fg-destructive: var(--color-rose-700);
88
+
89
+ /* Daisy-compatible aliases and structural tokens */
90
+ --b1: var(--color-base-100);
91
+ --b2: var(--color-base-200);
92
+ --b3: var(--color-base-300);
93
+ --bc: var(--color-base-content);
94
+ --radius-selector: 0.375rem;
95
+ --radius-field: 0.375rem;
96
+ --radius-box: 0.75rem;
97
+ --size-selector: 0.25rem;
98
+ --size-field: 0.25rem;
99
+ --border: 1px;
100
+ --depth: 0;
101
+ --noise: 1;
102
+
103
+ /* Glass surface tokens */
104
+ --glass-background-color: white;
105
+ --glass-background-opacity: 0.96%;
106
+ --glass-border-color: white;
107
+ --glass-border-opacity: 30%;
108
+ --glass-highlight-color: white;
109
+ --glass-highlight-opacity: 6.4%;
110
+ --glass-bottom-highlight-opacity: 3.2%;
111
+ --glass-edge-highlight-opacity: 8%;
112
+ --glass-inner-glow-rgb: 255 255 255;
113
+ --glass-inner-glow-alpha: 0.15;
114
+ --glass-inner-glow-blur: 2px;
115
+ --glass-inner-glow-spread: 0px;
116
+ --glass-depth-top-glow-opacity: 8%;
117
+ --glass-depth-bottom-glow-opacity: 12%;
118
+ --glass-depth-sheen-opacity: 7.5%;
119
+ --glass-depth-sheen-size: 70%;
120
+ --glass-depth-surface-opacity: 0%;
121
+ --glass-depth-surface-size: 82%;
122
+ --glass-rim-start-color: var(--color-base-content);
123
+ --glass-rim-start-opacity: 21%;
124
+ --glass-rim-end-color: white;
125
+ --glass-rim-end-opacity: 35%;
126
+ --glass-glow-ring-opacity: 10%;
127
+ --glass-liquid-edge-size: 3px;
128
+ --glass-liquid-inner-blur: 18px;
129
+ --glass-border-radius: 20px;
130
+ --glass-blur: 50px;
131
+ --glass-saturation: 1.2;
132
+ --glass-brightness: 1;
133
+ --glass-shadow-depth: 0 8px 32px rgb(0 0 0 / 10%);
134
+ --glass-fallback-background-opacity: 78%;
135
+ }
136
+ }
137
+
138
+ @layer base {
139
+ :root:not([data-theme]),
140
+ [data-theme="light"] {
141
+ color-scheme: only light;
142
+ }
143
+ }