@crewlethq/tokens 0.4.4 → 0.5.1

package/dist/css/tokens.css

@@ -10,84 +10,68 @@
   --blur-xl: 20px; /** Hero overlays and decorative panels. */
   --blur-2xl: 24px; /** Aggressive backdrop blur for emphasis. */
   --breakpoint-sm: 480px; /** Small phones. */
+  --breakpoint-phone: 640px; /** The SINGLE-PANE layout: under it a screen shows one pane at a time, a detail replacing its list with a way back, rather than the two side by side. 640 is the two-pane Inbox's list drawn twice, 2 x 320px: under it (where the sheet is already full-bleed) a detail beside a 320px list would be narrower than the list itself. Switch with (width < 640px), strictly under, as at breakpoint.shell. */
   --breakpoint-md: 768px; /** Tablets. The primary layout switch between stacked and multi-column. */
-  --breakpoint-shell: 900px; /** Where the application shell stops being a rail beside a pane: a 280px rail plus a 620px minimum content column. A media query cannot read a custom property, so a stylesheet that switches here spells the number, and @crewlethq/tokens/css/breakpoint is the generated partial that says what the number is. */
+  --breakpoint-shell: 1024px; /** Where the application shell stops being a rail beside a sheet and the rail becomes a drawer. DERIVED, at density 1: size.shell.rail 236px + size.shell.inset 8px + a 780px floor for the sheet = 1024px. The floor is the two-pane Inbox, a 320px list beside a 460px detail: the sheet the design needs to draw a list and its detail side by side. Switch with (width < 1024px), STRICTLY UNDER: at exactly 1024px the sheet is exactly its floor and the wide layout fits, so (max-width: 1024px) would draw the drawer at the one width the arithmetic says the rail still fits beside the sheet. It shares its number with lg by arithmetic, not by name: a change to the rail or the inset moves this step and leaves lg where it is. A media query cannot read a custom property, so a stylesheet that switches here spells the number, and @crewlethq/tokens/css/breakpoint is the generated partial that says what the number is. */
   --breakpoint-lg: 1024px; /** Small laptops. */
   --breakpoint-xl: 1200px; /** Standard desktop. */
   --breakpoint-2xl: 1600px; /** Large desktop, such as wide marketing hero containers. */
