@hattisar/design-tokens 0.3.18 → 0.3.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hattisar/design-tokens",
-  "version": "0.3.18",
+  "version": "0.3.20",
   "description": "Shared design tokens (colors, type, radius, spacing, motion) and base primitives (reset, buttons, inputs, cards, modals, auth shell) for every Hattisar frontend.",
   "main": "tokens.css",
   "files": [

package/tokens.css

@@ -109,31 +109,19 @@
   --color-brand-active: color-mix(in srgb, var(--color-brand) 70%, black);
   --color-brand-text: #ffffff;
 
-  /* The main call to action.
-     Asked for by hex: "main CTA color #4285f4". It is the one place in
-     this palette with a hue — greys carry structure, colour carries
-     status, and now one blue carries "this is the button you press".
-     --color-brand stays charcoal ink: it is the focus ring, the active
-     tab marker and the checkbox tick, and turning all of those blue is
-     a bigger change than a call-to-action colour.
-
-     White on #4285f4 measures 3.56:1, below the 4.5:1 this file
-     promises everywhere else. It is recorded as a deliberate exception
-     in check-contrast.mjs rather than quietly left out of it — the
-     nearest shade that passes is #1a73e8 at 4.51:1, visually the same
-     blue, if the ratio matters more than the exact hex. */
-  --color-cta: #4285f4;
-  /* The call-to-action blue as *text* on a surface, which is a
-     stricter bar than as a fill. #4285f4 carries white at 3.56:1 — the
-     one documented exception in check-contrast.mjs — and reusing it for
-     text would spread that exception instead of containing it. Scaled
-     13% darker it reaches 4.59:1 on a white card while reading as the
-     same blue. Dark mode needs no adjustment: #4285f4 already measures
-     4.61:1 on #1f1f23, so it keeps the brand hex exactly. */
-  --color-cta-on-surface: #3973d4;
-  --color-cta-hover: color-mix(in srgb, var(--color-cta) 88%, black);
-  --color-cta-active: color-mix(in srgb, var(--color-cta) 76%, black);
-  --color-cta-text: #ffffff;
+  /* The main call to action — charcoal ink, the same as --color-brand,
+     not a hue of its own. Used to be a blue chosen by hex; asked for
+     directly to remove ("just keep our dark color"). Kept as its own
+     token rather than collapsed into --color-brand directly, since the
+     handful of places that render it as text on a raised surface
+     (sidebar current-row, a link's hover state, an input's focus
+     border) still reach for --color-cta-on-surface/--color-cta by
+     name, and this way none of them had to change. */
+  --color-cta: var(--color-brand);
+  --color-cta-on-surface: var(--color-brand);
+  --color-cta-hover: var(--color-brand-hover);
+  --color-cta-active: var(--color-brand-active);
+  --color-cta-text: var(--color-brand-text);
 
 
   /* Secondary button — bordered light-gray fill. Reuses
@@ -144,10 +132,12 @@
   --color-secondary-border: var(--color-border-strong);
   --color-secondary-text: var(--color-text-primary);
   --color-secondary-hover: color-mix(in srgb, var(--color-text-primary) 6%, var(--color-secondary-fill));
+  --color-secondary-active: color-mix(in srgb, var(--color-text-primary) 12%, var(--color-secondary-fill));
 
   /* Destructive button — irreversible actions only (delete, void). */
   --color-destructive-fill: #c70a24;
   --color-destructive-hover: #a30a24;
+  --color-destructive-active: color-mix(in srgb, black 15%, var(--color-destructive-hover));
   --color-destructive-text: #ffffff;
 
   /* General-purpose semantic text/icon colors (form errors, savebar
@@ -219,13 +209,58 @@
      remove-buttons inside chips, the settings toggle switch) — never
      applied to a badge/tag/chip just for a rounder look; those use
      --radius-sm like everything else (see .status-badge and friends). */
-  --radius-xs: 5px;
-  --radius-sm: 7px;
-  --radius-md: 10px;
-  --radius-lg: 13px;
-  --radius-xl: 16px;
+  --radius-xs: 6px;
+  --radius-sm: 8px;
+  --radius-md: 11px;
+  --radius-lg: 14px;
+  --radius-xl: 17px;
   --radius-full: 9999px;
 
+  /* The horizontal tab block (Tabs.tsx) — one frame for every context it
+     appears in, whether wrapped in .card (document forms) or
+     .form-section-tabs (Customer/Vendor/Item). Transparent on purpose:
+     the frame shows the page canvas, so the strip reads as a gray band
+     and the active tab's white pill and the white panel below stand out
+     against it. A .card frame (white) hid both. */
+  --tabs-frame-bg: transparent;
+  --tabs-frame-border: 1px solid var(--color-border);
+  --tabs-frame-radius: var(--radius-sm);
+
+  /* Anything that floats over the page: dropdown and action menus, the
+     global-search results, combobox lists, the profile/notification
+     drawer, tooltips and modal dialogs. Their surface already had a
+     border and a shadow but no radius, so every popup was a hard
+     rectangle beside the rounded buttons and cards that opened it. */
+  --popup-radius: var(--radius-sm);
+
+  /* The header row shared by every titled card (WidgetCard) and the tab
+     strip that stands in for one, and the control that sits inside it (a
+     "+" button, a filter select). Two numbers so the strip and the card
+     header can't drift apart, and so a control added to a header is sized
+     to fit it rather than stretching it. */
+  --card-header-height: 36px;
+  --card-header-control-height: 24px;
+
+  /* Colours that must not follow the theme, named instead of repeated as
+     hex. White on a saturated fill (an org tile, an integration logo)
+     stays white in dark mode; the scrim dims the page behind a modal or
+     the mobile nav; a video letterbox is black either way; a printed
+     page is always paper and ink. */
+  --color-on-accent: #ffffff;
+  --color-logo-backdrop: #ffffff;
+  --color-scrim: rgba(26, 26, 26, 0.45);
+  --color-media-backdrop: #000000;
+  --print-paper: #ffffff;
+  --print-ink: #0f172a;
+
+  /* The row a list page's summary tiles and search/filter toolbar share.
+     48px, not the 36px table-header/tab-strip row: those are dense
+     header bands; this one holds a text field and a view switcher you
+     click into, and at 36px the icon and text sat against the card edge
+     and the gray column-header band right below ("search area look very
+     tight"). One token so the tiles and the toolbar can't drift apart. */
+  --toolbar-row-height: 48px;
+
   /* Depth, deliberately restrained. These were all `none`, which left
      every surface separated by border alone — correct, legible, and
      completely flat: a card, a dropdown and a modal all sat on the page
@@ -256,6 +291,19 @@
      be able to open on top of a dialog it lives inside. */
   --z-dropdown: 110;
   --z-modal: 100;
+  /* The app shell's own layers, bottom to top. Named with the values
+     they always had, so nothing restacks: the docked support panel sits
+     under the sidebar rail, both under the banners and the header, and
+     the mobile nav (with its backdrop just beneath it) over everything
+     but a dropdown or dialog. Component-local stacking (1, 2, 5, 15, 20
+     inside a table, a tooltip, a timeline) stays a literal — it only
+     orders a component's own children, not the page. */
+  --z-support-panel: 40;
+  --z-sidebar: 50;
+  --z-banner: 59;
+  --z-header: 60;
+  --z-mobile-backdrop: 150;
+  --z-mobile-nav: 200;
 
   /* 4px-based spacing scale — new markup (bento tiles, order cards)
      should reach for these instead of new magic numbers. Existing
@@ -300,6 +348,15 @@
      of a header row. Narrower than a control that owns its row, because
      three of those do not fit and a date needs far less than 340px. */
   --form-control-width-compact: 200px;
+  /* The label beside it. Fixed rather than sized to each label's own
+     text — "Order date", "Due date" and "Tax rate" all sit in this
+     position on different rows of the same header, and letting each
+     size itself put their inputs at three different starting points
+     down the card, the one thing --form-label-width above exists to
+     prevent for the row's first field. 120px is measured to the
+     longest label that lives here today, "Invoice date *" at ~97px,
+     with room to spare. */
+  --form-label-width-compact: 120px;
   --form-control-width-wide: 520px;
   --field-min-width-narrow: 140px;
 
@@ -409,6 +466,20 @@
   --page-width-medium: var(--page-width-content);
   --page-width-large: var(--page-width-content);
 
+  /* A second, wider cap for a list/table page (Items, Sales Orders,
+     Purchase Orders, ...) — reported directly ("keep wide page width
+     for tables... another page width for form which is shorter in
+     centered like now"). --page-width-content stays the form width
+     (a column you can read across); a table wants more of the room a
+     wide monitor actually has, so this is capped further out instead
+     of sharing the form's own number. Used by the one rule that caps
+     a plain list page's root <div> (.page-content-scroll, further
+     down) — forms keep their own narrower cap untouched.
+
+     1440 → 1680: asked for directly ("more wide than 1440px") right
+     after the first pass shipped. */
+  --page-width-wide: 1680px;
+
   color-scheme: light dark;
 }
 
