@keyfunc/keybricks-ds 2.1.1 → 2.3.1

package/tokens/tokens.json

@@ -1,6 +1,6 @@
 {
   "name": "@keyfunc/keybricks-ds",
-  "version": "2.1.1",
+  "version": "2.3.1",
   "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": {
@@ -1208,8 +1219,8 @@
     "--h-button-sm": {
       "group": "layout",
       "light": {
-        "raw": "24px",
-        "value": "24px"
+        "raw": "28px",
+        "value": "28px"
       }
     },
     "--h-input": {
@@ -1517,6 +1528,13 @@
         "value": "20px"
       }
     },
+    "--leading-code": {
+      "group": "typography",
+      "light": {
+        "raw": "18px",
+        "value": "18px"
+      }
+    },
     "--leading-display": {
       "group": "typography",
       "light": {
@@ -1889,21 +1907,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 +2700,13 @@
         "value": "11px"
       }
     },
+    "--text-2xs-mono": {
+      "group": "typography",
+      "light": {
+        "raw": "11px",
+        "value": "11px"
+      }
+    },
     "--text-3xl": {
       "group": "typography",
       "light": {
@@ -2716,6 +2739,13 @@
         "value": "#d4d4d4"
       }
     },
+    "--text-code": {
+      "group": "typography",
+      "light": {
+        "raw": "12px",
+        "value": "12px"
+      }
+    },
     "--text-display": {
       "group": "typography",
       "light": {
@@ -2723,6 +2753,13 @@
         "value": "60px"
       }
     },
+    "--text-glyph-min": {
+      "group": "typography",
+      "light": {
+        "raw": "11px",
+        "value": "11px"
+      }
+    },
     "--text-heading": {
       "group": "colors",
       "light": {
@@ -2831,6 +2868,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)}