@hanzo/design 0.4.12 → 0.5.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 (29) hide show
  1. package/LICENSE +24 -10
  2. package/README.md +1 -1
  3. package/dist/brand.d.ts +30 -0
  4. package/dist/brand.d.ts.map +1 -0
  5. package/dist/brand.js +58 -0
  6. package/dist/index.d.ts +1 -2
  7. package/dist/index.d.ts.map +1 -1
  8. package/dist/index.js +1 -4
  9. package/dist/tokens.gen.d.ts +70 -74
  10. package/dist/tokens.gen.d.ts.map +1 -1
  11. package/dist/tokens.gen.js +70 -74
  12. package/package.json +5 -5
  13. package/scripts/check-tokens.mjs +0 -34
  14. package/skills/design-system/SKILL.md +1 -1
  15. package/src/brand.ts +76 -0
  16. package/src/index.ts +1 -6
  17. package/src/tokens.gen.ts +70 -74
  18. package/styles.css +50 -82
  19. package/tailwind.css +50 -82
  20. package/tokens/base.css +13 -33
  21. package/tokens/colors.css +9 -9
  22. package/tokens/spacing.css +14 -20
  23. package/tokens/typography.css +14 -20
  24. package/dist/preference.d.ts +0 -65
  25. package/dist/preference.d.ts.map +0 -1
  26. package/dist/preference.js +0 -102
  27. package/scripts/check-dist.mjs +0 -81
  28. package/scripts/check-preference.mjs +0 -168
  29. package/src/preference.ts +0 -122
package/LICENSE CHANGED
@@ -1,14 +1,28 @@
1
- Licensed under either of
1
+ BSD 3-Clause License
2
2
 
