@hanzo/design 0.5.14 → 0.5.16

package/dist/tokens.gen.d.ts

@@ -35,11 +35,11 @@ export declare const colors: {
     readonly 'white-80': "rgb(255 255 255 / .80)";
     readonly 'white-92': "rgb(255 255 255 / .92)";
     readonly background: "#0a0a0a";
-    readonly foreground: "#fafafa";
+    readonly foreground: "#e5e5e5";
     readonly card: "#0f0f0f";
-    readonly 'card-foreground': "#fafafa";
+    readonly 'card-foreground': "#e5e5e5";
     readonly popover: "#0f0f0f";
-    readonly 'popover-foreground': "#fafafa";
+    readonly 'popover-foreground': "#e5e5e5";
     readonly primary: "#fafafa";
     readonly 'primary-hover': "#e5e5e5";
     readonly 'primary-foreground': "#0a0a0a";
@@ -304,7 +304,9 @@ export declare const fonts: {
     readonly 'font-feature-settings': "\"ss01\",\"ss02\",\"cv01\",\"cv02\",\"cv03\"";
 };
 /** base tokens (from tokens/base.css). Values are raw CSS. */
-export declare const base: {};
+export declare const base: {
+    readonly 'ring-offset': "-2px";
+};
 /** Every token, keyed by its literal CSS custom-property name ('--background', …). */
 export declare const cssVars: {
     readonly '--neutral-50': "#FAFAFA";
@@ -342,11 +344,11 @@ export declare const cssVars: {
     readonly '--white-80': "rgb(255 255 255 / .80)";
     readonly '--white-92': "rgb(255 255 255 / .92)";
     readonly '--background': "#0a0a0a";
-    readonly '--foreground': "#fafafa";
+    readonly '--foreground': "#e5e5e5";
     readonly '--card': "#0f0f0f";
-    readonly '--card-foreground': "#fafafa";
+    readonly '--card-foreground': "#e5e5e5";
     readonly '--popover': "#0f0f0f";
-    readonly '--popover-foreground': "#fafafa";
+    readonly '--popover-foreground': "#e5e5e5";
     readonly '--primary': "#fafafa";
     readonly '--primary-hover': "#e5e5e5";
     readonly '--primary-foreground': "#0a0a0a";
@@ -585,6 +587,7 @@ export declare const cssVars: {
     readonly '--font-mono': "\"Geist Mono\",ui-monospace,SFMono-Regular,monospace";
     readonly '--font-serif': "Georgia,serif";
     readonly '--font-feature-settings': "\"ss01\",\"ss02\",\"cv01\",\"cv02\",\"cv03\"";
+    readonly '--ring-offset': "-2px";
 };
 export type CssVarName = keyof typeof cssVars;
 //# sourceMappingURL=tokens.gen.d.ts.map

package/dist/tokens.gen.d.ts.map

@@ -1 +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"}
+{"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;;CAEP,CAAA;AAEV,sFAAsF;AACtF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwRV,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,OAAO,CAAA"}

package/dist/tokens.gen.js

@@ -38,11 +38,11 @@ export const colors = {
     'white-80': 'rgb(255 255 255 / .80)',
     'white-92': 'rgb(255 255 255 / .92)',
     'background': '#0a0a0a',
-    'foreground': '#fafafa',
+    'foreground': '#e5e5e5',
     'card': '#0f0f0f',
-    'card-foreground': '#fafafa',
+    'card-foreground': '#e5e5e5',
     'popover': '#0f0f0f',
-    'popover-foreground': '#fafafa',
+    'popover-foreground': '#e5e5e5',
     'primary': '#fafafa',
     'primary-hover': '#e5e5e5',
     'primary-foreground': '#0a0a0a',
@@ -307,7 +307,9 @@ export const fonts = {
     'font-feature-settings': '"ss01","ss02","cv01","cv02","cv03"',
 };
 /** base tokens (from tokens/base.css). Values are raw CSS. */
-export const base = {};
+export const base = {
+    'ring-offset': '-2px',
+};
 /** Every token, keyed by its literal CSS custom-property name ('--background', …). */
 export const cssVars = {
     '--neutral-50': '#FAFAFA',
@@ -345,11 +347,11 @@ export const cssVars = {
     '--white-80': 'rgb(255 255 255 / .80)',
     '--white-92': 'rgb(255 255 255 / .92)',
     '--background': '#0a0a0a',
-    '--foreground': '#fafafa',
+    '--foreground': '#e5e5e5',
     '--card': '#0f0f0f',
-    '--card-foreground': '#fafafa',
+    '--card-foreground': '#e5e5e5',
     '--popover': '#0f0f0f',
-    '--popover-foreground': '#fafafa',
+    '--popover-foreground': '#e5e5e5',
     '--primary': '#fafafa',
     '--primary-hover': '#e5e5e5',
     '--primary-foreground': '#0a0a0a',
@@ -588,4 +590,5 @@ export const cssVars = {
     '--font-mono': '"Geist Mono",ui-monospace,SFMono-Regular,monospace',
     '--font-serif': 'Georgia,serif',
     '--font-feature-settings': '"ss01","ss02","cv01","cv02","cv03"',
+    '--ring-offset': '-2px',
 };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@hanzo/design",
-  "version": "0.5.14",
+  "version": "0.5.16",
   "packageManager": "pnpm@11.17.0",
-  "description": "Hanzo Design System — monochrome, dark-default tokens + components + brand assets, the single source of truth for every Hanzo surface. CSS + typed programmatic tokens.",
+  "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.",
   "license": "MIT OR Apache-2.0",
   "repository": {
     "type": "git",

package/src/tokens.gen.ts

@@ -39,11 +39,11 @@ export const colors = {
   'white-80': 'rgb(255 255 255 / .80)',
   'white-92': 'rgb(255 255 255 / .92)',
   'background': '#0a0a0a',
-  'foreground': '#fafafa',
+  'foreground': '#e5e5e5',
   'card': '#0f0f0f',
-  'card-foreground': '#fafafa',
+  'card-foreground': '#e5e5e5',
   'popover': '#0f0f0f',
-  'popover-foreground': '#fafafa',
+  'popover-foreground': '#e5e5e5',
   'primary': '#fafafa',
   'primary-hover': '#e5e5e5',
   'primary-foreground': '#0a0a0a',
@@ -318,7 +318,7 @@ export const fonts = {
 
 /** base tokens (from tokens/base.css). Values are raw CSS. */
 export const base = {
-
+  'ring-offset': '-2px',
 } as const
 
 /** Every token, keyed by its literal CSS custom-property name ('--background', …). */
@@ -358,11 +358,11 @@ export const cssVars = {
   '--white-80': 'rgb(255 255 255 / .80)',
   '--white-92': 'rgb(255 255 255 / .92)',
   '--background': '#0a0a0a',
-  '--foreground': '#fafafa',
+  '--foreground': '#e5e5e5',
   '--card': '#0f0f0f',
-  '--card-foreground': '#fafafa',
+  '--card-foreground': '#e5e5e5',
   '--popover': '#0f0f0f',
-  '--popover-foreground': '#fafafa',
+  '--popover-foreground': '#e5e5e5',
   '--primary': '#fafafa',
   '--primary-hover': '#e5e5e5',
   '--primary-foreground': '#0a0a0a',
@@ -601,6 +601,7 @@ export const cssVars = {
   '--font-mono': '"Geist Mono",ui-monospace,SFMono-Regular,monospace',
   '--font-serif': 'Georgia,serif',
   '--font-feature-settings': '"ss01","ss02","cv01","cv02","cv03"',
+  '--ring-offset': '-2px',
 } as const
 
 export type CssVarName = keyof typeof cssVars

package/styles.css

@@ -92,11 +92,20 @@
 
   /* ——— semantic aliases (dark, the default) ——— */
   --background:#0a0a0a;
-  --foreground:#fafafa;
+  /* READING ink, one rung below the top of the ramp. The note at the head of this
+     file already made this argument once — #ffffff on #000000 halates, so #fafafa
+     — and the argument does not stop being true at 19.0:1. Every heading and
+     paragraph on every surface was set in the brightest ink the system has, while
+     the CHROME beside them draws body text at --white-92; a page read as glare
+     against its own header. #e5e5e5 is the neutral-200 rung this file already
+     spends on --primary-hover, so the ramp gains no new value: 15.7:1 on the page,
+     15.2:1 on a card, both more than twice the 7:1 AAA asks of body text.
+     Something that genuinely needs the brightest ink names --primary. */
+  --foreground:#e5e5e5;
   --card:#0f0f0f;
-  --card-foreground:#fafafa;
+  --card-foreground:#e5e5e5;
   --popover:#0f0f0f;
-  --popover-foreground:#fafafa;
+  --popover-foreground:#e5e5e5;
   --primary:#fafafa;
   /* A 5% step, not the 16% this used to be. A filled button's fill is already
      the top of the ink ramp, so the only directions available on hover are
@@ -970,6 +979,22 @@
        its buttons at 8-10px and nothing at 6px except 22px chips. */
     border-radius:var(--radius-md);
     padding:0 var(--space-3);
+    /* A field's ring is drawn INSIDE its own box. The one focus rule below
+       reads this; nothing else about the indicator changes.
+
+       A field lives in containers a button does not — composers, palettes and
+       panels that round their corners with `overflow:hidden`. An outline at a
+       POSITIVE offset is painted outside the border box, so any such ancestor
+       clips it, and the computed style still says `2px solid` while nothing is
+       drawn: a chat composer measured byte-identical screenshots focused and
+       unfocused, and a search pill kept only its left and right edges. A
+       negative offset cannot be clipped by anything, so a field needs to know
+       nothing about what contains it.
+
+       -2 against a 2px ring lays the outline over the outermost 2px of the box,
+       so it REPLACES the 1px edge for as long as focus is there rather than
+       drawing a second line a pixel inside the first. */
+    --ring-offset:-2px;
   }
   :where(textarea){padding:var(--space-2) var(--space-3);resize:vertical}
   /* A field has NO focus rule of its own — see the ring at the bottom of this
@@ -1036,6 +1061,11 @@
      canvas and clears the 2px perimeter WCAG 2.4.13 asks for; the gate in
      check-tokens holds --ring to that and nothing else here may weaken it.
 
+     WHERE the ring sits is the one thing that varies, and it varies as a VALUE
+     the element carries, never as a second rule: `--ring-offset` defaults to 2
+     and a field sets it to -2 (see the field block above). Two rules is what
+     0.4.9 removed, and a second one here would be the same defect again.
+
      There were two rules until 0.4.9, and they collided invisibly. Both computed
      to (0,1,0) — :where() zeroes whatever it wraps, leaving one pseudo-class on
      each side — so the cascade fell through to SOURCE ORDER inside this layer,
@@ -1044,7 +1074,7 @@
      drew BOTH the ring and the edge+halo. Each rule read as correct alone, which
      is why it survived review in both files; the defect existed only in their
      order. One rule cannot disagree with itself. */
-  :focus-visible{outline:2px solid var(--ring);outline-offset:2px}
+  :focus-visible{outline:2px solid var(--ring);outline-offset:var(--ring-offset,2px)}
   /* --white-20 is white-on-white in the light theme, so selection reads through
      --selection, which BOTH themes define. */
   ::selection{background:var(--selection);color:var(--text-primary)}

package/tailwind.css

@@ -115,11 +115,20 @@
 
   /* ——— semantic aliases (dark, the default) ——— */
   --background:#0a0a0a;
-  --foreground:#fafafa;
+  /* READING ink, one rung below the top of the ramp. The note at the head of this
+     file already made this argument once — #ffffff on #000000 halates, so #fafafa
+     — and the argument does not stop being true at 19.0:1. Every heading and
+     paragraph on every surface was set in the brightest ink the system has, while
+     the CHROME beside them draws body text at --white-92; a page read as glare
+     against its own header. #e5e5e5 is the neutral-200 rung this file already
+     spends on --primary-hover, so the ramp gains no new value: 15.7:1 on the page,
+     15.2:1 on a card, both more than twice the 7:1 AAA asks of body text.
+     Something that genuinely needs the brightest ink names --primary. */
+  --foreground:#e5e5e5;
   --card:#0f0f0f;
-  --card-foreground:#fafafa;
+  --card-foreground:#e5e5e5;
   --popover:#0f0f0f;
-  --popover-foreground:#fafafa;
+  --popover-foreground:#e5e5e5;
   --primary:#fafafa;
   /* A 5% step, not the 16% this used to be. A filled button's fill is already
      the top of the ink ramp, so the only directions available on hover are
@@ -993,6 +1002,22 @@
        its buttons at 8-10px and nothing at 6px except 22px chips. */
     border-radius:var(--radius-md);
     padding:0 var(--space-3);
+    /* A field's ring is drawn INSIDE its own box. The one focus rule below
+       reads this; nothing else about the indicator changes.
+
+       A field lives in containers a button does not — composers, palettes and
+       panels that round their corners with `overflow:hidden`. An outline at a
+       POSITIVE offset is painted outside the border box, so any such ancestor
+       clips it, and the computed style still says `2px solid` while nothing is
+       drawn: a chat composer measured byte-identical screenshots focused and
+       unfocused, and a search pill kept only its left and right edges. A
+       negative offset cannot be clipped by anything, so a field needs to know
+       nothing about what contains it.
+
+       -2 against a 2px ring lays the outline over the outermost 2px of the box,
+       so it REPLACES the 1px edge for as long as focus is there rather than
+       drawing a second line a pixel inside the first. */
+    --ring-offset:-2px;
   }
   :where(textarea){padding:var(--space-2) var(--space-3);resize:vertical}
   /* A field has NO focus rule of its own — see the ring at the bottom of this
@@ -1059,6 +1084,11 @@
      canvas and clears the 2px perimeter WCAG 2.4.13 asks for; the gate in
      check-tokens holds --ring to that and nothing else here may weaken it.
 
+     WHERE the ring sits is the one thing that varies, and it varies as a VALUE
+     the element carries, never as a second rule: `--ring-offset` defaults to 2
+     and a field sets it to -2 (see the field block above). Two rules is what
+     0.4.9 removed, and a second one here would be the same defect again.
+
      There were two rules until 0.4.9, and they collided invisibly. Both computed
      to (0,1,0) — :where() zeroes whatever it wraps, leaving one pseudo-class on
      each side — so the cascade fell through to SOURCE ORDER inside this layer,
@@ -1067,7 +1097,7 @@
      drew BOTH the ring and the edge+halo. Each rule read as correct alone, which
      is why it survived review in both files; the defect existed only in their
      order. One rule cannot disagree with itself. */
-  :focus-visible{outline:2px solid var(--ring);outline-offset:2px}
+  :focus-visible{outline:2px solid var(--ring);outline-offset:var(--ring-offset,2px)}
   /* --white-20 is white-on-white in the light theme, so selection reads through
      --selection, which BOTH themes define. */
   ::selection{background:var(--selection);color:var(--text-primary)}

package/tokens/base.css

@@ -97,6 +97,22 @@
        its buttons at 8-10px and nothing at 6px except 22px chips. */
     border-radius:var(--radius-md);
     padding:0 var(--space-3);
+    /* A field's ring is drawn INSIDE its own box. The one focus rule below
+       reads this; nothing else about the indicator changes.
+
+       A field lives in containers a button does not — composers, palettes and
+       panels that round their corners with `overflow:hidden`. An outline at a
+       POSITIVE offset is painted outside the border box, so any such ancestor
+       clips it, and the computed style still says `2px solid` while nothing is
+       drawn: a chat composer measured byte-identical screenshots focused and
+       unfocused, and a search pill kept only its left and right edges. A
+       negative offset cannot be clipped by anything, so a field needs to know
+       nothing about what contains it.
+
+       -2 against a 2px ring lays the outline over the outermost 2px of the box,
+       so it REPLACES the 1px edge for as long as focus is there rather than
+       drawing a second line a pixel inside the first. */
+    --ring-offset:-2px;
   }
   :where(textarea){padding:var(--space-2) var(--space-3);resize:vertical}
   /* A field has NO focus rule of its own — see the ring at the bottom of this
@@ -163,6 +179,11 @@
      canvas and clears the 2px perimeter WCAG 2.4.13 asks for; the gate in
      check-tokens holds --ring to that and nothing else here may weaken it.
 
+     WHERE the ring sits is the one thing that varies, and it varies as a VALUE
+     the element carries, never as a second rule: `--ring-offset` defaults to 2
+     and a field sets it to -2 (see the field block above). Two rules is what
+     0.4.9 removed, and a second one here would be the same defect again.
+
      There were two rules until 0.4.9, and they collided invisibly. Both computed
      to (0,1,0) — :where() zeroes whatever it wraps, leaving one pseudo-class on
      each side — so the cascade fell through to SOURCE ORDER inside this layer,
@@ -171,7 +192,7 @@
      drew BOTH the ring and the edge+halo. Each rule read as correct alone, which
      is why it survived review in both files; the defect existed only in their
      order. One rule cannot disagree with itself. */
-  :focus-visible{outline:2px solid var(--ring);outline-offset:2px}
+  :focus-visible{outline:2px solid var(--ring);outline-offset:var(--ring-offset,2px)}
   /* --white-20 is white-on-white in the light theme, so selection reads through
      --selection, which BOTH themes define. */
   ::selection{background:var(--selection);color:var(--text-primary)}

package/tokens/colors.css

@@ -77,11 +77,20 @@
 
   /* ——— semantic aliases (dark, the default) ——— */
   --background:#0a0a0a;
-  --foreground:#fafafa;
+  /* READING ink, one rung below the top of the ramp. The note at the head of this
+     file already made this argument once — #ffffff on #000000 halates, so #fafafa
+     — and the argument does not stop being true at 19.0:1. Every heading and
+     paragraph on every surface was set in the brightest ink the system has, while
+     the CHROME beside them draws body text at --white-92; a page read as glare
+     against its own header. #e5e5e5 is the neutral-200 rung this file already
+     spends on --primary-hover, so the ramp gains no new value: 15.7:1 on the page,
+     15.2:1 on a card, both more than twice the 7:1 AAA asks of body text.
+     Something that genuinely needs the brightest ink names --primary. */
+  --foreground:#e5e5e5;
   --card:#0f0f0f;
-  --card-foreground:#fafafa;
+  --card-foreground:#e5e5e5;
   --popover:#0f0f0f;
-  --popover-foreground:#fafafa;
+  --popover-foreground:#e5e5e5;
   --primary:#fafafa;
   /* A 5% step, not the 16% this used to be. A filled button's fill is already
      the top of the ink ramp, so the only directions available on hover are