@boost33/ui 0.4.0 → 0.5.0

package/dist/theme.css

@@ -17,13 +17,38 @@
  * `text-sm` mean this package's values in that app, and keep meaning them
  * across a version bump.
  *
- * This is the SAME token set as tokens.css, from the same dump, written by
- * the same generator run and the same code path -- only the prelude differs
- * (`@theme static` here, `:root` there). Tailwind emits an @theme block onto
- * `:root` inside `@layer theme`, so a consumer importing both files declares
- * every name twice; that is harmless for exactly as long as the two agree,
- * and tests/theme-drift.test.ts is what keeps them agreeing. Hand-editing
- * this file is how that stops being true.
+ * This is tokens.css's SYSTEM tokens, from the same dump, written by the same
+ * generator run and the same code path -- the prelude differs (`@theme static`
+ * here, `:root` there) and so does the token list. Tailwind emits an @theme
+ * block onto `:root` inside `@layer theme`, so a consumer importing both files
+ * declares every name here twice; that is harmless for exactly as long as the
+ * two agree, and tests/theme-drift.test.ts is what keeps them agreeing.
+ * Hand-editing this file is how that stops being true.
+ *
+ * WHAT IS DELIBERATELY ABSENT, and it is not an omission (ADR-0013, B33-1274).
+ * `static` mints a utility class for every name below, and a class name is a
+ * published API -- an unknown Tailwind class does not error, it silently stops
+ * matching, so withdrawing one later renders a consumer's element unstyled.
+ * Seven of the dump's tokens are measurements of ONE COMPONENT each, hand-added
+ * only because a literal in a component is forbidden, and every one of them is
+ * a number a fidelity gate is expected to move. They are marked
+ * `"scope": "component-private"` in data/paper-tokens.json and emitted to
+ * tokens.css alone:
+ *
+ *   --color-grant, --color-purchased        WalletChip's two bar segments
+ *   --text-3xs                             AppSwitcher's avatar initials
+ *   --text-nav-label                       the nav item label size
+ *   --spacing-topup-reserve                WalletChip's Top up strip
+ *   --spacing-wallet-segment-min           WalletChip's smallest honest mark
+ *   --radius-product-tile                  ProductMark's tile corner
+ *
+ * They still reach this app on `:root` through style.css, unchanged and at the
+ * same values, so `var(--spacing-topup-reserve)` reads them exactly as before.
+ * What no longer exists is `bg-grant`, `bg-purchased`, `text-3xs`,
+ * `text-nav-label`, `p-topup-reserve` (and its spacing siblings),
+ * `w-wallet-segment-min` and `rounded-product-tile`. Reaching a
+ * component-private measurement through `var()` is a deliberate escape hatch;
+ * binding a class name to one was an accident.
  *
  * `static` rather than plain `@theme` on purpose: plain `@theme` emits only
  * the variables a generated utility happens to reference, so a token nothing
@@ -97,8 +122,6 @@
   --color-danger-subtle: var(--color-crimson-100);
   --color-info: var(--color-blue-600);
   --color-info-subtle: var(--color-blue-100);
-  --color-grant: var(--color-sand-600); /* Grant tokens — they expire. */
-  --color-purchased: var(--color-neutral-950); /* Purchased tokens — they never expire. Ink, because it is permanent. */
   --shadow-overlay-color: rgb(29 29 27 / 20%); /* The one colour every shadow in the system is drawn in: --color-neutral-950, the brand black, at 20%. Added by hand on B33-530 rather than by recapture -- Paper carries it, this dump predates it -- and the value is the Wallet's, copied from its own elevation.css. The offsets it is composed into are not a Paper token type; see elevation-tokens.css. */
 
   /* fontFamily */
@@ -107,7 +130,6 @@
   --font-mono: var(--boost33-font-mono, 'Geist Mono'), ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* Every token amount. Tabular, so money aligns in columns. */
 
   /* fontSize */
-  --text-3xs: 9px; /* The AppSwitcher account avatar's initials, and nothing else today. Not a Paper token: added by hand the way --text-nav-label was, from the approved appswitcher-open baseline, where "AC" inks 12.5px in the 24px avatar tile -- Inter's advance for that pair is 12.2px at 9px/600 and 16.3px at 12px/600, which is what this package drew before B33-910. A step below --text-2xs and below anything a person is asked to read: the initials are aria-hidden decoration on a row whose name is beside them, so the contrast and size floors that govern body copy do not apply. Do not reach for it for text. */
   --text-2xs: 11px;
   --text-xs: 12px;
   --text-sm: 13px;
@@ -121,7 +143,6 @@
   --text-5xl: 46px;
   --text-6xl: 60px;
   --text-7xl: 78px; /* The balance figure. One per screen. */
-  --text-nav-label: 14px; /* Nav item label size, settled in the fidelity baseline. Sits between --text-sm (13px) and --text-base (15px) without sharing either slot -- reused by other nav-adjacent labels, not just NavItem. */
 
   /* fontWeight */
   --font-weight-light: 300;
