@crewlethq/tokens 0.2.0 → 0.4.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 (17) hide show
  1. package/README.md +153 -20
  2. package/dist/css/base.css +194 -0
  3. package/dist/css/breakpoint.css +18 -0
  4. package/dist/css/density.css +23 -0
  5. package/dist/css/legacy.css +4 -6
  6. package/dist/css/material-symbols.css +5 -3
  7. package/dist/css/themes.css +338 -38
  8. package/dist/css/tokens.css +152 -38
  9. package/dist/index.d.ts +152 -12
  10. package/dist/index.js +152 -13
  11. package/dist/themes.d.ts +274 -0
  12. package/dist/themes.js +274 -0
  13. package/package.json +17 -5
  14. package/test/color.mjs +262 -0
  15. package/test/palette.d.mts +77 -0
  16. package/test/palette.mjs +867 -0
  17. package/test/palette.test.mjs +55 -0
package/dist/index.js CHANGED
@@ -1,5 +1,6 @@
1
1
  /* Generated by style-dictionary. Do not edit. */
2
2
  export const blur = {
3
+ "xs": "3px",
3
4
  "sm": "6px",
4
5
  "md": "10px",
5
6
  "lg": "16px",
@@ -9,6 +10,7 @@ export const blur = {
9
10
  export const breakpoint = {
10
11
  "sm": "480px",
11
12
  "md": "768px",
13
+ "shell": "900px",
12
14
  "lg": "1024px",
13
15
  "xl": "1200px",
14
16
  "2xl": "1600px"
@@ -19,14 +21,16 @@ export const color = {
19
21
  "primaryHover": "#4759c2",
20
22
  "primaryActive": "#3b4caa",
21
23
  "accent": "#5469d4",
22
- "accentHover": "#6478e0",
23
- "accentActive": "#4a5cc2",
24
+ "accentHover": "#4a5cc2",
25
+ "accentActive": "#3e50b8",
26
+ "accentInk": "#8b9ff5",
24
27
  "accentRgb": "84, 105, 212",
25
- "accentSoft": "rgba(84, 105, 212, 0.10)",
28
+ "accentSoft": "rgba(84, 105, 212, 0.18)",
26
29
  "accentSoftStrong": "rgba(84, 105, 212, 0.32)",
27
30
  "accentDeep": "#5c24ff",
28
31
  "highlight": "#ff3bff",
29
32
  "slate": "#3c4052",
33
+ "mark": "#7c56ff",
30
34
  "gradient": "linear-gradient(90deg, #ff3bff 0%, #ecbfbf 38%, #5c24ff 76%, #d94fd5 100%)"
31
35
  },
32
36
  "surface": {
@@ -37,29 +41,122 @@ export const color = {
37
41
  "topbar": "#15171c",
38
42
  "topbarLift": "#1c1e24",
39
43
  "topbarActive": "#22252b",
44
+ "hover": "rgba(255, 255, 255, 0.05)",
45
+ "pressed": "rgba(255, 255, 255, 0.08)",
46
+ "inset": "rgba(255, 255, 255, 0.05)",
47
+ "glass": "rgba(28, 30, 36, 0.90)",
48
+ "scrim": "rgba(0, 0, 0, 0.6)",
49
+ "veil": "rgba(0, 0, 0, 0.72)",
40
50
  "inverse": "#ffffff"
41
51
  },
42
52
  "text": {
43
53
  "primary": "#fafafa",
44
54
  "secondary": "#c9ced8",
45
- "tertiary": "#8c99ad",
46
- "muted": "rgba(255, 255, 255, 0.3)",
55
+ "tertiary": "#95a2b6",
56
+ "muted": "#686b70",
47
57
  "onBrand": "#ffffff",
58
+ "onAccent": "#ffffff",
48
59
  "inverse": "#09090b"
49
60
  },
50
61
  "border": {
51
62
  "default": "rgba(255, 255, 255, 0.08)",
52
63
  "hover": "rgba(255, 255, 255, 0.15)",
53
- "strong": "#3f4145",
54
- "strongHover": "#4a4d52"
64
+ "strong": "#4a4d52",
65
+ "strongHover": "#5a5e65",
66
+ "control": "#7f848e"
55
67
  },
68
+ "focus": "#8b9ff5",
56
69
  "feedback": {
57
- "success": "#46a758",
70
+ "success": "#14b8a6",
71
+ "successInk": "#5eead4",
58
72
  "warning": "#f59e0b",
59
- "danger": "#ef4444",
60
- "dangerHover": "#dc2626",
61
- "info": "#3b82f6"
62
- }
73
+ "warningInk": "#fde68a",
74
+ "danger": "#dc2626",
75
+ "dangerHover": "#b91c1c",
76
+ "dangerInk": "#fca5a5",
77
+ "info": "#38bdf8",
78
+ "infoInk": "#7dd3fc",
79
+ "successSoft": "rgba(20, 184, 166, 0.12)",
80
+ "successLine": "rgba(20, 184, 166, 0.3)",
81
+ "warningSoft": "rgba(245, 158, 11, 0.12)",
82
+ "warningLine": "rgba(245, 158, 11, 0.3)",
83
+ "dangerSoft": "rgba(220, 38, 38, 0.12)",
84
+ "dangerLine": "rgba(220, 38, 38, 0.3)",
85
+ "infoSoft": "rgba(56, 189, 248, 0.12)",
86
+ "infoLine": "rgba(56, 189, 248, 0.3)"
87
+ },
88
+ "phase": {
89
+ "onboarding": "#f77ae9",
90
+ "onboardingInk": "#ff82f1",
91
+ "execute": "#ac6bff",
92
+ "executeInk": "#d697ff",
93
+ "review": "#00a24f",
94
+ "reviewInk": "#46c872",
95
+ "onboardingSoft": "rgba(247, 122, 233, 0.12)",
96
+ "executeSoft": "rgba(172, 107, 255, 0.12)",
97
+ "reviewSoft": "rgba(0, 162, 79, 0.12)"
98
+ },
99
+ "data": {
100
+ "1": "#a5b4fc",
101
+ "2": "#facc15",
102
+ "3": "#38bdf8",
103
+ "4": "#86efac",
104
+ "5": "#ec4899",
105
+ "other": "#71717a"
106
+ },
107
+ "avatar": {
108
+ "tint": {
109
+ "0": "#2563eb",
110
+ "1": "#7c3aed",
111
+ "2": "#c026d3",
112
+ "3": "#db2777",
113
+ "4": "#dc2626",
114
+ "5": "#d54400",
115
+ "6": "#a76900",
116
+ "7": "#008931",
117
+ "8": "#00857a",
118
+ "9": "#007cbe"
119
+ }
120
+ },
121
+ "node": {
122
+ "purple": "#8e6ed4",
123
+ "purpleInk": "#cabae0",
124
+ "cyan": "#5ca8be",
125
+ "cyanInk": "#b3d7e0",
126
+ "green": "#62a578",
127
+ "greenInk": "#b8d8c0",
128
+ "amber": "#c89866",
129
+ "amberInk": "#e0c89e",
130
+ "rose": "#c8757f",
131
+ "roseInk": "#e0bfc4",
132
+ "blue": "#5b7fc7",
133
+ "blueInk": "#b9c5e0",
134
+ "purpleFill": "rgba(142, 110, 212, 0.12)",
135
+ "purpleLine": "rgba(142, 110, 212, 0.38)",
136
+ "purpleHalo": "rgba(142, 110, 212, 0.16)",
137
+ "cyanFill": "rgba(92, 168, 190, 0.12)",
138
+ "cyanLine": "rgba(92, 168, 190, 0.38)",
139
+ "cyanHalo": "rgba(92, 168, 190, 0.16)",
140
+ "greenFill": "rgba(98, 165, 120, 0.12)",
141
+ "greenLine": "rgba(98, 165, 120, 0.38)",
142
+ "greenHalo": "rgba(98, 165, 120, 0.16)",
143
+ "amberFill": "rgba(200, 152, 102, 0.12)",
144
+ "amberLine": "rgba(200, 152, 102, 0.38)",
145
+ "amberHalo": "rgba(200, 152, 102, 0.16)",
146
+ "roseFill": "rgba(200, 117, 127, 0.12)",
147
+ "roseLine": "rgba(200, 117, 127, 0.38)",
148
+ "roseHalo": "rgba(200, 117, 127, 0.16)",
149
+ "blueFill": "rgba(91, 127, 199, 0.12)",
150
+ "blueLine": "rgba(91, 127, 199, 0.38)",
151
+ "blueHalo": "rgba(91, 127, 199, 0.16)"
152
+ },
153
+ "scrollbar": "rgba(255, 255, 255, 0.16)",
154
+ "scrollbarHover": "rgba(255, 255, 255, 0.26)"
155
+ };
156
+ export const density = {
157
+ "compact": "0.82",
158
+ "normal": "1",
159
+ "comfortable": "1.14"
63
160
  };
64
161
  export const motion = {
65
162
  "duration": {
@@ -73,6 +170,7 @@ export const motion = {
73
170
  "default": "ease",
74
171
  "out": "ease-out",
75
172
  "inOut": "ease-in-out",
173
+ "emphasized": "cubic-bezier(0.16, 1, 0.3, 1)",
76
174
  "spring": "cubic-bezier(0.34, 1.56, 0.64, 1)"
77
175
  }
78
176
  };
@@ -84,6 +182,7 @@ export const radius = {
84
182
  "lg": "12px",
85
183
  "xl": "16px",
86
184
  "2xl": "24px",
185
+ "chip": "calc(8px - 1px)",
87
186
  "pill": "999px",
88
187
  "circle": "50%"
89
188
  };
@@ -93,12 +192,40 @@ export const shadow = {
93
192
  "md": "0 4px 12px rgba(0, 0, 0, 0.25)",
94
193
  "lg": "0 8px 24px rgba(0, 0, 0, 0.3)",
95
194
  "xl": "0 12px 32px rgba(0, 0, 0, 0.4)",
195
+ "sheet": "-8px 0 32px rgba(0, 0, 0, 0.4)",
96
196
  "2xl": "0 16px 64px rgba(0, 0, 0, 0.6)",
97
197
  "card": "0 8px 24px rgba(0, 0, 0, 0.1)",
98
198
  "rimLit": "0 4px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04)",
99
- "focus": "0 0 0 3px rgba(84, 105, 212, 0.35)",
199
+ "hairline": "inset 0 1px 0 rgba(255, 255, 255, 0.04)",
200
+ "focus": "0 0 0 2px var(--color-surface-background), 0 0 0 4px var(--color-focus)",
201
+ "selection": "inset 0 0 0 2px var(--color-brand-accent)",
100
202
  "glow": "0 4px 24px rgba(84, 105, 212, 0.3)"
101
203
  };
204
+ export const size = {
205
+ "control": {
206
+ "sm": "28px",
207
+ "md": "32px",
208
+ "lg": "44px"
209
+ },
210
+ "row": {
211
+ "sm": "28px",
212
+ "md": "36px",
213
+ "lg": "48px"
214
+ },
215
+ "nav": {
216
+ "gutter": "8px",
217
+ "rowPad": "12px"
218
+ },
219
+ "shell": {
220
+ "rail": "280px",
221
+ "topbar": "64px"
222
+ },
223
+ "targetMin": "24px",
224
+ "measure": "68ch",
225
+ "measureNarrow": "48ch",
226
+ "contentMax": "1600px",
227
+ "focusRingInsetOffset": "-2px"
228
+ };
102
229
  export const spacing = {
103
230
  "0": "0px",
104
231
  "1": "4px",
@@ -120,7 +247,9 @@ export const font = {
120
247
  "mono": "'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace"
121
248
  },
122
249
  "size": {
250
+ "2xs": "11px",
123
251
  "xs": "12px",
252
+ "compact": "13px",
124
253
  "sm": "14px",
125
254
  "md": "16px",
126
255
  "lg": "18px",
@@ -142,6 +271,13 @@ export const font = {
142
271
  "snug": "1.4",
143
272
  "normal": "1.5",
144
273
  "relaxed": "1.7"
274
+ },
275
+ "letterSpacing": {
276
+ "tight": "-0.02em",
277
+ "snug": "-0.005em",
278
+ "normal": "0",
279
+ "wide": "0.04em",
280
+ "wider": "0.14em"
145
281
  }
146
282
  };
147
283
  export const zIndex = {
@@ -150,7 +286,10 @@ export const zIndex = {
150
286
  "sticky": "10",
151
287
  "dropdown": "100",
152
288
  "overlay": "200",
289
+ "layerBase": "9000",
290
+ "layerMax": "9899",
153
291
  "modal": "9999",
154
292
  "popover": "10000",
155
293
  "toast": "10001"
156
294
  };
295
+ export { themes } from './themes.js';
package/dist/themes.d.ts ADDED
@@ -0,0 +1,274 @@
1
+ /**
2
+ * The two palettes, for JavaScript that cannot read a custom property: the
3
+ * tool chrome around a preview, a chart library that wants a series' colour
4
+ * as a string, a canvas that paints its own pixels.
5
+ *
6
+ * PREFER THE CUSTOM PROPERTY wherever CSS can reach: a value read here is a
7
+ * value taken at build time, so it does not follow a theme the reader
8
+ * changes. This is for the places where there is no element to read from.
9
+ */
10
+ export declare const themes: {
11
+ readonly light: {
12
+ readonly color: {
13
+ readonly surface: {
14
+ readonly background: "#ffffff";
15
+ readonly subtle: "#f4f4f5";
16
+ readonly muted: "#f4f4f5";
17
+ readonly elevated: "#ebebee";
18
+ readonly topbar: "#ffffff";
19
+ readonly topbarLift: "#f4f4f5";
20
+ readonly topbarActive: "#ebebee";
21
+ readonly hover: "rgba(9, 9, 11, 0.04)";
22
+ readonly pressed: "rgba(9, 9, 11, 0.07)";
23
+ readonly inset: "rgba(9, 9, 11, 0.05)";
24
+ readonly glass: "rgba(244, 244, 245, 0.90)";
25
+ readonly scrim: "rgba(0, 0, 0, 0.6)";
26
+ readonly veil: "rgba(255, 255, 255, 0.72)";
27
+ readonly inverse: "#09090b";
28
+ };
29
+ readonly text: {
30
+ readonly primary: "#09090b";
31
+ readonly secondary: "#52525b";
32
+ readonly tertiary: "#5b5b64";
33
+ readonly muted: "#8f8f95";
34
+ readonly onBrand: "#ffffff";
35
+ readonly onAccent: "#ffffff";
36
+ readonly inverse: "#fafafa";
37
+ };
38
+ readonly brand: {
39
+ readonly primary: "#000000";
40
+ readonly primaryHover: "rgba(0, 0, 0, 0.85)";
41
+ readonly primaryActive: "rgba(0, 0, 0, 0.7)";
42
+ readonly accentInk: "#3e50b8";
43
+ readonly accentSoft: "rgba(84, 105, 212, 0.14)";
44
+ };
45
+ readonly border: {
46
+ readonly default: "#e4e4e7";
47
+ readonly hover: "#d4d4d8";
48
+ readonly strong: "#d4d4d8";
49
+ readonly strongHover: "#a1a1aa";
50
+ readonly control: "#71717a";
51
+ };
52
+ readonly focus: "#5469d4";
53
+ readonly feedback: {
54
+ readonly success: "#0f766e";
55
+ readonly successInk: "#115e59";
56
+ readonly warning: "#b45309";
57
+ readonly warningInk: "#92400e";
58
+ readonly danger: "#991b1b";
59
+ readonly dangerHover: "#7f1d1d";
60
+ readonly dangerInk: "#991b1b";
61
+ readonly info: "#075985";
62
+ readonly infoInk: "#075985";
63
+ readonly successSoft: "rgba(15, 118, 110, 0.12)";
64
+ readonly successLine: "rgba(15, 118, 110, 0.3)";
65
+ readonly warningSoft: "rgba(180, 83, 9, 0.12)";
66
+ readonly warningLine: "rgba(180, 83, 9, 0.3)";
67
+ readonly dangerSoft: "rgba(153, 27, 27, 0.12)";
68
+ readonly dangerLine: "rgba(153, 27, 27, 0.3)";
69
+ readonly infoSoft: "rgba(7, 89, 133, 0.12)";
70
+ readonly infoLine: "rgba(7, 89, 133, 0.3)";
71
+ };
72
+ readonly phase: {
73
+ readonly onboarding: "#980099";
74
+ readonly onboardingInk: "#8e0090";
75
+ readonly execute: "#5b37da";
76
+ readonly executeInk: "#552dd1";
77
+ readonly review: "#078543";
78
+ readonly reviewInk: "#006121";
79
+ readonly onboardingSoft: "rgba(152, 0, 153, 0.12)";
80
+ readonly executeSoft: "rgba(91, 55, 218, 0.12)";
81
+ readonly reviewSoft: "rgba(7, 133, 67, 0.12)";
82
+ };
83
+ readonly data: {
84
+ readonly "1": "#3730a3";
85
+ readonly "2": "#a16207";
86
+ readonly "3": "#075985";
87
+ readonly "4": "#1c9002";
88
+ readonly "5": "#db2777";
89
+ readonly other: "#71717a";
90
+ };
91
+ readonly node: {
92
+ readonly purple: "#7150b3";
93
+ readonly purpleInk: "#573394";
94
+ readonly cyan: "#166b80";
95
+ readonly cyanInk: "#004f62";
96
+ readonly green: "#2c7046";
97
+ readonly greenInk: "#05532b";
98
+ readonly amber: "#865a28";
99
+ readonly amberInk: "#683e03";
100
+ readonly rose: "#984a55";
101
+ readonly roseInk: "#7a2f3c";
102
+ readonly blue: "#4062a7";
103
+ readonly blueInk: "#264588";
104
+ readonly purpleFill: "rgba(113, 80, 179, 0.12)";
105
+ readonly purpleLine: "rgba(113, 80, 179, 0.38)";
106
+ readonly purpleHalo: "rgba(113, 80, 179, 0.16)";
107
+ readonly cyanFill: "rgba(22, 107, 128, 0.12)";
108
+ readonly cyanLine: "rgba(22, 107, 128, 0.38)";
109
+ readonly cyanHalo: "rgba(22, 107, 128, 0.16)";
110
+ readonly greenFill: "rgba(44, 112, 70, 0.12)";
111
+ readonly greenLine: "rgba(44, 112, 70, 0.38)";
112
+ readonly greenHalo: "rgba(44, 112, 70, 0.16)";
113
+ readonly amberFill: "rgba(134, 90, 40, 0.12)";
114
+ readonly amberLine: "rgba(134, 90, 40, 0.38)";
115
+ readonly amberHalo: "rgba(134, 90, 40, 0.16)";
116
+ readonly roseFill: "rgba(152, 74, 85, 0.12)";
117
+ readonly roseLine: "rgba(152, 74, 85, 0.38)";
118
+ readonly roseHalo: "rgba(152, 74, 85, 0.16)";
119
+ readonly blueFill: "rgba(64, 98, 167, 0.12)";
120
+ readonly blueLine: "rgba(64, 98, 167, 0.38)";
121
+ readonly blueHalo: "rgba(64, 98, 167, 0.16)";
122
+ };
123
+ readonly scrollbar: "rgba(9, 9, 11, 0.2)";
124
+ readonly scrollbarHover: "rgba(9, 9, 11, 0.32)";
125
+ };
126
+ readonly shadow: {
127
+ readonly xs: "0 1px 2px rgba(9, 9, 11, 0.06)";
128
+ readonly sm: "0 2px 8px rgba(9, 9, 11, 0.07)";
129
+ readonly md: "0 4px 12px rgba(9, 9, 11, 0.08), 0 1px 3px rgba(9, 9, 11, 0.06)";
130
+ readonly lg: "0 8px 24px rgba(9, 9, 11, 0.12)";
131
+ readonly xl: "0 16px 40px rgba(9, 9, 11, 0.16), 0 2px 8px rgba(9, 9, 11, 0.08)";
132
+ readonly sheet: "-16px 0 40px rgba(9, 9, 11, 0.16), -2px 0 8px rgba(9, 9, 11, 0.08)";
133
+ readonly "2xl": "0 16px 64px rgba(9, 9, 11, 0.20)";
134
+ readonly card: "0 8px 24px rgba(9, 9, 11, 0.07)";
135
+ readonly rimLit: "0 4px 24px rgba(9, 9, 11, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6)";
136
+ readonly hairline: "none";
137
+ readonly focus: "0 0 0 2px var(--color-surface-background), 0 0 0 4px var(--color-focus)";
138
+ readonly selection: "inset 0 0 0 2px var(--color-brand-accent)";
139
+ readonly glow: "0 4px 24px rgba(84, 105, 212, 0.22)";
140
+ };
141
+ };
142
+ readonly dark: {
143
+ readonly color: {
144
+ readonly surface: {
145
+ readonly background: "#15171c";
146
+ readonly subtle: "#1c1e24";
147
+ readonly muted: "#1c1e24";
148
+ readonly elevated: "#22252b";
149
+ readonly topbar: "#15171c";
150
+ readonly topbarLift: "#1c1e24";
151
+ readonly topbarActive: "#22252b";
152
+ readonly hover: "rgba(255, 255, 255, 0.05)";
153
+ readonly pressed: "rgba(255, 255, 255, 0.08)";
154
+ readonly inset: "rgba(255, 255, 255, 0.05)";
155
+ readonly glass: "rgba(28, 30, 36, 0.90)";
156
+ readonly scrim: "rgba(0, 0, 0, 0.6)";
157
+ readonly veil: "rgba(21, 23, 28, 0.72)";
158
+ readonly inverse: "#ffffff";
159
+ };
160
+ readonly text: {
161
+ readonly primary: "#fafafa";
162
+ readonly secondary: "#c9ced8";
163
+ readonly tertiary: "#95a2b6";
164
+ readonly muted: "#686b70";
165
+ readonly onBrand: "#000000";
166
+ readonly onAccent: "#ffffff";
167
+ readonly inverse: "#09090b";
168
+ };
169
+ readonly brand: {
170
+ readonly primary: "#ffffff";
171
+ readonly primaryHover: "rgba(255, 255, 255, 0.9)";
172
+ readonly primaryActive: "rgba(255, 255, 255, 0.82)";
173
+ readonly accentInk: "#8b9ff5";
174
+ readonly accentSoft: "rgba(84, 105, 212, 0.18)";
175
+ };
176
+ readonly border: {
177
+ readonly default: "#3f4145";
178
+ readonly hover: "#4a4d52";
179
+ readonly strong: "#4a4d52";
180
+ readonly strongHover: "#5a5e65";
181
+ readonly control: "#7f848e";
182
+ };
183
+ readonly focus: "#8b9ff5";
184
+ readonly feedback: {
185
+ readonly success: "#14b8a6";
186
+ readonly successInk: "#5eead4";
187
+ readonly warning: "#f59e0b";
188
+ readonly warningInk: "#fde68a";
189
+ readonly danger: "#dc2626";
190
+ readonly dangerHover: "#b91c1c";
191
+ readonly dangerInk: "#fca5a5";
192
+ readonly info: "#38bdf8";
193
+ readonly infoInk: "#7dd3fc";
194
+ readonly successSoft: "rgba(20, 184, 166, 0.12)";
195
+ readonly successLine: "rgba(20, 184, 166, 0.3)";
196
+ readonly warningSoft: "rgba(245, 158, 11, 0.12)";
197
+ readonly warningLine: "rgba(245, 158, 11, 0.3)";
198
+ readonly dangerSoft: "rgba(220, 38, 38, 0.12)";
199
+ readonly dangerLine: "rgba(220, 38, 38, 0.3)";
200
+ readonly infoSoft: "rgba(56, 189, 248, 0.12)";
201
+ readonly infoLine: "rgba(56, 189, 248, 0.3)";
202
+ };
203
+ readonly phase: {
204
+ readonly onboarding: "#f77ae9";
205
+ readonly onboardingInk: "#ff82f1";
206
+ readonly execute: "#ac6bff";
207
+ readonly executeInk: "#d697ff";
208
+ readonly review: "#00a24f";
209
+ readonly reviewInk: "#46c872";
210
+ readonly onboardingSoft: "rgba(247, 122, 233, 0.12)";
211
+ readonly executeSoft: "rgba(172, 107, 255, 0.12)";
212
+ readonly reviewSoft: "rgba(0, 162, 79, 0.12)";
213
+ };
214
+ readonly data: {
215
+ readonly "1": "#a5b4fc";
216
+ readonly "2": "#facc15";
217
+ readonly "3": "#38bdf8";
218
+ readonly "4": "#86efac";
219
+ readonly "5": "#ec4899";
220
+ readonly other: "#71717a";
221
+ };
222
+ readonly node: {
223
+ readonly purple: "#8e6ed4";
224
+ readonly purpleInk: "#cabae0";
225
+ readonly cyan: "#5ca8be";
226
+ readonly cyanInk: "#b3d7e0";
227
+ readonly green: "#62a578";
228
+ readonly greenInk: "#b8d8c0";
229
+ readonly amber: "#c89866";
230
+ readonly amberInk: "#e0c89e";
231
+ readonly rose: "#c8757f";
232
+ readonly roseInk: "#e0bfc4";
233
+ readonly blue: "#5b7fc7";
234
+ readonly blueInk: "#b9c5e0";
235
+ readonly purpleFill: "rgba(142, 110, 212, 0.12)";
236
+ readonly purpleLine: "rgba(142, 110, 212, 0.38)";
237
+ readonly purpleHalo: "rgba(142, 110, 212, 0.16)";
238
+ readonly cyanFill: "rgba(92, 168, 190, 0.12)";
239
+ readonly cyanLine: "rgba(92, 168, 190, 0.38)";
240
+ readonly cyanHalo: "rgba(92, 168, 190, 0.16)";
241
+ readonly greenFill: "rgba(98, 165, 120, 0.12)";
242
+ readonly greenLine: "rgba(98, 165, 120, 0.38)";
243
+ readonly greenHalo: "rgba(98, 165, 120, 0.16)";
244
+ readonly amberFill: "rgba(200, 152, 102, 0.12)";
245
+ readonly amberLine: "rgba(200, 152, 102, 0.38)";
246
+ readonly amberHalo: "rgba(200, 152, 102, 0.16)";
247
+ readonly roseFill: "rgba(200, 117, 127, 0.12)";
248
+ readonly roseLine: "rgba(200, 117, 127, 0.38)";
249
+ readonly roseHalo: "rgba(200, 117, 127, 0.16)";
250
+ readonly blueFill: "rgba(91, 127, 199, 0.12)";
251
+ readonly blueLine: "rgba(91, 127, 199, 0.38)";
252
+ readonly blueHalo: "rgba(91, 127, 199, 0.16)";
253
+ };
254
+ readonly scrollbar: "rgba(255, 255, 255, 0.16)";
255
+ readonly scrollbarHover: "rgba(255, 255, 255, 0.26)";
256
+ };
257
+ readonly shadow: {
258
+ readonly xs: "0 1px 2px rgba(0, 0, 0, 0.2)";
259
+ readonly sm: "0 2px 8px rgba(0, 0, 0, 0.15)";
260
+ readonly md: "0 4px 12px rgba(0, 0, 0, 0.25)";
261
+ readonly lg: "0 8px 24px rgba(0, 0, 0, 0.3)";
262
+ readonly xl: "0 12px 32px rgba(0, 0, 0, 0.4)";
263
+ readonly sheet: "-8px 0 32px rgba(0, 0, 0, 0.4)";
264
+ readonly "2xl": "0 16px 64px rgba(0, 0, 0, 0.6)";
265
+ readonly card: "0 8px 24px rgba(0, 0, 0, 0.1)";
266
+ readonly rimLit: "0 4px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04)";
267
+ readonly hairline: "inset 0 1px 0 rgba(255, 255, 255, 0.04)";
268
+ readonly focus: "0 0 0 2px var(--color-surface-background), 0 0 0 4px var(--color-focus)";
269
+ readonly selection: "inset 0 0 0 2px var(--color-brand-accent)";
270
+ readonly glow: "0 4px 24px rgba(84, 105, 212, 0.3)";
271
+ };
272
+ };
273
+ };
274
+ export type ThemeName = keyof typeof themes;