@@ -468,13 +539,13 @@
   --color-brand-hover: color-mix(in srgb, var(--color-brand) 90%, black);
   --color-brand-active: color-mix(in srgb, var(--color-brand) 75%, black);
   --color-brand-text: #09090b;
-  --color-cta: #4285f4;
-  /* Light mode darkens this for contrast; on a dark surface the brand
-     blue already clears AA, so it stands unmodified. */
-  --color-cta-on-surface: #4285f4;
-  --color-cta-hover: color-mix(in srgb, var(--color-cta) 88%, black);
-  --color-cta-active: color-mix(in srgb, var(--color-cta) 76%, black);
-  --color-cta-text: #ffffff;
+  /* See :root's own --color-cta for why this is brand ink and not a
+     hue of its own. */
+  --color-cta: var(--color-brand);
+  --color-cta-on-surface: var(--color-brand);
+  --color-cta-hover: var(--color-brand-hover);
+  --color-cta-active: var(--color-brand-active);
+  --color-cta-text: var(--color-brand-text);
 
   --shadow-btn-primary: 0 1px 2px rgba(9, 9, 11, 0.12);
   --shadow-btn-secondary: 0 1px 2px rgba(9, 9, 11, 0.05);
@@ -483,9 +554,11 @@
   --color-secondary-border: var(--color-border-strong);
   --color-secondary-text: var(--color-text-primary);
   --color-secondary-hover: color-mix(in srgb, white 6%, var(--color-secondary-fill));
