@keyfunc/keybricks-ds 2.1.1 → 2.4.0

package/tokens/dark.css

@@ -20,7 +20,7 @@ color-scheme:dark;
 --text-primary:#fafafa;--text-heading:#f5f5f5;--text-strong:#e5e5e5;--text-body:#d4d4d4;--text-secondary:#a1a1a1;--text-muted:#737373;--text-inverse:#0a0a0a;
 --on-accent:#ffffff;--action-dark-fg:#0a0a0a;
 /* Borders */
---border-card:rgba(255,255,255,.09);--border-control:#333333;--border-subtle:#242424;--border-strong:#454545;
+--border-card:rgba(255,255,255,.09);--border-control:#333333;--border-split:#404040;--border-subtle:#242424;--border-strong:#454545;
 /* Actions */
 --action-primary:#1f6feb;--action-primary-hover:#2b7fff;--action-primary-active:#1a5ec9;--action-dark:#fafafa;--action-dark-hover:#e5e5e5;--action-dark-active:#d4d4d4;
 /* Press (active) fills — one step past the hover value in each family */

package/tokens/layout.css

@@ -20,7 +20,7 @@
 /* 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. */
+   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 */
@@ -33,9 +33,12 @@
 --cell-px:12px;                                                                           /* horizontal padding of a table cell */
 --check-size:16px;                                                                        /* checkbox and radio box */
 --tag-h:24px;                                                                             /* Tag */
+--count-h:18px;                                                                           /* count badge beside a segment / pill label (12px tabular figures, 6px sides, full radius) */
 --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:24px;
+--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 */
@@ -47,6 +50,6 @@
 --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}
