@hanzo/ui 8.1.10 → 8.1.16

package/dist/gui-config.d.ts

@@ -1,3 +1,35 @@
+/**
+ * THE SURFACE LADDER — three more rungs read the token instead of shadowing it,
+ * for the reason the edge already does.
+ *
+ * The argument three rungs above is not about borders. A solid hex stops being a
+ * lighter line and becomes an unrelated grey the moment it lands on a lifted
+ * surface — and a FILL is the larger case, since it covers the area rather than
+ * outlining it. The ramp's surfaces are solid, so a Card inside a Dialog inside a
+ * themed section reads as three unrelated greys where design intends three lifts.
+ *
+ * design already publishes the ladder and had no consumer: `--surface-1/2/3`
+ * resolve to `--card`, `--muted` and `--secondary`, `--surface-card` is
+ * translucent at `rgb(38 38 38 / .5)`, and there is a whole glass family. Two
+ * files in this package name a `--surface-*` and ONE of the two is a test; none
+ * names `--glass`. So this is not a new ladder, it is the existing one reaching
+ * the components that were drawing their own.
+ *
+ * The literals behind each `var()` are what the products converged on
+ * independently, which is the evidence the ladder is right: hanzo.app draws
+ * `rgba(255,255,255,.02)` on 43 elements — its commonest surface by a wide
+ * margin — over `#0a0a0a`, with `rgba(255,255,255,.10)` edges on 56, and
+ * hanzo.chat lifts with translucent oklab over pure black. Alpha is also what
+ * lets ONE ladder serve both schemes: white-over-dark and black-over-light are
+ * the same instruction, so a surface keeps its relationship to whatever is
+ * beneath it instead of needing a second table.
+ */
+/**
+ * The names the ramp answers to. One list, so the VALUES below and the TYPE the
+ * config is cast to cannot disagree — they are generated from this.
+ */
+declare const ALIASES: readonly ["sunken", "panel", "hover", "edge", "raised", "rim", "bound", "dim", "faint", "soft", "quiet", "ink"];
+type Alias = Record<(typeof ALIASES)[number], string>;
 export declare const config: import("@hanzogui/web").GuiInternalConfig<{
     radius: {
         readonly 0: 0;
@@ -55,7 +87,112 @@ export declare const config: import("@hanzogui/web").GuiInternalConfig<{
         $19: number;
         $20: number;
     };
-}, import("@hanzogui/config/v5").V5Themes, {
+}, {
+    light: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_black: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_white: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_gray: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_blue: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_red: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_yellow: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_green: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_orange: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_pink: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_purple: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_teal: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_neutral: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_black: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_white: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_gray: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_blue: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_red: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_yellow: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_green: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_orange: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_pink: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_purple: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_teal: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_neutral: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_white_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_white_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_black_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_black_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_black_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_black_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_black_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_white_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_gray_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_gray_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_gray_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_blue_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_blue_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_blue_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_red_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_red_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_red_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_yellow_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_yellow_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_yellow_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_green_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_green_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_green_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_orange_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_orange_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_orange_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_pink_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_pink_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_pink_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_purple_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_purple_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_purple_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_teal_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_teal_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_teal_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_neutral_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_neutral_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_neutral_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_black_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_white_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_white_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_white_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_gray_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_gray_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_gray_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_blue_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_blue_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_blue_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_red_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_red_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_red_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_yellow_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_yellow_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_yellow_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_green_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_green_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_green_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_orange_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_orange_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_orange_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_pink_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_pink_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_pink_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_purple_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_purple_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_purple_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_teal_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_teal_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_teal_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_neutral_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_neutral_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_neutral_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+}, {
     text: "textAlign";
     b: "bottom";
     bg: "backgroundColor";
@@ -224,26 +361,26 @@ export declare const config: import("@hanzogui/web").GuiInternalConfig<{
             15: number | import("@hanzogui/web").Variable<any>;
             true: number | import("@hanzogui/web").Variable<any>;
         };
-        weight: {
-            1: any;
-            2: any;
-            4: any;
-            6: any;
-            8: any;
-            10: any;
-            12: any;
-            14: any;
-            16: any;
-            3: any;
-            5: any;
-            7: any;
-            9: any;
-            11: any;
-            13: any;
-            15: any;
-            true: any;
-        };
         letterSpacing: {
+            1: number | import("@hanzogui/web").Variable<any>;
+            2: number | import("@hanzogui/web").Variable<any>;
+            4: number | import("@hanzogui/web").Variable<any>;
+            6: number | import("@hanzogui/web").Variable<any>;
+            8: number | import("@hanzogui/web").Variable<any>;
+            10: number | import("@hanzogui/web").Variable<any>;
+            12: number | import("@hanzogui/web").Variable<any>;
+            14: number | import("@hanzogui/web").Variable<any>;
+            16: number | import("@hanzogui/web").Variable<any>;
+            3: number | import("@hanzogui/web").Variable<any>;
+            5: number | import("@hanzogui/web").Variable<any>;
+            7: number | import("@hanzogui/web").Variable<any>;
+            9: number | import("@hanzogui/web").Variable<any>;
+            11: number | import("@hanzogui/web").Variable<any>;
+            13: number | import("@hanzogui/web").Variable<any>;
+            15: number | import("@hanzogui/web").Variable<any>;
+            true: number | import("@hanzogui/web").Variable<any>;
+        };
+        weight: {
             1: any;
             2: any;
             4: any;
@@ -406,26 +543,26 @@ export declare const config: import("@hanzogui/web").GuiInternalConfig<{
             15: number | import("@hanzogui/web").Variable<any>;
             true: number | import("@hanzogui/web").Variable<any>;
         };
-        weight: {
-            1: any;
-            2: any;
-            4: any;
-            6: any;
-            8: any;
-            10: any;
-            12: any;
-            14: any;
-            16: any;
-            3: any;
-            5: any;
-            7: any;
-            9: any;
-            11: any;
-            13: any;
-            15: any;
-            true: any;
-        };
         letterSpacing: {
+            1: number | import("@hanzogui/web").Variable<any>;
+            2: number | import("@hanzogui/web").Variable<any>;
+            4: number | import("@hanzogui/web").Variable<any>;
+            6: number | import("@hanzogui/web").Variable<any>;
+            8: number | import("@hanzogui/web").Variable<any>;
+            10: number | import("@hanzogui/web").Variable<any>;
+            12: number | import("@hanzogui/web").Variable<any>;
+            14: number | import("@hanzogui/web").Variable<any>;
+            16: number | import("@hanzogui/web").Variable<any>;
+            3: number | import("@hanzogui/web").Variable<any>;
+            5: number | import("@hanzogui/web").Variable<any>;
+            7: number | import("@hanzogui/web").Variable<any>;
+            9: number | import("@hanzogui/web").Variable<any>;
+            11: number | import("@hanzogui/web").Variable<any>;
+            13: number | import("@hanzogui/web").Variable<any>;
+            15: number | import("@hanzogui/web").Variable<any>;
+            true: number | import("@hanzogui/web").Variable<any>;
+        };
+        weight: {
             1: any;
             2: any;
             4: any;
@@ -872,7 +1009,112 @@ export declare const monochrome: import("@hanzogui/web").GuiInternalConfig<{
         $19: number;
         $20: number;
     };
-}, import("@hanzogui/config/v5").V5Themes, {
+}, {
+    light: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_black: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_white: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_gray: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_blue: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_red: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_yellow: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_green: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_orange: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_pink: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_purple: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_teal: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_neutral: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_black: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_white: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_gray: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_blue: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_red: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_yellow: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_green: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_orange: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_pink: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_purple: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_teal: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_neutral: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_white_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_white_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_black_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_black_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_black_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_black_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_black_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_white_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_gray_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_gray_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_gray_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_blue_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_blue_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_blue_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_red_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_red_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_red_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_yellow_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_yellow_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_yellow_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_green_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_green_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_green_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_orange_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_orange_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_orange_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_pink_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_pink_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_pink_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_purple_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_purple_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_purple_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_teal_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_teal_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_teal_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_neutral_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_neutral_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    light_neutral_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_black_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_white_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_white_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_white_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_gray_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_gray_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_gray_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_blue_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_blue_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_blue_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_red_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_red_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_red_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_yellow_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_yellow_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_yellow_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_green_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_green_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_green_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_orange_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_orange_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_orange_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_pink_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_pink_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_pink_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_purple_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_purple_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_purple_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_teal_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_teal_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_teal_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_neutral_accent: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_neutral_surface1: import("@hanzogui/config/v5").V5Theme & Alias;
+    dark_neutral_surface2: import("@hanzogui/config/v5").V5Theme & Alias;
+}, {
     text: "textAlign";
     b: "bottom";
     bg: "backgroundColor";
@@ -1041,26 +1283,26 @@ export declare const monochrome: import("@hanzogui/web").GuiInternalConfig<{
             15: number | import("@hanzogui/web").Variable<any>;
             true: number | import("@hanzogui/web").Variable<any>;
         };
-        weight: {
-            1: any;
-            2: any;
-            4: any;
-            6: any;
-            8: any;
-            10: any;
-            12: any;
-            14: any;
-            16: any;
-            3: any;
-            5: any;
-            7: any;
-            9: any;
-            11: any;
-            13: any;
-            15: any;
-            true: any;
-        };
         letterSpacing: {
+            1: number | import("@hanzogui/web").Variable<any>;
+            2: number | import("@hanzogui/web").Variable<any>;
+            4: number | import("@hanzogui/web").Variable<any>;
+            6: number | import("@hanzogui/web").Variable<any>;
+            8: number | import("@hanzogui/web").Variable<any>;
+            10: number | import("@hanzogui/web").Variable<any>;
+            12: number | import("@hanzogui/web").Variable<any>;
+            14: number | import("@hanzogui/web").Variable<any>;
+            16: number | import("@hanzogui/web").Variable<any>;
+            3: number | import("@hanzogui/web").Variable<any>;
+            5: number | import("@hanzogui/web").Variable<any>;
+            7: number | import("@hanzogui/web").Variable<any>;
+            9: number | import("@hanzogui/web").Variable<any>;
+            11: number | import("@hanzogui/web").Variable<any>;
+            13: number | import("@hanzogui/web").Variable<any>;
+            15: number | import("@hanzogui/web").Variable<any>;
+            true: number | import("@hanzogui/web").Variable<any>;
+        };
+        weight: {
             1: any;
             2: any;
             4: any;
@@ -1223,26 +1465,26 @@ export declare const monochrome: import("@hanzogui/web").GuiInternalConfig<{
             15: number | import("@hanzogui/web").Variable<any>;
             true: number | import("@hanzogui/web").Variable<any>;
         };
-        weight: {
-            1: any;
-            2: any;
-            4: any;
-            6: any;
-            8: any;
-            10: any;
-            12: any;
-            14: any;
-            16: any;
-            3: any;
-            5: any;
-            7: any;
-            9: any;
-            11: any;
-            13: any;
-            15: any;
-            true: any;
-        };
         letterSpacing: {
+            1: number | import("@hanzogui/web").Variable<any>;
+            2: number | import("@hanzogui/web").Variable<any>;
+            4: number | import("@hanzogui/web").Variable<any>;
+            6: number | import("@hanzogui/web").Variable<any>;
+            8: number | import("@hanzogui/web").Variable<any>;
+            10: number | import("@hanzogui/web").Variable<any>;
+            12: number | import("@hanzogui/web").Variable<any>;
+            14: number | import("@hanzogui/web").Variable<any>;
+            16: number | import("@hanzogui/web").Variable<any>;
+            3: number | import("@hanzogui/web").Variable<any>;
+            5: number | import("@hanzogui/web").Variable<any>;
+            7: number | import("@hanzogui/web").Variable<any>;
+            9: number | import("@hanzogui/web").Variable<any>;
+            11: number | import("@hanzogui/web").Variable<any>;
+            13: number | import("@hanzogui/web").Variable<any>;
+            15: number | import("@hanzogui/web").Variable<any>;
+            true: number | import("@hanzogui/web").Variable<any>;
+        };
+        weight: {
             1: any;
             2: any;
             4: any;

package/dist/gui-config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gui-config.d.ts","sourceRoot":"","sources":["../src/gui-config.ts"],"names":[],"mappings":"AAshBA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAAiC,CAAA;AAEpD,eAAe,MAAM,CAAA;AAiBrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,GAAG,CAAC,IAAI,GAAE;IAAE,MAAM,IAAI,MAAM,CAAA;CAAW,GAAG,MAAM,CAoB/D;AAeD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAKrB,CAAA;AAEF,MAAM,MAAM,IAAI,GAAG,OAAO,MAAM,CAAA"}
+{"version":3,"file":"gui-config.d.ts","sourceRoot":"","sources":["../src/gui-config.ts"],"names":[],"mappings":"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"}

package/dist/gui-config.js

@@ -104,18 +104,60 @@ const LINE_HEIGHT = {
     4: `calc(22px * var(--type-scale, 1))`,
     5: `calc(22px * var(--type-scale, 1))`,
     6: `calc(24px * var(--type-scale, 1))`,
-    7: `calc(28px * var(--type-scale, 1))`,
-    8: `calc(32px * var(--type-scale, 1))`,
-    9: `calc(32px * var(--type-scale, 1))`,
-    10: `calc(38px * var(--type-scale, 1))`,
-    11: `calc(46px * var(--type-scale, 1))`,
-    12: `calc(54px * var(--type-scale, 1))`,
-    13: `calc(62px * var(--type-scale, 1))`,
-    14: `calc(70px * var(--type-scale, 1))`,
-    15: `calc(86px * var(--type-scale, 1))`,
-    16: `calc(102px * var(--type-scale, 1))`,
+    // Display leading TIGHTENS as size grows, which is the whole difference
+    // between type that is set and type that is merely large. Measured on
+    // hanzo.ai, whose typography this scale is meant to express: 40px sits on 40px
+    // (1.00) and 21px on 20px (0.95), while this table asked for 46px and 28px —
+    // 1.15 and 1.33. Leading a headline like body copy is what made every large
+    // rung read airy beside the marketing site.
+    //
+    // The body rungs above are NOT touched: 17px/24px is 1.41 here and 1.40 there,
+    // so reading sizes were already right and only the display end had drifted.
+    7: `calc(22px * var(--type-scale, 1))`,
+    8: `calc(28px * var(--type-scale, 1))`,
+    9: `calc(28px * var(--type-scale, 1))`,
+    10: `calc(34px * var(--type-scale, 1))`,
+    11: `calc(42px * var(--type-scale, 1))`,
+    12: `calc(50px * var(--type-scale, 1))`,
+    13: `calc(58px * var(--type-scale, 1))`,
+    14: `calc(66px * var(--type-scale, 1))`,
+    15: `calc(82px * var(--type-scale, 1))`,
+    16: `calc(98px * var(--type-scale, 1))`,
     true: `calc(20px * var(--type-scale, 1))`,
 };
+/**
+ * Optical tracking — the other half of what makes hanzo.ai's headlines read as
+ * set rather than scaled.
+ *
+ * Measured there: −1px on 40px and −0.525px on 21px, both exactly −0.025em, and
+ * nothing at all below 21px. That is the classic optical rule — a face drawn for
+ * text has too much sidebearing when it is enlarged, and none to spare when it
+ * is small — and this package expressed none of it: `letterSpacing` appeared
+ * ZERO times in this config, so every rung shipped at the face's natural fit.
+ *
+ * Stated in `em` so one value serves the whole rung whatever `--type-scale` does
+ * to it; a px tracking would silently stop matching the moment a person changed
+ * the scale.
+ */
+const TRACKING = {
+    1: 0,
+    2: 0,
+    3: 0,
+    4: 0,
+    5: 0,
+    6: 0,
+    7: '-0.025em',
+    8: '-0.025em',
+    9: '-0.025em',
+    10: '-0.025em',
+    11: '-0.025em',
+    12: '-0.025em',
+    13: '-0.025em',
+    14: '-0.025em',
+    15: '-0.025em',
+    16: '-0.025em',
+    true: 0,
+};
 /** Radius — FOUR values, no more. 6 control · 8 input/row · 12 panel · pill.
  *  The inherited ladder had thirteen spellings rendering ten values, including
  *  three different spellings of "pill" (`{999}`, `{99}`, `$10`). `$10`+ IS the
@@ -285,6 +327,14 @@ const RING = { dark: 'rgb(255 255 255 / .40)', light: 'rgb(0 0 0 / .5)' };
  * the same instruction, so a surface keeps its relationship to whatever is
  * beneath it instead of needing a second table.
  */
+/**
+ * The names the ramp answers to. One list, so the VALUES below and the TYPE the
+ * config is cast to cannot disagree — they are generated from this.
+ */
+const ALIASES = [
+    'sunken', 'panel', 'hover', 'edge', 'raised', 'rim',
+    'bound', 'dim', 'faint', 'soft', 'quiet', 'ink',
+];
 const SURFACE = {
     dark: { base: 'rgb(255 255 255 / .03)', hover: 'rgb(255 255 255 / .06)', raised: 'rgb(255 255 255 / .12)' },
     light: { base: 'rgb(0 0 0 / .03)', hover: 'rgb(0 0 0 / .06)', raised: 'rgb(0 0 0 / .12)' },
@@ -413,11 +463,55 @@ const themes = Object.fromEntries(Object.entries(defaultConfig.themes).map(([nam
                 color5: `var(--surface-3, ${SURFACE[s].raised})`,
                 borderColor: `var(--border, ${EDGE[s]})`,
                 color12: `var(--foreground, ${LABEL[s]})`,
+                // NAMES FOR THE RAMP, so a component can say what it means.
+                //
+                // `$color1..$color12` is a monotonic scale inherited from upstream.
+                // It says how light a value is and nothing about what it is FOR, so
+                // every component encoded its intent in a number and the intent was
+                // unreadable: `$color12` on a slider fill was the foreground rung
+                // doing a fill's job, and nobody could see that from the call site.
+                // Each name below resolves to exactly the rung it replaces, so
+                // adopting one changes no pixels — the value is identical, only the
+                // reason is now legible.
+                //
+                // The names avoid every custom property @hanzo/design publishes (300
+                // of them, checked). That is not tidiness: gui emits each THEME key
+                // as a bare `--<key>` at `:root.t_dark`, so a key called `muted`
+                // would shadow design's `--muted`, and pointing a key at the name it
+                // shadows is the self-reference that computes EMPTY — the defect
+                // that left `--border` blank and put a white hairline on every
+                // pricing card. A name is a namespace decision here, not a label.
+                //
+                // Verified: a key defined on the two ROOT themes resolves inside all
+                // 390 sub-themes (`dark_Button` reads it), so nothing nested needs a
+                // second declaration.
+                sunken: String(theme.color1),
+                panel: `var(--surface-1, ${SURFACE[s].base})`,
+                hover: `var(--surface-2, ${SURFACE[s].hover})`,
+                edge: `var(--border, ${EDGE[s]})`,
+                raised: `var(--surface-3, ${SURFACE[s].raised})`,
+                rim: String(theme.color6),
+                bound: String(theme.color7),
+                dim: String(theme.color8),
+                faint: String(theme.color9),
+                soft: String(theme.color10),
+                quiet: String(theme.color11),
+                ink: `var(--foreground, ${LABEL[s]})`,
                 background: GROUND[s],
                 color: `var(--foreground, ${LABEL[s]})`,
                 placeholderColor: `var(--text-tertiary, ${MUTED[s]})`,
-                accentBackground: `var(--primary, ${LOUD[s]})`,
-                accentColor: `var(--primary-foreground, ${LOUD_LABEL[s]})`,
+                // The pair reads design's ACCENT, not its primary — the names match
+                // 1:1 and, decisively, so do the values: design publishes
+                // `--accent: #262626`, which is what Button's loud control already
+                // renders, while `--primary: #fafafa` is the white slab that control
+                // deliberately stopped being. Pointing at primary connects the knob
+                // and silently turns every accented control back into a glare;
+                // pointing at accent connects it and changes nothing until asked.
+                //
+                // It was pointed at primary before, and NOTHING read the pair, so
+                // the mismatch never showed: setting either name moved zero pixels.
+                accentBackground: `var(--accent, ${SURFACE[s].raised})`,
+                accentColor: `var(--accent-foreground, ${LABEL[s]})`,
             }
             : ringed,
     ];
@@ -493,8 +587,20 @@ const base = {
     },
     fonts: {
         ...defaultConfig.fonts,
-        body: { ...defaultConfig.fonts.body, family: GEIST, size: asSizes(FONT_SIZE), lineHeight: asSizes(LINE_HEIGHT) },
-        heading: { ...defaultConfig.fonts.heading, family: GEIST, size: asSizes(FONT_SIZE), lineHeight: asSizes(LINE_HEIGHT) },
+        body: {
+            ...defaultConfig.fonts.body,
+            family: GEIST,
+            size: asSizes(FONT_SIZE),
+            lineHeight: asSizes(LINE_HEIGHT),
+            letterSpacing: asSizes(TRACKING),
+        },
+        heading: {
+            ...defaultConfig.fonts.heading,
+            family: GEIST,
+            size: asSizes(FONT_SIZE),
+            lineHeight: asSizes(LINE_HEIGHT),
+            letterSpacing: asSizes(TRACKING),
+        },
         // `$mono` was NOT defined here, and gui emits NO class for a font token it
         // does not know — no warning, no fallback, a green build and text that is
         // simply not monospace. 260 `fontFamily="$mono"` call sites across 74 files