@hanzo/ui 8.0.53 → 8.0.55

package/dist/gui-config.js

@@ -139,11 +139,11 @@ for (const [k, v] of Object.entries(STEP)) {
 space.$true = STEP['4'];
 space['-true'] = -STEP['4'];
 /**
- * TWO RUNGS OF THE NUMBERED RAMP UNDID A TOKEN DECISION, so they are re-based.
+ * THREE RUNGS OF THE NUMBERED RAMP UNDID A TOKEN DECISION, so they are re-based.
  *
  * `$color1..$color12` is a generic monotonic ramp inherited from upstream
  * `@hanzogui/themes` — a scale, not this system's token layer. Most of it is
- * harmless: a ramp of greys is a ramp of greys. Two rungs are not, because
+ * harmless: a ramp of greys is a ramp of greys. Three rungs are not, because
  * every component in this package reads them by name and @hanzo/design had
  * already decided each one the other way, in writing:
  *
@@ -159,7 +159,17 @@ space['-true'] = -STEP['4'];
  *   recipe, the one loud control a page is allowed. design sets `--foreground`
  *   to `#fafafa` on purpose: pure white halates on near-black.
  *
- * So the two rungs read the token instead of shadowing it. `var()` first, so a
+ *   `$outlineColor` shipped `hsla(0, 0%, 27%, 0.6)` — the FOCUS RING, and on a
+ *   near-black ground that composites to about `rgb(45,45,45)`, roughly 1.2:1
+ *   against the header it is drawn on. WCAG 2.4.11 asks for 3:1. Measured on
+ *   hanzo.app's Sign In, Get started and Search — the three primary CTAs, where
+ *   a keyboard user has no other way to know where they are. design publishes
+ *   `--ring` at `rgb(255 255 255 / .40)` for exactly this, translucent so it
+ *   lifts with whatever surface is under it; over the header that lands near
+ *   3.6:1. A ring is not a shade of grey somebody picked, it is a contrast
+ *   requirement, and the ramp had no way to know that.
+ *
+ * So the three rungs read the token instead of shadowing it. `var()` first, so a
  * host that mounts design's sheet (this package's own theme.css does) follows
  * the live cascade and inverts with it; design's published literal behind it,
  * so a host that mounts neither still gets the right value rather than a
@@ -174,19 +184,46 @@ space['-true'] = -STEP['4'];
  */
 const EDGE = { dark: 'rgb(255 255 255 / .10)', light: 'rgb(0 0 0 / .10)' };
 const LABEL = { dark: '#fafafa', light: '#0a0a0a' };
-const rebased = (theme) => ({
-    ...defaultConfig.themes[theme],
-    color4: `var(--border, ${EDGE[theme]})`,
-    borderColor: `var(--border, ${EDGE[theme]})`,
-    color12: `var(--foreground, ${LABEL[theme]})`,
-});
+const RING = { dark: 'rgb(255 255 255 / .40)', light: 'rgb(0 0 0 / .5)' };
+/**
+ * The edge and the label are re-based on the two ROOT themes; the ring is
+ * re-based on ALL of them, and the asymmetry is the point.
+ *
+ * A sub-theme exists to hold different colours — `dark_accent`'s label really
+ * should be the accent's label, `dark_red`'s edge really should be red — so
+ * re-basing those two rungs everywhere would flatten 388 themes into one and
+ * stop being a re-base. A focus ring is the opposite kind of thing: there is
+ * exactly ONE of it in this system, it is `--ring`, and it is a contrast
+ * requirement rather than a colour choice. The ramp ships 21 distinct rings
+ * across 390 themes, twenty of them hues — a pale blue on `dark_blue_Button`,
+ * a pale pink on `dark_pink` — and every one of them fails 3:1 on a near-black
+ * canvas the same way the grey did.
+ *
+ * Measured, and this is why the two root themes are not enough: gui activates a
+ * `Button` sub-theme for every Button it renders, so hanzo.app's Sign In, Get
+ * started and Search kept `dark_Button`'s ring at 1.4:1 while the page's own
+ * `--outlineColor` already read design's. The three CTAs the audit named were
+ * exactly the three a root-only fix misses.
+ */
+const scheme = (name) => (name.startsWith('light') ? 'light' : 'dark');
+const themes = Object.fromEntries(Object.entries(defaultConfig.themes).map(([name, theme]) => {
+    const s = scheme(name);
+    const ringed = { ...theme, outlineColor: `var(--ring, ${RING[s]})` };
+    return [
+        name,
+        name === s
+            ? {
+                ...ringed,
+                color4: `var(--border, ${EDGE[s]})`,
+                borderColor: `var(--border, ${EDGE[s]})`,
+                color12: `var(--foreground, ${LABEL[s]})`,
+            }
+            : ringed,
+    ];
+}));
 export const config = createGui({
     ...defaultConfig,
-    themes: {
-        ...defaultConfig.themes,
-        dark: rebased('dark'),
-        light: rebased('light'),
-    },
+    themes,
     tokens: {
         ...defaultConfig.tokens,
         radius: RADIUS,

package/dist/gui-config.js.map

@@ -1 +1 @@
-{"version":3,"file":"gui-config.js","sourceRoot":"","sources":["../src/gui-config.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"gui-config.js","sourceRoot":"","sources":["../src/gui-config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAEtC,gFAAgF;AAChF,6EAA6E;AAC7E,EAAE;AACF,iFAAiF;AACjF,mFAAmF;AACnF,iFAAiF;AACjF,6DAA6D;AAC7D,EAAE;AACF,0EAA0E;AAC1E,6EAA6E;AAC7E,+EAA+E;AAC/E,2EAA2E;AAC3E,gFAAgF;AAChF,6CAA6C;AAC7C,EAAE;AACF,6EAA6E;AAC7E,+EAA+E;AAC/E,oEAAoE;AACpE,gFAAgF;AAChF,gFAAgF;AAChF,4EAA4E;AAC5E,EAAE;AACF,6EAA6E;AAC7E,4EAA4E;AAC5E,cAAc;AACd,gFAAgF;AAEhF,MAAM,KAAK,GAAG,+CAA+C,CAAA;AAE7D;;;yCAGyC;AACzC,MAAM,UAAU,GAAG,wEAAwE,CAAA;AAE3F;;;8EAG8E;AAC9E,MAAM,SAAS,GAAG;IAChB,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,IAAI,EAAE,EAAE;CACA,CAAA;AAEV;;+DAE+D;AAC/D,MAAM,WAAW,GAAG;IAClB,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,GAAG;IACP,IAAI,EAAE,EAAE;CACA,CAAA;AAEV;;;0EAG0E;AAC1E,MAAM,MAAM,GAAG;IACb,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,IAAI,EAAE,CAAC;CACC,CAAA;AAEV;;;iDAGiD;AACjD,MAAM,IAAI,GAA2B;IACnC,GAAG,EAAE,CAAC;IACN,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;IACT,GAAG,EAAE,CAAC;IACN,KAAK,EAAE,CAAC;IACR,GAAG,EAAE,CAAC;IACN,KAAK,EAAE,EAAE;IACT,GAAG,EAAE,EAAE;IACP,KAAK,EAAE,EAAE;IACT,GAAG,EAAE,EAAE;IACP,KAAK,EAAE,EAAE;IACT,GAAG,EAAE,EAAE;IACP,GAAG,EAAE,EAAE;IACP,GAAG,EAAE,EAAE;IACP,GAAG,EAAE,EAAE;IACP,GAAG,EAAE,EAAE;IACP,IAAI,EAAE,EAAE;IACR,IAAI,EAAE,EAAE;IACR,IAAI,EAAE,EAAE;IACR,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;CACV,CAAA;AAED,MAAM,KAAK,GAA2B,EAAE,CAAA;AACxC,KAAK,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;IAC1C,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;IAClB,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;AACrB,CAAC;AACD,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAA;AACvB,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAE3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,IAAI,GAAG,EAAE,IAAI,EAAE,wBAAwB,EAAE,KAAK,EAAE,kBAAkB,EAAW,CAAA;AACnF,MAAM,KAAK,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAW,CAAA;AAC5D,MAAM,IAAI,GAAG,EAAE,IAAI,EAAE,wBAAwB,EAAE,KAAK,EAAE,iBAAiB,EAAW,CAAA;AAElF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,MAAM,GAAG,CAAC,IAAY,EAAoB,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;AAEhG,MAAM,MAAM,GAAG,MAAM,CAAC,WAAW,CAC/B,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE;IACzD,MAAM,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IACtB,MAAM,MAAM,GAAG,EAAE,GAAG,KAAK,EAAE,YAAY,EAAE,eAAe,IAAI,CAAC,CAAC,CAAC,GAAG,EAAE,CAAA;IACpE,OAAO;QACL,IAAI;QACJ,IAAI,KAAK,CAAC;YACR,CAAC,CAAC;gBACE,GAAG,MAAM;gBACT,MAAM,EAAE,iBAAiB,IAAI,CAAC,CAAC,CAAC,GAAG;gBACnC,WAAW,EAAE,iBAAiB,IAAI,CAAC,CAAC,CAAC,GAAG;gBACxC,OAAO,EAAE,qBAAqB,KAAK,CAAC,CAAC,CAAC,GAAG;aAC1C;YACH,CAAC,CAAC,MAAM;KACX,CAAA;AACH,CAAC,CAAC,CAC4B,CAAA;AAEhC,MAAM,CAAC,MAAM,MAAM,GAAG,SAAS,CAAC;IAC9B,GAAG,aAAa;IAChB,MAAM;IACN,MAAM,EAAE;QACN,GAAG,aAAa,CAAC,MAAM;QACvB,MAAM,EAAE,MAAM;QACd,KAAK;KACN;IACD,KAAK,EAAE;QACL,GAAG,aAAa,CAAC,KAAK;QACtB,IAAI,EAAE,EAAE,GAAG,aAAa,CAAC,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE;QAC9F,OAAO,EAAE,EAAE,GAAG,aAAa,CAAC,KAAK,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE;QACpG,2EAA2E;QAC3E,0EAA0E;QAC1E,4EAA4E;QAC5E,4EAA4E;QAC5E,+CAA+C;QAC/C,IAAI,EAAE,EAAE,GAAG,aAAa,CAAC,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE;KACpG;CACF,CAAC,CAAA;AAEF,eAAe,MAAM,CAAA"}