@hanzo/ui 8.0.59 → 8.0.60

package/dist/backends/gui/switch.cjs

@@ -28,6 +28,20 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * with no signal in it — which is what a full page of these actually looked
  * like. Off is muted, on is filled, and the loudest treatment is the one that
  * means something.
+ *
+ * THE THUMB TAKES THE SAME TOKEN AS ITS TRACK, and that is not a copy-paste
+ * slip. gui wraps the thumb in a `t_SwitchThumb` sub-theme that INVERTS the
+ * whole ramp — measured live, `$color3` is rgb(26,26,26) at the frame and
+ * rgb(171,171,171) inside the thumb; `$color12` is rgb(250,250,250) and
+ * rgb(10,10,10). So naming one token paints both sides of the pair and the
+ * contrast is structural: the thumb cannot come out the same colour as the
+ * track it sits on, in either state, whatever the palette does later.
+ *
+ * Picking the tokens by eye instead shipped once, in 8.0.57-8.0.59, and it
+ * shipped INVISIBLE: `$color10` under the thumb resolved to the off track's own
+ * rgb(26,26,26) and `$color1` to the on track's rgb(255,255,255). The tests
+ * passed, because they asked whether the two states DIFFER from each other and
+ * never whether either one differs from the thing behind it.
  */
 const gui_1 = require("@hanzo/gui");
 const slot_1 = require("./slot.cjs");
@@ -42,7 +56,7 @@ const Switch = ({ disabled, ...props }) => ((0, jsx_runtime_1.jsx)(gui_1.Switch,
     // else: a control that ignores its own disabled prop looks identical to a
     // live one, and the page this was found on had a disabled switch sitting
     // beside eight enabled ones with nothing to tell them apart.
-    disabled: disabled, opacity: disabled ? 0.5 : 1, cursor: disabled ? 'not-allowed' : 'pointer', ...(0, gesture_1.touch)(TRACK_H, 44, 'y'), ...props, children: (0, jsx_runtime_1.jsx)(gui_1.Switch.Thumb, { ...(0, slot_1.slot)('switch-thumb'), width: THUMB, height: THUMB, backgroundColor: "$color10", 
+    disabled: disabled, opacity: disabled ? 0.5 : 1, cursor: disabled ? 'not-allowed' : 'pointer', ...(0, gesture_1.touch)(TRACK_H, 44, 'y'), ...props, children: (0, jsx_runtime_1.jsx)(gui_1.Switch.Thumb, { ...(0, slot_1.slot)('switch-thumb'), width: THUMB, height: THUMB, backgroundColor: "$color3", 
         // `bg`, and it is the only one of the three spellings that is both typed
         // and correct. The Thumb's activeStyle is typed as the SHORTHAND style set:
         // `backgroundColor` paints but is not in that type; `background` is in it
@@ -51,5 +65,5 @@ const Switch = ({ disabled, ...props }) => ((0, jsx_runtime_1.jsx)(gui_1.Switch,
         // Consumers build with ignoreBuildErrors, so the first would have shipped
         // an error nobody sees and the second a colour that lands or does not
         // depending on stylesheet order.
-        activeStyle: { bg: '$color1' } }) }));
+        activeStyle: { bg: '$color12' } }) }));
 exports.Switch = Switch;

package/dist/backends/gui/switch.d.ts

@@ -23,6 +23,20 @@
  * with no signal in it — which is what a full page of these actually looked
  * like. Off is muted, on is filled, and the loudest treatment is the one that
  * means something.
+ *
+ * THE THUMB TAKES THE SAME TOKEN AS ITS TRACK, and that is not a copy-paste
+ * slip. gui wraps the thumb in a `t_SwitchThumb` sub-theme that INVERTS the
+ * whole ramp — measured live, `$color3` is rgb(26,26,26) at the frame and
+ * rgb(171,171,171) inside the thumb; `$color12` is rgb(250,250,250) and
+ * rgb(10,10,10). So naming one token paints both sides of the pair and the
+ * contrast is structural: the thumb cannot come out the same colour as the
+ * track it sits on, in either state, whatever the palette does later.
+ *
+ * Picking the tokens by eye instead shipped once, in 8.0.57-8.0.59, and it
+ * shipped INVISIBLE: `$color10` under the thumb resolved to the off track's own
+ * rgb(26,26,26) and `$color1` to the on track's rgb(255,255,255). The tests
+ * passed, because they asked whether the two states DIFFER from each other and
+ * never whether either one differs from the thing behind it.
  */
 import { Switch as GuiSwitch } from '@hanzo/gui';
 import type { ComponentProps } from 'react';

