@duskmoon-dev/core 1.14.2 → 1.16.0

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 (126) hide show
  1. package/dist/cjs/tailwind-plugin.cjs +38 -79
  2. package/dist/components/accordion.css +7 -7
  3. package/dist/components/alert.css +2 -2
  4. package/dist/components/appbar.css +5 -5
  5. package/dist/components/autocomplete.css +7 -7
  6. package/dist/components/avatar.css +5 -5
  7. package/dist/components/badge.css +3 -3
  8. package/dist/components/bottom-navigation.css +7 -7
  9. package/dist/components/bottomsheet.css +12 -12
  10. package/dist/components/button.css +19 -19
  11. package/dist/components/card.css +9 -2
  12. package/dist/components/cascader.css +9 -9
  13. package/dist/components/checkbox.css +1 -1
  14. package/dist/components/chip.css +12 -10
  15. package/dist/components/circle-menu.css +324 -0
  16. package/dist/components/code-block.css +133 -0
  17. package/dist/components/collapse.css +9 -9
  18. package/dist/components/datepicker.css +22 -22
  19. package/dist/components/dialog.css +5 -5
  20. package/dist/components/drawer.css +13 -13
  21. package/dist/components/file-upload.css +12 -12
  22. package/dist/components/form-group.css +162 -1
  23. package/dist/components/form.css +159 -22
  24. package/dist/components/index.css +1026 -385
  25. package/dist/components/input.css +23 -14
  26. package/dist/components/list.css +3 -3
  27. package/dist/components/markdown-body.css +6 -6
  28. package/dist/components/modal.css +7 -7
  29. package/dist/components/multi-select.css +16 -16
  30. package/dist/components/navigation.css +20 -20
  31. package/dist/components/nested-menu.css +5 -5
  32. package/dist/components/otp-input.css +5 -5
  33. package/dist/components/pin-input.css +5 -5
  34. package/dist/components/popover.css +15 -15
  35. package/dist/components/progress.css +2 -2
  36. package/dist/components/radio.css +2 -2
  37. package/dist/components/rating.css +1 -1
  38. package/dist/components/segment-control.css +6 -6
  39. package/dist/components/select.css +7 -7
  40. package/dist/components/skeleton.css +11 -11
  41. package/dist/components/slider.css +16 -16
  42. package/dist/components/snackbar.css +5 -5
  43. package/dist/components/stepper.css +9 -9
  44. package/dist/components/switch.css +1 -1
  45. package/dist/components/table.css +3 -3
  46. package/dist/components/textarea.css +5 -5
  47. package/dist/components/theme-controller.css +4 -4
  48. package/dist/components/time-input.css +10 -10
  49. package/dist/components/timeline.css +6 -6
  50. package/dist/components/toast.css +3 -3
  51. package/dist/components/toggle.css +8 -8
  52. package/dist/components/tooltip.css +1 -1
  53. package/dist/components/tree-select.css +14 -14
  54. package/dist/esm/components/accordion.js +7 -7
  55. package/dist/esm/components/alert.js +2 -2
  56. package/dist/esm/components/appbar.js +5 -5
  57. package/dist/esm/components/autocomplete.js +7 -7
  58. package/dist/esm/components/avatar.js +5 -5
  59. package/dist/esm/components/badge.js +3 -3
  60. package/dist/esm/components/bottom-navigation.js +7 -7
  61. package/dist/esm/components/bottomsheet.js +12 -12
  62. package/dist/esm/components/button.js +19 -19
  63. package/dist/esm/components/card.js +9 -2
  64. package/dist/esm/components/cascader.js +9 -9
  65. package/dist/esm/components/checkbox.js +1 -1
  66. package/dist/esm/components/chip.js +12 -10
  67. package/dist/esm/components/circle-menu.js +331 -0
  68. package/dist/esm/components/code-block.js +140 -0
  69. package/dist/esm/components/collapse.js +9 -9
  70. package/dist/esm/components/datepicker.js +22 -22
  71. package/dist/esm/components/dialog.js +5 -5
  72. package/dist/esm/components/drawer.js +13 -13
  73. package/dist/esm/components/file-upload.js +12 -12
  74. package/dist/esm/components/form-group.js +162 -1
  75. package/dist/esm/components/form.js +159 -22
  76. package/dist/esm/components/input.js +23 -14
  77. package/dist/esm/components/list.js +3 -3
  78. package/dist/esm/components/markdown-body.js +6 -6
  79. package/dist/esm/components/modal.js +7 -7
  80. package/dist/esm/components/multi-select.js +16 -16
  81. package/dist/esm/components/navigation.js +20 -20
  82. package/dist/esm/components/nested-menu.js +5 -5
  83. package/dist/esm/components/otp-input.js +5 -5
  84. package/dist/esm/components/pin-input.js +5 -5
  85. package/dist/esm/components/popover.js +15 -15
  86. package/dist/esm/components/progress.js +2 -2
  87. package/dist/esm/components/radio.js +2 -2
  88. package/dist/esm/components/rating.js +1 -1
  89. package/dist/esm/components/segment-control.js +6 -6
  90. package/dist/esm/components/select.js +7 -7
  91. package/dist/esm/components/skeleton.js +11 -11
  92. package/dist/esm/components/slider.js +16 -16
  93. package/dist/esm/components/snackbar.js +5 -5
  94. package/dist/esm/components/stepper.js +9 -9
  95. package/dist/esm/components/switch.js +1 -1
  96. package/dist/esm/components/table.js +3 -3
  97. package/dist/esm/components/textarea.js +5 -5
  98. package/dist/esm/components/theme-controller.js +4 -4
  99. package/dist/esm/components/time-input.js +10 -10
  100. package/dist/esm/components/timeline.js +6 -6
  101. package/dist/esm/components/toast.js +3 -3
  102. package/dist/esm/components/toggle.js +8 -8
  103. package/dist/esm/components/tooltip.js +1 -1
  104. package/dist/esm/components/tree-select.js +14 -14
  105. package/dist/esm/tailwind-plugin.js +38 -79
  106. package/dist/index.css +1435 -1137
  107. package/dist/index.min.css +1 -1
  108. package/dist/themes/{forest.css → generated/forest.css} +26 -94
  109. package/dist/themes/generated/moonlight.css +77 -0
  110. package/dist/themes/{ocean.css → generated/ocean.css} +26 -103
  111. package/dist/themes/generated/spacing.css +36 -0
  112. package/dist/themes/{sunset.css → generated/sunset.css} +26 -95
  113. package/dist/themes/generated/sunshine.css +77 -0
  114. package/dist/types/tailwind-plugin.d.ts +1 -0
  115. package/dist/types/tailwind-plugin.d.ts.map +1 -1
  116. package/dist/types/themes/generated/ts/types.d.ts +76 -0
  117. package/dist/types/themes/generated/ts/types.d.ts.map +1 -0
  118. package/dist/types/types/index.d.ts +1 -1
  119. package/dist/types/types/index.d.ts.map +1 -1
  120. package/dist/types/types/plugin.d.ts +1 -1
  121. package/dist/types/types/plugin.d.ts.map +1 -1
  122. package/dist/types/types/theme.d.ts +5 -152
  123. package/dist/types/types/theme.d.ts.map +1 -1
  124. package/package.json +11 -6
  125. package/dist/themes/moonlight.css +0 -271
  126. package/dist/themes/sunshine.css +0 -252
