luaniverse 4.2.6 → 4.2.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 +254 -0
- package/package.json +1 -1
package/dist/theme.css
ADDED
|
@@ -0,0 +1,254 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Luaniverse Semantic Color System
|
|
3
|
+
*
|
|
4
|
+
* This theme uses a two-level token system:
|
|
5
|
+
* 1. @layer base: Raw HSL values (space-separated) for light mode in :root
|
|
6
|
+
* 2. @theme inline: Color tokens that wrap base values with hsl(var(...))
|
|
7
|
+
* 3. @media (prefers-color-scheme: dark): Dark mode HSL values in :root
|
|
8
|
+
*
|
|
9
|
+
* Usage:
|
|
10
|
+
* - Use bg-card, text-foreground, bg-primary, etc. as regular Tailwind classes
|
|
11
|
+
* - Tokens automatically switch based on prefers-color-scheme - NO dark: prefixes needed
|
|
12
|
+
* - Example: className="lua:bg-card lua:text-foreground lua:border-border"
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
@layer base {
|
|
16
|
+
:root {
|
|
17
|
+
/* Base Colors */
|
|
18
|
+
--background: 0 0% 100%; /* white */
|
|
19
|
+
--foreground: 222 47% 11%; /* gray-900 */
|
|
20
|
+
|
|
21
|
+
/* Card & Surface */
|
|
22
|
+
--card: 0 0% 100%; /* white */
|
|
23
|
+
--card-foreground: 222 47% 11%; /* gray-900 */
|
|
24
|
+
|
|
25
|
+
/* Popover */
|
|
26
|
+
--popover: 0 0% 100%; /* white */
|
|
27
|
+
--popover-foreground: 222 47% 11%; /* gray-900 */
|
|
28
|
+
|
|
29
|
+
/* Default (Emphasis - Black/Bold) */
|
|
30
|
+
--default: 0 0% 0%; /* black */
|
|
31
|
+
--default-foreground: 0 0% 100%; /* white */
|
|
32
|
+
--default-hover: 0 0% 10%; /* near-black */
|
|
33
|
+
--default-active: 0 0% 10%; /* near-black */
|
|
34
|
+
|
|
35
|
+
/* Primary (Brand - Blue) */
|
|
36
|
+
--primary: 221 83% 53%; /* blue-600 */
|
|
37
|
+
--primary-foreground: 0 0% 100%; /* white */
|
|
38
|
+
--primary-hover: 221 83% 45%; /* blue-700 */
|
|
39
|
+
--primary-active: 221 77% 40%; /* blue-800 */
|
|
40
|
+
|
|
41
|
+
/* Secondary (Neutral) */
|
|
42
|
+
--secondary: 220 13% 95%; /* gray-100 */
|
|
43
|
+
--secondary-foreground: 222 47% 11%; /* gray-900 */
|
|
44
|
+
--secondary-hover: 220 13% 91%; /* gray-200 */
|
|
45
|
+
--secondary-active: 220 13% 82%; /* gray-300 */
|
|
46
|
+
|
|
47
|
+
/* Muted */
|
|
48
|
+
--muted: 220 13% 95%; /* gray-100 */
|
|
49
|
+
--muted-foreground: 215 16% 47%; /* gray-600 */
|
|
50
|
+
|
|
51
|
+
/* Accent */
|
|
52
|
+
--accent: 221 83% 53%; /* blue-600 */
|
|
53
|
+
--accent-foreground: 0 0% 100%; /* white */
|
|
54
|
+
|
|
55
|
+
/* Accent Subtle (for tabs, pills) */
|
|
56
|
+
--accent-subtle: 214 100% 97%; /* blue-50 - very light blue */
|
|
57
|
+
--accent-subtle-foreground: 213 97% 27%; /* blue-800 */
|
|
58
|
+
--accent-subtle-hover: 214 100% 92%; /* blue-100 */
|
|
59
|
+
|
|
60
|
+
/* Destructive (Danger) */
|
|
61
|
+
--destructive: 0 84% 60%; /* red-500 */
|
|
62
|
+
--destructive-foreground: 0 0% 100%; /* white */
|
|
63
|
+
--destructive-hover: 0 72% 51%; /* red-600 */
|
|
64
|
+
--destructive-active: 0 74% 42%; /* red-700 */
|
|
65
|
+
|
|
66
|
+
/* Success */
|
|
67
|
+
--success: 142 71% 45%; /* green-600 */
|
|
68
|
+
--success-foreground: 0 0% 100%; /* white */
|
|
69
|
+
--success-hover: 142 76% 36%; /* green-700 */
|
|
70
|
+
|
|
71
|
+
/* Warning */
|
|
72
|
+
--warning: 38 92% 50%; /* yellow-500 */
|
|
73
|
+
--warning-foreground: 0 0% 100%; /* white */
|
|
74
|
+
--warning-hover: 43 96% 56%; /* yellow-400 */
|
|
75
|
+
|
|
76
|
+
/* Border & Input */
|
|
77
|
+
--border: 220 13% 91%; /* gray-200 */
|
|
78
|
+
--input: 220 13% 91%; /* gray-200 */
|
|
79
|
+
--ring: 221 83% 53%; /* blue-600 */
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
@theme inline {
|
|
84
|
+
/* Base Color Tokens */
|
|
85
|
+
--color-background: hsl(var(--background));
|
|
86
|
+
--color-foreground: hsl(var(--foreground));
|
|
87
|
+
|
|
88
|
+
/* Card & Surface Tokens */
|
|
89
|
+
--color-card: hsl(var(--card));
|
|
90
|
+
--color-card-foreground: hsl(var(--card-foreground));
|
|
91
|
+
|
|
92
|
+
/* Popover Tokens */
|
|
93
|
+
--color-popover: hsl(var(--popover));
|
|
94
|
+
--color-popover-foreground: hsl(var(--popover-foreground));
|
|
95
|
+
|
|
96
|
+
/* Default Tokens (Emphasis - Black/Bold) */
|
|
97
|
+
--color-default: hsl(var(--default));
|
|
98
|
+
--color-default-foreground: hsl(var(--default-foreground));
|
|
99
|
+
--color-default-hover: hsl(var(--default-hover));
|
|
100
|
+
--color-default-active: hsl(var(--default-active));
|
|
101
|
+
|
|
102
|
+
/* Primary Tokens (Brand - Blue) */
|
|
103
|
+
--color-primary: hsl(var(--primary));
|
|
104
|
+
--color-primary-foreground: hsl(var(--primary-foreground));
|
|
105
|
+
--color-primary-hover: hsl(var(--primary-hover));
|
|
106
|
+
--color-primary-active: hsl(var(--primary-active));
|
|
107
|
+
|
|
108
|
+
/* Secondary Tokens (Neutral - Gray) */
|
|
109
|
+
--color-secondary: hsl(var(--secondary));
|
|
110
|
+
--color-secondary-foreground: hsl(var(--secondary-foreground));
|
|
111
|
+
--color-secondary-hover: hsl(var(--secondary-hover));
|
|
112
|
+
--color-secondary-active: hsl(var(--secondary-active));
|
|
113
|
+
|
|
114
|
+
/* Muted Tokens */
|
|
115
|
+
--color-muted: hsl(var(--muted));
|
|
116
|
+
--color-muted-foreground: hsl(var(--muted-foreground));
|
|
117
|
+
|
|
118
|
+
/* Accent Tokens */
|
|
119
|
+
--color-accent: hsl(var(--accent));
|
|
120
|
+
--color-accent-foreground: hsl(var(--accent-foreground));
|
|
121
|
+
|
|
122
|
+
/* Accent Subtle Tokens (for tabs, pills) */
|
|
123
|
+
--color-accent-subtle: hsl(var(--accent-subtle));
|
|
124
|
+
--color-accent-subtle-foreground: hsl(var(--accent-subtle-foreground));
|
|
125
|
+
--color-accent-subtle-hover: hsl(var(--accent-subtle-hover));
|
|
126
|
+
|
|
127
|
+
/* Destructive Tokens (Danger - Red) */
|
|
128
|
+
--color-destructive: hsl(var(--destructive));
|
|
129
|
+
--color-destructive-foreground: hsl(var(--destructive-foreground));
|
|
130
|
+
--color-destructive-hover: hsl(var(--destructive-hover));
|
|
131
|
+
--color-destructive-active: hsl(var(--destructive-active));
|
|
132
|
+
|
|
133
|
+
/* Success Tokens (Green) */
|
|
134
|
+
--color-success: hsl(var(--success));
|
|
135
|
+
--color-success-foreground: hsl(var(--success-foreground));
|
|
136
|
+
--color-success-hover: hsl(var(--success-hover));
|
|
137
|
+
|
|
138
|
+
/* Warning Tokens (Amber) */
|
|
139
|
+
--color-warning: hsl(var(--warning));
|
|
140
|
+
--color-warning-foreground: hsl(var(--warning-foreground));
|
|
141
|
+
--color-warning-hover: hsl(var(--warning-hover));
|
|
142
|
+
|
|
143
|
+
/* Border, Input & Ring Tokens */
|
|
144
|
+
--color-border: hsl(var(--border));
|
|
145
|
+
--color-input: hsl(var(--input));
|
|
146
|
+
--color-ring: hsl(var(--ring));
|
|
147
|
+
}
|
|
148
|
+
@media (prefers-color-scheme: dark) {
|
|
149
|
+
:root {
|
|
150
|
+
/* Base Colors - Dark grays and off-whites */
|
|
151
|
+
--background: 222 47% 11%; /* gray-900 */
|
|
152
|
+
--foreground: 210 20% 98%; /* gray-50 */
|
|
153
|
+
|
|
154
|
+
/* Card & Surface - Slightly lighter than background for depth */
|
|
155
|
+
--card: 217 19% 18%; /* gray-800/850 - elevated surface */
|
|
156
|
+
--card-foreground: 210 20% 98%; /* gray-50 */
|
|
157
|
+
|
|
158
|
+
/* Popover - Slightly lighter than background for depth */
|
|
159
|
+
--popover: 217 19% 18%; /* gray-800/850 - elevated surface */
|
|
160
|
+
--popover-foreground: 210 20% 98%; /* gray-50 */
|
|
161
|
+
|
|
162
|
+
/* Default (Emphasis - Inverted for dark mode) */
|
|
163
|
+
--default: 220 13% 95%; /* gray-100 - light gray for dark bg */
|
|
164
|
+
--default-foreground: 222 47% 11%; /* gray-900 - dark text */
|
|
165
|
+
--default-hover: 210 20% 98%; /* gray-50 - lighter on hover */
|
|
166
|
+
--default-active: 220 13% 91%; /* gray-200 - darker on press */
|
|
167
|
+
|
|
168
|
+
/* Primary (Brand - Blue) - Slightly lighter for visibility */
|
|
169
|
+
--primary: 217 91% 60%; /* blue-500 */
|
|
170
|
+
--primary-foreground: 222 47% 11%; /* gray-900 */
|
|
171
|
+
--primary-hover: 213 94% 68%; /* blue-400 */
|
|
172
|
+
--primary-active: 221 83% 53%; /* blue-600 */
|
|
173
|
+
|
|
174
|
+
/* Secondary (Neutral) - Dark grays */
|
|
175
|
+
--secondary: 217 19% 27%; /* gray-700 */
|
|
176
|
+
--secondary-foreground: 210 20% 98%; /* gray-50 */
|
|
177
|
+
--secondary-hover: 215 25% 27%; /* gray-600 */
|
|
178
|
+
--secondary-active: 215 28% 17%; /* gray-800 */
|
|
179
|
+
|
|
180
|
+
/* Muted */
|
|
181
|
+
--muted: 217 19% 27%; /* gray-700 */
|
|
182
|
+
--muted-foreground: 215 16% 47%; /* gray-400 */
|
|
183
|
+
|
|
184
|
+
/* Accent */
|
|
185
|
+
--accent: 217 91% 60%; /* blue-500 */
|
|
186
|
+
--accent-foreground: 222 47% 11%; /* gray-900 */
|
|
187
|
+
|
|
188
|
+
/* Accent Subtle (for tabs, pills) */
|
|
189
|
+
--accent-subtle: 215 25% 27%; /* gray-700 - dark subtle bg */
|
|
190
|
+
--accent-subtle-foreground: 213 94% 68%; /* blue-400 - bright blue text */
|
|
191
|
+
--accent-subtle-hover: 217 19% 35%; /* gray-600 - lighter hover */
|
|
192
|
+
|
|
193
|
+
/* Destructive (Danger) - Slightly muted */
|
|
194
|
+
--destructive: 0 84% 60%; /* red-500 */
|
|
195
|
+
--destructive-foreground: 0 0% 100%; /* white */
|
|
196
|
+
--destructive-hover: 0 91% 71%; /* red-400 */
|
|
197
|
+
--destructive-active: 0 72% 51%; /* red-600 */
|
|
198
|
+
|
|
199
|
+
/* Success - Slightly lighter */
|
|
200
|
+
--success: 142 71% 45%; /* green-600 */
|
|
201
|
+
--success-foreground: 0 0% 100%; /* white */
|
|
202
|
+
--success-hover: 142 69% 58%; /* green-500 */
|
|
203
|
+
|
|
204
|
+
/* Warning - Amber tones for better dark mode */
|
|
205
|
+
--warning: 38 92% 50%; /* amber-500 */
|
|
206
|
+
--warning-foreground: 222 47% 11%; /* gray-900 */
|
|
207
|
+
--warning-hover: 43 96% 56%; /* amber-400 */
|
|
208
|
+
|
|
209
|
+
/* Border & Input */
|
|
210
|
+
--border: 215 25% 27%; /* gray-700 */
|
|
211
|
+
--input: 215 25% 27%; /* gray-700 */
|
|
212
|
+
--ring: 213 94% 68%; /* blue-400 */
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.rdp-root {
|
|
217
|
+
/* Calendar background */
|
|
218
|
+
--rdp-background-color: hsl(var(--card));
|
|
219
|
+
|
|
220
|
+
/* Use semantic tokens for selected days instead of default blue */
|
|
221
|
+
--rdp-accent-color: hsl(var(--foreground));
|
|
222
|
+
--rdp-accent-background-color: hsl(var(--secondary));
|
|
223
|
+
|
|
224
|
+
/* Range selection colors */
|
|
225
|
+
--rdp-range_middle-background-color: hsl(var(--muted));
|
|
226
|
+
--rdp-range_middle-color: hsl(var(--foreground));
|
|
227
|
+
--rdp-range_start-background: hsl(var(--secondary));
|
|
228
|
+
--rdp-range_start-color: hsl(var(--default-foreground));
|
|
229
|
+
--rdp-range_end-background: hsl(var(--secondary));
|
|
230
|
+
--rdp-range_end-color: hsl(var(--foreground));
|
|
231
|
+
|
|
232
|
+
/* Today indicator - use foreground color with bold font (handled in classNames) */
|
|
233
|
+
--rdp-today-color: hsl(var(--foreground));
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
[data-theme='dark'] .rdp-root {
|
|
237
|
+
/* Calendar background and base colors for dark mode */
|
|
238
|
+
--rdp-background-color: hsl(var(--card));
|
|
239
|
+
|
|
240
|
+
/* Use semantic tokens for selected days in dark mode */
|
|
241
|
+
--rdp-accent-color: hsl(var(--foreground));
|
|
242
|
+
--rdp-accent-background-color: hsl(var(--secondary));
|
|
243
|
+
|
|
244
|
+
/* Range selection colors for dark mode */
|
|
245
|
+
--rdp-range_middle-background-color: hsl(var(--muted));
|
|
246
|
+
--rdp-range_middle-color: hsl(var(--foreground));
|
|
247
|
+
--rdp-range_start-background: hsl(var(--secondary));
|
|
248
|
+
--rdp-range_start-color: hsl(var(--foreground));
|
|
249
|
+
--rdp-range_end-background: hsl(var(--secondary));
|
|
250
|
+
--rdp-range_end-color: hsl(var(--foreground));
|
|
251
|
+
|
|
252
|
+
/* Today indicator for dark mode */
|
|
253
|
+
--rdp-today-color: hsl(var(--foreground));
|
|
254
|
+
}
|