@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.ts CHANGED
@@ -1,61 +1,252 @@
1
1
  export const lightTokens = {
2
- "background": "#f2f5f8",
3
- "foreground": "#0f1624",
4
- "muted": "#e6edf6",
5
- "mutedForeground": "#4c5d76",
2
+ "background": "#f6f7f9",
3
+ "foreground": "#101928",
4
+ "muted": "#e9edf1",
5
+ "mutedForeground": "#586579",
6
6
  "surface": "#ffffff",
7
- "border": "#c8ced8",
8
- "ring": "#0ea5e9",
9
- "primary": "#101f41",
10
- "primaryForeground": "#ffffff",
11
- "secondary": "#f3f5f7",
12
- "secondaryForeground": "#0f1624",
7
+ "border": "#d1d7e0",
8
+ "input": "#7588a3",
9
+ "ring": "#0a91c2",
10
+ "primary": "#172540",
11
+ "primaryForeground": "#fbfcfd",
12
+ "secondary": "#eceff4",
13
+ "secondaryForeground": "#101928",
13
14
  "card": "#ffffff",
14
- "cardForeground": "#0f1624",
15
+ "cardForeground": "#101928",
15
16
  "popover": "#ffffff",
16
- "popoverForeground": "#0f1624",
17
- "input": "#c8ced8",
18
- "destructiveForeground": "#f9fafb",
19
- "accent": "#c5d2e6",
20
- "accentForeground": "#0f1624",
21
- "brand": "#0a7db2",
22
- "brandForeground": "#ffffff",
23
- "destructive": "#d92626",
24
- "success": "#279b57",
25
- "warning": "#e9980c",
26
- "info": "#0a5adb"
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"
27
61
  } as const;
28
62
  export const darkTokens = {
29
- "background": "#0b1220",
30
- "foreground": "#e6edf6",
31
- "muted": "#172238",
32
- "mutedForeground": "#90a1ba",
33
- "surface": "#111c30",
34
- "border": "#243349",
35
- "ring": "#38bdf8",
36
- "primary": "#0ea5e9",
37
- "primaryForeground": "#04141f",
38
- "secondary": "#1b2740",
39
- "secondaryForeground": "#c5d2e6",
40
- "card": "#111c30",
41
- "cardForeground": "#e6edf6",
42
- "popover": "#0f1a2c",
43
- "popoverForeground": "#e6edf6",
44
- "input": "#1d2a42",
45
- "destructiveForeground": "#1a0606",
46
- "accent": "#1d2a42",
47
- "accentForeground": "#e6edf6",
48
- "brand": "#38bdf8",
49
- "brandForeground": "#04141f",
50
- "destructive": "#f04848",
51
- "success": "#3ddc84",
52
- "warning": "#f5b133",
53
- "info": "#4f8ff5"
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
+ } as const;
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
+ } as const;
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%"
54
244
  } as const;
55
245
  export type TokenName = keyof typeof lightTokens;
56
246
 
57
247
  export const fontFamily = {
58
248
  "sans": "Inter, ui-sans-serif, system-ui, -apple-system, sans-serif",
249
+ "display": "'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
59
250
  "mono": "'JetBrains Mono', ui-monospace, SFMono-Regular, monospace"
60
251
  } as const;
61
252
  export const fontSize = {
@@ -81,6 +272,27 @@ export const lineHeight = {
81
272
  "relaxed": 1.625
82
273
  } as const;
83
274
  export const typography = { fontFamily, fontSize, fontWeight, lineHeight } as const;
275
+
276
+ export const radius = {
277
+ "root": "0.625rem",
278
+ "sm": "0.375rem",
279
+ "md": "0.5rem",
280
+ "lg": "0.625rem",
281
+ "xl": "0.875rem"
282
+ } as const;
283
+ export const motionDuration = {
284
+ "instant": "50ms",
285
+ "normal": "200ms",
286
+ "slow": "250ms"
287
+ } as const;
288
+ export const motionEasing = {
289
+ "out": "cubic-bezier(0, 0.3, 0.6, 1)"
290
+ } as const;
291
+ export const elevation = {
292
+ "card": "0 1px 2px 0 hsl(var(--foreground-hsl) / 0.05)",
293
+ "cardHover": "0 8px 24px -12px hsl(var(--foreground-hsl) / 0.18)",
294
+ "popover": "0 16px 40px -20px hsl(var(--foreground-hsl) / 0.28)"
295
+ } as const;
84
296
  export type FontFamily = keyof typeof fontFamily;
85
297
  export type FontSize = keyof typeof fontSize;
86
298
  export type FontWeight = keyof typeof fontWeight;
package/package.json CHANGED
@@ -1,7 +1,12 @@
1
1
  {
2
2
  "name": "@encore-os/tokens",
3
- "version": "0.5.0",
3
+ "version": "0.7.0",
4
4
  "type": "module",
5
+ "repository": {
6
+ "type": "git",
7
+ "url": "https://github.com/Encore-OS/encore-design-system.git",
8
+ "directory": "packages/tokens"
9
+ },
5
10
  "publishConfig": {
6
11
  "registry": "https://registry.npmjs.org",
7
12
  "access": "public"
@@ -13,14 +18,14 @@
13
18
  "./tokens.css": "./dist/tokens.css",
14
19
  ".": {
15
20
  "types": "./dist/tokens.d.ts",
16
- "import": "./dist/tokens.ts"
21
+ "import": "./dist/tokens.js"
17
22
  },
18
23
  "./tokens.json": "./dist/tokens.json"
19
24
  },
20
25
  "scripts": {
21
26
  "build": "bun run scripts/build.ts",
22
27
  "parity": "bun run scripts/check-parity.ts",
23
- "test": "vitest run",
28
+ "test": "vitest run --no-file-parallelism",
24
29
  "lint": "tsc --noEmit -p ."
25
30
  },
26
31
  "devDependencies": {