-  --color-brand-primary: #5469d4; /** Primary brand color and the fill of primary actions. The themes repaint it monochrome: black on light, white on dark. */
-  --color-brand-primary-hover: #4759c2;
-  --color-brand-primary-active: #3b4caa;
-  --color-brand-accent: #5469d4; /** The one colour that means HERE: the active nav indicator, the focus ring, the selected row, the filter that is on. A fill and a mark, never text. The same in every palette. */
-  --color-brand-accent-hover: #4a5cc2; /** White clears 5.83:1 on it. The value it replaced, #6478e0, measured 3.96:1 and put the label of a hovered primary button under the text floor. */
-  --color-brand-accent-active: #3e50b8; /** White clears 6.90:1 on it. */
-  --color-brand-accent-ink: #8b9ff5; /** The accent as TEXT. The fill step is never text and this step is never a background; the split is what the palette suite measures. Light repaints it to a dark indigo. */
-  --color-brand-accent-rgb: 84, 105, 212; /** The accent as an r, g, b triple for translucent tints: rgba(var(--color-brand-accent-rgb), 0.12). Rebind it together with the accent. */
-  --color-brand-accent-soft: rgba(84, 105, 212, 0.18); /** Translucent accent fill behind an active or selected row. The alpha is per theme: a selected row has to separate from its ground by at least as much as a plain hover overlay does, and one alpha for both themes cannot. */
-  --color-brand-accent-soft-strong: rgba(84, 105, 212, 0.32); /** Translucent accent border paired with the soft fill. */
-  --color-brand-accent-deep: #5c24ff; /** Deep purple. Distinct from primary; used as a gradient stop and rarely on its own. */
+  --color-brand-accent: #7c56ff; /** The one colour that means HERE, and the one that means ACT: the fill of the primary action, the selected row, the filter that is on, the count of what waits on the reader, and the hue the focus ring is drawn in. A fill and a mark, never text. Per palette: this marketing root and the dark palette take the approved #7c56ff, and light repaints it #6b45f0. On this one white clears 4.53:1, so it is as light as the accent can be while the label of a primary button still clears the text floor. */
+  --color-brand-accent-hover: #744bf4; /** A step DARKER, never brighter: the least move along lightness, keeping hue and chroma, that a reader can see (dE 3.08), and a move away from the white label, which it takes from 4.53:1 to 5.18:1. The approved hover brightened the fill instead (brightness(1.08), #865dff) and measured 4.18:1, under the text floor at the moment the button is about to be pressed. */
+  --color-brand-accent-active: #6c40e9; /** One step further on the same line, dE 3.05 past the hover. White clears 5.92:1. */
+  --color-brand-accent-ink: #b3a1ff; /** The accent as TEXT, the approved step, and 5.90:1 at its tightest, on a pressed row inside a raised surface. The fill step is never text and this step is never a background; the split is what the palette suite measures. Light repaints it to a dark violet. */
+  --color-brand-accent-soft: rgba(124, 86, 255, 0.16); /** Translucent accent fill behind a selected row: this palette's accent at the approved 0.16. The alpha is per palette, because a selected row has to separate from its ground by at least as much as a plain hover overlay does, and by dE 3 from the overlay itself, and one alpha cannot do both on a dark ground and a light one. Its companions are derived from the accent by the build: accentRgb, the accent as an r, g, b triple for a translucent tint of a stylesheet's own (rgba(var(--color-brand-accent-rgb), 0.12)), and accentSoftStrong, the accent at 0.32, the border paired with this fill. */
+  --color-brand-accent-deep: #5c24ff; /** Deep purple. Distinct from the accent; used as a gradient stop and rarely on its own. */
   --color-brand-highlight: #ff3bff; /** Hot pink highlight. The first stop of the brand gradient; use sparingly on its own. */
   --color-brand-slate: #3c4052; /** Muted blue-grey for low-emphasis informational fills (toast progress drains, hover halos, info notification tints). */
   --color-brand-mark: #7c56ff; /** The logo's own colour, and the default of the brand figure. It belongs to the mark rather than to the interface, so it is the same in every palette and is never spent on a control. */
   --color-brand-gradient: linear-gradient(90deg, #ff3bff 0%, #ecbfbf 38%, #5c24ff 76%, #d94fd5 100%); /** Brand gradient. The one 4-stop definition every gradient surface uses, so marketing and product surfaces match. */
-  --color-surface-background: #000000;
-  --color-surface-subtle: rgba(255, 255, 255, 0.05);
-  --color-surface-muted: rgba(255, 255, 255, 0.08);
-  --color-surface-elevated: rgba(255, 255, 255, 0.12);
-  --color-surface-topbar: #15171c;
-  --color-surface-topbar-lift: #1c1e24;
-  --color-surface-topbar-active: #22252b;
+  --color-brand-accent-rgb: 124, 86, 255;
+  --color-brand-accent-soft-strong: rgba(124, 86, 255, 0.32);
+  --color-surface-frame: #000000; /** The FRAME, the lowest of the four rungs: the application ground under the rail and around the floating sheet, and what the document baseline paints the body with. The marketing palette is one black ground, so here it is the page's own black; each theme lifts its sheet off it. */
+  --color-surface-background: #000000; /** The SHEET: the ground page content sits on, floating inside the frame. It keeps the name every component already reads for 'the ground content sits on', the focus ring's inner ring and a mask drawn in the page's colour among them. */
+  --color-surface-subtle: rgba(255, 255, 255, 0.05); /** The CARD: a card, a popover, a dialog body. Near-flat on the sheet on purpose, because a card is found by its hairline, --color-border-default, which the palette suite holds to dE 3 on both sides of it. */
+  --color-surface-elevated: rgba(255, 255, 255, 0.12); /** RAISED: a chip, a segmented well, a key cap, a meter track, a lifted row. It has no border of its own, so its fill is held dE 3 off the card. */
   --color-surface-hover: rgba(255, 255, 255, 0.05); /** The overlay a hovered row carries. A row shows this OR the selected tint, never both: they are the same property on the same element, so the tinted row keeps its tint and the palette suite measures no hover-over-selected composite. */
   --color-surface-pressed: rgba(255, 255, 255, 0.08);
   --color-surface-inset: rgba(255, 255, 255, 0.05); /** A well: a code block, an empty state, a panel sunk into its card. */
-  --color-surface-glass: rgba(28, 30, 36, 0.90); /** Frosted chrome, paired with --blur-sm. Glass carries chrome; anything carrying words sits on an opaque surface. The alpha is 0.90 because that is what keeps the tertiary text step over 4.5:1 with the brand-primary fill behind it, which is the worst backdrop a panned canvas can put there. */
+  --color-surface-glass: rgba(28, 30, 36, 0.90); /** Frosted, paired with --blur-sm: the ground of what floats OVER CONTENT rather than over interface, a canvas's bars and notes and a chart's reading, which stands over the marks beside the one it reads. The card cannot be that ground, because in this palette it is a 5% wash and a chart's hues show straight through it. The alpha is 0.90 because that is what keeps the tertiary text step over 4.5:1 (4.78:1 here) with the inverse ground behind it, the far end of the palette from the glass and so the worst backdrop anything under a floating panel can put there; the palette suite measures every text step over each data hue by name as well. */
   --color-surface-scrim: rgba(0, 0, 0, 0.6); /** A ground that DARKENS what is behind it: a media viewer, an upload target, the rail's own overlay on a phone. It is not what a dialog sits on; see veil. */
-  --color-surface-veil: rgba(0, 0, 0, 0.72); /** The ground a dialog, a sheet and the command palette sit on. It is THE ROOT'S OWN background at 0.72, which is this root's black here and a theme's own ground there, so the page is faded to context rather than darkened out of the way: an operator keeps their place while a surface is open. Held to the ground it belongs to, and not to one theme's value: a veil that is a different colour from the page it covers is a wash over the page rather than the page seen through less of itself. The alpha is what holds the page's own primary text inside a band, below the 3:1 mark floor so nothing behind competes with the surface and above 1.5:1 so the page is still there. The palette suite measures both ends. */
+  --color-surface-veil: rgba(0, 0, 0, 0.65); /** The ground a dialog, a sheet and the command palette sit on. It is THE ROOT'S OWN FRAME at 0.65, which is this root's black here and a theme's own frame there, so the application is faded back into its own ground rather than darkened out of the way: an operator keeps their place while a surface is open. Held to the ground it belongs to, and not to one theme's value: a veil that is a different colour from what it covers is a wash over it rather than the application seen through less of itself. The alpha is what holds the page's own primary text inside a band, below the 3:1 mark floor so nothing behind competes with the surface and above 1.5:1 so the page is still there. The palette suite measures both ends. */
   --color-surface-inverse: #ffffff; /** The ground that inverts the palette, carrying --color-text-inverse. */
   --color-text-primary: #fafafa; /** Slightly off-white to reduce eye strain on dark surfaces. */
   --color-text-secondary: #c9ced8;
-  --color-text-tertiary: #95a2b6; /** A fact, so it clears 4.5:1 on every surface it can land on, including a pressed row inside the top bar's active step. #8c99ad measured 4.17:1 there. */
+  --color-text-tertiary: #95a2b6; /** A fact, so it clears 4.5:1 on every surface it can land on, including a pressed row inside a raised surface. #8c99ad measured 4.17:1 there. */
   --color-text-muted: #686b70; /** DECORATION ONLY: a hairline glyph, a disabled affordance, a border. Measured BETWEEN 2.8:1 and 4.5:1 on the panel, because a step that crept up to the fact floor would invite itself into a table cell, which is the whole reason it has a separate name. */
-  --color-text-on-brand: #ffffff; /** The label on a brand-primary fill. */
-  --color-text-on-accent: #ffffff; /** The label on an accent fill, and on the danger fill. Separate from onBrand because the themes repaint the brand fill monochrome and leave the accent where it is. */
+  --color-text-on-accent: #ffffff; /** The label on an accent fill, and on the danger fill. White in every palette: a primary button whose label changed colour with the theme would read as two different buttons. */
   --color-text-inverse: #09090b;
   --color-border-default: rgba(255, 255, 255, 0.08);
   --color-border-hover: rgba(255, 255, 255, 0.15);
   --color-border-strong: #4a4d52; /** The heavier resting border, at the plain border's hover weight. It used to hold the same value as --color-border-default in both palettes, so the pair was a copy of the plain pair rather than a third step. */
   --color-border-strong-hover: #5a5e65; /** One step past strong, so the strong pair is a real pair. */
   --color-border-control: #7f848e; /** The boundary of an input, a checkbox or a switch. It clears 3:1 on every surface a control can sit on, the overlay composites included: a checkbox inside a hovered row in a dialog body is the case the opaque surfaces alone do not catch. */
-  --color-focus: #8b9ff5; /** The focus indicator, drawn as an OUTLINE at 2px and offset 2px. Forced-colors mode drops every box-shadow and keeps outlines, so a ring drawn as a shadow alone disappears for exactly the readers who need one. */
-  --color-feedback-success: #14b8a6; /** A good terminal state. The four status meanings never move. */
-  --color-feedback-success-ink: #5eead4;
-  --color-feedback-warning: #f59e0b; /** A person is needed. */
-  --color-feedback-warning-ink: #fde68a;
-  --color-feedback-danger: #dc2626; /** Failure, and the fill of a destructive action. */
-  --color-feedback-danger-hover: #b91c1c;
-  --color-feedback-danger-ink: #fca5a5;
-  --color-feedback-info: #38bdf8; /** Neutral information. */
-  --color-feedback-info-ink: #7dd3fc;
-  --color-feedback-success-soft: rgba(20, 184, 166, 0.12);
-  --color-feedback-success-line: rgba(20, 184, 166, 0.3);
-  --color-feedback-warning-soft: rgba(245, 158, 11, 0.12);
-  --color-feedback-warning-line: rgba(245, 158, 11, 0.3);
-  --color-feedback-danger-soft: rgba(220, 38, 38, 0.12);
-  --color-feedback-danger-line: rgba(220, 38, 38, 0.3);
-  --color-feedback-info-soft: rgba(56, 189, 248, 0.12);
-  --color-feedback-info-line: rgba(56, 189, 248, 0.3);
-  --color-phase-onboarding: #f77ae9; /** The agent phases: onboarding, execute, review. Three, and the only categorical identity outside a chart. Every pair stays dE 10 apart under normal, protan and deutan vision, and clears the status family and the accent under all three. */
-  --color-phase-onboarding-ink: #ff82f1;
-  --color-phase-execute: #ac6bff;
-  --color-phase-execute-ink: #d697ff;
-  --color-phase-review: #00a24f;
-  --color-phase-review-ink: #46c872;
-  --color-phase-onboarding-soft: rgba(247, 122, 233, 0.12);
-  --color-phase-execute-soft: rgba(172, 107, 255, 0.12);
-  --color-phase-review-soft: rgba(0, 162, 79, 0.12);
-  --color-data-1: #a5b4fc; /** Five chart series in a fixed order, plus a neutral residual, and legal ONLY inside a chart that carries a legend. Adjacent pairs are what a legend reader distinguishes, so that is what is measured, under all three visions. Series 1 is deliberately NOT the accent: a series painted in the selection colour claims to be the selection. */
-  --color-data-2: #facc15;
-  --color-data-3: #38bdf8;
-  --color-data-4: #86efac;
-  --color-data-5: #ec4899;
+  --color-focus: #7e5bff; /** The focus indicator, drawn as an OUTLINE at 2px and offset 2px. Forced-colors mode drops every box-shadow and keeps outlines, so a ring drawn as a shadow alone disappears for exactly the readers who need one. It is the ACCENT, lightened dE 1.06 along lightness, the dark palette's value, which clears this root too (3.01:1): #7c56ff itself measured 2.89:1 on a pressed row inside a raised surface, under the 3:1 a ring has to clear, and the accent cannot make that move for it, because any lighter takes the white label of a primary button under the text floor. */
+  --color-feedback-success: #3ecf8f; /** DONE: work that finished. The four states are what a piece of work is doing, and their meanings never move: info is working, warning needs a person, danger is stopped, success is done. The names stay generic because a badge, a callout and a toast mean the same four things. Every value here is the dark palette's, the approved design's moved the least the floors allow; tokens/themes/dark.json says what moved each. */
+  --color-feedback-success-ink: #72dead;
+  --color-feedback-warning: #f4b221; /** NEEDS A PERSON: work that is waiting on somebody. */
+  --color-feedback-warning-ink: #f6c86f;
+  --color-feedback-danger: #e50055; /** STOPPED: work that failed or was halted, and the fill of a destructive action. The one hue that means the same thing everywhere in a product, so every chart series is held away from it. */
+  --color-feedback-danger-hover: #d6004f; /** The destructive action under the pointer: a visible step darker, away from its white label. */
+  --color-feedback-danger-ink: #ff9a9a;
+  --color-feedback-info: #4c9dff; /** WORKING: work under way. */
+  --color-feedback-info-ink: #86beff;
+  --color-feedback-success-soft: rgba(62, 207, 143, 0.12);
+  --color-feedback-success-line: rgba(62, 207, 143, 0.3);
+  --color-feedback-warning-soft: rgba(244, 178, 33, 0.12);
+  --color-feedback-warning-line: rgba(244, 178, 33, 0.3);
+  --color-feedback-danger-soft: rgba(229, 0, 85, 0.12);
+  --color-feedback-danger-line: rgba(229, 0, 85, 0.3);
+  --color-feedback-info-soft: rgba(76, 157, 255, 0.12);
+  --color-feedback-info-line: rgba(76, 157, 255, 0.3);
+  --color-data-1: #458adc; /** Four series in a fixed order, blue, orange, aqua and yellow, plus a neutral residual, and legal ONLY inside a figure that names them: a legend for two series or more, the label for one. Neighbours are what a legend reader distinguishes, so that is what is measured: dE 9 apart under every vision and 15 under normal vision. Series 1 is deliberately NOT the accent: a series painted in the selection colour claims to be the selection. The values are the dark palette's. */
+  --color-data-2: #e4631f;
+  --color-data-3: #009c79;
+  --color-data-4: #c98500;
   --color-data-other: #71717a; /** The residual bucket. Exempt from the separation rules on purpose: a residual that competed with a real series would be claiming to be one. */
   --color-avatar-tint-0: #2563eb; /** The ten seeded avatar grounds, chosen by a stable hash when a consumer passes a colour seed. Each clears 4.5:1 under white initials; five of them were darkened along OKLab lightness to get there, keeping their hue and chroma. */
   --color-avatar-tint-1: #7c3aed;
@@ -139,6 +123,7 @@
   --motion-duration-base: 150ms; /** Default UI transition. */
   --motion-duration-moderate: 200ms; /** Nav hover, topbar background changes. */
   --motion-duration-slow: 300ms; /** Modal enter, drawer slide. */
+  --motion-duration-breath: 2200ms; /** The PERIOD of a mark saying that work is still happening: one full round, out and back. 0.45 cycles a second, the approved design's 2.2s, slow enough to read as breathing rather than as an alert and far under the three flashes a second that are a seizure risk. A PERIOD rather than a transition: nothing uses it to move a surface from one place to another. */
   --motion-easing-default: ease;
   --motion-easing-out: ease-out;
   --motion-easing-in-out: ease-in-out;
@@ -151,6 +136,7 @@
   --radius-lg: 12px;
   --radius-xl: 16px;
   --radius-2xl: 24px;
+  --radius-sheet: 14px; /** The corner of the SHEET: the page an application floats on the frame, inset from the frame's edge by size.shell.inset. A role rather than a step on the ramp, because it is the approved design's own number and sits between lg (12px, a card) and xl (16px): the sheet is the outermost rounded surface on a screen, so its corner is a step rounder than every card drawn inside it. */
   --radius-pill: 999px;
   --radius-circle: 50%; /** Avatars, status dots, circular badges. */
   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -165,17 +151,19 @@
   --shadow-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.04); /** The top-edge rim light on its own, for a panel that is lifted by light rather than by a shadow. It is none in the light theme. */
   --shadow-focus: 0 0 0 2px var(--color-surface-background), 0 0 0 4px var(--color-focus); /** For a component that wants a shadow as well as its focus outline. It never REPLACES the outline: forced-colors mode drops every box-shadow and keeps outlines, so a ring drawn as a shadow alone leaves the readers who most need an indicator with none. The value it replaces, a 3px rgba(84, 105, 212, 0.35) glow, measured between 1.41:1 and 1.61:1. */
   --shadow-selection: inset 0 0 0 2px var(--color-brand-accent); /** The ring around a selected card or canvas node. Inset, so it is not clipped by a scroller. */
