@hanzo/design 0.5.12 → 0.5.14

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 (9) hide show
  1. package/dist/tokens.gen.d.ts +18 -0
  2. package/dist/tokens.gen.d.ts.map +1 -1
  3. package/dist/tokens.gen.js +18 -0
  4. package/package.json +1 -1
  5. package/src/tokens.gen.ts +18 -0
  6. package/styles.css +39 -0
  7. package/tailwind.css +39 -0
  8. package/tokens/colors.css +19 -0
  9. package/tokens/spacing.css +20 -0
package/dist/tokens.gen.d.ts CHANGED
@@ -15,20 +15,25 @@ export declare const colors: {
15
15
  readonly 'pure-white': "#FFFFFF";
16
16
  readonly 'hanzo-black': "#0A0A0B";
17
17
  readonly 'hanzo-white': "#FFFFFF";
18
+ readonly 'white-03': "rgb(255 255 255 / .03)";
18
19
  readonly 'white-05': "rgb(255 255 255 / .05)";
19
20
  readonly 'white-06': "rgb(255 255 255 / .06)";
20
21
  readonly 'white-08': "rgb(255 255 255 / .08)";
21
22
  readonly 'white-10': "rgb(255 255 255 / .10)";
23
+ readonly 'white-14': "rgb(255 255 255 / .14)";
22
24
  readonly 'white-15': "rgb(255 255 255 / .15)";
23
25
  readonly 'white-16': "rgb(255 255 255 / .16)";
26
+ readonly 'white-18': "rgb(255 255 255 / .18)";
24
27
  readonly 'white-20': "rgb(255 255 255 / .20)";
25
28
  readonly 'white-22': "rgb(255 255 255 / .22)";
26
29
  readonly 'white-30': "rgb(255 255 255 / .30)";
27
30
  readonly 'white-40': "rgb(255 255 255 / .40)";
31
+ readonly 'white-45': "rgb(255 255 255 / .45)";
28
32
  readonly 'white-55': "rgb(255 255 255 / .55)";
29
33
  readonly 'white-60': "rgb(255 255 255 / .60)";
30
34
  readonly 'white-78': "rgb(255 255 255 / .78)";
31
35
  readonly 'white-80': "rgb(255 255 255 / .80)";
36
+ readonly 'white-92': "rgb(255 255 255 / .92)";
32
37
  readonly background: "#0a0a0a";
33
38
  readonly foreground: "#fafafa";
34
39
  readonly card: "#0f0f0f";
@@ -198,6 +203,10 @@ export declare const spacing: {
198
203
  readonly 'hero-y-lg': "4.5rem";
199
204
  readonly 'header-height': "3.5rem";
200
205
  readonly 'tap-target': "44px";
206
+ readonly 'control-height-sm': "32px";
207
+ readonly 'control-height': "36px";
208
+ readonly 'control-height-lg': "40px";
209
+ readonly 'control-height-xl': "52px";
201
210
  readonly 'safe-top': "env(safe-area-inset-top,0px)";
202
211
  readonly 'safe-right': "env(safe-area-inset-right,0px)";
203
212
  readonly 'safe-bottom': "env(safe-area-inset-bottom,0px)";
@@ -313,20 +322,25 @@ export declare const cssVars: {
313
322
  readonly '--pure-white': "#FFFFFF";
314
323
  readonly '--hanzo-black': "#0A0A0B";
315
324
  readonly '--hanzo-white': "#FFFFFF";
325
+ readonly '--white-03': "rgb(255 255 255 / .03)";
316
326
  readonly '--white-05': "rgb(255 255 255 / .05)";
317
327
  readonly '--white-06': "rgb(255 255 255 / .06)";
318
328
  readonly '--white-08': "rgb(255 255 255 / .08)";
319
329
  readonly '--white-10': "rgb(255 255 255 / .10)";
330
+ readonly '--white-14': "rgb(255 255 255 / .14)";
320
331
  readonly '--white-15': "rgb(255 255 255 / .15)";
321
332
  readonly '--white-16': "rgb(255 255 255 / .16)";
333
+ readonly '--white-18': "rgb(255 255 255 / .18)";
322
334
  readonly '--white-20': "rgb(255 255 255 / .20)";
323
335
  readonly '--white-22': "rgb(255 255 255 / .22)";
324
336
  readonly '--white-30': "rgb(255 255 255 / .30)";
325
337
  readonly '--white-40': "rgb(255 255 255 / .40)";
338
+ readonly '--white-45': "rgb(255 255 255 / .45)";
326
339
  readonly '--white-55': "rgb(255 255 255 / .55)";
327
340
  readonly '--white-60': "rgb(255 255 255 / .60)";
328
341
  readonly '--white-78': "rgb(255 255 255 / .78)";
329
342
  readonly '--white-80': "rgb(255 255 255 / .80)";
343
+ readonly '--white-92': "rgb(255 255 255 / .92)";
330
344
  readonly '--background': "#0a0a0a";
331
345
  readonly '--foreground': "#fafafa";
332
346
  readonly '--card': "#0f0f0f";
@@ -490,6 +504,10 @@ export declare const cssVars: {
490
504
  readonly '--hero-y-lg': "4.5rem";
491
505
  readonly '--header-height': "3.5rem";
492
506
  readonly '--tap-target': "44px";
507
+ readonly '--control-height-sm': "32px";
508
+ readonly '--control-height': "36px";
509
+ readonly '--control-height-lg': "40px";
510
+ readonly '--control-height-xl': "52px";
493
511
  readonly '--safe-top': "env(safe-area-inset-top,0px)";
494
512
  readonly '--safe-right': "env(safe-area-inset-right,0px)";
495
513
  readonly '--safe-bottom': "env(safe-area-inset-bottom,0px)";
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmEb,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;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BZ,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8QV,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8FT,CAAA;AAEV,0EAA0E;AAC1E,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmEb,CAAA;AAEV,oEAAoE;AACpE,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CV,CAAA;AAEV,8DAA8D;AAC9D,eAAO,MAAM,IAAI;;;;;;;;;;;;CAYP,CAAA;AAEV,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;CAST,CAAA;AAEV,wEAAwE;AACxE,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BZ,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuRV,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,OAAO,CAAA"}
package/dist/tokens.gen.js CHANGED
@@ -18,20 +18,25 @@ export const colors = {
18
18
  'pure-white': '#FFFFFF',
19
19
  'hanzo-black': '#0A0A0B',
20
20
  'hanzo-white': '#FFFFFF',
21
+ 'white-03': 'rgb(255 255 255 / .03)',
21
22
  'white-05': 'rgb(255 255 255 / .05)',
22
23
  'white-06': 'rgb(255 255 255 / .06)',
23
24
  'white-08': 'rgb(255 255 255 / .08)',
24
25
  'white-10': 'rgb(255 255 255 / .10)',
26
+ 'white-14': 'rgb(255 255 255 / .14)',
25
27
  'white-15': 'rgb(255 255 255 / .15)',
26
28
  'white-16': 'rgb(255 255 255 / .16)',
29
+ 'white-18': 'rgb(255 255 255 / .18)',
27
30
  'white-20': 'rgb(255 255 255 / .20)',
28
31
  'white-22': 'rgb(255 255 255 / .22)',
29
32
  'white-30': 'rgb(255 255 255 / .30)',
30
33
  'white-40': 'rgb(255 255 255 / .40)',
34
+ 'white-45': 'rgb(255 255 255 / .45)',
31
35
  'white-55': 'rgb(255 255 255 / .55)',
32
36
  'white-60': 'rgb(255 255 255 / .60)',
33
37
  'white-78': 'rgb(255 255 255 / .78)',
34
38
  'white-80': 'rgb(255 255 255 / .80)',
39
+ 'white-92': 'rgb(255 255 255 / .92)',
35
40
  'background': '#0a0a0a',
36
41
  'foreground': '#fafafa',
37
42
  'card': '#0f0f0f',
@@ -201,6 +206,10 @@ export const spacing = {
201
206
  'hero-y-lg': '4.5rem',
202
207
  'header-height': '3.5rem',
203
208
  'tap-target': '44px',
209
+ 'control-height-sm': '32px',
210
+ 'control-height': '36px',
211
+ 'control-height-lg': '40px',
212
+ 'control-height-xl': '52px',
204
213
  'safe-top': 'env(safe-area-inset-top,0px)',
205
214
  'safe-right': 'env(safe-area-inset-right,0px)',
206
215
  'safe-bottom': 'env(safe-area-inset-bottom,0px)',
@@ -316,20 +325,25 @@ export const cssVars = {
316
325
  '--pure-white': '#FFFFFF',
317
326
  '--hanzo-black': '#0A0A0B',
318
327
  '--hanzo-white': '#FFFFFF',
328
+ '--white-03': 'rgb(255 255 255 / .03)',
319
329
  '--white-05': 'rgb(255 255 255 / .05)',
320
330
  '--white-06': 'rgb(255 255 255 / .06)',
321
331
  '--white-08': 'rgb(255 255 255 / .08)',
322
332
  '--white-10': 'rgb(255 255 255 / .10)',
333
+ '--white-14': 'rgb(255 255 255 / .14)',
323
334
  '--white-15': 'rgb(255 255 255 / .15)',
324
335
  '--white-16': 'rgb(255 255 255 / .16)',
336
+ '--white-18': 'rgb(255 255 255 / .18)',
325
337
  '--white-20': 'rgb(255 255 255 / .20)',
326
338
  '--white-22': 'rgb(255 255 255 / .22)',
327
339
  '--white-30': 'rgb(255 255 255 / .30)',
328
340
  '--white-40': 'rgb(255 255 255 / .40)',
341
+ '--white-45': 'rgb(255 255 255 / .45)',
329
342
  '--white-55': 'rgb(255 255 255 / .55)',
330
343
  '--white-60': 'rgb(255 255 255 / .60)',
331
344
  '--white-78': 'rgb(255 255 255 / .78)',
332
345
  '--white-80': 'rgb(255 255 255 / .80)',
346
+ '--white-92': 'rgb(255 255 255 / .92)',
333
347
  '--background': '#0a0a0a',
334
348
  '--foreground': '#fafafa',
335
349
  '--card': '#0f0f0f',
@@ -493,6 +507,10 @@ export const cssVars = {
493
507
  '--hero-y-lg': '4.5rem',
494
508
  '--header-height': '3.5rem',
495
509
  '--tap-target': '44px',
510
+ '--control-height-sm': '32px',
511
+ '--control-height': '36px',
512
+ '--control-height-lg': '40px',
513
+ '--control-height-xl': '52px',
496
514
  '--safe-top': 'env(safe-area-inset-top,0px)',
497
515
  '--safe-right': 'env(safe-area-inset-right,0px)',
498
516
  '--safe-bottom': 'env(safe-area-inset-bottom,0px)',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hanzo/design",
3
- "version": "0.5.12",
3
+ "version": "0.5.14",
4
4
  "packageManager": "pnpm@11.17.0",
5
5
  "description": "Hanzo Design System — monochrome, dark-default tokens + components + brand assets, the single source of truth for every Hanzo surface. CSS + typed programmatic tokens.",
6
6
  "license": "MIT OR Apache-2.0",
package/src/tokens.gen.ts CHANGED
@@ -19,20 +19,25 @@ export const colors = {
19
19
  'pure-white': '#FFFFFF',
20
20
  'hanzo-black': '#0A0A0B',
21
21
  'hanzo-white': '#FFFFFF',
22
+ 'white-03': 'rgb(255 255 255 / .03)',
22
23
  'white-05': 'rgb(255 255 255 / .05)',
23
24
  'white-06': 'rgb(255 255 255 / .06)',
24
25
  'white-08': 'rgb(255 255 255 / .08)',
25
26
  'white-10': 'rgb(255 255 255 / .10)',
27
+ 'white-14': 'rgb(255 255 255 / .14)',
26
28
  'white-15': 'rgb(255 255 255 / .15)',
27
29
  'white-16': 'rgb(255 255 255 / .16)',
30
+ 'white-18': 'rgb(255 255 255 / .18)',
28
31
  'white-20': 'rgb(255 255 255 / .20)',
29
32
  'white-22': 'rgb(255 255 255 / .22)',
30
33
  'white-30': 'rgb(255 255 255 / .30)',
31
34
  'white-40': 'rgb(255 255 255 / .40)',
35
+ 'white-45': 'rgb(255 255 255 / .45)',
32
36
  'white-55': 'rgb(255 255 255 / .55)',
33
37
  'white-60': 'rgb(255 255 255 / .60)',
34
38
  'white-78': 'rgb(255 255 255 / .78)',
35
39
  'white-80': 'rgb(255 255 255 / .80)',
40
+ 'white-92': 'rgb(255 255 255 / .92)',
36
41
  'background': '#0a0a0a',
37
42
  'foreground': '#fafafa',
38
43
  'card': '#0f0f0f',
@@ -204,6 +209,10 @@ export const spacing = {
204
209
  'hero-y-lg': '4.5rem',
205
210
  'header-height': '3.5rem',
206
211
  'tap-target': '44px',
212
+ 'control-height-sm': '32px',
213
+ 'control-height': '36px',
214
+ 'control-height-lg': '40px',
215
+ 'control-height-xl': '52px',
207
216
  'safe-top': 'env(safe-area-inset-top,0px)',
208
217
  'safe-right': 'env(safe-area-inset-right,0px)',
209
218
  'safe-bottom': 'env(safe-area-inset-bottom,0px)',
@@ -329,20 +338,25 @@ export const cssVars = {
329
338
  '--pure-white': '#FFFFFF',
330
339
  '--hanzo-black': '#0A0A0B',
331
340
  '--hanzo-white': '#FFFFFF',
341
+ '--white-03': 'rgb(255 255 255 / .03)',
332
342
  '--white-05': 'rgb(255 255 255 / .05)',
333
343
  '--white-06': 'rgb(255 255 255 / .06)',
334
344
  '--white-08': 'rgb(255 255 255 / .08)',
335
345
  '--white-10': 'rgb(255 255 255 / .10)',
346
+ '--white-14': 'rgb(255 255 255 / .14)',
336
347
  '--white-15': 'rgb(255 255 255 / .15)',
337
348
  '--white-16': 'rgb(255 255 255 / .16)',
349
+ '--white-18': 'rgb(255 255 255 / .18)',
338
350
  '--white-20': 'rgb(255 255 255 / .20)',
339
351
  '--white-22': 'rgb(255 255 255 / .22)',
340
352
  '--white-30': 'rgb(255 255 255 / .30)',
341
353
  '--white-40': 'rgb(255 255 255 / .40)',
354
+ '--white-45': 'rgb(255 255 255 / .45)',
342
355
  '--white-55': 'rgb(255 255 255 / .55)',
343
356
  '--white-60': 'rgb(255 255 255 / .60)',
344
357
  '--white-78': 'rgb(255 255 255 / .78)',
345
358
  '--white-80': 'rgb(255 255 255 / .80)',
359
+ '--white-92': 'rgb(255 255 255 / .92)',
346
360
  '--background': '#0a0a0a',
347
361
  '--foreground': '#fafafa',
348
362
  '--card': '#0f0f0f',
@@ -506,6 +520,10 @@ export const cssVars = {
506
520
  '--hero-y-lg': '4.5rem',
507
521
  '--header-height': '3.5rem',
508
522
  '--tap-target': '44px',
523
+ '--control-height-sm': '32px',
524
+ '--control-height': '36px',
525
+ '--control-height-lg': '40px',
526
+ '--control-height-xl': '52px',
509
527
  '--safe-top': 'env(safe-area-inset-top,0px)',
510
528
  '--safe-right': 'env(safe-area-inset-right,0px)',
511
529
  '--safe-bottom': 'env(safe-area-inset-bottom,0px)',
package/styles.css CHANGED
@@ -56,20 +56,39 @@
56
56
  /* ——— the opacity ladder: the real palette ——— */
57
57
  /* Every rung below .30 is a HAIRLINE or a LIFT — the two things this system
58
58
  draws with. The rungs are the reference's own values, not a rounded ramp. */
59
+ /* The five rungs marked (chrome) below were being retyped as raw rgba in
60
+ @hanzogui/shell's theme.ts, which is the shared bar every Hanzo property
61
+ mounts. That is the same defect this ladder exists to end — a value in two
62
+ places drifts, and this pair already had: the shell's resting hairline sat
63
+ at .06 against this file's .10 for long enough that the bar and the page
64
+ under it drew different hairlines. They are rungs here now, and the shell
65
+ references them, so the chrome has no colour of its own left to drift.
66
+
67
+ They are the shell's OWN measured values, added at the alpha it already
68
+ ships. Snapping them to neighbouring rungs instead would have been a
69
+ silent redesign of the estate's chrome, and two of them carry decisions
70
+ that a round number would have destroyed: .92 is ink deliberately short of
71
+ the .98 hover so a hover still reads as a response, and .03 is the one
72
+ lift that must stay below the .05 hairline it sits inside. */
73
+ --white-03:rgb(255 255 255 / .03); /* (chrome) the raised fill */
59
74
  --white-05:rgb(255 255 255 / .05);
60
75
  --white-06:rgb(255 255 255 / .06);
61
76
  --white-08:rgb(255 255 255 / .08);
62
77
  --white-10:rgb(255 255 255 / .10);
78
+ --white-14:rgb(255 255 255 / .14); /* (chrome) selection wash */
63
79
  --white-15:rgb(255 255 255 / .15);
64
80
  --white-16:rgb(255 255 255 / .16);
81
+ --white-18:rgb(255 255 255 / .18); /* (chrome) selection tint */
65
82
  --white-20:rgb(255 255 255 / .20);
66
83
  --white-22:rgb(255 255 255 / .22);
67
84
  --white-30:rgb(255 255 255 / .30);
68
85
  --white-40:rgb(255 255 255 / .40);
86
+ --white-45:rgb(255 255 255 / .45); /* (chrome) the dimmest ink */
69
87
  --white-55:rgb(255 255 255 / .55);
70
88
  --white-60:rgb(255 255 255 / .60);
71
89
  --white-78:rgb(255 255 255 / .78);
72
90
  --white-80:rgb(255 255 255 / .80);
91
+ --white-92:rgb(255 255 255 / .92); /* (chrome) body ink */
73
92
 
74
93
  /* ——— semantic aliases (dark, the default) ——— */
75
94
  --background:#0a0a0a;
@@ -484,6 +503,26 @@
484
503
  hanzoai/id's stylesheet — one app knowing something the system did not. */
485
504
  --tap-target:44px;
486
505
 
506
+ /* ——— controls ——— */
507
+ /* A control's OWN height, which the floor above does not answer: 44px is the
508
+ smallest a finger may aim at, not the size a thing should be. Nothing named
509
+ the second question, so each surface answered it privately and they drifted
510
+ — @hanzo/ui keeps `CONTROL_H = 36` in TypeScript, hanzoai/app pins a 30px
511
+ `--control-h` over that same 36px library, and hanzoai/id spelled
512
+ `min-height:52px` into three separate rules.
513
+ The first three rungs ARE @hanzo/ui's size table (default/sm/lg), moved
514
+ down to the layer that holds values so a host can answer it once instead of
515
+ each library carrying a private copy. They sit under the tap floor on
516
+ purpose: base.css lifts whichever one is spent to 44px under
517
+ `pointer:coarse`, so one declaration serves a compact pointer control and a
518
+ hittable touch one. -xl is what a surface earns when the control IS the
519
+ content — one field, one button, nothing competing — where the default
520
+ reads as one of a stack rather than as the thing the screen is for. */
521
+ --control-height-sm:32px;
522
+ --control-height:36px;
523
+ --control-height-lg:40px;
524
+ --control-height-xl:52px;
525
+
487
526
  /* ——— safe areas ——— */
488
527
  /* The notch/home-indicator insets, named once. Anything pinned to a viewport
489
528
  edge — a fixed header, a bottom bar, a sheet — adds the matching one. */
package/tailwind.css CHANGED
@@ -79,20 +79,39 @@
79
79
  /* ——— the opacity ladder: the real palette ——— */
80
80
  /* Every rung below .30 is a HAIRLINE or a LIFT — the two things this system
81
81
  draws with. The rungs are the reference's own values, not a rounded ramp. */
82
+ /* The five rungs marked (chrome) below were being retyped as raw rgba in
83
+ @hanzogui/shell's theme.ts, which is the shared bar every Hanzo property
84
+ mounts. That is the same defect this ladder exists to end — a value in two
85
+ places drifts, and this pair already had: the shell's resting hairline sat
86
+ at .06 against this file's .10 for long enough that the bar and the page
87
+ under it drew different hairlines. They are rungs here now, and the shell
88
+ references them, so the chrome has no colour of its own left to drift.
89
+
90
+ They are the shell's OWN measured values, added at the alpha it already
91
+ ships. Snapping them to neighbouring rungs instead would have been a
92
+ silent redesign of the estate's chrome, and two of them carry decisions
93
+ that a round number would have destroyed: .92 is ink deliberately short of
94
+ the .98 hover so a hover still reads as a response, and .03 is the one
95
+ lift that must stay below the .05 hairline it sits inside. */
96
+ --white-03:rgb(255 255 255 / .03); /* (chrome) the raised fill */
82
97
  --white-05:rgb(255 255 255 / .05);
83
98
  --white-06:rgb(255 255 255 / .06);
84
99
  --white-08:rgb(255 255 255 / .08);
85
100
  --white-10:rgb(255 255 255 / .10);
101
+ --white-14:rgb(255 255 255 / .14); /* (chrome) selection wash */
86
102
  --white-15:rgb(255 255 255 / .15);
87
103
  --white-16:rgb(255 255 255 / .16);
104
+ --white-18:rgb(255 255 255 / .18); /* (chrome) selection tint */
88
105
  --white-20:rgb(255 255 255 / .20);
89
106
  --white-22:rgb(255 255 255 / .22);
90
107
  --white-30:rgb(255 255 255 / .30);
91
108
  --white-40:rgb(255 255 255 / .40);
109
+ --white-45:rgb(255 255 255 / .45); /* (chrome) the dimmest ink */
92
110
  --white-55:rgb(255 255 255 / .55);
93
111
  --white-60:rgb(255 255 255 / .60);
94
112
  --white-78:rgb(255 255 255 / .78);
95
113
  --white-80:rgb(255 255 255 / .80);
114
+ --white-92:rgb(255 255 255 / .92); /* (chrome) body ink */
96
115
 
97
116
  /* ——— semantic aliases (dark, the default) ——— */
98
117
  --background:#0a0a0a;
@@ -507,6 +526,26 @@
507
526
  hanzoai/id's stylesheet — one app knowing something the system did not. */
508
527
  --tap-target:44px;
509
528
 
529
+ /* ——— controls ——— */
530
+ /* A control's OWN height, which the floor above does not answer: 44px is the
531
+ smallest a finger may aim at, not the size a thing should be. Nothing named
532
+ the second question, so each surface answered it privately and they drifted
533
+ — @hanzo/ui keeps `CONTROL_H = 36` in TypeScript, hanzoai/app pins a 30px
534
+ `--control-h` over that same 36px library, and hanzoai/id spelled
535
+ `min-height:52px` into three separate rules.
536
+ The first three rungs ARE @hanzo/ui's size table (default/sm/lg), moved
537
+ down to the layer that holds values so a host can answer it once instead of
538
+ each library carrying a private copy. They sit under the tap floor on
539
+ purpose: base.css lifts whichever one is spent to 44px under
540
+ `pointer:coarse`, so one declaration serves a compact pointer control and a
541
+ hittable touch one. -xl is what a surface earns when the control IS the
542
+ content — one field, one button, nothing competing — where the default
543
+ reads as one of a stack rather than as the thing the screen is for. */
544
+ --control-height-sm:32px;
545
+ --control-height:36px;
546
+ --control-height-lg:40px;
547
+ --control-height-xl:52px;
548
+
510
549
  /* ——— safe areas ——— */
511
550
  /* The notch/home-indicator insets, named once. Anything pinned to a viewport
512
551
  edge — a fixed header, a bottom bar, a sheet — adds the matching one. */
package/tokens/colors.css CHANGED
@@ -41,20 +41,39 @@
41
41
  /* ——— the opacity ladder: the real palette ——— */
42
42
  /* Every rung below .30 is a HAIRLINE or a LIFT — the two things this system
43
43
  draws with. The rungs are the reference's own values, not a rounded ramp. */
44
+ /* The five rungs marked (chrome) below were being retyped as raw rgba in
45
+ @hanzogui/shell's theme.ts, which is the shared bar every Hanzo property
46
+ mounts. That is the same defect this ladder exists to end — a value in two
47
+ places drifts, and this pair already had: the shell's resting hairline sat
48
+ at .06 against this file's .10 for long enough that the bar and the page
49
+ under it drew different hairlines. They are rungs here now, and the shell
50
+ references them, so the chrome has no colour of its own left to drift.
51
+
52
+ They are the shell's OWN measured values, added at the alpha it already
53
+ ships. Snapping them to neighbouring rungs instead would have been a
54
+ silent redesign of the estate's chrome, and two of them carry decisions
55
+ that a round number would have destroyed: .92 is ink deliberately short of
56
+ the .98 hover so a hover still reads as a response, and .03 is the one
57
+ lift that must stay below the .05 hairline it sits inside. */
58
+ --white-03:rgb(255 255 255 / .03); /* (chrome) the raised fill */
44
59
  --white-05:rgb(255 255 255 / .05);
45
60
  --white-06:rgb(255 255 255 / .06);
46
61
  --white-08:rgb(255 255 255 / .08);
47
62
  --white-10:rgb(255 255 255 / .10);
63
+ --white-14:rgb(255 255 255 / .14); /* (chrome) selection wash */
48
64
  --white-15:rgb(255 255 255 / .15);
49
65
  --white-16:rgb(255 255 255 / .16);
66
+ --white-18:rgb(255 255 255 / .18); /* (chrome) selection tint */
50
67
  --white-20:rgb(255 255 255 / .20);
51
68
  --white-22:rgb(255 255 255 / .22);
52
69
  --white-30:rgb(255 255 255 / .30);
53
70
  --white-40:rgb(255 255 255 / .40);
71
+ --white-45:rgb(255 255 255 / .45); /* (chrome) the dimmest ink */
54
72
  --white-55:rgb(255 255 255 / .55);
55
73
  --white-60:rgb(255 255 255 / .60);
56
74
  --white-78:rgb(255 255 255 / .78);
57
75
  --white-80:rgb(255 255 255 / .80);
76
+ --white-92:rgb(255 255 255 / .92); /* (chrome) body ink */
58
77
 
59
78
  /* ——— semantic aliases (dark, the default) ——— */
60
79
  --background:#0a0a0a;
package/tokens/spacing.css CHANGED
@@ -68,6 +68,26 @@
68
68
  hanzoai/id's stylesheet — one app knowing something the system did not. */
69
69
  --tap-target:44px;
70
70
 
71
+ /* ——— controls ——— */
72
+ /* A control's OWN height, which the floor above does not answer: 44px is the
73
+ smallest a finger may aim at, not the size a thing should be. Nothing named
74
+ the second question, so each surface answered it privately and they drifted
75
+ — @hanzo/ui keeps `CONTROL_H = 36` in TypeScript, hanzoai/app pins a 30px
76
+ `--control-h` over that same 36px library, and hanzoai/id spelled
77
+ `min-height:52px` into three separate rules.
78
+ The first three rungs ARE @hanzo/ui's size table (default/sm/lg), moved
79
+ down to the layer that holds values so a host can answer it once instead of
80
+ each library carrying a private copy. They sit under the tap floor on
81
+ purpose: base.css lifts whichever one is spent to 44px under
82
+ `pointer:coarse`, so one declaration serves a compact pointer control and a
83
+ hittable touch one. -xl is what a surface earns when the control IS the
84
+ content — one field, one button, nothing competing — where the default
85
+ reads as one of a stack rather than as the thing the screen is for. */
86
+ --control-height-sm:32px;
87
+ --control-height:36px;
88
+ --control-height-lg:40px;
89
+ --control-height-xl:52px;
90
+
71
91
  /* ——— safe areas ——— */
72
92
  /* The notch/home-indicator insets, named once. Anything pinned to a viewport
73
93
  edge — a fixed header, a bottom bar, a sheet — adds the matching one. */