@encore-os/tokens 0.5.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.
Files changed (6) hide show
  1. package/dist/tokens.css +296 -51
  2. package/dist/tokens.d.ts +6 -0
  3. package/dist/tokens.js +292 -0
  4. package/dist/tokens.json +3561 -709
  5. package/dist/tokens.ts +259 -47
  6. 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,18 +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
- --color-brand: var(--brand);
22
- --color-brand-foreground: var(--brand-foreground);
20
+ --color-accent-text: var(--accent-text);
23
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);
24
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);
25
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);
26
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);
27
61
 
28
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;
29
64
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
30
65
  --text-xs: 0.75rem;
31
66
  --text-sm: 0.875rem;
@@ -43,36 +78,140 @@
43
78
  --leading-snug: 1.375;
44
79
  --leading-normal: 1.5;
45
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);
46
90
  }
47
91
 
48
92
  :root {
49
- --background: #f2f5f8;
50
- --foreground: #0f1624;
51
- --muted: #e6edf6;
52
- --muted-foreground: #4c5d76;
93
+ /* Resolved hex colors plus HSL triplets for hsl(var(--*-hsl)) consumers. */
94
+ --background: #f6f7f9;
95
+ --foreground: #101928;
96
+ --muted: #e9edf1;
97
+ --muted-foreground: #586579;
53
98
  --surface: #ffffff;
54
- --border: #c8ced8;
55
- --ring: #0ea5e9;
56
- --primary: #101f41;
57
- --primary-foreground: #ffffff;
58
- --secondary: #f3f5f7;
59
- --secondary-foreground: #0f1624;
99
+ --border: #d1d7e0;
100
+ --input: #7588a3;
101
+ --ring: #0a91c2;
102
+ --primary: #172540;
103
+ --primary-foreground: #fbfcfd;
104
+ --secondary: #eceff4;
105
+ --secondary-foreground: #101928;
60
106
  --card: #ffffff;
61
- --card-foreground: #0f1624;
107
+ --card-foreground: #101928;
62
108
  --popover: #ffffff;
63
- --popover-foreground: #0f1624;
64
- --input: #c8ced8;
65
- --destructive-foreground: #f9fafb;
66
- --accent: #c5d2e6;
67
- --accent-foreground: #0f1624;
68
- --brand: #0a7db2;
69
- --brand-foreground: #ffffff;
70
- --destructive: #d92626;
71
- --success: #279b57;
72
- --warning: #e9980c;
73
- --info: #0a5adb;
109
+ --popover-foreground: #101928;
110
+ --accent: #0c90c0;
111
+ --accent-foreground: #101928;
112
+ --accent-text: #086691;
113
+ --destructive: #d52620;
114
+ --destructive-foreground: #fbfcfd;
115
+ --destructive-hover: #bf221d;
116
+ --destructive-text: #b1201b;
117
+ --destructive-subtle: #f9e7e7;
118
+ --success: #1d8660;
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%;
74
212
 
75
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;
76
215
  --font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
77
216
  --font-size-xs: 0.75rem;
78
217
  --font-size-sm: 0.875rem;
@@ -90,34 +229,140 @@
90
229
  --line-height-snug: 1.375;
91
230
  --line-height-normal: 1.5;
92
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);
93
245
  }
94
246
 
95
247
  .dark {
96
- --background: #0b1220;
97
- --foreground: #e6edf6;
98
- --muted: #172238;
99
- --muted-foreground: #90a1ba;
100
- --surface: #111c30;
101
- --border: #243349;
102
- --ring: #38bdf8;
103
- --primary: #0ea5e9;
104
- --primary-foreground: #04141f;
105
- --secondary: #1b2740;
106
- --secondary-foreground: #c5d2e6;
107
- --card: #111c30;
108
- --card-foreground: #e6edf6;
109
- --popover: #0f1a2c;
110
- --popover-foreground: #e6edf6;
111
- --input: #1d2a42;
112
- --destructive-foreground: #1a0606;
113
- --accent: #1d2a42;
114
- --accent-foreground: #e6edf6;
115
- --brand: #38bdf8;
116
- --brand-foreground: #04141f;
117
- --destructive: #f04848;
118
- --success: #3ddc84;
119
- --warning: #f5b133;
120
- --info: #4f8ff5;
248
+ --background: #121721;
249
+ --foreground: #eff2f6;
250
+ --muted: #212631;
251
+ --muted-foreground: #9aa6b6;
252
+ --surface: #1a212d;
253
+ --border: #2f3846;
254
+ --input: #607190;
255
+ --ring: #36baf2;
256
+ --primary: #27b5f1;
257
+ --primary-foreground: #0f1624;
258
+ --secondary: #242b38;
259
+ --secondary-foreground: #eff2f6;
260
+ --card: #1a212d;
261
+ --card-foreground: #eff2f6;
262
+ --popover: #1a212d;
263
+ --popover-foreground: #eff2f6;
264
+ --accent: #34c1f4;
265
+ --accent-foreground: #0f1624;
266
+ --accent-text: #34c1f4;
267
+ --destructive: #ed5f5a;
268
+ --destructive-foreground: #0f1624;
269
+ --destructive-hover: #eb4d47;
270
+ --destructive-text: #f07975;
271
+ --destructive-subtle: #491412;
272
+ --success: #45c496;
273
+ --success-foreground: #0f1729;
274
+ --success-hover: #3ab688;
275
+ --success-text: #45c496;
276
+ --success-subtle: #12492a;
277
+ --warning: #f3b13f;
278
+ --warning-foreground: #0f1729;
279
+ --warning-hover: #f3b13f;
280
+ --warning-text: #f3b13f;
281
+ --warning-subtle: #664205;
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%;
121
366
  }
122
367
 
123
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;