-  --shadow-glow: 0 4px 24px rgba(84, 105, 212, 0.3);
-  --size-control-sm: max(24px, calc(28px * var(--density, 1))); /** The height of a control. The small step carries a floor because 28 x 0.82 is 22.96px, and a target under 24px fails at compact density on a touch screen. Every step is emitted as calc(Npx * var(--density, 1)), so it is unchanged at density 1. */
-  --size-control-md: calc(32px * var(--density, 1));
+  --shadow-glow: 0 4px 24px rgba(var(--color-brand-accent-rgb), 0.3); /** A light cast in the accent's own colour, composed from --color-brand-accent-rgb so it follows the accent in every palette and through an application's rebind of it. */
+  --size-control-sm: max(24px, calc(26px * var(--density, 1))); /** The height of a control, in the approved design's control rhythm: a button is 30px and a small one 26px, and an icon button, a field in a toolbar and a segmented well stand at the same 30px, so every control on a line shares one height. The small step carries a floor because 26 x 0.82 is 21.32px, and a target under 24px fails at compact density on a touch screen. Every step is emitted as calc(Npx * var(--density, 1)), so it is unchanged at density 1. */
+  --size-control-md: calc(30px * var(--density, 1)); /** The design's button, icon button, toolbar field and segmented well. A chip inside a well is six under it: a 1px boundary and a 2px inset on each side, which leaves exactly the 24px target floor at density 1. */
   --size-control-lg: calc(44px * var(--density, 1));
   --size-row-sm: max(24px, calc(28px * var(--density, 1))); /** The height of a list row, so every list in a product lines up with every other. The small step floors at 24px as the control step does. */
   --size-row-md: calc(36px * var(--density, 1));
   --size-row-lg: calc(48px * var(--density, 1));
   --size-nav-gutter: calc(8px * var(--density, 1)); /** The rail's geometry in TWO parts, because a row's EDGE and a row's TEXT want different insets. The gutter insets the rail, which is where a row's background begins; the row pad insets the content inside the row. Splitting it is what lets the rows widen without moving a glyph: shrink the gutter, grow the pad by the same step, and the line every mark, group label and item text starts on does not move. */
   --size-nav-row-pad: calc(12px * var(--density, 1));
