@hattisar/design-tokens 0.3.27 → 0.3.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hattisar/design-tokens",
-  "version": "0.3.27",
+  "version": "0.3.29",
   "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

@@ -267,6 +267,28 @@
   --card-header-height: 36px;
   --card-header-control-height: 24px;
 
+  /* The signature widget card: a filled frame, a header band that shows the
+     frame's own fill, and a white body set into it. WidgetCard, the line-items
+     card, the form sections and the settings cards all read these, so the look
+     is changed here once and never restated per card. They are built from the
+     colour and radius tokens, so they follow the theme without a block of
+     their own. */
+  --widget-bg: var(--color-table-header);
+  --widget-border-width: 1px;
+  --widget-border-color: var(--color-border-strong);
+  --widget-radius: var(--radius-sm);
+  --widget-shadow: var(--shadow-sm);
+  --widget-header-height: var(--card-header-height);
+  --widget-header-padding: 6px var(--space-3);
+  --widget-title-size: var(--text-sm);
+  --widget-title-weight: var(--font-weight-medium);
+  --widget-body-bg: var(--color-background-card);
+  --widget-body-padding: var(--space-3) var(--space-4);
+  --widget-divider: var(--color-border);
+  /* The surface a sheet or label sits on in a preview: a shade off the card. */
+  --widget-canvas-bg: color-mix(in srgb, var(--color-text-primary) 5%, var(--color-background-card));
+  --widget-row-padding: var(--space-3) var(--space-4);
+
   /* 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
@@ -296,6 +318,11 @@
   --button-height: 28px;
   --button-radius: var(--radius-full);
   --button-padding-x: var(--space-3);
+  /* Not equal on purpose: the label's cap-height centre sits 0.75px above the
+     box's centre with equal padding, which reads as text riding high in the
+     pill. Three-quarters of a pixel off each side puts the ink in the middle. */
+  --button-padding-top: calc(var(--space-1) + 0.75px);
+  --button-padding-bottom: calc(var(--space-1) - 0.75px);
   --button-font-size: var(--text-sm);
   --button-font-weight: var(--font-weight-medium);
 
