@crewlethq/tokens 0.2.0 → 0.3.0

package/dist/css/tokens.css

@@ -3,6 +3,7 @@
  */
 
 :root {
+  --blur-xs: 3px; /** The softening behind a modal veil. Half the frosted step: the veil is already carrying most of the work, and a heavier blur there smears the page into a texture rather than leaving it legible as context. */
   --blur-sm: 6px; /** Subtle frosted glass. */
   --blur-md: 10px;
   --blur-lg: 16px; /** Standard frosted-panel effect for dropdowns and top bars. */
@@ -10,21 +11,24 @@
   --blur-2xl: 24px; /** Aggressive backdrop blur for emphasis. */
   --breakpoint-sm: 480px; /** Small phones. */
   --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-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 focus and glow shadows are tinted with it; the theme overrides repaint it per palette. */
+  --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; /** Interactive accent for selected, active and focus states (a checked checkbox, an active chip, a selected card). The same in both theme palettes. */
-  --color-brand-accent-hover: #6478e0;
-  --color-brand-accent-active: #4a5cc2;
+  --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.10); /** Translucent accent fill behind an active or selected control. */
+  --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-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);
@@ -33,22 +37,103 @@
   --color-surface-topbar: #15171c;
   --color-surface-topbar-lift: #1c1e24;
   --color-surface-topbar-active: #22252b;
-  --color-surface-inverse: #ffffff;
+  --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-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-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: #8c99ad;
-  --color-text-muted: rgba(255, 255, 255, 0.3);
-  --color-text-on-brand: #ffffff;
+  --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-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-inverse: #09090b;
   --color-border-default: rgba(255, 255, 255, 0.08);
   --color-border-hover: rgba(255, 255, 255, 0.15);
-  --color-border-strong: #3f4145;
-  --color-border-strong-hover: #4a4d52; /** Solid dark-mode hover border. Use when hover should be a solid color instead of a translucent overlay. */
-  --color-feedback-success: #46a758; /** Running and healthy status green for status dots, badges and success icons. Softer than Tailwind green-500 so it does not glare on dark surfaces. */
-  --color-feedback-warning: #f59e0b;
-  --color-feedback-danger: #ef4444; /** Semantic error red for destructive actions and failure states. */
-  --color-feedback-danger-hover: #dc2626;
-  --color-feedback-info: #3b82f6;
+  --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-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;
+  --color-avatar-tint-2: #c026d3;
+  --color-avatar-tint-3: #db2777;
+  --color-avatar-tint-4: #dc2626;
+  --color-avatar-tint-5: #d54400;
+  --color-avatar-tint-6: #a76900;
+  --color-avatar-tint-7: #008931;
+  --color-avatar-tint-8: #00857a;
+  --color-avatar-tint-9: #007cbe;
+  --color-node-purple: #8e6ed4; /** Six hues a node of a chart is tinted with, chosen per entity and NOT a series: two nodes sharing one is no statement, so nothing here is measured for separability and no legend is owed. Each hue derives a fill, a border and a halo at fixed alphas, and carries an ink step for the name drawn on that fill, because the tinted card is the only ground that name is read on. The dark values are the muted set the console chart was drawn with, tuned to sit beside the accent rather than beside neon; light repaints every one, since a tint tuned for black is a wash on white. */
+  --color-node-purple-ink: #cabae0; /** The name drawn on the purple fill. It clears 7:1 there, as every ink step here does. */
+  --color-node-cyan: #5ca8be;
+  --color-node-cyan-ink: #b3d7e0;
+  --color-node-green: #62a578;
+  --color-node-green-ink: #b8d8c0;
+  --color-node-amber: #c89866;
+  --color-node-amber-ink: #e0c89e;
+  --color-node-rose: #c8757f;
+  --color-node-rose-ink: #e0bfc4;
+  --color-node-blue: #5b7fc7;
+  --color-node-blue-ink: #b9c5e0;
+  --color-node-purple-fill: rgba(142, 110, 212, 0.12);
+  --color-node-purple-line: rgba(142, 110, 212, 0.38);
+  --color-node-purple-halo: rgba(142, 110, 212, 0.16);
+  --color-node-cyan-fill: rgba(92, 168, 190, 0.12);
+  --color-node-cyan-line: rgba(92, 168, 190, 0.38);
+  --color-node-cyan-halo: rgba(92, 168, 190, 0.16);
+  --color-node-green-fill: rgba(98, 165, 120, 0.12);
+  --color-node-green-line: rgba(98, 165, 120, 0.38);
+  --color-node-green-halo: rgba(98, 165, 120, 0.16);
+  --color-node-amber-fill: rgba(200, 152, 102, 0.12);
+  --color-node-amber-line: rgba(200, 152, 102, 0.38);
+  --color-node-amber-halo: rgba(200, 152, 102, 0.16);
+  --color-node-rose-fill: rgba(200, 117, 127, 0.12);
+  --color-node-rose-line: rgba(200, 117, 127, 0.38);
+  --color-node-rose-halo: rgba(200, 117, 127, 0.16);
+  --color-node-blue-fill: rgba(91, 127, 199, 0.12);
+  --color-node-blue-line: rgba(91, 127, 199, 0.38);
+  --color-node-blue-halo: rgba(91, 127, 199, 0.16);
+  --color-scrollbar: rgba(255, 255, 255, 0.16); /** Scrollbars belong to the palette. A bright system gutter down the side of a dark page is the most visible way an application admits it is a web page. */
+  --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
+  --density-compact: 0.82; /** The three steps --density takes, set on the root by @crewlethq/tokens/css/density. Every spacing and size token is emitted as calc(Npx * var(--density, 1)), so a density is a real change to every surface rather than to three font sizes, and every value is unchanged at 1. */
+  --density-normal: 1;
+  --density-comfortable: 1.14;
   --motion-duration-instant: 75ms; /** Tooltip flash, dropdown indicator nudge. */
   --motion-duration-fast: 120ms; /** Menu hover and active state changes. */
   --motion-duration-base: 150ms; /** Default UI transition. */
