@3df-spa/ui 1.0.6 → 1.0.7
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.
- package/dist/theme.css +861 -0
- package/package.json +4 -4
- package/src/styles/theme.css +0 -999
package/dist/theme.css
ADDED
|
@@ -0,0 +1,861 @@
|
|
|
1
|
+
@custom-variant dark (&:where(.dark, .dark *));
|
|
2
|
+
@source ".";
|
|
3
|
+
@theme {
|
|
4
|
+
--color-background: hsl(0 0% 98%);
|
|
5
|
+
--color-foreground: hsl(0 0% 3.9%);
|
|
6
|
+
--color-card: hsl(0 0% 100%);
|
|
7
|
+
--color-card-foreground: hsl(0 0% 3.9%);
|
|
8
|
+
--color-popover: hsl(0 0% 100%);
|
|
9
|
+
--color-popover-foreground: hsl(0 0% 3.9%);
|
|
10
|
+
--color-primary: hsl(0 0% 0%);
|
|
11
|
+
--color-primary-foreground: hsl(0 0% 100%);
|
|
12
|
+
--color-secondary: hsl(0 0% 94%);
|
|
13
|
+
--color-secondary-foreground: hsl(0 0% 9%);
|
|
14
|
+
--color-muted: hsl(0 0% 96%);
|
|
15
|
+
--color-muted-foreground: hsl(0 0% 45%);
|
|
16
|
+
--color-accent: hsl(0 0% 92%);
|
|
17
|
+
--color-accent-foreground: hsl(0 0% 9%);
|
|
18
|
+
--color-destructive: hsl(0 84% 50%);
|
|
19
|
+
--color-destructive-foreground: hsl(0 0% 100%);
|
|
20
|
+
--color-success: hsl(152 69% 31%);
|
|
21
|
+
--color-success-foreground: hsl(0 0% 100%);
|
|
22
|
+
--color-warning: hsl(38 92% 50%);
|
|
23
|
+
--color-warning-foreground: hsl(0 0% 100%);
|
|
24
|
+
--color-info: hsl(217 91% 60%);
|
|
25
|
+
--color-info-foreground: hsl(0 0% 100%);
|
|
26
|
+
--color-border: hsl(0 0% 85%);
|
|
27
|
+
--color-input: hsl(0 0% 85%);
|
|
28
|
+
--color-ring: hsl(0 0% 25%);
|
|
29
|
+
--color-sidebar: hsl(0 0% 98%);
|
|
30
|
+
--color-sidebar-foreground: hsl(0 0% 0%);
|
|
31
|
+
--color-sidebar-primary: hsl(0 0% 0%);
|
|
32
|
+
--color-sidebar-primary-foreground: hsl(0 0% 100%);
|
|
33
|
+
--color-sidebar-accent: hsl(0 0% 92%);
|
|
34
|
+
--color-sidebar-accent-foreground: hsl(0 0% 0%);
|
|
35
|
+
--color-sidebar-border: hsl(0 0% 85%);
|
|
36
|
+
--color-sidebar-ring: hsl(0 0% 25%);
|
|
37
|
+
--color-chart-1: hsl(215 20% 42%);
|
|
38
|
+
--color-chart-2: hsl(215 12% 58%);
|
|
39
|
+
--color-chart-3: hsl(170 25% 38%);
|
|
40
|
+
--color-chart-4: hsl(340 18% 48%);
|
|
41
|
+
--color-chart-5: hsl(255 18% 52%);
|
|
42
|
+
--color-chart-6: hsl(25 70% 55%);
|
|
43
|
+
--color-chart-7: hsl(280 55% 58%);
|
|
44
|
+
--color-chart-8: hsl(175 55% 45%);
|
|
45
|
+
--color-chart-9: hsl(58 80% 52%);
|
|
46
|
+
--color-chart-10: hsl(330 60% 58%);
|
|
47
|
+
--color-chart-11: hsl(142 71% 45%);
|
|
48
|
+
--color-chart-12: hsl(0 72% 51%);
|
|
49
|
+
--radius-sm: calc(var(--ui-radius, 0.625rem) * 0.72);
|
|
50
|
+
--radius-md: var(--ui-radius, 0.625rem);
|
|
51
|
+
--radius-lg: calc(var(--ui-radius, 0.625rem) * 1.2);
|
|
52
|
+
--radius-xl: calc(var(--ui-radius, 0.625rem) * 1.6);
|
|
53
|
+
--shadow-2xs: 0 1px 0 0 hsl(0 0% 0% / 0.04);
|
|
54
|
+
--shadow-xs: 0 1px 2px 0 hsl(0 0% 0% / 0.06);
|
|
55
|
+
--shadow-sm: 0 1px 3px 0 hsl(0 0% 0% / 0.08), 0 1px 2px -1px hsl(0 0% 0% / 0.06);
|
|
56
|
+
--shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.08), 0 2px 4px -2px hsl(0 0% 0% / 0.06);
|
|
57
|
+
--shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / 0.10), 0 4px 6px -4px hsl(0 0% 0% / 0.06);
|
|
58
|
+
--shadow-xl: 0 20px 25px -5px hsl(0 0% 0% / 0.12), 0 8px 10px -6px hsl(0 0% 0% / 0.08);
|
|
59
|
+
--shadow-2xl: 0 25px 50px -12px hsl(0 0% 0% / 0.22);
|
|
60
|
+
--shadow-inner: inset 0 2px 4px 0 hsl(0 0% 0% / 0.06);
|
|
61
|
+
--duration-instant: 75ms;
|
|
62
|
+
--duration-fast: 150ms;
|
|
63
|
+
--duration-normal: 250ms;
|
|
64
|
+
--duration-slow: 350ms;
|
|
65
|
+
--duration-deliberate: 500ms;
|
|
66
|
+
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
|
|
67
|
+
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
68
|
+
--ease-snappy: cubic-bezier(0.25, 0, 0, 1);
|
|
69
|
+
--ease-bounce-in: cubic-bezier(0.36, 0.07, 0.19, 0.97);
|
|
70
|
+
--ease-bounce-out: cubic-bezier(0.215, 0.61, 0.355, 1.0);
|
|
71
|
+
--animate-fade-in: fade-in var(--duration-normal) var(--ease-smooth) both;
|
|
72
|
+
--animate-fade-out: fade-out var(--duration-fast) var(--ease-smooth) both;
|
|
73
|
+
--animate-slide-up: slide-up var(--duration-normal) var(--ease-snappy) both;
|
|
74
|
+
--animate-slide-down: slide-down var(--duration-normal) var(--ease-snappy) both;
|
|
75
|
+
--animate-scale-in: scale-in var(--duration-normal) var(--ease-spring) both;
|
|
76
|
+
--animate-scale-out: scale-out var(--duration-fast) var(--ease-smooth) both;
|
|
77
|
+
--animate-shimmer: shimmer 1.6s var(--ease-smooth) infinite;
|
|
78
|
+
--animate-pulse-soft: pulse-soft 2.2s var(--ease-smooth) infinite;
|
|
79
|
+
}
|
|
80
|
+
@utility border-ui {
|
|
81
|
+
border-width: var(--ui-border-width, 2px);
|
|
82
|
+
}
|
|
83
|
+
@utility border-t-ui {
|
|
84
|
+
border-top-width: var(--ui-border-width, 2px);
|
|
85
|
+
}
|
|
86
|
+
@utility border-r-ui {
|
|
87
|
+
border-right-width: var(--ui-border-width, 2px);
|
|
88
|
+
}
|
|
89
|
+
@utility border-b-ui {
|
|
90
|
+
border-bottom-width: var(--ui-border-width, 2px);
|
|
91
|
+
}
|
|
92
|
+
@utility border-l-ui {
|
|
93
|
+
border-left-width: var(--ui-border-width, 2px);
|
|
94
|
+
}
|
|
95
|
+
@keyframes fade-in {
|
|
96
|
+
from { opacity: 0; }
|
|
97
|
+
to { opacity: 1; }
|
|
98
|
+
}
|
|
99
|
+
@keyframes fade-out {
|
|
100
|
+
from { opacity: 1; }
|
|
101
|
+
to { opacity: 0; }
|
|
102
|
+
}
|
|
103
|
+
@keyframes slide-up {
|
|
104
|
+
from { opacity: 0; transform: translateY(8px); }
|
|
105
|
+
to { opacity: 1; transform: translateY(0); }
|
|
106
|
+
}
|
|
107
|
+
@keyframes slide-down {
|
|
108
|
+
from { opacity: 0; transform: translateY(-8px); }
|
|
109
|
+
to { opacity: 1; transform: translateY(0); }
|
|
110
|
+
}
|
|
111
|
+
@keyframes scale-in {
|
|
112
|
+
from { opacity: 0; transform: scale(0.95); }
|
|
113
|
+
to { opacity: 1; transform: scale(1); }
|
|
114
|
+
}
|
|
115
|
+
@keyframes scale-out {
|
|
116
|
+
from { opacity: 1; transform: scale(1); }
|
|
117
|
+
to { opacity: 0; transform: scale(0.95); }
|
|
118
|
+
}
|
|
119
|
+
@keyframes shimmer {
|
|
120
|
+
0% { background-position: -200% 0; }
|
|
121
|
+
100% { background-position: 200% 0; }
|
|
122
|
+
}
|
|
123
|
+
@keyframes pulse-soft {
|
|
124
|
+
0%, 100% { opacity: 1; }
|
|
125
|
+
50% { opacity: 0.55; }
|
|
126
|
+
}
|
|
127
|
+
.dark {
|
|
128
|
+
color-scheme: dark;
|
|
129
|
+
--color-background: hsl(0 0% 2%);
|
|
130
|
+
--color-foreground: hsl(0 0% 100%);
|
|
131
|
+
--color-card: hsl(0 0% 4%);
|
|
132
|
+
--color-card-foreground: hsl(0 0% 100%);
|
|
133
|
+
--color-popover: hsl(0 0% 5%);
|
|
134
|
+
--color-popover-foreground: hsl(0 0% 100%);
|
|
135
|
+
--color-primary: hsl(0 0% 100%);
|
|
136
|
+
--color-primary-foreground: hsl(0 0% 0%);
|
|
137
|
+
--color-secondary: hsl(0 0% 12%);
|
|
138
|
+
--color-secondary-foreground: hsl(0 0% 100%);
|
|
139
|
+
--color-muted: hsl(0 0% 10%);
|
|
140
|
+
--color-muted-foreground: hsl(0 0% 64%);
|
|
141
|
+
--color-accent: hsl(0 0% 16%);
|
|
142
|
+
--color-accent-foreground: hsl(0 0% 100%);
|
|
143
|
+
--color-destructive: hsl(0 72% 51%);
|
|
144
|
+
--color-destructive-foreground: hsl(0 0% 100%);
|
|
145
|
+
--color-success: hsl(160 84% 39%);
|
|
146
|
+
--color-success-foreground: hsl(0 0% 0%);
|
|
147
|
+
--color-warning: hsl(45 93% 47%);
|
|
148
|
+
--color-warning-foreground: hsl(0 0% 0%);
|
|
149
|
+
--color-info: hsl(213 94% 68%);
|
|
150
|
+
--color-info-foreground: hsl(0 0% 0%);
|
|
151
|
+
--color-border: hsl(0 0% 20%);
|
|
152
|
+
--color-input: hsl(0 0% 20%);
|
|
153
|
+
--color-ring: hsl(0 0% 30%);
|
|
154
|
+
--color-sidebar: hsl(0 0% 4%);
|
|
155
|
+
--color-sidebar-foreground: hsl(0 0% 100%);
|
|
156
|
+
--color-sidebar-primary: hsl(0 0% 100%);
|
|
157
|
+
--color-sidebar-primary-foreground: hsl(0 0% 0%);
|
|
158
|
+
--color-sidebar-accent: hsl(0 0% 16%);
|
|
159
|
+
--color-sidebar-accent-foreground: hsl(0 0% 100%);
|
|
160
|
+
--color-sidebar-border: hsl(0 0% 20%);
|
|
161
|
+
--color-sidebar-ring: hsl(0 0% 30%);
|
|
162
|
+
--color-chart-1: hsl(215 20% 55%);
|
|
163
|
+
--color-chart-2: hsl(215 12% 45%);
|
|
164
|
+
--color-chart-3: hsl(170 22% 48%);
|
|
165
|
+
--color-chart-4: hsl(340 16% 56%);
|
|
166
|
+
--color-chart-5: hsl(255 16% 62%);
|
|
167
|
+
--color-chart-6: hsl(25 75% 62%);
|
|
168
|
+
--color-chart-7: hsl(280 60% 68%);
|
|
169
|
+
--color-chart-8: hsl(175 60% 55%);
|
|
170
|
+
--color-chart-9: hsl(58 85% 60%);
|
|
171
|
+
--color-chart-10: hsl(330 65% 65%);
|
|
172
|
+
--color-chart-11: hsl(142 70% 50%);
|
|
173
|
+
--color-chart-12: hsl(0 70% 58%);
|
|
174
|
+
--shadow-2xs: 0 1px 0 0 hsl(0 0% 0% / 0.10);
|
|
175
|
+
--shadow-xs: 0 1px 2px 0 hsl(0 0% 0% / 0.20);
|
|
176
|
+
--shadow-sm: 0 1px 3px 0 hsl(0 0% 0% / 0.25), 0 1px 2px -1px hsl(0 0% 0% / 0.20);
|
|
177
|
+
--shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.28), 0 2px 4px -2px hsl(0 0% 0% / 0.20);
|
|
178
|
+
--shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / 0.32), 0 4px 6px -4px hsl(0 0% 0% / 0.22);
|
|
179
|
+
--shadow-xl: 0 20px 25px -5px hsl(0 0% 0% / 0.40), 0 8px 10px -6px hsl(0 0% 0% / 0.28);
|
|
180
|
+
--shadow-2xl: 0 25px 50px -12px hsl(0 0% 0% / 0.55);
|
|
181
|
+
--shadow-inner: inset 0 2px 4px 0 hsl(0 0% 0% / 0.20);
|
|
182
|
+
}
|
|
183
|
+
.light-3df {
|
|
184
|
+
color-scheme: light;
|
|
185
|
+
--color-background: hsl(140 20% 98%);
|
|
186
|
+
--color-foreground: hsl(160 50% 5%);
|
|
187
|
+
--color-card: hsl(140 20% 96%);
|
|
188
|
+
--color-card-foreground: hsl(160 50% 10%);
|
|
189
|
+
--color-popover: hsl(140 15% 99%);
|
|
190
|
+
--color-popover-foreground: hsl(160 50% 5%);
|
|
191
|
+
--color-primary: hsl(45 95% 47%);
|
|
192
|
+
--color-primary-foreground: hsl(45 10% 5%);
|
|
193
|
+
--color-secondary: hsl(160 30% 20%);
|
|
194
|
+
--color-secondary-foreground: hsl(160 10% 98%);
|
|
195
|
+
--color-muted: hsl(140 10% 90%);
|
|
196
|
+
--color-muted-foreground: hsl(160 10% 35%);
|
|
197
|
+
--color-accent: hsl(178 75% 40%);
|
|
198
|
+
--color-accent-foreground: hsl(160 50% 5%);
|
|
199
|
+
--color-destructive: hsl(0 84% 50%);
|
|
200
|
+
--color-destructive-foreground: hsl(0 0% 100%);
|
|
201
|
+
--color-success: hsl(152 69% 31%);
|
|
202
|
+
--color-success-foreground: hsl(0 0% 100%);
|
|
203
|
+
--color-warning: hsl(38 92% 50%);
|
|
204
|
+
--color-warning-foreground: hsl(0 0% 100%);
|
|
205
|
+
--color-info: hsl(200 80% 50%);
|
|
206
|
+
--color-info-foreground: hsl(0 0% 100%);
|
|
207
|
+
--color-border: hsl(140 15% 85%);
|
|
208
|
+
--color-input: hsl(140 15% 85%);
|
|
209
|
+
--color-ring: hsl(45 90% 45%);
|
|
210
|
+
--color-sidebar: hsl(140 20% 96%);
|
|
211
|
+
--color-sidebar-foreground: hsl(160 50% 5%);
|
|
212
|
+
--color-sidebar-primary: hsl(45 90% 45%);
|
|
213
|
+
--color-sidebar-primary-foreground: hsl(45 10% 5%);
|
|
214
|
+
--color-sidebar-accent: hsl(140 15% 90%);
|
|
215
|
+
--color-sidebar-accent-foreground: hsl(160 50% 5%);
|
|
216
|
+
--color-sidebar-border: hsl(140 15% 85%);
|
|
217
|
+
--color-sidebar-ring: hsl(45 90% 45%);
|
|
218
|
+
--color-chart-1: hsl(45 90% 45%);
|
|
219
|
+
--color-chart-2: hsl(160 40% 30%);
|
|
220
|
+
--color-chart-3: hsl(180 60% 40%);
|
|
221
|
+
--color-chart-4: hsl(25 70% 50%);
|
|
222
|
+
--color-chart-5: hsl(140 20% 50%);
|
|
223
|
+
--color-chart-6: hsl(35 80% 52%);
|
|
224
|
+
--color-chart-7: hsl(280 40% 52%);
|
|
225
|
+
--color-chart-8: hsl(178 65% 40%);
|
|
226
|
+
--color-chart-9: hsl(60 85% 48%);
|
|
227
|
+
--color-chart-10: hsl(335 55% 52%);
|
|
228
|
+
--color-chart-11: hsl(150 65% 40%);
|
|
229
|
+
--color-chart-12: hsl(0 75% 50%);
|
|
230
|
+
--shadow-2xs: 0 1px 0 0 hsl(45 80% 30% / 0.06);
|
|
231
|
+
--shadow-xs: 0 1px 2px 0 hsl(45 80% 30% / 0.08);
|
|
232
|
+
--shadow-sm: 0 1px 3px 0 hsl(45 80% 30% / 0.10), 0 1px 2px -1px hsl(45 80% 30% / 0.08);
|
|
233
|
+
--shadow-md: 0 4px 6px -1px hsl(45 80% 30% / 0.12), 0 2px 4px -2px hsl(45 80% 30% / 0.08);
|
|
234
|
+
--shadow-lg: 0 10px 15px -3px hsl(45 80% 30% / 0.14), 0 4px 6px -4px hsl(45 80% 30% / 0.08);
|
|
235
|
+
--shadow-xl: 0 20px 25px -5px hsl(45 80% 30% / 0.16), 0 8px 10px -6px hsl(45 80% 30% / 0.10);
|
|
236
|
+
--shadow-2xl: 0 25px 50px -12px hsl(45 80% 30% / 0.25);
|
|
237
|
+
--shadow-inner: inset 0 2px 4px 0 hsl(45 80% 30% / 0.08);
|
|
238
|
+
}
|
|
239
|
+
.dark-3df {
|
|
240
|
+
color-scheme: dark;
|
|
241
|
+
--color-background: hsl(160 25% 4%);
|
|
242
|
+
--color-foreground: hsl(140 10% 95%);
|
|
243
|
+
--color-card: hsl(160 20% 8%);
|
|
244
|
+
--color-card-foreground: hsl(140 10% 95%);
|
|
245
|
+
--color-popover: hsl(160 15% 12%);
|
|
246
|
+
--color-popover-foreground: hsl(140 10% 98%);
|
|
247
|
+
--color-primary: hsl(45 100% 50%);
|
|
248
|
+
--color-primary-foreground: hsl(160 40% 2%);
|
|
249
|
+
--color-secondary: hsl(160 50% 15%);
|
|
250
|
+
--color-secondary-foreground: hsl(140 20% 90%);
|
|
251
|
+
--color-muted: hsl(160 30% 8%);
|
|
252
|
+
--color-muted-foreground: hsl(160 10% 65%);
|
|
253
|
+
--color-accent: hsl(180 85% 50%);
|
|
254
|
+
--color-accent-foreground: hsl(160 40% 2%);
|
|
255
|
+
--color-destructive: hsl(0 70% 35%);
|
|
256
|
+
--color-destructive-foreground: hsl(0 0% 100%);
|
|
257
|
+
--color-success: hsl(160 84% 39%);
|
|
258
|
+
--color-success-foreground: hsl(0 0% 0%);
|
|
259
|
+
--color-warning: hsl(45 93% 47%);
|
|
260
|
+
--color-warning-foreground: hsl(0 0% 0%);
|
|
261
|
+
--color-info: hsl(200 85% 60%);
|
|
262
|
+
--color-info-foreground: hsl(0 0% 0%);
|
|
263
|
+
--color-border: hsl(160 15% 15%);
|
|
264
|
+
--color-input: hsl(160 30% 15%);
|
|
265
|
+
--color-ring: hsl(45 100% 50%);
|
|
266
|
+
--color-sidebar: hsl(160 40% 3%);
|
|
267
|
+
--color-sidebar-foreground: hsl(140 10% 95%);
|
|
268
|
+
--color-sidebar-primary: hsl(45 100% 50%);
|
|
269
|
+
--color-sidebar-primary-foreground: hsl(160 40% 2%);
|
|
270
|
+
--color-sidebar-accent: hsl(160 30% 10%);
|
|
271
|
+
--color-sidebar-accent-foreground: hsl(140 10% 95%);
|
|
272
|
+
--color-sidebar-border: hsl(160 30% 15%);
|
|
273
|
+
--color-sidebar-ring: hsl(45 100% 50%);
|
|
274
|
+
--color-chart-1: hsl(45 100% 50%);
|
|
275
|
+
--color-chart-2: hsl(180 80% 50%);
|
|
276
|
+
--color-chart-3: hsl(150 60% 50%);
|
|
277
|
+
--color-chart-4: hsl(30 90% 60%);
|
|
278
|
+
--color-chart-5: hsl(200 70% 60%);
|
|
279
|
+
--color-chart-6: hsl(35 90% 62%);
|
|
280
|
+
--color-chart-7: hsl(280 70% 70%);
|
|
281
|
+
--color-chart-8: hsl(178 75% 60%);
|
|
282
|
+
--color-chart-9: hsl(60 90% 60%);
|
|
283
|
+
--color-chart-10: hsl(335 65% 65%);
|
|
284
|
+
--color-chart-11: hsl(150 70% 55%);
|
|
285
|
+
--color-chart-12: hsl(0 70% 60%);
|
|
286
|
+
--shadow-2xs: 0 1px 0 0 hsl(45 100% 30% / 0.15);
|
|
287
|
+
--shadow-xs: 0 1px 2px 0 hsl(45 100% 20% / 0.30);
|
|
288
|
+
--shadow-sm: 0 1px 3px 0 hsl(45 100% 20% / 0.35), 0 1px 2px -1px hsl(45 100% 20% / 0.25);
|
|
289
|
+
--shadow-md: 0 4px 6px -1px hsl(45 100% 20% / 0.40), 0 2px 4px -2px hsl(45 100% 20% / 0.28);
|
|
290
|
+
--shadow-lg: 0 10px 15px -3px hsl(45 100% 20% / 0.45), 0 4px 6px -4px hsl(45 100% 20% / 0.30);
|
|
291
|
+
--shadow-xl: 0 20px 25px -5px hsl(45 100% 20% / 0.55), 0 8px 10px -6px hsl(45 100% 20% / 0.35);
|
|
292
|
+
--shadow-2xl: 0 25px 50px -12px hsl(45 100% 20% / 0.65);
|
|
293
|
+
--shadow-inner: inset 0 2px 4px 0 hsl(45 100% 20% / 0.25);
|
|
294
|
+
}
|
|
295
|
+
.light-coffee {
|
|
296
|
+
color-scheme: light;
|
|
297
|
+
--color-background: hsl(36 30% 98%);
|
|
298
|
+
--color-foreground: hsl(25 20% 15%);
|
|
299
|
+
--color-card: hsl(36 30% 96%);
|
|
300
|
+
--color-card-foreground: hsl(25 20% 15%);
|
|
301
|
+
--color-popover: hsl(36 30% 98%);
|
|
302
|
+
--color-popover-foreground: hsl(25 20% 15%);
|
|
303
|
+
--color-primary: hsl(28 50% 45%);
|
|
304
|
+
--color-primary-foreground: hsl(36 30% 98%);
|
|
305
|
+
--color-secondary: hsl(30 25% 90%);
|
|
306
|
+
--color-secondary-foreground: hsl(25 30% 20%);
|
|
307
|
+
--color-muted: hsl(30 20% 94%);
|
|
308
|
+
--color-muted-foreground: hsl(25 10% 45%);
|
|
309
|
+
--color-accent: hsl(35 40% 92%);
|
|
310
|
+
--color-accent-foreground: hsl(28 50% 45%);
|
|
311
|
+
--color-destructive: hsl(0 84% 60%);
|
|
312
|
+
--color-destructive-foreground: hsl(0 0% 100%);
|
|
313
|
+
--color-success: hsl(152 69% 31%);
|
|
314
|
+
--color-success-foreground: hsl(0 0% 100%);
|
|
315
|
+
--color-warning: hsl(38 92% 50%);
|
|
316
|
+
--color-warning-foreground: hsl(0 0% 100%);
|
|
317
|
+
--color-info: hsl(217 91% 60%);
|
|
318
|
+
--color-info-foreground: hsl(0 0% 100%);
|
|
319
|
+
--color-border: hsl(30 15% 88%);
|
|
320
|
+
--color-input: hsl(30 15% 88%);
|
|
321
|
+
--color-ring: hsl(28 50% 45%);
|
|
322
|
+
--color-sidebar: hsl(36 25% 95%);
|
|
323
|
+
--color-sidebar-foreground: hsl(25 20% 15%);
|
|
324
|
+
--color-sidebar-primary: hsl(28 50% 45%);
|
|
325
|
+
--color-sidebar-primary-foreground: hsl(36 30% 98%);
|
|
326
|
+
--color-sidebar-accent: hsl(35 30% 88%);
|
|
327
|
+
--color-sidebar-accent-foreground: hsl(28 50% 45%);
|
|
328
|
+
--color-sidebar-border: hsl(30 15% 85%);
|
|
329
|
+
--color-sidebar-ring: hsl(28 50% 45%);
|
|
330
|
+
--color-chart-1: hsl(28 60% 50%);
|
|
331
|
+
--color-chart-2: hsl(150 30% 40%);
|
|
332
|
+
--color-chart-3: hsl(35 80% 45%);
|
|
333
|
+
--color-chart-4: hsl(10 60% 55%);
|
|
334
|
+
--color-chart-5: hsl(200 40% 50%);
|
|
335
|
+
--color-chart-6: hsl(25 75% 55%);
|
|
336
|
+
--color-chart-7: hsl(275 35% 52%);
|
|
337
|
+
--color-chart-8: hsl(172 45% 42%);
|
|
338
|
+
--color-chart-9: hsl(42 85% 52%);
|
|
339
|
+
--color-chart-10: hsl(350 55% 55%);
|
|
340
|
+
--color-chart-11: hsl(148 60% 38%);
|
|
341
|
+
--color-chart-12: hsl(5 70% 52%);
|
|
342
|
+
--shadow-2xs: 0 1px 0 0 hsl(28 50% 25% / 0.06);
|
|
343
|
+
--shadow-xs: 0 1px 2px 0 hsl(28 50% 25% / 0.08);
|
|
344
|
+
--shadow-sm: 0 1px 3px 0 hsl(28 50% 25% / 0.10), 0 1px 2px -1px hsl(28 50% 25% / 0.08);
|
|
345
|
+
--shadow-md: 0 4px 6px -1px hsl(28 50% 25% / 0.12), 0 2px 4px -2px hsl(28 50% 25% / 0.08);
|
|
346
|
+
--shadow-lg: 0 10px 15px -3px hsl(28 50% 25% / 0.14), 0 4px 6px -4px hsl(28 50% 25% / 0.08);
|
|
347
|
+
--shadow-xl: 0 20px 25px -5px hsl(28 50% 25% / 0.16), 0 8px 10px -6px hsl(28 50% 25% / 0.10);
|
|
348
|
+
--shadow-2xl: 0 25px 50px -12px hsl(28 50% 25% / 0.25);
|
|
349
|
+
--shadow-inner: inset 0 2px 4px 0 hsl(28 50% 25% / 0.08);
|
|
350
|
+
}
|
|
351
|
+
.dark-coffee {
|
|
352
|
+
color-scheme: dark;
|
|
353
|
+
--color-background: hsl(24 25% 6%);
|
|
354
|
+
--color-foreground: hsl(36 20% 90%);
|
|
355
|
+
--color-card: hsl(24 15% 12%);
|
|
356
|
+
--color-card-foreground: hsl(36 20% 90%);
|
|
357
|
+
--color-popover: hsl(24 15% 12%);
|
|
358
|
+
--color-popover-foreground: hsl(36 20% 90%);
|
|
359
|
+
--color-primary: hsl(33 90% 52%);
|
|
360
|
+
--color-primary-foreground: hsl(24 30% 10%);
|
|
361
|
+
--color-secondary: hsl(24 20% 18%);
|
|
362
|
+
--color-secondary-foreground: hsl(36 20% 90%);
|
|
363
|
+
--color-muted: hsl(24 15% 16%);
|
|
364
|
+
--color-muted-foreground: hsl(36 10% 65%);
|
|
365
|
+
--color-accent: hsl(24 25% 20%);
|
|
366
|
+
--color-accent-foreground: hsl(35 85% 55%);
|
|
367
|
+
--color-destructive: hsl(0 62% 30%);
|
|
368
|
+
--color-destructive-foreground: hsl(0 0% 100%);
|
|
369
|
+
--color-success: hsl(160 84% 39%);
|
|
370
|
+
--color-success-foreground: hsl(0 0% 0%);
|
|
371
|
+
--color-warning: hsl(45 93% 47%);
|
|
372
|
+
--color-warning-foreground: hsl(0 0% 0%);
|
|
373
|
+
--color-info: hsl(213 94% 68%);
|
|
374
|
+
--color-info-foreground: hsl(0 0% 0%);
|
|
375
|
+
--color-border: hsl(24 15% 20%);
|
|
376
|
+
--color-input: hsl(24 15% 20%);
|
|
377
|
+
--color-ring: hsl(35 85% 55%);
|
|
378
|
+
--color-sidebar: hsl(24 20% 6%);
|
|
379
|
+
--color-sidebar-foreground: hsl(36 20% 90%);
|
|
380
|
+
--color-sidebar-primary: hsl(35 85% 55%);
|
|
381
|
+
--color-sidebar-primary-foreground: hsl(24 30% 10%);
|
|
382
|
+
--color-sidebar-accent: hsl(24 20% 16%);
|
|
383
|
+
--color-sidebar-accent-foreground: hsl(35 85% 55%);
|
|
384
|
+
--color-sidebar-border: hsl(24 15% 18%);
|
|
385
|
+
--color-sidebar-ring: hsl(35 85% 55%);
|
|
386
|
+
--color-chart-1: hsl(35 90% 55%);
|
|
387
|
+
--color-chart-2: hsl(150 40% 50%);
|
|
388
|
+
--color-chart-3: hsl(28 80% 60%);
|
|
389
|
+
--color-chart-4: hsl(340 60% 60%);
|
|
390
|
+
--color-chart-5: hsl(200 60% 60%);
|
|
391
|
+
--color-chart-6: hsl(25 80% 65%);
|
|
392
|
+
--color-chart-7: hsl(275 50% 65%);
|
|
393
|
+
--color-chart-8: hsl(172 55% 55%);
|
|
394
|
+
--color-chart-9: hsl(42 90% 62%);
|
|
395
|
+
--color-chart-10: hsl(350 65% 65%);
|
|
396
|
+
--color-chart-11: hsl(148 65% 52%);
|
|
397
|
+
--color-chart-12: hsl(5 68% 60%);
|
|
398
|
+
--shadow-2xs: 0 1px 0 0 hsl(24 30% 5% / 0.30);
|
|
399
|
+
--shadow-xs: 0 1px 2px 0 hsl(24 30% 5% / 0.40);
|
|
400
|
+
--shadow-sm: 0 1px 3px 0 hsl(24 30% 5% / 0.45), 0 1px 2px -1px hsl(24 30% 5% / 0.35);
|
|
401
|
+
--shadow-md: 0 4px 6px -1px hsl(24 30% 5% / 0.50), 0 2px 4px -2px hsl(24 30% 5% / 0.38);
|
|
402
|
+
--shadow-lg: 0 10px 15px -3px hsl(24 30% 5% / 0.55), 0 4px 6px -4px hsl(24 30% 5% / 0.40);
|
|
403
|
+
--shadow-xl: 0 20px 25px -5px hsl(24 30% 5% / 0.62), 0 8px 10px -6px hsl(24 30% 5% / 0.44);
|
|
404
|
+
--shadow-2xl: 0 25px 50px -12px hsl(24 30% 5% / 0.70);
|
|
405
|
+
--shadow-inner: inset 0 2px 4px 0 hsl(24 30% 5% / 0.30);
|
|
406
|
+
}
|
|
407
|
+
.light-ocean {
|
|
408
|
+
color-scheme: light;
|
|
409
|
+
--color-background: hsl(210 40% 98%);
|
|
410
|
+
--color-foreground: hsl(222 47% 8%);
|
|
411
|
+
--color-card: hsl(210 40% 100%);
|
|
412
|
+
--color-card-foreground: hsl(222 47% 8%);
|
|
413
|
+
--color-popover: hsl(210 40% 100%);
|
|
414
|
+
--color-popover-foreground: hsl(222 47% 8%);
|
|
415
|
+
--color-primary: hsl(221 83% 53%);
|
|
416
|
+
--color-primary-foreground: hsl(0 0% 100%);
|
|
417
|
+
--color-secondary: hsl(210 30% 92%);
|
|
418
|
+
--color-secondary-foreground: hsl(222 47% 15%);
|
|
419
|
+
--color-muted: hsl(210 30% 95%);
|
|
420
|
+
--color-muted-foreground: hsl(215 20% 45%);
|
|
421
|
+
--color-accent: hsl(191 91% 37%);
|
|
422
|
+
--color-accent-foreground: hsl(0 0% 100%);
|
|
423
|
+
--color-destructive: hsl(0 84% 50%);
|
|
424
|
+
--color-destructive-foreground: hsl(0 0% 100%);
|
|
425
|
+
--color-success: hsl(152 69% 31%);
|
|
426
|
+
--color-success-foreground: hsl(0 0% 100%);
|
|
427
|
+
--color-warning: hsl(38 92% 50%);
|
|
428
|
+
--color-warning-foreground: hsl(0 0% 100%);
|
|
429
|
+
--color-info: hsl(221 83% 53%);
|
|
430
|
+
--color-info-foreground: hsl(0 0% 100%);
|
|
431
|
+
--color-border: hsl(214 32% 88%);
|
|
432
|
+
--color-input: hsl(214 32% 88%);
|
|
433
|
+
--color-ring: hsl(221 83% 53%);
|
|
434
|
+
--color-sidebar: hsl(210 40% 97%);
|
|
435
|
+
--color-sidebar-foreground: hsl(222 47% 8%);
|
|
436
|
+
--color-sidebar-primary: hsl(221 83% 53%);
|
|
437
|
+
--color-sidebar-primary-foreground: hsl(0 0% 100%);
|
|
438
|
+
--color-sidebar-accent: hsl(210 30% 92%);
|
|
439
|
+
--color-sidebar-accent-foreground: hsl(222 47% 15%);
|
|
440
|
+
--color-sidebar-border: hsl(214 32% 88%);
|
|
441
|
+
--color-sidebar-ring: hsl(221 83% 53%);
|
|
442
|
+
--color-chart-1: hsl(221 83% 53%);
|
|
443
|
+
--color-chart-2: hsl(191 91% 37%);
|
|
444
|
+
--color-chart-3: hsl(199 89% 48%);
|
|
445
|
+
--color-chart-4: hsl(250 75% 58%);
|
|
446
|
+
--color-chart-5: hsl(175 60% 42%);
|
|
447
|
+
--color-chart-6: hsl(217 70% 65%);
|
|
448
|
+
--color-chart-7: hsl(260 65% 62%);
|
|
449
|
+
--color-chart-8: hsl(185 75% 48%);
|
|
450
|
+
--color-chart-9: hsl(45 85% 55%);
|
|
451
|
+
--color-chart-10: hsl(350 60% 58%);
|
|
452
|
+
--color-chart-11: hsl(142 71% 45%);
|
|
453
|
+
--color-chart-12: hsl(0 72% 51%);
|
|
454
|
+
--shadow-2xs: 0 1px 0 0 hsl(221 83% 30% / 0.06);
|
|
455
|
+
--shadow-xs: 0 1px 2px 0 hsl(221 83% 30% / 0.08);
|
|
456
|
+
--shadow-sm: 0 1px 3px 0 hsl(221 83% 30% / 0.10), 0 1px 2px -1px hsl(221 83% 30% / 0.08);
|
|
457
|
+
--shadow-md: 0 4px 6px -1px hsl(221 83% 30% / 0.12), 0 2px 4px -2px hsl(221 83% 30% / 0.08);
|
|
458
|
+
--shadow-lg: 0 10px 15px -3px hsl(221 83% 30% / 0.14), 0 4px 6px -4px hsl(221 83% 30% / 0.08);
|
|
459
|
+
--shadow-xl: 0 20px 25px -5px hsl(221 83% 30% / 0.18), 0 8px 10px -6px hsl(221 83% 30% / 0.10);
|
|
460
|
+
--shadow-2xl: 0 25px 50px -12px hsl(221 83% 30% / 0.28);
|
|
461
|
+
--shadow-inner: inset 0 2px 4px 0 hsl(221 83% 30% / 0.08);
|
|
462
|
+
}
|
|
463
|
+
.dark-ocean {
|
|
464
|
+
color-scheme: dark;
|
|
465
|
+
--color-background: hsl(222 47% 5%);
|
|
466
|
+
--color-foreground: hsl(210 40% 96%);
|
|
467
|
+
--color-card: hsl(222 47% 8%);
|
|
468
|
+
--color-card-foreground: hsl(210 40% 96%);
|
|
469
|
+
--color-popover: hsl(222 47% 10%);
|
|
470
|
+
--color-popover-foreground: hsl(210 40% 98%);
|
|
471
|
+
--color-primary: hsl(217 91% 60%);
|
|
472
|
+
--color-primary-foreground: hsl(222 47% 4%);
|
|
473
|
+
--color-secondary: hsl(222 30% 15%);
|
|
474
|
+
--color-secondary-foreground: hsl(210 40% 90%);
|
|
475
|
+
--color-muted: hsl(222 30% 12%);
|
|
476
|
+
--color-muted-foreground: hsl(215 20% 60%);
|
|
477
|
+
--color-accent: hsl(191 95% 45%);
|
|
478
|
+
--color-accent-foreground: hsl(222 47% 4%);
|
|
479
|
+
--color-destructive: hsl(0 72% 51%);
|
|
480
|
+
--color-destructive-foreground: hsl(0 0% 100%);
|
|
481
|
+
--color-success: hsl(160 84% 39%);
|
|
482
|
+
--color-success-foreground: hsl(0 0% 0%);
|
|
483
|
+
--color-warning: hsl(45 93% 47%);
|
|
484
|
+
--color-warning-foreground: hsl(0 0% 0%);
|
|
485
|
+
--color-info: hsl(213 94% 68%);
|
|
486
|
+
--color-info-foreground: hsl(0 0% 0%);
|
|
487
|
+
--color-border: hsl(222 30% 18%);
|
|
488
|
+
--color-input: hsl(222 30% 18%);
|
|
489
|
+
--color-ring: hsl(217 91% 60%);
|
|
490
|
+
--color-sidebar: hsl(222 47% 3%);
|
|
491
|
+
--color-sidebar-foreground: hsl(210 40% 96%);
|
|
492
|
+
--color-sidebar-primary: hsl(217 91% 60%);
|
|
493
|
+
--color-sidebar-primary-foreground: hsl(222 47% 4%);
|
|
494
|
+
--color-sidebar-accent: hsl(222 30% 14%);
|
|
495
|
+
--color-sidebar-accent-foreground: hsl(210 40% 90%);
|
|
496
|
+
--color-sidebar-border: hsl(222 30% 18%);
|
|
497
|
+
--color-sidebar-ring: hsl(217 91% 60%);
|
|
498
|
+
--color-chart-1: hsl(217 91% 60%);
|
|
499
|
+
--color-chart-2: hsl(191 95% 50%);
|
|
500
|
+
--color-chart-3: hsl(199 89% 58%);
|
|
501
|
+
--color-chart-4: hsl(250 80% 68%);
|
|
502
|
+
--color-chart-5: hsl(175 65% 52%);
|
|
503
|
+
--color-chart-6: hsl(217 75% 70%);
|
|
504
|
+
--color-chart-7: hsl(260 70% 72%);
|
|
505
|
+
--color-chart-8: hsl(185 80% 58%);
|
|
506
|
+
--color-chart-9: hsl(45 90% 62%);
|
|
507
|
+
--color-chart-10: hsl(350 65% 65%);
|
|
508
|
+
--color-chart-11: hsl(142 70% 50%);
|
|
509
|
+
--color-chart-12: hsl(0 70% 58%);
|
|
510
|
+
--shadow-2xs: 0 1px 0 0 hsl(221 83% 10% / 0.30);
|
|
511
|
+
--shadow-xs: 0 1px 2px 0 hsl(221 83% 10% / 0.40);
|
|
512
|
+
--shadow-sm: 0 1px 3px 0 hsl(221 83% 10% / 0.45), 0 1px 2px -1px hsl(221 83% 10% / 0.35);
|
|
513
|
+
--shadow-md: 0 4px 6px -1px hsl(221 83% 10% / 0.50), 0 2px 4px -2px hsl(221 83% 10% / 0.38);
|
|
514
|
+
--shadow-lg: 0 10px 15px -3px hsl(221 83% 10% / 0.55), 0 4px 6px -4px hsl(221 83% 10% / 0.40);
|
|
515
|
+
--shadow-xl: 0 20px 25px -5px hsl(221 83% 10% / 0.62), 0 8px 10px -6px hsl(221 83% 10% / 0.44);
|
|
516
|
+
--shadow-2xl: 0 25px 50px -12px hsl(221 83% 10% / 0.70);
|
|
517
|
+
--shadow-inner: inset 0 2px 4px 0 hsl(221 83% 10% / 0.30);
|
|
518
|
+
}
|
|
519
|
+
.light-aurora {
|
|
520
|
+
color-scheme: light;
|
|
521
|
+
--color-background: hsl(270 30% 98%);
|
|
522
|
+
--color-foreground: hsl(270 50% 8%);
|
|
523
|
+
--color-card: hsl(270 30% 100%);
|
|
524
|
+
--color-card-foreground: hsl(270 50% 8%);
|
|
525
|
+
--color-popover: hsl(270 30% 100%);
|
|
526
|
+
--color-popover-foreground: hsl(270 50% 8%);
|
|
527
|
+
--color-primary: hsl(262 83% 58%);
|
|
528
|
+
--color-primary-foreground: hsl(0 0% 100%);
|
|
529
|
+
--color-secondary: hsl(270 25% 92%);
|
|
530
|
+
--color-secondary-foreground: hsl(270 50% 15%);
|
|
531
|
+
--color-muted: hsl(270 20% 95%);
|
|
532
|
+
--color-muted-foreground: hsl(270 15% 45%);
|
|
533
|
+
--color-accent: hsl(316 72% 55%);
|
|
534
|
+
--color-accent-foreground: hsl(0 0% 100%);
|
|
535
|
+
--color-destructive: hsl(0 84% 50%);
|
|
536
|
+
--color-destructive-foreground: hsl(0 0% 100%);
|
|
537
|
+
--color-success: hsl(152 69% 31%);
|
|
538
|
+
--color-success-foreground: hsl(0 0% 100%);
|
|
539
|
+
--color-warning: hsl(38 92% 50%);
|
|
540
|
+
--color-warning-foreground: hsl(0 0% 100%);
|
|
541
|
+
--color-info: hsl(221 83% 53%);
|
|
542
|
+
--color-info-foreground: hsl(0 0% 100%);
|
|
543
|
+
--color-border: hsl(270 20% 88%);
|
|
544
|
+
--color-input: hsl(270 20% 88%);
|
|
545
|
+
--color-ring: hsl(262 83% 58%);
|
|
546
|
+
--color-sidebar: hsl(270 30% 97%);
|
|
547
|
+
--color-sidebar-foreground: hsl(270 50% 8%);
|
|
548
|
+
--color-sidebar-primary: hsl(262 83% 58%);
|
|
549
|
+
--color-sidebar-primary-foreground: hsl(0 0% 100%);
|
|
550
|
+
--color-sidebar-accent: hsl(270 25% 92%);
|
|
551
|
+
--color-sidebar-accent-foreground: hsl(270 50% 15%);
|
|
552
|
+
--color-sidebar-border: hsl(270 20% 88%);
|
|
553
|
+
--color-sidebar-ring: hsl(262 83% 58%);
|
|
554
|
+
--color-chart-1: hsl(262 83% 58%);
|
|
555
|
+
--color-chart-2: hsl(316 72% 55%);
|
|
556
|
+
--color-chart-3: hsl(240 75% 60%);
|
|
557
|
+
--color-chart-4: hsl(291 64% 58%);
|
|
558
|
+
--color-chart-5: hsl(199 89% 48%);
|
|
559
|
+
--color-chart-6: hsl(280 70% 65%);
|
|
560
|
+
--color-chart-7: hsl(330 65% 60%);
|
|
561
|
+
--color-chart-8: hsl(220 80% 62%);
|
|
562
|
+
--color-chart-9: hsl(58 80% 52%);
|
|
563
|
+
--color-chart-10: hsl(175 60% 45%);
|
|
564
|
+
--color-chart-11: hsl(142 71% 45%);
|
|
565
|
+
--color-chart-12: hsl(0 72% 51%);
|
|
566
|
+
--shadow-2xs: 0 1px 0 0 hsl(262 83% 30% / 0.06);
|
|
567
|
+
--shadow-xs: 0 1px 2px 0 hsl(262 83% 30% / 0.08);
|
|
568
|
+
--shadow-sm: 0 1px 3px 0 hsl(262 83% 30% / 0.10), 0 1px 2px -1px hsl(262 83% 30% / 0.08);
|
|
569
|
+
--shadow-md: 0 4px 6px -1px hsl(262 83% 30% / 0.12), 0 2px 4px -2px hsl(262 83% 30% / 0.08);
|
|
570
|
+
--shadow-lg: 0 10px 15px -3px hsl(262 83% 30% / 0.14), 0 4px 6px -4px hsl(262 83% 30% / 0.08);
|
|
571
|
+
--shadow-xl: 0 20px 25px -5px hsl(262 83% 30% / 0.18), 0 8px 10px -6px hsl(262 83% 30% / 0.10);
|
|
572
|
+
--shadow-2xl: 0 25px 50px -12px hsl(262 83% 30% / 0.28);
|
|
573
|
+
--shadow-inner: inset 0 2px 4px 0 hsl(262 83% 30% / 0.08);
|
|
574
|
+
}
|
|
575
|
+
.dark-aurora {
|
|
576
|
+
color-scheme: dark;
|
|
577
|
+
--color-background: hsl(270 50% 4%);
|
|
578
|
+
--color-foreground: hsl(270 30% 96%);
|
|
579
|
+
--color-card: hsl(270 45% 7%);
|
|
580
|
+
--color-card-foreground: hsl(270 30% 96%);
|
|
581
|
+
--color-popover: hsl(270 45% 9%);
|
|
582
|
+
--color-popover-foreground: hsl(270 30% 98%);
|
|
583
|
+
--color-primary: hsl(262 83% 70%);
|
|
584
|
+
--color-primary-foreground: hsl(270 50% 4%);
|
|
585
|
+
--color-secondary: hsl(270 30% 14%);
|
|
586
|
+
--color-secondary-foreground: hsl(270 30% 90%);
|
|
587
|
+
--color-muted: hsl(270 30% 11%);
|
|
588
|
+
--color-muted-foreground: hsl(270 20% 60%);
|
|
589
|
+
--color-accent: hsl(316 72% 65%);
|
|
590
|
+
--color-accent-foreground: hsl(270 50% 4%);
|
|
591
|
+
--color-destructive: hsl(0 72% 51%);
|
|
592
|
+
--color-destructive-foreground: hsl(0 0% 100%);
|
|
593
|
+
--color-success: hsl(160 84% 39%);
|
|
594
|
+
--color-success-foreground: hsl(0 0% 0%);
|
|
595
|
+
--color-warning: hsl(45 93% 47%);
|
|
596
|
+
--color-warning-foreground: hsl(0 0% 0%);
|
|
597
|
+
--color-info: hsl(213 94% 68%);
|
|
598
|
+
--color-info-foreground: hsl(0 0% 0%);
|
|
599
|
+
--color-border: hsl(270 30% 16%);
|
|
600
|
+
--color-input: hsl(270 30% 16%);
|
|
601
|
+
--color-ring: hsl(262 83% 70%);
|
|
602
|
+
--color-sidebar: hsl(270 50% 3%);
|
|
603
|
+
--color-sidebar-foreground: hsl(270 30% 96%);
|
|
604
|
+
--color-sidebar-primary: hsl(262 83% 70%);
|
|
605
|
+
--color-sidebar-primary-foreground: hsl(270 50% 4%);
|
|
606
|
+
--color-sidebar-accent: hsl(270 30% 13%);
|
|
607
|
+
--color-sidebar-accent-foreground: hsl(270 30% 90%);
|
|
608
|
+
--color-sidebar-border: hsl(270 30% 16%);
|
|
609
|
+
--color-sidebar-ring: hsl(262 83% 70%);
|
|
610
|
+
--color-chart-1: hsl(262 83% 70%);
|
|
611
|
+
--color-chart-2: hsl(316 72% 68%);
|
|
612
|
+
--color-chart-3: hsl(240 75% 72%);
|
|
613
|
+
--color-chart-4: hsl(291 64% 68%);
|
|
614
|
+
--color-chart-5: hsl(199 89% 60%);
|
|
615
|
+
--color-chart-6: hsl(280 70% 75%);
|
|
616
|
+
--color-chart-7: hsl(330 65% 70%);
|
|
617
|
+
--color-chart-8: hsl(220 80% 72%);
|
|
618
|
+
--color-chart-9: hsl(58 85% 62%);
|
|
619
|
+
--color-chart-10: hsl(175 65% 55%);
|
|
620
|
+
--color-chart-11: hsl(142 70% 50%);
|
|
621
|
+
--color-chart-12: hsl(0 70% 58%);
|
|
622
|
+
--shadow-2xs: 0 1px 0 0 hsl(262 83% 10% / 0.30);
|
|
623
|
+
--shadow-xs: 0 1px 2px 0 hsl(262 83% 10% / 0.40);
|
|
624
|
+
--shadow-sm: 0 1px 3px 0 hsl(262 83% 10% / 0.45), 0 1px 2px -1px hsl(262 83% 10% / 0.35);
|
|
625
|
+
--shadow-md: 0 4px 6px -1px hsl(262 83% 10% / 0.50), 0 2px 4px -2px hsl(262 83% 10% / 0.38);
|
|
626
|
+
--shadow-lg: 0 10px 15px -3px hsl(262 83% 10% / 0.55), 0 4px 6px -4px hsl(262 83% 10% / 0.40);
|
|
627
|
+
--shadow-xl: 0 20px 25px -5px hsl(262 83% 10% / 0.62), 0 8px 10px -6px hsl(262 83% 10% / 0.44);
|
|
628
|
+
--shadow-2xl: 0 25px 50px -12px hsl(262 83% 10% / 0.70);
|
|
629
|
+
--shadow-inner: inset 0 2px 4px 0 hsl(262 83% 10% / 0.30);
|
|
630
|
+
}
|
|
631
|
+
.light-ember {
|
|
632
|
+
color-scheme: light;
|
|
633
|
+
--color-background: hsl(15 30% 98%);
|
|
634
|
+
--color-foreground: hsl(15 50% 8%);
|
|
635
|
+
--color-card: hsl(15 30% 100%);
|
|
636
|
+
--color-card-foreground: hsl(15 50% 8%);
|
|
637
|
+
--color-popover: hsl(15 30% 100%);
|
|
638
|
+
--color-popover-foreground: hsl(15 50% 8%);
|
|
639
|
+
--color-primary: hsl(16 90% 50%);
|
|
640
|
+
--color-primary-foreground: hsl(0 0% 100%);
|
|
641
|
+
--color-secondary: hsl(15 25% 92%);
|
|
642
|
+
--color-secondary-foreground: hsl(15 50% 15%);
|
|
643
|
+
--color-muted: hsl(15 20% 95%);
|
|
644
|
+
--color-muted-foreground: hsl(15 15% 45%);
|
|
645
|
+
--color-accent: hsl(35 95% 52%);
|
|
646
|
+
--color-accent-foreground: hsl(15 50% 8%);
|
|
647
|
+
--color-destructive: hsl(0 84% 50%);
|
|
648
|
+
--color-destructive-foreground: hsl(0 0% 100%);
|
|
649
|
+
--color-success: hsl(152 69% 31%);
|
|
650
|
+
--color-success-foreground: hsl(0 0% 100%);
|
|
651
|
+
--color-warning: hsl(38 92% 50%);
|
|
652
|
+
--color-warning-foreground: hsl(0 0% 100%);
|
|
653
|
+
--color-info: hsl(217 91% 60%);
|
|
654
|
+
--color-info-foreground: hsl(0 0% 100%);
|
|
655
|
+
--color-border: hsl(15 20% 88%);
|
|
656
|
+
--color-input: hsl(15 20% 88%);
|
|
657
|
+
--color-ring: hsl(16 90% 50%);
|
|
658
|
+
--color-sidebar: hsl(15 30% 97%);
|
|
659
|
+
--color-sidebar-foreground: hsl(15 50% 8%);
|
|
660
|
+
--color-sidebar-primary: hsl(16 90% 50%);
|
|
661
|
+
--color-sidebar-primary-foreground: hsl(0 0% 100%);
|
|
662
|
+
--color-sidebar-accent: hsl(15 25% 92%);
|
|
663
|
+
--color-sidebar-accent-foreground: hsl(15 50% 15%);
|
|
664
|
+
--color-sidebar-border: hsl(15 20% 88%);
|
|
665
|
+
--color-sidebar-ring: hsl(16 90% 50%);
|
|
666
|
+
--color-chart-1: hsl(16 90% 50%);
|
|
667
|
+
--color-chart-2: hsl(35 95% 52%);
|
|
668
|
+
--color-chart-3: hsl(0 80% 55%);
|
|
669
|
+
--color-chart-4: hsl(50 90% 50%);
|
|
670
|
+
--color-chart-5: hsl(350 75% 48%);
|
|
671
|
+
--color-chart-6: hsl(25 85% 55%);
|
|
672
|
+
--color-chart-7: hsl(280 45% 55%);
|
|
673
|
+
--color-chart-8: hsl(175 50% 45%);
|
|
674
|
+
--color-chart-9: hsl(58 80% 52%);
|
|
675
|
+
--color-chart-10: hsl(330 60% 55%);
|
|
676
|
+
--color-chart-11: hsl(142 71% 45%);
|
|
677
|
+
--color-chart-12: hsl(0 72% 51%);
|
|
678
|
+
--shadow-2xs: 0 1px 0 0 hsl(16 90% 25% / 0.06);
|
|
679
|
+
--shadow-xs: 0 1px 2px 0 hsl(16 90% 25% / 0.08);
|
|
680
|
+
--shadow-sm: 0 1px 3px 0 hsl(16 90% 25% / 0.10), 0 1px 2px -1px hsl(16 90% 25% / 0.08);
|
|
681
|
+
--shadow-md: 0 4px 6px -1px hsl(16 90% 25% / 0.12), 0 2px 4px -2px hsl(16 90% 25% / 0.08);
|
|
682
|
+
--shadow-lg: 0 10px 15px -3px hsl(16 90% 25% / 0.14), 0 4px 6px -4px hsl(16 90% 25% / 0.08);
|
|
683
|
+
--shadow-xl: 0 20px 25px -5px hsl(16 90% 25% / 0.18), 0 8px 10px -6px hsl(16 90% 25% / 0.10);
|
|
684
|
+
--shadow-2xl: 0 25px 50px -12px hsl(16 90% 25% / 0.28);
|
|
685
|
+
--shadow-inner: inset 0 2px 4px 0 hsl(16 90% 25% / 0.08);
|
|
686
|
+
}
|
|
687
|
+
.dark-ember {
|
|
688
|
+
color-scheme: dark;
|
|
689
|
+
--color-background: hsl(15 40% 4%);
|
|
690
|
+
--color-foreground: hsl(15 30% 95%);
|
|
691
|
+
--color-card: hsl(15 35% 7%);
|
|
692
|
+
--color-card-foreground: hsl(15 30% 95%);
|
|
693
|
+
--color-popover: hsl(15 35% 9%);
|
|
694
|
+
--color-popover-foreground: hsl(15 30% 98%);
|
|
695
|
+
--color-primary: hsl(16 90% 58%);
|
|
696
|
+
--color-primary-foreground: hsl(15 40% 4%);
|
|
697
|
+
--color-secondary: hsl(15 25% 15%);
|
|
698
|
+
--color-secondary-foreground: hsl(15 30% 88%);
|
|
699
|
+
--color-muted: hsl(15 25% 12%);
|
|
700
|
+
--color-muted-foreground: hsl(15 15% 58%);
|
|
701
|
+
--color-accent: hsl(35 95% 55%);
|
|
702
|
+
--color-accent-foreground: hsl(15 40% 4%);
|
|
703
|
+
--color-destructive: hsl(0 72% 51%);
|
|
704
|
+
--color-destructive-foreground: hsl(0 0% 100%);
|
|
705
|
+
--color-success: hsl(160 84% 39%);
|
|
706
|
+
--color-success-foreground: hsl(0 0% 0%);
|
|
707
|
+
--color-warning: hsl(45 93% 47%);
|
|
708
|
+
--color-warning-foreground: hsl(0 0% 0%);
|
|
709
|
+
--color-info: hsl(213 94% 68%);
|
|
710
|
+
--color-info-foreground: hsl(0 0% 0%);
|
|
711
|
+
--color-border: hsl(15 25% 18%);
|
|
712
|
+
--color-input: hsl(15 25% 18%);
|
|
713
|
+
--color-ring: hsl(16 90% 58%);
|
|
714
|
+
--color-sidebar: hsl(15 40% 3%);
|
|
715
|
+
--color-sidebar-foreground: hsl(15 30% 95%);
|
|
716
|
+
--color-sidebar-primary: hsl(16 90% 58%);
|
|
717
|
+
--color-sidebar-primary-foreground: hsl(15 40% 4%);
|
|
718
|
+
--color-sidebar-accent: hsl(15 25% 14%);
|
|
719
|
+
--color-sidebar-accent-foreground: hsl(15 30% 88%);
|
|
720
|
+
--color-sidebar-border: hsl(15 25% 18%);
|
|
721
|
+
--color-sidebar-ring: hsl(16 90% 58%);
|
|
722
|
+
--color-chart-1: hsl(16 90% 60%);
|
|
723
|
+
--color-chart-2: hsl(35 95% 60%);
|
|
724
|
+
--color-chart-3: hsl(0 80% 62%);
|
|
725
|
+
--color-chart-4: hsl(50 90% 58%);
|
|
726
|
+
--color-chart-5: hsl(350 75% 58%);
|
|
727
|
+
--color-chart-6: hsl(25 85% 65%);
|
|
728
|
+
--color-chart-7: hsl(280 50% 65%);
|
|
729
|
+
--color-chart-8: hsl(175 55% 55%);
|
|
730
|
+
--color-chart-9: hsl(58 85% 60%);
|
|
731
|
+
--color-chart-10: hsl(330 65% 65%);
|
|
732
|
+
--color-chart-11: hsl(142 70% 50%);
|
|
733
|
+
--color-chart-12: hsl(0 70% 58%);
|
|
734
|
+
--shadow-2xs: 0 1px 0 0 hsl(15 50% 5% / 0.30);
|
|
735
|
+
--shadow-xs: 0 1px 2px 0 hsl(15 50% 5% / 0.40);
|
|
736
|
+
--shadow-sm: 0 1px 3px 0 hsl(15 50% 5% / 0.45), 0 1px 2px -1px hsl(15 50% 5% / 0.35);
|
|
737
|
+
--shadow-md: 0 4px 6px -1px hsl(15 50% 5% / 0.50), 0 2px 4px -2px hsl(15 50% 5% / 0.38);
|
|
738
|
+
--shadow-lg: 0 10px 15px -3px hsl(15 50% 5% / 0.55), 0 4px 6px -4px hsl(15 50% 5% / 0.40);
|
|
739
|
+
--shadow-xl: 0 20px 25px -5px hsl(15 50% 5% / 0.62), 0 8px 10px -6px hsl(15 50% 5% / 0.44);
|
|
740
|
+
--shadow-2xl: 0 25px 50px -12px hsl(15 50% 5% / 0.70);
|
|
741
|
+
--shadow-inner: inset 0 2px 4px 0 hsl(15 50% 5% / 0.30);
|
|
742
|
+
}
|
|
743
|
+
.light-sakura {
|
|
744
|
+
color-scheme: light;
|
|
745
|
+
--color-background: hsl(340 30% 98%);
|
|
746
|
+
--color-foreground: hsl(340 40% 8%);
|
|
747
|
+
--color-card: hsl(340 30% 100%);
|
|
748
|
+
--color-card-foreground: hsl(340 40% 8%);
|
|
749
|
+
--color-popover: hsl(340 30% 100%);
|
|
750
|
+
--color-popover-foreground: hsl(340 40% 8%);
|
|
751
|
+
--color-primary: hsl(340 75% 55%);
|
|
752
|
+
--color-primary-foreground: hsl(0 0% 100%);
|
|
753
|
+
--color-secondary: hsl(340 25% 92%);
|
|
754
|
+
--color-secondary-foreground: hsl(340 40% 15%);
|
|
755
|
+
--color-muted: hsl(340 20% 95%);
|
|
756
|
+
--color-muted-foreground: hsl(340 15% 45%);
|
|
757
|
+
--color-accent: hsl(355 80% 60%);
|
|
758
|
+
--color-accent-foreground: hsl(0 0% 100%);
|
|
759
|
+
--color-destructive: hsl(0 84% 50%);
|
|
760
|
+
--color-destructive-foreground: hsl(0 0% 100%);
|
|
761
|
+
--color-success: hsl(152 69% 31%);
|
|
762
|
+
--color-success-foreground: hsl(0 0% 100%);
|
|
763
|
+
--color-warning: hsl(38 92% 50%);
|
|
764
|
+
--color-warning-foreground: hsl(0 0% 100%);
|
|
765
|
+
--color-info: hsl(217 91% 60%);
|
|
766
|
+
--color-info-foreground: hsl(0 0% 100%);
|
|
767
|
+
--color-border: hsl(340 20% 88%);
|
|
768
|
+
--color-input: hsl(340 20% 88%);
|
|
769
|
+
--color-ring: hsl(340 75% 55%);
|
|
770
|
+
--color-sidebar: hsl(340 30% 97%);
|
|
771
|
+
--color-sidebar-foreground: hsl(340 40% 8%);
|
|
772
|
+
--color-sidebar-primary: hsl(340 75% 55%);
|
|
773
|
+
--color-sidebar-primary-foreground: hsl(0 0% 100%);
|
|
774
|
+
--color-sidebar-accent: hsl(340 25% 92%);
|
|
775
|
+
--color-sidebar-accent-foreground: hsl(340 40% 15%);
|
|
776
|
+
--color-sidebar-border: hsl(340 20% 88%);
|
|
777
|
+
--color-sidebar-ring: hsl(340 75% 55%);
|
|
778
|
+
--color-chart-1: hsl(340 75% 55%);
|
|
779
|
+
--color-chart-2: hsl(355 80% 60%);
|
|
780
|
+
--color-chart-3: hsl(320 65% 55%);
|
|
781
|
+
--color-chart-4: hsl(280 55% 58%);
|
|
782
|
+
--color-chart-5: hsl(10 75% 55%);
|
|
783
|
+
--color-chart-6: hsl(350 70% 65%);
|
|
784
|
+
--color-chart-7: hsl(300 50% 60%);
|
|
785
|
+
--color-chart-8: hsl(175 50% 45%);
|
|
786
|
+
--color-chart-9: hsl(45 80% 55%);
|
|
787
|
+
--color-chart-10: hsl(220 65% 58%);
|
|
788
|
+
--color-chart-11: hsl(142 71% 45%);
|
|
789
|
+
--color-chart-12: hsl(0 72% 51%);
|
|
790
|
+
--shadow-2xs: 0 1px 0 0 hsl(340 75% 30% / 0.06);
|
|
791
|
+
--shadow-xs: 0 1px 2px 0 hsl(340 75% 30% / 0.08);
|
|
792
|
+
--shadow-sm: 0 1px 3px 0 hsl(340 75% 30% / 0.10), 0 1px 2px -1px hsl(340 75% 30% / 0.08);
|
|
793
|
+
--shadow-md: 0 4px 6px -1px hsl(340 75% 30% / 0.12), 0 2px 4px -2px hsl(340 75% 30% / 0.08);
|
|
794
|
+
--shadow-lg: 0 10px 15px -3px hsl(340 75% 30% / 0.14), 0 4px 6px -4px hsl(340 75% 30% / 0.08);
|
|
795
|
+
--shadow-xl: 0 20px 25px -5px hsl(340 75% 30% / 0.18), 0 8px 10px -6px hsl(340 75% 30% / 0.10);
|
|
796
|
+
--shadow-2xl: 0 25px 50px -12px hsl(340 75% 30% / 0.28);
|
|
797
|
+
--shadow-inner: inset 0 2px 4px 0 hsl(340 75% 30% / 0.08);
|
|
798
|
+
}
|
|
799
|
+
.dark-sakura {
|
|
800
|
+
color-scheme: dark;
|
|
801
|
+
--color-background: hsl(340 40% 4%);
|
|
802
|
+
--color-foreground: hsl(340 25% 95%);
|
|
803
|
+
--color-card: hsl(340 35% 7%);
|
|
804
|
+
--color-card-foreground: hsl(340 25% 95%);
|
|
805
|
+
--color-popover: hsl(340 35% 9%);
|
|
806
|
+
--color-popover-foreground: hsl(340 25% 98%);
|
|
807
|
+
--color-primary: hsl(340 75% 65%);
|
|
808
|
+
--color-primary-foreground: hsl(340 40% 4%);
|
|
809
|
+
--color-secondary: hsl(340 25% 14%);
|
|
810
|
+
--color-secondary-foreground: hsl(340 25% 88%);
|
|
811
|
+
--color-muted: hsl(340 25% 11%);
|
|
812
|
+
--color-muted-foreground: hsl(340 15% 58%);
|
|
813
|
+
--color-accent: hsl(355 80% 68%);
|
|
814
|
+
--color-accent-foreground: hsl(340 40% 4%);
|
|
815
|
+
--color-destructive: hsl(0 72% 51%);
|
|
816
|
+
--color-destructive-foreground: hsl(0 0% 100%);
|
|
817
|
+
--color-success: hsl(160 84% 39%);
|
|
818
|
+
--color-success-foreground: hsl(0 0% 0%);
|
|
819
|
+
--color-warning: hsl(45 93% 47%);
|
|
820
|
+
--color-warning-foreground: hsl(0 0% 0%);
|
|
821
|
+
--color-info: hsl(213 94% 68%);
|
|
822
|
+
--color-info-foreground: hsl(0 0% 0%);
|
|
823
|
+
--color-border: hsl(340 25% 16%);
|
|
824
|
+
--color-input: hsl(340 25% 16%);
|
|
825
|
+
--color-ring: hsl(340 75% 65%);
|
|
826
|
+
--color-sidebar: hsl(340 40% 3%);
|
|
827
|
+
--color-sidebar-foreground: hsl(340 25% 95%);
|
|
828
|
+
--color-sidebar-primary: hsl(340 75% 65%);
|
|
829
|
+
--color-sidebar-primary-foreground: hsl(340 40% 4%);
|
|
830
|
+
--color-sidebar-accent: hsl(340 25% 13%);
|
|
831
|
+
--color-sidebar-accent-foreground: hsl(340 25% 88%);
|
|
832
|
+
--color-sidebar-border: hsl(340 25% 16%);
|
|
833
|
+
--color-sidebar-ring: hsl(340 75% 65%);
|
|
834
|
+
--color-chart-1: hsl(340 75% 65%);
|
|
835
|
+
--color-chart-2: hsl(355 80% 68%);
|
|
836
|
+
--color-chart-3: hsl(320 65% 65%);
|
|
837
|
+
--color-chart-4: hsl(280 55% 68%);
|
|
838
|
+
--color-chart-5: hsl(10 75% 65%);
|
|
839
|
+
--color-chart-6: hsl(350 70% 72%);
|
|
840
|
+
--color-chart-7: hsl(300 50% 68%);
|
|
841
|
+
--color-chart-8: hsl(175 55% 55%);
|
|
842
|
+
--color-chart-9: hsl(45 85% 62%);
|
|
843
|
+
--color-chart-10: hsl(220 65% 68%);
|
|
844
|
+
--color-chart-11: hsl(142 70% 50%);
|
|
845
|
+
--color-chart-12: hsl(0 70% 58%);
|
|
846
|
+
--shadow-2xs: 0 1px 0 0 hsl(340 50% 5% / 0.30);
|
|
847
|
+
--shadow-xs: 0 1px 2px 0 hsl(340 50% 5% / 0.40);
|
|
848
|
+
--shadow-sm: 0 1px 3px 0 hsl(340 50% 5% / 0.45), 0 1px 2px -1px hsl(340 50% 5% / 0.35);
|
|
849
|
+
--shadow-md: 0 4px 6px -1px hsl(340 50% 5% / 0.50), 0 2px 4px -2px hsl(340 50% 5% / 0.38);
|
|
850
|
+
--shadow-lg: 0 10px 15px -3px hsl(340 50% 5% / 0.55), 0 4px 6px -4px hsl(340 50% 5% / 0.40);
|
|
851
|
+
--shadow-xl: 0 20px 25px -5px hsl(340 50% 5% / 0.62), 0 8px 10px -6px hsl(340 50% 5% / 0.44);
|
|
852
|
+
--shadow-2xl: 0 25px 50px -12px hsl(340 50% 5% / 0.70);
|
|
853
|
+
--shadow-inner: inset 0 2px 4px 0 hsl(340 50% 5% / 0.30);
|
|
854
|
+
}
|
|
855
|
+
:root {
|
|
856
|
+
color-scheme: light;
|
|
857
|
+
}
|
|
858
|
+
body {
|
|
859
|
+
background: var(--color-background);
|
|
860
|
+
color: var(--color-foreground);
|
|
861
|
+
}
|