@@ -1,271 +0,0 @@
1
- /**
2
- * Moonlight Theme - Dark Mode
3
- * A cool, calm dark theme optimized for low-light viewing
4
- * Uses OKLCH format: "oklch(L% C H)"
5
- */
6
-
7
- [data-theme="moonlight"] {
8
- color-scheme: dark;
9
-
10
- /* ============================================
11
- * BRAND COLORS
12
- * ============================================ */
13
-
14
- /* Primary Color Family - Cool Blue */
15
- --color-primary: oklch(85.45% 0 0);
16
- --color-primary-content: oklch(14.94% 0.031 39.947);
17
- --color-primary-container: oklch(25% 0.01 0);
18
- --color-on-primary-container: oklch(85% 0.01 0);
19
-
20
- /* Secondary Color Family - Soft Teal */
21
- --color-secondary: oklch(83.33% 0.0981 73.78);
22
- --color-secondary-content: oklch(14.507% 0.035 2.72);
23
- --color-secondary-container: oklch(28% 0.03 73.78);
24
- --color-on-secondary-container: oklch(88% 0.03 73.78);
25
-
26
- /* Tertiary Color Family - Lavender */
27
- --color-tertiary: oklch(72% 0.090 255);
28
- --color-tertiary-content: oklch(14% 0.012 255);
29
- --color-tertiary-container: oklch(28% 0.030 255);
30
- --color-on-tertiary-container: oklch(88% 0.010 255);
31
-
32
- /* ============================================
33
- * SURFACE COLORS
34
- * ============================================ */
35
-
36
- --color-surface: oklch(20% 0.02 260);
37
- --color-surface-dim: oklch(17% 0.02 260);
38
- --color-surface-bright: oklch(28% 0.02 260);
39
- --color-surface-container-lowest: oklch(14% 0.02 260);
40
- --color-surface-container-low: oklch(20% 0.02 260);
41
- --color-surface-container: oklch(22% 0.02 260);
42
- --color-surface-container-high: oklch(25% 0.02 260);
43
- --color-surface-container-highest: oklch(28% 0.01 260);
44
- --color-on-surface: oklch(95% 0.01 260);
45
- --color-on-surface-variant: oklch(75% 0.01 260);
46
-
47
- /* ============================================
48
- * SEMANTIC COLORS
49
- * ============================================ */
50
-
51
- /* Info - Light Blue */
52
- --color-info: oklch(82.42% 0.09757279812867503 240.7677443360475);
53
- --color-info-content: oklch(17.111% 0.017 206.015);
54
- --color-info-container: oklch(32% 0.06 235);
55
- --color-on-info-container: oklch(88% 0.06 235);
56
-
57
- /* Success - Mint Green */
58
- --color-success: oklch(82.19% 0.0621 133.3);
59
- --color-success-content: oklch(17.112% 0.017 144.778);
60
- --color-success-container: oklch(30% 0.05 150);
61
- --color-on-success-container: oklch(85% 0.06 150);
62
-
63
- /* Warning - Warm Amber */
64
- --color-warning: oklch(76.36% 0.1752731353930708 61.96388739129725);
65
- --color-warning-content: oklch(17.113% 0.016 74.427);
66
- --color-warning-container: oklch(35% 0.06 80);
67
- --color-on-warning-container: oklch(90% 0.06 80);
68
-
69
- /* Error - Soft Red */
70
- --color-error: oklch(46.38% 0.1898 29.17);
71
- --color-error-content: oklch(86.38% 0.298 39.17);
72
- --color-error-container: oklch(30% 0.08 25);
73
- --color-on-error-container: oklch(88% 0.06 25);
74
-
75
- /* ============================================
76
- * NEUTRAL COLORS (Base Scale)
77
- * ============================================ */
78
-
79
- --color-base-100: oklch(22% 0.019 237.69);
80
- --color-base-200: oklch(20% 0.019 237.69);
81
- --color-base-300: oklch(18% 0.019 237.69);
82
- --color-base-400: oklch(26% 0.019 237.69);
83
- --color-base-500: oklch(32% 0.019 237.69);
84
- --color-base-600: oklch(40% 0.018 237.69);
85
- --color-base-700: oklch(55% 0.017 237.69);
86
- --color-base-800: oklch(70% 0.016 237.69);
87
- --color-base-900: oklch(85% 0.015 237.69);
88
- --color-base-content: oklch(77.383% 0.043 245.096);
89
-
90
-
91
- /* ============================================
92
- * OUTLINE COLORS
93
- * ============================================ */
94
-
95
- --color-outline: oklch(44% 0.01 260);
96
- --color-outline-variant: oklch(35% 0.01 260);
97
-
98
- /* ============================================
99
- * ACCENT COLORS
100
- * ============================================ */
101
-
102
- --color-accent: oklch(75.65% 0.1303 335.51);
103
- --color-accent-content: oklch(14.258% 0.033 299.844);
104
-
105
- /* ============================================
106
- * NEUTRAL COLORS
107
- * ============================================ */
108
-
109
- --color-neutral: oklch(23% 0 0);
110
- --color-neutral-content: oklch(52.43% 0 0);
111
- --color-neutral-variant: oklch(55% 0.01 260);
112
-
113
- /* ============================================
114
- * SHAPE & DEPTH
115
- * ============================================ */
116
-
117
- /* Moonlight: sleek, minimal, slightly angular */
118
- --radius-selector: 0.125rem;
119
- --radius-field: 0.375rem;
120
- --radius-box: 1rem;
121
- --size-selector: 0.125rem;
122
- --size-field: 0.125rem;
123
- --border: 1px;
124
- --depth: 0.8;
125
- --noise: 0.6;
126
-
127
- /* ============================================
128
- * SURFACE VARIANT
129
- * ============================================ */
130
-
131
- --color-surface-variant: oklch(30% 0.02 260);
132
-
133
- /* ============================================
134
- * INVERSE COLORS
135
- * ============================================ */
136
-
137
- --color-inverse-surface: oklch(95% 0.01 260);
138
- --color-inverse-on-surface: oklch(25% 0.02 260);
139
- --color-inverse-primary: oklch(55% 0.16 255);
140
-
141
- /* ============================================
142
- * SHADOW & SCRIM
143
- * ============================================ */
144
-
145
- --color-shadow: oklch(0% 0 0);
146
- --color-scrim: oklch(0% 0 0 / 60%);
147
-
148
- /* Dark-mode shadows: stronger opacity for depth on dark surfaces */
149
- --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.15);
150
- --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.25), 0 1px 2px -1px rgb(0 0 0 / 0.25);
151
- --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.25), 0 2px 4px -2px rgb(0 0 0 / 0.25);
152
- --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
153
- --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.3), 0 8px 10px -6px rgb(0 0 0 / 0.3);
154
- --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.5);
155
- }
156
-
157
- /* System preference: prefers-color-scheme dark */
158
- @media (prefers-color-scheme: dark) {
159
- :root:not([data-theme]) {
160
- color-scheme: dark;
161
-
162
- /* Brand Colors */
163
- --color-primary: oklch(85.45% 0 0);
164
- --color-primary-content: oklch(14.94% 0.031 39.947);
165
- --color-primary-container: oklch(25% 0.01 0);
166
- --color-on-primary-container: oklch(85% 0.01 0);
167
-
168
- --color-secondary: oklch(83.33% 0.0981 73.78);
169
- --color-secondary-content: oklch(14.507% 0.035 2.72);
170
- --color-secondary-container: oklch(28% 0.03 73.78);
171
- --color-on-secondary-container: oklch(88% 0.03 73.78);
172
-
173
- --color-tertiary: oklch(72% 0.090 255);
174
- --color-tertiary-content: oklch(14% 0.012 255);
175
- --color-tertiary-container: oklch(28% 0.030 255);
176
- --color-on-tertiary-container: oklch(88% 0.010 255);
177
-
178
- /* Surface Colors */
179
- --color-surface: oklch(20% 0.02 260);
180
- --color-surface-dim: oklch(17% 0.02 260);
181
- --color-surface-bright: oklch(28% 0.02 260);
182
- --color-surface-container-lowest: oklch(14% 0.02 260);
183
- --color-surface-container-low: oklch(20% 0.02 260);
184
- --color-surface-container: oklch(22% 0.02 260);
185
- --color-surface-container-high: oklch(25% 0.02 260);
186
- --color-surface-container-highest: oklch(28% 0.01 260);
187
- --color-on-surface: oklch(95% 0.01 260);
188
- --color-on-surface-variant: oklch(75% 0.01 260);
189
-
190
- /* Semantic Colors */
191
- --color-info: oklch(82.42% 0.09757279812867503 240.7677443360475);
192
- --color-info-content: oklch(17.111% 0.017 206.015);
193
- --color-info-container: oklch(32% 0.06 235);
194
- --color-on-info-container: oklch(88% 0.06 235);
195
-
196
- --color-success: oklch(82.19% 0.0621 133.3);
197
- --color-success-content: oklch(17.112% 0.017 144.778);
198
- --color-success-container: oklch(30% 0.05 150);
199
- --color-on-success-container: oklch(85% 0.06 150);
200
-
201
- --color-warning: oklch(76.36% 0.1752731353930708 61.96388739129725);
202
- --color-warning-content: oklch(17.113% 0.016 74.427);
203
- --color-warning-container: oklch(35% 0.06 80);
204
- --color-on-warning-container: oklch(90% 0.06 80);
205
-
206
- --color-error: oklch(46.38% 0.1898 29.17);
207
- --color-error-content: oklch(86.38% 0.298 39.17);
208
- --color-error-container: oklch(30% 0.08 25);
209
- --color-on-error-container: oklch(88% 0.06 25);
210
-
211
- /* Neutral Colors */
212
- --color-base-100: oklch(22% 0.019 237.69);
213
- --color-base-200: oklch(20% 0.019 237.69);
214
- --color-base-300: oklch(18% 0.019 237.69);
215
- --color-base-400: oklch(26% 0.019 237.69);
216
- --color-base-500: oklch(32% 0.019 237.69);
217
- --color-base-600: oklch(40% 0.018 237.69);
218
- --color-base-700: oklch(55% 0.017 237.69);
219
- --color-base-800: oklch(70% 0.016 237.69);
220
- --color-base-900: oklch(85% 0.015 237.69);
221
- --color-base-content: oklch(77.383% 0.043 245.096);
222
-
223
- /* Outline Colors */
224
- --color-outline: oklch(44% 0.01 260);
225
- --color-outline-variant: oklch(35% 0.01 260);
226
-
227
- /* Accent Colors */
228
- --color-accent: oklch(75.65% 0.1303 335.51);
229
- --color-accent-content: oklch(14.258% 0.033 299.844);
230
-
231
- /* Neutral Colors */
232
- --color-neutral: oklch(23% 0 0);
233
- --color-neutral-content: oklch(52.43% 0 0);
234
- --color-neutral-variant: oklch(55% 0.01 260);
235
-
236
- /* ============================================
237
- * SHAPE & DEPTH
238
- * ============================================ */
239
-
240
- /* Moonlight: sleek, minimal, slightly angular */
241
- --radius-selector: 0.125rem;
242
- --radius-field: 0.375rem;
243
- --radius-box: 1rem;
244
- --size-selector: 0.125rem;
245
- --size-field: 0.125rem;
246
- --border: 1px;
247
- --depth: 0.8;
248
- --noise: 0.6;
249
-
250
- /* Surface Variant */
251
- --color-surface-variant: oklch(30% 0.02 260);
252
-
253
- /* Inverse Colors */
254
- --color-inverse-surface: oklch(95% 0.01 260);
255
- --color-inverse-on-surface: oklch(25% 0.02 260);
256
- --color-inverse-primary: oklch(55% 0.16 255);
257
-
258
- /* Shadow & Scrim */
259
- --color-shadow: oklch(0% 0 0);
260
- --color-scrim: oklch(0% 0 0 / 60%);
261
-
262
- /* Dark-mode shadows */
263
- --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.15);
264
- --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.25), 0 1px 2px -1px rgb(0 0 0 / 0.25);
265
- --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.25), 0 2px 4px -2px rgb(0 0 0 / 0.25);
266
- --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
267
- --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.3), 0 8px 10px -6px rgb(0 0 0 / 0.3);
268
- --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.5);
269
- }
270
- }
271
-
@@ -1,252 +0,0 @@
1
- /**
2
- * Sunshine Theme - Light Mode
3
- * A warm, bright theme optimized for daylight viewing
4
- * Uses OKLCH format: "oklch(L% C H)"
5
- */
6
-
7
- [data-theme="sunshine"] {
8
- color-scheme: light;
9
-
10
- /* ============================================
11
- * BRAND COLORS
12
- * ============================================ */
13
-
14
- /* Primary Color Family - Warm Amber */
15
- --color-primary: oklch(72% 0.17 75);
16
- --color-primary-content: oklch(100% 0 0);
17
- --color-primary-container: oklch(95% 0.035 95.91);
18
- --color-on-primary-container: oklch(25% 0.03 95.91);
19
-
20
- /* Secondary Color Family - Coral Rose */
21
- --color-secondary: oklch(62% 0.19 20);
22
- --color-secondary-content: oklch(100% 0 0);
23
- --color-secondary-container: oklch(94% 0.05 87.01);
24
- --color-on-secondary-container: oklch(25% 0.05 87.01);
25
-
26
- /* Tertiary Color Family - Violet */
27
- --color-tertiary: oklch(80% 0.085 235);
28
- --color-tertiary-content: oklch(18% 0.010 235);
29
- --color-tertiary-container: oklch(95% 0.035 235);
30
- --color-on-tertiary-container: oklch(22% 0.012 235);
31
-
32
- /* ============================================
33
- * SURFACE COLORS
34
- * ============================================ */
35
-
36
- --color-surface: oklch(100% 0 0);
37
- --color-surface-dim: oklch(96% 0.01 85);
38
- --color-surface-bright: oklch(100% 0 0);
39
- --color-surface-container-lowest: oklch(100% 0 0);
40
- --color-surface-container-low: oklch(99% 0.01 85);
41
- --color-surface-container: oklch(97% 0.01 85);
42
- --color-surface-container-high: oklch(96% 0.01 85);
43
- --color-surface-container-highest: oklch(94% 0.01 85);
44
- --color-on-surface: oklch(27% 0.02 260);
45
- --color-on-surface-variant: oklch(50% 0.02 260);
46
-
47
- /* ============================================
48
- * SEMANTIC COLORS
49
- * ============================================ */
50
-
51
- /* Info - Sky Blue */
52
- --color-info: oklch(41.94% 0.114 254.39);
53
- --color-info-content: oklch(91.94% 0.114 254.39);
54
- --color-info-container: oklch(95% 0.03 235);
55
- --color-on-info-container: oklch(35% 0.08 235);
56
-
57
- /* Success - Green */
58
- --color-success: oklch(67.21% 0.19 133.55);
59
- --color-success-content: oklch(27.21% 0.19 133.55);
60
- --color-success-container: oklch(93% 0.04 150);
61
- --color-on-success-container: oklch(30% 0.08 150);
62
-
63
- /* Warning - Amber */
64
- --color-warning: oklch(68.19% 0.203 42.44);
65
- --color-warning-content: oklch(18.19% 0.6 42);
66
- --color-warning-container: oklch(93% 0.05 80);
67
- --color-on-warning-container: oklch(38% 0.10 80);
68
-
69
- /* Error - Red */
70
- --color-error: oklch(61.17% 0.237 28.15);
71
- --color-error-content: oklch(90.01% 0.153 84.78);
72
- --color-error-container: oklch(93% 0.04 25);
73
- --color-on-error-container: oklch(32% 0.10 25);
74
-
75
- /* ============================================
76
- * NEUTRAL COLORS (Base Scale)
77
- * ============================================ */
78
-
79
- --color-base-100: oklch(100% 0.005 255);
80
- --color-base-200: oklch(95% 0.008 255);
81
- --color-base-300: oklch(90% 0.01 255);
82
- --color-base-400: oklch(55% 0.06 255);
83
- --color-base-500: oklch(45% 0.05 255);
84
- --color-base-600: oklch(35% 0.04 255);
85
- --color-base-700: oklch(25% 0.03 255);
86
- --color-base-800: oklch(18% 0.02 255);
87
- --color-base-900: oklch(12% 0.01 255);
88
- --color-base-content: oklch(10% 0 255);
89
-
90
- /* ============================================
91
- * OUTLINE COLORS
92
- * ============================================ */
93
-
94
- --color-outline: oklch(75% 0.01 260);
95
- --color-outline-variant: oklch(85% 0.01 260);
96
-
97
- /* ============================================
98
- * ACCENT COLORS
99
- * ============================================ */
100
-
101
- --color-accent: oklch(85.23% 0.14 327);
102
- --color-accent-content: oklch(41% 0.112 45.904);
103
-
104
- /* ============================================
105
- * NEUTRAL COLORS
106
- * ============================================ */
107
-
108
- --color-neutral: oklch(0% 0 0);
109
- --color-neutral-content: oklch(80% 0.015 50);
110
- --color-neutral-variant: oklch(50% 0.02 260);
111
-
112
- /* ============================================
113
- * SHAPE & DEPTH
114
- * ============================================ */
115
-
116
- /* Sunshine: rounded, bubbly, soft feel */
117
- --radius-selector: 0.25rem;
118
- --radius-field: 0.625rem;
119
- --radius-box: 2rem;
120
- --size-selector: 0.1875rem;
121
- --size-field: 0.1875rem;
122
- --border: 0.5px;
123
- --depth: 1;
124
- --noise: 1;
125
-
126
- /* ============================================
127
- * SURFACE VARIANT
128
- * ============================================ */
129
-
130
- --color-surface-variant: oklch(94% 0.02 85);
131
-
132
- /* ============================================
133
- * INVERSE COLORS
134
- * ============================================ */
135
-
136
- --color-inverse-surface: oklch(25% 0.02 260);
137
- --color-inverse-on-surface: oklch(95% 0.01 260);
138
- --color-inverse-primary: oklch(80% 0.14 55);
139
-
140
- /* ============================================
141
- * SHADOW & SCRIM
142
- * ============================================ */
143
-
144
- --color-shadow: oklch(0% 0 0);
145
- --color-scrim: oklch(0% 0 0 / 50%);
146
- }
147
-
148
- /* Default theme - applies sunshine when no data-theme is set */
149
- :root {
150
- color-scheme: light;
151
-
152
- /* Brand Colors */
153
- --color-primary: oklch(72% 0.17 75);
154
- --color-primary-content: oklch(100% 0 0);
155
- --color-primary-container: oklch(95% 0.035 95.91);
156
- --color-on-primary-container: oklch(25% 0.03 95.91);
157
-
158
- --color-secondary: oklch(62% 0.19 20);
159
- --color-secondary-content: oklch(100% 0 0);
160
- --color-secondary-container: oklch(94% 0.05 87.01);
161
- --color-on-secondary-container: oklch(25% 0.05 87.01);
162
-
163
- --color-tertiary: oklch(80% 0.085 235);
164
- --color-tertiary-content: oklch(18% 0.010 235);
165
- --color-tertiary-container: oklch(95% 0.035 235);
166
- --color-on-tertiary-container: oklch(22% 0.012 235);
167
-
168
- /* Surface Colors */
169
- --color-surface: oklch(100% 0 0);
170
- --color-surface-dim: oklch(96% 0.01 85);
171
- --color-surface-bright: oklch(100% 0 0);
172
- --color-surface-container-lowest: oklch(100% 0 0);
173
- --color-surface-container-low: oklch(99% 0.01 85);
174
- --color-surface-container: oklch(97% 0.01 85);
175
- --color-surface-container-high: oklch(96% 0.01 85);
176
- --color-surface-container-highest: oklch(94% 0.01 85);
177
- --color-on-surface: oklch(27% 0.02 260);
178
- --color-on-surface-variant: oklch(50% 0.02 260);
179
-
180
- /* Semantic Colors */
181
- --color-info: oklch(41.94% 0.114 254.39);
182
- --color-info-content: oklch(91.94% 0.114 254.39);
183
- --color-info-container: oklch(95% 0.03 235);
184
- --color-on-info-container: oklch(35% 0.08 235);
185
-
186
- --color-success: oklch(67.21% 0.19 133.55);
187
- --color-success-content: oklch(27.21% 0.19 133.55);
188
- --color-success-container: oklch(93% 0.04 150);
189
- --color-on-success-container: oklch(30% 0.08 150);
190
-
191
- --color-warning: oklch(68.19% 0.203 42.44);
192
- --color-warning-content: oklch(18.19% 0.6 42);
193
- --color-warning-container: oklch(93% 0.05 80);
194
- --color-on-warning-container: oklch(38% 0.10 80);
195
-
196
- --color-error: oklch(61.17% 0.237 28.15);
197
- --color-error-content: oklch(90.01% 0.153 84.78);
198
- --color-error-container: oklch(93% 0.04 25);
199
- --color-on-error-container: oklch(32% 0.10 25);
200
-
201
- /* Neutral Colors */
202
- --color-base-100: oklch(100% 0.005 255);
203
- --color-base-200: oklch(95% 0.008 255);
204
- --color-base-300: oklch(90% 0.01 255);
205
- --color-base-400: oklch(55% 0.06 255);
206
- --color-base-500: oklch(45% 0.05 255);
207
- --color-base-600: oklch(35% 0.04 255);
208
- --color-base-700: oklch(25% 0.03 255);
209
- --color-base-800: oklch(18% 0.02 255);
210
- --color-base-900: oklch(12% 0.01 255);
211
- --color-base-content: oklch(10% 0 255);
212
-
213
- /* Outline Colors */
214
- --color-outline: oklch(75% 0.01 260);
215
- --color-outline-variant: oklch(85% 0.01 260);
216
-
217
- /* Accent Colors */
218
- --color-accent: oklch(85.23% 0.14 327);
219
- --color-accent-content: oklch(41% 0.112 45.904);
220
-
221
- /* Neutral Colors */
222
- --color-neutral: oklch(0% 0 0);
223
- --color-neutral-content: oklch(80% 0.015 50);
224
- --color-neutral-variant: oklch(50% 0.02 260);
225
-
226
- /* ============================================
227
- * SHAPE & DEPTH
228
- * ============================================ */
229
-
230
- /* Sunshine: rounded, bubbly, soft feel */
231
- --radius-selector: 0.25rem;
232
- --radius-field: 0.625rem;
233
- --radius-box: 2rem;
234
- --size-selector: 0.1875rem;
235
- --size-field: 0.1875rem;
236
- --border: 0.5px;
237
- --depth: 1;
238
- --noise: 1;
239
-
240
- /* Surface Variant */
241
- --color-surface-variant: oklch(94% 0.02 85);
242
-
243
-
244
- /* Inverse Colors */
245
- --color-inverse-surface: oklch(25% 0.02 260);
246
- --color-inverse-on-surface: oklch(95% 0.01 260);
247
- --color-inverse-primary: oklch(80% 0.14 55);
248
-
249
- /* Shadow & Scrim */
250
- --color-shadow: oklch(0% 0 0);
251
- --color-scrim: oklch(0% 0 0 / 50%);
252
- }