refactor(react-ui): move density tokens into react-ui for a valid default (#296)

Author: brtkx

packages/react-ui/src/styles.css

@@ -1,2 +1,13 @@
 @import "tailwindcss" prefix(zd);
 @config "../tailwind.config.ts";
+
+/* Density base. --zd-density is a unitless multiplier (1 = default) that the
+   spacing base and the font tokens (see tailwind.config.ts) derive from, so the
+   whole design system scales from one variable. Defined here so react-ui is
+   self-contained — its own tokens read --zd-density, so its Storybook and any
+   standalone consumer get a valid default. Consumers (e.g. @zerodev/wallet-react-ui)
+   override --zd-density per subtree to produce size variants. */
+:root {
+  --zd-density: 1;
+  --zd-spacing: calc(0.25rem * var(--zd-density));
+}

packages/wallet-react-ui/src/shared/components/Screen/index.tsx

@@ -52,8 +52,9 @@ export function Screen({
       <div
         className={cn(
           // m-1.5 = calc(var(--zd-spacing) * 1.5) = 6px at density 1, so the
-          // gradient border ring thins with the size variants — matching the
-          // now-scaling corner radius, keeping the whole frame proportional.
+          // gradient border ring thins with the size variants. (Corner radii
+          // stay fixed, so at smaller sizes the ring is marginally non-uniform
+          // at the corners — a minor cosmetic trade-off.)
           'zd:flex zd:flex-1 zd:flex-col zd:m-1.5 zd:px-4 zd:overflow-hidden zd:rounded-4xl zd:relative',
           contentClassName,
         )}

packages/wallet-react-ui/src/styles.css

@@ -14,7 +14,9 @@
    steps (see react-ui/tailwind.config.ts) — so one variable rescales spacing,
    padding, gaps, control heights, and the frame width together. Font sizes also
    multiply by --zd-density (see the fontSize tokens), so type scales too — a
-   true proportional zoom. Corner radii, borders, and icon sizes stay fixed.
+   true proportional zoom. Icons sized with spacing utilities (w-6/h-6, h-4.5)
+   scale with it as well. Corner radii, borders, and any icon pinned to an
+   arbitrary px size (e.g. the signing h-[18px] glyphs) stay fixed.
 
    Consumers set the density via the Screen/AuthFlow `size` prop, which writes
    `data-zd-size` on the Screen root; the scale below maps size → density.