@@ -152,7 +173,10 @@
   /* container */
   --container-sidebar: 264px; /* Shell sidebar. Matches BoostScore so the products feel like one system. */
   --container-sidebar-rail: 56px; /* Shell sidebar collapsed to the rail. Added when Sidebar needed it; 56px is the settled rail width the WalletChip and NavItem rail specimens were already shot at (see CONTEXT.md, 'Rail'). */
+  --container-command-palette: 560px; /* CommandPalette's panel width. Not a Paper *token* -- it is the width of the Palette frame on the 'CommandPalette - search' artboard (page 004 Components), added by hand the way --container-sidebar-rail, --spacing-topup-reserve and --spacing-wallet-segment-min were, and named for the surface it sizes rather than for a place on a scale. It belongs in --container-* rather than --spacing-* for the same reason --container-sidebar does: it is one surface's own width, and 560px is not a step on the x4 scale and never will be. Nothing else derives from it -- the palette is the modal variant of the anchored overlay (ADR-0009), centred over the page rather than anchored to a trigger, so no sibling measurement constrains it. PROVISIONAL, and deliberately recorded as such: CommandPalette has not passed its fidelity gate, and CLAUDE.md is explicit that before the gate nothing is authoritative and Paper is only a starting drawing. This is the drawing's number, not an approved measurement, and the person at the gate may move it. See B33-495. */
   --container-content: 1440px;
+  --container-account-menu: 312px; /* The AccountMenu popover panel's width, read off the AccountMenu drawings on Paper's 004 Components page and its origin on 103 Identity, which agree to the pixel. Not a Paper token and NOT a settled measurement, which is the part worth reading twice: the Wallet has never rendered an account menu, nothing in the spec records a popover width, and CLAUDE.md is explicit that before that component's fidelity gate no drawing is authoritative. This token exists because the first non-negotiable forbids a literal in a component, not because 312px is final -- the person at the gate may change it, and this sentence is what stops the next reader treating the value as approved. Off every scale here on purpose: it is one panel's width, the way --container-sidebar is one column's, and nothing else in the package reads it. */
+  --container-notification-panel: 360px; /* The NotificationCenter popover's width (B33-494). Not a Paper token: it is the width of the "NotificationCenter — popover" artboard's panel frame on page 004, read off the node rather than off a screenshot, and added by hand the way --container-sidebar-rail was. A container token and not a spacing step because it sizes a surface, which is what the namespace is for -- the AppSwitcher panel is --container-sidebar for the same reason, and the two differ because the switcher hangs off the 264px sidebar while this hangs off the top bar and is sized by its own content. NOTHING HAS APPROVED THIS VALUE YET: the Wallet never rendered this component, so there is no captured referent, and the number is settled by the person who approves the component at its fidelity gate and writes the measurement into the spec (CLAUDE.md, "The three components the Wallet never rendered"). It is a token rather than a literal so that when the gate moves it, it moves in one place. */
 
   /* spacing */
   --spacing-1: 4px;
@@ -162,9 +186,10 @@
   --spacing-4_5: 18px; /* PageHeader's top padding. Off the x4 scale on purpose, same reasoning as --spacing-2_5: the Boost Outbound screens set the page header 18px from the top and 16px from the bottom, so it is not a symmetric --spacing-4 block -- the extra 2px at the top optically centres a cap-height that sits low in its line box. */
   --spacing-5: 20px;
   --spacing-6: 24px;
-  --spacing-7: 28px; /* On the x4 scale but absent from the captured dump. Added when PageHeader wanted a 28px top padding; the compact header (B33-768) moved to --spacing-4_5 and nothing in this package uses 28px now. Kept rather than dropped because tokens.css ships in style.css and a consumer may be holding it. */
+  --spacing-7: 28px; /* On the x4 scale but absent from the captured dump. Added when PageHeader wanted a 28px top padding; the compact header (B33-768) moved to --spacing-4_5, which left nothing in this package using it until B33-494 sized the NotificationCenter empty state's bell glyph at 28px. It was kept through that gap rather than dropped because tokens.css ships in style.css and a consumer may be holding it. */
   --spacing-8: 32px;
   --spacing-10: 40px;
+  --spacing-11: 44px; /* The NotificationCenter empty state's bottom padding (B33-494). On the x4 scale and absent from the captured dump, the same shape of gap --spacing-7 filled. The empty panel sets its bell-and-copy block 40px (--spacing-10) from the header and 44px from the foot, which is not a symmetric block: the drawing hangs the group slightly high so it reads as centred against a panel whose header has visual weight the bottom edge does not. Read off the "NotificationCenter — popover" artboard's empty frame on page 004, and unapproved like every other measurement in that component until a human captures its designed baseline (CLAUDE.md). */
   --spacing-12: 48px;
   --spacing-16: 64px;
   --spacing-20: 80px;
