@keyfunc/keybricks-ds 1.0.4 → 2.3.1

package/tokens/hover.css

@@ -0,0 +1,32 @@
+/* ── Hover hooks ── state signals read by component inline styles; these are not design tokens. */
+/* Hover for controls whose rest colours are inline. Two hooks, both set a custom property that the
+   component's own inline style reads, so focus, error and selected colours (written as plain values)
+   always win over hover without !important:
+   data-field — a bordered field box (Input, Textarea, Select, Combobox, MultiSelect, DatePicker,
+     SearchInput, NumberStepper): the border steps from --border-control to --border-strong.
+   data-wash — a borderless segment inside a control (stepper − / +, pagination items): the
+     surface steps to --bg-hover, the same step as an outline or ghost Button.
+   Each hook resets itself so a hovered parent never lights a nested control. */
+[data-field]{--field-border:initial}
+[data-field]:hover{--field-border:var(--border-strong)}
+[data-wash]{--wash:initial}
+[data-wash]:hover:not(:disabled){--wash:var(--bg-hover)}
+[data-wash="strong"]:hover:not(:disabled){--wash:var(--bg-press)} /* a control already on --bg-active */
+/* data-ink — a text-only control (inactive tab, legend item, clear ×, copy): the ink steps to --text-heading.
+   data-check — a checkbox label: the empty box's border steps to --text-muted, like Radio.
+   data-link — an inline action link: underline appears, or thickens if it is already drawn.
+   data-thumb — a slider track: the thumb picks up the focus-ring halo.
+   Switch tracks carry their colour in --sw-track; hover mixes it one step toward the ink colour,
+   which darkens in light mode and lightens in dark. */
+[data-row]{--row-wash:initial}
+[data-row]:hover{--row-wash:var(--bg-inset)}
+[data-ink]{--ink:initial;--ink-op:initial}
+[data-ink]:hover:not(:disabled){--ink:var(--text-heading);--ink-op:1}
+[data-check]{--check-border:initial}
+[data-check]:hover{--check-border:var(--text-muted)}
+[data-link]{--link-line:initial;--link-thick:initial}
+[data-link]:hover{--link-line:underline;--link-thick:2px}
+[data-thumb]{--thumb-ring:initial}
+[data-thumb]:hover{--thumb-ring:0 0 0 4px var(--focus-ring),0 1px 2px rgba(0,0,0,.15)}
+[role="switch"]:not([aria-disabled="true"]):not([aria-busy="true"]):hover,
+[data-sw]:hover>[role="switch"]:not([aria-disabled="true"]):not([aria-busy="true"]){--sw-bg:color-mix(in srgb,var(--sw-track) 86%,var(--text-primary))}

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,28 @@
 --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 28 · md 32 · lg 40 for controls (2.3.0: was 24 / 32 / 36); 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 */
+/* Two-line title cell (Table column `twoLine`): row padding, title → description gap, icon tile, tile → text gap. md row = 10 + 20 + 2 + 16 + 10 = 58px */
+--title-cell-py:10px;--title-cell-gap:2px;--title-cell-tile:32px;--title-cell-icon:16px;--title-cell-tile-r:8px;--title-cell-tile-gap:12px;
+/* Compatibility aliases — superseded by the tier tokens above */
+--h-button:var(--control-h);--h-input:var(--control-h);--h-button-sm:28px;
 /* Page rhythm */
 --page-pad-y:24px;--page-pad-x:32px;--section-gap:24px;--card-pad:21px;--card-pad-sm:17px;
 /* Stacking */
@@ -28,3 +48,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:28px;--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:36px;--bar-card-h:44px;--edge-pad:12px;--cell-px:8px;--check-size:14px;--tag-h:20px;--switch-w:28px;--switch-h:16px;--text-code:11px;--leading-code:16px;--title-cell-py:8px;--title-cell-gap:2px;--title-cell-tile:28px;--title-cell-icon:14px;--title-cell-tile-r:8px;--title-cell-tile-gap:8px}
+[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;--text-code:12px;--leading-code:18px;--title-cell-py:10px;--title-cell-gap:2px;--title-cell-tile:32px;--title-cell-icon:16px;--title-cell-tile-r:8px;--title-cell-tile-gap:12px}
+[data-size="lg"]{--control-h:40px;--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:48px;--bar-card-h:56px;--edge-pad:16px;--cell-px:16px;--check-size:16px;--tag-h:28px;--switch-w:44px;--switch-h:24px;--text-code:12px;--leading-code:18px;--title-cell-py:14px;--title-cell-gap:4px;--title-cell-tile:40px;--title-cell-icon:20px;--title-cell-tile-r:10px;--title-cell-tile-gap:12px}

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"
@@ -39,6 +42,7 @@ export type TokenName =
   | "--blue-950"
   | "--border-card"
   | "--border-control"
+  | "--border-split"
   | "--border-strong"
   | "--border-subtle"
   | "--brand-alpha-12"
@@ -58,6 +62,7 @@ export type TokenName =
   | "--cat-source-bg"
   | "--cat-transform"
   | "--cat-transform-bg"
+  | "--cell-px"
   | "--chart-area-alpha"
   | "--chart-axis"
   | "--chart-blue"