+  --color-secondary-active: color-mix(in srgb, white 12%, var(--color-secondary-fill));
 
   --color-destructive-fill: #a30a24;
   --color-destructive-hover: #c70a24;
+  --color-destructive-active: color-mix(in srgb, white 15%, var(--color-destructive-hover));
   --color-destructive-text: #ffffff;
 
   --color-warning: var(--accent-amber);
@@ -544,9 +617,9 @@
   --sidebar-text-muted: var(--color-text-muted);
   --sidebar-active-text: var(--color-text-primary);
   --sidebar-hover-bg: rgba(255, 255, 255, 0.06);
-  /* --color-cta unmodified here: on #18181b it measures 4.97:1, where
-     the on-surface variant light theme uses is tuned for a white
-     ground. See the light block above for what this token is. */
+  /* --color-cta is brand ink now (see :root's own --color-cta) — this
+     "current row" marker used to lean on the accent blue clearing AA
+     on #18181b without the on-surface variant's extra darkening. */
   --sidebar-active-ink: var(--color-cta);
   --sidebar-rail-bg: #18181b;
 
@@ -577,18 +650,13 @@
   --color-brand-hover: color-mix(in srgb, var(--color-brand) 85%, black);
   --color-brand-active: color-mix(in srgb, var(--color-brand) 70%, black);
   --color-brand-text: #ffffff;
-  --color-cta: #4285f4;
-  /* The call-to-action blue as *text* on a surface, which is a
-     stricter bar than as a fill. #4285f4 carries white at 3.56:1 — the
-     one documented exception in check-contrast.mjs — and reusing it for
-     text would spread that exception instead of containing it. Scaled
-     13% darker it reaches 4.59:1 on a white card while reading as the
-     same blue. Dark mode needs no adjustment: #4285f4 already measures
-     4.61:1 on #1f1f23, so it keeps the brand hex exactly. */
-  --color-cta-on-surface: #3973d4;
-  --color-cta-hover: color-mix(in srgb, var(--color-cta) 88%, black);
-  --color-cta-active: color-mix(in srgb, var(--color-cta) 76%, black);
-  --color-cta-text: #ffffff;
+  /* See :root's own --color-cta for why this is brand ink and not a
+     hue of its own. */
+  --color-cta: var(--color-brand);
+  --color-cta-on-surface: var(--color-brand);
+  --color-cta-hover: var(--color-brand-hover);
+  --color-cta-active: var(--color-brand-active);
+  --color-cta-text: var(--color-brand-text);
 
   --shadow-btn-primary: 0 1px 2px rgba(0, 0, 0, 0.4);
   --shadow-btn-secondary: 0 1px 2px rgba(0, 0, 0, 0.3);