@@ -57,6 +142,7 @@
   --motion-easing-default: ease;
   --motion-easing-out: ease-out;
   --motion-easing-in-out: ease-in-out;
+  --motion-easing-emphasized: cubic-bezier(0.16, 1, 0.3, 1); /** A strong decelerate for a surface that ENTERS: a dialog, a sheet, a popover. It is a new role beside easing.out rather than a replacement for it. That token carries the CSS ease-out keyword, cubic-bezier(0, 0, 0.58, 1), a much gentler curve, and folding one onto the other would change the motion of every entering surface with no stated reason. */
   --motion-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /** Slight overshoot for emphasized entries. */
   --radius-none: 0px;
   --radius-xs: 4px;
@@ -72,34 +158,54 @@
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
   --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
   --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.4);
+  --shadow-sheet: -8px 0 32px rgba(0, 0, 0, 0.4); /** The separation under a side sheet, cast along the INLINE axis rather than downward. A sheet runs the full height of the window, so a shadow with a vertical offset drops both of its casts off the screen and leaves the one edge the sheet actually has lit by a blur tail; this one is thrown into the page the sheet covers. Not a step on the elevation ramp: it is the only shadow here whose offset is horizontal, and a surface that wants the ramp wants shadow.xl. */
   --shadow-2xl: 0 16px 64px rgba(0, 0, 0, 0.6);
   --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.1); /** Standard card depth on dark surfaces. */
   --shadow-rim-lit: 0 4px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04); /** Card with a subtle inset rim light, for cards that need to lift off an already elevated surface. */
