@encore-os/tokens 0.6.0 → 0.7.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/tokens.css +261 -13
- package/dist/tokens.d.ts +6 -0
- package/dist/tokens.js +292 -0
- package/dist/tokens.json +2999 -277
- package/dist/tokens.ts +226 -12
- package/package.json +8 -3
package/dist/tokens.css
CHANGED
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
--color-muted-foreground: var(--muted-foreground);
|
|
6
6
|
--color-surface: var(--surface);
|
|
7
7
|
--color-border: var(--border);
|
|
8
|
+
--color-input: var(--input);
|
|
8
9
|
--color-ring: var(--ring);
|
|
9
10
|
--color-primary: var(--primary);
|
|
10
11
|
--color-primary-foreground: var(--primary-foreground);
|
|
@@ -14,17 +15,52 @@
|
|
|
14
15
|
--color-card-foreground: var(--card-foreground);
|
|
15
16
|
--color-popover: var(--popover);
|
|
16
17
|
--color-popover-foreground: var(--popover-foreground);
|
|
17
|
-
--color-input: var(--input);
|
|
18
|
-
--color-destructive-foreground: var(--destructive-foreground);
|
|
19
18
|
--color-accent: var(--accent);
|
|
20
19
|
--color-accent-foreground: var(--accent-foreground);
|
|
21
20
|
--color-accent-text: var(--accent-text);
|
|
22
21
|
--color-destructive: var(--destructive);
|
|
22
|
+
--color-destructive-foreground: var(--destructive-foreground);
|
|
23
|
+
--color-destructive-hover: var(--destructive-hover);
|
|
24
|
+
--color-destructive-text: var(--destructive-text);
|
|
25
|
+
--color-destructive-subtle: var(--destructive-subtle);
|
|
23
26
|
--color-success: var(--success);
|
|
27
|
+
--color-success-foreground: var(--success-foreground);
|
|
28
|
+
--color-success-hover: var(--success-hover);
|
|
29
|
+
--color-success-text: var(--success-text);
|
|
30
|
+
--color-success-subtle: var(--success-subtle);
|
|
24
31
|
--color-warning: var(--warning);
|
|
32
|
+
--color-warning-foreground: var(--warning-foreground);
|
|
33
|
+
--color-warning-hover: var(--warning-hover);
|
|
34
|
+
--color-warning-text: var(--warning-text);
|
|
35
|
+
--color-warning-subtle: var(--warning-subtle);
|
|
25
36
|
--color-info: var(--info);
|
|
37
|
+
--color-info-foreground: var(--info-foreground);
|
|
38
|
+
--color-info-hover: var(--info-hover);
|
|
39
|
+
--color-info-text: var(--info-text);
|
|
40
|
+
--color-info-subtle: var(--info-subtle);
|
|
41
|
+
--color-chart-1: var(--chart-1);
|
|
42
|
+
--color-chart-2: var(--chart-2);
|
|
43
|
+
--color-chart-3: var(--chart-3);
|
|
44
|
+
--color-chart-4: var(--chart-4);
|
|
45
|
+
--color-chart-5: var(--chart-5);
|
|
46
|
+
--color-chart-6: var(--chart-6);
|
|
47
|
+
--color-chart-7: var(--chart-7);
|
|
48
|
+
--color-chart-8: var(--chart-8);
|
|
49
|
+
--color-chart-1-foreground: var(--chart-1-foreground);
|
|
50
|
+
--color-chart-2-foreground: var(--chart-2-foreground);
|
|
51
|
+
--color-chart-3-foreground: var(--chart-3-foreground);
|
|
52
|
+
--color-chart-4-foreground: var(--chart-4-foreground);
|
|
53
|
+
--color-chart-5-foreground: var(--chart-5-foreground);
|
|
54
|
+
--color-chart-6-foreground: var(--chart-6-foreground);
|
|
55
|
+
--color-chart-7-foreground: var(--chart-7-foreground);
|
|
56
|
+
--color-chart-8-foreground: var(--chart-8-foreground);
|
|
57
|
+
--color-ai-accent: var(--ai-accent);
|
|
58
|
+
--color-overlay-scrim: var(--overlay-scrim);
|
|
59
|
+
--color-encore-navy: var(--encore-navy);
|
|
60
|
+
--color-encore-light: var(--encore-light);
|
|
26
61
|
|
|
27
62
|
--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
|
|
63
|
+
--font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
28
64
|
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
|
|
29
65
|
--text-xs: 0.75rem;
|
|
30
66
|
--text-sm: 0.875rem;
|
|
@@ -42,16 +78,27 @@
|
|
|
42
78
|
--leading-snug: 1.375;
|
|
43
79
|
--leading-normal: 1.5;
|
|
44
80
|
--leading-relaxed: 1.625;
|
|
81
|
+
|
|
82
|
+
--radius-sm: 0.375rem;
|
|
83
|
+
--radius-md: 0.5rem;
|
|
84
|
+
--radius-lg: 0.625rem;
|
|
85
|
+
--radius-xl: 0.875rem;
|
|
86
|
+
|
|
87
|
+
--shadow-card: var(--elevation-card);
|
|
88
|
+
--shadow-card-hover: var(--elevation-card-hover);
|
|
89
|
+
--shadow-popover: var(--elevation-popover);
|
|
45
90
|
}
|
|
46
91
|
|
|
47
92
|
:root {
|
|
93
|
+
/* Resolved hex colors plus HSL triplets for hsl(var(--*-hsl)) consumers. */
|
|
48
94
|
--background: #f6f7f9;
|
|
49
95
|
--foreground: #101928;
|
|
50
96
|
--muted: #e9edf1;
|
|
51
97
|
--muted-foreground: #586579;
|
|
52
98
|
--surface: #ffffff;
|
|
53
99
|
--border: #d1d7e0;
|
|
54
|
-
--
|
|
100
|
+
--input: #7588a3;
|
|
101
|
+
--ring: #0a91c2;
|
|
55
102
|
--primary: #172540;
|
|
56
103
|
--primary-foreground: #fbfcfd;
|
|
57
104
|
--secondary: #eceff4;
|
|
@@ -60,17 +107,111 @@
|
|
|
60
107
|
--card-foreground: #101928;
|
|
61
108
|
--popover: #ffffff;
|
|
62
109
|
--popover-foreground: #101928;
|
|
63
|
-
--input: #d1d7e0;
|
|
64
|
-
--destructive-foreground: #f9fafb;
|
|
65
110
|
--accent: #0c90c0;
|
|
66
|
-
--accent-foreground: #
|
|
111
|
+
--accent-foreground: #101928;
|
|
67
112
|
--accent-text: #086691;
|
|
68
113
|
--destructive: #d52620;
|
|
114
|
+
--destructive-foreground: #fbfcfd;
|
|
115
|
+
--destructive-hover: #bf221d;
|
|
116
|
+
--destructive-text: #b1201b;
|
|
117
|
+
--destructive-subtle: #f9e7e7;
|
|
69
118
|
--success: #1d8660;
|
|
70
|
-
--
|
|
71
|
-
--
|
|
119
|
+
--success-foreground: #ffffff;
|
|
120
|
+
--success-hover: #1b7957;
|
|
121
|
+
--success-text: #186d4e;
|
|
122
|
+
--success-subtle: #e7f9ee;
|
|
123
|
+
--warning: #c47308;
|
|
124
|
+
--warning-foreground: #0f1729;
|
|
125
|
+
--warning-hover: #c47308;
|
|
126
|
+
--warning-text: #8e5306;
|
|
127
|
+
--warning-subtle: #fdf3e2;
|
|
128
|
+
--info: #1260ba;
|
|
129
|
+
--info-foreground: #ffffff;
|
|
130
|
+
--info-hover: #1260ba;
|
|
131
|
+
--info-text: #0f4d95;
|
|
132
|
+
--info-subtle: #d8e6fd;
|
|
133
|
+
--chart-1: #1a8bdb;
|
|
134
|
+
--chart-2: #096d61;
|
|
135
|
+
--chart-3: #6437be;
|
|
136
|
+
--chart-4: #905a04;
|
|
137
|
+
--chart-5: #c72378;
|
|
138
|
+
--chart-6: #17965b;
|
|
139
|
+
--chart-7: #d96602;
|
|
140
|
+
--chart-8: #4e63ef;
|
|
141
|
+
--chart-1-foreground: #0f1729;
|
|
142
|
+
--chart-2-foreground: #ffffff;
|
|
143
|
+
--chart-3-foreground: #ffffff;
|
|
144
|
+
--chart-4-foreground: #ffffff;
|
|
145
|
+
--chart-5-foreground: #ffffff;
|
|
146
|
+
--chart-6-foreground: #0f1729;
|
|
147
|
+
--chart-7-foreground: #0f1729;
|
|
148
|
+
--chart-8-foreground: #ffffff;
|
|
149
|
+
--ai-accent: #6d4acf;
|
|
150
|
+
--overlay-scrim: #0c121d8c;
|
|
151
|
+
--encore-navy: #172540;
|
|
152
|
+
--encore-light: #f9fafb;
|
|
153
|
+
--background-hsl: 220 20% 97.06%;
|
|
154
|
+
--foreground-hsl: 217.5 42.86% 10.98%;
|
|
155
|
+
--muted-hsl: 210 22.22% 92.94%;
|
|
156
|
+
--muted-foreground-hsl: 216.36 15.79% 40.98%;
|
|
157
|
+
--surface-hsl: 0 0% 100%;
|
|
158
|
+
--border-hsl: 216 19.48% 84.9%;
|
|
159
|
+
--input-hsl: 215.22 20% 54.9%;
|
|
160
|
+
--ring-hsl: 195.98 90.2% 40%;
|
|
161
|
+
--primary-hsl: 219.51 47.13% 17.06%;
|
|
162
|
+
--primary-foreground-hsl: 210 33.33% 98.82%;
|
|
163
|
+
--secondary-hsl: 217.5 26.67% 94.12%;
|
|
164
|
+
--secondary-foreground-hsl: 217.5 42.86% 10.98%;
|
|
165
|
+
--card-hsl: 0 0% 100%;
|
|
166
|
+
--card-foreground-hsl: 217.5 42.86% 10.98%;
|
|
167
|
+
--popover-hsl: 0 0% 100%;
|
|
168
|
+
--popover-foreground-hsl: 217.5 42.86% 10.98%;
|
|
169
|
+
--accent-hsl: 196 88.24% 40%;
|
|
170
|
+
--accent-foreground-hsl: 217.5 42.86% 10.98%;
|
|
171
|
+
--accent-text-hsl: 198.83 89.54% 30%;
|
|
172
|
+
--destructive-hsl: 1.99 73.88% 48.04%;
|
|
173
|
+
--destructive-foreground-hsl: 210 33.33% 98.82%;
|
|
174
|
+
--destructive-hover-hsl: 1.85 73.64% 43.14%;
|
|
175
|
+
--destructive-text-hsl: 2 73.53% 40%;
|
|
176
|
+
--destructive-subtle-hsl: 0 60% 94.12%;
|
|
177
|
+
--success-hsl: 158.29 64.42% 31.96%;
|
|
178
|
+
--success-foreground-hsl: 0 0% 100%;
|
|
179
|
+
--success-hover-hsl: 158.3 63.51% 29.02%;
|
|
180
|
+
--success-text-hsl: 158.12 63.91% 26.08%;
|
|
181
|
+
--success-subtle-hsl: 143.33 60% 94.12%;
|
|
182
|
+
--warning-hsl: 34.15 92.16% 40%;
|
|
183
|
+
--warning-foreground-hsl: 221.54 46.43% 10.98%;
|
|
184
|
+
--warning-hover-hsl: 34.15 92.16% 40%;
|
|
185
|
+
--warning-text-hsl: 33.97 91.89% 29.02%;
|
|
186
|
+
--warning-subtle-hsl: 37.78 87.1% 93.92%;
|
|
187
|
+
--info-hsl: 212.14 82.35% 40%;
|
|
188
|
+
--info-foreground-hsl: 0 0% 100%;
|
|
189
|
+
--info-hover-hsl: 212.14 82.35% 40%;
|
|
190
|
+
--info-text-hsl: 212.24 81.71% 32.16%;
|
|
191
|
+
--info-subtle-hsl: 217.3 90.24% 91.96%;
|
|
192
|
+
--chart-1-hsl: 204.87 78.78% 48.04%;
|
|
193
|
+
--chart-2-hsl: 172.8 84.75% 23.14%;
|
|
194
|
+
--chart-3-hsl: 260 55.1% 48.04%;
|
|
195
|
+
--chart-4-hsl: 36.86 94.59% 29.02%;
|
|
196
|
+
--chart-5-hsl: 328.9 70.09% 45.88%;
|
|
197
|
+
--chart-6-hsl: 152.13 73.41% 33.92%;
|
|
198
|
+
--chart-7-hsl: 27.91 98.17% 42.94%;
|
|
199
|
+
--chart-8-hsl: 232.17 83.42% 62.16%;
|
|
200
|
+
--chart-1-foreground-hsl: 221.54 46.43% 10.98%;
|
|
201
|
+
--chart-2-foreground-hsl: 0 0% 100%;
|
|
202
|
+
--chart-3-foreground-hsl: 0 0% 100%;
|
|
203
|
+
--chart-4-foreground-hsl: 0 0% 100%;
|
|
204
|
+
--chart-5-foreground-hsl: 0 0% 100%;
|
|
205
|
+
--chart-6-foreground-hsl: 221.54 46.43% 10.98%;
|
|
206
|
+
--chart-7-foreground-hsl: 221.54 46.43% 10.98%;
|
|
207
|
+
--chart-8-foreground-hsl: 0 0% 100%;
|
|
208
|
+
--ai-accent-hsl: 255.79 58.08% 55.1%;
|
|
209
|
+
--overlay-scrim-hsl: 218.82 41.46% 8.04% / 0.55;
|
|
210
|
+
--encore-navy-hsl: 219.51 47.13% 17.06%;
|
|
211
|
+
--encore-light-hsl: 210 20% 98.04%;
|
|
72
212
|
|
|
73
213
|
--font-family-sans: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
|
|
214
|
+
--font-family-display: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
74
215
|
--font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
|
|
75
216
|
--font-size-xs: 0.75rem;
|
|
76
217
|
--font-size-sm: 0.875rem;
|
|
@@ -88,6 +229,19 @@
|
|
|
88
229
|
--line-height-snug: 1.375;
|
|
89
230
|
--line-height-normal: 1.5;
|
|
90
231
|
--line-height-relaxed: 1.625;
|
|
232
|
+
|
|
233
|
+
--radius: 0.625rem;
|
|
234
|
+
--radius-sm: 0.375rem;
|
|
235
|
+
--radius-md: 0.5rem;
|
|
236
|
+
--radius-lg: 0.625rem;
|
|
237
|
+
--radius-xl: 0.875rem;
|
|
238
|
+
--duration-instant: 50ms;
|
|
239
|
+
--duration-normal: 200ms;
|
|
240
|
+
--duration-slow: 250ms;
|
|
241
|
+
--ease-out: cubic-bezier(0, 0.3, 0.6, 1);
|
|
242
|
+
--elevation-card: 0 1px 2px 0 hsl(var(--foreground-hsl) / 0.05);
|
|
243
|
+
--elevation-card-hover: 0 8px 24px -12px hsl(var(--foreground-hsl) / 0.18);
|
|
244
|
+
--elevation-popover: 0 16px 40px -20px hsl(var(--foreground-hsl) / 0.28);
|
|
91
245
|
}
|
|
92
246
|
|
|
93
247
|
.dark {
|
|
@@ -97,24 +251,118 @@
|
|
|
97
251
|
--muted-foreground: #9aa6b6;
|
|
98
252
|
--surface: #1a212d;
|
|
99
253
|
--border: #2f3846;
|
|
254
|
+
--input: #607190;
|
|
100
255
|
--ring: #36baf2;
|
|
101
256
|
--primary: #27b5f1;
|
|
102
257
|
--primary-foreground: #0f1624;
|
|
103
258
|
--secondary: #242b38;
|
|
104
259
|
--secondary-foreground: #eff2f6;
|
|
105
260
|
--card: #1a212d;
|
|
106
|
-
--card-foreground: #
|
|
107
|
-
--popover: #
|
|
108
|
-
--popover-foreground: #
|
|
109
|
-
--input: #2f3846;
|
|
110
|
-
--destructive-foreground: #1a0606;
|
|
261
|
+
--card-foreground: #eff2f6;
|
|
262
|
+
--popover: #1a212d;
|
|
263
|
+
--popover-foreground: #eff2f6;
|
|
111
264
|
--accent: #34c1f4;
|
|
112
265
|
--accent-foreground: #0f1624;
|
|
113
266
|
--accent-text: #34c1f4;
|
|
114
267
|
--destructive: #ed5f5a;
|
|
268
|
+
--destructive-foreground: #0f1624;
|
|
269
|
+
--destructive-hover: #eb4d47;
|
|
270
|
+
--destructive-text: #f07975;
|
|
271
|
+
--destructive-subtle: #491412;
|
|
115
272
|
--success: #45c496;
|
|
273
|
+
--success-foreground: #0f1729;
|
|
274
|
+
--success-hover: #3ab688;
|
|
275
|
+
--success-text: #45c496;
|
|
276
|
+
--success-subtle: #12492a;
|
|
116
277
|
--warning: #f3b13f;
|
|
278
|
+
--warning-foreground: #0f1729;
|
|
279
|
+
--warning-hover: #f3b13f;
|
|
280
|
+
--warning-text: #f3b13f;
|
|
281
|
+
--warning-subtle: #664205;
|
|
117
282
|
--info: #58b0ee;
|
|
283
|
+
--info-foreground: #0f1729;
|
|
284
|
+
--info-hover: #58b0ee;
|
|
285
|
+
--info-text: #58b0ee;
|
|
286
|
+
--info-subtle: #052c6b;
|
|
287
|
+
--chart-1: #36b3fc;
|
|
288
|
+
--chart-2: #3bfce6;
|
|
289
|
+
--chart-3: #977ccb;
|
|
290
|
+
--chart-4: #fdaa26;
|
|
291
|
+
--chart-5: #f66ab0;
|
|
292
|
+
--chart-6: #2ad591;
|
|
293
|
+
--chart-7: #ea771f;
|
|
294
|
+
--chart-8: #7c7ef4;
|
|
295
|
+
--chart-1-foreground: #080c16;
|
|
296
|
+
--chart-2-foreground: #080c16;
|
|
297
|
+
--chart-3-foreground: #080c16;
|
|
298
|
+
--chart-4-foreground: #080c16;
|
|
299
|
+
--chart-5-foreground: #080c16;
|
|
300
|
+
--chart-6-foreground: #080c16;
|
|
301
|
+
--chart-7-foreground: #080c16;
|
|
302
|
+
--chart-8-foreground: #080c16;
|
|
303
|
+
--ai-accent: #8e72da;
|
|
304
|
+
--overlay-scrim: #000000a6;
|
|
305
|
+
--encore-navy: #172540;
|
|
306
|
+
--encore-light: #f9fafb;
|
|
307
|
+
--background-hsl: 220 29.41% 10%;
|
|
308
|
+
--foreground-hsl: 214.29 28% 95.1%;
|
|
309
|
+
--muted-hsl: 221.25 19.51% 16.08%;
|
|
310
|
+
--muted-foreground-hsl: 214.29 16.09% 65.88%;
|
|
311
|
+
--surface-hsl: 217.89 26.76% 13.92%;
|
|
312
|
+
--border-hsl: 216.52 19.66% 22.94%;
|
|
313
|
+
--input-hsl: 218.75 20% 47.06%;
|
|
314
|
+
--ring-hsl: 197.87 87.85% 58.04%;
|
|
315
|
+
--primary-hsl: 197.82 87.83% 54.9%;
|
|
316
|
+
--primary-foreground-hsl: 220 41.18% 10%;
|
|
317
|
+
--secondary-hsl: 219 21.74% 18.04%;
|
|
318
|
+
--secondary-foreground-hsl: 214.29 28% 95.1%;
|
|
319
|
+
--card-hsl: 217.89 26.76% 13.92%;
|
|
320
|
+
--card-foreground-hsl: 214.29 28% 95.1%;
|
|
321
|
+
--popover-hsl: 217.89 26.76% 13.92%;
|
|
322
|
+
--popover-foreground-hsl: 214.29 28% 95.1%;
|
|
323
|
+
--accent-hsl: 195.94 89.72% 58.04%;
|
|
324
|
+
--accent-foreground-hsl: 220 41.18% 10%;
|
|
325
|
+
--accent-text-hsl: 195.94 89.72% 58.04%;
|
|
326
|
+
--destructive-hsl: 2.04 80.33% 64.12%;
|
|
327
|
+
--destructive-foreground-hsl: 220 41.18% 10%;
|
|
328
|
+
--destructive-hover-hsl: 2.2 80.39% 60%;
|
|
329
|
+
--destructive-text-hsl: 1.95 80.39% 70%;
|
|
330
|
+
--destructive-subtle-hsl: 2.18 60.44% 17.84%;
|
|
331
|
+
--success-hsl: 158.27 51.84% 51.96%;
|
|
332
|
+
--success-foreground-hsl: 221.54 46.43% 10.98%;
|
|
333
|
+
--success-hover-hsl: 157.74 51.67% 47.06%;
|
|
334
|
+
--success-text-hsl: 158.27 51.84% 51.96%;
|
|
335
|
+
--success-subtle-hsl: 146.18 60.44% 17.84%;
|
|
336
|
+
--warning-hsl: 38 88.24% 60%;
|
|
337
|
+
--warning-foreground-hsl: 221.54 46.43% 10.98%;
|
|
338
|
+
--warning-hover-hsl: 38 88.24% 60%;
|
|
339
|
+
--warning-text-hsl: 38 88.24% 60%;
|
|
340
|
+
--warning-subtle-hsl: 37.73 90.65% 20.98%;
|
|
341
|
+
--info-hsl: 204.8 81.52% 63.92%;
|
|
342
|
+
--info-foreground-hsl: 221.54 46.43% 10.98%;
|
|
343
|
+
--info-hover-hsl: 204.8 81.52% 63.92%;
|
|
344
|
+
--info-text-hsl: 204.8 81.52% 63.92%;
|
|
345
|
+
--info-subtle-hsl: 217.06 91.07% 21.96%;
|
|
346
|
+
--chart-1-hsl: 202.12 97.06% 60%;
|
|
347
|
+
--chart-2-hsl: 173.16 96.98% 60.98%;
|
|
348
|
+
--chart-3-hsl: 260.51 43.17% 64.12%;
|
|
349
|
+
--chart-4-hsl: 36.84 98.17% 57.06%;
|
|
350
|
+
--chart-5-hsl: 330 88.61% 69.02%;
|
|
351
|
+
--chart-6-hsl: 156.14 67.06% 50%;
|
|
352
|
+
--chart-7-hsl: 26.01 82.86% 51.96%;
|
|
353
|
+
--chart-8-hsl: 239 84.51% 72.16%;
|
|
354
|
+
--chart-1-foreground-hsl: 222.86 46.67% 5.88%;
|
|
355
|
+
--chart-2-foreground-hsl: 222.86 46.67% 5.88%;
|
|
356
|
+
--chart-3-foreground-hsl: 222.86 46.67% 5.88%;
|
|
357
|
+
--chart-4-foreground-hsl: 222.86 46.67% 5.88%;
|
|
358
|
+
--chart-5-foreground-hsl: 222.86 46.67% 5.88%;
|
|
359
|
+
--chart-6-foreground-hsl: 222.86 46.67% 5.88%;
|
|
360
|
+
--chart-7-foreground-hsl: 222.86 46.67% 5.88%;
|
|
361
|
+
--chart-8-foreground-hsl: 222.86 46.67% 5.88%;
|
|
362
|
+
--ai-accent-hsl: 256.15 58.43% 65.1%;
|
|
363
|
+
--overlay-scrim-hsl: 0 0% 0% / 0.65;
|
|
364
|
+
--encore-navy-hsl: 219.51 47.13% 17.06%;
|
|
365
|
+
--encore-light-hsl: 210 20% 98.04%;
|
|
118
366
|
}
|
|
119
367
|
|
|
120
368
|
/* Spacing scale (DTCG dimension tokens). */
|
package/dist/tokens.d.ts
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
export declare const lightTokens: Record<string, string>;
|
|
2
2
|
export declare const darkTokens: Record<string, string>;
|
|
3
|
+
export declare const lightHslTokens: Record<string, string>;
|
|
4
|
+
export declare const darkHslTokens: Record<string, string>;
|
|
3
5
|
export type TokenName = string;
|
|
4
6
|
export declare const fontFamily: Record<string, string>;
|
|
5
7
|
export declare const fontSize: Record<string, string>;
|
|
@@ -11,6 +13,10 @@ export declare const typography: {
|
|
|
11
13
|
fontWeight: Record<string, number>;
|
|
12
14
|
lineHeight: Record<string, number>;
|
|
13
15
|
};
|
|
16
|
+
export declare const radius: Record<string, string>;
|
|
17
|
+
export declare const motionDuration: Record<string, string>;
|
|
18
|
+
export declare const motionEasing: Record<string, string>;
|
|
19
|
+
export declare const elevation: Record<string, string>;
|
|
14
20
|
export type FontFamily = string;
|
|
15
21
|
export type FontSize = string;
|
|
16
22
|
export type FontWeight = string;
|
package/dist/tokens.js
ADDED
|
@@ -0,0 +1,292 @@
|
|
|
1
|
+
export const lightTokens = {
|
|
2
|
+
"background": "#f6f7f9",
|
|
3
|
+
"foreground": "#101928",
|
|
4
|
+
"muted": "#e9edf1",
|
|
5
|
+
"mutedForeground": "#586579",
|
|
6
|
+
"surface": "#ffffff",
|
|
7
|
+
"border": "#d1d7e0",
|
|
8
|
+
"input": "#7588a3",
|
|
9
|
+
"ring": "#0a91c2",
|
|
10
|
+
"primary": "#172540",
|
|
11
|
+
"primaryForeground": "#fbfcfd",
|
|
12
|
+
"secondary": "#eceff4",
|
|
13
|
+
"secondaryForeground": "#101928",
|
|
14
|
+
"card": "#ffffff",
|
|
15
|
+
"cardForeground": "#101928",
|
|
16
|
+
"popover": "#ffffff",
|
|
17
|
+
"popoverForeground": "#101928",
|
|
18
|
+
"accent": "#0c90c0",
|
|
19
|
+
"accentForeground": "#101928",
|
|
20
|
+
"accentText": "#086691",
|
|
21
|
+
"destructive": "#d52620",
|
|
22
|
+
"destructiveForeground": "#fbfcfd",
|
|
23
|
+
"destructiveHover": "#bf221d",
|
|
24
|
+
"destructiveText": "#b1201b",
|
|
25
|
+
"destructiveSubtle": "#f9e7e7",
|
|
26
|
+
"success": "#1d8660",
|
|
27
|
+
"successForeground": "#ffffff",
|
|
28
|
+
"successHover": "#1b7957",
|
|
29
|
+
"successText": "#186d4e",
|
|
30
|
+
"successSubtle": "#e7f9ee",
|
|
31
|
+
"warning": "#c47308",
|
|
32
|
+
"warningForeground": "#0f1729",
|
|
33
|
+
"warningHover": "#c47308",
|
|
34
|
+
"warningText": "#8e5306",
|
|
35
|
+
"warningSubtle": "#fdf3e2",
|
|
36
|
+
"info": "#1260ba",
|
|
37
|
+
"infoForeground": "#ffffff",
|
|
38
|
+
"infoHover": "#1260ba",
|
|
39
|
+
"infoText": "#0f4d95",
|
|
40
|
+
"infoSubtle": "#d8e6fd",
|
|
41
|
+
"chart1": "#1a8bdb",
|
|
42
|
+
"chart2": "#096d61",
|
|
43
|
+
"chart3": "#6437be",
|
|
44
|
+
"chart4": "#905a04",
|
|
45
|
+
"chart5": "#c72378",
|
|
46
|
+
"chart6": "#17965b",
|
|
47
|
+
"chart7": "#d96602",
|
|
48
|
+
"chart8": "#4e63ef",
|
|
49
|
+
"chart1Foreground": "#0f1729",
|
|
50
|
+
"chart2Foreground": "#ffffff",
|
|
51
|
+
"chart3Foreground": "#ffffff",
|
|
52
|
+
"chart4Foreground": "#ffffff",
|
|
53
|
+
"chart5Foreground": "#ffffff",
|
|
54
|
+
"chart6Foreground": "#0f1729",
|
|
55
|
+
"chart7Foreground": "#0f1729",
|
|
56
|
+
"chart8Foreground": "#ffffff",
|
|
57
|
+
"aiAccent": "#6d4acf",
|
|
58
|
+
"overlayScrim": "#0c121d8c",
|
|
59
|
+
"encoreNavy": "#172540",
|
|
60
|
+
"encoreLight": "#f9fafb"
|
|
61
|
+
};
|
|
62
|
+
export const darkTokens = {
|
|
63
|
+
"background": "#121721",
|
|
64
|
+
"foreground": "#eff2f6",
|
|
65
|
+
"muted": "#212631",
|
|
66
|
+
"mutedForeground": "#9aa6b6",
|
|
67
|
+
"surface": "#1a212d",
|
|
68
|
+
"border": "#2f3846",
|
|
69
|
+
"input": "#607190",
|
|
70
|
+
"ring": "#36baf2",
|
|
71
|
+
"primary": "#27b5f1",
|
|
72
|
+
"primaryForeground": "#0f1624",
|
|
73
|
+
"secondary": "#242b38",
|
|
74
|
+
"secondaryForeground": "#eff2f6",
|
|
75
|
+
"card": "#1a212d",
|
|
76
|
+
"cardForeground": "#eff2f6",
|
|
77
|
+
"popover": "#1a212d",
|
|
78
|
+
"popoverForeground": "#eff2f6",
|
|
79
|
+
"accent": "#34c1f4",
|
|
80
|
+
"accentForeground": "#0f1624",
|
|
81
|
+
"accentText": "#34c1f4",
|
|
82
|
+
"destructive": "#ed5f5a",
|
|
83
|
+
"destructiveForeground": "#0f1624",
|
|
84
|
+
"destructiveHover": "#eb4d47",
|
|
85
|
+
"destructiveText": "#f07975",
|
|
86
|
+
"destructiveSubtle": "#491412",
|
|
87
|
+
"success": "#45c496",
|
|
88
|
+
"successForeground": "#0f1729",
|
|
89
|
+
"successHover": "#3ab688",
|
|
90
|
+
"successText": "#45c496",
|
|
91
|
+
"successSubtle": "#12492a",
|
|
92
|
+
"warning": "#f3b13f",
|
|
93
|
+
"warningForeground": "#0f1729",
|
|
94
|
+
"warningHover": "#f3b13f",
|
|
95
|
+
"warningText": "#f3b13f",
|
|
96
|
+
"warningSubtle": "#664205",
|
|
97
|
+
"info": "#58b0ee",
|
|
98
|
+
"infoForeground": "#0f1729",
|
|
99
|
+
"infoHover": "#58b0ee",
|
|
100
|
+
"infoText": "#58b0ee",
|
|
101
|
+
"infoSubtle": "#052c6b",
|
|
102
|
+
"chart1": "#36b3fc",
|
|
103
|
+
"chart2": "#3bfce6",
|
|
104
|
+
"chart3": "#977ccb",
|
|
105
|
+
"chart4": "#fdaa26",
|
|
106
|
+
"chart5": "#f66ab0",
|
|
107
|
+
"chart6": "#2ad591",
|
|
108
|
+
"chart7": "#ea771f",
|
|
109
|
+
"chart8": "#7c7ef4",
|
|
110
|
+
"chart1Foreground": "#080c16",
|
|
111
|
+
"chart2Foreground": "#080c16",
|
|
112
|
+
"chart3Foreground": "#080c16",
|
|
113
|
+
"chart4Foreground": "#080c16",
|
|
114
|
+
"chart5Foreground": "#080c16",
|
|
115
|
+
"chart6Foreground": "#080c16",
|
|
116
|
+
"chart7Foreground": "#080c16",
|
|
117
|
+
"chart8Foreground": "#080c16",
|
|
118
|
+
"aiAccent": "#8e72da",
|
|
119
|
+
"overlayScrim": "#000000a6",
|
|
120
|
+
"encoreNavy": "#172540",
|
|
121
|
+
"encoreLight": "#f9fafb"
|
|
122
|
+
};
|
|
123
|
+
export const lightHslTokens = {
|
|
124
|
+
"background": "220 20% 97.06%",
|
|
125
|
+
"foreground": "217.5 42.86% 10.98%",
|
|
126
|
+
"muted": "210 22.22% 92.94%",
|
|
127
|
+
"mutedForeground": "216.36 15.79% 40.98%",
|
|
128
|
+
"surface": "0 0% 100%",
|
|
129
|
+
"border": "216 19.48% 84.9%",
|
|
130
|
+
"input": "215.22 20% 54.9%",
|
|
131
|
+
"ring": "195.98 90.2% 40%",
|
|
132
|
+
"primary": "219.51 47.13% 17.06%",
|
|
133
|
+
"primaryForeground": "210 33.33% 98.82%",
|
|
134
|
+
"secondary": "217.5 26.67% 94.12%",
|
|
135
|
+
"secondaryForeground": "217.5 42.86% 10.98%",
|
|
136
|
+
"card": "0 0% 100%",
|
|
137
|
+
"cardForeground": "217.5 42.86% 10.98%",
|
|
138
|
+
"popover": "0 0% 100%",
|
|
139
|
+
"popoverForeground": "217.5 42.86% 10.98%",
|
|
140
|
+
"accent": "196 88.24% 40%",
|
|
141
|
+
"accentForeground": "217.5 42.86% 10.98%",
|
|
142
|
+
"accentText": "198.83 89.54% 30%",
|
|
143
|
+
"destructive": "1.99 73.88% 48.04%",
|
|
144
|
+
"destructiveForeground": "210 33.33% 98.82%",
|
|
145
|
+
"destructiveHover": "1.85 73.64% 43.14%",
|
|
146
|
+
"destructiveText": "2 73.53% 40%",
|
|
147
|
+
"destructiveSubtle": "0 60% 94.12%",
|
|
148
|
+
"success": "158.29 64.42% 31.96%",
|
|
149
|
+
"successForeground": "0 0% 100%",
|
|
150
|
+
"successHover": "158.3 63.51% 29.02%",
|
|
151
|
+
"successText": "158.12 63.91% 26.08%",
|
|
152
|
+
"successSubtle": "143.33 60% 94.12%",
|
|
153
|
+
"warning": "34.15 92.16% 40%",
|
|
154
|
+
"warningForeground": "221.54 46.43% 10.98%",
|
|
155
|
+
"warningHover": "34.15 92.16% 40%",
|
|
156
|
+
"warningText": "33.97 91.89% 29.02%",
|
|
157
|
+
"warningSubtle": "37.78 87.1% 93.92%",
|
|
158
|
+
"info": "212.14 82.35% 40%",
|
|
159
|
+
"infoForeground": "0 0% 100%",
|
|
160
|
+
"infoHover": "212.14 82.35% 40%",
|
|
161
|
+
"infoText": "212.24 81.71% 32.16%",
|
|
162
|
+
"infoSubtle": "217.3 90.24% 91.96%",
|
|
163
|
+
"chart1": "204.87 78.78% 48.04%",
|
|
164
|
+
"chart2": "172.8 84.75% 23.14%",
|
|
165
|
+
"chart3": "260 55.1% 48.04%",
|
|
166
|
+
"chart4": "36.86 94.59% 29.02%",
|
|
167
|
+
"chart5": "328.9 70.09% 45.88%",
|
|
168
|
+
"chart6": "152.13 73.41% 33.92%",
|
|
169
|
+
"chart7": "27.91 98.17% 42.94%",
|
|
170
|
+
"chart8": "232.17 83.42% 62.16%",
|
|
171
|
+
"chart1Foreground": "221.54 46.43% 10.98%",
|
|
172
|
+
"chart2Foreground": "0 0% 100%",
|
|
173
|
+
"chart3Foreground": "0 0% 100%",
|
|
174
|
+
"chart4Foreground": "0 0% 100%",
|
|
175
|
+
"chart5Foreground": "0 0% 100%",
|
|
176
|
+
"chart6Foreground": "221.54 46.43% 10.98%",
|
|
177
|
+
"chart7Foreground": "221.54 46.43% 10.98%",
|
|
178
|
+
"chart8Foreground": "0 0% 100%",
|
|
179
|
+
"aiAccent": "255.79 58.08% 55.1%",
|
|
180
|
+
"overlayScrim": "218.82 41.46% 8.04% / 0.55",
|
|
181
|
+
"encoreNavy": "219.51 47.13% 17.06%",
|
|
182
|
+
"encoreLight": "210 20% 98.04%"
|
|
183
|
+
};
|
|
184
|
+
export const darkHslTokens = {
|
|
185
|
+
"background": "220 29.41% 10%",
|
|
186
|
+
"foreground": "214.29 28% 95.1%",
|
|
187
|
+
"muted": "221.25 19.51% 16.08%",
|
|
188
|
+
"mutedForeground": "214.29 16.09% 65.88%",
|
|
189
|
+
"surface": "217.89 26.76% 13.92%",
|
|
190
|
+
"border": "216.52 19.66% 22.94%",
|
|
191
|
+
"input": "218.75 20% 47.06%",
|
|
192
|
+
"ring": "197.87 87.85% 58.04%",
|
|
193
|
+
"primary": "197.82 87.83% 54.9%",
|
|
194
|
+
"primaryForeground": "220 41.18% 10%",
|
|
195
|
+
"secondary": "219 21.74% 18.04%",
|
|
196
|
+
"secondaryForeground": "214.29 28% 95.1%",
|
|
197
|
+
"card": "217.89 26.76% 13.92%",
|
|
198
|
+
"cardForeground": "214.29 28% 95.1%",
|
|
199
|
+
"popover": "217.89 26.76% 13.92%",
|
|
200
|
+
"popoverForeground": "214.29 28% 95.1%",
|
|
201
|
+
"accent": "195.94 89.72% 58.04%",
|
|
202
|
+
"accentForeground": "220 41.18% 10%",
|
|
203
|
+
"accentText": "195.94 89.72% 58.04%",
|
|
204
|
+
"destructive": "2.04 80.33% 64.12%",
|
|
205
|
+
"destructiveForeground": "220 41.18% 10%",
|
|
206
|
+
"destructiveHover": "2.2 80.39% 60%",
|
|
207
|
+
"destructiveText": "1.95 80.39% 70%",
|
|
208
|
+
"destructiveSubtle": "2.18 60.44% 17.84%",
|
|
209
|
+
"success": "158.27 51.84% 51.96%",
|
|
210
|
+
"successForeground": "221.54 46.43% 10.98%",
|
|
211
|
+
"successHover": "157.74 51.67% 47.06%",
|
|
212
|
+
"successText": "158.27 51.84% 51.96%",
|
|
213
|
+
"successSubtle": "146.18 60.44% 17.84%",
|
|
214
|
+
"warning": "38 88.24% 60%",
|
|
215
|
+
"warningForeground": "221.54 46.43% 10.98%",
|
|
216
|
+
"warningHover": "38 88.24% 60%",
|
|
217
|
+
"warningText": "38 88.24% 60%",
|
|
218
|
+
"warningSubtle": "37.73 90.65% 20.98%",
|
|
219
|
+
"info": "204.8 81.52% 63.92%",
|
|
220
|
+
"infoForeground": "221.54 46.43% 10.98%",
|
|
221
|
+
"infoHover": "204.8 81.52% 63.92%",
|
|
222
|
+
"infoText": "204.8 81.52% 63.92%",
|
|
223
|
+
"infoSubtle": "217.06 91.07% 21.96%",
|
|
224
|
+
"chart1": "202.12 97.06% 60%",
|
|
225
|
+
"chart2": "173.16 96.98% 60.98%",
|
|
226
|
+
"chart3": "260.51 43.17% 64.12%",
|
|
227
|
+
"chart4": "36.84 98.17% 57.06%",
|
|
228
|
+
"chart5": "330 88.61% 69.02%",
|
|
229
|
+
"chart6": "156.14 67.06% 50%",
|
|
230
|
+
"chart7": "26.01 82.86% 51.96%",
|
|
231
|
+
"chart8": "239 84.51% 72.16%",
|
|
232
|
+
"chart1Foreground": "222.86 46.67% 5.88%",
|
|
233
|
+
"chart2Foreground": "222.86 46.67% 5.88%",
|
|
234
|
+
"chart3Foreground": "222.86 46.67% 5.88%",
|
|
235
|
+
"chart4Foreground": "222.86 46.67% 5.88%",
|
|
236
|
+
"chart5Foreground": "222.86 46.67% 5.88%",
|
|
237
|
+
"chart6Foreground": "222.86 46.67% 5.88%",
|
|
238
|
+
"chart7Foreground": "222.86 46.67% 5.88%",
|
|
239
|
+
"chart8Foreground": "222.86 46.67% 5.88%",
|
|
240
|
+
"aiAccent": "256.15 58.43% 65.1%",
|
|
241
|
+
"overlayScrim": "0 0% 0% / 0.65",
|
|
242
|
+
"encoreNavy": "219.51 47.13% 17.06%",
|
|
243
|
+
"encoreLight": "210 20% 98.04%"
|
|
244
|
+
};
|
|
245
|
+
export const fontFamily = {
|
|
246
|
+
"sans": "Inter, ui-sans-serif, system-ui, -apple-system, sans-serif",
|
|
247
|
+
"display": "'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
|
|
248
|
+
"mono": "'JetBrains Mono', ui-monospace, SFMono-Regular, monospace"
|
|
249
|
+
};
|
|
250
|
+
export const fontSize = {
|
|
251
|
+
"xs": "0.75rem",
|
|
252
|
+
"sm": "0.875rem",
|
|
253
|
+
"base": "1rem",
|
|
254
|
+
"lg": "1.125rem",
|
|
255
|
+
"xl": "1.25rem",
|
|
256
|
+
"2xl": "1.5rem",
|
|
257
|
+
"3xl": "1.875rem",
|
|
258
|
+
"4xl": "2.25rem"
|
|
259
|
+
};
|
|
260
|
+
export const fontWeight = {
|
|
261
|
+
"normal": 400,
|
|
262
|
+
"medium": 500,
|
|
263
|
+
"semibold": 600,
|
|
264
|
+
"bold": 700
|
|
265
|
+
};
|
|
266
|
+
export const lineHeight = {
|
|
267
|
+
"tight": 1.25,
|
|
268
|
+
"snug": 1.375,
|
|
269
|
+
"normal": 1.5,
|
|
270
|
+
"relaxed": 1.625
|
|
271
|
+
};
|
|
272
|
+
export const typography = { fontFamily, fontSize, fontWeight, lineHeight };
|
|
273
|
+
export const radius = {
|
|
274
|
+
"root": "0.625rem",
|
|
275
|
+
"sm": "0.375rem",
|
|
276
|
+
"md": "0.5rem",
|
|
277
|
+
"lg": "0.625rem",
|
|
278
|
+
"xl": "0.875rem"
|
|
279
|
+
};
|
|
280
|
+
export const motionDuration = {
|
|
281
|
+
"instant": "50ms",
|
|
282
|
+
"normal": "200ms",
|
|
283
|
+
"slow": "250ms"
|
|
284
|
+
};
|
|
285
|
+
export const motionEasing = {
|
|
286
|
+
"out": "cubic-bezier(0, 0.3, 0.6, 1)"
|
|
287
|
+
};
|
|
288
|
+
export const elevation = {
|
|
289
|
+
"card": "0 1px 2px 0 hsl(var(--foreground-hsl) / 0.05)",
|
|
290
|
+
"cardHover": "0 8px 24px -12px hsl(var(--foreground-hsl) / 0.18)",
|
|
291
|
+
"popover": "0 16px 40px -20px hsl(var(--foreground-hsl) / 0.28)"
|
|
292
|
+
};
|