@hattisar/design-tokens 0.3.28 → 0.3.29

package/package.json

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

@@ -1811,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%;
+}