@hanzo/ui 8.0.52 → 8.0.54

package/dist/glass.css

@@ -108,16 +108,19 @@
    drop does all the work and must be light enough not to smudge, on near-black
    it must be heavy enough to exist at all. The values are design's own, and
    glass.test.ts fails if either column stops matching what design publishes.
-   `:root.t_light` alongside `.light` is gui's spelling of the same idea —
-   compose-theme teaches design's sheet that alias, and this file, which also
-   ships on its own, says it outright. */
+   `:root.t_light` and `.t_light` alongside `.light` are gui's spelling of the
+   same idea — compose-theme teaches design's sheet those aliases, and this
+   file, which also ships on its own, says them outright. The bare class is for
+   a NESTED light scope: gui puts `t_light` on a span for `<Theme name="light">`
+   inside a dark app, which `:root.t_light` cannot match, so without it a light
+   island stood on the dark ladder. */
 :root {
   --glass-shadow-1: 0 1px 2px 0 rgb(0 0 0 / .40);
   --glass-shadow-2: 0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55);
   --glass-shadow-3: 0 24px 60px -16px rgb(0 0 0 / .75);
 }
 
-.light, :root.t_light {
+.light, :root.t_light, .t_light {
   --glass-shadow-1: 0 1px 2px 0 rgb(0 0 0 / .06);
   --glass-shadow-2: 0 10px 15px -3px rgb(0 0 0 / .09), 0 4px 6px -4px rgb(0 0 0 / .07);
   --glass-shadow-3: 0 24px 60px -16px rgb(0 0 0 / .18);
@@ -156,10 +159,19 @@
 
    One value, in one place: the recipes module reads the same token, so the dim
    behind a component dialog and the dim behind a hand-rolled one are the same
-   dim by construction rather than by two people remembering a number. */
+   dim by construction rather than by two people remembering a number.
+
+   !important for the same reason the material above carries it, and it was
+   missing here: gui compiles `opacity` and `background-color` into atomic
+   classes (`_o-0--5`, `_bg-rgba0000--538295333`) that land in an inline <style>
+   a bundler orders AFTER this sheet, so at equal specificity they won and the
+   rule read as if it had never been written. Measured on hanzo.app's ⌘K
+   palette: `rgba(0,0,0,.5)` under `opacity: .5` — a quarter black, exactly the
+   double dim these two lines exist to end. A rule written to beat a compiled
+   class has to be written with the weight to beat one. */
 [data-slot="dialog-overlay"] {
-  opacity: 1;
-  background-color: var(--surface-scrim, rgb(0 0 0 / .8));
+  opacity: 1 !important;
+  background-color: var(--surface-scrim, rgb(0 0 0 / .8)) !important;
 }
 
 /* ── Grouped rows ───────────────────────────────────────────────────────────

package/dist/gui-config.cjs

@@ -141,8 +141,67 @@ for (const [k, v] of Object.entries(STEP)) {
 }
 space.$true = STEP['4'];
 space['-true'] = -STEP['4'];
+/**
+ * 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. 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:
+ *
+ *   `$borderColor` (= `$color4`) shipped `hsla(0, 0%, 14%, 1)` — a SOLID edge.
+ *   design's `colors.css` spends a paragraph on why its borders are alpha: a
+ *   solid hex hairline vanishes the moment it lands on a lifted surface,
+ *   because it stops being a lighter line and becomes an unrelated grey. Nearly
+ *   every component here (Button, Input, Card, Select, Dialog, Popover,
+ *   Tooltip, Switch, Checkbox, DropdownMenu) draws its edge with it.
+ *
+ *   `$color12` shipped `hsla(0, 0%, 100%, 1)` — PURE WHITE, and it is the label
+ *   colour for Button's default/primary, for every Badge, and for the `accent`
+ *   recipe, the one loud control a page is allowed. design sets `--foreground`
+ *   to `#fafafa` on purpose: pure white halates on near-black.
+ *
+ *   `$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
+ * dropped declaration.
+ *
+ * The literals are stated per theme rather than left to the cascade, and that
+ * is load-bearing: a NESTED `<Theme name="light">` (PrimaryButton's white pill
+ * inside a dark app) emits `.t_light` on a span, not on `:root`, so the light
+ * column has to be able to answer on its own. gui-config.test.ts reads
+ * @hanzo/design's stylesheet and fails if either column stops matching what
+ * design publishes, so the copy cannot drift.
+ */
+const EDGE = { dark: 'rgb(255 255 255 / .10)', light: 'rgb(0 0 0 / .10)' };
+const LABEL = { dark: '#fafafa', light: '#0a0a0a' };
+const RING = { dark: 'rgb(255 255 255 / .40)', light: 'rgb(0 0 0 / .5)' };
+const rebased = (theme) => ({
+    ...v5_1.defaultConfig.themes[theme],
+    color4: `var(--border, ${EDGE[theme]})`,
+    borderColor: `var(--border, ${EDGE[theme]})`,
+    color12: `var(--foreground, ${LABEL[theme]})`,
+    outlineColor: `var(--ring, ${RING[theme]})`,
+});
 exports.config = (0, gui_1.createGui)({
     ...v5_1.defaultConfig,
+    themes: {
+        ...v5_1.defaultConfig.themes,
+        dark: rebased('dark'),
+        light: rebased('light'),
+    },
     tokens: {
         ...v5_1.defaultConfig.tokens,
         radius: RADIUS,

package/dist/gui-config.d.ts

@@ -55,7 +55,588 @@ export declare const config: import("@hanzogui/web").GuiInternalConfig<{
         $19: number;
         $20: number;
     };
-}, import("@hanzogui/config/v5").V5Themes, {
+}, {
+    dark: {
+        color4: string;
+        borderColor: string;
+        color12: string;
+        outlineColor: string;
+        accentBackground: string;
+        accentColor: string;
+        background0: string;
+        background02: string;
+        background04: string;
+        background06: string;
+        background08: string;
+        color1: string;
+        color2: string;
+        color3: string;
+        color5: string;
+        color6: string;
+        color7: string;
+        color8: string;
+        color9: string;
+        color10: string;
+        color11: string;
+        color0: string;
+        color02: string;
+        color04: string;
+        color06: string;
+        color08: string;
+        color: string;
+        colorHover: string;
+        colorPress: string;
+        colorFocus: string;
+        background: string;
+        backgroundHover: string;
+        backgroundPress: string;
+        backgroundFocus: string;
+        backgroundActive: string;
+        borderColorHover: string;
+        borderColorFocus: string;
+        borderColorPress: string;
+        placeholderColor: string;
+        colorTransparent: string;
+        black1: string;
+        black2: string;
+        black3: string;
+        black4: string;
+        black5: string;
+        black6: string;
+        black7: string;
+        black8: string;
+        black9: string;
+        black10: string;
+        black11: string;
+        black12: string;
+        white1: string;
+        white2: string;
+        white3: string;
+        white4: string;
+        white5: string;
+        white6: string;
+        white7: string;
+        white8: string;
+        white9: string;
+        white10: string;
+        white11: string;
+        white12: string;
+        white: string;
+        white0: string;
+        white02: string;
+        white04: string;
+        white06: string;
+        white08: string;
+        black: string;
+        black0: string;
+        black02: string;
+        black04: string;
+        black06: string;
+        black08: string;
+        shadow1: string;
+        shadow2: string;
+        shadow3: string;
+        shadow4: string;
+        shadow5: string;
+        shadow6: string;
+        shadow7: string;
+        shadow8: string;
+        highlight1: string;
+        highlight2: string;
+        highlight3: string;
+        highlight4: string;
+        highlight5: string;
+        highlight6: string;
+        highlight7: string;
+        highlight8: string;
+        shadowColor: string;
+        gray1: string;
+        gray2: string;
+        gray3: string;
+        gray4: string;
+        gray5: string;
+        gray6: string;
+        gray7: string;
+        gray8: string;
+        gray9: string;
+        gray10: string;
+        gray11: string;
+        gray12: string;
+        blue1: string;
+        blue2: string;
+        blue3: string;
+        blue4: string;
+        blue5: string;
+        blue6: string;
+        blue7: string;
+        blue8: string;
+        blue9: string;
+        blue10: string;
+        blue11: string;
+        blue12: string;
+        red1: string;
+        red2: string;
+        red3: string;
+        red4: string;
+        red5: string;
+        red6: string;
+        red7: string;
+        red8: string;
+        red9: string;
+        red10: string;
+        red11: string;
+        red12: string;
+        yellow1: string;
+        yellow2: string;
+        yellow3: string;
+        yellow4: string;
+        yellow5: string;
+        yellow6: string;
+        yellow7: string;
+        yellow8: string;
+        yellow9: string;
+        yellow10: string;
+        yellow11: string;
+        yellow12: string;
+        green1: string;
+        green2: string;
+        green3: string;
+        green4: string;
+        green5: string;
+        green6: string;
+        green7: string;
+        green8: string;
+        green9: string;
+        green10: string;
+        green11: string;
+        green12: string;
+        orange1: string;
+        orange2: string;
+        orange3: string;
+        orange4: string;
+        orange5: string;
+        orange6: string;
+        orange7: string;
+        orange8: string;
+        orange9: string;
+        orange10: string;
+        orange11: string;
+        orange12: string;
+        pink1: string;
+        pink2: string;
+        pink3: string;
+        pink4: string;
+        pink5: string;
+        pink6: string;
+        pink7: string;
+        pink8: string;
+        pink9: string;
+        pink10: string;
+        pink11: string;
+        pink12: string;
+        purple1: string;
+        purple2: string;
+        purple3: string;
+        purple4: string;
+        purple5: string;
+        purple6: string;
+        purple7: string;
+        purple8: string;
+        purple9: string;
+        purple10: string;
+        purple11: string;
+        purple12: string;
+        teal1: string;
+        teal2: string;
+        teal3: string;
+        teal4: string;
+        teal5: string;
+        teal6: string;
+        teal7: string;
+        teal8: string;
+        teal9: string;
+        teal10: string;
+        teal11: string;
+        teal12: string;
+        neutral1: string;
+        neutral2: string;
+        neutral3: string;
+        neutral4: string;
+        neutral5: string;
+        neutral6: string;
+        neutral7: string;
+        neutral8: string;
+        neutral9: string;
+        neutral10: string;
+        neutral11: string;
+        neutral12: string;
+        accent1: string;
+        accent2: string;
+        accent3: string;
+        accent4: string;
+        accent5: string;
+        accent6: string;
+        accent7: string;
+        accent8: string;
+        accent9: string;
+        accent10: string;
+        accent11: string;
+        accent12: string;
+        color01: string;
+        color0075: string;
+        color005: string;
+        color0025: string;
+        color002: string;
+        color001: string;
+        background01: string;
+        background0075: string;
+        background005: string;
+        background0025: string;
+        background002: string;
+        background001: string;
+    };
+    light: {
+        color4: string;
+        borderColor: string;
+        color12: string;
+        outlineColor: string;
+        accentBackground: string;
+        accentColor: string;
+        background0: string;
+        background02: string;
+        background04: string;
+        background06: string;
+        background08: string;
+        color1: string;
+        color2: string;
+        color3: string;
+        color5: string;
+        color6: string;
+        color7: string;
+        color8: string;
+        color9: string;
+        color10: string;
+        color11: string;
+        color0: string;
+        color02: string;
+        color04: string;
+        color06: string;
+        color08: string;
+        color: string;
+        colorHover: string;
+        colorPress: string;
+        colorFocus: string;
+        background: string;
+        backgroundHover: string;
+        backgroundPress: string;
+        backgroundFocus: string;
+        backgroundActive: string;
+        borderColorHover: string;
+        borderColorFocus: string;
+        borderColorPress: string;
+        placeholderColor: string;
+        colorTransparent: string;
+        black1: string;
+        black2: string;
+        black3: string;
+        black4: string;
+        black5: string;
+        black6: string;
+        black7: string;
+        black8: string;
+        black9: string;
+        black10: string;
+        black11: string;
+        black12: string;
+        white1: string;
+        white2: string;
+        white3: string;
+        white4: string;
+        white5: string;
+        white6: string;
+        white7: string;
+        white8: string;
+        white9: string;
+        white10: string;
+        white11: string;
+        white12: string;
+        white: string;
+        white0: string;
+        white02: string;
+        white04: string;
+        white06: string;
+        white08: string;
+        black: string;
+        black0: string;
+        black02: string;
+        black04: string;
+        black06: string;
+        black08: string;
+        shadow1: string;
+        shadow2: string;
+        shadow3: string;
+        shadow4: string;
+        shadow5: string;
+        shadow6: string;
+        shadow7: string;
+        shadow8: string;
+        highlight1: string;
+        highlight2: string;
+        highlight3: string;
+        highlight4: string;
+        highlight5: string;
+        highlight6: string;
+        highlight7: string;
+        highlight8: string;
+        shadowColor: string;
+        gray1: string;
+        gray2: string;
+        gray3: string;
+        gray4: string;
+        gray5: string;
+        gray6: string;
+        gray7: string;
+        gray8: string;
+        gray9: string;
+        gray10: string;
+        gray11: string;
+        gray12: string;
+        blue1: string;
+        blue2: string;
+        blue3: string;
+        blue4: string;
+        blue5: string;
+        blue6: string;
+        blue7: string;
+        blue8: string;
+        blue9: string;
+        blue10: string;
+        blue11: string;
+        blue12: string;
+        red1: string;
+        red2: string;
+        red3: string;
+        red4: string;
+        red5: string;
+        red6: string;
+        red7: string;
+        red8: string;
+        red9: string;
+        red10: string;
+        red11: string;
+        red12: string;
+        yellow1: string;
+        yellow2: string;
+        yellow3: string;
+        yellow4: string;
+        yellow5: string;
+        yellow6: string;
+        yellow7: string;
+        yellow8: string;
+        yellow9: string;
+        yellow10: string;
+        yellow11: string;
+        yellow12: string;
+        green1: string;
+        green2: string;
+        green3: string;
+        green4: string;
+        green5: string;
+        green6: string;
+        green7: string;
+        green8: string;
+        green9: string;
+        green10: string;
+        green11: string;
+        green12: string;
+        orange1: string;
+        orange2: string;
+        orange3: string;
+        orange4: string;
+        orange5: string;
+        orange6: string;
+        orange7: string;
+        orange8: string;
+        orange9: string;
+        orange10: string;
+        orange11: string;
+        orange12: string;
+        pink1: string;
+        pink2: string;
+        pink3: string;
+        pink4: string;
+        pink5: string;
+        pink6: string;
+        pink7: string;
+        pink8: string;
+        pink9: string;
+        pink10: string;
+        pink11: string;
+        pink12: string;
+        purple1: string;
+        purple2: string;
+        purple3: string;
+        purple4: string;
+        purple5: string;
+        purple6: string;
+        purple7: string;
+        purple8: string;
+        purple9: string;
+        purple10: string;
+        purple11: string;
+        purple12: string;
+        teal1: string;
+        teal2: string;
+        teal3: string;
+        teal4: string;
+        teal5: string;
+        teal6: string;
+        teal7: string;
+        teal8: string;
+        teal9: string;
+        teal10: string;
+        teal11: string;
+        teal12: string;
+        neutral1: string;
+        neutral2: string;
+        neutral3: string;
+        neutral4: string;
+        neutral5: string;
+        neutral6: string;
+        neutral7: string;
+        neutral8: string;
+        neutral9: string;
+        neutral10: string;
+        neutral11: string;
+        neutral12: string;
+        accent1: string;
+        accent2: string;
+        accent3: string;
+        accent4: string;
+        accent5: string;
+        accent6: string;
+        accent7: string;
+        accent8: string;
+        accent9: string;
+        accent10: string;
+        accent11: string;
+        accent12: string;
+        color01: string;
+        color0075: string;
+        color005: string;
+        color0025: string;
+        color002: string;
+        color001: string;
+        background01: string;
+        background0075: string;
+        background005: string;
+        background0025: string;
+        background002: string;
+        background001: string;
+    };
+    light_accent: import("@hanzogui/config/v5").V5Theme;
+    dark_accent: import("@hanzogui/config/v5").V5Theme;
+    light_black: import("@hanzogui/config/v5").V5Theme;
+    light_white: import("@hanzogui/config/v5").V5Theme;
+    light_gray: import("@hanzogui/config/v5").V5Theme;
+    light_blue: import("@hanzogui/config/v5").V5Theme;
+    light_red: import("@hanzogui/config/v5").V5Theme;
+    light_yellow: import("@hanzogui/config/v5").V5Theme;
+    light_green: import("@hanzogui/config/v5").V5Theme;
+    light_orange: import("@hanzogui/config/v5").V5Theme;
+    light_pink: import("@hanzogui/config/v5").V5Theme;
+    light_purple: import("@hanzogui/config/v5").V5Theme;
+    light_teal: import("@hanzogui/config/v5").V5Theme;
+    light_neutral: import("@hanzogui/config/v5").V5Theme;
+    dark_black: import("@hanzogui/config/v5").V5Theme;
+    dark_white: import("@hanzogui/config/v5").V5Theme;
+    dark_gray: import("@hanzogui/config/v5").V5Theme;
+    dark_blue: import("@hanzogui/config/v5").V5Theme;
+    dark_red: import("@hanzogui/config/v5").V5Theme;
+    dark_yellow: import("@hanzogui/config/v5").V5Theme;
+    dark_green: import("@hanzogui/config/v5").V5Theme;
+    dark_orange: import("@hanzogui/config/v5").V5Theme;
+    dark_pink: import("@hanzogui/config/v5").V5Theme;
+    dark_purple: import("@hanzogui/config/v5").V5Theme;
+    dark_teal: import("@hanzogui/config/v5").V5Theme;
+    dark_neutral: import("@hanzogui/config/v5").V5Theme;
+    light_surface1: import("@hanzogui/config/v5").V5Theme;
+    light_white_surface1: import("@hanzogui/config/v5").V5Theme;
+    light_surface2: import("@hanzogui/config/v5").V5Theme;
+    light_white_surface2: import("@hanzogui/config/v5").V5Theme;
+    dark_surface1: import("@hanzogui/config/v5").V5Theme;
+    dark_black_surface1: import("@hanzogui/config/v5").V5Theme;
+    dark_surface2: import("@hanzogui/config/v5").V5Theme;
+    dark_black_surface2: import("@hanzogui/config/v5").V5Theme;
+    light_black_accent: import("@hanzogui/config/v5").V5Theme;
+    light_black_surface1: import("@hanzogui/config/v5").V5Theme;
+    light_black_surface2: import("@hanzogui/config/v5").V5Theme;
+    light_white_accent: import("@hanzogui/config/v5").V5Theme;
+    light_gray_accent: import("@hanzogui/config/v5").V5Theme;
+    light_gray_surface1: import("@hanzogui/config/v5").V5Theme;
+    light_gray_surface2: import("@hanzogui/config/v5").V5Theme;
+    light_blue_accent: import("@hanzogui/config/v5").V5Theme;
+    light_blue_surface1: import("@hanzogui/config/v5").V5Theme;
+    light_blue_surface2: import("@hanzogui/config/v5").V5Theme;
+    light_red_accent: import("@hanzogui/config/v5").V5Theme;
+    light_red_surface1: import("@hanzogui/config/v5").V5Theme;
+    light_red_surface2: import("@hanzogui/config/v5").V5Theme;
+    light_yellow_accent: import("@hanzogui/config/v5").V5Theme;
+    light_yellow_surface1: import("@hanzogui/config/v5").V5Theme;
+    light_yellow_surface2: import("@hanzogui/config/v5").V5Theme;
+    light_green_accent: import("@hanzogui/config/v5").V5Theme;
+    light_green_surface1: import("@hanzogui/config/v5").V5Theme;
+    light_green_surface2: import("@hanzogui/config/v5").V5Theme;
+    light_orange_accent: import("@hanzogui/config/v5").V5Theme;
+    light_orange_surface1: import("@hanzogui/config/v5").V5Theme;
+    light_orange_surface2: import("@hanzogui/config/v5").V5Theme;
+    light_pink_accent: import("@hanzogui/config/v5").V5Theme;
+    light_pink_surface1: import("@hanzogui/config/v5").V5Theme;
+    light_pink_surface2: import("@hanzogui/config/v5").V5Theme;
+    light_purple_accent: import("@hanzogui/config/v5").V5Theme;
+    light_purple_surface1: import("@hanzogui/config/v5").V5Theme;
+    light_purple_surface2: import("@hanzogui/config/v5").V5Theme;
+    light_teal_accent: import("@hanzogui/config/v5").V5Theme;
+    light_teal_surface1: import("@hanzogui/config/v5").V5Theme;
+    light_teal_surface2: import("@hanzogui/config/v5").V5Theme;
+    light_neutral_accent: import("@hanzogui/config/v5").V5Theme;
+    light_neutral_surface1: import("@hanzogui/config/v5").V5Theme;
+    light_neutral_surface2: import("@hanzogui/config/v5").V5Theme;
+    dark_black_accent: import("@hanzogui/config/v5").V5Theme;
+    dark_white_accent: import("@hanzogui/config/v5").V5Theme;
+    dark_white_surface1: import("@hanzogui/config/v5").V5Theme;
+    dark_white_surface2: import("@hanzogui/config/v5").V5Theme;
+    dark_gray_accent: import("@hanzogui/config/v5").V5Theme;
+    dark_gray_surface1: import("@hanzogui/config/v5").V5Theme;
+    dark_gray_surface2: import("@hanzogui/config/v5").V5Theme;
+    dark_blue_accent: import("@hanzogui/config/v5").V5Theme;
+    dark_blue_surface1: import("@hanzogui/config/v5").V5Theme;
+    dark_blue_surface2: import("@hanzogui/config/v5").V5Theme;
+    dark_red_accent: import("@hanzogui/config/v5").V5Theme;
+    dark_red_surface1: import("@hanzogui/config/v5").V5Theme;
+    dark_red_surface2: import("@hanzogui/config/v5").V5Theme;
+    dark_yellow_accent: import("@hanzogui/config/v5").V5Theme;
+    dark_yellow_surface1: import("@hanzogui/config/v5").V5Theme;
+    dark_yellow_surface2: import("@hanzogui/config/v5").V5Theme;
+    dark_green_accent: import("@hanzogui/config/v5").V5Theme;
+    dark_green_surface1: import("@hanzogui/config/v5").V5Theme;
+    dark_green_surface2: import("@hanzogui/config/v5").V5Theme;
+    dark_orange_accent: import("@hanzogui/config/v5").V5Theme;
+    dark_orange_surface1: import("@hanzogui/config/v5").V5Theme;
+    dark_orange_surface2: import("@hanzogui/config/v5").V5Theme;
+    dark_pink_accent: import("@hanzogui/config/v5").V5Theme;
+    dark_pink_surface1: import("@hanzogui/config/v5").V5Theme;
+    dark_pink_surface2: import("@hanzogui/config/v5").V5Theme;
+    dark_purple_accent: import("@hanzogui/config/v5").V5Theme;
+    dark_purple_surface1: import("@hanzogui/config/v5").V5Theme;
+    dark_purple_surface2: import("@hanzogui/config/v5").V5Theme;
+    dark_teal_accent: import("@hanzogui/config/v5").V5Theme;
+    dark_teal_surface1: import("@hanzogui/config/v5").V5Theme;
+    dark_teal_surface2: import("@hanzogui/config/v5").V5Theme;
+    dark_neutral_accent: import("@hanzogui/config/v5").V5Theme;
+    dark_neutral_surface1: import("@hanzogui/config/v5").V5Theme;
+    dark_neutral_surface2: import("@hanzogui/config/v5").V5Theme;
+}, {
     text: "textAlign";
     b: "bottom";
     bg: "backgroundColor";