+[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;--count-h:16px;--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;--count-h:18px;--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;--count-h:20px;--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

@@ -42,6 +42,7 @@ export type TokenName =
   | "--blue-950"
   | "--border-card"
   | "--border-control"
+  | "--border-split"
   | "--border-strong"
   | "--border-subtle"
   | "--brand-alpha-12"
@@ -87,6 +88,7 @@ export type TokenName =
   | "--control-px"
   | "--control-text"
   | "--control-tracking"
+  | "--count-h"
   | "--cyan-100"
   | "--cyan-200"
   | "--cyan-300"
@@ -167,6 +169,7 @@ export type TokenName =
   | "--leading-3xl"
   | "--leading-4xl"
   | "--leading-base"
+  | "--leading-code"
   | "--leading-display"
   | "--leading-lg"
   | "--leading-md"
@@ -306,11 +309,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"
@@ -323,6 +329,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"
@@ -395,6 +407,7 @@ export type TokenKey =
   | "blue950"
   | "borderCard"
   | "borderControl"
+  | "borderSplit"
   | "borderStrong"
   | "borderSubtle"
   | "brandAlpha12"
@@ -440,6 +453,7 @@ export type TokenKey =
   | "controlPx"
   | "controlText"
   | "controlTracking"
+  | "countH"
   | "cyan100"
   | "cyan200"
   | "cyan300"
@@ -520,6 +534,7 @@ export type TokenKey =
   | "leading3xl"
   | "leading4xl"
   | "leadingBase"
+  | "leadingCode"
   | "leadingDisplay"
   | "leadingLg"
   | "leadingMd"
@@ -659,11 +674,14 @@ export type TokenKey =
   | "teal950"
   | "text2xl"
   | "text2xs"
+  | "text2xsMono"
   | "text3xl"
   | "text4xl"
   | "textBase"
   | "textBody"
+  | "textCode"
   | "textDisplay"
+  | "textGlyphMin"
   | "textHeading"
   | "textInverse"
   | "textLg"
@@ -676,6 +694,12 @@ export type TokenKey =
   | "textStrong"
   | "textXl"
   | "textXs"
+  | "titleCellGap"
+  | "titleCellIcon"
+  | "titleCellPy"
+  | "titleCellTile"
+  | "titleCellTileGap"
+  | "titleCellTileR"
   | "tooltipBg"
   | "tooltipFg"
   | "topbarH"

package/tokens/tokens.js

@@ -45,6 +45,7 @@ export const cssVar = {
   blue950: "var(--blue-950)",
   borderCard: "var(--border-card)",
   borderControl: "var(--border-control)",
+  borderSplit: "var(--border-split)",
   borderStrong: "var(--border-strong)",
   borderSubtle: "var(--border-subtle)",
   brandAlpha12: "var(--brand-alpha-12)",
@@ -90,6 +91,7 @@ export const cssVar = {
   controlPx: "var(--control-px)",
   controlText: "var(--control-text)",
   controlTracking: "var(--control-tracking)",
+  countH: "var(--count-h)",
   cyan100: "var(--cyan-100)",
   cyan200: "var(--cyan-200)",
   cyan300: "var(--cyan-300)",
@@ -170,6 +172,7 @@ export const cssVar = {
   leading3xl: "var(--leading-3xl)",
   leading4xl: "var(--leading-4xl)",
   leadingBase: "var(--leading-base)",
+  leadingCode: "var(--leading-code)",
   leadingDisplay: "var(--leading-display)",
   leadingLg: "var(--leading-lg)",
   leadingMd: "var(--leading-md)",
@@ -309,11 +312,14 @@ export const cssVar = {
   teal950: "var(--teal-950)",
   text2xl: "var(--text-2xl)",
   text2xs: "var(--text-2xs)",
+  text2xsMono: "var(--text-2xs-mono)",
   text3xl: "var(--text-3xl)",
   text4xl: "var(--text-4xl)",
   textBase: "var(--text-base)",
   textBody: "var(--text-body)",
+  textCode: "var(--text-code)",
   textDisplay: "var(--text-display)",
+  textGlyphMin: "var(--text-glyph-min)",
   textHeading: "var(--text-heading)",
   textInverse: "var(--text-inverse)",
   textLg: "var(--text-lg)",
@@ -326,6 +332,12 @@ export const cssVar = {
   textStrong: "var(--text-strong)",
   textXl: "var(--text-xl)",
   textXs: "var(--text-xs)",
+  titleCellGap: "var(--title-cell-gap)",
+  titleCellIcon: "var(--title-cell-icon)",
+  titleCellPy: "var(--title-cell-py)",
+  titleCellTile: "var(--title-cell-tile)",
+  titleCellTileGap: "var(--title-cell-tile-gap)",
+  titleCellTileR: "var(--title-cell-tile-r)",
   tooltipBg: "var(--tooltip-bg)",
   tooltipFg: "var(--tooltip-fg)",
   topbarH: "var(--topbar-h)",
@@ -400,6 +412,7 @@ export const light = {
   blue950: "#162456",
   borderCard: "rgba(229,229,229,.6)",
   borderControl: "#e5e5e5",
+  borderSplit: "#d4d4d4",
   borderStrong: "#d4d4d4",
   borderSubtle: "#f5f5f5",
   brandAlpha12: "rgba(21,93,252,.12)",
@@ -445,6 +458,7 @@ export const light = {
   controlPx: "12px",
   controlText: "14px",
   controlTracking: "-.15px",
+  countH: "18px",
   cyan100: "#d1f4fc",
   cyan200: "#a4eaf9",
   cyan300: "#57daf3",
@@ -493,7 +507,7 @@ export const light = {
   fontSans: "'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif",
   groupGap: "16px",
   hButton: "32px",
-  hButtonSm: "24px",
+  hButtonSm: "28px",
   hInput: "32px",
   hNavItem: "36px",
   hSubnavItem: "32px",
@@ -525,6 +539,7 @@ export const light = {
   leading3xl: "46px",
   leading4xl: "56px",
   leadingBase: "20px",
+  leadingCode: "18px",
   leadingDisplay: "68px",
   leadingLg: "28px",
   leadingMd: "24px",
@@ -570,7 +585,7 @@ export const light = {
   orange950: "#461700",
   overlayDrag: "rgba(21,93,252,.12)",
   overlayHover: "rgba(10,10,10,.04)",
-  overlayPress: "rgba(10,10,10,.08)",
+  overlayPress: "rgba(10,10,10,.12)",
   overlaySelected: "rgba(21,93,252,.08)",
   pagePadX: "32px",
   pagePadY: "24px",
@@ -664,11 +679,14 @@ export const light = {
   teal950: "#002f2a",
   text2xl: "30px",
   text2xs: "11px",
+  text2xsMono: "11px",
   text3xl: "38px",
   text4xl: "48px",
   textBase: "14px",
   textBody: "#525252",
+  textCode: "12px",
   textDisplay: "60px",
+  textGlyphMin: "11px",
   textHeading: "#171717",
   textInverse: "#ffffff",
   textLg: "20px",
@@ -681,6 +699,12 @@ export const light = {
   textStrong: "#404040",
   textXl: "24px",
   textXs: "12px",
+  titleCellGap: "2px",
+  titleCellIcon: "16px",
+  titleCellPy: "10px",
+  titleCellTile: "32px",
+  titleCellTileGap: "12px",
+  titleCellTileR: "8px",
   tooltipBg: "#171717",
   tooltipFg: "#ffffff",
   topbarH: "56px",
@@ -755,6 +779,7 @@ export const dark = {
   blue950: "#162456",
   borderCard: "rgba(255,255,255,.09)",
   borderControl: "#333333",
+  borderSplit: "#404040",
   borderStrong: "#454545",
   borderSubtle: "#242424",
   brandAlpha12: "rgba(43,127,255,.14)",
@@ -800,6 +825,7 @@ export const dark = {
   controlPx: "12px",
   controlText: "14px",
   controlTracking: "-.15px",
+  countH: "18px",
   cyan100: "#d1f4fc",
   cyan200: "#a4eaf9",
   cyan300: "#57daf3",
@@ -848,7 +874,7 @@ export const dark = {
   fontSans: "'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif",
   groupGap: "16px",
   hButton: "32px",
-  hButtonSm: "24px",
+  hButtonSm: "28px",
   hInput: "32px",
   hNavItem: "36px",
   hSubnavItem: "32px",
@@ -880,6 +906,7 @@ export const dark = {
   leading3xl: "46px",
   leading4xl: "56px",
   leadingBase: "20px",
+  leadingCode: "18px",
   leadingDisplay: "68px",
   leadingLg: "28px",
   leadingMd: "24px",
@@ -924,8 +951,8 @@ export const dark = {
   orange900: "#612300",
   orange950: "#461700",
   overlayDrag: "rgba(43,127,255,.14)",
-  overlayHover: "rgba(255,255,255,.04)",
-  overlayPress: "rgba(255,255,255,.08)",
+  overlayHover: "rgba(255,255,255,.08)",
+  overlayPress: "rgba(255,255,255,.16)",
   overlaySelected: "rgba(43,127,255,.1)",
   pagePadX: "32px",
   pagePadY: "24px",
@@ -1019,11 +1046,14 @@ export const dark = {
   teal950: "#002f2a",
   text2xl: "30px",
   text2xs: "11px",
+  text2xsMono: "11px",
   text3xl: "38px",
   text4xl: "48px",
   textBase: "14px",
   textBody: "#d4d4d4",
+  textCode: "12px",
   textDisplay: "60px",
+  textGlyphMin: "11px",
   textHeading: "#f5f5f5",
   textInverse: "#0a0a0a",
   textLg: "20px",
@@ -1036,6 +1066,12 @@ export const dark = {
   textStrong: "#e5e5e5",
   textXl: "24px",
   textXs: "12px",
+  titleCellGap: "2px",
+  titleCellIcon: "16px",
+  titleCellPy: "10px",
+  titleCellTile: "32px",
+  titleCellTileGap: "12px",
+  titleCellTileR: "8px",
   tooltipBg: "#f5f5f5",
   tooltipFg: "#0a0a0a",
   topbarH: "56px",
@@ -1067,6 +1103,6 @@ export const dark = {
   zTooltip: "100",
 };
 
-export const tokenNames = ["--action-dark","--action-dark-active","--action-dark-fg","--action-dark-hover","--action-primary","--action-primary-active","--action-primary-hover","--amber-100","--amber-200","--amber-300","--amber-400","--amber-50","--amber-500","--amber-600","--amber-700","--amber-800","--amber-900","--amber-950","--bar-card-h","--bar-h","--bg-active","--bg-app","--bg-hover","--bg-inset","--bg-press","--bg-raised","--bg-scrim","--bg-surface","--bg-table-header","--blue-100","--blue-200","--blue-300","--blue-400","--blue-50","--blue-500","--blue-600","--blue-700","--blue-800","--blue-900","--blue-950","--border-card","--border-control","--border-strong","--border-subtle","--brand-alpha-12","--brand-alpha-16","--brand-alpha-24","--brand-alpha-32","--brand-alpha-8","--card-pad","--card-pad-sm","--cat-join","--cat-join-bg","--cat-merge","--cat-merge-bg","--cat-output","--cat-output-bg","--cat-source","--cat-source-bg","--cat-transform","--cat-transform-bg","--cell-px","--chart-area-alpha","--chart-axis","--chart-blue","--chart-grid","--chart-guide","--chart-heat-1","--chart-heat-2","--chart-heat-3","--chart-heat-4","--chart-heat-5","--chart-heat-ink","--chart-label","--chart-neg","--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","--cyan-400","--cyan-50","--cyan-500","--cyan-600","--cyan-700","--cyan-800","--cyan-900","--cyan-950","--danger","--danger-active","--danger-bg","--danger-soft-active","--danger-soft-hover","--danger-text","--dot-neutral","--drawer-h","--dropzone-border","--dropzone-border-hover","--dur","--dur-fast","--dur-instant","--dur-slow","--dur-slower","--ease-in","--ease-in-out","--ease-out","--edge","--edge-pad","--emerald-100","--emerald-200","--emerald-300","--emerald-400","--emerald-50","--emerald-500","--emerald-600","--emerald-700","--emerald-800","--emerald-900","--emerald-950","--focus-border","--focus-ring","--font-mono","--font-sans","--group-gap","--h-button","--h-button-sm","--h-input","--h-nav-item","--h-subnav-item","--h-tree-item","--hue-amber-bg","--hue-amber-fg","--hue-blue-bg","--hue-blue-fg","--hue-cyan-bg","--hue-cyan-fg","--hue-gray-bg","--hue-gray-fg","--hue-green-bg","--hue-green-fg","--hue-orange-bg","--hue-orange-fg","--hue-pink-bg","--hue-pink-fg","--hue-purple-bg","--hue-purple-fg","--hue-red-bg","--hue-red-fg","--hue-teal-bg","--hue-teal-fg","--info-bg","--info-fg","--leading-2xl","--leading-2xs","--leading-3xl","--leading-4xl","--leading-base","--leading-display","--leading-lg","--leading-md","--leading-num","--leading-sm","--leading-xl","--leading-xs","--link","--link-hover","--neutral-0","--neutral-100","--neutral-200","--neutral-300","--neutral-400","--neutral-50","--neutral-500","--neutral-600","--neutral-700","--neutral-800","--neutral-900","--neutral-950","--neutral-alpha-12","--neutral-alpha-16","--neutral-alpha-2","--neutral-alpha-24","--neutral-alpha-32","--neutral-alpha-4","--neutral-alpha-48","--neutral-alpha-64","--neutral-alpha-8","--neutral-alpha-80","--on-accent","--orange-100","--orange-200","--orange-300","--orange-400","--orange-50","--orange-500","--orange-600","--orange-700","--orange-800","--orange-900","--orange-950","--overlay-drag","--overlay-hover","--overlay-press","--overlay-selected","--page-pad-x","--page-pad-y","--panel-w","--pink-100","--pink-200","--pink-300","--pink-400","--pink-50","--pink-500","--pink-600","--pink-700","--pink-800","--pink-900","--pink-950","--port-border","--press-filter","--press-filter-strong","--purple-100","--purple-200","--purple-300","--purple-400","--purple-50","--purple-500","--purple-600","--purple-700","--purple-800","--purple-900","--purple-950","--radius-full","--radius-lg","--radius-md","--radius-node","--radius-sm","--radius-tile","--rail-w","--red-100","--red-200","--red-300","--red-400","--red-50","--red-500","--red-600","--red-700","--red-800","--red-900","--red-950","--ring-focus","--ring-surface","--section-gap","--selected-border","--series-1","--series-10","--series-2","--series-3","--series-4","--series-5","--series-6","--series-7","--series-8","--series-9","--shadow-menu","--shadow-modal","--shadow-node","--shadow-selected","--sidebar-w","--skeleton","--soft-active","--soft-bg","--soft-border","--soft-hover","--success","--success-bg","--success-strong","--success-text","--switch-h","--switch-w","--t-hover","--t-theme","--tag-h","--teal-100","--teal-200","--teal-300","--teal-400","--teal-50","--teal-500","--teal-600","--teal-700","--teal-800","--teal-900","--teal-950","--text-2xl","--text-2xs","--text-3xl","--text-4xl","--text-base","--text-body","--text-display","--text-heading","--text-inverse","--text-lg","--text-md","--text-muted","--text-num","--text-primary","--text-secondary","--text-sm","--text-strong","--text-xl","--text-xs","--tooltip-bg","--tooltip-fg","--topbar-h","--track","--tracking-2xl","--tracking-2xs","--tracking-3xl","--tracking-4xl","--tracking-base","--tracking-display","--tracking-lg","--tracking-md","--tracking-num","--tracking-sm","--tracking-xl","--tracking-xs","--warning","--warning-bg","--warning-text","--weight-light","--weight-medium","--weight-regular","--weight-semibold","--z-drawer","--z-menu","--z-modal","--z-sticky","--z-toast","--z-tooltip"];
+export const tokenNames = ["--action-dark","--action-dark-active","--action-dark-fg","--action-dark-hover","--action-primary","--action-primary-active","--action-primary-hover","--amber-100","--amber-200","--amber-300","--amber-400","--amber-50","--amber-500","--amber-600","--amber-700","--amber-800","--amber-900","--amber-950","--bar-card-h","--bar-h","--bg-active","--bg-app","--bg-hover","--bg-inset","--bg-press","--bg-raised","--bg-scrim","--bg-surface","--bg-table-header","--blue-100","--blue-200","--blue-300","--blue-400","--blue-50","--blue-500","--blue-600","--blue-700","--blue-800","--blue-900","--blue-950","--border-card","--border-control","--border-split","--border-strong","--border-subtle","--brand-alpha-12","--brand-alpha-16","--brand-alpha-24","--brand-alpha-32","--brand-alpha-8","--card-pad","--card-pad-sm","--cat-join","--cat-join-bg","--cat-merge","--cat-merge-bg","--cat-output","--cat-output-bg","--cat-source","--cat-source-bg","--cat-transform","--cat-transform-bg","--cell-px","--chart-area-alpha","--chart-axis","--chart-blue","--chart-grid","--chart-guide","--chart-heat-1","--chart-heat-2","--chart-heat-3","--chart-heat-4","--chart-heat-5","--chart-heat-ink","--chart-label","--chart-neg","--chart-pos","--chart-total","--chart-track","--check-size","--checkbox-border","--control-gap","--control-h","--control-icon","--control-leading","--control-px","--control-text","--control-tracking","--count-h","--cyan-100","--cyan-200","--cyan-300","--cyan-400","--cyan-50","--cyan-500","--cyan-600","--cyan-700","--cyan-800","--cyan-900","--cyan-950","--danger","--danger-active","--danger-bg","--danger-soft-active","--danger-soft-hover","--danger-text","--dot-neutral","--drawer-h","--dropzone-border","--dropzone-border-hover","--dur","--dur-fast","--dur-instant","--dur-slow","--dur-slower","--ease-in","--ease-in-out","--ease-out","--edge","--edge-pad","--emerald-100","--emerald-200","--emerald-300","--emerald-400","--emerald-50","--emerald-500","--emerald-600","--emerald-700","--emerald-800","--emerald-900","--emerald-950","--focus-border","--focus-ring","--font-mono","--font-sans","--group-gap","--h-button","--h-button-sm","--h-input","--h-nav-item","--h-subnav-item","--h-tree-item","--hue-amber-bg","--hue-amber-fg","--hue-blue-bg","--hue-blue-fg","--hue-cyan-bg","--hue-cyan-fg","--hue-gray-bg","--hue-gray-fg","--hue-green-bg","--hue-green-fg","--hue-orange-bg","--hue-orange-fg","--hue-pink-bg","--hue-pink-fg","--hue-purple-bg","--hue-purple-fg","--hue-red-bg","--hue-red-fg","--hue-teal-bg","--hue-teal-fg","--info-bg","--info-fg","--leading-2xl","--leading-2xs","--leading-3xl","--leading-4xl","--leading-base","--leading-code","--leading-display","--leading-lg","--leading-md","--leading-num","--leading-sm","--leading-xl","--leading-xs","--link","--link-hover","--neutral-0","--neutral-100","--neutral-200","--neutral-300","--neutral-400","--neutral-50","--neutral-500","--neutral-600","--neutral-700","--neutral-800","--neutral-900","--neutral-950","--neutral-alpha-12","--neutral-alpha-16","--neutral-alpha-2","--neutral-alpha-24","--neutral-alpha-32","--neutral-alpha-4","--neutral-alpha-48","--neutral-alpha-64","--neutral-alpha-8","--neutral-alpha-80","--on-accent","--orange-100","--orange-200","--orange-300","--orange-400","--orange-50","--orange-500","--orange-600","--orange-700","--orange-800","--orange-900","--orange-950","--overlay-drag","--overlay-hover","--overlay-press","--overlay-selected","--page-pad-x","--page-pad-y","--panel-w","--pink-100","--pink-200","--pink-300","--pink-400","--pink-50","--pink-500","--pink-600","--pink-700","--pink-800","--pink-900","--pink-950","--port-border","--press-filter","--press-filter-strong","--purple-100","--purple-200","--purple-300","--purple-400","--purple-50","--purple-500","--purple-600","--purple-700","--purple-800","--purple-900","--purple-950","--radius-full","--radius-lg","--radius-md","--radius-node","--radius-sm","--radius-tile","--rail-w","--red-100","--red-200","--red-300","--red-400","--red-50","--red-500","--red-600","--red-700","--red-800","--red-900","--red-950","--ring-focus","--ring-surface","--section-gap","--selected-border","--series-1","--series-10","--series-2","--series-3","--series-4","--series-5","--series-6","--series-7","--series-8","--series-9","--shadow-menu","--shadow-modal","--shadow-node","--shadow-selected","--sidebar-w","--skeleton","--soft-active","--soft-bg","--soft-border","--soft-hover","--success","--success-bg","--success-strong","--success-text","--switch-h","--switch-w","--t-hover","--t-theme","--tag-h","--teal-100","--teal-200","--teal-300","--teal-400","--teal-50","--teal-500","--teal-600","--teal-700","--teal-800","--teal-900","--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","--text-md","--text-muted","--text-num","--text-primary","--text-secondary","--text-sm","--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","--track","--tracking-2xl","--tracking-2xs","--tracking-3xl","--tracking-4xl","--tracking-base","--tracking-display","--tracking-lg","--tracking-md","--tracking-num","--tracking-sm","--tracking-xl","--tracking-xs","--warning","--warning-bg","--warning-text","--weight-light","--weight-medium","--weight-regular","--weight-semibold","--z-drawer","--z-menu","--z-modal","--z-sticky","--z-toast","--z-tooltip"];
 
 export default { cssVar, light, dark, tokenNames };

package/tokens/tokens.json

@@ -1,6 +1,6 @@
 {
   "name": "@keyfunc/keybricks-ds",
-  "version": "2.1.1",
+  "version": "2.4.0",
   "source": "tokens/*.css",
   "note": "Generated by _scripts/build-tokens.mjs — CSS is the source of truth.",
   "tokens": {
@@ -370,6 +370,17 @@
         "value": "#333333"
       }
     },
+    "--border-split": {
+      "group": "colors",
+      "light": {
+        "raw": "var(--neutral-300)",
+        "value": "#d4d4d4"
+      },
+      "dark": {
+        "raw": "#404040",
+        "value": "#404040"
+      }
+    },
     "--border-strong": {
       "group": "colors",
       "light": {
@@ -821,6 +832,13 @@
         "value": "-.15px"
       }
     },
+    "--count-h": {
+      "group": "layout",
+      "light": {
+        "raw": "18px",
+        "value": "18px"
+      }
+    },
     "--cyan-100": {
       "group": "colors-extended",
       "light": {
@@ -1208,8 +1226,8 @@
     "--h-button-sm": {
       "group": "layout",
       "light": {
-        "raw": "24px",
-        "value": "24px"
+        "raw": "28px",
+        "value": "28px"
       }
     },
     "--h-input": {
@@ -1517,6 +1535,13 @@
         "value": "20px"
       }
     },
+    "--leading-code": {
+      "group": "typography",
+      "light": {
+        "raw": "18px",
+        "value": "18px"
+      }
+    },
     "--leading-display": {
       "group": "typography",
       "light": {
@@ -1889,21 +1914,19 @@
         "value": "rgba(10,10,10,.04)"
       },
       "dark": {
-        "raw": "var(--neutral-alpha-4)",
-        "value": "rgba(255,255,255,.04)",
-        "inherited": true
+        "raw": "var(--neutral-alpha-8)",
+        "value": "rgba(255,255,255,.08)"
       }
     },
     "--overlay-press": {
       "group": "alpha",
       "light": {
-        "raw": "var(--neutral-alpha-8)",
-        "value": "rgba(10,10,10,.08)"
+        "raw": "var(--neutral-alpha-12)",
+        "value": "rgba(10,10,10,.12)"
       },
       "dark": {
-        "raw": "var(--neutral-alpha-8)",
-        "value": "rgba(255,255,255,.08)",
-        "inherited": true
+        "raw": "var(--neutral-alpha-16)",
+        "value": "rgba(255,255,255,.16)"
       }
     },
     "--overlay-selected": {
@@ -2684,6 +2707,13 @@
         "value": "11px"
       }
     },
+    "--text-2xs-mono": {
+      "group": "typography",
+      "light": {
+        "raw": "11px",
+        "value": "11px"
+      }
+    },
     "--text-3xl": {
       "group": "typography",
       "light": {
@@ -2716,6 +2746,13 @@
         "value": "#d4d4d4"
       }
     },
+    "--text-code": {
+      "group": "typography",
+      "light": {
+        "raw": "12px",
+        "value": "12px"
+      }
+    },
     "--text-display": {
       "group": "typography",
       "light": {
@@ -2723,6 +2760,13 @@
         "value": "60px"
       }
     },
+    "--text-glyph-min": {
+      "group": "typography",
+      "light": {
+        "raw": "11px",
+        "value": "11px"
+      }
+    },
     "--text-heading": {
       "group": "colors",
       "light": {
@@ -2831,6 +2875,48 @@
         "value": "12px"
       }
     },
+    "--title-cell-gap": {
+      "group": "layout",
+      "light": {
+        "raw": "2px",
+        "value": "2px"
+      }
+    },
+    "--title-cell-icon": {
+      "group": "layout",
+      "light": {
+        "raw": "16px",
+        "value": "16px"
+      }
+    },
+    "--title-cell-py": {
+      "group": "layout",
+      "light": {
+        "raw": "10px",
+        "value": "10px"
+      }
+    },
+    "--title-cell-tile": {
+      "group": "layout",
+      "light": {
+        "raw": "32px",
+        "value": "32px"
+      }
+    },
+    "--title-cell-tile-gap": {
+      "group": "layout",
+      "light": {
+        "raw": "12px",
+        "value": "12px"
+      }
+    },
+    "--title-cell-tile-r": {
+      "group": "layout",
+      "light": {
+        "raw": "8px",
+        "value": "8px"
+      }
+    },
     "--tooltip-bg": {
       "group": "colors",
       "light": {

package/tokens/typography.css

@@ -3,10 +3,13 @@
    Control text (--control-text) is defined per size tier in layout.css and points back into this ladder. */
 :root{
 --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
---font-mono:Menlo,ui-monospace,'SF Mono',Consolas,monospace;
+--font-mono:Menlo,ui-monospace,'SF Mono',Consolas,monospace;   /* code only: code blocks, logs, inline code and config-code chips — never IDs or amounts in the UI */
 /* size / line-height / letter-spacing triples — always set all three together */
---text-2xs:11px;--leading-2xs:16px;--tracking-2xs:.064px;        /* chart tick labels only — nothing in the system is smaller   */
---text-xs:12px;--leading-xs:16px;--tracking-xs:0;                /* captions, helper text, badges, tags, meta; sm-tier control text */
+--text-2xs:11px;--leading-2xs:16px;--tracking-2xs:.064px;        /* chart text only — nothing in the system is smaller; 12px in CJK */
+--text-2xs-mono:11px;
+--text-code:12px;--leading-code:18px;                            /* config-code chips (Table `code` columns): Latin, so not bumped in CJK; 11/16 in sm */
+--text-glyph-min:11px;                                           /* floor for text sized from geometry (switch inside text, avatar initials); 12px in CJK */                                            /* chart numerals (UI font, tabular figures; name kept for compatibility): Latin digits, so they stay 11px in CJK too */
+--text-xs:12px;--leading-xs:16px;--tracking-xs:0;                /* captions, helper text, badges, tags, meta; sm-tier control text — 13px in CJK */
 --text-sm:12px;--leading-sm:16px;--tracking-sm:0;                /* alias of --text-xs kept for compatibility — prefer --text-xs */
 --text-base:14px;--leading-base:20px;--tracking-base:-.15px;     /* body, md/lg controls, labels, table cells */
 --text-md:16px;--leading-md:24px;--tracking-md:-.28px;           /* section headings, panel / card / dialog titles */
@@ -20,16 +23,30 @@
 --text-display:60px;--leading-display:68px;--tracking-display:-1.35px; /* slides, covers */
 --weight-light:300;--weight-regular:400;--weight-medium:500;--weight-semibold:600;
 }
-/* Chinese, Japanese and Korean. Han, kana and Hangul have no capitals and no italics, so emphasis is
-   weight — and Microsoft YaHei, Meiryo, Yu Gothic UI and Malgun Gothic ship no 500 face, which turns
-   weight 500 into Regular on Windows. In these languages the medium weight is therefore 600 (a real
-   Semibold/Bold in every system CJK font) and Latin tracking is switched off. Set lang on <html> or on
-   the region; every Keybricks component re-reads --font-sans so a per-region switch works too. */
+/* Chinese (Simplified and Traditional), Japanese and Korean — one rule for all square scripts.
+   A square glyph carries far more strokes than a Latin letter, so the same numeric weight reads heavier:
+   PingFang 600 beside Inter 500 looks a full step bolder, and 600 everywhere flattens labels and headers
+   into one weight. CJK therefore uses 500 (PingFang / Hiragino / Apple SD Gothic Neo Medium) for both
+   --weight-medium and --weight-semibold, and Latin tracking is switched off. Microsoft YaHei, Meiryo,
+   Yu Gothic UI and Malgun Gothic ship no 500 face, so on Windows these render Regular — hierarchy there
+   comes from size, colour and the header fill.
+   Small sizes are one step larger than Latin: a 12px square glyph has about 11 device pixels for up to
+   8 horizontal strokes, which a 1x display cannot resolve. 12 → 13 (leading 18) and 11 → 12, so nothing
+   CJK renders below 12px. 14px and up are unchanged. In sm regions (13px CJK text) the medium weight
+   drops back to 400, because bold strokes merge at that size.
+   Set lang on <html> or on the region; every Keybricks component re-reads --font-sans so a per-region
+   switch works too. */
 [lang|="zh"]{--font-sans:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
 [lang|="ja"]{--font-sans:'Inter','Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic UI','Meiryo','Noto Sans JP',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
 [lang|="ko"]{--font-sans:'Inter','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
 :lang(zh),:lang(ja),:lang(ko){font-family:var(--font-sans)}
-[lang|="zh"],[lang|="ja"],[lang|="ko"]{--weight-medium:600;
+[lang|="zh"],[lang|="ja"],[lang|="ko"]{--weight-medium:500;--weight-semibold:500;
+--text-glyph-min:12px;--text-2xs:12px;--text-xs:13px;--leading-xs:18px;--text-sm:13px;--leading-sm:18px;
 --tracking-2xs:0;--tracking-xs:0;--tracking-sm:0;--tracking-base:0;--tracking-md:0;--tracking-lg:0;--tracking-xl:0;--tracking-num:0;--tracking-2xl:0;--tracking-3xl:0;--tracking-4xl:0;--tracking-display:0}
+/* sm tier in CJK: 13px text at regular weight. The second rule re-derives the tier's control text on a
+   lang element inside an sm region (a tier token resolves where it is declared, not where it is read). */
+:is([lang|="zh"],[lang|="ja"],[lang|="ko"])[data-size="sm"],:is([lang|="zh"],[lang|="ja"],[lang|="ko"]) [data-size="sm"]{--weight-medium:400}
+[data-size="sm"] :is([lang|="zh"],[lang|="ja"],[lang|="ko"]){--control-text:var(--text-xs);--control-leading:var(--leading-xs);--weight-medium:400}
+:is([lang|="zh"],[lang|="ja"],[lang|="ko"]) :is([data-size="md"],[data-size="lg"]){--weight-medium:500}
 body{font-family:var(--font-sans);color:var(--text-primary);-webkit-font-smoothing:antialiased}
 a{color:var(--link);text-decoration:none}a:hover{color:var(--link-hover)}