@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
package/README.md
CHANGED
|
@@ -15,9 +15,32 @@ The single source of truth for how every Hanzo surface looks — tokens, compone
|
|
|
15
15
|
One import pulls in the whole token layer (fonts, color, type, spacing, radius, elevation, motion):
|
|
16
16
|
|
|
17
17
|
```css
|
|
18
|
-
@import "@
|
|
18
|
+
@import "@hanzo/design/styles.css";
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
+
### Programmatic tokens (control look & feel from code)
|
|
22
|
+
|
|
23
|
+
The same tokens are exposed to TypeScript — **generated from the CSS**, so the two
|
|
24
|
+
can never drift. Edit a token in `tokens/*.css`, run `npm run build`, and both the
|
|
25
|
+
stylesheet and the code API update together. This is the one place to drive Hanzo's
|
|
26
|
+
look & feel programmatically (the `@hanzogui/shell` theme, Tamagui, any TS surface):
|
|
27
|
+
|
|
28
|
+
```ts
|
|
29
|
+
import { colors, spacing, radius, zIndex, cssVar } from '@hanzo/design'
|
|
30
|
+
|
|
31
|
+
spacing['space-4'] // "1rem"
|
|
32
|
+
radius['radius-full'] // "9999px"
|
|
33
|
+
zIndex['z-header'] // 300
|
|
34
|
+
|
|
35
|
+
// Prefer cssVar() so a value resolves through the live cascade (honors light/dark):
|
|
36
|
+
element.style.background = cssVar('--background') // "var(--background)"
|
|
37
|
+
element.style.color = cssVar('--foreground', '#fff') // with a fallback
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
Groups: `colors`, `typography`, `spacing`, `radius`, `elevation`, `motion`, `zIndex`,
|
|
41
|
+
`fonts`, `base` (semantic aliases), plus `cssVars` (every token by its literal
|
|
42
|
+
`--name`). All authored **once** in the token CSS — the single source of truth.
|
|
43
|
+
|
|
21
44
|
Everything below is expressed as CSS custom properties, so code copies over 1:1 — the semantic names match `hanzo.ai`'s variables exactly.
|
|
22
45
|
|
|
23
46
|
```jsx
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export * from './tokens.gen.js';
|
|
2
|
+
import { type CssVarName } from './tokens.gen.js';
|
|
3
|
+
/**
|
|
4
|
+
* A `var(--name[, fallback])` reference to a token — the ONE way code should
|
|
5
|
+
* reach a token so it resolves through the live CSS cascade (honoring the
|
|
6
|
+
* viewer's light/dark theme) rather than baking a fixed value.
|
|
7
|
+
*
|
|
8
|
+
* background: cssVar('--background') // → "var(--background)"
|
|
9
|
+
* color: cssVar('--foreground', '#fff')
|
|
10
|
+
*/
|
|
11
|
+
export declare function cssVar(name: CssVarName | (string & {}), fallback?: string): string;
|
|
12
|
+
/** The raw authored value of a token (the literal from the CSS), or `undefined`. */
|
|
13
|
+
export declare function tokenValue(name: CssVarName): string | undefined;
|
|
14
|
+
/**
|
|
15
|
+
* Inject the design-system stylesheet from code (idempotent) for surfaces that
|
|
16
|
+
* cannot use a bundler CSS import (e.g. a runtime-mounted island). Prefer the
|
|
17
|
+
* static `import '@hanzo/design/styles.css'` where a bundler is available.
|
|
18
|
+
* No-op outside the browser.
|
|
19
|
+
*/
|
|
20
|
+
export declare function injectDesignCss(href?: string): void;
|
|
21
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAWA,cAAc,iBAAiB,CAAA;AAC/B,OAAO,EAAW,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAE1D;;;;;;;GAOG;AACH,wBAAgB,MAAM,CAAC,IAAI,EAAE,UAAU,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAGlF;AAED,oFAAoF;AACpF,wBAAgB,UAAU,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,GAAG,SAAS,CAE/D;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,IAAI,SAA4C,GAAG,IAAI,CAQtF"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
// @hanzo/design — the ONE programmatic control plane for Hanzo's look & feel.
|
|
2
|
+
//
|
|
3
|
+
// The look/feel is authored ONCE as CSS custom properties in tokens/*.css
|
|
4
|
+
// (monochrome, dark-default — "one hue through an opacity ladder"). This module
|
|
5
|
+
// exposes those exact tokens to code, generated from the CSS so the two can
|
|
6
|
+
// never drift. Change a token in the CSS → the stylesheet AND every code
|
|
7
|
+
// consumer (the @hanzogui/shell theme, Tamagui, any TS surface) update together.
|
|
8
|
+
//
|
|
9
|
+
// import '@hanzo/design/styles.css' // the CSS layer (unchanged)
|
|
10
|
+
// import { colors, spacing, radius, cssVar } from '@hanzo/design' // the code layer
|
|
11
|
+
//
|
|
12
|
+
export * from './tokens.gen.js';
|
|
13
|
+
import { cssVars } from './tokens.gen.js';
|
|
14
|
+
/**
|
|
15
|
+
* A `var(--name[, fallback])` reference to a token — the ONE way code should
|
|
16
|
+
* reach a token so it resolves through the live CSS cascade (honoring the
|
|
17
|
+
* viewer's light/dark theme) rather than baking a fixed value.
|
|
18
|
+
*
|
|
19
|
+
* background: cssVar('--background') // → "var(--background)"
|
|
20
|
+
* color: cssVar('--foreground', '#fff')
|
|
21
|
+
*/
|
|
22
|
+
export function cssVar(name, fallback) {
|
|
23
|
+
const n = name.startsWith('--') ? name : `--${name}`;
|
|
24
|
+
return fallback ? `var(${n}, ${fallback})` : `var(${n})`;
|
|
25
|
+
}
|
|
26
|
+
/** The raw authored value of a token (the literal from the CSS), or `undefined`. */
|
|
27
|
+
export function tokenValue(name) {
|
|
28
|
+
return cssVars[name];
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* Inject the design-system stylesheet from code (idempotent) for surfaces that
|
|
32
|
+
* cannot use a bundler CSS import (e.g. a runtime-mounted island). Prefer the
|
|
33
|
+
* static `import '@hanzo/design/styles.css'` where a bundler is available.
|
|
34
|
+
* No-op outside the browser.
|
|
35
|
+
*/
|
|
36
|
+
export function injectDesignCss(href = 'https://esm.sh/@hanzo/design/styles.css') {
|
|
37
|
+
if (typeof document === 'undefined')
|
|
38
|
+
return;
|
|
39
|
+
if (document.querySelector('link[data-hanzo-design]'))
|
|
40
|
+
return;
|
|
41
|
+
const l = document.createElement('link');
|
|
42
|
+
l.rel = 'stylesheet';
|
|
43
|
+
l.href = href;
|
|
44
|
+
l.setAttribute('data-hanzo-design', '');
|
|
45
|
+
document.head.appendChild(l);
|
|
46
|
+
}
|
|
@@ -0,0 +1,413 @@
|
|
|
1
|
+
/** colors tokens (from tokens/colors.css). Values are raw CSS. */
|
|
2
|
+
export declare const colors: {
|
|
3
|
+
readonly 'neutral-50': "#FAFAFA";
|
|
4
|
+
readonly 'neutral-100': "#F5F5F5";
|
|
5
|
+
readonly 'neutral-200': "#E5E5E5";
|
|
6
|
+
readonly 'neutral-300': "#D4D4D4";
|
|
7
|
+
readonly 'neutral-400': "#A3A3A3";
|
|
8
|
+
readonly 'neutral-500': "#737373";
|
|
9
|
+
readonly 'neutral-600': "#525252";
|
|
10
|
+
readonly 'neutral-700': "#404040";
|
|
11
|
+
readonly 'neutral-800': "#262626";
|
|
12
|
+
readonly 'neutral-900': "#171717";
|
|
13
|
+
readonly 'neutral-950': "#0A0A0A";
|
|
14
|
+
readonly 'pure-black': "#000000";
|
|
15
|
+
readonly 'pure-white': "#FFFFFF";
|
|
16
|
+
readonly 'hanzo-black': "#0A0A0B";
|
|
17
|
+
readonly 'hanzo-white': "#FFFFFF";
|
|
18
|
+
readonly 'white-05': "rgb(255 255 255 / .05)";
|
|
19
|
+
readonly 'white-10': "rgb(255 255 255 / .10)";
|
|
20
|
+
readonly 'white-15': "rgb(255 255 255 / .15)";
|
|
21
|
+
readonly 'white-20': "rgb(255 255 255 / .20)";
|
|
22
|
+
readonly 'white-30': "rgb(255 255 255 / .30)";
|
|
23
|
+
readonly 'white-40': "rgb(255 255 255 / .40)";
|
|
24
|
+
readonly 'white-60': "rgb(255 255 255 / .60)";
|
|
25
|
+
readonly 'white-80': "rgb(255 255 255 / .80)";
|
|
26
|
+
readonly background: "#000000";
|
|
27
|
+
readonly foreground: "#ededed";
|
|
28
|
+
readonly card: "#0a0a0a";
|
|
29
|
+
readonly 'card-foreground': "#f5f5f5";
|
|
30
|
+
readonly popover: "#0a0a0a";
|
|
31
|
+
readonly 'popover-foreground': "#f5f5f5";
|
|
32
|
+
readonly primary: "#ffffff";
|
|
33
|
+
readonly 'primary-foreground': "#000000";
|
|
34
|
+
readonly secondary: "#1a1a1a";
|
|
35
|
+
readonly 'secondary-foreground': "#f5f5f5";
|
|
36
|
+
readonly muted: "#101010";
|
|
37
|
+
readonly 'muted-foreground': "#888888";
|
|
38
|
+
readonly accent: "#1a1a1a";
|
|
39
|
+
readonly 'accent-foreground': "#f5f5f5";
|
|
40
|
+
readonly destructive: "#666666";
|
|
41
|
+
readonly 'destructive-foreground': "#f5f5f5";
|
|
42
|
+
readonly border: "#1f1f1f";
|
|
43
|
+
readonly input: "#1f1f1f";
|
|
44
|
+
readonly ring: "#333333";
|
|
45
|
+
readonly brand: "#e4e4e7";
|
|
46
|
+
readonly 'brand-foreground': "#09090b";
|
|
47
|
+
readonly 'brand-muted': "#a3a3a3";
|
|
48
|
+
readonly black: "#000000";
|
|
49
|
+
readonly white: "#f5f5f5";
|
|
50
|
+
readonly 'surface-page': "var(--background)";
|
|
51
|
+
readonly 'surface-card': "rgb(23 23 23 / .5)";
|
|
52
|
+
readonly 'surface-card-emphasis': "rgb(23 23 23 / .8)";
|
|
53
|
+
readonly 'surface-card-quiet': "rgb(23 23 23 / .4)";
|
|
54
|
+
readonly 'surface-overlay': "rgb(10 10 10 / .95)";
|
|
55
|
+
readonly 'surface-header': "rgb(0 0 0 / .7)";
|
|
56
|
+
readonly 'border-hairline': "var(--neutral-800)";
|
|
57
|
+
readonly 'border-card': "var(--white-10)";
|
|
58
|
+
readonly 'border-strong': "var(--neutral-700)";
|
|
59
|
+
readonly 'text-primary': "var(--pure-white)";
|
|
60
|
+
readonly 'text-secondary': "var(--white-80)";
|
|
61
|
+
readonly 'text-tertiary': "var(--white-60)";
|
|
62
|
+
readonly 'text-helper': "var(--muted-foreground)";
|
|
63
|
+
readonly 'text-disabled': "var(--white-30)";
|
|
64
|
+
readonly 'state-error': "#ef4444";
|
|
65
|
+
readonly 'state-error-text': "#fca5a5";
|
|
66
|
+
readonly 'state-error-bg': "rgb(239 68 68 / .1)";
|
|
67
|
+
readonly 'state-online': "#4ade80";
|
|
68
|
+
readonly 'state-success': "#22c55e";
|
|
69
|
+
readonly 'chrome-dot-red': "rgb(239 68 68 / .6)";
|
|
70
|
+
readonly 'chrome-dot-yellow': "rgb(234 179 8 / .6)";
|
|
71
|
+
readonly 'chrome-dot-green': "rgb(34 197 94 / .6)";
|
|
72
|
+
};
|
|
73
|
+
/** typography tokens (from tokens/typography.css). Values are raw CSS. */
|
|
74
|
+
export declare const typography: {
|
|
75
|
+
readonly 'text-xs': "0.6875rem";
|
|
76
|
+
readonly 'leading-xs': "1rem";
|
|
77
|
+
readonly 'text-sm': "0.8125rem";
|
|
78
|
+
readonly 'leading-sm': "1.15rem";
|
|
79
|
+
readonly 'text-base': "0.875rem";
|
|
80
|
+
readonly 'leading-base': "1.35rem";
|
|
81
|
+
readonly 'text-lg': "0.9375rem";
|
|
82
|
+
readonly 'leading-lg': "1.4rem";
|
|
83
|
+
readonly 'text-xl': "1.0625rem";
|
|
84
|
+
readonly 'leading-xl': "1.55rem";
|
|
85
|
+
readonly 'text-2xl': "1.3125rem";
|
|
86
|
+
readonly 'leading-2xl': "1.7rem";
|
|
87
|
+
readonly 'text-3xl': "1.625rem";
|
|
88
|
+
readonly 'leading-3xl': "1.95rem";
|
|
89
|
+
readonly 'text-4xl': "2rem";
|
|
90
|
+
readonly 'leading-4xl': "2.25rem";
|
|
91
|
+
readonly 'text-5xl': "2.5rem";
|
|
92
|
+
readonly 'leading-5xl': "1.05";
|
|
93
|
+
readonly 'text-6xl': "3.25rem";
|
|
94
|
+
readonly 'leading-6xl': "1";
|
|
95
|
+
readonly 'text-7xl': "4rem";
|
|
96
|
+
readonly 'leading-7xl': "1";
|
|
97
|
+
readonly 'weight-normal': "400";
|
|
98
|
+
readonly 'weight-medium': "500";
|
|
99
|
+
readonly 'weight-semibold': "600";
|
|
100
|
+
readonly 'weight-bold': "700";
|
|
101
|
+
readonly 'tracking-tight': "-0.025em";
|
|
102
|
+
readonly 'tracking-normal': "0em";
|
|
103
|
+
readonly 'tracking-wide': "0.025em";
|
|
104
|
+
readonly 'tracking-widest': "0.1em";
|
|
105
|
+
readonly 'leading-none': "1";
|
|
106
|
+
readonly 'leading-tight': "1.25";
|
|
107
|
+
readonly 'leading-snug': "1.375";
|
|
108
|
+
readonly 'leading-normal': "1.5";
|
|
109
|
+
readonly 'leading-relaxed': "1.625";
|
|
110
|
+
readonly 'leading-golden': "1.618";
|
|
111
|
+
readonly 'type-hero': "600 var(--text-5xl)/1.05 var(--font-display)";
|
|
112
|
+
readonly 'type-h2': "700 var(--text-4xl)/var(--leading-4xl) var(--font-display)";
|
|
113
|
+
readonly 'type-h3': "600 var(--text-xl)/var(--leading-xl) var(--font-display)";
|
|
114
|
+
readonly 'type-lead': "400 var(--text-lg)/var(--leading-relaxed) var(--font-sans)";
|
|
115
|
+
readonly 'type-body': "400 var(--text-sm)/var(--leading-sm) var(--font-sans)";
|
|
116
|
+
readonly 'type-caption': "400 var(--text-xs)/var(--leading-xs) var(--font-sans)";
|
|
117
|
+
readonly 'type-code': "400 var(--text-sm)/var(--leading-relaxed) var(--font-mono)";
|
|
118
|
+
readonly 'type-eyebrow': "600 0.625rem/1 var(--font-sans)";
|
|
119
|
+
};
|
|
120
|
+
/** spacing tokens (from tokens/spacing.css). Values are raw CSS. */
|
|
121
|
+
export declare const spacing: {
|
|
122
|
+
readonly 'space-0': "0";
|
|
123
|
+
readonly 'space-1': "0.25rem";
|
|
124
|
+
readonly 'space-2': "0.5rem";
|
|
125
|
+
readonly 'space-3': "0.75rem";
|
|
126
|
+
readonly 'space-4': "1rem";
|
|
127
|
+
readonly 'space-5': "1.25rem";
|
|
128
|
+
readonly 'space-6': "1.5rem";
|
|
129
|
+
readonly 'space-8': "2rem";
|
|
130
|
+
readonly 'space-10': "2.5rem";
|
|
131
|
+
readonly 'space-12': "3rem";
|
|
132
|
+
readonly 'space-14': "3.5rem";
|
|
133
|
+
readonly 'space-16': "4rem";
|
|
134
|
+
readonly 'space-20': "5rem";
|
|
135
|
+
readonly 'space-24': "6rem";
|
|
136
|
+
readonly 'space-32': "8rem";
|
|
137
|
+
readonly 'golden-1': "0.25rem";
|
|
138
|
+
readonly 'golden-2': "0.405rem";
|
|
139
|
+
readonly 'golden-3': "0.654rem";
|
|
140
|
+
readonly 'golden-4': "1.059rem";
|
|
141
|
+
readonly 'golden-5': "1.713rem";
|
|
142
|
+
readonly 'golden-6': "2.772rem";
|
|
143
|
+
readonly 'golden-7': "4.487rem";
|
|
144
|
+
readonly 'golden-8': "7.26rem";
|
|
145
|
+
readonly 'golden-9': "11.749rem";
|
|
146
|
+
readonly 'golden-split': "38.2% 61.8%";
|
|
147
|
+
readonly 'container-max': "80rem";
|
|
148
|
+
readonly 'container-prose': "48rem";
|
|
149
|
+
readonly 'container-wide': "72rem";
|
|
150
|
+
readonly gutter: "1rem";
|
|
151
|
+
readonly 'gutter-sm': "1.5rem";
|
|
152
|
+
readonly 'gutter-lg': "2rem";
|
|
153
|
+
readonly 'section-y': "4rem";
|
|
154
|
+
readonly 'section-y-lg': "6rem";
|
|
155
|
+
readonly 'hero-y': "5rem";
|
|
156
|
+
readonly 'hero-y-lg': "8rem";
|
|
157
|
+
readonly 'header-height': "4rem";
|
|
158
|
+
};
|
|
159
|
+
/** radius tokens (from tokens/radius.css). Values are raw CSS. */
|
|
160
|
+
export declare const radius: {
|
|
161
|
+
readonly radius: "0.5rem";
|
|
162
|
+
readonly 'radius-sm': "0.375rem";
|
|
163
|
+
readonly 'radius-md': "0.5rem";
|
|
164
|
+
readonly 'radius-lg': "0.75rem";
|
|
165
|
+
readonly 'radius-xl': "1rem";
|
|
166
|
+
readonly 'radius-2xl': "1.5rem";
|
|
167
|
+
readonly 'radius-composer': "28px";
|
|
168
|
+
readonly 'radius-full': "9999px";
|
|
169
|
+
};
|
|
170
|
+
/** elevation tokens (from tokens/elevation.css). Values are raw CSS. */
|
|
171
|
+
export declare const elevation: {
|
|
172
|
+
readonly 'shadow-none': "none";
|
|
173
|
+
readonly 'shadow-floating': "0 25px 50px -12px rgb(0 0 0 / .25)";
|
|
174
|
+
readonly 'shadow-inset-hairline': "inset 0 0 0 1px var(--white-10)";
|
|
175
|
+
readonly 'ring-focus': "0 0 0 2px var(--ring)";
|
|
176
|
+
readonly 'glow-hero': "radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%)";
|
|
177
|
+
readonly 'glow-hero-blur': "120px";
|
|
178
|
+
readonly 'sheen-card': "radial-gradient(120% 120% at 80% 0%,rgb(255 255 255 / .08) 0%,transparent 55%)";
|
|
179
|
+
readonly 'gradient-chrome': "linear-gradient(to right,#ffffff,var(--white-80),var(--white-60))";
|
|
180
|
+
readonly 'gradient-chrome-2': "linear-gradient(to right,#ffffff,var(--neutral-500))";
|
|
181
|
+
readonly 'gradient-protect': "linear-gradient(to bottom,var(--white-10),transparent)";
|
|
182
|
+
};
|
|
183
|
+
/** motion tokens (from tokens/motion.css). Values are raw CSS. */
|
|
184
|
+
export declare const motion: {
|
|
185
|
+
readonly 'duration-fast': "150ms";
|
|
186
|
+
readonly 'duration-base': "300ms";
|
|
187
|
+
readonly 'duration-slow': "400ms";
|
|
188
|
+
readonly 'duration-slower': "500ms";
|
|
189
|
+
readonly 'duration-glow': "9s";
|
|
190
|
+
readonly 'ease-out': "cubic-bezier(0,0,0.2,1)";
|
|
191
|
+
readonly 'ease-in-out': "cubic-bezier(0.4,0,0.2,1)";
|
|
192
|
+
readonly stagger: "60ms";
|
|
193
|
+
readonly 'entry-rise': "16px";
|
|
194
|
+
readonly 'entry-rise-lg': "24px";
|
|
195
|
+
};
|
|
196
|
+
/** zIndex tokens (from tokens/z.css). Values are raw CSS. */
|
|
197
|
+
export declare const zIndex: {
|
|
198
|
+
readonly 'z-base': "0";
|
|
199
|
+
readonly 'z-raised': "10";
|
|
200
|
+
readonly 'z-sticky': "200";
|
|
201
|
+
readonly 'z-header': "300";
|
|
202
|
+
readonly 'z-dropdown': "400";
|
|
203
|
+
readonly 'z-overlay': "500";
|
|
204
|
+
readonly 'z-modal': "600";
|
|
205
|
+
readonly 'z-popover': "700";
|
|
206
|
+
readonly 'z-toast': "800";
|
|
207
|
+
};
|
|
208
|
+
/** fonts tokens (from tokens/fonts.css). Values are raw CSS. */
|
|
209
|
+
export declare const fonts: {
|
|
210
|
+
readonly 'font-sans': "\"Geist\",\"Geist Sans\",ui-sans-serif,system-ui,sans-serif";
|
|
211
|
+
readonly 'font-display': "var(--font-sans)";
|
|
212
|
+
readonly 'font-mono': "\"Geist Mono\",ui-monospace,SFMono-Regular,monospace";
|
|
213
|
+
readonly 'font-serif': "Georgia,serif";
|
|
214
|
+
readonly 'font-feature-settings': "\"ss01\",\"ss02\",\"cv01\",\"cv02\",\"cv03\"";
|
|
215
|
+
};
|
|
216
|
+
/** base tokens (from tokens/base.css). Values are raw CSS. */
|
|
217
|
+
export declare const base: {};
|
|
218
|
+
/** Every token, keyed by its literal CSS custom-property name ('--background', …). */
|
|
219
|
+
export declare const cssVars: {
|
|
220
|
+
readonly '--neutral-50': "#FAFAFA";
|
|
221
|
+
readonly '--neutral-100': "#F5F5F5";
|
|
222
|
+
readonly '--neutral-200': "#E5E5E5";
|
|
223
|
+
readonly '--neutral-300': "#D4D4D4";
|
|
224
|
+
readonly '--neutral-400': "#A3A3A3";
|
|
225
|
+
readonly '--neutral-500': "#737373";
|
|
226
|
+
readonly '--neutral-600': "#525252";
|
|
227
|
+
readonly '--neutral-700': "#404040";
|
|
228
|
+
readonly '--neutral-800': "#262626";
|
|
229
|
+
readonly '--neutral-900': "#171717";
|
|
230
|
+
readonly '--neutral-950': "#0A0A0A";
|
|
231
|
+
readonly '--pure-black': "#000000";
|
|
232
|
+
readonly '--pure-white': "#FFFFFF";
|
|
233
|
+
readonly '--hanzo-black': "#0A0A0B";
|
|
234
|
+
readonly '--hanzo-white': "#FFFFFF";
|
|
235
|
+
readonly '--white-05': "rgb(255 255 255 / .05)";
|
|
236
|
+
readonly '--white-10': "rgb(255 255 255 / .10)";
|
|
237
|
+
readonly '--white-15': "rgb(255 255 255 / .15)";
|
|
238
|
+
readonly '--white-20': "rgb(255 255 255 / .20)";
|
|
239
|
+
readonly '--white-30': "rgb(255 255 255 / .30)";
|
|
240
|
+
readonly '--white-40': "rgb(255 255 255 / .40)";
|
|
241
|
+
readonly '--white-60': "rgb(255 255 255 / .60)";
|
|
242
|
+
readonly '--white-80': "rgb(255 255 255 / .80)";
|
|
243
|
+
readonly '--background': "#000000";
|
|
244
|
+
readonly '--foreground': "#ededed";
|
|
245
|
+
readonly '--card': "#0a0a0a";
|
|
246
|
+
readonly '--card-foreground': "#f5f5f5";
|
|
247
|
+
readonly '--popover': "#0a0a0a";
|
|
248
|
+
readonly '--popover-foreground': "#f5f5f5";
|
|
249
|
+
readonly '--primary': "#ffffff";
|
|
250
|
+
readonly '--primary-foreground': "#000000";
|
|
251
|
+
readonly '--secondary': "#1a1a1a";
|
|
252
|
+
readonly '--secondary-foreground': "#f5f5f5";
|
|
253
|
+
readonly '--muted': "#101010";
|
|
254
|
+
readonly '--muted-foreground': "#888888";
|
|
255
|
+
readonly '--accent': "#1a1a1a";
|
|
256
|
+
readonly '--accent-foreground': "#f5f5f5";
|
|
257
|
+
readonly '--destructive': "#666666";
|
|
258
|
+
readonly '--destructive-foreground': "#f5f5f5";
|
|
259
|
+
readonly '--border': "#1f1f1f";
|
|
260
|
+
readonly '--input': "#1f1f1f";
|
|
261
|
+
readonly '--ring': "#333333";
|
|
262
|
+
readonly '--brand': "#e4e4e7";
|
|
263
|
+
readonly '--brand-foreground': "#09090b";
|
|
264
|
+
readonly '--brand-muted': "#a3a3a3";
|
|
265
|
+
readonly '--black': "#000000";
|
|
266
|
+
readonly '--white': "#f5f5f5";
|
|
267
|
+
readonly '--surface-page': "var(--background)";
|
|
268
|
+
readonly '--surface-card': "rgb(23 23 23 / .5)";
|
|
269
|
+
readonly '--surface-card-emphasis': "rgb(23 23 23 / .8)";
|
|
270
|
+
readonly '--surface-card-quiet': "rgb(23 23 23 / .4)";
|
|
271
|
+
readonly '--surface-overlay': "rgb(10 10 10 / .95)";
|
|
272
|
+
readonly '--surface-header': "rgb(0 0 0 / .7)";
|
|
273
|
+
readonly '--border-hairline': "var(--neutral-800)";
|
|
274
|
+
readonly '--border-card': "var(--white-10)";
|
|
275
|
+
readonly '--border-strong': "var(--neutral-700)";
|
|
276
|
+
readonly '--text-primary': "var(--pure-white)";
|
|
277
|
+
readonly '--text-secondary': "var(--white-80)";
|
|
278
|
+
readonly '--text-tertiary': "var(--white-60)";
|
|
279
|
+
readonly '--text-helper': "var(--muted-foreground)";
|
|
280
|
+
readonly '--text-disabled': "var(--white-30)";
|
|
281
|
+
readonly '--state-error': "#ef4444";
|
|
282
|
+
readonly '--state-error-text': "#fca5a5";
|
|
283
|
+
readonly '--state-error-bg': "rgb(239 68 68 / .1)";
|
|
284
|
+
readonly '--state-online': "#4ade80";
|
|
285
|
+
readonly '--state-success': "#22c55e";
|
|
286
|
+
readonly '--chrome-dot-red': "rgb(239 68 68 / .6)";
|
|
287
|
+
readonly '--chrome-dot-yellow': "rgb(234 179 8 / .6)";
|
|
288
|
+
readonly '--chrome-dot-green': "rgb(34 197 94 / .6)";
|
|
289
|
+
readonly '--text-xs': "0.6875rem";
|
|
290
|
+
readonly '--leading-xs': "1rem";
|
|
291
|
+
readonly '--text-sm': "0.8125rem";
|
|
292
|
+
readonly '--leading-sm': "1.15rem";
|
|
293
|
+
readonly '--text-base': "0.875rem";
|
|
294
|
+
readonly '--leading-base': "1.35rem";
|
|
295
|
+
readonly '--text-lg': "0.9375rem";
|
|
296
|
+
readonly '--leading-lg': "1.4rem";
|
|
297
|
+
readonly '--text-xl': "1.0625rem";
|
|
298
|
+
readonly '--leading-xl': "1.55rem";
|
|
299
|
+
readonly '--text-2xl': "1.3125rem";
|
|
300
|
+
readonly '--leading-2xl': "1.7rem";
|
|
301
|
+
readonly '--text-3xl': "1.625rem";
|
|
302
|
+
readonly '--leading-3xl': "1.95rem";
|
|
303
|
+
readonly '--text-4xl': "2rem";
|
|
304
|
+
readonly '--leading-4xl': "2.25rem";
|
|
305
|
+
readonly '--text-5xl': "2.5rem";
|
|
306
|
+
readonly '--leading-5xl': "1.05";
|
|
307
|
+
readonly '--text-6xl': "3.25rem";
|
|
308
|
+
readonly '--leading-6xl': "1";
|
|
309
|
+
readonly '--text-7xl': "4rem";
|
|
310
|
+
readonly '--leading-7xl': "1";
|
|
311
|
+
readonly '--weight-normal': "400";
|
|
312
|
+
readonly '--weight-medium': "500";
|
|
313
|
+
readonly '--weight-semibold': "600";
|
|
314
|
+
readonly '--weight-bold': "700";
|
|
315
|
+
readonly '--tracking-tight': "-0.025em";
|
|
316
|
+
readonly '--tracking-normal': "0em";
|
|
317
|
+
readonly '--tracking-wide': "0.025em";
|
|
318
|
+
readonly '--tracking-widest': "0.1em";
|
|
319
|
+
readonly '--leading-none': "1";
|
|
320
|
+
readonly '--leading-tight': "1.25";
|
|
321
|
+
readonly '--leading-snug': "1.375";
|
|
322
|
+
readonly '--leading-normal': "1.5";
|
|
323
|
+
readonly '--leading-relaxed': "1.625";
|
|
324
|
+
readonly '--leading-golden': "1.618";
|
|
325
|
+
readonly '--type-hero': "600 var(--text-5xl)/1.05 var(--font-display)";
|
|
326
|
+
readonly '--type-h2': "700 var(--text-4xl)/var(--leading-4xl) var(--font-display)";
|
|
327
|
+
readonly '--type-h3': "600 var(--text-xl)/var(--leading-xl) var(--font-display)";
|
|
328
|
+
readonly '--type-lead': "400 var(--text-lg)/var(--leading-relaxed) var(--font-sans)";
|
|
329
|
+
readonly '--type-body': "400 var(--text-sm)/var(--leading-sm) var(--font-sans)";
|
|
330
|
+
readonly '--type-caption': "400 var(--text-xs)/var(--leading-xs) var(--font-sans)";
|
|
331
|
+
readonly '--type-code': "400 var(--text-sm)/var(--leading-relaxed) var(--font-mono)";
|
|
332
|
+
readonly '--type-eyebrow': "600 0.625rem/1 var(--font-sans)";
|
|
333
|
+
readonly '--space-0': "0";
|
|
334
|
+
readonly '--space-1': "0.25rem";
|
|
335
|
+
readonly '--space-2': "0.5rem";
|
|
336
|
+
readonly '--space-3': "0.75rem";
|
|
337
|
+
readonly '--space-4': "1rem";
|
|
338
|
+
readonly '--space-5': "1.25rem";
|
|
339
|
+
readonly '--space-6': "1.5rem";
|
|
340
|
+
readonly '--space-8': "2rem";
|
|
341
|
+
readonly '--space-10': "2.5rem";
|
|
342
|
+
readonly '--space-12': "3rem";
|
|
343
|
+
readonly '--space-14': "3.5rem";
|
|
344
|
+
readonly '--space-16': "4rem";
|
|
345
|
+
readonly '--space-20': "5rem";
|
|
346
|
+
readonly '--space-24': "6rem";
|
|
347
|
+
readonly '--space-32': "8rem";
|
|
348
|
+
readonly '--golden-1': "0.25rem";
|
|
349
|
+
readonly '--golden-2': "0.405rem";
|
|
350
|
+
readonly '--golden-3': "0.654rem";
|
|
351
|
+
readonly '--golden-4': "1.059rem";
|
|
352
|
+
readonly '--golden-5': "1.713rem";
|
|
353
|
+
readonly '--golden-6': "2.772rem";
|
|
354
|
+
readonly '--golden-7': "4.487rem";
|
|
355
|
+
readonly '--golden-8': "7.26rem";
|
|
356
|
+
readonly '--golden-9': "11.749rem";
|
|
357
|
+
readonly '--golden-split': "38.2% 61.8%";
|
|
358
|
+
readonly '--container-max': "80rem";
|
|
359
|
+
readonly '--container-prose': "48rem";
|
|
360
|
+
readonly '--container-wide': "72rem";
|
|
361
|
+
readonly '--gutter': "1rem";
|
|
362
|
+
readonly '--gutter-sm': "1.5rem";
|
|
363
|
+
readonly '--gutter-lg': "2rem";
|
|
364
|
+
readonly '--section-y': "4rem";
|
|
365
|
+
readonly '--section-y-lg': "6rem";
|
|
366
|
+
readonly '--hero-y': "5rem";
|
|
367
|
+
readonly '--hero-y-lg': "8rem";
|
|
368
|
+
readonly '--header-height': "4rem";
|
|
369
|
+
readonly '--radius': "0.5rem";
|
|
370
|
+
readonly '--radius-sm': "0.375rem";
|
|
371
|
+
readonly '--radius-md': "0.5rem";
|
|
372
|
+
readonly '--radius-lg': "0.75rem";
|
|
373
|
+
readonly '--radius-xl': "1rem";
|
|
374
|
+
readonly '--radius-2xl': "1.5rem";
|
|
375
|
+
readonly '--radius-composer': "28px";
|
|
376
|
+
readonly '--radius-full': "9999px";
|
|
377
|
+
readonly '--shadow-none': "none";
|
|
378
|
+
readonly '--shadow-floating': "0 25px 50px -12px rgb(0 0 0 / .25)";
|
|
379
|
+
readonly '--shadow-inset-hairline': "inset 0 0 0 1px var(--white-10)";
|
|
380
|
+
readonly '--ring-focus': "0 0 0 2px var(--ring)";
|
|
381
|
+
readonly '--glow-hero': "radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%)";
|
|
382
|
+
readonly '--glow-hero-blur': "120px";
|
|
383
|
+
readonly '--sheen-card': "radial-gradient(120% 120% at 80% 0%,rgb(255 255 255 / .08) 0%,transparent 55%)";
|
|
384
|
+
readonly '--gradient-chrome': "linear-gradient(to right,#ffffff,var(--white-80),var(--white-60))";
|
|
385
|
+
readonly '--gradient-chrome-2': "linear-gradient(to right,#ffffff,var(--neutral-500))";
|
|
386
|
+
readonly '--gradient-protect': "linear-gradient(to bottom,var(--white-10),transparent)";
|
|
387
|
+
readonly '--duration-fast': "150ms";
|
|
388
|
+
readonly '--duration-base': "300ms";
|
|
389
|
+
readonly '--duration-slow': "400ms";
|
|
390
|
+
readonly '--duration-slower': "500ms";
|
|
391
|
+
readonly '--duration-glow': "9s";
|
|
392
|
+
readonly '--ease-out': "cubic-bezier(0,0,0.2,1)";
|
|
393
|
+
readonly '--ease-in-out': "cubic-bezier(0.4,0,0.2,1)";
|
|
394
|
+
readonly '--stagger': "60ms";
|
|
395
|
+
readonly '--entry-rise': "16px";
|
|
396
|
+
readonly '--entry-rise-lg': "24px";
|
|
397
|
+
readonly '--z-base': "0";
|
|
398
|
+
readonly '--z-raised': "10";
|
|
399
|
+
readonly '--z-sticky': "200";
|
|
400
|
+
readonly '--z-header': "300";
|
|
401
|
+
readonly '--z-dropdown': "400";
|
|
402
|
+
readonly '--z-overlay': "500";
|
|
403
|
+
readonly '--z-modal': "600";
|
|
404
|
+
readonly '--z-popover': "700";
|
|
405
|
+
readonly '--z-toast': "800";
|
|
406
|
+
readonly '--font-sans': "\"Geist\",\"Geist Sans\",ui-sans-serif,system-ui,sans-serif";
|
|
407
|
+
readonly '--font-display': "var(--font-sans)";
|
|
408
|
+
readonly '--font-mono': "\"Geist Mono\",ui-monospace,SFMono-Regular,monospace";
|
|
409
|
+
readonly '--font-serif': "Georgia,serif";
|
|
410
|
+
readonly '--font-feature-settings': "\"ss01\",\"ss02\",\"cv01\",\"cv02\",\"cv03\"";
|
|
411
|
+
};
|
|
412
|
+
export type CssVarName = keyof typeof cssVars;
|
|
413
|
+
//# sourceMappingURL=tokens.gen.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tokens.gen.d.ts","sourceRoot":"","sources":["../src/tokens.gen.ts"],"names":[],"mappings":"AAIA,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsET,CAAA;AAEV,0EAA0E;AAC1E,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6Cb,CAAA;AAEV,oEAAoE;AACpE,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCV,CAAA;AAEV,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;CAST,CAAA;AAEV,wEAAwE;AACxE,eAAO,MAAM,SAAS;;;;;;;;;;;CAWZ,CAAA;AAEV,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;;;CAWT,CAAA;AAEV,6DAA6D;AAC7D,eAAO,MAAM,MAAM;;;;;;;;;;CAUT,CAAA;AAEV,gEAAgE;AAChE,eAAO,MAAM,KAAK;;;;;;CAMR,CAAA;AAEV,8DAA8D;AAC9D,eAAO,MAAM,IAAI,IAEP,CAAA;AAEV,sFAAsF;AACtF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgMV,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,OAAO,CAAA"}
|