|
@@ -169,17 +169,14 @@ export const TOKENS_CSS = `:root, :host {
|
|
|
--fw-body: 400; --fw-medium: 500; --fw-bold: 600;
|
|
--fw-body: 400; --fw-medium: 500; --fw-bold: 600;
|
|
|
|
|
|
|
|
/* ===== 中文排版(v11 板块一)=====
|
|
/* ===== 中文排版(v11 板块一)=====
|
|
|
- 1.1 text-box 行盒修剪:中文字体自带半行距,padding 16px 的实际视觉留白是 16 + 半行距(约 0.4em),
|
|
|
|
|
- 永远对不准 4pt 栅格。单行文本容器统一裁到 cap→alphabetic(40px 中文行盒 55 → 30px)。
|
|
|
|
|
- 禁用于多行正文(会破坏行距)。
|
|
|
|
|
|
|
+ 1.1 中文保留完整行盒。拉丁 cap→alphabetic 的裁剪高度小于汉字字面,
|
|
|
|
|
+ 与 overflow/line-clamp 叠加时会裁掉上下笔画;间距由 padding 和 line-height 控制。
|
|
|
1.5 行高层级:正文 1.75(CLReq 行间隙取 50%–100% 中位);标题 1.3;大数字 1。
|
|
1.5 行高层级:正文 1.75(CLReq 行间隙取 50%–100% 中位);标题 1.3;大数字 1。
|
|
|
字距:正文 0(中文是满格方块,加字距反而散);11–13px 全中文小标题 +0.02em;≥28px 大标题 -0.02em;
|
|
字距:正文 0(中文是满格方块,加字距反而散);11–13px 全中文小标题 +0.02em;≥28px 大标题 -0.02em;
|
|
|
中文负字距上限 -0.03em,超过笔画粘连(西文可用 -4.75%,中文不行)。 */
|
|
中文负字距上限 -0.03em,超过笔画粘连(西文可用 -4.75%,中文不行)。 */
|
|
|
--lh-body: 1.75; --lh-card: 1.6; --lh-title: 1.3;
|
|
--lh-body: 1.75; --lh-card: 1.6; --lh-title: 1.3;
|
|
|
--ls-cn-small: 0.02em; --ls-cn-body: 0; --ls-cn-display: -0.02em;
|
|
--ls-cn-small: 0.02em; --ls-cn-body: 0; --ls-cn-display: -0.02em;
|
|
|
- /* v11b:trim 只写两个**独立长属性**。简写 text-box: trim-both cap alphabetic 在 Chrome 153 被整条丢弃
|
|
|
|
|
- (computed 只剩 cap alphabetic,行盒 32px 不缩);长属性写法实测 .b 行盒 32 → 20.95px。 */
|
|
|
|
|
- --tb-trim: trim-both; --tb-edge: cap alphabetic;
|
|
|
|
|
|
|
+ --tb-trim: none; --tb-edge: auto;
|
|
|
|
|
|
|
|
/* 间距层级(v11b 第三/四节,四档,可按跨级关系校验):卡内 16 / 卡内元素 12 / 卡间 24 / 区块间 48 / 页顶→首块 16 */
|
|
/* 间距层级(v11b 第三/四节,四档,可按跨级关系校验):卡内 16 / 卡内元素 12 / 卡间 24 / 区块间 48 / 页顶→首块 16 */
|
|
|
--kf-space-card: 16px; --kf-space-in: 12px; --kf-space-card-gap: 24px; --kf-space-section: 48px; --kf-space-top: 16px;
|
|
--kf-space-card: 16px; --kf-space-in: 12px; --kf-space-card-gap: 24px; --kf-space-section: 48px; --kf-space-top: 16px;
|
|
@@ -369,7 +366,7 @@ summary:focus:not(:focus-visible), [tabindex]:focus:not(:focus-visible) { outlin
|
|
|
border: 1px solid var(--kf-line-soft);
|
|
border: 1px solid var(--kf-line-soft);
|
|
|
background: var(--kf-surface-btn);
|
|
background: var(--kf-surface-btn);
|
|
|
color: var(--kf-ink); font: 500 14px/1 var(--kf-font); cursor: pointer;
|
|
color: var(--kf-ink); font: 500 14px/1 var(--kf-font); cursor: pointer;
|
|
|
- text-box-trim: trim-both; text-box-edge: cap alphabetic;
|
|
|
|
|
|
|
+ text-box-trim: none; text-box-edge: auto;
|
|
|
transition: var(--kf-t);
|
|
transition: var(--kf-t);
|
|
|
}
|
|
}
|
|
|
.kf-btn:hover { background: #fff; border-color: rgba(0, 0, 0, 0.14); }
|
|
.kf-btn:hover { background: #fff; border-color: rgba(0, 0, 0, 0.14); }
|
|
@@ -391,7 +388,7 @@ summary:focus:not(:focus-visible), [tabindex]:focus:not(:focus-visible) { outlin
|
|
|
border-radius: var(--r-sm); border: 1px solid var(--kf-line-soft);
|
|
border-radius: var(--r-sm); border: 1px solid var(--kf-line-soft);
|
|
|
background: var(--kf-surface);
|
|
background: var(--kf-surface);
|
|
|
font: 500 14px/1 var(--kf-font); color: var(--kf-ink-2); cursor: pointer;
|
|
font: 500 14px/1 var(--kf-font); color: var(--kf-ink-2); cursor: pointer;
|
|
|
- text-box-trim: trim-both; text-box-edge: cap alphabetic;
|
|
|
|
|
|
|
+ text-box-trim: none; text-box-edge: auto;
|
|
|
transition: var(--kf-t);
|
|
transition: var(--kf-t);
|
|
|
}
|
|
}
|
|
|
.kf-chip:hover { background: var(--kf-surface-btn); border-color: rgba(0, 0, 0, 0.14); color: var(--kf-ink); }
|
|
.kf-chip:hover { background: var(--kf-surface-btn); border-color: rgba(0, 0, 0, 0.14); color: var(--kf-ink); }
|
|
@@ -404,7 +401,7 @@ summary:focus:not(:focus-visible), [tabindex]:focus:not(:focus-visible) { outlin
|
|
|
.kf-muted { color: var(--kf-ink-3); }
|
|
.kf-muted { color: var(--kf-ink-3); }
|
|
|
.kf-num, .kf-mono { font-variant-numeric: tabular-nums; }
|
|
.kf-num, .kf-mono { font-variant-numeric: tabular-nums; }
|
|
|
.kf-mono { font-family: var(--kf-mono); }
|
|
.kf-mono { font-family: var(--kf-mono); }
|
|
|
-.kf-kicker { font-size: var(--fs-xs); line-height: 1.3; letter-spacing: var(--ls-cn-small); color: var(--kf-ink-3); font-weight: var(--fw-medium); text-box-trim: trim-both; text-box-edge: cap alphabetic; }
|
|
|
|
|
|
|
+.kf-kicker { font-size: var(--fs-xs); line-height: 1.3; letter-spacing: var(--ls-cn-small); color: var(--kf-ink-3); font-weight: var(--fw-medium); }
|
|
|
.kf-title { color: var(--kf-ink); font-weight: var(--fw-bold); letter-spacing: -0.01em; line-height: 1.3; }
|
|
.kf-title { color: var(--kf-ink); font-weight: var(--fw-bold); letter-spacing: -0.01em; line-height: 1.3; }
|
|
|
/* 主数值:32 / 600 / 1.1 / -0.02em / tabular-nums —— 决定「高管级」观感的那一档 */
|
|
/* 主数值:32 / 600 / 1.1 / -0.02em / tabular-nums —— 决定「高管级」观感的那一档 */
|
|
|
.kf-metric { font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: 1.1; letter-spacing: -0.02em;
|
|
.kf-metric { font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: 1.1; letter-spacing: -0.02em;
|
|
@@ -415,11 +412,10 @@ summary:focus:not(:focus-visible), [tabindex]:focus:not(:focus-visible) { outlin
|
|
|
/* ============================================================
|
|
/* ============================================================
|
|
|
* 中文排版工具类(v11 板块一)
|
|
* 中文排版工具类(v11 板块一)
|
|
|
* ============================================================ */
|
|
* ============================================================ */
|
|
|
-/* 1.1 单行文本容器:行盒修剪(只用于单行;多行正文禁用,会破坏行距)。
|
|
|
|
|
- 用 text-box-trim / text-box-edge 两个长属性,不用 text-box 简写(v11b 实测简写被 Chrome 丢弃 trim-both)。 */
|
|
|
|
|
-.tb-cap, .kf-title, .kf-metric, .kf-metric-label, .kf-kicker, .kf-btn, .kf-chip,
|
|
|
|
|
|
|
+/* 中文标题与控件保留字面高度;纯数字的紧凑度由数值组件单独控制。 */
|
|
|
|
|
+.tb-cap, .kf-title, .kf-metric-label, .kf-kicker, .kf-btn, .kf-chip,
|
|
|
h1, h2, h3 {
|
|
h1, h2, h3 {
|
|
|
- text-box-trim: trim-both; text-box-edge: cap alphabetic;
|
|
|
|
|
|
|
+ text-box-trim: none; text-box-edge: auto;
|
|
|
}
|
|
}
|
|
|
.kf-title { letter-spacing: var(--ls-cn-display); line-height: 1.25; }
|
|
.kf-title { letter-spacing: var(--ls-cn-display); line-height: 1.25; }
|
|
|
/* 1.2 单位分层:小一号、灰一档、留 0.12em —— 数字成为视觉主角 */
|
|
/* 1.2 单位分层:小一号、灰一档、留 0.12em —— 数字成为视觉主角 */
|