@mesob/ui 0.2.4 → 0.3.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.
- package/dist/components.d.ts +1448 -248
- package/dist/components.js +13752 -4791
- package/dist/components.js.map +1 -1
- package/dist/index.d.ts +5 -1
- package/dist/index.js +482 -29
- package/dist/index.js.map +1 -1
- package/dist/lib/color-utils.d.ts +17 -0
- package/dist/lib/color-utils.js +205 -0
- package/dist/lib/color-utils.js.map +1 -0
- package/dist/lib/locale.d.ts +38 -0
- package/dist/lib/locale.js +54 -0
- package/dist/lib/locale.js.map +1 -0
- package/dist/lib/theme-config.d.ts +22 -0
- package/dist/lib/theme-config.js +420 -0
- package/dist/lib/theme-config.js.map +1 -0
- package/dist/lib/theme-schema.d.ts +12 -4
- package/dist/lib/theme-schema.js +8 -29
- package/dist/lib/theme-schema.js.map +1 -1
- package/dist/lib/themes.d.ts +23 -0
- package/dist/lib/themes.js +315 -0
- package/dist/lib/themes.js.map +1 -0
- package/dist/providers.d.ts +12 -2
- package/dist/providers.js +74 -7
- package/dist/providers.js.map +1 -1
- package/package.json +23 -29
|
@@ -0,0 +1,420 @@
|
|
|
1
|
+
// src/lib/theme-config.ts
|
|
2
|
+
import { converter, wcagContrast } from "culori";
|
|
3
|
+
|
|
4
|
+
// src/lib/themes.ts
|
|
5
|
+
var BASE_COLORS = [
|
|
6
|
+
{
|
|
7
|
+
name: "neutral",
|
|
8
|
+
title: "Neutral",
|
|
9
|
+
cssVars: {
|
|
10
|
+
light: {
|
|
11
|
+
background: "oklch(1 0 0)",
|
|
12
|
+
foreground: "oklch(0.145 0 0)",
|
|
13
|
+
card: "oklch(1 0 0)",
|
|
14
|
+
"card-foreground": "oklch(0.145 0 0)",
|
|
15
|
+
popover: "oklch(1 0 0)",
|
|
16
|
+
"popover-foreground": "oklch(0.145 0 0)",
|
|
17
|
+
primary: "oklch(0.205 0 0)",
|
|
18
|
+
"primary-foreground": "oklch(0.985 0 0)",
|
|
19
|
+
secondary: "oklch(0.97 0 0)",
|
|
20
|
+
"secondary-foreground": "oklch(0.205 0 0)",
|
|
21
|
+
muted: "oklch(0.97 0 0)",
|
|
22
|
+
"muted-foreground": "oklch(0.556 0 0)",
|
|
23
|
+
accent: "oklch(0.97 0 0)",
|
|
24
|
+
"accent-foreground": "oklch(0.205 0 0)",
|
|
25
|
+
destructive: "oklch(0.58 0.22 27)",
|
|
26
|
+
border: "oklch(0.922 0 0)",
|
|
27
|
+
input: "oklch(0.922 0 0)",
|
|
28
|
+
ring: "oklch(0.708 0 0)",
|
|
29
|
+
"chart-1": "oklch(0.809 0.105 251.813)",
|
|
30
|
+
"chart-2": "oklch(0.623 0.214 259.815)",
|
|
31
|
+
"chart-3": "oklch(0.546 0.245 262.881)",
|
|
32
|
+
"chart-4": "oklch(0.488 0.243 264.376)",
|
|
33
|
+
"chart-5": "oklch(0.424 0.199 265.638)",
|
|
34
|
+
radius: "0.625rem",
|
|
35
|
+
sidebar: "oklch(0.985 0 0)",
|
|
36
|
+
"sidebar-foreground": "oklch(0.145 0 0)",
|
|
37
|
+
"sidebar-primary": "oklch(0.205 0 0)",
|
|
38
|
+
"sidebar-primary-foreground": "oklch(0.985 0 0)",
|
|
39
|
+
"sidebar-accent": "oklch(0.97 0 0)",
|
|
40
|
+
"sidebar-accent-foreground": "oklch(0.205 0 0)",
|
|
41
|
+
"sidebar-border": "oklch(0.922 0 0)",
|
|
42
|
+
"sidebar-ring": "oklch(0.708 0 0)"
|
|
43
|
+
},
|
|
44
|
+
dark: {
|
|
45
|
+
background: "oklch(0.145 0 0)",
|
|
46
|
+
foreground: "oklch(0.985 0 0)",
|
|
47
|
+
card: "oklch(0.205 0 0)",
|
|
48
|
+
"card-foreground": "oklch(0.985 0 0)",
|
|
49
|
+
popover: "oklch(0.205 0 0)",
|
|
50
|
+
"popover-foreground": "oklch(0.985 0 0)",
|
|
51
|
+
primary: "oklch(0.87 0.00 0)",
|
|
52
|
+
"primary-foreground": "oklch(0.205 0 0)",
|
|
53
|
+
secondary: "oklch(0.269 0 0)",
|
|
54
|
+
"secondary-foreground": "oklch(0.985 0 0)",
|
|
55
|
+
muted: "oklch(0.269 0 0)",
|
|
56
|
+
"muted-foreground": "oklch(0.708 0 0)",
|
|
57
|
+
accent: "oklch(0.371 0 0)",
|
|
58
|
+
"accent-foreground": "oklch(0.985 0 0)",
|
|
59
|
+
destructive: "oklch(0.704 0.191 22.216)",
|
|
60
|
+
border: "oklch(1 0 0 / 10%)",
|
|
61
|
+
input: "oklch(1 0 0 / 15%)",
|
|
62
|
+
ring: "oklch(0.556 0 0)",
|
|
63
|
+
"chart-1": "oklch(0.809 0.105 251.813)",
|
|
64
|
+
"chart-2": "oklch(0.623 0.214 259.815)",
|
|
65
|
+
"chart-3": "oklch(0.546 0.245 262.881)",
|
|
66
|
+
"chart-4": "oklch(0.488 0.243 264.376)",
|
|
67
|
+
"chart-5": "oklch(0.424 0.199 265.638)",
|
|
68
|
+
sidebar: "oklch(0.205 0 0)",
|
|
69
|
+
"sidebar-foreground": "oklch(0.985 0 0)",
|
|
70
|
+
"sidebar-primary": "oklch(0.488 0.243 264.376)",
|
|
71
|
+
"sidebar-primary-foreground": "oklch(0.985 0 0)",
|
|
72
|
+
"sidebar-accent": "oklch(0.269 0 0)",
|
|
73
|
+
"sidebar-accent-foreground": "oklch(0.985 0 0)",
|
|
74
|
+
"sidebar-border": "oklch(1 0 0 / 10%)",
|
|
75
|
+
"sidebar-ring": "oklch(0.556 0 0)"
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
name: "stone",
|
|
81
|
+
title: "Stone",
|
|
82
|
+
cssVars: {
|
|
83
|
+
light: {
|
|
84
|
+
background: "oklch(1 0 0)",
|
|
85
|
+
foreground: "oklch(0.147 0.004 49.25)",
|
|
86
|
+
card: "oklch(1 0 0)",
|
|
87
|
+
"card-foreground": "oklch(0.147 0.004 49.25)",
|
|
88
|
+
popover: "oklch(1 0 0)",
|
|
89
|
+
"popover-foreground": "oklch(0.147 0.004 49.25)",
|
|
90
|
+
primary: "oklch(0.216 0.006 56.043)",
|
|
91
|
+
"primary-foreground": "oklch(0.985 0.001 106.423)",
|
|
92
|
+
secondary: "oklch(0.97 0.001 106.424)",
|
|
93
|
+
"secondary-foreground": "oklch(0.216 0.006 56.043)",
|
|
94
|
+
muted: "oklch(0.97 0.001 106.424)",
|
|
95
|
+
"muted-foreground": "oklch(0.553 0.013 58.071)",
|
|
96
|
+
accent: "oklch(0.97 0.001 106.424)",
|
|
97
|
+
"accent-foreground": "oklch(0.216 0.006 56.043)",
|
|
98
|
+
destructive: "oklch(0.577 0.245 27.325)",
|
|
99
|
+
border: "oklch(0.923 0.003 48.717)",
|
|
100
|
+
input: "oklch(0.923 0.003 48.717)",
|
|
101
|
+
ring: "oklch(0.709 0.01 56.259)",
|
|
102
|
+
"chart-1": "oklch(0.646 0.222 41.116)",
|
|
103
|
+
"chart-2": "oklch(0.6 0.118 184.704)",
|
|
104
|
+
"chart-3": "oklch(0.398 0.07 227.392)",
|
|
105
|
+
"chart-4": "oklch(0.828 0.189 84.429)",
|
|
106
|
+
"chart-5": "oklch(0.769 0.188 70.08)",
|
|
107
|
+
radius: "0.625rem",
|
|
108
|
+
sidebar: "oklch(0.985 0.001 106.423)",
|
|
109
|
+
"sidebar-foreground": "oklch(0.147 0.004 49.25)",
|
|
110
|
+
"sidebar-primary": "oklch(0.216 0.006 56.043)",
|
|
111
|
+
"sidebar-primary-foreground": "oklch(0.985 0.001 106.423)",
|
|
112
|
+
"sidebar-accent": "oklch(0.97 0.001 106.424)",
|
|
113
|
+
"sidebar-accent-foreground": "oklch(0.216 0.006 56.043)",
|
|
114
|
+
"sidebar-border": "oklch(0.923 0.003 48.717)",
|
|
115
|
+
"sidebar-ring": "oklch(0.709 0.01 56.259)"
|
|
116
|
+
},
|
|
117
|
+
dark: {
|
|
118
|
+
background: "oklch(0.147 0.004 49.25)",
|
|
119
|
+
foreground: "oklch(0.985 0.001 106.423)",
|
|
120
|
+
card: "oklch(0.216 0.006 56.043)",
|
|
121
|
+
"card-foreground": "oklch(0.985 0.001 106.423)",
|
|
122
|
+
popover: "oklch(0.216 0.006 56.043)",
|
|
123
|
+
"popover-foreground": "oklch(0.985 0.001 106.423)",
|
|
124
|
+
primary: "oklch(0.923 0.003 48.717)",
|
|
125
|
+
"primary-foreground": "oklch(0.216 0.006 56.043)",
|
|
126
|
+
secondary: "oklch(0.268 0.007 34.298)",
|
|
127
|
+
"secondary-foreground": "oklch(0.985 0.001 106.423)",
|
|
128
|
+
muted: "oklch(0.268 0.007 34.298)",
|
|
129
|
+
"muted-foreground": "oklch(0.709 0.01 56.259)",
|
|
130
|
+
accent: "oklch(0.268 0.007 34.298)",
|
|
131
|
+
"accent-foreground": "oklch(0.985 0.001 106.423)",
|
|
132
|
+
destructive: "oklch(0.704 0.191 22.216)",
|
|
133
|
+
border: "oklch(1 0 0 / 10%)",
|
|
134
|
+
input: "oklch(1 0 0 / 15%)",
|
|
135
|
+
ring: "oklch(0.553 0.013 58.071)",
|
|
136
|
+
"chart-1": "oklch(0.488 0.243 264.376)",
|
|
137
|
+
"chart-2": "oklch(0.696 0.17 162.48)",
|
|
138
|
+
"chart-3": "oklch(0.769 0.188 70.08)",
|
|
139
|
+
"chart-4": "oklch(0.627 0.265 303.9)",
|
|
140
|
+
"chart-5": "oklch(0.645 0.246 16.439)",
|
|
141
|
+
sidebar: "oklch(0.216 0.006 56.043)",
|
|
142
|
+
"sidebar-foreground": "oklch(0.985 0.001 106.423)",
|
|
143
|
+
"sidebar-primary": "oklch(0.488 0.243 264.376)",
|
|
144
|
+
"sidebar-primary-foreground": "oklch(0.985 0.001 106.423)",
|
|
145
|
+
"sidebar-accent": "oklch(0.268 0.007 34.298)",
|
|
146
|
+
"sidebar-accent-foreground": "oklch(0.985 0.001 106.423)",
|
|
147
|
+
"sidebar-border": "oklch(1 0 0 / 10%)",
|
|
148
|
+
"sidebar-ring": "oklch(0.553 0.013 58.071)"
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
name: "zinc",
|
|
154
|
+
title: "Zinc",
|
|
155
|
+
cssVars: {
|
|
156
|
+
light: {
|
|
157
|
+
background: "oklch(1 0 0)",
|
|
158
|
+
foreground: "oklch(0.141 0.005 285.823)",
|
|
159
|
+
card: "oklch(1 0 0)",
|
|
160
|
+
"card-foreground": "oklch(0.141 0.005 285.823)",
|
|
161
|
+
popover: "oklch(1 0 0)",
|
|
162
|
+
"popover-foreground": "oklch(0.141 0.005 285.823)",
|
|
163
|
+
primary: "oklch(0.21 0.006 285.885)",
|
|
164
|
+
"primary-foreground": "oklch(0.985 0 0)",
|
|
165
|
+
secondary: "oklch(0.967 0.001 286.375)",
|
|
166
|
+
"secondary-foreground": "oklch(0.21 0.006 285.885)",
|
|
167
|
+
muted: "oklch(0.967 0.001 286.375)",
|
|
168
|
+
"muted-foreground": "oklch(0.552 0.016 285.938)",
|
|
169
|
+
accent: "oklch(0.967 0.001 286.375)",
|
|
170
|
+
"accent-foreground": "oklch(0.21 0.006 285.885)",
|
|
171
|
+
destructive: "oklch(0.577 0.245 27.325)",
|
|
172
|
+
border: "oklch(0.92 0.004 286.32)",
|
|
173
|
+
input: "oklch(0.92 0.004 286.32)",
|
|
174
|
+
ring: "oklch(0.705 0.015 286.067)",
|
|
175
|
+
"chart-1": "oklch(0.646 0.222 41.116)",
|
|
176
|
+
"chart-2": "oklch(0.6 0.118 184.704)",
|
|
177
|
+
"chart-3": "oklch(0.398 0.07 227.392)",
|
|
178
|
+
"chart-4": "oklch(0.828 0.189 84.429)",
|
|
179
|
+
"chart-5": "oklch(0.769 0.188 70.08)",
|
|
180
|
+
radius: "0.625rem",
|
|
181
|
+
sidebar: "oklch(0.985 0 0)",
|
|
182
|
+
"sidebar-foreground": "oklch(0.141 0.005 285.823)",
|
|
183
|
+
"sidebar-primary": "oklch(0.21 0.006 285.885)",
|
|
184
|
+
"sidebar-primary-foreground": "oklch(0.985 0 0)",
|
|
185
|
+
"sidebar-accent": "oklch(0.967 0.001 286.375)",
|
|
186
|
+
"sidebar-accent-foreground": "oklch(0.21 0.006 285.885)",
|
|
187
|
+
"sidebar-border": "oklch(0.92 0.004 286.32)",
|
|
188
|
+
"sidebar-ring": "oklch(0.705 0.015 286.067)"
|
|
189
|
+
},
|
|
190
|
+
dark: {
|
|
191
|
+
background: "oklch(0.141 0.005 285.823)",
|
|
192
|
+
foreground: "oklch(0.985 0 0)",
|
|
193
|
+
card: "oklch(0.21 0.006 285.885)",
|
|
194
|
+
"card-foreground": "oklch(0.985 0 0)",
|
|
195
|
+
popover: "oklch(0.21 0.006 285.885)",
|
|
196
|
+
"popover-foreground": "oklch(0.985 0 0)",
|
|
197
|
+
primary: "oklch(0.92 0.004 286.32)",
|
|
198
|
+
"primary-foreground": "oklch(0.21 0.006 285.885)",
|
|
199
|
+
secondary: "oklch(0.274 0.006 286.033)",
|
|
200
|
+
"secondary-foreground": "oklch(0.985 0 0)",
|
|
201
|
+
muted: "oklch(0.274 0.006 286.033)",
|
|
202
|
+
"muted-foreground": "oklch(0.705 0.015 286.067)",
|
|
203
|
+
accent: "oklch(0.274 0.006 286.033)",
|
|
204
|
+
"accent-foreground": "oklch(0.985 0 0)",
|
|
205
|
+
destructive: "oklch(0.704 0.191 22.216)",
|
|
206
|
+
border: "oklch(1 0 0 / 10%)",
|
|
207
|
+
input: "oklch(1 0 0 / 15%)",
|
|
208
|
+
ring: "oklch(0.552 0.016 285.938)",
|
|
209
|
+
"chart-1": "oklch(0.488 0.243 264.376)",
|
|
210
|
+
"chart-2": "oklch(0.696 0.17 162.48)",
|
|
211
|
+
"chart-3": "oklch(0.769 0.188 70.08)",
|
|
212
|
+
"chart-4": "oklch(0.627 0.265 303.9)",
|
|
213
|
+
"chart-5": "oklch(0.645 0.246 16.439)",
|
|
214
|
+
sidebar: "oklch(0.21 0.006 285.885)",
|
|
215
|
+
"sidebar-foreground": "oklch(0.985 0 0)",
|
|
216
|
+
"sidebar-primary": "oklch(0.488 0.243 264.376)",
|
|
217
|
+
"sidebar-primary-foreground": "oklch(0.985 0 0)",
|
|
218
|
+
"sidebar-accent": "oklch(0.274 0.006 286.033)",
|
|
219
|
+
"sidebar-accent-foreground": "oklch(0.985 0 0)",
|
|
220
|
+
"sidebar-border": "oklch(1 0 0 / 10%)",
|
|
221
|
+
"sidebar-ring": "oklch(0.552 0.016 285.938)"
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
},
|
|
225
|
+
{
|
|
226
|
+
name: "gray",
|
|
227
|
+
title: "Gray",
|
|
228
|
+
cssVars: {
|
|
229
|
+
light: {
|
|
230
|
+
background: "oklch(1 0 0)",
|
|
231
|
+
foreground: "oklch(0.13 0.028 261.692)",
|
|
232
|
+
card: "oklch(1 0 0)",
|
|
233
|
+
"card-foreground": "oklch(0.13 0.028 261.692)",
|
|
234
|
+
popover: "oklch(1 0 0)",
|
|
235
|
+
"popover-foreground": "oklch(0.13 0.028 261.692)",
|
|
236
|
+
primary: "oklch(0.21 0.034 264.665)",
|
|
237
|
+
"primary-foreground": "oklch(0.985 0.002 247.839)",
|
|
238
|
+
secondary: "oklch(0.967 0.003 264.542)",
|
|
239
|
+
"secondary-foreground": "oklch(0.21 0.034 264.665)",
|
|
240
|
+
muted: "oklch(0.967 0.003 264.542)",
|
|
241
|
+
"muted-foreground": "oklch(0.551 0.027 264.364)",
|
|
242
|
+
accent: "oklch(0.967 0.003 264.542)",
|
|
243
|
+
"accent-foreground": "oklch(0.21 0.034 264.665)",
|
|
244
|
+
destructive: "oklch(0.577 0.245 27.325)",
|
|
245
|
+
border: "oklch(0.928 0.006 264.531)",
|
|
246
|
+
input: "oklch(0.928 0.006 264.531)",
|
|
247
|
+
ring: "oklch(0.707 0.022 261.325)",
|
|
248
|
+
"chart-1": "oklch(0.646 0.222 41.116)",
|
|
249
|
+
"chart-2": "oklch(0.6 0.118 184.704)",
|
|
250
|
+
"chart-3": "oklch(0.398 0.07 227.392)",
|
|
251
|
+
"chart-4": "oklch(0.828 0.189 84.429)",
|
|
252
|
+
"chart-5": "oklch(0.769 0.188 70.08)",
|
|
253
|
+
radius: "0.625rem",
|
|
254
|
+
sidebar: "oklch(0.985 0.002 247.839)",
|
|
255
|
+
"sidebar-foreground": "oklch(0.13 0.028 261.692)",
|
|
256
|
+
"sidebar-primary": "oklch(0.21 0.034 264.665)",
|
|
257
|
+
"sidebar-primary-foreground": "oklch(0.985 0.002 247.839)",
|
|
258
|
+
"sidebar-accent": "oklch(0.967 0.003 264.542)",
|
|
259
|
+
"sidebar-accent-foreground": "oklch(0.21 0.034 264.665)",
|
|
260
|
+
"sidebar-border": "oklch(0.928 0.006 264.531)",
|
|
261
|
+
"sidebar-ring": "oklch(0.707 0.022 261.325)"
|
|
262
|
+
},
|
|
263
|
+
dark: {
|
|
264
|
+
background: "oklch(0.13 0.028 261.692)",
|
|
265
|
+
foreground: "oklch(0.985 0.002 247.839)",
|
|
266
|
+
card: "oklch(0.21 0.034 264.665)",
|
|
267
|
+
"card-foreground": "oklch(0.985 0.002 247.839)",
|
|
268
|
+
popover: "oklch(0.21 0.034 264.665)",
|
|
269
|
+
"popover-foreground": "oklch(0.985 0.002 247.839)",
|
|
270
|
+
primary: "oklch(0.928 0.006 264.531)",
|
|
271
|
+
"primary-foreground": "oklch(0.21 0.034 264.665)",
|
|
272
|
+
secondary: "oklch(0.278 0.033 256.848)",
|
|
273
|
+
"secondary-foreground": "oklch(0.985 0.002 247.839)",
|
|
274
|
+
muted: "oklch(0.278 0.033 256.848)",
|
|
275
|
+
"muted-foreground": "oklch(0.707 0.022 261.325)",
|
|
276
|
+
accent: "oklch(0.278 0.033 256.848)",
|
|
277
|
+
"accent-foreground": "oklch(0.985 0.002 247.839)",
|
|
278
|
+
destructive: "oklch(0.704 0.191 22.216)",
|
|
279
|
+
border: "oklch(1 0 0 / 10%)",
|
|
280
|
+
input: "oklch(1 0 0 / 15%)",
|
|
281
|
+
ring: "oklch(0.551 0.027 264.364)",
|
|
282
|
+
"chart-1": "oklch(0.488 0.243 264.376)",
|
|
283
|
+
"chart-2": "oklch(0.696 0.17 162.48)",
|
|
284
|
+
"chart-3": "oklch(0.769 0.188 70.08)",
|
|
285
|
+
"chart-4": "oklch(0.627 0.265 303.9)",
|
|
286
|
+
"chart-5": "oklch(0.645 0.246 16.439)",
|
|
287
|
+
sidebar: "oklch(0.21 0.034 264.665)",
|
|
288
|
+
"sidebar-foreground": "oklch(0.985 0.002 247.839)",
|
|
289
|
+
"sidebar-primary": "oklch(0.488 0.243 264.376)",
|
|
290
|
+
"sidebar-primary-foreground": "oklch(0.985 0.002 247.839)",
|
|
291
|
+
"sidebar-accent": "oklch(0.278 0.033 256.848)",
|
|
292
|
+
"sidebar-accent-foreground": "oklch(0.985 0.002 247.839)",
|
|
293
|
+
"sidebar-border": "oklch(1 0 0 / 10%)",
|
|
294
|
+
"sidebar-ring": "oklch(0.551 0.027 264.364)"
|
|
295
|
+
}
|
|
296
|
+
}
|
|
297
|
+
}
|
|
298
|
+
];
|
|
299
|
+
var RADII = [
|
|
300
|
+
{ name: "default", label: "Default", value: "" },
|
|
301
|
+
{ name: "none", label: "None", value: "0" },
|
|
302
|
+
{ name: "small", label: "Small", value: "0.45rem" },
|
|
303
|
+
{ name: "medium", label: "Medium", value: "0.625rem" },
|
|
304
|
+
{ name: "large", label: "Large", value: "0.875rem" }
|
|
305
|
+
];
|
|
306
|
+
function getBaseColor(name) {
|
|
307
|
+
return BASE_COLORS.find((c) => c.name === name);
|
|
308
|
+
}
|
|
309
|
+
function getRadius(name) {
|
|
310
|
+
return RADII.find((r) => r.name === name);
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
// src/lib/theme-config.ts
|
|
314
|
+
var toOklch = converter("oklch");
|
|
315
|
+
function formatOklch(color) {
|
|
316
|
+
if (!color) {
|
|
317
|
+
return "oklch(0 0 0)";
|
|
318
|
+
}
|
|
319
|
+
const l = color.l ?? 0;
|
|
320
|
+
const c = color.c ?? 0;
|
|
321
|
+
const h = color.h ?? 0;
|
|
322
|
+
return `oklch(${l.toFixed(3)} ${c.toFixed(3)} ${h.toFixed(3)})`;
|
|
323
|
+
}
|
|
324
|
+
function generateChartColors(primaryOklch) {
|
|
325
|
+
if (!primaryOklch) {
|
|
326
|
+
return {
|
|
327
|
+
light: [
|
|
328
|
+
"oklch(0.646 0.222 41.116)",
|
|
329
|
+
"oklch(0.6 0.118 184.704)",
|
|
330
|
+
"oklch(0.398 0.07 227.392)",
|
|
331
|
+
"oklch(0.828 0.189 84.429)",
|
|
332
|
+
"oklch(0.769 0.188 70.08)"
|
|
333
|
+
],
|
|
334
|
+
dark: [
|
|
335
|
+
"oklch(0.488 0.243 264.376)",
|
|
336
|
+
"oklch(0.696 0.17 162.48)",
|
|
337
|
+
"oklch(0.769 0.188 70.08)",
|
|
338
|
+
"oklch(0.627 0.265 303.9)",
|
|
339
|
+
"oklch(0.645 0.246 16.439)"
|
|
340
|
+
]
|
|
341
|
+
};
|
|
342
|
+
}
|
|
343
|
+
const { l = 0.5, c = 0.1, h = 200 } = primaryOklch;
|
|
344
|
+
const lightCharts = [
|
|
345
|
+
formatOklch({ mode: "oklch", l: Math.min(l + 0.15, 0.95), c, h }),
|
|
346
|
+
formatOklch({ mode: "oklch", l: Math.min(l + 0.05, 0.9), c, h }),
|
|
347
|
+
formatOklch({ mode: "oklch", l, c, h }),
|
|
348
|
+
formatOklch({ mode: "oklch", l: Math.max(l - 0.1, 0.3), c: c * 0.9, h }),
|
|
349
|
+
formatOklch({ mode: "oklch", l: Math.max(l - 0.15, 0.25), c: c * 0.8, h })
|
|
350
|
+
];
|
|
351
|
+
const darkCharts = [
|
|
352
|
+
formatOklch({ mode: "oklch", l: Math.max(l - 0.1, 0.4), c, h }),
|
|
353
|
+
formatOklch({
|
|
354
|
+
mode: "oklch",
|
|
355
|
+
l: Math.min(l + 0.1, 0.7),
|
|
356
|
+
c: c * 0.8,
|
|
357
|
+
h: (h + 30) % 360
|
|
358
|
+
}),
|
|
359
|
+
formatOklch({
|
|
360
|
+
mode: "oklch",
|
|
361
|
+
l: Math.min(l + 0.15, 0.75),
|
|
362
|
+
c: c * 0.9,
|
|
363
|
+
h: (h - 30 + 360) % 360
|
|
364
|
+
}),
|
|
365
|
+
formatOklch({
|
|
366
|
+
mode: "oklch",
|
|
367
|
+
l: Math.max(l, 0.6),
|
|
368
|
+
c: c * 1.1,
|
|
369
|
+
h: (h + 60) % 360
|
|
370
|
+
}),
|
|
371
|
+
formatOklch({
|
|
372
|
+
mode: "oklch",
|
|
373
|
+
l: Math.max(l + 0.05, 0.62),
|
|
374
|
+
c: c * 1.05,
|
|
375
|
+
h: (h - 60 + 360) % 360
|
|
376
|
+
})
|
|
377
|
+
];
|
|
378
|
+
return { light: lightCharts, dark: darkCharts };
|
|
379
|
+
}
|
|
380
|
+
function buildTheme(config) {
|
|
381
|
+
const baseColorName = config.baseColor ?? "zinc";
|
|
382
|
+
const base = getBaseColor(baseColorName);
|
|
383
|
+
if (!base) {
|
|
384
|
+
throw new Error(`Base color "${baseColorName}" not found`);
|
|
385
|
+
}
|
|
386
|
+
const lightVars = { ...base.cssVars.light };
|
|
387
|
+
const darkVars = { ...base.cssVars.dark };
|
|
388
|
+
const primaryOklch = toOklch(config.color);
|
|
389
|
+
if (primaryOklch) {
|
|
390
|
+
const { l = 0.5, c = 0.1, h = 200 } = primaryOklch;
|
|
391
|
+
lightVars.primary = formatOklch({ mode: "oklch", l, c, h });
|
|
392
|
+
lightVars["primary-foreground"] = "oklch(0.985 0 0)";
|
|
393
|
+
const darkL = Math.min(l + 0.2, 0.9);
|
|
394
|
+
darkVars.primary = formatOklch({ mode: "oklch", l: darkL, c, h });
|
|
395
|
+
const darkPrimaryLightness = darkL;
|
|
396
|
+
const contrastDark = darkPrimaryLightness > 0.6 ? "oklch(0.145 0 0)" : "oklch(0.985 0 0)";
|
|
397
|
+
darkVars["primary-foreground"] = contrastDark;
|
|
398
|
+
lightVars["sidebar-primary"] = lightVars.primary;
|
|
399
|
+
lightVars["sidebar-primary-foreground"] = lightVars["primary-foreground"];
|
|
400
|
+
darkVars["sidebar-primary"] = darkVars.primary;
|
|
401
|
+
darkVars["sidebar-primary-foreground"] = darkVars["primary-foreground"];
|
|
402
|
+
const charts = generateChartColors(primaryOklch);
|
|
403
|
+
for (let i = 0; i < 5; i++) {
|
|
404
|
+
lightVars[`chart-${i + 1}`] = charts.light[i];
|
|
405
|
+
darkVars[`chart-${i + 1}`] = charts.dark[i];
|
|
406
|
+
}
|
|
407
|
+
}
|
|
408
|
+
if (config.radius && config.radius !== "default") {
|
|
409
|
+
const radius = getRadius(config.radius);
|
|
410
|
+
if (radius?.value) {
|
|
411
|
+
lightVars.radius = radius.value;
|
|
412
|
+
darkVars.radius = radius.value;
|
|
413
|
+
}
|
|
414
|
+
}
|
|
415
|
+
return { light: lightVars, dark: darkVars };
|
|
416
|
+
}
|
|
417
|
+
export {
|
|
418
|
+
buildTheme
|
|
419
|
+
};
|
|
420
|
+
//# sourceMappingURL=theme-config.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/lib/theme-config.ts","../../src/lib/themes.ts"],"sourcesContent":["/**\n * Theme configuration and building logic.\n * Converts user config (hex color + base color) into CSS variables.\n */\n\nimport { converter, wcagContrast } from 'culori';\nimport { getBaseColor, getRadius } from './themes';\n\nconst toOklch = converter('oklch');\n\nexport type StyleName = 'vega' | 'nova' | 'maia' | 'lyra' | 'mira';\n\nexport type ThemeConfig = {\n color: string; // hex like '#1199ee'\n baseColor?: 'neutral' | 'zinc' | 'stone' | 'gray'; // default 'zinc'\n style?: StyleName;\n radius?: 'default' | 'none' | 'small' | 'medium' | 'large';\n};\n\nexport type ThemeVars = {\n light: Record<string, string>;\n dark: Record<string, string>;\n};\n\n/**\n * Formats OKLCH color to CSS string format.\n * Input: { mode: 'oklch', l: 0.5, c: 0.1, h: 200 }\n * Output: 'oklch(0.5 0.1 200)'\n */\nfunction formatOklch(color: ReturnType<typeof toOklch>): string {\n if (!color) {\n return 'oklch(0 0 0)';\n }\n const l = color.l ?? 0;\n const c = color.c ?? 0;\n const h = color.h ?? 0;\n return `oklch(${l.toFixed(3)} ${c.toFixed(3)} ${h.toFixed(3)})`;\n}\n\n/**\n * Calculate contrast color (light or dark text) for a given background.\n * Returns either light or dark OKLCH based on WCAG contrast.\n */\nfunction _getContrastColor(bgHex: string): { light: string; dark: string } {\n const bgColor = toOklch(bgHex);\n if (!bgColor) {\n return {\n light: 'oklch(0.985 0 0)',\n dark: 'oklch(0.145 0 0)',\n };\n }\n\n const white = 'oklch(0.985 0 0)'; // near-white\n const black = 'oklch(0.145 0 0)'; // near-black\n\n // Check contrast with white and black\n const contrastWithWhite = wcagContrast(bgHex, '#fafafa') ?? 0;\n\n // Use the foreground color with better contrast (WCAG AA requires 4.5:1)\n // Use white text if contrast is good enough, otherwise use black\n const lightModeFg = contrastWithWhite >= 4.5 ? white : black;\n\n return {\n light: lightModeFg,\n dark: lightModeFg,\n };\n}\n\n/**\n * Generate 5 chart colors by adjusting lightness/chroma of primary.\n */\nfunction generateChartColors(primaryOklch: ReturnType<typeof toOklch>): {\n light: string[];\n dark: string[];\n} {\n if (!primaryOklch) {\n return {\n light: [\n 'oklch(0.646 0.222 41.116)',\n 'oklch(0.6 0.118 184.704)',\n 'oklch(0.398 0.07 227.392)',\n 'oklch(0.828 0.189 84.429)',\n 'oklch(0.769 0.188 70.08)',\n ],\n dark: [\n 'oklch(0.488 0.243 264.376)',\n 'oklch(0.696 0.17 162.48)',\n 'oklch(0.769 0.188 70.08)',\n 'oklch(0.627 0.265 303.9)',\n 'oklch(0.645 0.246 16.439)',\n ],\n };\n }\n\n const { l = 0.5, c = 0.1, h = 200 } = primaryOklch;\n\n // Light mode: varying lightness from lighter to darker\n const lightCharts = [\n formatOklch({ mode: 'oklch', l: Math.min(l + 0.15, 0.95), c, h }),\n formatOklch({ mode: 'oklch', l: Math.min(l + 0.05, 0.9), c, h }),\n formatOklch({ mode: 'oklch', l, c, h }),\n formatOklch({ mode: 'oklch', l: Math.max(l - 0.1, 0.3), c: c * 0.9, h }),\n formatOklch({ mode: 'oklch', l: Math.max(l - 0.15, 0.25), c: c * 0.8, h }),\n ];\n\n // Dark mode: adjust for better visibility\n const darkCharts = [\n formatOklch({ mode: 'oklch', l: Math.max(l - 0.1, 0.4), c, h }),\n formatOklch({\n mode: 'oklch',\n l: Math.min(l + 0.1, 0.7),\n c: c * 0.8,\n h: (h + 30) % 360,\n }),\n formatOklch({\n mode: 'oklch',\n l: Math.min(l + 0.15, 0.75),\n c: c * 0.9,\n h: (h - 30 + 360) % 360,\n }),\n formatOklch({\n mode: 'oklch',\n l: Math.max(l, 0.6),\n c: c * 1.1,\n h: (h + 60) % 360,\n }),\n formatOklch({\n mode: 'oklch',\n l: Math.max(l + 0.05, 0.62),\n c: c * 1.05,\n h: (h - 60 + 360) % 360,\n }),\n ];\n\n return { light: lightCharts, dark: darkCharts };\n}\n\n/**\n * Build theme CSS variables from config.\n * Merges base color with primary color derived from user hex.\n */\nexport function buildTheme(config: ThemeConfig): ThemeVars {\n const baseColorName = config.baseColor ?? 'zinc';\n const base = getBaseColor(baseColorName);\n\n if (!base) {\n throw new Error(`Base color \"${baseColorName}\" not found`);\n }\n\n // Start with base color vars\n const lightVars = { ...base.cssVars.light };\n const darkVars = { ...base.cssVars.dark };\n\n // Convert user hex to OKLCH\n const primaryOklch = toOklch(config.color);\n\n if (primaryOklch) {\n const { l = 0.5, c = 0.1, h = 200 } = primaryOklch;\n\n // Light mode primary: use user color as-is or slightly adjusted\n lightVars.primary = formatOklch({ mode: 'oklch', l, c, h });\n\n // Light mode foreground: ALWAYS white for primary buttons\n lightVars['primary-foreground'] = 'oklch(0.985 0 0)';\n\n // Dark mode primary: increase lightness for visibility on dark bg\n const darkL = Math.min(l + 0.2, 0.9);\n darkVars.primary = formatOklch({ mode: 'oklch', l: darkL, c, h });\n\n // Dark mode foreground: check contrast for lightened primary\n // Since we lighten the primary in dark mode, we may need dark text\n const darkPrimaryLightness = darkL;\n const contrastDark =\n darkPrimaryLightness > 0.6 ? 'oklch(0.145 0 0)' : 'oklch(0.985 0 0)';\n darkVars['primary-foreground'] = contrastDark;\n\n // Sidebar primary (same as primary)\n lightVars['sidebar-primary'] = lightVars.primary;\n lightVars['sidebar-primary-foreground'] = lightVars['primary-foreground'];\n darkVars['sidebar-primary'] = darkVars.primary;\n darkVars['sidebar-primary-foreground'] = darkVars['primary-foreground'];\n\n // Generate chart colors\n const charts = generateChartColors(primaryOklch);\n for (let i = 0; i < 5; i++) {\n lightVars[`chart-${i + 1}`] = charts.light[i];\n darkVars[`chart-${i + 1}`] = charts.dark[i];\n }\n }\n\n // Apply radius override\n if (config.radius && config.radius !== 'default') {\n const radius = getRadius(config.radius);\n if (radius?.value) {\n lightVars.radius = radius.value;\n darkVars.radius = radius.value;\n }\n }\n\n return { light: lightVars, dark: darkVars };\n}\n","/**\n * Base color definitions ported from shadcn/ui.\n * Each base color provides full semantic tokens for neutral tones.\n */\n\nexport type BaseColorTheme = {\n name: string;\n title: string;\n cssVars: {\n light: Record<string, string>;\n dark: Record<string, string>;\n };\n};\n\nexport const BASE_COLORS: BaseColorTheme[] = [\n {\n name: 'neutral',\n title: 'Neutral',\n cssVars: {\n light: {\n background: 'oklch(1 0 0)',\n foreground: 'oklch(0.145 0 0)',\n card: 'oklch(1 0 0)',\n 'card-foreground': 'oklch(0.145 0 0)',\n popover: 'oklch(1 0 0)',\n 'popover-foreground': 'oklch(0.145 0 0)',\n primary: 'oklch(0.205 0 0)',\n 'primary-foreground': 'oklch(0.985 0 0)',\n secondary: 'oklch(0.97 0 0)',\n 'secondary-foreground': 'oklch(0.205 0 0)',\n muted: 'oklch(0.97 0 0)',\n 'muted-foreground': 'oklch(0.556 0 0)',\n accent: 'oklch(0.97 0 0)',\n 'accent-foreground': 'oklch(0.205 0 0)',\n destructive: 'oklch(0.58 0.22 27)',\n border: 'oklch(0.922 0 0)',\n input: 'oklch(0.922 0 0)',\n ring: 'oklch(0.708 0 0)',\n 'chart-1': 'oklch(0.809 0.105 251.813)',\n 'chart-2': 'oklch(0.623 0.214 259.815)',\n 'chart-3': 'oklch(0.546 0.245 262.881)',\n 'chart-4': 'oklch(0.488 0.243 264.376)',\n 'chart-5': 'oklch(0.424 0.199 265.638)',\n radius: '0.625rem',\n sidebar: 'oklch(0.985 0 0)',\n 'sidebar-foreground': 'oklch(0.145 0 0)',\n 'sidebar-primary': 'oklch(0.205 0 0)',\n 'sidebar-primary-foreground': 'oklch(0.985 0 0)',\n 'sidebar-accent': 'oklch(0.97 0 0)',\n 'sidebar-accent-foreground': 'oklch(0.205 0 0)',\n 'sidebar-border': 'oklch(0.922 0 0)',\n 'sidebar-ring': 'oklch(0.708 0 0)',\n },\n dark: {\n background: 'oklch(0.145 0 0)',\n foreground: 'oklch(0.985 0 0)',\n card: 'oklch(0.205 0 0)',\n 'card-foreground': 'oklch(0.985 0 0)',\n popover: 'oklch(0.205 0 0)',\n 'popover-foreground': 'oklch(0.985 0 0)',\n primary: 'oklch(0.87 0.00 0)',\n 'primary-foreground': 'oklch(0.205 0 0)',\n secondary: 'oklch(0.269 0 0)',\n 'secondary-foreground': 'oklch(0.985 0 0)',\n muted: 'oklch(0.269 0 0)',\n 'muted-foreground': 'oklch(0.708 0 0)',\n accent: 'oklch(0.371 0 0)',\n 'accent-foreground': 'oklch(0.985 0 0)',\n destructive: 'oklch(0.704 0.191 22.216)',\n border: 'oklch(1 0 0 / 10%)',\n input: 'oklch(1 0 0 / 15%)',\n ring: 'oklch(0.556 0 0)',\n 'chart-1': 'oklch(0.809 0.105 251.813)',\n 'chart-2': 'oklch(0.623 0.214 259.815)',\n 'chart-3': 'oklch(0.546 0.245 262.881)',\n 'chart-4': 'oklch(0.488 0.243 264.376)',\n 'chart-5': 'oklch(0.424 0.199 265.638)',\n sidebar: 'oklch(0.205 0 0)',\n 'sidebar-foreground': 'oklch(0.985 0 0)',\n 'sidebar-primary': 'oklch(0.488 0.243 264.376)',\n 'sidebar-primary-foreground': 'oklch(0.985 0 0)',\n 'sidebar-accent': 'oklch(0.269 0 0)',\n 'sidebar-accent-foreground': 'oklch(0.985 0 0)',\n 'sidebar-border': 'oklch(1 0 0 / 10%)',\n 'sidebar-ring': 'oklch(0.556 0 0)',\n },\n },\n },\n {\n name: 'stone',\n title: 'Stone',\n cssVars: {\n light: {\n background: 'oklch(1 0 0)',\n foreground: 'oklch(0.147 0.004 49.25)',\n card: 'oklch(1 0 0)',\n 'card-foreground': 'oklch(0.147 0.004 49.25)',\n popover: 'oklch(1 0 0)',\n 'popover-foreground': 'oklch(0.147 0.004 49.25)',\n primary: 'oklch(0.216 0.006 56.043)',\n 'primary-foreground': 'oklch(0.985 0.001 106.423)',\n secondary: 'oklch(0.97 0.001 106.424)',\n 'secondary-foreground': 'oklch(0.216 0.006 56.043)',\n muted: 'oklch(0.97 0.001 106.424)',\n 'muted-foreground': 'oklch(0.553 0.013 58.071)',\n accent: 'oklch(0.97 0.001 106.424)',\n 'accent-foreground': 'oklch(0.216 0.006 56.043)',\n destructive: 'oklch(0.577 0.245 27.325)',\n border: 'oklch(0.923 0.003 48.717)',\n input: 'oklch(0.923 0.003 48.717)',\n ring: 'oklch(0.709 0.01 56.259)',\n 'chart-1': 'oklch(0.646 0.222 41.116)',\n 'chart-2': 'oklch(0.6 0.118 184.704)',\n 'chart-3': 'oklch(0.398 0.07 227.392)',\n 'chart-4': 'oklch(0.828 0.189 84.429)',\n 'chart-5': 'oklch(0.769 0.188 70.08)',\n radius: '0.625rem',\n sidebar: 'oklch(0.985 0.001 106.423)',\n 'sidebar-foreground': 'oklch(0.147 0.004 49.25)',\n 'sidebar-primary': 'oklch(0.216 0.006 56.043)',\n 'sidebar-primary-foreground': 'oklch(0.985 0.001 106.423)',\n 'sidebar-accent': 'oklch(0.97 0.001 106.424)',\n 'sidebar-accent-foreground': 'oklch(0.216 0.006 56.043)',\n 'sidebar-border': 'oklch(0.923 0.003 48.717)',\n 'sidebar-ring': 'oklch(0.709 0.01 56.259)',\n },\n dark: {\n background: 'oklch(0.147 0.004 49.25)',\n foreground: 'oklch(0.985 0.001 106.423)',\n card: 'oklch(0.216 0.006 56.043)',\n 'card-foreground': 'oklch(0.985 0.001 106.423)',\n popover: 'oklch(0.216 0.006 56.043)',\n 'popover-foreground': 'oklch(0.985 0.001 106.423)',\n primary: 'oklch(0.923 0.003 48.717)',\n 'primary-foreground': 'oklch(0.216 0.006 56.043)',\n secondary: 'oklch(0.268 0.007 34.298)',\n 'secondary-foreground': 'oklch(0.985 0.001 106.423)',\n muted: 'oklch(0.268 0.007 34.298)',\n 'muted-foreground': 'oklch(0.709 0.01 56.259)',\n accent: 'oklch(0.268 0.007 34.298)',\n 'accent-foreground': 'oklch(0.985 0.001 106.423)',\n destructive: 'oklch(0.704 0.191 22.216)',\n border: 'oklch(1 0 0 / 10%)',\n input: 'oklch(1 0 0 / 15%)',\n ring: 'oklch(0.553 0.013 58.071)',\n 'chart-1': 'oklch(0.488 0.243 264.376)',\n 'chart-2': 'oklch(0.696 0.17 162.48)',\n 'chart-3': 'oklch(0.769 0.188 70.08)',\n 'chart-4': 'oklch(0.627 0.265 303.9)',\n 'chart-5': 'oklch(0.645 0.246 16.439)',\n sidebar: 'oklch(0.216 0.006 56.043)',\n 'sidebar-foreground': 'oklch(0.985 0.001 106.423)',\n 'sidebar-primary': 'oklch(0.488 0.243 264.376)',\n 'sidebar-primary-foreground': 'oklch(0.985 0.001 106.423)',\n 'sidebar-accent': 'oklch(0.268 0.007 34.298)',\n 'sidebar-accent-foreground': 'oklch(0.985 0.001 106.423)',\n 'sidebar-border': 'oklch(1 0 0 / 10%)',\n 'sidebar-ring': 'oklch(0.553 0.013 58.071)',\n },\n },\n },\n {\n name: 'zinc',\n title: 'Zinc',\n cssVars: {\n light: {\n background: 'oklch(1 0 0)',\n foreground: 'oklch(0.141 0.005 285.823)',\n card: 'oklch(1 0 0)',\n 'card-foreground': 'oklch(0.141 0.005 285.823)',\n popover: 'oklch(1 0 0)',\n 'popover-foreground': 'oklch(0.141 0.005 285.823)',\n primary: 'oklch(0.21 0.006 285.885)',\n 'primary-foreground': 'oklch(0.985 0 0)',\n secondary: 'oklch(0.967 0.001 286.375)',\n 'secondary-foreground': 'oklch(0.21 0.006 285.885)',\n muted: 'oklch(0.967 0.001 286.375)',\n 'muted-foreground': 'oklch(0.552 0.016 285.938)',\n accent: 'oklch(0.967 0.001 286.375)',\n 'accent-foreground': 'oklch(0.21 0.006 285.885)',\n destructive: 'oklch(0.577 0.245 27.325)',\n border: 'oklch(0.92 0.004 286.32)',\n input: 'oklch(0.92 0.004 286.32)',\n ring: 'oklch(0.705 0.015 286.067)',\n 'chart-1': 'oklch(0.646 0.222 41.116)',\n 'chart-2': 'oklch(0.6 0.118 184.704)',\n 'chart-3': 'oklch(0.398 0.07 227.392)',\n 'chart-4': 'oklch(0.828 0.189 84.429)',\n 'chart-5': 'oklch(0.769 0.188 70.08)',\n radius: '0.625rem',\n sidebar: 'oklch(0.985 0 0)',\n 'sidebar-foreground': 'oklch(0.141 0.005 285.823)',\n 'sidebar-primary': 'oklch(0.21 0.006 285.885)',\n 'sidebar-primary-foreground': 'oklch(0.985 0 0)',\n 'sidebar-accent': 'oklch(0.967 0.001 286.375)',\n 'sidebar-accent-foreground': 'oklch(0.21 0.006 285.885)',\n 'sidebar-border': 'oklch(0.92 0.004 286.32)',\n 'sidebar-ring': 'oklch(0.705 0.015 286.067)',\n },\n dark: {\n background: 'oklch(0.141 0.005 285.823)',\n foreground: 'oklch(0.985 0 0)',\n card: 'oklch(0.21 0.006 285.885)',\n 'card-foreground': 'oklch(0.985 0 0)',\n popover: 'oklch(0.21 0.006 285.885)',\n 'popover-foreground': 'oklch(0.985 0 0)',\n primary: 'oklch(0.92 0.004 286.32)',\n 'primary-foreground': 'oklch(0.21 0.006 285.885)',\n secondary: 'oklch(0.274 0.006 286.033)',\n 'secondary-foreground': 'oklch(0.985 0 0)',\n muted: 'oklch(0.274 0.006 286.033)',\n 'muted-foreground': 'oklch(0.705 0.015 286.067)',\n accent: 'oklch(0.274 0.006 286.033)',\n 'accent-foreground': 'oklch(0.985 0 0)',\n destructive: 'oklch(0.704 0.191 22.216)',\n border: 'oklch(1 0 0 / 10%)',\n input: 'oklch(1 0 0 / 15%)',\n ring: 'oklch(0.552 0.016 285.938)',\n 'chart-1': 'oklch(0.488 0.243 264.376)',\n 'chart-2': 'oklch(0.696 0.17 162.48)',\n 'chart-3': 'oklch(0.769 0.188 70.08)',\n 'chart-4': 'oklch(0.627 0.265 303.9)',\n 'chart-5': 'oklch(0.645 0.246 16.439)',\n sidebar: 'oklch(0.21 0.006 285.885)',\n 'sidebar-foreground': 'oklch(0.985 0 0)',\n 'sidebar-primary': 'oklch(0.488 0.243 264.376)',\n 'sidebar-primary-foreground': 'oklch(0.985 0 0)',\n 'sidebar-accent': 'oklch(0.274 0.006 286.033)',\n 'sidebar-accent-foreground': 'oklch(0.985 0 0)',\n 'sidebar-border': 'oklch(1 0 0 / 10%)',\n 'sidebar-ring': 'oklch(0.552 0.016 285.938)',\n },\n },\n },\n {\n name: 'gray',\n title: 'Gray',\n cssVars: {\n light: {\n background: 'oklch(1 0 0)',\n foreground: 'oklch(0.13 0.028 261.692)',\n card: 'oklch(1 0 0)',\n 'card-foreground': 'oklch(0.13 0.028 261.692)',\n popover: 'oklch(1 0 0)',\n 'popover-foreground': 'oklch(0.13 0.028 261.692)',\n primary: 'oklch(0.21 0.034 264.665)',\n 'primary-foreground': 'oklch(0.985 0.002 247.839)',\n secondary: 'oklch(0.967 0.003 264.542)',\n 'secondary-foreground': 'oklch(0.21 0.034 264.665)',\n muted: 'oklch(0.967 0.003 264.542)',\n 'muted-foreground': 'oklch(0.551 0.027 264.364)',\n accent: 'oklch(0.967 0.003 264.542)',\n 'accent-foreground': 'oklch(0.21 0.034 264.665)',\n destructive: 'oklch(0.577 0.245 27.325)',\n border: 'oklch(0.928 0.006 264.531)',\n input: 'oklch(0.928 0.006 264.531)',\n ring: 'oklch(0.707 0.022 261.325)',\n 'chart-1': 'oklch(0.646 0.222 41.116)',\n 'chart-2': 'oklch(0.6 0.118 184.704)',\n 'chart-3': 'oklch(0.398 0.07 227.392)',\n 'chart-4': 'oklch(0.828 0.189 84.429)',\n 'chart-5': 'oklch(0.769 0.188 70.08)',\n radius: '0.625rem',\n sidebar: 'oklch(0.985 0.002 247.839)',\n 'sidebar-foreground': 'oklch(0.13 0.028 261.692)',\n 'sidebar-primary': 'oklch(0.21 0.034 264.665)',\n 'sidebar-primary-foreground': 'oklch(0.985 0.002 247.839)',\n 'sidebar-accent': 'oklch(0.967 0.003 264.542)',\n 'sidebar-accent-foreground': 'oklch(0.21 0.034 264.665)',\n 'sidebar-border': 'oklch(0.928 0.006 264.531)',\n 'sidebar-ring': 'oklch(0.707 0.022 261.325)',\n },\n dark: {\n background: 'oklch(0.13 0.028 261.692)',\n foreground: 'oklch(0.985 0.002 247.839)',\n card: 'oklch(0.21 0.034 264.665)',\n 'card-foreground': 'oklch(0.985 0.002 247.839)',\n popover: 'oklch(0.21 0.034 264.665)',\n 'popover-foreground': 'oklch(0.985 0.002 247.839)',\n primary: 'oklch(0.928 0.006 264.531)',\n 'primary-foreground': 'oklch(0.21 0.034 264.665)',\n secondary: 'oklch(0.278 0.033 256.848)',\n 'secondary-foreground': 'oklch(0.985 0.002 247.839)',\n muted: 'oklch(0.278 0.033 256.848)',\n 'muted-foreground': 'oklch(0.707 0.022 261.325)',\n accent: 'oklch(0.278 0.033 256.848)',\n 'accent-foreground': 'oklch(0.985 0.002 247.839)',\n destructive: 'oklch(0.704 0.191 22.216)',\n border: 'oklch(1 0 0 / 10%)',\n input: 'oklch(1 0 0 / 15%)',\n ring: 'oklch(0.551 0.027 264.364)',\n 'chart-1': 'oklch(0.488 0.243 264.376)',\n 'chart-2': 'oklch(0.696 0.17 162.48)',\n 'chart-3': 'oklch(0.769 0.188 70.08)',\n 'chart-4': 'oklch(0.627 0.265 303.9)',\n 'chart-5': 'oklch(0.645 0.246 16.439)',\n sidebar: 'oklch(0.21 0.034 264.665)',\n 'sidebar-foreground': 'oklch(0.985 0.002 247.839)',\n 'sidebar-primary': 'oklch(0.488 0.243 264.376)',\n 'sidebar-primary-foreground': 'oklch(0.985 0.002 247.839)',\n 'sidebar-accent': 'oklch(0.278 0.033 256.848)',\n 'sidebar-accent-foreground': 'oklch(0.985 0.002 247.839)',\n 'sidebar-border': 'oklch(1 0 0 / 10%)',\n 'sidebar-ring': 'oklch(0.551 0.027 264.364)',\n },\n },\n },\n];\n\nexport type RadiusOption = {\n name: 'default' | 'none' | 'small' | 'medium' | 'large';\n label: string;\n value: string;\n};\n\nexport const RADII: RadiusOption[] = [\n { name: 'default', label: 'Default', value: '' },\n { name: 'none', label: 'None', value: '0' },\n { name: 'small', label: 'Small', value: '0.45rem' },\n { name: 'medium', label: 'Medium', value: '0.625rem' },\n { name: 'large', label: 'Large', value: '0.875rem' },\n];\n\nexport function getBaseColor(name: string): BaseColorTheme | undefined {\n return BASE_COLORS.find((c) => c.name === name);\n}\n\nexport function getRadius(name: string): RadiusOption | undefined {\n return RADII.find((r) => r.name === name);\n}\n"],"mappings":"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","names":[]}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Canonical theme variable names
|
|
2
|
+
* Canonical theme variable names aligned with shadcn/ui semantic tokens.
|
|
3
3
|
* UI components depend on these CSS vars; consumer defines them.
|
|
4
4
|
*/
|
|
5
|
-
declare const THEME_VAR_NAMES: readonly ["--background", "--foreground", "--card", "--card-foreground", "--popover", "--popover-foreground", "--primary", "--primary-foreground",
|
|
5
|
+
declare const THEME_VAR_NAMES: readonly ["--background", "--foreground", "--card", "--card-foreground", "--popover", "--popover-foreground", "--primary", "--primary-foreground", "--secondary", "--secondary-foreground", "--muted", "--muted-foreground", "--accent", "--accent-foreground", "--destructive", "--destructive-foreground", "--border", "--input", "--ring", "--chart-1", "--chart-2", "--chart-3", "--chart-4", "--chart-5", "--radius", "--sidebar", "--sidebar-foreground", "--sidebar-primary", "--sidebar-primary-foreground", "--sidebar-accent", "--sidebar-accent-foreground", "--sidebar-border", "--sidebar-ring", "--sidebar-active", "--overlay"];
|
|
6
6
|
type ThemeVarName = (typeof THEME_VAR_NAMES)[number];
|
|
7
|
-
/** Vars that
|
|
7
|
+
/** Vars that buildTheme provides (minimal required set). */
|
|
8
8
|
declare const REQUIRED_THEME_VARS: readonly string[];
|
|
9
9
|
type ThemeValidation = {
|
|
10
10
|
valid: boolean;
|
|
@@ -17,5 +17,13 @@ type ThemeValidation = {
|
|
|
17
17
|
* - missing: required vars absent (for full theme override).
|
|
18
18
|
*/
|
|
19
19
|
declare function validateTheme(theme: Record<string, string>): ThemeValidation;
|
|
20
|
+
/** Shared component size scale (xs–xl) aligned with Mantine */
|
|
21
|
+
type ComponentSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
22
|
+
/** Shared component radius scale aligned with Mantine */
|
|
23
|
+
type ComponentRadius = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
|
|
24
|
+
/** Order of Input.Wrapper elements (Mantine-like) */
|
|
25
|
+
type InputWrapperOrder = ('label' | 'input' | 'description' | 'error')[];
|
|
26
|
+
/** Shared component color (theme key) */
|
|
27
|
+
type ComponentColor = 'primary' | 'secondary' | 'accent' | 'destructive' | string;
|
|
20
28
|
|
|
21
|
-
export { REQUIRED_THEME_VARS, THEME_VAR_NAMES, type ThemeValidation, type ThemeVarName, validateTheme };
|
|
29
|
+
export { type ComponentColor, type ComponentRadius, type ComponentSize, type InputWrapperOrder, REQUIRED_THEME_VARS, THEME_VAR_NAMES, type ThemeValidation, type ThemeVarName, validateTheme };
|
package/dist/lib/theme-schema.js
CHANGED
|
@@ -1,17 +1,4 @@
|
|
|
1
1
|
// src/lib/theme-schema.ts
|
|
2
|
-
var SHADE_KEYS = [
|
|
3
|
-
50,
|
|
4
|
-
100,
|
|
5
|
-
200,
|
|
6
|
-
300,
|
|
7
|
-
400,
|
|
8
|
-
500,
|
|
9
|
-
600,
|
|
10
|
-
700,
|
|
11
|
-
800,
|
|
12
|
-
900,
|
|
13
|
-
950
|
|
14
|
-
];
|
|
15
2
|
var THEME_VAR_NAMES = [
|
|
16
3
|
"--background",
|
|
17
4
|
"--foreground",
|
|
@@ -21,15 +8,12 @@ var THEME_VAR_NAMES = [
|
|
|
21
8
|
"--popover-foreground",
|
|
22
9
|
"--primary",
|
|
23
10
|
"--primary-foreground",
|
|
24
|
-
...SHADE_KEYS.map((s) => `--primary-${s}`),
|
|
25
11
|
"--secondary",
|
|
26
12
|
"--secondary-foreground",
|
|
27
|
-
...SHADE_KEYS.map((s) => `--secondary-${s}`),
|
|
28
|
-
"--accent",
|
|
29
|
-
"--accent-foreground",
|
|
30
|
-
...SHADE_KEYS.map((s) => `--accent-${s}`),
|
|
31
13
|
"--muted",
|
|
32
14
|
"--muted-foreground",
|
|
15
|
+
"--accent",
|
|
16
|
+
"--accent-foreground",
|
|
33
17
|
"--destructive",
|
|
34
18
|
"--destructive-foreground",
|
|
35
19
|
"--border",
|
|
@@ -41,31 +25,26 @@ var THEME_VAR_NAMES = [
|
|
|
41
25
|
"--chart-4",
|
|
42
26
|
"--chart-5",
|
|
43
27
|
"--radius",
|
|
44
|
-
"--spacing",
|
|
45
28
|
"--sidebar",
|
|
46
29
|
"--sidebar-foreground",
|
|
47
30
|
"--sidebar-primary",
|
|
48
31
|
"--sidebar-primary-foreground",
|
|
49
32
|
"--sidebar-accent",
|
|
50
33
|
"--sidebar-accent-foreground",
|
|
51
|
-
"--sidebar-active",
|
|
52
34
|
"--sidebar-border",
|
|
53
35
|
"--sidebar-ring",
|
|
36
|
+
"--sidebar-active",
|
|
37
|
+
// mesob extension
|
|
54
38
|
"--overlay"
|
|
39
|
+
// mesob extension
|
|
55
40
|
];
|
|
56
41
|
var THEME_VAR_SET = new Set(THEME_VAR_NAMES);
|
|
57
42
|
var REQUIRED_THEME_VARS = [
|
|
43
|
+
"--background",
|
|
44
|
+
"--foreground",
|
|
58
45
|
"--primary",
|
|
59
46
|
"--primary-foreground",
|
|
60
|
-
|
|
61
|
-
"--secondary",
|
|
62
|
-
"--secondary-foreground",
|
|
63
|
-
...SHADE_KEYS.map((s) => `--secondary-${s}`),
|
|
64
|
-
"--accent",
|
|
65
|
-
"--accent-foreground",
|
|
66
|
-
...SHADE_KEYS.map((s) => `--accent-${s}`),
|
|
67
|
-
"--radius",
|
|
68
|
-
"--spacing"
|
|
47
|
+
"--radius"
|
|
69
48
|
];
|
|
70
49
|
function validateTheme(theme) {
|
|
71
50
|
const keys = new Set(Object.keys(theme));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/lib/theme-schema.ts"],"sourcesContent":["/**\n * Canonical theme variable names
|
|
1
|
+
{"version":3,"sources":["../../src/lib/theme-schema.ts"],"sourcesContent":["/**\n * Canonical theme variable names aligned with shadcn/ui semantic tokens.\n * UI components depend on these CSS vars; consumer defines them.\n */\n\nexport const THEME_VAR_NAMES = [\n '--background',\n '--foreground',\n '--card',\n '--card-foreground',\n '--popover',\n '--popover-foreground',\n '--primary',\n '--primary-foreground',\n '--secondary',\n '--secondary-foreground',\n '--muted',\n '--muted-foreground',\n '--accent',\n '--accent-foreground',\n '--destructive',\n '--destructive-foreground',\n '--border',\n '--input',\n '--ring',\n '--chart-1',\n '--chart-2',\n '--chart-3',\n '--chart-4',\n '--chart-5',\n '--radius',\n '--sidebar',\n '--sidebar-foreground',\n '--sidebar-primary',\n '--sidebar-primary-foreground',\n '--sidebar-accent',\n '--sidebar-accent-foreground',\n '--sidebar-border',\n '--sidebar-ring',\n '--sidebar-active', // mesob extension\n '--overlay', // mesob extension\n] as const;\n\nexport type ThemeVarName = (typeof THEME_VAR_NAMES)[number];\n\nconst THEME_VAR_SET = new Set<string>(THEME_VAR_NAMES);\n\n/** Vars that buildTheme provides (minimal required set). */\nexport const REQUIRED_THEME_VARS: readonly string[] = [\n '--background',\n '--foreground',\n '--primary',\n '--primary-foreground',\n '--radius',\n];\n\nexport type ThemeValidation = {\n valid: boolean;\n unknown: string[];\n missing: string[];\n};\n\n/**\n * Validates a theme object against the consumer theme contract.\n * - unknown: keys not in THEME_VAR_NAMES (typos / unsupported).\n * - missing: required vars absent (for full theme override).\n */\nexport function validateTheme(theme: Record<string, string>): ThemeValidation {\n const keys = new Set(Object.keys(theme));\n const unknown: string[] = [];\n const missing: string[] = [];\n\n for (const key of keys) {\n if (!THEME_VAR_SET.has(key)) {\n unknown.push(key);\n }\n }\n for (const key of REQUIRED_THEME_VARS) {\n if (!keys.has(key)) {\n missing.push(key);\n }\n }\n\n return {\n valid: unknown.length === 0 && missing.length === 0,\n unknown,\n missing,\n };\n}\n\n/** Shared component size scale (xs–xl) aligned with Mantine */\nexport type ComponentSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** Shared component radius scale aligned with Mantine */\nexport type ComponentRadius = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';\n\n/** Order of Input.Wrapper elements (Mantine-like) */\nexport type InputWrapperOrder = ('label' | 'input' | 'description' | 'error')[];\n\n/** Shared component color (theme key) */\nexport type ComponentColor =\n | 'primary'\n | 'secondary'\n | 'accent'\n | 'destructive'\n | string;\n"],"mappings":";AAKO,IAAM,kBAAkB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AACF;AAIA,IAAM,gBAAgB,IAAI,IAAY,eAAe;AAG9C,IAAM,sBAAyC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAaO,SAAS,cAAc,OAAgD;AAC5E,QAAM,OAAO,IAAI,IAAI,OAAO,KAAK,KAAK,CAAC;AACvC,QAAM,UAAoB,CAAC;AAC3B,QAAM,UAAoB,CAAC;AAE3B,aAAW,OAAO,MAAM;AACtB,QAAI,CAAC,cAAc,IAAI,GAAG,GAAG;AAC3B,cAAQ,KAAK,GAAG;AAAA,IAClB;AAAA,EACF;AACA,aAAW,OAAO,qBAAqB;AACrC,QAAI,CAAC,KAAK,IAAI,GAAG,GAAG;AAClB,cAAQ,KAAK,GAAG;AAAA,IAClB;AAAA,EACF;AAEA,SAAO;AAAA,IACL,OAAO,QAAQ,WAAW,KAAK,QAAQ,WAAW;AAAA,IAClD;AAAA,IACA;AAAA,EACF;AACF;","names":[]}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Base color definitions ported from shadcn/ui.
|
|
3
|
+
* Each base color provides full semantic tokens for neutral tones.
|
|
4
|
+
*/
|
|
5
|
+
type BaseColorTheme = {
|
|
6
|
+
name: string;
|
|
7
|
+
title: string;
|
|
8
|
+
cssVars: {
|
|
9
|
+
light: Record<string, string>;
|
|
10
|
+
dark: Record<string, string>;
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
declare const BASE_COLORS: BaseColorTheme[];
|
|
14
|
+
type RadiusOption = {
|
|
15
|
+
name: 'default' | 'none' | 'small' | 'medium' | 'large';
|
|
16
|
+
label: string;
|
|
17
|
+
value: string;
|
|
18
|
+
};
|
|
19
|
+
declare const RADII: RadiusOption[];
|
|
20
|
+
declare function getBaseColor(name: string): BaseColorTheme | undefined;
|
|
21
|
+
declare function getRadius(name: string): RadiusOption | undefined;
|
|
22
|
+
|
|
23
|
+
export { BASE_COLORS, type BaseColorTheme, RADII, type RadiusOption, getBaseColor, getRadius };
|