-  --size-shell-rail: 280px; /** The application rail, and the top bar over the pane beside it. */
-  --size-shell-topbar: 64px;
+  --size-nav-row: calc(30px * var(--density, 1)); /** The height of a row in the rail: a destination, a project, a pinned view. The approved design draws it at 30px, the control rhythm's own height, and a rail row is a step of its own rather than size.row.md (36px, a list's row) because a rail holds fifteen destinations and more in a column the height of the window, where six pixels a row is the difference between the last one on screen and behind the foot. No floor is needed: 30 x 0.82 is 24.6px, over the 24px target at every density. */
+  --size-shell-rail: 236px; /** The application SHELL's geometry, in the approved design's numbers. The rail is the sidebar column, on the frame; breakpoint.shell is derived from it, so a change here moves that step too, and the AppShell suite holds the arithmetic. A fixed width at every density: the rail's rows and gutters scale inside it, and a rail that grew with the density would move the breakpoint the density does not. */
+  --size-shell-topbar: 52px; /** The top bar of the sheet, and the rail's head beside it, which stands at the same height so the first nav row starts level with the top of the screen. A side sheet's head (Modal variant="sheet") stands at it too, on the line the bar behind it draws. Fixed at every density, like the rail. */
+  --size-shell-inset: calc(8px * var(--density, 1)); /** The gap between the frame's edge and the floating sheet, on its top, its inline end and its bottom; the rail is the gap on the inline start. Density-scaled like every other gap, so it is 6.56px compact and 9.12px comfortable; breakpoint.shell is derived at density 1. It belongs to the wide layout: under breakpoint.shell the design's sheet is full-bleed, with no inset and no corner. */
   --size-target-min: 24px; /** The smallest a hit target may ever stand, and the same floor size.control.sm and size.row.sm carry. It is a token because a component that DERIVES a height from a control step (a chip in a well stands shorter than the control beside it) has to clamp the result itself: max(var(--size-target-min), calc(...)) holds at every density, where the step's own floor no longer can once it has been subtracted from. */
   --size-measure: 68ch; /** Prose and forms get a measure. Tables and charts deliberately do not: they are the one content that genuinely wants the whole viewport. */
   --size-measure-narrow: 48ch;
