@n8mills/design-tokens 1.0.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/DESIGN.md +429 -0
- package/LICENSE +21 -0
- package/README.md +126 -0
- package/components.css +943 -0
- package/design-system.md +466 -0
- package/package.json +58 -0
- package/tokens.css +498 -0
- package/tokens.d.ts +266 -0
- package/tokens.js +265 -0
- package/tokens.json +441 -0
package/tokens.d.ts
ADDED
|
@@ -0,0 +1,266 @@
|
|
|
1
|
+
/* @n8mills/design-tokens: design tokens for natemills.me.
|
|
2
|
+
GENERATED from tokens.css (built from tokens.json). Do not hand-edit.
|
|
3
|
+
Values are the default (light) theme, resolved to literals. Dark and
|
|
4
|
+
high-contrast theming live in tokens.css. */
|
|
5
|
+
|
|
6
|
+
export interface DesignTokens {
|
|
7
|
+
"neutral-0": string;
|
|
8
|
+
"neutral-50": string;
|
|
9
|
+
"neutral-100": string;
|
|
10
|
+
"neutral-150": string;
|
|
11
|
+
"neutral-200": string;
|
|
12
|
+
"neutral-300": string;
|
|
13
|
+
"neutral-400": string;
|
|
14
|
+
"neutral-500": string;
|
|
15
|
+
"neutral-550": string;
|
|
16
|
+
"neutral-600": string;
|
|
17
|
+
"neutral-700": string;
|
|
18
|
+
"neutral-800": string;
|
|
19
|
+
"neutral-850": string;
|
|
20
|
+
"neutral-900": string;
|
|
21
|
+
"neutral-950": string;
|
|
22
|
+
"green-50": string;
|
|
23
|
+
"green-100": string;
|
|
24
|
+
"green-200": string;
|
|
25
|
+
"green-300": string;
|
|
26
|
+
"green-400": string;
|
|
27
|
+
"green-500": string;
|
|
28
|
+
"green-550": string;
|
|
29
|
+
"green-600": string;
|
|
30
|
+
"green-700": string;
|
|
31
|
+
"green-800": string;
|
|
32
|
+
"green-900": string;
|
|
33
|
+
"green-950": string;
|
|
34
|
+
"brand-lime": string;
|
|
35
|
+
"brand-lime-rgb": string;
|
|
36
|
+
"brand-lime-dim": string;
|
|
37
|
+
"brand-lime-vivid": string;
|
|
38
|
+
"brand-ink": string;
|
|
39
|
+
"brand-ink-rgb": string;
|
|
40
|
+
"brand-on-lime": string;
|
|
41
|
+
"brand-on-ink": string;
|
|
42
|
+
"brand-gradient": string;
|
|
43
|
+
"ext-brand-anthropic-large": string;
|
|
44
|
+
"ext-brand-anthropic-body": string;
|
|
45
|
+
"ext-brand-linkedin": string;
|
|
46
|
+
"ext-brand-bupa-blue": string;
|
|
47
|
+
"ext-brand-bupa-blue-dark": string;
|
|
48
|
+
"ext-brand-bupa-blue-subtle": string;
|
|
49
|
+
"fx-glitch-magenta": string;
|
|
50
|
+
"fx-glitch-cyan": string;
|
|
51
|
+
"color-bg": string;
|
|
52
|
+
"color-surface": string;
|
|
53
|
+
"color-surface-sunken": string;
|
|
54
|
+
"color-surface-inverse": string;
|
|
55
|
+
"color-surface-inverse-sunken": string;
|
|
56
|
+
"color-text-primary": string;
|
|
57
|
+
"color-text-secondary": string;
|
|
58
|
+
"color-text-tertiary": string;
|
|
59
|
+
"color-border": string;
|
|
60
|
+
"color-border-strong": string;
|
|
61
|
+
"color-border-brand": string;
|
|
62
|
+
"color-border-hover": string;
|
|
63
|
+
"color-accent": string;
|
|
64
|
+
"color-accent-hover": string;
|
|
65
|
+
"color-accent-subtle": string;
|
|
66
|
+
"color-on-accent": string;
|
|
67
|
+
"color-focus-ring": string;
|
|
68
|
+
"color-link": string;
|
|
69
|
+
"color-link-hover": string;
|
|
70
|
+
"color-on-ink-emphasis": string;
|
|
71
|
+
"color-on-ink-primary": string;
|
|
72
|
+
"color-on-ink-secondary": string;
|
|
73
|
+
"color-on-ink-muted": string;
|
|
74
|
+
"color-on-ink-border": string;
|
|
75
|
+
"color-on-ink-subtle": string;
|
|
76
|
+
"color-static-white": string;
|
|
77
|
+
"color-static-white-hover": string;
|
|
78
|
+
"color-accent-emphasis": string;
|
|
79
|
+
"color-dot-inactive": string;
|
|
80
|
+
"color-dot-active": string;
|
|
81
|
+
"color-text-muted-emphasis": string;
|
|
82
|
+
"color-on-ink-hover": string;
|
|
83
|
+
"color-overlay-soft": string;
|
|
84
|
+
"color-overlay-base": string;
|
|
85
|
+
"color-overlay-strong": string;
|
|
86
|
+
"font-display": string;
|
|
87
|
+
"font-body": string;
|
|
88
|
+
"font-mono": string;
|
|
89
|
+
"font-serif": string;
|
|
90
|
+
"font-feature-mono": string;
|
|
91
|
+
"size-2xs": string;
|
|
92
|
+
"size-xs": string;
|
|
93
|
+
"size-sm": string;
|
|
94
|
+
"size-base": string;
|
|
95
|
+
"size-lg": string;
|
|
96
|
+
"size-xl": string;
|
|
97
|
+
"size-2xl": string;
|
|
98
|
+
"size-3xl": string;
|
|
99
|
+
"text-h1": string;
|
|
100
|
+
"text-h2": string;
|
|
101
|
+
"text-body": string;
|
|
102
|
+
"text-label": string;
|
|
103
|
+
"text-caption": string;
|
|
104
|
+
"text-meta": string;
|
|
105
|
+
"text-nav": string;
|
|
106
|
+
"display-hero": string;
|
|
107
|
+
"display-section": string;
|
|
108
|
+
"display-card-title": string;
|
|
109
|
+
"display-stat-num": string;
|
|
110
|
+
"display-intro": string;
|
|
111
|
+
"display-tight": string;
|
|
112
|
+
"display-weight": string;
|
|
113
|
+
"display-quote": string;
|
|
114
|
+
"measure": string;
|
|
115
|
+
"btn-sm": string;
|
|
116
|
+
"btn-md": string;
|
|
117
|
+
"btn-lg": string;
|
|
118
|
+
"btn-pad-x": string;
|
|
119
|
+
"btn-pad-y": string;
|
|
120
|
+
"btn-gap": string;
|
|
121
|
+
"btn-radius": string;
|
|
122
|
+
"btn-font": string;
|
|
123
|
+
"btn-font-size": string;
|
|
124
|
+
"btn-font-weight": string;
|
|
125
|
+
"btn-glyph": string;
|
|
126
|
+
"btn-glyph-sm": string;
|
|
127
|
+
"btn-glyph-lg": string;
|
|
128
|
+
"btn-transition": string;
|
|
129
|
+
"btn-focus-ring": string;
|
|
130
|
+
"btn-primary-bg": string;
|
|
131
|
+
"btn-primary-fg": string;
|
|
132
|
+
"btn-primary-border": string;
|
|
133
|
+
"btn-primary-bg-hover": string;
|
|
134
|
+
"btn-primary-fg-hover": string;
|
|
135
|
+
"btn-secondary-fg": string;
|
|
136
|
+
"btn-secondary-border": string;
|
|
137
|
+
"btn-secondary-bg-hover": string;
|
|
138
|
+
"btn-secondary-border-hover": string;
|
|
139
|
+
"btn-icon-border": string;
|
|
140
|
+
"btn-icon-fg": string;
|
|
141
|
+
"card-radius": string;
|
|
142
|
+
"card-padding": string;
|
|
143
|
+
"card-border": string;
|
|
144
|
+
"card-bg": string;
|
|
145
|
+
"card-fg": string;
|
|
146
|
+
"card-dark-bg": string;
|
|
147
|
+
"card-dark-fg": string;
|
|
148
|
+
"card-dark-border": string;
|
|
149
|
+
"chip-pad-x": string;
|
|
150
|
+
"chip-pad-y": string;
|
|
151
|
+
"chip-gap": string;
|
|
152
|
+
"chip-icon-size": string;
|
|
153
|
+
"chip-radius": string;
|
|
154
|
+
"chip-font": string;
|
|
155
|
+
"chip-font-size": string;
|
|
156
|
+
"chip-font-weight": string;
|
|
157
|
+
"chip-line": string;
|
|
158
|
+
"chip-fg": string;
|
|
159
|
+
"chip-bg": string;
|
|
160
|
+
"chip-border": string;
|
|
161
|
+
"chip-border-hover": string;
|
|
162
|
+
"badge-pad-x": string;
|
|
163
|
+
"badge-pad-y": string;
|
|
164
|
+
"badge-gap": string;
|
|
165
|
+
"badge-radius": string;
|
|
166
|
+
"badge-font": string;
|
|
167
|
+
"badge-font-size": string;
|
|
168
|
+
"badge-font-weight": string;
|
|
169
|
+
"badge-icon-size": string;
|
|
170
|
+
"badge-dot-size": string;
|
|
171
|
+
"badge-fg": string;
|
|
172
|
+
"badge-border": string;
|
|
173
|
+
"badge-dot": string;
|
|
174
|
+
"line-display": string;
|
|
175
|
+
"line-heading": string;
|
|
176
|
+
"line-title": string;
|
|
177
|
+
"line-snug": string;
|
|
178
|
+
"line-body": string;
|
|
179
|
+
"weight-regular": string;
|
|
180
|
+
"weight-medium": string;
|
|
181
|
+
"weight-semibold": string;
|
|
182
|
+
"weight-bold": string;
|
|
183
|
+
"weight-extrabold": string;
|
|
184
|
+
"tracking-tight": string;
|
|
185
|
+
"tracking-normal": string;
|
|
186
|
+
"tracking-wide": string;
|
|
187
|
+
"tracking-mono": string;
|
|
188
|
+
"tracking-eyebrow": string;
|
|
189
|
+
"tracking-label": string;
|
|
190
|
+
"space-1": string;
|
|
191
|
+
"space-2": string;
|
|
192
|
+
"space-3": string;
|
|
193
|
+
"space-4": string;
|
|
194
|
+
"space-5": string;
|
|
195
|
+
"space-6": string;
|
|
196
|
+
"space-7": string;
|
|
197
|
+
"space-8": string;
|
|
198
|
+
"space-9": string;
|
|
199
|
+
"space-10": string;
|
|
200
|
+
"space-11": string;
|
|
201
|
+
"space-12": string;
|
|
202
|
+
"section-padding": string;
|
|
203
|
+
"card-pad-compact": string;
|
|
204
|
+
"card-pad-standard": string;
|
|
205
|
+
"card-pad-spacious": string;
|
|
206
|
+
"duration-fast": string;
|
|
207
|
+
"duration-base": string;
|
|
208
|
+
"duration-slow": string;
|
|
209
|
+
"duration-expressive": string;
|
|
210
|
+
"ease-default": string;
|
|
211
|
+
"ease-entrance": string;
|
|
212
|
+
"ease-exit": string;
|
|
213
|
+
"ease-emphasized": string;
|
|
214
|
+
"ease-linear": string;
|
|
215
|
+
"motion-reveal-rise": string;
|
|
216
|
+
"motion-reveal-shift": string;
|
|
217
|
+
"motion-reveal-scale": string;
|
|
218
|
+
"motion-reveal-slide": string;
|
|
219
|
+
"motion-reveal-stagger": string;
|
|
220
|
+
"radius-none": string;
|
|
221
|
+
"radius-sm": string;
|
|
222
|
+
"radius-md": string;
|
|
223
|
+
"radius-lg": string;
|
|
224
|
+
"radius-xl": string;
|
|
225
|
+
"radius-full": string;
|
|
226
|
+
"border-hairline": string;
|
|
227
|
+
"border-strong": string;
|
|
228
|
+
"border-focus": string;
|
|
229
|
+
"focus-ring-offset": string;
|
|
230
|
+
"container-base": string;
|
|
231
|
+
"container-wide": string;
|
|
232
|
+
"bp-mobile": string;
|
|
233
|
+
"bp-tablet": string;
|
|
234
|
+
"bp-desktop": string;
|
|
235
|
+
"bp-wide": string;
|
|
236
|
+
"bp-ultrawide": string;
|
|
237
|
+
"touch-target-min": string;
|
|
238
|
+
"touch-target-dot": string;
|
|
239
|
+
"z-base": string;
|
|
240
|
+
"z-dropdown": string;
|
|
241
|
+
"z-sticky": string;
|
|
242
|
+
"z-overlay": string;
|
|
243
|
+
"z-modal": string;
|
|
244
|
+
"z-tooltip": string;
|
|
245
|
+
"z-toast": string;
|
|
246
|
+
"z-skip-link": string;
|
|
247
|
+
"shadow-none": string;
|
|
248
|
+
"shadow-soft": string;
|
|
249
|
+
"shadow-lift": string;
|
|
250
|
+
"shadow-modal": string;
|
|
251
|
+
"accent-period-shadow": string;
|
|
252
|
+
"accent-dot-shadow": string;
|
|
253
|
+
"glass-tint": string;
|
|
254
|
+
"glass-edge-top": string;
|
|
255
|
+
"glass-edge-bottom": string;
|
|
256
|
+
"glass-specular": string;
|
|
257
|
+
"glass-shadow": string;
|
|
258
|
+
"glass-blur": string;
|
|
259
|
+
"glass-blur-webkit": string;
|
|
260
|
+
"glass-saturate": string;
|
|
261
|
+
"glass-dim": string;
|
|
262
|
+
"glass-dim-scrolled": string;
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
export declare const tokens: DesignTokens;
|
|
266
|
+
export default tokens;
|
package/tokens.js
ADDED
|
@@ -0,0 +1,265 @@
|
|
|
1
|
+
/* @n8mills/design-tokens: design tokens for natemills.me.
|
|
2
|
+
GENERATED from tokens.css (built from tokens.json). Do not hand-edit.
|
|
3
|
+
Values are the default (light) theme, resolved to literals. Dark and
|
|
4
|
+
high-contrast theming live in tokens.css. */
|
|
5
|
+
|
|
6
|
+
export const tokens = {
|
|
7
|
+
"neutral-0": "#ffffff",
|
|
8
|
+
"neutral-50": "#fafafa",
|
|
9
|
+
"neutral-100": "#f5f5f5",
|
|
10
|
+
"neutral-150": "#f4f4f5",
|
|
11
|
+
"neutral-200": "#ececec",
|
|
12
|
+
"neutral-300": "#e4e4e7",
|
|
13
|
+
"neutral-400": "#d4d4d8",
|
|
14
|
+
"neutral-500": "#a1a1aa",
|
|
15
|
+
"neutral-550": "#909096",
|
|
16
|
+
"neutral-600": "#67676f",
|
|
17
|
+
"neutral-700": "#3f3f46",
|
|
18
|
+
"neutral-800": "#27272a",
|
|
19
|
+
"neutral-850": "#1c1c1f",
|
|
20
|
+
"neutral-900": "#141416",
|
|
21
|
+
"neutral-950": "#0a0a0b",
|
|
22
|
+
"green-50": "#faffeb",
|
|
23
|
+
"green-100": "#f5ffd6",
|
|
24
|
+
"green-200": "#ecffad",
|
|
25
|
+
"green-300": "#e2ff85",
|
|
26
|
+
"green-400": "#daff61",
|
|
27
|
+
"green-500": "#d2ff37",
|
|
28
|
+
"green-550": "#c0fa00",
|
|
29
|
+
"green-600": "#b8e030",
|
|
30
|
+
"green-700": "#8db800",
|
|
31
|
+
"green-800": "#5e7a00",
|
|
32
|
+
"green-900": "#2f3d00",
|
|
33
|
+
"green-950": "#171f00",
|
|
34
|
+
"brand-lime": "#d2ff37",
|
|
35
|
+
"brand-lime-rgb": "210 255 55",
|
|
36
|
+
"brand-lime-dim": "#b8e030",
|
|
37
|
+
"brand-lime-vivid": "#eeff00",
|
|
38
|
+
"brand-ink": "#1c1c1f",
|
|
39
|
+
"brand-ink-rgb": "28 28 31",
|
|
40
|
+
"brand-on-lime": "#1c1c1f",
|
|
41
|
+
"brand-on-ink": "#d2ff37",
|
|
42
|
+
"brand-gradient": "linear-gradient(135deg, #d2ff37 0%, #eeff00 100%)",
|
|
43
|
+
"ext-brand-anthropic-large": "#d97757",
|
|
44
|
+
"ext-brand-anthropic-body": "#b85033",
|
|
45
|
+
"ext-brand-linkedin": "#0a66c2",
|
|
46
|
+
"ext-brand-bupa-blue": "#0079c8",
|
|
47
|
+
"ext-brand-bupa-blue-dark": "#00609f",
|
|
48
|
+
"ext-brand-bupa-blue-subtle": "#e6f2fa",
|
|
49
|
+
"fx-glitch-magenta": "#ff2bd6",
|
|
50
|
+
"fx-glitch-cyan": "#00d4ff",
|
|
51
|
+
"color-bg": "#f5f5f5",
|
|
52
|
+
"color-surface": "#ffffff",
|
|
53
|
+
"color-surface-sunken": "#ececec",
|
|
54
|
+
"color-surface-inverse": "#0a0a0b",
|
|
55
|
+
"color-surface-inverse-sunken": "#141416",
|
|
56
|
+
"color-text-primary": "#0a0a0b",
|
|
57
|
+
"color-text-secondary": "#3f3f46",
|
|
58
|
+
"color-text-tertiary": "#67676f",
|
|
59
|
+
"color-border": "#e4e4e7",
|
|
60
|
+
"color-border-strong": "#d4d4d8",
|
|
61
|
+
"color-border-brand": "#d2ff37",
|
|
62
|
+
"color-border-hover": "#1c1c1f",
|
|
63
|
+
"color-accent": "#1c1c1f",
|
|
64
|
+
"color-accent-hover": "#0a0a0b",
|
|
65
|
+
"color-accent-subtle": "#f4f4f5",
|
|
66
|
+
"color-on-accent": "#ffffff",
|
|
67
|
+
"color-focus-ring": "#1c1c1f",
|
|
68
|
+
"color-link": "#1c1c1f",
|
|
69
|
+
"color-link-hover": "#0a0a0b",
|
|
70
|
+
"color-on-ink-emphasis": "#ffffff",
|
|
71
|
+
"color-on-ink-primary": "rgba(255, 255, 255, 0.88)",
|
|
72
|
+
"color-on-ink-secondary": "rgba(255, 255, 255, 0.66)",
|
|
73
|
+
"color-on-ink-muted": "rgba(255, 255, 255, 0.4)",
|
|
74
|
+
"color-on-ink-border": "rgba(255, 255, 255, 0.08)",
|
|
75
|
+
"color-on-ink-subtle": "#fafafa",
|
|
76
|
+
"color-static-white": "#ffffff",
|
|
77
|
+
"color-static-white-hover": "#ececec",
|
|
78
|
+
"color-accent-emphasis": "#1c1c1f",
|
|
79
|
+
"color-dot-inactive": "#67676f",
|
|
80
|
+
"color-dot-active": "#1c1c1f",
|
|
81
|
+
"color-text-muted-emphasis": "rgb(28 28 31 / 0.55)",
|
|
82
|
+
"color-on-ink-hover": "rgba(255, 255, 255, 0.18)",
|
|
83
|
+
"color-overlay-soft": "rgba(0, 0, 0, 0.35)",
|
|
84
|
+
"color-overlay-base": "rgba(0, 0, 0, 0.62)",
|
|
85
|
+
"color-overlay-strong": "rgba(0, 0, 0, 0.88)",
|
|
86
|
+
"font-display": "\"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
|
|
87
|
+
"font-body": "\"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif",
|
|
88
|
+
"font-mono": "\"JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace",
|
|
89
|
+
"font-serif": "\"PT Serif\", Georgia, serif",
|
|
90
|
+
"font-feature-mono": "\"zero\" 1",
|
|
91
|
+
"size-2xs": "11px",
|
|
92
|
+
"size-xs": "12px",
|
|
93
|
+
"size-sm": "14px",
|
|
94
|
+
"size-base": "16px",
|
|
95
|
+
"size-lg": "18px",
|
|
96
|
+
"size-xl": "24px",
|
|
97
|
+
"size-2xl": "32px",
|
|
98
|
+
"size-3xl": "48px",
|
|
99
|
+
"text-h1": "clamp(34px, 5.8vw, 72px)",
|
|
100
|
+
"text-h2": "clamp(22px, 4vw, 32px)",
|
|
101
|
+
"text-body": "16px",
|
|
102
|
+
"text-label": "11px",
|
|
103
|
+
"text-caption": "12px",
|
|
104
|
+
"text-meta": "13px",
|
|
105
|
+
"text-nav": "11px",
|
|
106
|
+
"display-hero": "clamp(40px, 9vw, 118px)",
|
|
107
|
+
"display-section": "clamp(28px, 5.8vw, 72px)",
|
|
108
|
+
"display-card-title": "clamp(22px, 4vw, 44px)",
|
|
109
|
+
"display-stat-num": "clamp(40px, 7vw, 88px)",
|
|
110
|
+
"display-intro": "clamp(20px, 5vw, 24px)",
|
|
111
|
+
"display-tight": "-0.04em",
|
|
112
|
+
"display-weight": "600",
|
|
113
|
+
"display-quote": "clamp(96px, 12vw, 140px)",
|
|
114
|
+
"measure": "52ch",
|
|
115
|
+
"btn-sm": "32px",
|
|
116
|
+
"btn-md": "44px",
|
|
117
|
+
"btn-lg": "52px",
|
|
118
|
+
"btn-pad-x": "18px",
|
|
119
|
+
"btn-pad-y": "10px",
|
|
120
|
+
"btn-gap": "8px",
|
|
121
|
+
"btn-radius": "999px",
|
|
122
|
+
"btn-font": "\"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif",
|
|
123
|
+
"btn-font-size": "14px",
|
|
124
|
+
"btn-font-weight": "600",
|
|
125
|
+
"btn-glyph": "16px",
|
|
126
|
+
"btn-glyph-sm": "14px",
|
|
127
|
+
"btn-glyph-lg": "18px",
|
|
128
|
+
"btn-transition": "background 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1)",
|
|
129
|
+
"btn-focus-ring": "#1c1c1f",
|
|
130
|
+
"btn-primary-bg": "#d2ff37",
|
|
131
|
+
"btn-primary-fg": "#1c1c1f",
|
|
132
|
+
"btn-primary-border": "#d2ff37",
|
|
133
|
+
"btn-primary-bg-hover": "#1c1c1f",
|
|
134
|
+
"btn-primary-fg-hover": "#d2ff37",
|
|
135
|
+
"btn-secondary-fg": "#0a0a0b",
|
|
136
|
+
"btn-secondary-border": "#67676f",
|
|
137
|
+
"btn-secondary-bg-hover": "#ececec",
|
|
138
|
+
"btn-secondary-border-hover": "#0a0a0b",
|
|
139
|
+
"btn-icon-border": "#67676f",
|
|
140
|
+
"btn-icon-fg": "#3f3f46",
|
|
141
|
+
"card-radius": "14px",
|
|
142
|
+
"card-padding": "24px",
|
|
143
|
+
"card-border": "1px solid #e4e4e7",
|
|
144
|
+
"card-bg": "#ffffff",
|
|
145
|
+
"card-fg": "#0a0a0b",
|
|
146
|
+
"card-dark-bg": "#1c1c1f",
|
|
147
|
+
"card-dark-fg": "rgba(255, 255, 255, 0.88)",
|
|
148
|
+
"card-dark-border": "rgba(255, 255, 255, 0.08)",
|
|
149
|
+
"chip-pad-x": "10px",
|
|
150
|
+
"chip-pad-y": "4px",
|
|
151
|
+
"chip-gap": "8px",
|
|
152
|
+
"chip-icon-size": "14px",
|
|
153
|
+
"chip-radius": "999px",
|
|
154
|
+
"chip-font": "\"JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace",
|
|
155
|
+
"chip-font-size": "11px",
|
|
156
|
+
"chip-font-weight": "500",
|
|
157
|
+
"chip-line": "1.4",
|
|
158
|
+
"chip-fg": "#0a0a0b",
|
|
159
|
+
"chip-bg": "#ececec",
|
|
160
|
+
"chip-border": "#e4e4e7",
|
|
161
|
+
"chip-border-hover": "#d4d4d8",
|
|
162
|
+
"badge-pad-x": "12px",
|
|
163
|
+
"badge-pad-y": "4px",
|
|
164
|
+
"badge-gap": "8px",
|
|
165
|
+
"badge-radius": "999px",
|
|
166
|
+
"badge-font": "\"JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace",
|
|
167
|
+
"badge-font-size": "11px",
|
|
168
|
+
"badge-font-weight": "500",
|
|
169
|
+
"badge-icon-size": "14px",
|
|
170
|
+
"badge-dot-size": "6px",
|
|
171
|
+
"badge-fg": "#3f3f46",
|
|
172
|
+
"badge-border": "#e4e4e7",
|
|
173
|
+
"badge-dot": "#d2ff37",
|
|
174
|
+
"line-display": "1.05",
|
|
175
|
+
"line-heading": "1.15",
|
|
176
|
+
"line-title": "1.25",
|
|
177
|
+
"line-snug": "1.45",
|
|
178
|
+
"line-body": "1.5",
|
|
179
|
+
"weight-regular": "400",
|
|
180
|
+
"weight-medium": "500",
|
|
181
|
+
"weight-semibold": "600",
|
|
182
|
+
"weight-bold": "700",
|
|
183
|
+
"weight-extrabold": "800",
|
|
184
|
+
"tracking-tight": "-0.02em",
|
|
185
|
+
"tracking-normal": "0",
|
|
186
|
+
"tracking-wide": "0.02em",
|
|
187
|
+
"tracking-mono": "0.01em",
|
|
188
|
+
"tracking-eyebrow": "0.18em",
|
|
189
|
+
"tracking-label": "0.08em",
|
|
190
|
+
"space-1": "4px",
|
|
191
|
+
"space-2": "8px",
|
|
192
|
+
"space-3": "12px",
|
|
193
|
+
"space-4": "16px",
|
|
194
|
+
"space-5": "24px",
|
|
195
|
+
"space-6": "32px",
|
|
196
|
+
"space-7": "48px",
|
|
197
|
+
"space-8": "64px",
|
|
198
|
+
"space-9": "96px",
|
|
199
|
+
"space-10": "128px",
|
|
200
|
+
"space-11": "192px",
|
|
201
|
+
"space-12": "256px",
|
|
202
|
+
"section-padding": "clamp(96px, 12vw, 128px)",
|
|
203
|
+
"card-pad-compact": "16px",
|
|
204
|
+
"card-pad-standard": "24px",
|
|
205
|
+
"card-pad-spacious": "32px",
|
|
206
|
+
"duration-fast": "150ms",
|
|
207
|
+
"duration-base": "220ms",
|
|
208
|
+
"duration-slow": "400ms",
|
|
209
|
+
"duration-expressive": "1300ms",
|
|
210
|
+
"ease-default": "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
211
|
+
"ease-entrance": "cubic-bezier(0, 0, 0.2, 1)",
|
|
212
|
+
"ease-exit": "cubic-bezier(0.4, 0, 1, 1)",
|
|
213
|
+
"ease-emphasized": "cubic-bezier(0.16, 1, 0.3, 1)",
|
|
214
|
+
"ease-linear": "cubic-bezier(0, 0, 1, 1)",
|
|
215
|
+
"motion-reveal-rise": "64px",
|
|
216
|
+
"motion-reveal-shift": "48px",
|
|
217
|
+
"motion-reveal-scale": "0.9",
|
|
218
|
+
"motion-reveal-slide": "80px",
|
|
219
|
+
"motion-reveal-stagger": "4%",
|
|
220
|
+
"radius-none": "0",
|
|
221
|
+
"radius-sm": "8px",
|
|
222
|
+
"radius-md": "10px",
|
|
223
|
+
"radius-lg": "14px",
|
|
224
|
+
"radius-xl": "20px",
|
|
225
|
+
"radius-full": "999px",
|
|
226
|
+
"border-hairline": "1px solid #e4e4e7",
|
|
227
|
+
"border-strong": "1px solid #d4d4d8",
|
|
228
|
+
"border-focus": "2px solid #1c1c1f",
|
|
229
|
+
"focus-ring-offset": "2px",
|
|
230
|
+
"container-base": "960px",
|
|
231
|
+
"container-wide": "min(92vw, 1680px)",
|
|
232
|
+
"bp-mobile": "375px",
|
|
233
|
+
"bp-tablet": "768px",
|
|
234
|
+
"bp-desktop": "1024px",
|
|
235
|
+
"bp-wide": "1440px",
|
|
236
|
+
"bp-ultrawide": "1600px",
|
|
237
|
+
"touch-target-min": "44px",
|
|
238
|
+
"touch-target-dot": "24px",
|
|
239
|
+
"z-base": "0",
|
|
240
|
+
"z-dropdown": "1000",
|
|
241
|
+
"z-sticky": "1100",
|
|
242
|
+
"z-overlay": "1200",
|
|
243
|
+
"z-modal": "1300",
|
|
244
|
+
"z-tooltip": "1400",
|
|
245
|
+
"z-toast": "1500",
|
|
246
|
+
"z-skip-link": "1600",
|
|
247
|
+
"shadow-none": "none",
|
|
248
|
+
"shadow-soft": "0 1px 2px rgb(28 28 31 / 0.04), 0 1px 3px rgb(28 28 31 / 0.06)",
|
|
249
|
+
"shadow-lift": "0 4px 12px rgb(28 28 31 / 0.06), 0 2px 4px rgb(28 28 31 / 0.04)",
|
|
250
|
+
"shadow-modal": "0 24px 64px rgba(0, 0, 0, 0.5), 0 8px 16px rgba(0, 0, 0, 0.18)",
|
|
251
|
+
"accent-period-shadow": "0 1px 2px rgba(0,0,0,0.42), 0 0 0 1px rgba(0,0,0,0.18)",
|
|
252
|
+
"accent-dot-shadow": "0 1px 3px rgba(0,0,0,0.24)",
|
|
253
|
+
"glass-tint": "rgb(250 250 252 / 0.4)",
|
|
254
|
+
"glass-edge-top": "rgb(255 255 255 / 0.9)",
|
|
255
|
+
"glass-edge-bottom": "rgb(255 255 255 / 0.06)",
|
|
256
|
+
"glass-specular": "inset 0 1px 0 rgb(255 255 255 / 0.7)",
|
|
257
|
+
"glass-shadow": "0 10px 30px rgb(0 0 0 / 0.18)",
|
|
258
|
+
"glass-blur": "10px",
|
|
259
|
+
"glass-blur-webkit": "14px",
|
|
260
|
+
"glass-saturate": "170%",
|
|
261
|
+
"glass-dim": "1",
|
|
262
|
+
"glass-dim-scrolled": "1.15",
|
|
263
|
+
};
|
|
264
|
+
|
|
265
|
+
export default tokens;
|