@@ -174,7 +199,9 @@
   --spacing-1_25: 5px; /* WalletChip's resting balance bar height, measured off the approved fidelity baselines in B33-527 (walletchip-resting and walletchip-unknown both render it at exactly 5px; the lifted states add --spacing-0_5). Off the x4 scale on purpose, same reasoning as --spacing-2_5. */
   --spacing-0_5: 2px; /* WalletChip's rail bar height -- the split turned thin at 56px, settled in the fidelity baseline. Also the amount the chip opens up by when it lifts (B33-527) and the balance pill's vertical padding. Off the x4 scale on purpose, same reasoning as --spacing-2_5. */
   --spacing-2_25: 9px; /* The AppSwitcher trigger's block padding, settled in the spec's 9 September recapture ("9px block / 8px inline padding"). Off the x4 scale on purpose, same reasoning as --spacing-2_5. */
-  --spacing-topup-reserve: 68px; /* WalletChip's top-up reserve: the width of the strip the Top up button floats over in the chip header, kept clear of the wallet name. Not a Paper token and not a step on the x4 scale -- added by hand the way --spacing-2_5 and --radius-product-tile were, and named for what it reserves rather than for where it sits on a scale, because the number is a measurement of one button. Derived in B33-913 from the real rendering at the fidelity baselines' 240px chip width. `.topUp` is absolutely positioned, so it reserves no width of its own; at --text-xs / --font-weight-semibold in Inter it measures 39.6px for the English "Top up" and 59.9px for the French "Recharger" the first two consumers ship. 68px is the wider of those rounded up to 60px, plus the header's own --spacing-2 of clearance, so a truncated name's ellipsis stops short of the button instead of touching it. Deliberately no larger: the chip's header content box is 210px, so this still leaves 142px for the name and keeps "Portefeuille electronique" (140.3px) whole, and every px added here truncates an ordinary translated name earlier. A consumer whose top-up label is a phrase rather than a word ("Crediter le compte", 107px) overruns it again -- the only fix that holds for any label is the button in normal flow, which restructures an approved view and needs a human. See B33-913. */
+  --spacing-3_5: 14px; /* 14px, and two components measured it independently -- which is the strongest evidence a hand-added step is real rather than one drawing's accident. NotificationCenter (B33-494): the panel header's top padding, 14px from the top edge against 10px (--spacing-2_5) from the tab rule beneath it, the same shape of asymmetry --spacing-4_5 makes in PageHeader. AccountMenu (B33-493): the person block's block padding, the 38px avatar (--spacing-9_5) in 14px above and below making the 66px block the drawing measures. On the x4 scale (3.5 x 4) but absent from the captured Paper dump, the way --spacing-7 is. Read off UNAPPROVED drawings in both cases: neither component has been through its fidelity gate, so this value is provisional and the gate may move it. */
+  --spacing-0_25: 1px; /* The NotificationCenter's smallest step (B33-494): the unread-count pill's block padding, and the 1px the source mark drops to sit on the first line of the title beside it rather than on the line box's top. Off the x4 scale on purpose, same reasoning as --spacing-2_5, and a step below --spacing-0_5 (2px), which was the smallest until this. One px is a nudge rather than a space -- do not reach for it where a real gap is meant, and note that it is the width a hairline is already drawn at as a `1px` literal in every border rule here, which this token deliberately does not replace. */
+  --spacing-9_5: 38px; /* The AccountMenu person block's avatar: the circle carrying the signed-in person, and deliberately the largest avatar in the package -- the switcher's org tile is 24px and the account menu's own org tile 22px, because those two mark an organisation and this one is a portrait. On the x4 scale (9.5 x 4) and absent from the dump. Read off an UNAPPROVED drawing -- see --container-account-menu. */
 
   /* radius */
   --radius-none: 0px;
@@ -185,6 +212,5 @@
   --radius-xl: 8px;
   --radius-2xl: 12px;
   --radius-full: 9999px;
-  --radius-product-tile: 25%; /* The corner on the ProductMark tile -- the rounded square the four product glyphs sit on. Not a Paper token: the marks are copied from boostledger's icons.tsx, whose tile is a 40-unit `rect` with `rx=10`, i.e. a quarter of the side. Added by hand (the way --spacing-2_5 was) so this package's no-ad-hoc-radius rule is met with a token rather than a literal. Kept as a proportion, not a px value, on purpose: unlike every other radius here it is applied to a `rect` inside a `viewBox=0 0 40 40` and must scale with the mark -- 25% resolves to rx=10 on that grid at every size, which is what lets one drawing render correctly from Paper's 96px down to 20px. A fixed px radius cannot do that. */
 
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boost33/ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "The app shell every Boost33 product renders inside.",
   "license": "UNLICENSED",
   "type": "module",
@@ -41,6 +41,7 @@
     "sidebar-overflow-check": "npm run specimen:build && npx tsx scripts/sidebar-overflow-check.mts",
     "wallet-name-overflow-check": "npm run specimen:build && npx tsx scripts/wallet-name-overflow-check.mts",
     "nav-height-budget-check": "npm run specimen:build && npx tsx scripts/nav-height-budget-check.mts",
+    "launch-contrast-check": "npm run specimen:build && npx tsx scripts/launch-contrast-check.mts",
     "token-order-check": "npx tsx scripts/token-order-check.mts",
     "afk": "npx tsx .sandcastle/main.mts",
     "hooks:install": "git config core.hooksPath .githooks",