@hattisar/design-tokens 0.3.27 → 0.3.28

package/package.json

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