3
- * Apache License, Version 2.0 (LICENSE-APACHE or
4
- https://www.apache.org/licenses/LICENSE-2.0)
5
- * MIT license (LICENSE-MIT or https://opensource.org/licenses/MIT)
3
+ Copyright (c) 2026 Hanzo AI, Inc.
6
4
 
7
- at your option.
5
+ Redistribution and use in source and binary forms, with or without
6
+ modification, are permitted provided that the following conditions are met:
8
7
 
9
- Unless you explicitly state otherwise, any contribution intentionally
10
- submitted for inclusion in the work by you, as defined in the Apache-2.0
11
- license, shall be dual licensed as above, without any additional terms or
12
- conditions.
8
+ 1. Redistributions of source code must retain the above copyright notice, this
9
+ list of conditions and the following disclaimer.
13
10
 
14
- See HIP-0137 (hanzoai/hips) for the standard this follows.
11
+ 2. Redistributions in binary form must reproduce the above copyright notice,
12
+ this list of conditions and the following disclaimer in the documentation
13
+ and/or other materials provided with the distribution.
14
+
15
+ 3. Neither the name of the copyright holder nor the names of its
16
+ contributors may be used to endorse or promote products derived from
17
+ this software without specific prior written permission.
18
+
19
+ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
20
+ AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
21
+ IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
22
+ DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
23
+ FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
24
+ DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
25
+ SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
26
+ CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
27
+ OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
28
+ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
package/README.md CHANGED
@@ -126,7 +126,7 @@ Tokens track `hanzo.ai` (`app/globals.css`, `tailwind.config.ts`, `DESIGN.md`) a
126
126
 
127
127
  ## License
128
128
 
129
- MIT OR Apache-2.0, per [HIP-0137](https://github.com/hanzoai/hips/blob/main/HIPs/hip-0137-one-license.md). Brand marks (the Hanzo logo, partner and provider logos) are the property of their respective owners and are provided for identification.
129
+ BSD-3-Clause. Brand marks (the Hanzo logo, partner and provider logos) are the property of their respective owners and are provided for identification.
130
130
 
131
131
  ## Using it in a Tailwind app
132
132
 
package/dist/brand.d.ts ADDED
@@ -0,0 +1,30 @@
1
+ /** The palette a brand declares. Every field is optional: an undeclared key
2
+ * leaves the design system's own value standing rather than overwriting it. */
3
+ export interface BrandTheme {
4
+ surface1?: string;
5
+ surface2?: string;
6
+ surface3?: string;
7
+ neutral1?: string;
8
+ neutral2?: string;
9
+ neutral3?: string;
10
+ accent1?: string;
11
+ accent2?: string;
12
+ accent3?: string;
13
+ border?: string;
14
+ success?: string;
15
+ warning?: string;
16
+ error?: string;
17
+ }
18
+ /**
19
+ * The tokens a brand's theme sets, as `{ '--background': '#000', … }`.
20
+ *
21
+ * Only ground, ink, accent and the edges drawn on them. The radius scale, the
22
+ * type ramp, spacing, motion and z are NOT here and must not be: they are the
23
+ * system's grammar rather than a brand's voice, and a brand that redefines them
24
+ * is a fork wearing a stylesheet.
25
+ */
26
+ export declare function themeToTokens(theme: BrandTheme): Record<string, string>;
27
+ /** Apply a brand's theme to a live document — for an app that resolves its brand
28
+ * at runtime and so cannot import a build-time stylesheet. */
29
+ export declare function applyBrandTheme(theme: BrandTheme, el: HTMLElement): void;
30
+ //# sourceMappingURL=brand.d.ts.map
package/dist/brand.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"brand.d.ts","sourceRoot":"","sources":["../src/brand.ts"],"names":[],"mappings":"AAaA;gFACgF;AAChF,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAmBD;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAWvE;AAED;+DAC+D;AAC/D,wBAAgB,eAAe,CAAC,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE,WAAW,GAAG,IAAI,CAIxE"}
package/dist/brand.js ADDED
@@ -0,0 +1,58 @@
1
+ // A brand's declared theme, projected onto the semantic tokens.
2
+ //
3
+ // A brand package (@luxfi/brand, @zooai/brand) carries its own light and dark
4
+ // theme in brand.json. This is the ONE place that says which semantic token each
5
+ // of those answers for — the design system owns the token contract, a brand owns
6
+ // the values, and neither holds a copy of the other.
7
+ //
8
+ // It exists because that mapping was about to be written twice: once in each
9
+ // brand package to generate a stylesheet, and once in every app that resolves its
10
+ // brand at runtime and cannot import a build-time stylesheet. Two copies of a
11
+ // mapping is how a brand comes to look like itself in one surface and not
12
+ // another.
13
+ /** theme key → the semantic tokens it answers for. */
14
+ const OWNS = {
15
+ surface1: ['--background'],
16
+ surface2: ['--card', '--popover', '--muted'],
17
+ surface3: ['--accent'],
18
+ neutral1: ['--foreground', '--card-foreground', '--popover-foreground', '--accent-foreground'],
19
+ neutral2: ['--muted-foreground'],
20
+ neutral3: [],
21
+ accent1: ['--primary'],
22
+ accent2: [],
23
+ accent3: [],
24
+ border: ['--border'],
25
+ success: ['--state-success'],
26
+ warning: ['--state-warning'],
27
+ error: ['--state-error'],
28
+ };
29
+ /**
30
+ * The tokens a brand's theme sets, as `{ '--background': '#000', … }`.
31
+ *
32
+ * Only ground, ink, accent and the edges drawn on them. The radius scale, the
33
+ * type ramp, spacing, motion and z are NOT here and must not be: they are the
34
+ * system's grammar rather than a brand's voice, and a brand that redefines them
35
+ * is a fork wearing a stylesheet.
36
+ */
37
+ export function themeToTokens(theme) {
38
+ const out = {};
39
+ for (const [key, tokens] of Object.entries(OWNS)) {
40
+ const value = theme[key];
41
+ if (!value)
42
+ continue;
43
+ for (const token of tokens)
44
+ out[token] = value;
45
+ }
46
+ // --primary carries ink on top of it, so the accent names its own contrast
47
+ // partner rather than leaving whatever the previous theme set.
48
+ if (theme.accent1 && theme.surface1)
49
+ out['--primary-foreground'] = theme.surface1;
50
+ return out;
51
+ }
52
+ /** Apply a brand's theme to a live document — for an app that resolves its brand
53
+ * at runtime and so cannot import a build-time stylesheet. */
54
+ export function applyBrandTheme(theme, el) {
55
+ for (const [name, value] of Object.entries(themeToTokens(theme))) {
56
+ el.style.setProperty(name, value);
57
+ }
58
+ }
package/dist/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export * from './tokens.gen.js';
2
+ export * from './brand.js';
2
3
  import { type CssVarName } from './tokens.gen.js';
3
4
  /** A token name with the leading `--` omitted: `'background'` for `'--background'`. */
4
5
  export type TokenName = CssVarName extends `--${infer N}` ? N : never;
@@ -33,6 +34,4 @@ export declare function tokenValue(name: CssVarName): string | undefined;
33
34
  * bare. Pass a URL you serve.
34
35
  */
35
36
  export declare function injectDesignCss(href: string): void;
36
- export { vars, css, isColor, TYPE_MIN, TYPE_MAX } from './preference.js';
37
- export type { Preference, Density } from './preference.js';
38
37
  //# sourceMappingURL=index.d.ts.map
package/dist/index.d.ts.map CHANGED
@@ -1 +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,uFAAuF;AACvF,MAAM,MAAM,SAAS,GAAG,UAAU,SAAS,KAAK,MAAM,CAAC,EAAE,GAAG,CAAC,GAAG,KAAK,CAAA;AAErE;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,MAAM,CAAC,IAAI,EAAE,UAAU,GAAG,SAAS,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAI9E;AAED,oFAAoF;AACpF,wBAAgB,UAAU,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,GAAG,SAAS,CAE/D;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAQlD;AAKD,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACzE,YAAY,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAWA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,YAAY,CAAA;AAC1B,OAAO,EAAW,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAE1D,uFAAuF;AACvF,MAAM,MAAM,SAAS,GAAG,UAAU,SAAS,KAAK,MAAM,CAAC,EAAE,GAAG,CAAC,GAAG,KAAK,CAAA;AAErE;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,MAAM,CAAC,IAAI,EAAE,UAAU,GAAG,SAAS,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAI9E;AAED,oFAAoF;AACpF,wBAAgB,UAAU,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,GAAG,SAAS,CAE/D;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAQlD"}
package/dist/index.js CHANGED
@@ -10,6 +10,7 @@
10
10
  // import { colors, spacing, radius, cssVar } from '@hanzo/design' // the code layer
11
11
  //
12
12
  export * from './tokens.gen.js';
13
+ export * from './brand.js';
13
14
  import { cssVars } from './tokens.gen.js';
14
15
  /**
15
16
  * A `var(--name, <authored literal>)` reference to a token — the ONE way code
@@ -58,7 +59,3 @@ export function injectDesignCss(href) {
58
59
  l.setAttribute('data-hanzo-design', '');
59
60
  document.head.appendChild(l);
60
61
  }
61
- // A person's own reading of the system — type size, density, accent — as CSS
62
- // custom properties. Pure: it maps a preference to variables and returns them,
63
- // so an app, an embedded preview and a server render all apply it the same way.
64
- export { vars, css, isColor, TYPE_MIN, TYPE_MAX } from './preference.js';
package/dist/tokens.gen.d.ts CHANGED
@@ -91,32 +91,31 @@ export declare const colors: {
91
91
  };
92
92
  /** typography tokens (from tokens/typography.css). Values are raw CSS. */
93
93
  export declare const typography: {
94
- readonly 'type-scale': "1";
95
- readonly 'text-xs': "calc(0.6875rem * var(--type-scale, 1))";
96
- readonly 'leading-xs': "calc(1rem * var(--type-scale, 1))";
97
- readonly 'text-sm': "calc(0.8125rem * var(--type-scale, 1))";
98
- readonly 'leading-sm': "calc(1.15rem * var(--type-scale, 1))";
99
- readonly 'text-base': "calc(0.875rem * var(--type-scale, 1))";
100
- readonly 'leading-base': "calc(1.35rem * var(--type-scale, 1))";
101
- readonly 'text-lg': "calc(0.9375rem * var(--type-scale, 1))";
102
- readonly 'leading-lg': "calc(1.4rem * var(--type-scale, 1))";
103
- readonly 'text-xl': "calc(1.0625rem * var(--type-scale, 1))";
104
- readonly 'leading-xl': "calc(1.55rem * var(--type-scale, 1))";
105
- readonly 'text-2xl': "calc(1.3125rem * var(--type-scale, 1))";
106
- readonly 'leading-2xl': "calc(1.7rem * var(--type-scale, 1))";
107
- readonly 'text-3xl': "calc(1.625rem * var(--type-scale, 1))";
108
- readonly 'leading-3xl': "calc(1.95rem * var(--type-scale, 1))";
109
- readonly 'text-4xl': "calc(2rem * var(--type-scale, 1))";
110
- readonly 'leading-4xl': "calc(2.25rem * var(--type-scale, 1))";
111
- readonly 'text-5xl': "calc(2.5rem * var(--type-scale, 1))";
94
+ readonly 'text-xs': "0.6875rem";
95
+ readonly 'leading-xs': "1rem";
96
+ readonly 'text-sm': "0.8125rem";
97
+ readonly 'leading-sm': "1.15rem";
98
+ readonly 'text-base': "0.875rem";
99
+ readonly 'leading-base': "1.35rem";
100
+ readonly 'text-lg': "0.9375rem";
101
+ readonly 'leading-lg': "1.4rem";
102
+ readonly 'text-xl': "1.0625rem";
103
+ readonly 'leading-xl': "1.55rem";
104
+ readonly 'text-2xl': "1.3125rem";
105
+ readonly 'leading-2xl': "1.7rem";
106
+ readonly 'text-3xl': "1.625rem";
107
+ readonly 'leading-3xl': "1.95rem";
108
+ readonly 'text-4xl': "2rem";
109
+ readonly 'leading-4xl': "2.25rem";
110
+ readonly 'text-5xl': "2.5rem";
112
111
  readonly 'leading-5xl': "1.05";
113
- readonly 'text-6xl': "calc(3.25rem * var(--type-scale, 1))";
112
+ readonly 'text-6xl': "3.25rem";
114
113
  readonly 'leading-6xl': "1";
115
- readonly 'text-7xl': "calc(4rem * var(--type-scale, 1))";
114
+ readonly 'text-7xl': "4rem";
116
115
  readonly 'leading-7xl': "1";
117
- readonly 'text-8xl': "calc(5.25rem * var(--type-scale, 1))";
116
+ readonly 'text-8xl': "5.25rem";
118
117
  readonly 'leading-8xl': "1";
119
- readonly 'text-9xl': "calc(7rem * var(--type-scale, 1))";
118
+ readonly 'text-9xl': "7rem";
120
119
  readonly 'leading-9xl': "1";
121
120
  readonly 'font-size-xs': "var(--text-xs)";
122
121
  readonly 'font-size-sm': "var(--text-sm)";
@@ -157,22 +156,21 @@ export declare const typography: {
157
156
  };
158
157
  /** spacing tokens (from tokens/spacing.css). Values are raw CSS. */
159
158
  export declare const spacing: {
160
- readonly density: "1";
161
159
  readonly 'space-0': "0";
162
- readonly 'space-1': "calc(0.25rem * var(--density, 1))";
163
- readonly 'space-2': "calc(0.5rem * var(--density, 1))";
164
- readonly 'space-3': "calc(0.75rem * var(--density, 1))";
165
- readonly 'space-4': "calc(1rem * var(--density, 1))";
166
- readonly 'space-5': "calc(1.25rem * var(--density, 1))";
167
- readonly 'space-6': "calc(1.5rem * var(--density, 1))";
168
- readonly 'space-8': "calc(2rem * var(--density, 1))";
169
- readonly 'space-10': "calc(2.5rem * var(--density, 1))";
170
- readonly 'space-12': "calc(3rem * var(--density, 1))";
171
- readonly 'space-14': "calc(3.5rem * var(--density, 1))";
172
- readonly 'space-16': "calc(4rem * var(--density, 1))";
173
- readonly 'space-20': "calc(5rem * var(--density, 1))";
174
- readonly 'space-24': "calc(6rem * var(--density, 1))";
175
- readonly 'space-32': "calc(8rem * var(--density, 1))";
160
+ readonly 'space-1': "0.25rem";
161
+ readonly 'space-2': "0.5rem";
162
+ readonly 'space-3': "0.75rem";
163
+ readonly 'space-4': "1rem";
164
+ readonly 'space-5': "1.25rem";
165
+ readonly 'space-6': "1.5rem";
166
+ readonly 'space-8': "2rem";
167
+ readonly 'space-10': "2.5rem";
168
+ readonly 'space-12': "3rem";
169
+ readonly 'space-14': "3.5rem";
170
+ readonly 'space-16': "4rem";
171
+ readonly 'space-20': "5rem";
172
+ readonly 'space-24': "6rem";
173
+ readonly 'space-32': "8rem";
176
174
  readonly 'golden-1': "0.25rem";
177
175
  readonly 'golden-2': "0.405rem";
178
176
  readonly 'golden-3': "0.654rem";
@@ -376,32 +374,31 @@ export declare const cssVars: {
376
374
  readonly '--chrome-dot-red': "rgb(239 68 68 / .6)";
377
375
  readonly '--chrome-dot-yellow': "rgb(234 179 8 / .6)";
378
376
  readonly '--chrome-dot-green': "rgb(34 197 94 / .6)";
379
- readonly '--type-scale': "1";
380
- readonly '--text-xs': "calc(0.6875rem * var(--type-scale, 1))";
381
- readonly '--leading-xs': "calc(1rem * var(--type-scale, 1))";
382
- readonly '--text-sm': "calc(0.8125rem * var(--type-scale, 1))";
383
- readonly '--leading-sm': "calc(1.15rem * var(--type-scale, 1))";
384
- readonly '--text-base': "calc(0.875rem * var(--type-scale, 1))";
385
- readonly '--leading-base': "calc(1.35rem * var(--type-scale, 1))";
386
- readonly '--text-lg': "calc(0.9375rem * var(--type-scale, 1))";
387
- readonly '--leading-lg': "calc(1.4rem * var(--type-scale, 1))";
388
- readonly '--text-xl': "calc(1.0625rem * var(--type-scale, 1))";
389
- readonly '--leading-xl': "calc(1.55rem * var(--type-scale, 1))";
390
- readonly '--text-2xl': "calc(1.3125rem * var(--type-scale, 1))";
391
- readonly '--leading-2xl': "calc(1.7rem * var(--type-scale, 1))";
392
- readonly '--text-3xl': "calc(1.625rem * var(--type-scale, 1))";
393
- readonly '--leading-3xl': "calc(1.95rem * var(--type-scale, 1))";
394
- readonly '--text-4xl': "calc(2rem * var(--type-scale, 1))";
395
- readonly '--leading-4xl': "calc(2.25rem * var(--type-scale, 1))";
396
- readonly '--text-5xl': "calc(2.5rem * var(--type-scale, 1))";
377
+ readonly '--text-xs': "0.6875rem";
378
+ readonly '--leading-xs': "1rem";
379
+ readonly '--text-sm': "0.8125rem";
380
+ readonly '--leading-sm': "1.15rem";
381
+ readonly '--text-base': "0.875rem";
382
+ readonly '--leading-base': "1.35rem";
383
+ readonly '--text-lg': "0.9375rem";
384
+ readonly '--leading-lg': "1.4rem";
385
+ readonly '--text-xl': "1.0625rem";
386
+ readonly '--leading-xl': "1.55rem";
387
+ readonly '--text-2xl': "1.3125rem";
388
+ readonly '--leading-2xl': "1.7rem";
389
+ readonly '--text-3xl': "1.625rem";
390
+ readonly '--leading-3xl': "1.95rem";
391
+ readonly '--text-4xl': "2rem";
392
+ readonly '--leading-4xl': "2.25rem";
393
+ readonly '--text-5xl': "2.5rem";
397
394
  readonly '--leading-5xl': "1.05";
398
- readonly '--text-6xl': "calc(3.25rem * var(--type-scale, 1))";
395
+ readonly '--text-6xl': "3.25rem";
399
396
  readonly '--leading-6xl': "1";
400
- readonly '--text-7xl': "calc(4rem * var(--type-scale, 1))";
397
+ readonly '--text-7xl': "4rem";
401
398
  readonly '--leading-7xl': "1";
402
- readonly '--text-8xl': "calc(5.25rem * var(--type-scale, 1))";
399
+ readonly '--text-8xl': "5.25rem";
403
400
  readonly '--leading-8xl': "1";
404
- readonly '--text-9xl': "calc(7rem * var(--type-scale, 1))";
401
+ readonly '--text-9xl': "7rem";
405
402
  readonly '--leading-9xl': "1";
406
403
  readonly '--font-size-xs': "var(--text-xs)";
407
404
  readonly '--font-size-sm': "var(--text-sm)";
@@ -439,22 +436,21 @@ export declare const cssVars: {
439
436
  readonly '--type-caption': "400 var(--text-xs)/var(--leading-xs) var(--font-sans)";
440
437
  readonly '--type-code': "400 var(--text-sm)/var(--leading-relaxed) var(--font-mono)";
441
438
  readonly '--type-eyebrow': "600 0.625rem/1 var(--font-sans)";
442
- readonly '--density': "1";
443
439
  readonly '--space-0': "0";
444
- readonly '--space-1': "calc(0.25rem * var(--density, 1))";
445
- readonly '--space-2': "calc(0.5rem * var(--density, 1))";
446
- readonly '--space-3': "calc(0.75rem * var(--density, 1))";
447
- readonly '--space-4': "calc(1rem * var(--density, 1))";
448
- readonly '--space-5': "calc(1.25rem * var(--density, 1))";
449
- readonly '--space-6': "calc(1.5rem * var(--density, 1))";
450
- readonly '--space-8': "calc(2rem * var(--density, 1))";
451
- readonly '--space-10': "calc(2.5rem * var(--density, 1))";
452
- readonly '--space-12': "calc(3rem * var(--density, 1))";
453
- readonly '--space-14': "calc(3.5rem * var(--density, 1))";
454
- readonly '--space-16': "calc(4rem * var(--density, 1))";
455
- readonly '--space-20': "calc(5rem * var(--density, 1))";
456
- readonly '--space-24': "calc(6rem * var(--density, 1))";
457
- readonly '--space-32': "calc(8rem * var(--density, 1))";
440
+ readonly '--space-1': "0.25rem";
441
+ readonly '--space-2': "0.5rem";
442
+ readonly '--space-3': "0.75rem";
443
+ readonly '--space-4': "1rem";
444
+ readonly '--space-5': "1.25rem";
445
+ readonly '--space-6': "1.5rem";
446
+ readonly '--space-8': "2rem";
447
+ readonly '--space-10': "2.5rem";
448
+ readonly '--space-12': "3rem";
449
+ readonly '--space-14': "3.5rem";
450
+ readonly '--space-16': "4rem";
451
+ readonly '--space-20': "5rem";
452
+ readonly '--space-24': "6rem";
453
+ readonly '--space-32': "8rem";
458
454
  readonly '--golden-1': "0.25rem";
459
455
  readonly '--golden-2': "0.405rem";
460
456
  readonly '--golden-3': "0.654rem";
package/dist/tokens.gen.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tokens.gen.d.ts","sourceRoot":"","sources":["../src/tokens.gen.ts"],"names":[],"mappings":"AAIA,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyFT,CAAA;AAEV,0EAA0E;AAC1E,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEb,CAAA;AAEV,oEAAoE;AACpE,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CV,CAAA;AAEV,8DAA8D;AAC9D,eAAO,MAAM,IAAI;;;;;;;;;;;;CAYP,CAAA;AAEV,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;CAST,CAAA;AAEV,wEAAwE;AACxE,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAoBZ,CAAA;AAEV,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAaT,CAAA;AAEV,6DAA6D;AAC7D,eAAO,MAAM,MAAM;;;;;;;;;;;;CAYT,CAAA;AAEV,gEAAgE;AAChE,eAAO,MAAM,KAAK;;;;;;CAMR,CAAA;AAEV,8DAA8D;AAC9D,eAAO,MAAM,IAAI,IAEP,CAAA;AAEV,sFAAsF;AACtF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoQV,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,OAAO,CAAA"}
1
+ {"version":3,"file":"tokens.gen.d.ts","sourceRoot":"","sources":["../src/tokens.gen.ts"],"names":[],"mappings":"AAIA,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyFT,CAAA;AAEV,0EAA0E;AAC1E,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Db,CAAA;AAEV,oEAAoE;AACpE,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CV,CAAA;AAEV,8DAA8D;AAC9D,eAAO,MAAM,IAAI;;;;;;;;;;;;CAYP,CAAA;AAEV,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;CAST,CAAA;AAEV,wEAAwE;AACxE,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAoBZ,CAAA;AAEV,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAaT,CAAA;AAEV,6DAA6D;AAC7D,eAAO,MAAM,MAAM;;;;;;;;;;;;CAYT,CAAA;AAEV,gEAAgE;AAChE,eAAO,MAAM,KAAK;;;;;;CAMR,CAAA;AAEV,8DAA8D;AAC9D,eAAO,MAAM,IAAI,IAEP,CAAA;AAEV,sFAAsF;AACtF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkQV,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,OAAO,CAAA"}
package/dist/tokens.gen.js CHANGED
@@ -94,32 +94,31 @@ export const colors = {
94
94
  };
95
95
  /** typography tokens (from tokens/typography.css). Values are raw CSS. */
96
96
  export const typography = {
97
- 'type-scale': '1',
98
- 'text-xs': 'calc(0.6875rem * var(--type-scale, 1))',
99
- 'leading-xs': 'calc(1rem * var(--type-scale, 1))',
100
- 'text-sm': 'calc(0.8125rem * var(--type-scale, 1))',
101
- 'leading-sm': 'calc(1.15rem * var(--type-scale, 1))',
102
- 'text-base': 'calc(0.875rem * var(--type-scale, 1))',
103
- 'leading-base': 'calc(1.35rem * var(--type-scale, 1))',
104
- 'text-lg': 'calc(0.9375rem * var(--type-scale, 1))',
105
- 'leading-lg': 'calc(1.4rem * var(--type-scale, 1))',
106
- 'text-xl': 'calc(1.0625rem * var(--type-scale, 1))',
107
- 'leading-xl': 'calc(1.55rem * var(--type-scale, 1))',
108
- 'text-2xl': 'calc(1.3125rem * var(--type-scale, 1))',
109
- 'leading-2xl': 'calc(1.7rem * var(--type-scale, 1))',
110
- 'text-3xl': 'calc(1.625rem * var(--type-scale, 1))',
111
- 'leading-3xl': 'calc(1.95rem * var(--type-scale, 1))',
112
- 'text-4xl': 'calc(2rem * var(--type-scale, 1))',
113
- 'leading-4xl': 'calc(2.25rem * var(--type-scale, 1))',
114
- 'text-5xl': 'calc(2.5rem * var(--type-scale, 1))',
97
+ 'text-xs': '0.6875rem',
98
+ 'leading-xs': '1rem',
99
+ 'text-sm': '0.8125rem',
100
+ 'leading-sm': '1.15rem',
101
+ 'text-base': '0.875rem',
102
+ 'leading-base': '1.35rem',
103
+ 'text-lg': '0.9375rem',
104
+ 'leading-lg': '1.4rem',
105
+ 'text-xl': '1.0625rem',
106
+ 'leading-xl': '1.55rem',
107
+ 'text-2xl': '1.3125rem',
108
+ 'leading-2xl': '1.7rem',
109
+ 'text-3xl': '1.625rem',
110
+ 'leading-3xl': '1.95rem',
111
+ 'text-4xl': '2rem',
112
+ 'leading-4xl': '2.25rem',
113
+ 'text-5xl': '2.5rem',
115
114
  'leading-5xl': '1.05',
116
- 'text-6xl': 'calc(3.25rem * var(--type-scale, 1))',
115
+ 'text-6xl': '3.25rem',
117
116
  'leading-6xl': '1',
118
- 'text-7xl': 'calc(4rem * var(--type-scale, 1))',
117
+ 'text-7xl': '4rem',
119
118
  'leading-7xl': '1',
120
- 'text-8xl': 'calc(5.25rem * var(--type-scale, 1))',
119
+ 'text-8xl': '5.25rem',
121
120
  'leading-8xl': '1',
122
- 'text-9xl': 'calc(7rem * var(--type-scale, 1))',
121
+ 'text-9xl': '7rem',
123
122
  'leading-9xl': '1',
124
123
  'font-size-xs': 'var(--text-xs)',
125
124
  'font-size-sm': 'var(--text-sm)',
@@ -160,22 +159,21 @@ export const typography = {
160
159
  };
161
160
  /** spacing tokens (from tokens/spacing.css). Values are raw CSS. */
162
161
  export const spacing = {
163
- 'density': '1',
164
162
  'space-0': '0',
165
- 'space-1': 'calc(0.25rem * var(--density, 1))',
166
- 'space-2': 'calc(0.5rem * var(--density, 1))',
167
- 'space-3': 'calc(0.75rem * var(--density, 1))',
168
- 'space-4': 'calc(1rem * var(--density, 1))',
169
- 'space-5': 'calc(1.25rem * var(--density, 1))',
170
- 'space-6': 'calc(1.5rem * var(--density, 1))',
171
- 'space-8': 'calc(2rem * var(--density, 1))',
172
- 'space-10': 'calc(2.5rem * var(--density, 1))',
173
- 'space-12': 'calc(3rem * var(--density, 1))',
174
- 'space-14': 'calc(3.5rem * var(--density, 1))',
175
- 'space-16': 'calc(4rem * var(--density, 1))',
176
- 'space-20': 'calc(5rem * var(--density, 1))',
177
- 'space-24': 'calc(6rem * var(--density, 1))',
178
- 'space-32': 'calc(8rem * var(--density, 1))',
163
+ 'space-1': '0.25rem',
164
+ 'space-2': '0.5rem',
165
+ 'space-3': '0.75rem',
166
+ 'space-4': '1rem',
167
+ 'space-5': '1.25rem',
168
+ 'space-6': '1.5rem',
169
+ 'space-8': '2rem',
170
+ 'space-10': '2.5rem',
171
+ 'space-12': '3rem',
172
+ 'space-14': '3.5rem',
173
+ 'space-16': '4rem',
174
+ 'space-20': '5rem',
175
+ 'space-24': '6rem',
176
+ 'space-32': '8rem',
179
177
  'golden-1': '0.25rem',
180
178
  'golden-2': '0.405rem',
181
179
  'golden-3': '0.654rem',
@@ -379,32 +377,31 @@ export const cssVars = {
379
377
  '--chrome-dot-red': 'rgb(239 68 68 / .6)',
380
378
  '--chrome-dot-yellow': 'rgb(234 179 8 / .6)',
381
379
  '--chrome-dot-green': 'rgb(34 197 94 / .6)',
382
- '--type-scale': '1',
383
- '--text-xs': 'calc(0.6875rem * var(--type-scale, 1))',
384
- '--leading-xs': 'calc(1rem * var(--type-scale, 1))',
385
- '--text-sm': 'calc(0.8125rem * var(--type-scale, 1))',
386
- '--leading-sm': 'calc(1.15rem * var(--type-scale, 1))',
387
- '--text-base': 'calc(0.875rem * var(--type-scale, 1))',
388
- '--leading-base': 'calc(1.35rem * var(--type-scale, 1))',
389
- '--text-lg': 'calc(0.9375rem * var(--type-scale, 1))',
390
- '--leading-lg': 'calc(1.4rem * var(--type-scale, 1))',
391
- '--text-xl': 'calc(1.0625rem * var(--type-scale, 1))',
392
- '--leading-xl': 'calc(1.55rem * var(--type-scale, 1))',
393
- '--text-2xl': 'calc(1.3125rem * var(--type-scale, 1))',
394
- '--leading-2xl': 'calc(1.7rem * var(--type-scale, 1))',
395
- '--text-3xl': 'calc(1.625rem * var(--type-scale, 1))',
396
- '--leading-3xl': 'calc(1.95rem * var(--type-scale, 1))',
397
- '--text-4xl': 'calc(2rem * var(--type-scale, 1))',
398
- '--leading-4xl': 'calc(2.25rem * var(--type-scale, 1))',
399
- '--text-5xl': 'calc(2.5rem * var(--type-scale, 1))',
380
+ '--text-xs': '0.6875rem',
381
+ '--leading-xs': '1rem',
382
+ '--text-sm': '0.8125rem',
383
+ '--leading-sm': '1.15rem',
384
+ '--text-base': '0.875rem',
385
+ '--leading-base': '1.35rem',
386
+ '--text-lg': '0.9375rem',
387
+ '--leading-lg': '1.4rem',
388
+ '--text-xl': '1.0625rem',
389
+ '--leading-xl': '1.55rem',
390
+ '--text-2xl': '1.3125rem',
391
+ '--leading-2xl': '1.7rem',
392
+ '--text-3xl': '1.625rem',
393
+ '--leading-3xl': '1.95rem',
394
+ '--text-4xl': '2rem',
395
+ '--leading-4xl': '2.25rem',
396
+ '--text-5xl': '2.5rem',
400
397
  '--leading-5xl': '1.05',
401
- '--text-6xl': 'calc(3.25rem * var(--type-scale, 1))',
398
+ '--text-6xl': '3.25rem',
402
399
  '--leading-6xl': '1',
403
- '--text-7xl': 'calc(4rem * var(--type-scale, 1))',
400
+ '--text-7xl': '4rem',
404
401
  '--leading-7xl': '1',
405
- '--text-8xl': 'calc(5.25rem * var(--type-scale, 1))',
402
+ '--text-8xl': '5.25rem',
406
403
  '--leading-8xl': '1',
407
- '--text-9xl': 'calc(7rem * var(--type-scale, 1))',
404
+ '--text-9xl': '7rem',
408
405
  '--leading-9xl': '1',
409
406
  '--font-size-xs': 'var(--text-xs)',
410
407
  '--font-size-sm': 'var(--text-sm)',
@@ -442,22 +439,21 @@ export const cssVars = {
442
439
  '--type-caption': '400 var(--text-xs)/var(--leading-xs) var(--font-sans)',
443
440
  '--type-code': '400 var(--text-sm)/var(--leading-relaxed) var(--font-mono)',
444
441
  '--type-eyebrow': '600 0.625rem/1 var(--font-sans)',
445
- '--density': '1',
446
442
  '--space-0': '0',
447
- '--space-1': 'calc(0.25rem * var(--density, 1))',
448
- '--space-2': 'calc(0.5rem * var(--density, 1))',
449
- '--space-3': 'calc(0.75rem * var(--density, 1))',
450
- '--space-4': 'calc(1rem * var(--density, 1))',
451
- '--space-5': 'calc(1.25rem * var(--density, 1))',
452
- '--space-6': 'calc(1.5rem * var(--density, 1))',
453
- '--space-8': 'calc(2rem * var(--density, 1))',
454
- '--space-10': 'calc(2.5rem * var(--density, 1))',
455
- '--space-12': 'calc(3rem * var(--density, 1))',
456
- '--space-14': 'calc(3.5rem * var(--density, 1))',
457
- '--space-16': 'calc(4rem * var(--density, 1))',
458
- '--space-20': 'calc(5rem * var(--density, 1))',
459
- '--space-24': 'calc(6rem * var(--density, 1))',
460
- '--space-32': 'calc(8rem * var(--density, 1))',
443
+ '--space-1': '0.25rem',
444
+ '--space-2': '0.5rem',
445
+ '--space-3': '0.75rem',
446
+ '--space-4': '1rem',
447
+ '--space-5': '1.25rem',
448
+ '--space-6': '1.5rem',
449
+ '--space-8': '2rem',
450
+ '--space-10': '2.5rem',
451
+ '--space-12': '3rem',
452
+ '--space-14': '3.5rem',
453
+ '--space-16': '4rem',
454
+ '--space-20': '5rem',
455
+ '--space-24': '6rem',
456
+ '--space-32': '8rem',
461
457
  '--golden-1': '0.25rem',
462
458
  '--golden-2': '0.405rem',
463
459
  '--golden-3': '0.654rem',
package/package.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "name": "@hanzo/design",
3
- "version": "0.4.12",
3
+ "version": "0.5.0",
4
4
  "packageManager": "pnpm@11.17.0",
5
5
  "description": "Hanzo Design System \u2014 monochrome, dark-default tokens + components + brand assets, the single source of truth for every Hanzo surface. CSS + typed programmatic tokens.",
6
- "license": "MIT OR Apache-2.0",
6
+ "license": "BSD-3-Clause",
7
7
  "repository": {
8
8
  "type": "git",
9
9
  "url": "https://github.com/hanzoai/design.git"
@@ -32,8 +32,8 @@
32
32
  },
33
33
  "scripts": {
34
34
  "gen": "node scripts/gen-tokens.mjs",
35
- "test": "node scripts/check-tokens.mjs && node scripts/check-preference.mjs && node scripts/lint.mjs .",
36
- "build": "pnpm gen && pnpm test && tsc -p tsconfig.json && node scripts/check-dist.mjs",
35
+ "test": "node scripts/check-tokens.mjs && node scripts/lint.mjs .",
36
+ "build": "pnpm gen && pnpm test && tsc -p tsconfig.json",
37
37
  "prepublishOnly": "pnpm build",
38
38
  "lint": "node scripts/lint.mjs"
39
39
  },
@@ -70,4 +70,4 @@
70
70
  "bin": {
71
71
  "hanzo-design-lint": "./scripts/lint.mjs"
72
72
  }
73
- }
73
+ }