@@ -1048,7 +1075,7 @@ button {
   border: none;
   border-radius: var(--button-radius);
   min-height: var(--button-height);
-  padding: var(--space-1) var(--button-padding-x);
+  padding: var(--button-padding-top) var(--button-padding-x) var(--button-padding-bottom);
   font-size: var(--button-font-size);
   font-weight: var(--button-font-weight);
   background: var(--color-cta);
@@ -1119,7 +1146,7 @@ button:focus-visible {
   border: none;
   border-radius: var(--button-radius);
   min-height: var(--button-height);
-  padding: var(--space-1) var(--button-padding-x);
+  padding: var(--button-padding-top) var(--button-padding-x) var(--button-padding-bottom);
   font-size: var(--button-font-size);
   font-weight: var(--button-font-weight);
   background: var(--button-secondary-bg);
@@ -1156,7 +1183,7 @@ button:focus-visible {
   border: none;
   border-radius: var(--button-radius);
   min-height: var(--button-height);
-  padding: var(--space-1) var(--button-padding-x);
+  padding: var(--button-padding-top) var(--button-padding-x) var(--button-padding-bottom);
   font-size: var(--button-font-size);
   font-weight: var(--button-font-weight);
   background: var(--color-destructive-fill);
@@ -1469,6 +1496,10 @@ select:disabled {
 input[type="checkbox"],
 input[type="radio"] {
   width: auto;
+  /* No vertical margin: the field rule above gives every input a top margin,
+     which on a checkbox or radio set beside its label pushes it below the
+     text's centre. The sides keep the browser's own spacing. */
+  margin-block: 0;
   accent-color: var(--color-brand);
 }
 
@@ -1594,8 +1625,6 @@ input[type="radio"] {
   display: block;
   font-size: var(--text-xs);
   font-weight: 400;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
   color: var(--color-text-muted);
   margin-bottom: 6px;
 }
@@ -1782,3 +1811,76 @@ a.card:hover {
   justify-content: flex-end;
   gap: 10px;
 }
+
+/**
+ * Semantic tier (--ui-*): what surfaces, controls and states are called, built only from the
+ * primitives above, so light and dark follow with no second copy of any value. Inventory and the
+ * Storefront both read these; an app sets a few of them (its accent, its density) rather than
+ * redefining the rest. Added alongside the existing tokens and changes none of them.
+ *
+ * Surfaces separate by tone, not by line: the page is the base, what is raised above it (cards,
+ * panels, popovers) is a soft tint of the text color, and a tray inside one a step further.
+ */
+:root {
+  /* The one accent: primary actions, active marks, counts, focus. An app or a seller can swap these three. */
+  --ui-accent: #0f766e;
+  --ui-accent-hover: #0b5f58;
+  --ui-accent-ink: #fff;
+  --ui-accent-soft: color-mix(in srgb, var(--ui-accent) var(--ui-wash), transparent);
+  --ui-surface: var(--color-background-page);
+  --ui-card: color-mix(in srgb, var(--color-text-primary) var(--ui-tint-card), var(--ui-surface));
+  --ui-tray: color-mix(in srgb, var(--color-text-primary) var(--ui-tint-tray), var(--ui-card));
+  /* The column header band: a step off the surface a table sits on. */
+  --ui-band: color-mix(in srgb, var(--color-text-primary) var(--ui-tint-band), var(--ui-surface));
+  /* Form fields are a filled shape: the share of the text color mixed into the card, at rest and under the pointer. */
+  --ui-field-bg: color-mix(in srgb, var(--color-text-primary) var(--ui-tint-field), var(--ui-card));
+  --ui-field-bg-hover: color-mix(in srgb, var(--color-text-primary) var(--ui-tint-field-hover), var(--ui-card));
+  --ui-row-alt: color-mix(in srgb, var(--color-text-primary) 3%, transparent);
+  /* Every other row of a table, laid over its surface: what tells one row from the next now that no rule does. */
+  --ui-row-zebra: color-mix(in srgb, var(--color-text-primary) 4%, transparent);
+  /* A rule between rows: present enough to follow a line across, quiet enough not to read as a grid. */
+  --ui-divider: color-mix(in srgb, var(--color-text-primary) 8%, transparent);
+  /* The one hairline that stays when borders do not: a thin line blended into the surface, where two panels of the same tone meet. */
+  --ui-edge: color-mix(in srgb, var(--color-text-primary) 8%, transparent);
+  /* Marks that are drawn, not outlines: scrollbar thumbs, the off state of a switch, chart gridlines. They stay visible when borders do not. */
+  --ui-mark: color-mix(in srgb, var(--color-text-primary) 22%, transparent);
+  --ui-grid: color-mix(in srgb, var(--color-text-primary) 10%, transparent);
+  --ui-tint-card: 4%;
+  --ui-tint-tray: 6%;
+  --ui-tint-band: 7%;
+  --ui-tint-field: 7%;
+  --ui-tint-field-hover: 10%;
+  --ui-tint-skeleton: 9%;
+  --ui-wash: 14%;
+  /* Control and row sizes. */
+  --ui-ctl: 32px;
+  --ui-ctl-sm: 28px;
+  --ui-hit: 40px;
+  --ui-row-h: 48px;
+  --ui-icon: 20px;
+  --ui-icon-sm: 16px;
+  --ui-tight: 2px;
+  --ui-lh: 20px;
+  --ui-title-lh: 24px;
+  --ui-tracking: -0.01em;
+  --ui-count-pad: 1px 6px;
+  --ui-focus: 2px;
+  --ui-hairline: 1px;
+  --ui-transition: 0.12s ease;
+  --ui-disabled: 0.5;
+  --ui-scrim: color-mix(in srgb, #000 45%, transparent);
+  --ui-scrim-ink: #fff;
+  --ui-shadow-pop: 0 8px 24px color-mix(in srgb, #000 16%, transparent), 0 0 0 1px color-mix(in srgb, #000 5%, transparent);
+}
+
+:root[data-theme="dark"] {
+  --ui-accent: #2dd4bf;
+  --ui-accent-hover: #5eead4;
+  --ui-accent-ink: #04201d;
+  --ui-surface: var(--color-background-global);
+  --ui-tint-card: 5%;
+  --ui-card: color-mix(in srgb, var(--color-text-primary) var(--ui-tint-card), var(--color-background-page));
+  --ui-tint-band: 10%;
+  --ui-tint-field: 11%;
+  --ui-tint-field-hover: 15%;
+}