@@ -597,9 +665,11 @@
   --color-secondary-border: var(--color-border-strong);
   --color-secondary-text: var(--color-text-primary);
   --color-secondary-hover: color-mix(in srgb, var(--color-text-primary) 6%, var(--color-secondary-fill));
+  --color-secondary-active: color-mix(in srgb, var(--color-text-primary) 12%, var(--color-secondary-fill));
 
   --color-destructive-fill: #c70a24;
   --color-destructive-hover: #a30a24;
+  --color-destructive-active: color-mix(in srgb, black 15%, var(--color-destructive-hover));
   --color-destructive-text: #ffffff;
 
   --color-warning: #8a6600;
@@ -683,7 +753,6 @@
 
 *::-webkit-scrollbar-thumb {
   background: var(--color-border-strong);
-  border-radius: var(--radius-full);
   border: 2px solid transparent;
   background-clip: padding-box;
 }
@@ -752,11 +821,19 @@ a {
   text-decoration: none;
 }
 
-/* The app's one accent blue — same token as the sidebar's current-row
-   ink and the active document tab. Not .card: a card-styled link is a
-   clickable surface, not inline text, and turning its whole contents
-   blue on hover would tint every stat number/label inside a dashboard
-   tile along with it (see a.card below, which keeps its own hover
+/* Color shift only, no underline. Nav rows, table rows, menu items and
+   every other structural link declare their own higher-specificity
+   :hover with a background fill, so this rule never actually paints on
+   them — an underline here used to show through anyway, stacked on
+   top of that fill, which read as two hover cues on one row instead of
+   one. What's left is what a bare inline-text link (no background
+   treatment of its own) gets, and a color change is enough there.
+
+   Not .card: a card-styled link is a clickable surface, not inline
+   text, and most of what's inside one already carries its own explicit
+   color — but any incidental text that doesn't would pick up this
+   tint on hover, which reads as random flicker rather than a link
+   changing color (see a.card below, which keeps its own hover
    treatment instead). */
 a:hover:not(.card) {
   color: var(--color-cta-on-surface);
@@ -765,7 +842,6 @@ a:hover:not(.card) {
 a:focus-visible {
   outline: 1.5px dashed var(--color-brand);
   outline-offset: 4px;
-  border-radius: var(--radius-full);
 }
 
 /* A label should recede so the value it names is what gets scanned.
@@ -788,16 +864,16 @@ label[data-required]::after {
   font-weight: var(--font-weight-regular);
 }
 
-/* Primary action — the call-to-action fill. Charcoal until it was
-   given a colour of its own; --color-brand still carries structure
-   (focus ring, active tab, checkbox tick) and is deliberately not
-   this. */
+/* Primary action — the call-to-action fill. Charcoal, the same ink as
+   --color-brand (see --color-cta above): had a hue of its own for a
+   while, removed to keep color reserved for status/data, same as
+   everywhere else in this palette. */
 button {
   font: inherit;
   cursor: pointer;
   border: none;
-  border-radius: var(--radius-sm);
-  padding: 5px 10px;
+  border-radius: var(--radius-xs);
+  padding: 4px 10px;
   font-size: var(--text-base);
   font-weight: 400;
   background: var(--color-cta);
@@ -858,8 +934,8 @@ button:focus-visible {
   font: inherit;
   cursor: pointer;
   border: none;
-  border-radius: var(--radius-sm);
-  padding: 5px 10px;
+  border-radius: var(--radius-xs);
+  padding: 4px 10px;
   font-size: var(--text-base);
   font-weight: 400;
   background: var(--color-secondary-fill);
@@ -873,6 +949,16 @@ button:focus-visible {
   opacity: 1;
 }
 
+/* Needed despite the bare button:active rule above already setting a
+   background on press — button:active's specificity (an element plus
+   a pseudo-class) beats .btn-secondary's own single class regardless
+   of source order, so without this, pressing a secondary button
+   flashed the *primary* button's dark --color-cta-active fill instead
+   of staying in its own secondary color family. */
+.btn-secondary:active {
+  background: var(--color-secondary-active);
+}
+
 /* Destructive action — irreversible operations only (delete, void,
    permanently remove). Not the default for every "Delete" button in
    an app; opt in per call site where the action truly can't be
@@ -884,8 +970,8 @@ button:focus-visible {
   font: inherit;
   cursor: pointer;
   border: none;
-  border-radius: var(--radius-sm);
-  padding: 5px 10px;
+  border-radius: var(--radius-xs);
+  padding: 4px 10px;
   font-size: var(--text-base);
   font-weight: 400;
   background: var(--color-destructive-fill);
@@ -902,6 +988,14 @@ button:focus-visible {
   background: var(--color-destructive-hover);
 }
 
+/* Same reason .btn-secondary:active exists above — button:active's
+   own specificity would otherwise win with the primary button's
+   --color-cta-active fill instead of a darker/lighter shade of this
+   button's own red. */
+.btn-danger:active {
+  background: var(--color-destructive-active);
+}
+
 /* font-family is inherited; size, weight and colour are stated.
    `font: inherit` alone meant a field took its type from whatever
    wrapped it — and most fields in this app are wrapped in their own
@@ -1143,11 +1237,9 @@ label:has(:required) .combobox-input {
   color: var(--color-text-primary);
 }
 
-/* The app's one accent blue, not --color-brand — asked for directly.
-   --color-brand still does the same job for the controls that used to
-   share this border with it (checkbox tick, a:focus-visible's outline),
-   so it stays defined as-is; this just stops reading its (near-black)
-   value for the field border specifically.
+/* --color-cta-on-surface is brand ink now (see :root's own --color-cta)
+   — this used to read a separate accent blue here, kept as its own
+   token in case the two ever need to diverge again.
 
    No box-shadow ring — asked for directly ("we do not need out shadow
    on input area when typing"). :focus and :focus-visible used to carry
@@ -1213,18 +1305,44 @@ input[type="radio"] {
   accent-color: var(--color-brand);
 }
 
-/* Shadow-based elevation, plus a hairline border — the card surface
-   and page canvas are close enough in lightness that shadow alone
-   doesn't read as a distinct edge, so the border carries definition
-   while the shadow carries depth. */
+/* Shadow-based elevation, plus a real border — the card surface and
+   page canvas are close enough in lightness that shadow alone doesn't
+   read as a distinct edge, so the border carries definition while the
+   shadow carries depth. 1px border-strong, not the old 0.5px border —
+   unified with .widget-card (tokens.css), which had already moved to
+   the crisper weight and color and left plain .card as the one place
+   still drawing a thinner, lighter line for what is the same "a card"
+   job. */
 .card {
   background: var(--color-background-card);
-  border: 0.5px solid var(--color-border);
-  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-sm);
   box-shadow: var(--shadow-sm);
   padding: 16px;
 }
 
+/* The standard gap between two vertically stacked cards — asked for
+   directly, "organize" the pages that each hand-rolled their own
+   marginBottom for this (16px and 20px both showed up for the same
+   "space before the next card" job, no rule for which).
+
+   Opt-in via .card-stack on the shared parent, not a blanket
+   `.card + .card` — a margin-top here would land on the cross axis,
+   not stack spacing, wherever two cards sit in a flex row/wrap
+   instead of a vertical flow (confirmed at least one such case:
+   BillingPage's plan-comparison grid), silently misaligning them.
+   .card-stack marks "these siblings really are a vertical stack" so
+   the rule only ever fires where that is true. Un-opted-in card
+   sequences keep whatever spacing they already declare.
+
+   .widget-card counts as a card here. It didn't, and once the
+   integration pages' Connection card became a WidgetCard the Orders
+   card sat flush against it ("add some space on top of order card") —
+   the rule only knew .card + .card. */
+.card-stack > :is(.card, .widget-card) + :is(.card, .widget-card) {
+  margin-top: 16px;
+}
+
 /* A card whose entire content is a table — no inset padding, so the
    table's own row/column lines run edge-to-edge to the card's outer
    border instead of floating inside a padded frame. overflow: hidden
@@ -1451,7 +1569,7 @@ a.card:hover {
 .modal-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(26, 26, 26, 0.45);
+  background: var(--color-scrim);
   display: flex;
   align-items: flex-start;
   justify-content: center;
@@ -1462,7 +1580,6 @@ a.card:hover {
 .modal-panel {
   background: var(--color-surface-raised);
   border: 1px solid var(--color-border-raised);
-  border-radius: var(--radius-lg);
   box-shadow: var(--shadow-popover);
   width: 100%;
   max-width: 640px;
@@ -1470,6 +1587,7 @@ a.card:hover {
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  border-radius: var(--popup-radius);
 }
 
 .modal-panel-header {