@keyfunc/keybricks-ds 1.0.3 → 2.1.1

package/tokens/interaction.css

@@ -1,5 +1,5 @@
 /* ── Universal interaction layer ──
-   Rest, hover and selected states live in each component's own styles.
+   Rest, hover and selected states live in each component's own styles; field boxes and segments read the hover hooks below.
    Press and keyboard focus are delivered here so EVERY control carries them
    uniformly: `filter` and `outline` are never set inline, so these rules
    compose on top of whatever background a component is showing at the time.
@@ -30,6 +30,8 @@ summary:active,
 [role="treeitem"]:active,
 [role="gridcell"]:active{filter:var(--press-filter)}
 
+/* Hover hooks live in tokens/hover.css (state signals, not tokens). */
+
 /* Keyboard focus — visible on :focus-visible only, so a mouse click never draws it.
    `outline` is used (not box-shadow) so component shadows stay intact. */
 button:focus-visible,

package/tokens/layout.css

@@ -1,9 +1,9 @@
-/* Keybricks spacing / radii / borders / shadows / chrome sizes */
+/* Keybricks spacing / radii / borders / shadows / chrome sizes / size tiers */
 :root{
-/* Radii */
---radius-sm:4px;   /* steppers, dropdown selects, small toggles, checkbox */
---radius-md:8px;   /* buttons, inputs, nav items, chips, 32px icon tiles */
---radius-lg:10px;  /* cards, dropzone, large buttons, search fields */
+/* Radii — picked by element type, identical at every size tier */
+--radius-sm:4px;   /* checkbox, small toggles */
+--radius-md:8px;   /* buttons, inputs, selects, search, steppers, segmented controls, pagination items, nav items, chips, 32px icon tiles */
+--radius-lg:10px;  /* cards, dropzone, menus */
 --radius-tile:14px;/* 40px palette icon tiles */
 --radius-node:16px;/* canvas node cards + their 48px icon tiles */
 --radius-full:9999px;
@@ -16,8 +16,26 @@
 --ring-focus:0 0 0 2px var(--bg-surface),0 0 0 4px var(--focus-border);
 /* Chrome sizes */
 --sidebar-w:240px;--rail-w:64px;--topbar-h:56px;--panel-w:400px;--drawer-h:250px;
-/* Control heights */
---h-button:32px;--h-button-sm:30px;--h-input:36px;--h-nav-item:35.5px;--h-subnav-item:31.5px;--h-tree-item:30px;
+--h-nav-item:36px;--h-subnav-item:32px;--h-tree-item:32px;
+/* Size tiers — one scale that every control reads. A region (app root, toolbar, filter bar, form, table,
+   dialog, drawer) declares data-size="sm" | "md" | "lg"; everything inside inherits these values, so controls
+   that share a row can never disagree. md is the default; the rules below the :root block switch the tier.
+   sm 24 · md 32 · lg 36 for controls; bars and rows are 8px taller; a bar inside a bordered card 16px taller. */
+--control-h:32px;                                                                         /* buttons, inputs, selects, search, steppers, segmented controls, chips, pagination items */
+--control-text:var(--text-base);--control-leading:var(--leading-base);--control-tracking:var(--tracking-base); /* text inside controls and their labels */
+--control-icon:16px;                                                                      /* icon inside a control */
+--control-px:12px;                                                                        /* horizontal padding inside a text control or button */
+--control-gap:8px;                                                                        /* gap inside one group: label → its control, button → button */
+--group-gap:16px;                                                                         /* gap between groups in one bar: field → next field */
+--bar-h:40px;                                                                             /* toolbar, filter bar, tab bar, table row, list row */
+--bar-card-h:48px;                                                                        /* a bar inside a bordered card (table toolbar, pagination): keeps 8px from the card edge */
+--edge-pad:16px;                                                                          /* card edge → first control or cell */
+--cell-px:12px;                                                                           /* horizontal padding of a table cell */
+--check-size:16px;                                                                        /* checkbox and radio box */
+--tag-h:24px;                                                                             /* Tag */
+--switch-w:36px;--switch-h:20px;                                                          /* Switch track */
+/* Compatibility aliases — superseded by the tier tokens above */
+--h-button:var(--control-h);--h-input:var(--control-h);--h-button-sm:24px;
 /* Page rhythm */
 --page-pad-y:24px;--page-pad-x:32px;--section-gap:24px;--card-pad:21px;--card-pad-sm:17px;
 /* Stacking */
@@ -28,3 +46,7 @@
 --z-toast:80; /* @kind other */
 --z-tooltip:100; /* @kind other */
 }