-  --shadow-focus: 0 0 0 3px rgba(84, 105, 212, 0.35); /** Focus ring tinted with the canonical brand color. */
+  --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);
-  --spacing-0: 0px;
-  --spacing-1: 4px;
-  --spacing-2: 8px;
-  --spacing-3: 12px;
-  --spacing-4: 16px;
-  --spacing-5: 20px;
-  --spacing-6: 24px;
-  --spacing-7: 32px;
-  --spacing-8: 40px;
-  --spacing-9: 48px;
-  --spacing-10: 64px;
-  --spacing-11: 80px;
+  --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));
+  --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-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;
+  --size-content-max: 1600px;
+  --size-focus-ring-inset-offset: -2px; /** The outline offset for a focusable row INSIDE a clipping scroller: a tree row, a grid row, a card header. An outset ring there is clipped by the scroller on the first and last rows and painted over by the next row, so the indicator has to be drawn inside the row's own box. */
+  --spacing-0: 0px; /** A 4px base. Every step but this one is emitted as calc(Npx * var(--density, 1)), so a density setting reaches every gap and pad in a product and every value is unchanged at density 1. Zero is left alone: scaling it would spend a calc() on a number that cannot change. */
+  --spacing-1: calc(4px * var(--density, 1));
+  --spacing-2: calc(8px * var(--density, 1));
+  --spacing-3: calc(12px * var(--density, 1));
+  --spacing-4: calc(16px * var(--density, 1));
+  --spacing-5: calc(20px * var(--density, 1));
+  --spacing-6: calc(24px * var(--density, 1));
+  --spacing-7: calc(32px * var(--density, 1));
+  --spacing-8: calc(40px * var(--density, 1));
+  --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-size-xs: 12px;
-  --font-size-sm: 14px;
-  --font-size-md: 16px;
-  --font-size-lg: 18px;
-  --font-size-xl: 20px;
-  --font-size-2xl: 24px;
-  --font-size-3xl: 32px;
-  --font-size-4xl: 48px;
-  --font-size-5xl: 64px;
+  --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-md: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 2rem;
+  --font-size-4xl: 3rem;
+  --font-size-5xl: 4rem;
   --font-weight-regular: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
@@ -109,13 +215,21 @@
   --font-line-height-snug: 1.4;
   --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. */
+  --font-letter-spacing-snug: -0.005em;
+  --font-letter-spacing-normal: 0;
+  --font-letter-spacing-wide: 0.04em;
+  --font-letter-spacing-wider: 0.14em; /** The uppercase micro-label register. */
   --z-index-base: 0;
   --z-index-raised: 1; /** Lifts an element above its siblings inside its own stacking context, such as a control layered over a card. */
   --z-index-sticky: 10; /** Sticky headers and pinned columns within the page flow. */
   --z-index-dropdown: 100; /** In-flow menus that stay inside their container rather than portaling to the body. */
   --z-index-overlay: 200; /** In-page overlays such as drawers and scrims that cover page chrome but not dialogs. */
+  --z-index-layer-base: 9000; /** The bottom of the layer stack's own band. A portaled surface takes this plus its DEPTH in the live stack, clamped at layerMax, rather than a number from a counter that only grows: modal, popover and toast leave two free steps between them, so a counter would put the second dialog of a session at the popover level and the third at the toast level. */
+  --z-index-layer-max: 9899; /** The top of the layer band, and the clamp. It stays below modal so a toast always paints above the topmost surface: a toast reports what a write inside a dialog did. */
   --z-index-modal: 9999; /** Dialog backdrop and frame. High enough to clear any page chrome an application stacks with its own numbers. */
   --z-index-popover: 10000; /** Floating panels portaled to the body (Select menus, Popover, date pickers). Above modal because they are routinely opened from inside a dialog, and a panel under the backdrop is hidden and swallows clicks. */
   --z-index-toast: 10001; /** Top of the stack. A toast reports the outcome of what somebody just did, often in a dialog or from a menu opened inside one, so it sits above both. */