@@ -193,16 +181,17 @@
   --spacing-9: calc(48px * var(--density, 1));
   --spacing-10: calc(64px * var(--density, 1));
   --spacing-11: calc(80px * var(--density, 1));
-  --font-family-sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; /** Interface and body type. Inter is self-hosted by @crewlethq/tokens/css/fonts; the system stack covers the moment before it loads and any app that does not import that stylesheet. */
-  --font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /** Code, identifiers and tabular values. JetBrains Mono is self-hosted by @crewlethq/tokens/css/fonts. */
+  --font-family-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; /** Interface and body type. Geist is self-hosted by @crewlethq/tokens/css/fonts; the system stack covers the moment before it loads and any app that does not import that stylesheet. */
+  --font-family-mono: 'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /** Code, identifiers and tabular values. Geist Mono is self-hosted by @crewlethq/tokens/css/fonts. */
   --font-size-2xs: 0.6875rem; /** Micro labels and table column heads. */
   --font-size-xs: 0.75rem; /** Dense secondary text and badges. */
-  --font-size-compact: 0.8125rem; /** Table cells and captions. It sits between xs and sm rather than extending the ramp at either end, so it is named for its job. */
-  --font-size-sm: 0.875rem; /** Body. */
+  --font-size-compact: 0.8125rem; /** The BODY: the document's own size (@crewlethq/tokens/css/base sets it on body, at font.lineHeight.body), and table cells and captions. The approved design sets every screen on a 13px base, a step under the 14px most interfaces read at, because a dense board is read by scanning rows rather than by reading paragraphs. It sits between xs and sm rather than extending the ramp at either end, so it is named for its job, and it kept that name when it became the body rather than taking a second one. */
+  --font-size-sm: 0.875rem; /** A step over the body: a section heading, a page's title in the top bar, a product name in the rail. It was the body until the body moved to font.size.compact. */
   --font-size-md: 1rem;
   --font-size-lg: 1.125rem;
   --font-size-xl: 1.25rem;
   --font-size-2xl: 1.5rem;
