@hanzo/design 0.1.0 → 0.2.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/README.md +24 -1
- package/dist/index.d.ts +21 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +46 -0
- package/dist/tokens.gen.d.ts +413 -0
- package/dist/tokens.gen.d.ts.map +1 -0
- package/dist/tokens.gen.js +414 -0
- package/package.json +19 -2
- package/src/index.ts +47 -0
- package/src/tokens.gen.ts +428 -0
|
@@ -0,0 +1,428 @@
|
|
|
1
|
+
// AUTO-GENERATED by scripts/gen-tokens.mjs from tokens/*.css — DO NOT EDIT.
|
|
2
|
+
// Edit the token in tokens/<group>.css and re-run `npm run gen`.
|
|
3
|
+
/* eslint-disable */
|
|
4
|
+
|
|
5
|
+
/** colors tokens (from tokens/colors.css). Values are raw CSS. */
|
|
6
|
+
export const colors = {
|
|
7
|
+
'neutral-50': '#FAFAFA',
|
|
8
|
+
'neutral-100': '#F5F5F5',
|
|
9
|
+
'neutral-200': '#E5E5E5',
|
|
10
|
+
'neutral-300': '#D4D4D4',
|
|
11
|
+
'neutral-400': '#A3A3A3',
|
|
12
|
+
'neutral-500': '#737373',
|
|
13
|
+
'neutral-600': '#525252',
|
|
14
|
+
'neutral-700': '#404040',
|
|
15
|
+
'neutral-800': '#262626',
|
|
16
|
+
'neutral-900': '#171717',
|
|
17
|
+
'neutral-950': '#0A0A0A',
|
|
18
|
+
'pure-black': '#000000',
|
|
19
|
+
'pure-white': '#FFFFFF',
|
|
20
|
+
'hanzo-black': '#0A0A0B',
|
|
21
|
+
'hanzo-white': '#FFFFFF',
|
|
22
|
+
'white-05': 'rgb(255 255 255 / .05)',
|
|
23
|
+
'white-10': 'rgb(255 255 255 / .10)',
|
|
24
|
+
'white-15': 'rgb(255 255 255 / .15)',
|
|
25
|
+
'white-20': 'rgb(255 255 255 / .20)',
|
|
26
|
+
'white-30': 'rgb(255 255 255 / .30)',
|
|
27
|
+
'white-40': 'rgb(255 255 255 / .40)',
|
|
28
|
+
'white-60': 'rgb(255 255 255 / .60)',
|
|
29
|
+
'white-80': 'rgb(255 255 255 / .80)',
|
|
30
|
+
'background': '#000000',
|
|
31
|
+
'foreground': '#ededed',
|
|
32
|
+
'card': '#0a0a0a',
|
|
33
|
+
'card-foreground': '#f5f5f5',
|
|
34
|
+
'popover': '#0a0a0a',
|
|
35
|
+
'popover-foreground': '#f5f5f5',
|
|
36
|
+
'primary': '#ffffff',
|
|
37
|
+
'primary-foreground': '#000000',
|
|
38
|
+
'secondary': '#1a1a1a',
|
|
39
|
+
'secondary-foreground': '#f5f5f5',
|
|
40
|
+
'muted': '#101010',
|
|
41
|
+
'muted-foreground': '#888888',
|
|
42
|
+
'accent': '#1a1a1a',
|
|
43
|
+
'accent-foreground': '#f5f5f5',
|
|
44
|
+
'destructive': '#666666',
|
|
45
|
+
'destructive-foreground': '#f5f5f5',
|
|
46
|
+
'border': '#1f1f1f',
|
|
47
|
+
'input': '#1f1f1f',
|
|
48
|
+
'ring': '#333333',
|
|
49
|
+
'brand': '#e4e4e7',
|
|
50
|
+
'brand-foreground': '#09090b',
|
|
51
|
+
'brand-muted': '#a3a3a3',
|
|
52
|
+
'black': '#000000',
|
|
53
|
+
'white': '#f5f5f5',
|
|
54
|
+
'surface-page': 'var(--background)',
|
|
55
|
+
'surface-card': 'rgb(23 23 23 / .5)',
|
|
56
|
+
'surface-card-emphasis': 'rgb(23 23 23 / .8)',
|
|
57
|
+
'surface-card-quiet': 'rgb(23 23 23 / .4)',
|
|
58
|
+
'surface-overlay': 'rgb(10 10 10 / .95)',
|
|
59
|
+
'surface-header': 'rgb(0 0 0 / .7)',
|
|
60
|
+
'border-hairline': 'var(--neutral-800)',
|
|
61
|
+
'border-card': 'var(--white-10)',
|
|
62
|
+
'border-strong': 'var(--neutral-700)',
|
|
63
|
+
'text-primary': 'var(--pure-white)',
|
|
64
|
+
'text-secondary': 'var(--white-80)',
|
|
65
|
+
'text-tertiary': 'var(--white-60)',
|
|
66
|
+
'text-helper': 'var(--muted-foreground)',
|
|
67
|
+
'text-disabled': 'var(--white-30)',
|
|
68
|
+
'state-error': '#ef4444',
|
|
69
|
+
'state-error-text': '#fca5a5',
|
|
70
|
+
'state-error-bg': 'rgb(239 68 68 / .1)',
|
|
71
|
+
'state-online': '#4ade80',
|
|
72
|
+
'state-success': '#22c55e',
|
|
73
|
+
'chrome-dot-red': 'rgb(239 68 68 / .6)',
|
|
74
|
+
'chrome-dot-yellow': 'rgb(234 179 8 / .6)',
|
|
75
|
+
'chrome-dot-green': 'rgb(34 197 94 / .6)',
|
|
76
|
+
} as const
|
|
77
|
+
|
|
78
|
+
/** typography tokens (from tokens/typography.css). Values are raw CSS. */
|
|
79
|
+
export const typography = {
|
|
80
|
+
'text-xs': '0.6875rem',
|
|
81
|
+
'leading-xs': '1rem',
|
|
82
|
+
'text-sm': '0.8125rem',
|
|
83
|
+
'leading-sm': '1.15rem',
|
|
84
|
+
'text-base': '0.875rem',
|
|
85
|
+
'leading-base': '1.35rem',
|
|
86
|
+
'text-lg': '0.9375rem',
|
|
87
|
+
'leading-lg': '1.4rem',
|
|
88
|
+
'text-xl': '1.0625rem',
|
|
89
|
+
'leading-xl': '1.55rem',
|
|
90
|
+
'text-2xl': '1.3125rem',
|
|
91
|
+
'leading-2xl': '1.7rem',
|
|
92
|
+
'text-3xl': '1.625rem',
|
|
93
|
+
'leading-3xl': '1.95rem',
|
|
94
|
+
'text-4xl': '2rem',
|
|
95
|
+
'leading-4xl': '2.25rem',
|
|
96
|
+
'text-5xl': '2.5rem',
|
|
97
|
+
'leading-5xl': '1.05',
|
|
98
|
+
'text-6xl': '3.25rem',
|
|
99
|
+
'leading-6xl': '1',
|
|
100
|
+
'text-7xl': '4rem',
|
|
101
|
+
'leading-7xl': '1',
|
|
102
|
+
'weight-normal': '400',
|
|
103
|
+
'weight-medium': '500',
|
|
104
|
+
'weight-semibold': '600',
|
|
105
|
+
'weight-bold': '700',
|
|
106
|
+
'tracking-tight': '-0.025em',
|
|
107
|
+
'tracking-normal': '0em',
|
|
108
|
+
'tracking-wide': '0.025em',
|
|
109
|
+
'tracking-widest': '0.1em',
|
|
110
|
+
'leading-none': '1',
|
|
111
|
+
'leading-tight': '1.25',
|
|
112
|
+
'leading-snug': '1.375',
|
|
113
|
+
'leading-normal': '1.5',
|
|
114
|
+
'leading-relaxed': '1.625',
|
|
115
|
+
'leading-golden': '1.618',
|
|
116
|
+
'type-hero': '600 var(--text-5xl)/1.05 var(--font-display)',
|
|
117
|
+
'type-h2': '700 var(--text-4xl)/var(--leading-4xl) var(--font-display)',
|
|
118
|
+
'type-h3': '600 var(--text-xl)/var(--leading-xl) var(--font-display)',
|
|
119
|
+
'type-lead': '400 var(--text-lg)/var(--leading-relaxed) var(--font-sans)',
|
|
120
|
+
'type-body': '400 var(--text-sm)/var(--leading-sm) var(--font-sans)',
|
|
121
|
+
'type-caption': '400 var(--text-xs)/var(--leading-xs) var(--font-sans)',
|
|
122
|
+
'type-code': '400 var(--text-sm)/var(--leading-relaxed) var(--font-mono)',
|
|
123
|
+
'type-eyebrow': '600 0.625rem/1 var(--font-sans)',
|
|
124
|
+
} as const
|
|
125
|
+
|
|
126
|
+
/** spacing tokens (from tokens/spacing.css). Values are raw CSS. */
|
|
127
|
+
export const spacing = {
|
|
128
|
+
'space-0': '0',
|
|
129
|
+
'space-1': '0.25rem',
|
|
130
|
+
'space-2': '0.5rem',
|
|
131
|
+
'space-3': '0.75rem',
|
|
132
|
+
'space-4': '1rem',
|
|
133
|
+
'space-5': '1.25rem',
|
|
134
|
+
'space-6': '1.5rem',
|
|
135
|
+
'space-8': '2rem',
|
|
136
|
+
'space-10': '2.5rem',
|
|
137
|
+
'space-12': '3rem',
|
|
138
|
+
'space-14': '3.5rem',
|
|
139
|
+
'space-16': '4rem',
|
|
140
|
+
'space-20': '5rem',
|
|
141
|
+
'space-24': '6rem',
|
|
142
|
+
'space-32': '8rem',
|
|
143
|
+
'golden-1': '0.25rem',
|
|
144
|
+
'golden-2': '0.405rem',
|
|
145
|
+
'golden-3': '0.654rem',
|
|
146
|
+
'golden-4': '1.059rem',
|
|
147
|
+
'golden-5': '1.713rem',
|
|
148
|
+
'golden-6': '2.772rem',
|
|
149
|
+
'golden-7': '4.487rem',
|
|
150
|
+
'golden-8': '7.26rem',
|
|
151
|
+
'golden-9': '11.749rem',
|
|
152
|
+
'golden-split': '38.2% 61.8%',
|
|
153
|
+
'container-max': '80rem',
|
|
154
|
+
'container-prose': '48rem',
|
|
155
|
+
'container-wide': '72rem',
|
|
156
|
+
'gutter': '1rem',
|
|
157
|
+
'gutter-sm': '1.5rem',
|
|
158
|
+
'gutter-lg': '2rem',
|
|
159
|
+
'section-y': '4rem',
|
|
160
|
+
'section-y-lg': '6rem',
|
|
161
|
+
'hero-y': '5rem',
|
|
162
|
+
'hero-y-lg': '8rem',
|
|
163
|
+
'header-height': '4rem',
|
|
164
|
+
} as const
|
|
165
|
+
|
|
166
|
+
/** radius tokens (from tokens/radius.css). Values are raw CSS. */
|
|
167
|
+
export const radius = {
|
|
168
|
+
'radius': '0.5rem',
|
|
169
|
+
'radius-sm': '0.375rem',
|
|
170
|
+
'radius-md': '0.5rem',
|
|
171
|
+
'radius-lg': '0.75rem',
|
|
172
|
+
'radius-xl': '1rem',
|
|
173
|
+
'radius-2xl': '1.5rem',
|
|
174
|
+
'radius-composer': '28px',
|
|
175
|
+
'radius-full': '9999px',
|
|
176
|
+
} as const
|
|
177
|
+
|
|
178
|
+
/** elevation tokens (from tokens/elevation.css). Values are raw CSS. */
|
|
179
|
+
export const elevation = {
|
|
180
|
+
'shadow-none': 'none',
|
|
181
|
+
'shadow-floating': '0 25px 50px -12px rgb(0 0 0 / .25)',
|
|
182
|
+
'shadow-inset-hairline': 'inset 0 0 0 1px var(--white-10)',
|
|
183
|
+
'ring-focus': '0 0 0 2px var(--ring)',
|
|
184
|
+
'glow-hero': 'radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%)',
|
|
185
|
+
'glow-hero-blur': '120px',
|
|
186
|
+
'sheen-card': 'radial-gradient(120% 120% at 80% 0%,rgb(255 255 255 / .08) 0%,transparent 55%)',
|
|
187
|
+
'gradient-chrome': 'linear-gradient(to right,#ffffff,var(--white-80),var(--white-60))',
|
|
188
|
+
'gradient-chrome-2': 'linear-gradient(to right,#ffffff,var(--neutral-500))',
|
|
189
|
+
'gradient-protect': 'linear-gradient(to bottom,var(--white-10),transparent)',
|
|
190
|
+
} as const
|
|
191
|
+
|
|
192
|
+
/** motion tokens (from tokens/motion.css). Values are raw CSS. */
|
|
193
|
+
export const motion = {
|
|
194
|
+
'duration-fast': '150ms',
|
|
195
|
+
'duration-base': '300ms',
|
|
196
|
+
'duration-slow': '400ms',
|
|
197
|
+
'duration-slower': '500ms',
|
|
198
|
+
'duration-glow': '9s',
|
|
199
|
+
'ease-out': 'cubic-bezier(0,0,0.2,1)',
|
|
200
|
+
'ease-in-out': 'cubic-bezier(0.4,0,0.2,1)',
|
|
201
|
+
'stagger': '60ms',
|
|
202
|
+
'entry-rise': '16px',
|
|
203
|
+
'entry-rise-lg': '24px',
|
|
204
|
+
} as const
|
|
205
|
+
|
|
206
|
+
/** zIndex tokens (from tokens/z.css). Values are raw CSS. */
|
|
207
|
+
export const zIndex = {
|
|
208
|
+
'z-base': '0',
|
|
209
|
+
'z-raised': '10',
|
|
210
|
+
'z-sticky': '200',
|
|
211
|
+
'z-header': '300',
|
|
212
|
+
'z-dropdown': '400',
|
|
213
|
+
'z-overlay': '500',
|
|
214
|
+
'z-modal': '600',
|
|
215
|
+
'z-popover': '700',
|
|
216
|
+
'z-toast': '800',
|
|
217
|
+
} as const
|
|
218
|
+
|
|
219
|
+
/** fonts tokens (from tokens/fonts.css). Values are raw CSS. */
|
|
220
|
+
export const fonts = {
|
|
221
|
+
'font-sans': '"Geist","Geist Sans",ui-sans-serif,system-ui,sans-serif',
|
|
222
|
+
'font-display': 'var(--font-sans)',
|
|
223
|
+
'font-mono': '"Geist Mono",ui-monospace,SFMono-Regular,monospace',
|
|
224
|
+
'font-serif': 'Georgia,serif',
|
|
225
|
+
'font-feature-settings': '"ss01","ss02","cv01","cv02","cv03"',
|
|
226
|
+
} as const
|
|
227
|
+
|
|
228
|
+
/** base tokens (from tokens/base.css). Values are raw CSS. */
|
|
229
|
+
export const base = {
|
|
230
|
+
|
|
231
|
+
} as const
|
|
232
|
+
|
|
233
|
+
/** Every token, keyed by its literal CSS custom-property name ('--background', …). */
|
|
234
|
+
export const cssVars = {
|
|
235
|
+
'--neutral-50': '#FAFAFA',
|
|
236
|
+
'--neutral-100': '#F5F5F5',
|
|
237
|
+
'--neutral-200': '#E5E5E5',
|
|
238
|
+
'--neutral-300': '#D4D4D4',
|
|
239
|
+
'--neutral-400': '#A3A3A3',
|
|
240
|
+
'--neutral-500': '#737373',
|
|
241
|
+
'--neutral-600': '#525252',
|
|
242
|
+
'--neutral-700': '#404040',
|
|
243
|
+
'--neutral-800': '#262626',
|
|
244
|
+
'--neutral-900': '#171717',
|
|
245
|
+
'--neutral-950': '#0A0A0A',
|
|
246
|
+
'--pure-black': '#000000',
|
|
247
|
+
'--pure-white': '#FFFFFF',
|
|
248
|
+
'--hanzo-black': '#0A0A0B',
|
|
249
|
+
'--hanzo-white': '#FFFFFF',
|
|
250
|
+
'--white-05': 'rgb(255 255 255 / .05)',
|
|
251
|
+
'--white-10': 'rgb(255 255 255 / .10)',
|
|
252
|
+
'--white-15': 'rgb(255 255 255 / .15)',
|
|
253
|
+
'--white-20': 'rgb(255 255 255 / .20)',
|
|
254
|
+
'--white-30': 'rgb(255 255 255 / .30)',
|
|
255
|
+
'--white-40': 'rgb(255 255 255 / .40)',
|
|
256
|
+
'--white-60': 'rgb(255 255 255 / .60)',
|
|
257
|
+
'--white-80': 'rgb(255 255 255 / .80)',
|
|
258
|
+
'--background': '#000000',
|
|
259
|
+
'--foreground': '#ededed',
|
|
260
|
+
'--card': '#0a0a0a',
|
|
261
|
+
'--card-foreground': '#f5f5f5',
|
|
262
|
+
'--popover': '#0a0a0a',
|
|
263
|
+
'--popover-foreground': '#f5f5f5',
|
|
264
|
+
'--primary': '#ffffff',
|
|
265
|
+
'--primary-foreground': '#000000',
|
|
266
|
+
'--secondary': '#1a1a1a',
|
|
267
|
+
'--secondary-foreground': '#f5f5f5',
|
|
268
|
+
'--muted': '#101010',
|
|
269
|
+
'--muted-foreground': '#888888',
|
|
270
|
+
'--accent': '#1a1a1a',
|
|
271
|
+
'--accent-foreground': '#f5f5f5',
|
|
272
|
+
'--destructive': '#666666',
|
|
273
|
+
'--destructive-foreground': '#f5f5f5',
|
|
274
|
+
'--border': '#1f1f1f',
|
|
275
|
+
'--input': '#1f1f1f',
|
|
276
|
+
'--ring': '#333333',
|
|
277
|
+
'--brand': '#e4e4e7',
|
|
278
|
+
'--brand-foreground': '#09090b',
|
|
279
|
+
'--brand-muted': '#a3a3a3',
|
|
280
|
+
'--black': '#000000',
|
|
281
|
+
'--white': '#f5f5f5',
|
|
282
|
+
'--surface-page': 'var(--background)',
|
|
283
|
+
'--surface-card': 'rgb(23 23 23 / .5)',
|
|
284
|
+
'--surface-card-emphasis': 'rgb(23 23 23 / .8)',
|
|
285
|
+
'--surface-card-quiet': 'rgb(23 23 23 / .4)',
|
|
286
|
+
'--surface-overlay': 'rgb(10 10 10 / .95)',
|
|
287
|
+
'--surface-header': 'rgb(0 0 0 / .7)',
|
|
288
|
+
'--border-hairline': 'var(--neutral-800)',
|
|
289
|
+
'--border-card': 'var(--white-10)',
|
|
290
|
+
'--border-strong': 'var(--neutral-700)',
|
|
291
|
+
'--text-primary': 'var(--pure-white)',
|
|
292
|
+
'--text-secondary': 'var(--white-80)',
|
|
293
|
+
'--text-tertiary': 'var(--white-60)',
|
|
294
|
+
'--text-helper': 'var(--muted-foreground)',
|
|
295
|
+
'--text-disabled': 'var(--white-30)',
|
|
296
|
+
'--state-error': '#ef4444',
|
|
297
|
+
'--state-error-text': '#fca5a5',
|
|
298
|
+
'--state-error-bg': 'rgb(239 68 68 / .1)',
|
|
299
|
+
'--state-online': '#4ade80',
|
|
300
|
+
'--state-success': '#22c55e',
|
|
301
|
+
'--chrome-dot-red': 'rgb(239 68 68 / .6)',
|
|
302
|
+
'--chrome-dot-yellow': 'rgb(234 179 8 / .6)',
|
|
303
|
+
'--chrome-dot-green': 'rgb(34 197 94 / .6)',
|
|
304
|
+
'--text-xs': '0.6875rem',
|
|
305
|
+
'--leading-xs': '1rem',
|
|
306
|
+
'--text-sm': '0.8125rem',
|
|
307
|
+
'--leading-sm': '1.15rem',
|
|
308
|
+
'--text-base': '0.875rem',
|
|
309
|
+
'--leading-base': '1.35rem',
|
|
310
|
+
'--text-lg': '0.9375rem',
|
|
311
|
+
'--leading-lg': '1.4rem',
|
|
312
|
+
'--text-xl': '1.0625rem',
|
|
313
|
+
'--leading-xl': '1.55rem',
|
|
314
|
+
'--text-2xl': '1.3125rem',
|
|
315
|
+
'--leading-2xl': '1.7rem',
|
|
316
|
+
'--text-3xl': '1.625rem',
|
|
317
|
+
'--leading-3xl': '1.95rem',
|
|
318
|
+
'--text-4xl': '2rem',
|
|
319
|
+
'--leading-4xl': '2.25rem',
|
|
320
|
+
'--text-5xl': '2.5rem',
|
|
321
|
+
'--leading-5xl': '1.05',
|
|
322
|
+
'--text-6xl': '3.25rem',
|
|
323
|
+
'--leading-6xl': '1',
|
|
324
|
+
'--text-7xl': '4rem',
|
|
325
|
+
'--leading-7xl': '1',
|
|
326
|
+
'--weight-normal': '400',
|
|
327
|
+
'--weight-medium': '500',
|
|
328
|
+
'--weight-semibold': '600',
|
|
329
|
+
'--weight-bold': '700',
|
|
330
|
+
'--tracking-tight': '-0.025em',
|
|
331
|
+
'--tracking-normal': '0em',
|
|
332
|
+
'--tracking-wide': '0.025em',
|
|
333
|
+
'--tracking-widest': '0.1em',
|
|
334
|
+
'--leading-none': '1',
|
|
335
|
+
'--leading-tight': '1.25',
|
|
336
|
+
'--leading-snug': '1.375',
|
|
337
|
+
'--leading-normal': '1.5',
|
|
338
|
+
'--leading-relaxed': '1.625',
|
|
339
|
+
'--leading-golden': '1.618',
|
|
340
|
+
'--type-hero': '600 var(--text-5xl)/1.05 var(--font-display)',
|
|
341
|
+
'--type-h2': '700 var(--text-4xl)/var(--leading-4xl) var(--font-display)',
|
|
342
|
+
'--type-h3': '600 var(--text-xl)/var(--leading-xl) var(--font-display)',
|
|
343
|
+
'--type-lead': '400 var(--text-lg)/var(--leading-relaxed) var(--font-sans)',
|
|
344
|
+
'--type-body': '400 var(--text-sm)/var(--leading-sm) var(--font-sans)',
|
|
345
|
+
'--type-caption': '400 var(--text-xs)/var(--leading-xs) var(--font-sans)',
|
|
346
|
+
'--type-code': '400 var(--text-sm)/var(--leading-relaxed) var(--font-mono)',
|
|
347
|
+
'--type-eyebrow': '600 0.625rem/1 var(--font-sans)',
|
|
348
|
+
'--space-0': '0',
|
|
349
|
+
'--space-1': '0.25rem',
|
|
350
|
+
'--space-2': '0.5rem',
|
|
351
|
+
'--space-3': '0.75rem',
|
|
352
|
+
'--space-4': '1rem',
|
|
353
|
+
'--space-5': '1.25rem',
|
|
354
|
+
'--space-6': '1.5rem',
|
|
355
|
+
'--space-8': '2rem',
|
|
356
|
+
'--space-10': '2.5rem',
|
|
357
|
+
'--space-12': '3rem',
|
|
358
|
+
'--space-14': '3.5rem',
|
|
359
|
+
'--space-16': '4rem',
|
|
360
|
+
'--space-20': '5rem',
|
|
361
|
+
'--space-24': '6rem',
|
|
362
|
+
'--space-32': '8rem',
|
|
363
|
+
'--golden-1': '0.25rem',
|
|
364
|
+
'--golden-2': '0.405rem',
|
|
365
|
+
'--golden-3': '0.654rem',
|
|
366
|
+
'--golden-4': '1.059rem',
|
|
367
|
+
'--golden-5': '1.713rem',
|
|
368
|
+
'--golden-6': '2.772rem',
|
|
369
|
+
'--golden-7': '4.487rem',
|
|
370
|
+
'--golden-8': '7.26rem',
|
|
371
|
+
'--golden-9': '11.749rem',
|
|
372
|
+
'--golden-split': '38.2% 61.8%',
|
|
373
|
+
'--container-max': '80rem',
|
|
374
|
+
'--container-prose': '48rem',
|
|
375
|
+
'--container-wide': '72rem',
|
|
376
|
+
'--gutter': '1rem',
|
|
377
|
+
'--gutter-sm': '1.5rem',
|
|
378
|
+
'--gutter-lg': '2rem',
|
|
379
|
+
'--section-y': '4rem',
|
|
380
|
+
'--section-y-lg': '6rem',
|
|
381
|
+
'--hero-y': '5rem',
|
|
382
|
+
'--hero-y-lg': '8rem',
|
|
383
|
+
'--header-height': '4rem',
|
|
384
|
+
'--radius': '0.5rem',
|
|
385
|
+
'--radius-sm': '0.375rem',
|
|
386
|
+
'--radius-md': '0.5rem',
|
|
387
|
+
'--radius-lg': '0.75rem',
|
|
388
|
+
'--radius-xl': '1rem',
|
|
389
|
+
'--radius-2xl': '1.5rem',
|
|
390
|
+
'--radius-composer': '28px',
|
|
391
|
+
'--radius-full': '9999px',
|
|
392
|
+
'--shadow-none': 'none',
|
|
393
|
+
'--shadow-floating': '0 25px 50px -12px rgb(0 0 0 / .25)',
|
|
394
|
+
'--shadow-inset-hairline': 'inset 0 0 0 1px var(--white-10)',
|
|
395
|
+
'--ring-focus': '0 0 0 2px var(--ring)',
|
|
396
|
+
'--glow-hero': 'radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%)',
|
|
397
|
+
'--glow-hero-blur': '120px',
|
|
398
|
+
'--sheen-card': 'radial-gradient(120% 120% at 80% 0%,rgb(255 255 255 / .08) 0%,transparent 55%)',
|
|
399
|
+
'--gradient-chrome': 'linear-gradient(to right,#ffffff,var(--white-80),var(--white-60))',
|
|
400
|
+
'--gradient-chrome-2': 'linear-gradient(to right,#ffffff,var(--neutral-500))',
|
|
401
|
+
'--gradient-protect': 'linear-gradient(to bottom,var(--white-10),transparent)',
|
|
402
|
+
'--duration-fast': '150ms',
|
|
403
|
+
'--duration-base': '300ms',
|
|
404
|
+
'--duration-slow': '400ms',
|
|
405
|
+
'--duration-slower': '500ms',
|
|
406
|
+
'--duration-glow': '9s',
|
|
407
|
+
'--ease-out': 'cubic-bezier(0,0,0.2,1)',
|
|
408
|
+
'--ease-in-out': 'cubic-bezier(0.4,0,0.2,1)',
|
|
409
|
+
'--stagger': '60ms',
|
|
410
|
+
'--entry-rise': '16px',
|
|
411
|
+
'--entry-rise-lg': '24px',
|
|
412
|
+
'--z-base': '0',
|
|
413
|
+
'--z-raised': '10',
|
|
414
|
+
'--z-sticky': '200',
|
|
415
|
+
'--z-header': '300',
|
|
416
|
+
'--z-dropdown': '400',
|
|
417
|
+
'--z-overlay': '500',
|
|
418
|
+
'--z-modal': '600',
|
|
419
|
+
'--z-popover': '700',
|
|
420
|
+
'--z-toast': '800',
|
|
421
|
+
'--font-sans': '"Geist","Geist Sans",ui-sans-serif,system-ui,sans-serif',
|
|
422
|
+
'--font-display': 'var(--font-sans)',
|
|
423
|
+
'--font-mono': '"Geist Mono",ui-monospace,SFMono-Regular,monospace',
|
|
424
|
+
'--font-serif': 'Georgia,serif',
|
|
425
|
+
'--font-feature-settings': '"ss01","ss02","cv01","cv02","cv03"',
|
|
426
|
+
} as const
|
|
427
|
+
|
|
428
|
+
export type CssVarName = keyof typeof cssVars
|