+  --radius-chip: calc(var(--radius-md) - 1px); /** The corner of a chip lifted INSIDE a well at --radius-md: one hairline tighter than the well around it, which is what reads as sitting in it. It sits between sm and md and is derived rather than written as 7px, so it follows --radius-md if that step ever moves. */
   --font-family-display: var(--font-family-sans); /** Headings and other display type. An alias of the sans family, so a heading costs no extra download. Components keep reading this role token so a dedicated display face would land in one place. */
 }

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export declare const blur: {
+    readonly xs: "3px";
     readonly sm: "6px";
     readonly md: "10px";
     readonly lg: "16px";
@@ -8,6 +9,7 @@ export declare const blur: {
 export declare const breakpoint: {
     readonly sm: "480px";
     readonly md: "768px";
+    readonly shell: "900px";
     readonly lg: "1024px";
     readonly xl: "1200px";
     readonly "2xl": "1600px";
@@ -18,14 +20,16 @@ export declare const color: {
         readonly primaryHover: "#4759c2";
         readonly primaryActive: "#3b4caa";
         readonly accent: "#5469d4";
-        readonly accentHover: "#6478e0";
-        readonly accentActive: "#4a5cc2";
+        readonly accentHover: "#4a5cc2";
+        readonly accentActive: "#3e50b8";
+        readonly accentInk: "#8b9ff5";
         readonly accentRgb: "84, 105, 212";
-        readonly accentSoft: "rgba(84, 105, 212, 0.10)";
+        readonly accentSoft: "rgba(84, 105, 212, 0.18)";
         readonly accentSoftStrong: "rgba(84, 105, 212, 0.32)";
         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 surface: {
@@ -36,29 +40,122 @@ export declare const color: {
         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 inverse: "#ffffff";
     };
     readonly text: {
         readonly primary: "#fafafa";
         readonly secondary: "#c9ced8";
-        readonly tertiary: "#8c99ad";
-        readonly muted: "rgba(255, 255, 255, 0.3)";
+        readonly tertiary: "#95a2b6";
+        readonly muted: "#686b70";
         readonly onBrand: "#ffffff";
+        readonly onAccent: "#ffffff";
         readonly inverse: "#09090b";
     };
     readonly border: {
         readonly default: "rgba(255, 255, 255, 0.08)";
         readonly hover: "rgba(255, 255, 255, 0.15)";
-        readonly strong: "#3f4145";
-        readonly strongHover: "#4a4d52";
+        readonly strong: "#4a4d52";
+        readonly strongHover: "#5a5e65";
+        readonly control: "#7f848e";
     };
+    readonly focus: "#8b9ff5";
     readonly feedback: {
-        readonly success: "#46a758";
+        readonly success: "#14b8a6";
+        readonly successInk: "#5eead4";
         readonly warning: "#f59e0b";
-        readonly danger: "#ef4444";
-        readonly dangerHover: "#dc2626";
-        readonly info: "#3b82f6";
+        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 data: {
+        readonly "1": "#a5b4fc";
+        readonly "2": "#facc15";
+        readonly "3": "#38bdf8";
+        readonly "4": "#86efac";
+        readonly "5": "#ec4899";
+        readonly other: "#71717a";
+    };
+    readonly avatar: {
+        readonly tint: {
+            readonly "0": "#2563eb";
+            readonly "1": "#7c3aed";
+            readonly "2": "#c026d3";
+            readonly "3": "#db2777";
+            readonly "4": "#dc2626";
+            readonly "5": "#d54400";
+            readonly "6": "#a76900";
+            readonly "7": "#008931";
+            readonly "8": "#00857a";
+            readonly "9": "#007cbe";
+        };
+    };
+    readonly node: {
+        readonly purple: "#8e6ed4";
+        readonly purpleInk: "#cabae0";
+        readonly cyan: "#5ca8be";
+        readonly cyanInk: "#b3d7e0";
+        readonly green: "#62a578";
+        readonly greenInk: "#b8d8c0";
+        readonly amber: "#c89866";
+        readonly amberInk: "#e0c89e";
+        readonly rose: "#c8757f";
+        readonly roseInk: "#e0bfc4";
+        readonly blue: "#5b7fc7";
+        readonly blueInk: "#b9c5e0";
+        readonly purpleFill: "rgba(142, 110, 212, 0.12)";
+        readonly purpleLine: "rgba(142, 110, 212, 0.38)";
+        readonly purpleHalo: "rgba(142, 110, 212, 0.16)";
+        readonly cyanFill: "rgba(92, 168, 190, 0.12)";
+        readonly cyanLine: "rgba(92, 168, 190, 0.38)";
+        readonly cyanHalo: "rgba(92, 168, 190, 0.16)";
+        readonly greenFill: "rgba(98, 165, 120, 0.12)";
+        readonly greenLine: "rgba(98, 165, 120, 0.38)";
+        readonly greenHalo: "rgba(98, 165, 120, 0.16)";
+        readonly amberFill: "rgba(200, 152, 102, 0.12)";
+        readonly amberLine: "rgba(200, 152, 102, 0.38)";
+        readonly amberHalo: "rgba(200, 152, 102, 0.16)";
+        readonly roseFill: "rgba(200, 117, 127, 0.12)";
+        readonly roseLine: "rgba(200, 117, 127, 0.38)";
+        readonly roseHalo: "rgba(200, 117, 127, 0.16)";
+        readonly blueFill: "rgba(91, 127, 199, 0.12)";
+        readonly blueLine: "rgba(91, 127, 199, 0.38)";
+        readonly blueHalo: "rgba(91, 127, 199, 0.16)";
+    };
+    readonly scrollbar: "rgba(255, 255, 255, 0.16)";
+    readonly scrollbarHover: "rgba(255, 255, 255, 0.26)";
+};
+export declare const density: {
+    readonly compact: "0.82";
+    readonly normal: "1";
+    readonly comfortable: "1.14";
 };
 export declare const motion: {
     readonly duration: {
@@ -72,6 +169,7 @@ export declare const motion: {
         readonly default: "ease";
         readonly out: "ease-out";
         readonly inOut: "ease-in-out";
+        readonly emphasized: "cubic-bezier(0.16, 1, 0.3, 1)";
         readonly spring: "cubic-bezier(0.34, 1.56, 0.64, 1)";
     };
 };
@@ -83,6 +181,7 @@ export declare const radius: {
     readonly lg: "12px";
     readonly xl: "16px";
     readonly "2xl": "24px";
+    readonly chip: "calc(8px - 1px)";
     readonly pill: "999px";
     readonly circle: "50%";
 };
@@ -92,12 +191,40 @@ export declare const shadow: {
     readonly md: "0 4px 12px rgba(0, 0, 0, 0.25)";
     readonly lg: "0 8px 24px rgba(0, 0, 0, 0.3)";
     readonly xl: "0 12px 32px rgba(0, 0, 0, 0.4)";
+    readonly sheet: "-8px 0 32px rgba(0, 0, 0, 0.4)";
     readonly "2xl": "0 16px 64px rgba(0, 0, 0, 0.6)";
     readonly card: "0 8px 24px rgba(0, 0, 0, 0.1)";
     readonly rimLit: "0 4px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04)";
-    readonly focus: "0 0 0 3px rgba(84, 105, 212, 0.35)";
+    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)";
 };
+export declare const size: {
+    readonly control: {
+        readonly sm: "28px";
+        readonly md: "32px";
+        readonly lg: "44px";
+    };
+    readonly row: {
+        readonly sm: "28px";
+        readonly md: "36px";
+        readonly lg: "48px";
+    };
+    readonly nav: {
+        readonly gutter: "8px";
+        readonly rowPad: "12px";
+    };
+    readonly shell: {
+        readonly rail: "280px";
+        readonly topbar: "64px";
+    };
+    readonly targetMin: "24px";
+    readonly measure: "68ch";
+    readonly measureNarrow: "48ch";
+    readonly contentMax: "1600px";
+    readonly focusRingInsetOffset: "-2px";
+};
 export declare const spacing: {
     readonly "0": "0px";
     readonly "1": "4px";
@@ -119,7 +246,9 @@ export declare const font: {
         readonly mono: "'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace";
     };
     readonly size: {
+        readonly "2xs": "11px";
         readonly xs: "12px";
+        readonly compact: "13px";
         readonly sm: "14px";
         readonly md: "16px";
         readonly lg: "18px";
@@ -142,6 +271,13 @@ export declare const font: {
         readonly normal: "1.5";
         readonly relaxed: "1.7";
     };
+    readonly letterSpacing: {
+        readonly tight: "-0.02em";
+        readonly snug: "-0.005em";
+        readonly normal: "0";
+        readonly wide: "0.04em";
+        readonly wider: "0.14em";
+    };
 };
 export declare const zIndex: {
     readonly base: "0";
@@ -149,7 +285,11 @@ export declare const zIndex: {
     readonly sticky: "10";
     readonly dropdown: "100";
     readonly overlay: "200";
+    readonly layerBase: "9000";
+    readonly layerMax: "9899";
     readonly modal: "9999";
     readonly popover: "10000";
     readonly toast: "10001";
 };
+export { themes } from './themes.js';
+export type { ThemeName } from './themes.js';