+  --font-size-display: 1.75rem; /** ONE number per screen: the value on a stat tile and a page's greeting, set tabular at the semibold weight with the tight tracking. It sits between 2xl and 3xl, where the approved design draws it, and is named for its job rather than squeezed onto the ramp as a 2.5xl, so a component reads the role (--font-size-display) and the step can move without a rename. */
   --font-size-3xl: 2rem;
   --font-size-4xl: 3rem;
   --font-size-5xl: 4rem;
@@ -213,6 +202,7 @@
   --font-weight-extrabold: 800;
   --font-line-height-tight: 1.2;
   --font-line-height-snug: 1.4;
+  --font-line-height-body: 1.45; /** The document's own leading, set on body with the 13px font.size.compact by @crewlethq/tokens/css/base: an 18.85px line, the approved design's. It sits between snug and normal and is named for its job, like font.size.compact. A component whose text is drawn INSIDE a line of the document (a keycap, a monogram, the rail's lockup) takes this step rather than one of its own, so it stands on the same line as the words around it. */
   --font-line-height-normal: 1.5;
   --font-line-height-relaxed: 1.7;
   --font-letter-spacing-tight: -0.02em; /** Display sizes tighten, body sits at zero, micro labels open up. Declared once, so a heading and a caption cannot drift into six tracking values across six selectors. */