package/dist/backends/gui/switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/switch.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAQ3C,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,CAAA;AAE1D,QAAA,MAAM,MAAM,GAAI,wBAAwB,WAAW,4CAuClD,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/switch.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAQ3C,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,CAAA;AAE1D,QAAA,MAAM,MAAM,GAAI,wBAAwB,WAAW,4CAuClD,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/backends/gui/switch.js

@@ -25,6 +25,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * with no signal in it — which is what a full page of these actually looked
  * like. Off is muted, on is filled, and the loudest treatment is the one that
  * means something.
+ *
+ * THE THUMB TAKES THE SAME TOKEN AS ITS TRACK, and that is not a copy-paste
+ * slip. gui wraps the thumb in a `t_SwitchThumb` sub-theme that INVERTS the
+ * whole ramp — measured live, `$color3` is rgb(26,26,26) at the frame and
+ * rgb(171,171,171) inside the thumb; `$color12` is rgb(250,250,250) and
+ * rgb(10,10,10). So naming one token paints both sides of the pair and the
+ * contrast is structural: the thumb cannot come out the same colour as the
+ * track it sits on, in either state, whatever the palette does later.
+ *
+ * Picking the tokens by eye instead shipped once, in 8.0.57-8.0.59, and it
+ * shipped INVISIBLE: `$color10` under the thumb resolved to the off track's own
+ * rgb(26,26,26) and `$color1` to the on track's rgb(255,255,255). The tests
+ * passed, because they asked whether the two states DIFFER from each other and
+ * never whether either one differs from the thing behind it.
  */
 import { Switch as GuiSwitch } from '@hanzo/gui';
 import { slot } from './slot.js';
@@ -39,7 +53,7 @@ const Switch = ({ disabled, ...props }) => (_jsx(GuiSwitch, { ...slot('switch'),
     // else: a control that ignores its own disabled prop looks identical to a
     // live one, and the page this was found on had a disabled switch sitting
     // beside eight enabled ones with nothing to tell them apart.
-    disabled: disabled, opacity: disabled ? 0.5 : 1, cursor: disabled ? 'not-allowed' : 'pointer', ...touch(TRACK_H, 44, 'y'), ...props, children: _jsx(GuiSwitch.Thumb, { ...slot('switch-thumb'), width: THUMB, height: THUMB, backgroundColor: "$color10", 
+    disabled: disabled, opacity: disabled ? 0.5 : 1, cursor: disabled ? 'not-allowed' : 'pointer', ...touch(TRACK_H, 44, 'y'), ...props, children: _jsx(GuiSwitch.Thumb, { ...slot('switch-thumb'), width: THUMB, height: THUMB, backgroundColor: "$color3", 
         // `bg`, and it is the only one of the three spellings that is both typed
         // and correct. The Thumb's activeStyle is typed as the SHORTHAND style set:
         // `backgroundColor` paints but is not in that type; `background` is in it
@@ -48,6 +62,6 @@ const Switch = ({ disabled, ...props }) => (_jsx(GuiSwitch, { ...slot('switch'),
         // Consumers build with ignoreBuildErrors, so the first would have shipped
         // an error nobody sees and the second a colour that lands or does not
         // depending on stylesheet order.
-        activeStyle: { bg: '$color1' } }) }));
+        activeStyle: { bg: '$color12' } }) }));
 export { Switch };
 //# sourceMappingURL=switch.js.map