@@ -74,7 +79,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 +103,7 @@ export type TokenName =
   | "--danger-active"
   | "--danger-bg"
   | "--danger-soft-active"
+  | "--danger-soft-hover"
   | "--danger-text"
   | "--dot-neutral"
   | "--drawer-h"
@@ -104,6 +118,7 @@ export type TokenName =
   | "--ease-in-out"
   | "--ease-out"
   | "--edge"
+  | "--edge-pad"
   | "--emerald-100"
   | "--emerald-200"
   | "--emerald-300"
@@ -119,6 +134,7 @@ export type TokenName =
   | "--focus-ring"
   | "--font-mono"
   | "--font-sans"
+  | "--group-gap"
   | "--h-button"
   | "--h-button-sm"
   | "--h-input"
@@ -152,6 +168,7 @@ export type TokenName =
   | "--leading-3xl"
   | "--leading-4xl"
   | "--leading-base"
+  | "--leading-code"
   | "--leading-display"
   | "--leading-lg"
   | "--leading-md"
@@ -273,8 +290,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"
@@ -288,11 +308,14 @@ export type TokenName =
   | "--teal-950"
   | "--text-2xl"
   | "--text-2xs"
+  | "--text-2xs-mono"
   | "--text-3xl"
   | "--text-4xl"
   | "--text-base"
   | "--text-body"
+  | "--text-code"
   | "--text-display"
+  | "--text-glyph-min"
   | "--text-heading"
   | "--text-inverse"
   | "--text-lg"
@@ -305,6 +328,12 @@ export type TokenName =
   | "--text-strong"
   | "--text-xl"
   | "--text-xs"
+  | "--title-cell-gap"
+  | "--title-cell-icon"
+  | "--title-cell-py"
+  | "--title-cell-tile"
+  | "--title-cell-tile-gap"
+  | "--title-cell-tile-r"
   | "--tooltip-bg"
   | "--tooltip-fg"
   | "--topbar-h"
@@ -353,6 +382,8 @@ export type TokenKey =
   | "amber800"
   | "amber900"
   | "amber950"
+  | "barCardH"
+  | "barH"
   | "bgActive"
   | "bgApp"
   | "bgHover"
@@ -361,6 +392,7 @@ export type TokenKey =
   | "bgRaised"
   | "bgScrim"
   | "bgSurface"
+  | "bgTableHeader"
   | "blue100"
   | "blue200"
   | "blue300"
@@ -374,6 +406,7 @@ export type TokenKey =
   | "blue950"
   | "borderCard"
   | "borderControl"
+  | "borderSplit"
   | "borderStrong"
   | "borderSubtle"
   | "brandAlpha12"
@@ -393,6 +426,7 @@ export type TokenKey =
   | "catSourceBg"
   | "catTransform"
   | "catTransformBg"
+  | "cellPx"
   | "chartAreaAlpha"
   | "chartAxis"
   | "chartBlue"
@@ -409,7 +443,15 @@ export type TokenKey =
   | "chartPos"
   | "chartTotal"
   | "chartTrack"
+  | "checkSize"
   | "checkboxBorder"
+  | "controlGap"
+  | "controlH"
+  | "controlIcon"
+  | "controlLeading"
+  | "controlPx"
+  | "controlText"
+  | "controlTracking"
   | "cyan100"
   | "cyan200"
   | "cyan300"
@@ -425,6 +467,7 @@ export type TokenKey =
   | "dangerActive"
   | "dangerBg"
   | "dangerSoftActive"
+  | "dangerSoftHover"
   | "dangerText"
   | "dotNeutral"
   | "drawerH"
@@ -439,6 +482,7 @@ export type TokenKey =
   | "easeInOut"
   | "easeOut"
   | "edge"
+  | "edgePad"
   | "emerald100"
   | "emerald200"
   | "emerald300"
@@ -454,6 +498,7 @@ export type TokenKey =
   | "focusRing"
   | "fontMono"
   | "fontSans"
+  | "groupGap"
   | "hButton"
   | "hButtonSm"
   | "hInput"
@@ -487,6 +532,7 @@ export type TokenKey =
   | "leading3xl"
   | "leading4xl"
   | "leadingBase"
+  | "leadingCode"
   | "leadingDisplay"
   | "leadingLg"
   | "leadingMd"
@@ -608,8 +654,11 @@ export type TokenKey =
   | "successBg"
   | "successStrong"
   | "successText"
+  | "switchH"
+  | "switchW"
   | "tHover"
   | "tTheme"
+  | "tagH"
   | "teal100"
   | "teal200"
   | "teal300"
@@ -623,11 +672,14 @@ export type TokenKey =
   | "teal950"
   | "text2xl"
   | "text2xs"
+  | "text2xsMono"
   | "text3xl"
   | "text4xl"
   | "textBase"
   | "textBody"
+  | "textCode"
   | "textDisplay"
+  | "textGlyphMin"
   | "textHeading"
   | "textInverse"
   | "textLg"
@@ -640,6 +692,12 @@ export type TokenKey =
   | "textStrong"
   | "textXl"
   | "textXs"
+  | "titleCellGap"
+  | "titleCellIcon"
+  | "titleCellPy"
+  | "titleCellTile"
+  | "titleCellTileGap"
+  | "titleCellTileR"
   | "tooltipBg"
   | "tooltipFg"
   | "topbarH"