package/dist/index.d.ts

@@ -8,44 +8,39 @@ export declare const blur: {
 };
 export declare const breakpoint: {
     readonly sm: "480px";
+    readonly phone: "640px";
     readonly md: "768px";
-    readonly shell: "900px";
+    readonly shell: "1024px";
     readonly lg: "1024px";
     readonly xl: "1200px";
     readonly "2xl": "1600px";
 };
 export declare const color: {
     readonly brand: {
-        readonly primary: "#5469d4";
-        readonly primaryHover: "#4759c2";
-        readonly primaryActive: "#3b4caa";
-        readonly accent: "#5469d4";
-        readonly accentHover: "#4a5cc2";
-        readonly accentActive: "#3e50b8";
-        readonly accentInk: "#8b9ff5";
-        readonly accentRgb: "84, 105, 212";
-        readonly accentSoft: "rgba(84, 105, 212, 0.18)";
-        readonly accentSoftStrong: "rgba(84, 105, 212, 0.32)";
+        readonly accent: "#7c56ff";
+        readonly accentHover: "#744bf4";
+        readonly accentActive: "#6c40e9";
+        readonly accentInk: "#b3a1ff";
+        readonly accentSoft: "rgba(124, 86, 255, 0.16)";
         readonly accentDeep: "#5c24ff";
         readonly highlight: "#ff3bff";
         readonly slate: "#3c4052";
         readonly mark: "#7c56ff";
         readonly gradient: "linear-gradient(90deg, #ff3bff 0%, #ecbfbf 38%, #5c24ff 76%, #d94fd5 100%)";
+        readonly accentRgb: "124, 86, 255";
+        readonly accentSoftStrong: "rgba(124, 86, 255, 0.32)";
     };
     readonly surface: {
+        readonly frame: "#000000";
         readonly background: "#000000";
         readonly subtle: "rgba(255, 255, 255, 0.05)";
-        readonly muted: "rgba(255, 255, 255, 0.08)";
         readonly elevated: "rgba(255, 255, 255, 0.12)";
-        readonly topbar: "#15171c";
-        readonly topbarLift: "#1c1e24";
-        readonly topbarActive: "#22252b";
         readonly hover: "rgba(255, 255, 255, 0.05)";
         readonly pressed: "rgba(255, 255, 255, 0.08)";
         readonly inset: "rgba(255, 255, 255, 0.05)";
         readonly glass: "rgba(28, 30, 36, 0.90)";
         readonly scrim: "rgba(0, 0, 0, 0.6)";
-        readonly veil: "rgba(0, 0, 0, 0.72)";
+        readonly veil: "rgba(0, 0, 0, 0.65)";
         readonly inverse: "#ffffff";
     };
     readonly text: {
@@ -53,7 +48,6 @@ export declare const color: {
         readonly secondary: "#c9ced8";
         readonly tertiary: "#95a2b6";
         readonly muted: "#686b70";
-        readonly onBrand: "#ffffff";
         readonly onAccent: "#ffffff";
         readonly inverse: "#09090b";
     };
@@ -64,43 +58,31 @@ export declare const color: {
         readonly strongHover: "#5a5e65";
         readonly control: "#7f848e";
     };
-    readonly focus: "#8b9ff5";
+    readonly focus: "#7e5bff";
     readonly feedback: {
-        readonly success: "#14b8a6";
-        readonly successInk: "#5eead4";
-        readonly warning: "#f59e0b";
-        readonly warningInk: "#fde68a";
-        readonly danger: "#dc2626";
-        readonly dangerHover: "#b91c1c";
-        readonly dangerInk: "#fca5a5";
-        readonly info: "#38bdf8";
-        readonly infoInk: "#7dd3fc";
-        readonly successSoft: "rgba(20, 184, 166, 0.12)";
-        readonly successLine: "rgba(20, 184, 166, 0.3)";
-        readonly warningSoft: "rgba(245, 158, 11, 0.12)";
-        readonly warningLine: "rgba(245, 158, 11, 0.3)";
-        readonly dangerSoft: "rgba(220, 38, 38, 0.12)";
-        readonly dangerLine: "rgba(220, 38, 38, 0.3)";
-        readonly infoSoft: "rgba(56, 189, 248, 0.12)";
-        readonly infoLine: "rgba(56, 189, 248, 0.3)";
-    };
-    readonly phase: {
-        readonly onboarding: "#f77ae9";
-        readonly onboardingInk: "#ff82f1";
-        readonly execute: "#ac6bff";
-        readonly executeInk: "#d697ff";
-        readonly review: "#00a24f";
-        readonly reviewInk: "#46c872";
-        readonly onboardingSoft: "rgba(247, 122, 233, 0.12)";
-        readonly executeSoft: "rgba(172, 107, 255, 0.12)";
-        readonly reviewSoft: "rgba(0, 162, 79, 0.12)";
+        readonly success: "#3ecf8f";
+        readonly successInk: "#72dead";
+        readonly warning: "#f4b221";
+        readonly warningInk: "#f6c86f";
+        readonly danger: "#e50055";
+        readonly dangerHover: "#d6004f";
+        readonly dangerInk: "#ff9a9a";
+        readonly info: "#4c9dff";
+        readonly infoInk: "#86beff";
+        readonly successSoft: "rgba(62, 207, 143, 0.12)";
+        readonly successLine: "rgba(62, 207, 143, 0.3)";
+        readonly warningSoft: "rgba(244, 178, 33, 0.12)";
+        readonly warningLine: "rgba(244, 178, 33, 0.3)";
+        readonly dangerSoft: "rgba(229, 0, 85, 0.12)";
+        readonly dangerLine: "rgba(229, 0, 85, 0.3)";
+        readonly infoSoft: "rgba(76, 157, 255, 0.12)";
+        readonly infoLine: "rgba(76, 157, 255, 0.3)";
     };
     readonly data: {
-        readonly "1": "#a5b4fc";
-        readonly "2": "#facc15";
-        readonly "3": "#38bdf8";
-        readonly "4": "#86efac";
-        readonly "5": "#ec4899";
+        readonly "1": "#458adc";
+        readonly "2": "#e4631f";
+        readonly "3": "#009c79";
+        readonly "4": "#c98500";
         readonly other: "#71717a";
     };
     readonly avatar: {
@@ -164,6 +146,7 @@ export declare const motion: {
         readonly base: "150ms";
         readonly moderate: "200ms";
         readonly slow: "300ms";
+        readonly breath: "2200ms";
     };
     readonly easing: {
         readonly default: "ease";
@@ -181,6 +164,7 @@ export declare const radius: {
     readonly lg: "12px";
     readonly xl: "16px";
     readonly "2xl": "24px";
+    readonly sheet: "14px";
     readonly chip: "calc(8px - 1px)";
     readonly pill: "999px";
     readonly circle: "50%";
@@ -198,12 +182,12 @@ export declare const shadow: {
     readonly hairline: "inset 0 1px 0 rgba(255, 255, 255, 0.04)";
     readonly focus: "0 0 0 2px var(--color-surface-background), 0 0 0 4px var(--color-focus)";
     readonly selection: "inset 0 0 0 2px var(--color-brand-accent)";
-    readonly glow: "0 4px 24px rgba(84, 105, 212, 0.3)";
+    readonly glow: "0 4px 24px rgba(var(--color-brand-accent-rgb), 0.3)";
 };
 export declare const size: {
     readonly control: {
-        readonly sm: "28px";
-        readonly md: "32px";
+        readonly sm: "26px";
+        readonly md: "30px";
         readonly lg: "44px";
     };
     readonly row: {
@@ -214,10 +198,12 @@ export declare const size: {
     readonly nav: {
         readonly gutter: "8px";
         readonly rowPad: "12px";
+        readonly row: "30px";
     };
     readonly shell: {
-        readonly rail: "280px";
-        readonly topbar: "64px";
+        readonly rail: "236px";
+        readonly topbar: "52px";
+        readonly inset: "8px";
     };
     readonly targetMin: "24px";
     readonly measure: "68ch";
@@ -241,9 +227,9 @@ export declare const spacing: {
 };
 export declare const font: {
     readonly family: {
-        readonly sans: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'";
-        readonly display: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'";
-        readonly mono: "'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace";
+        readonly sans: "'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'";
+        readonly display: "'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'";
+        readonly mono: "'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace";
     };
     readonly size: {
         readonly "2xs": "11px";
@@ -254,6 +240,7 @@ export declare const font: {
         readonly lg: "18px";
         readonly xl: "20px";
         readonly "2xl": "24px";
+        readonly display: "28px";
         readonly "3xl": "32px";
         readonly "4xl": "48px";
         readonly "5xl": "64px";
@@ -268,6 +255,7 @@ export declare const font: {
     readonly lineHeight: {
         readonly tight: "1.2";
         readonly snug: "1.4";
+        readonly body: "1.45";
         readonly normal: "1.5";
         readonly relaxed: "1.7";
     };