package/dist/backends/gui/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/backends/gui/switch.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,YAAY,CAAA;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAEjC,MAAM,OAAO,GAAG,EAAE,CAAA;AAClB,MAAM,OAAO,GAAG,EAAE,CAAA;AAClB,MAAM,KAAK,GAAG,EAAE,CAAA;AAIhB,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAe,EAAE,EAAE,CAAC,CACtD,KAAC,SAAS,OACJ,IAAI,CAAC,QAAQ,CAAC,EAClB,KAAK,EAAE,OAAO,EACd,MAAM,EAAE,OAAO,EACf,SAAS,EAAE,OAAO,EAClB,OAAO,EAAE,CAAC,EACV,UAAU,EAAE,CAAC,EACb,eAAe,EAAC,SAAS;IACzB,sEAAsE;IACtE,WAAW,EAAE,CAAC,EACd,WAAW,EAAC,cAAc,EAC1B,WAAW,EAAE,EAAE,eAAe,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE;IACrE,yEAAyE;IACzE,0EAA0E;IAC1E,yEAAyE;IACzE,6DAA6D;IAC7D,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAC3B,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,KACxC,KAAK,CAAC,OAAO,EAAE,EAAE,EAAE,GAAG,CAAC,KACvB,KAAK,YAET,KAAC,SAAS,CAAC,KAAK,OACV,IAAI,CAAC,cAAc,CAAC,EACxB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,KAAK,EACb,eAAe,EAAC,UAAU;QAC1B,yEAAyE;QACzE,4EAA4E;QAC5E,0EAA0E;QAC1E,sEAAsE;QACtE,uEAAuE;QACvE,0EAA0E;QAC1E,sEAAsE;QACtE,iCAAiC;QACjC,WAAW,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,GAC9B,GACQ,CACb,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/backends/gui/switch.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,YAAY,CAAA;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAEjC,MAAM,OAAO,GAAG,EAAE,CAAA;AAClB,MAAM,OAAO,GAAG,EAAE,CAAA;AAClB,MAAM,KAAK,GAAG,EAAE,CAAA;AAIhB,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAe,EAAE,EAAE,CAAC,CACtD,KAAC,SAAS,OACJ,IAAI,CAAC,QAAQ,CAAC,EAClB,KAAK,EAAE,OAAO,EACd,MAAM,EAAE,OAAO,EACf,SAAS,EAAE,OAAO,EAClB,OAAO,EAAE,CAAC,EACV,UAAU,EAAE,CAAC,EACb,eAAe,EAAC,SAAS;IACzB,sEAAsE;IACtE,WAAW,EAAE,CAAC,EACd,WAAW,EAAC,cAAc,EAC1B,WAAW,EAAE,EAAE,eAAe,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE;IACrE,yEAAyE;IACzE,0EAA0E;IAC1E,yEAAyE;IACzE,6DAA6D;IAC7D,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAC3B,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,KACxC,KAAK,CAAC,OAAO,EAAE,EAAE,EAAE,GAAG,CAAC,KACvB,KAAK,YAET,KAAC,SAAS,CAAC,KAAK,OACV,IAAI,CAAC,cAAc,CAAC,EACxB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,KAAK,EACb,eAAe,EAAC,SAAS;QACzB,yEAAyE;QACzE,4EAA4E;QAC5E,0EAA0E;QAC1E,sEAAsE;QACtE,uEAAuE;QACvE,0EAA0E;QAC1E,sEAAsE;QACtE,iCAAiC;QACjC,WAAW,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,GAC/B,GACQ,CACb,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/styles.css

@@ -2109,8 +2109,6 @@
 :root ._bg-background{background-color:var(--background);}
 :root ._bg-backgroundA94988999{background-color:var(--backgroundActive);}
 :root ._bg-borderColor{background-color:var(--borderColor);}
-:root ._bg-color1{background-color:var(--color1);}
-:root ._bg-color10{background-color:var(--color10);}
 :root ._bg-color12{background-color:var(--color12);}
 :root ._bg-color2{background-color:var(--color2);}
 :root ._bg-color3{background-color:var(--color3);}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "8.0.59",
+  "version": "8.0.60",
   "type": "module",
   "description": "Hanzo UI — the one canonical Hanzo component library, on @hanzo/gui + @hanzo/design. ONE substrate: every component renders through @hanzo/gui primitives, so the same import works on web, native (expo) and desktop (Tauri). Self-contained (theme.css), presentational, host-agnostic, clean-room.",
   "exports": {