+/* The three tiers. Declared after :root so a tier set on <html> itself also wins. */
+[data-size="sm"]{--control-h:24px;--control-text:var(--text-xs);--control-leading:var(--leading-xs);--control-tracking:var(--tracking-xs);--control-icon:14px;--control-px:8px;--control-gap:8px;--group-gap:12px;--bar-h:32px;--bar-card-h:40px;--edge-pad:12px;--cell-px:8px;--check-size:14px;--tag-h:20px;--switch-w:28px;--switch-h:16px}
+[data-size="md"]{--control-h:32px;--control-text:var(--text-base);--control-leading:var(--leading-base);--control-tracking:var(--tracking-base);--control-icon:16px;--control-px:12px;--control-gap:8px;--group-gap:16px;--bar-h:40px;--bar-card-h:48px;--edge-pad:16px;--cell-px:12px;--check-size:16px;--tag-h:24px;--switch-w:36px;--switch-h:20px}
+[data-size="lg"]{--control-h:36px;--control-text:var(--text-base);--control-leading:var(--leading-base);--control-tracking:var(--tracking-base);--control-icon:16px;--control-px:16px;--control-gap:8px;--group-gap:24px;--bar-h:44px;--bar-card-h:52px;--edge-pad:16px;--cell-px:16px;--check-size:16px;--tag-h:28px;--switch-w:44px;--switch-h:24px}

package/tokens/tokens.d.ts

@@ -18,6 +18,8 @@ export type TokenName =
   | "--amber-800"
   | "--amber-900"
   | "--amber-950"
+  | "--bar-card-h"
+  | "--bar-h"
   | "--bg-active"
   | "--bg-app"
   | "--bg-hover"
@@ -26,6 +28,7 @@ export type TokenName =
   | "--bg-raised"
   | "--bg-scrim"
   | "--bg-surface"
+  | "--bg-table-header"
   | "--blue-100"
   | "--blue-200"
   | "--blue-300"
@@ -58,6 +61,7 @@ export type TokenName =
   | "--cat-source-bg"
   | "--cat-transform"
   | "--cat-transform-bg"
+  | "--cell-px"
   | "--chart-area-alpha"
   | "--chart-axis"
   | "--chart-blue"
@@ -74,7 +78,15 @@ export type TokenName =
   | "--chart-pos"
   | "--chart-total"
   | "--chart-track"
+  | "--check-size"
   | "--checkbox-border"
+  | "--control-gap"
+  | "--control-h"
+  | "--control-icon"
+  | "--control-leading"
+  | "--control-px"
+  | "--control-text"
+  | "--control-tracking"
   | "--cyan-100"
   | "--cyan-200"
   | "--cyan-300"
@@ -90,6 +102,7 @@ export type TokenName =
   | "--danger-active"
   | "--danger-bg"
   | "--danger-soft-active"
+  | "--danger-soft-hover"
   | "--danger-text"
   | "--dot-neutral"
   | "--drawer-h"
@@ -104,6 +117,7 @@ export type TokenName =
   | "--ease-in-out"
   | "--ease-out"
   | "--edge"
+  | "--edge-pad"
   | "--emerald-100"
   | "--emerald-200"
   | "--emerald-300"
@@ -119,6 +133,7 @@ export type TokenName =
   | "--focus-ring"
   | "--font-mono"
   | "--font-sans"
+  | "--group-gap"
   | "--h-button"
   | "--h-button-sm"
   | "--h-input"
@@ -273,8 +288,11 @@ export type TokenName =
   | "--success-bg"
   | "--success-strong"
   | "--success-text"
+  | "--switch-h"
+  | "--switch-w"
   | "--t-hover"
   | "--t-theme"
+  | "--tag-h"
   | "--teal-100"
   | "--teal-200"
   | "--teal-300"
@@ -353,6 +371,8 @@ export type TokenKey =
   | "amber800"
   | "amber900"
   | "amber950"
+  | "barCardH"
+  | "barH"
   | "bgActive"
   | "bgApp"
   | "bgHover"
@@ -361,6 +381,7 @@ export type TokenKey =
   | "bgRaised"
   | "bgScrim"
   | "bgSurface"
+  | "bgTableHeader"
   | "blue100"
   | "blue200"
   | "blue300"
@@ -393,6 +414,7 @@ export type TokenKey =
   | "catSourceBg"
   | "catTransform"
   | "catTransformBg"
+  | "cellPx"
   | "chartAreaAlpha"
   | "chartAxis"
   | "chartBlue"
@@ -409,7 +431,15 @@ export type TokenKey =
   | "chartPos"
   | "chartTotal"
   | "chartTrack"
+  | "checkSize"
   | "checkboxBorder"
+  | "controlGap"
+  | "controlH"
+  | "controlIcon"
+  | "controlLeading"
+  | "controlPx"
+  | "controlText"
+  | "controlTracking"
   | "cyan100"
   | "cyan200"
   | "cyan300"
@@ -425,6 +455,7 @@ export type TokenKey =
   | "dangerActive"
   | "dangerBg"
   | "dangerSoftActive"
+  | "dangerSoftHover"
   | "dangerText"
   | "dotNeutral"
   | "drawerH"
@@ -439,6 +470,7 @@ export type TokenKey =
   | "easeInOut"
   | "easeOut"
   | "edge"
+  | "edgePad"
   | "emerald100"
   | "emerald200"
   | "emerald300"
@@ -454,6 +486,7 @@ export type TokenKey =
   | "focusRing"
   | "fontMono"
   | "fontSans"
+  | "groupGap"
   | "hButton"
   | "hButtonSm"
   | "hInput"
@@ -608,8 +641,11 @@ export type TokenKey =
   | "successBg"
   | "successStrong"
   | "successText"
+  | "switchH"
+  | "switchW"
   | "tHover"
   | "tTheme"
+  | "tagH"
   | "teal100"
   | "teal200"
   | "teal300"