@xihan-ui/styles 2.0.0 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +101 -0
- package/component-tokens.d.ts +0 -15
- package/components.tokens.json +65 -396
- package/css/accordion.css +6 -6
- package/css/alert.css +2 -2
- package/css/anchor.css +3 -3
- package/css/approval.css +8 -8
- package/css/back-top.css +2 -2
- package/css/badge.css +1 -1
- package/css/breadcrumb.css +1 -1
- package/css/button-group.css +1 -1
- package/css/button.css +2 -2
- package/css/calendar-picker.css +8 -8
- package/css/calendar-range-picker.css +9 -9
- package/css/card.css +1 -1
- package/css/carousel.css +6 -6
- package/css/cascader.css +3 -5
- package/css/checkbox-group.css +10 -10
- package/css/checkbox.css +5 -5
- package/css/clipboard.css +4 -4
- package/css/code-view.css +2 -2
- package/css/collapsible.css +4 -4
- package/css/color-picker.css +2 -4
- package/css/color-slider.css +4 -4
- package/css/color-swatch-picker.css +5 -5
- package/css/combobox.css +2 -4
- package/css/command.css +3 -5
- package/css/context-menu.css +4 -6
- package/css/date-picker.css +0 -2
- package/css/date-range-picker.css +0 -2
- package/css/descriptions.css +1 -1
- package/css/dialog.css +5 -7
- package/css/diff-view.css +4 -4
- package/css/download-trigger.css +3 -3
- package/css/drawer.css +9 -15
- package/css/empty-state.css +1 -1
- package/css/field.css +1 -1
- package/css/fieldset.css +1 -1
- package/css/file-upload.css +1 -1
- package/css/float-button.css +3 -3
- package/css/floating-panel.css +6 -8
- package/css/form.css +3 -3
- package/css/heatmap.css +1 -1
- package/css/hover-card.css +2 -4
- package/css/image-cropper.css +2 -2
- package/css/image-viewer.css +2 -4
- package/css/infinite-scroll.css +2 -2
- package/css/input-group.css +2 -2
- package/css/json-viewer.css +5 -5
- package/css/kbd.css +1 -1
- package/css/layout.css +3 -3
- package/css/list.css +1 -1
- package/css/listbox.css +26 -17
- package/css/log.css +2 -2
- package/css/mention.css +0 -2
- package/css/menu.css +5 -7
- package/css/menubar.css +6 -8
- package/css/message-feed.css +2 -2
- package/css/navigation-menu.css +5 -7
- package/css/notification.css +3 -3
- package/css/page-header.css +1 -1
- package/css/pagination.css +5 -7
- package/css/popconfirm.css +6 -8
- package/css/popover.css +5 -7
- package/css/prompt-input.css +1 -1
- package/css/question-flow.css +7 -7
- package/css/radio-group.css +9 -9
- package/css/rating.css +4 -4
- package/css/reasoning.css +5 -5
- package/css/reset.css +1 -1
- package/css/segmented.css +7 -7
- package/css/select.css +2 -4
- package/css/side-nav.css +4 -6
- package/css/signature-pad.css +7 -7
- package/css/slider.css +5 -5
- package/css/sortable.css +1 -1
- package/css/splitter.css +1 -1
- package/css/steps.css +10 -10
- package/css/switch.css +8 -8
- package/css/table.css +11 -11
- package/css/tabs.css +12 -12
- package/css/tag-group.css +39 -35
- package/css/tag.css +2 -2
- package/css/time-picker.css +0 -2
- package/css/time-range-picker.css +0 -2
- package/css/toast.css +3 -3
- package/css/toggle-group.css +4 -4
- package/css/toggle.css +2 -2
- package/css/tool-call.css +5 -5
- package/css/toolbar.css +4 -4
- package/css/tooltip.css +4 -6
- package/css/tour.css +7 -9
- package/css/transfer.css +6 -6
- package/css/tree-select.css +3 -5
- package/css/tree.css +46 -99
- package/css/virtualizer.css +1 -1
- package/family/collection-item.css +61 -12
- package/family/motion.css +1 -1
- package/index.css +506 -553
- package/index.unlayered.css +506 -553
- package/package.json +2 -2
package/css/notification.css
CHANGED
|
@@ -151,12 +151,12 @@
|
|
|
151
151
|
* 竖排 flex 里这两件事都做不到(叉会变成第三行)。
|
|
152
152
|
* 底与描边一律中性,语气只由左列那枚字形承载:整片兑色是轻提示那条的做法,
|
|
153
153
|
* 一张有标题有正文的卡片全片染色会把两层文字都压在同一片语气色上。
|
|
154
|
-
* 面走 sheet
|
|
154
|
+
* 面走 sheet 三件套(--xh-material-elevated-bg / -border / -shadow,与 toast 同一套)。
|
|
155
155
|
*
|
|
156
156
|
* 卡片的槽带 item 段(--xh-notification-item-*),与摞的 --xh-notification-inset 分开。
|
|
157
157
|
*/
|
|
158
158
|
[data-scope='notification'][data-part='item'] {
|
|
159
|
-
/* 作者塞进卡片里的图标与皮肤画的兜底字形同一把尺:Feedback 指示符统一 md
|
|
159
|
+
/* 作者塞进卡片里的图标与皮肤画的兜底字形同一把尺:Feedback 指示符统一 md 档;
|
|
160
160
|
左列那枚类型字形另有自己的尺寸槽,叉与操作钮的字形各按按钮档取值 */
|
|
161
161
|
--xh-icon-size: var(--xh-notification-icon-size, var(--xh-glyph-size-md));
|
|
162
162
|
|
|
@@ -360,7 +360,7 @@
|
|
|
360
360
|
}
|
|
361
361
|
|
|
362
362
|
/* 操作钮是带文案的离散动作钮:盒几何、悬停 / 按下与 0.97 按压、粗指针热区、焦点环、禁用面全由 Action Control
|
|
363
|
-
的 text outline 档给(连接层投 sm;非 Button
|
|
363
|
+
的 text outline 档给(连接层投 sm;非 Button 的触发器缺省中性描边、透明底),组件只映射既有使用者槽。
|
|
364
364
|
语气只落到左列字形:这颗钮坐在带 data-tone 的卡片里,底 / 边 / 字钉在中性语义面上,不随语气;
|
|
365
365
|
卡片是 sheet 白面承载:hover --xh-bg-subtle(100)→ pressed --xh-bg-subtle-hover(200) */
|
|
366
366
|
[data-scope='notification'][data-part='item-action-trigger'] {
|
package/css/page-header.css
CHANGED
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
--xh-_page-header-radius: var(--xh-shape-surface);
|
|
66
66
|
}
|
|
67
67
|
|
|
68
|
-
/* outline 是一张静态内容面:--xh-border-default 描边撑住这块面的边界 + surface
|
|
68
|
+
/* outline 是一张静态内容面:--xh-border-default 描边撑住这块面的边界 + surface 底,不叠投影;
|
|
69
69
|
--xh-border-subtle 只作 ghost 贴底那条分隔线用,不当根面外边 */
|
|
70
70
|
[data-scope='page-header'][data-part='root'][data-variant='outline'] {
|
|
71
71
|
border: var(--xh-stroke-thin) solid var(--xh-page-header-border, var(--xh-border-default));
|
package/css/pagination.css
CHANGED
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
/* 私有槽同时声明在根与 positioner 上:摊开的页码面板被搬到 portal 落点,
|
|
19
19
|
不是根的后代,继承不过去。面板里的页码格子与主区那排消费的是同一批槽 */
|
|
20
20
|
[data-scope='pagination']:is([data-part='root'], [data-part='positioner']) {
|
|
21
|
-
/*
|
|
21
|
+
/* 作者塞进面板或分页行里的图标按档取字形尺;四类格子上另按家族档位取同一把尺 */
|
|
22
22
|
--xh-icon-size: var(--xh-pagination-icon-size, var(--xh-glyph-size-md));
|
|
23
23
|
|
|
24
24
|
/* 尺寸档只换这三个私有槽,上一页/下一页、页码与省略号都从这两处继承它们,
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
display: none;
|
|
70
70
|
}
|
|
71
71
|
|
|
72
|
-
/* 四类格子接 Action Control 的 text 档,缺省中性的 ghost
|
|
72
|
+
/* 四类格子接 Action Control 的 text 档,缺省中性的 ghost 形态(只有 Button 品牌实心):盒型、三档几何、
|
|
73
73
|
透明描边(省略号也占一条,两者内容盒等高,一行里对得齐)、悬停 100 → 按下 200(画布承载)、禁用面、按压缩放与
|
|
74
74
|
过渡都由家族给;这里只把使用者槽映射到桥接槽并保留分页自己的排版。
|
|
75
75
|
等宽的关键:1 与 10 的内容宽度不同,靠最小宽度把它们撑到同一格,行宽才不会随当前页左右抖动 */
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
--xh-action-fg-rest: var(--xh-pagination-item-fg, var(--xh-_action-variant-fg-rest));
|
|
89
89
|
--xh-action-fg-hover: var(--xh-pagination-item-fg, var(--xh-_action-variant-fg-hover));
|
|
90
90
|
--xh-action-fg-pressed: var(--xh-pagination-item-fg, var(--xh-_action-variant-fg-pressed));
|
|
91
|
-
/*
|
|
91
|
+
/* 作者塞进上一页/下一页的图标按档取字形尺,与皮肤画的兜底字形同一把尺 */
|
|
92
92
|
--xh-icon-size: var(--xh-pagination-icon-size, var(--xh-_action-profile-glyph-size));
|
|
93
93
|
|
|
94
94
|
flex: none;
|
|
@@ -107,7 +107,7 @@
|
|
|
107
107
|
/* 首末页的上一页 / 下一页是原生 disabled(不可聚焦、进不了 Tab 序列),连接层同时给 data-disabled,
|
|
108
108
|
家族按 data-disabled 画禁用面(透明底 + --xh-fg-disabled);分页条目从不禁用 */
|
|
109
109
|
|
|
110
|
-
/*
|
|
110
|
+
/* 当前页(格状当前):data-current 与 aria-current='page' 由连接层成对给出,样式挂在 data 钩子上,
|
|
111
111
|
无障碍语义留给 aria。实心品牌面 + 配对前景、不加粗——字重一变字形就变宽,页码格子会跟着长一点,
|
|
112
112
|
正是这里要避免的抖动;悬停 / 按下沿 brand → brand-hover → brand-active 走,三态都经桥接槽交给家族画,
|
|
113
113
|
solid 面允许一条顶高光,环色改取面自己的前景 */
|
|
@@ -239,7 +239,7 @@
|
|
|
239
239
|
var(--xh-_pagination-available-h)
|
|
240
240
|
);
|
|
241
241
|
overflow-y: auto;
|
|
242
|
-
/*
|
|
242
|
+
/* 浮层滚动面:滚到底不把滚动量交给页面(只给 Overlay 家族滚动面) */
|
|
243
243
|
overscroll-behavior: contain;
|
|
244
244
|
padding: var(--xh-pagination-content-p, var(--xh-space-1));
|
|
245
245
|
border: var(--xh-stroke-thin) solid var(--xh-pagination-content-border, var(--xh-border-default));
|
|
@@ -250,9 +250,7 @@
|
|
|
250
250
|
pointer-events: auto;
|
|
251
251
|
}
|
|
252
252
|
|
|
253
|
-
/* 在场那一档才提前备好合成层:属性随 data-state 一起消失,收起后不长期占着 */
|
|
254
253
|
[data-scope='pagination'][data-part='content'][data-state='open'] {
|
|
255
|
-
will-change: opacity, scale;
|
|
256
254
|
animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
|
|
257
255
|
}
|
|
258
256
|
|
package/css/popconfirm.css
CHANGED
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
/*
|
|
34
|
-
*
|
|
34
|
+
* 触发器是页面上的独立文字按钮:盒型、md 档几何、outline 四态面、0.97 按压并换底与粗指针命中区
|
|
35
35
|
* 由家族配方按连接层投影的 data-xh-action-variant / -size 给出。皮肤没有自己的外观规则,
|
|
36
36
|
* 只把作者塞进按钮的图标接到随档字形尺(md = 20px)。
|
|
37
37
|
*/
|
|
@@ -93,7 +93,7 @@
|
|
|
93
93
|
/* 面板排成三列:左列吃掉剩余宽度,右两列各摆一颗按钮。
|
|
94
94
|
标题、说明与作者塞进来的内容各占一整行,两颗按钮因此并排落在最后一行的右侧。 */
|
|
95
95
|
[data-scope='popconfirm'][data-part='content'] {
|
|
96
|
-
/*
|
|
96
|
+
/* 作者塞进面板里的图标按控件档取;两颗动作钮另由家族配方按 sm 档下发字形尺 */
|
|
97
97
|
--xh-icon-size: var(--xh-popconfirm-icon-size, var(--xh-glyph-size-md));
|
|
98
98
|
/* 尺寸档只换这两个私有槽 */
|
|
99
99
|
--xh-_popconfirm-pad: var(--xh-surface-pad-md);
|
|
@@ -110,7 +110,7 @@
|
|
|
110
110
|
/* 说明文案长度由作者给,矮视口下不限高面板会整块伸出视口且滚不到 */
|
|
111
111
|
max-block-size: min(var(--xh-popconfirm-max-h, var(--xh-overlay-max-h)), var(--xh-_popconfirm-available-h));
|
|
112
112
|
overflow-y: auto;
|
|
113
|
-
/* 浮在页面之上的 Overlay
|
|
113
|
+
/* 浮在页面之上的 Overlay 滚动面:滚到头不把页面一起带走 */
|
|
114
114
|
overscroll-behavior: contain;
|
|
115
115
|
padding-block: var(--xh-popconfirm-py, var(--xh-_popconfirm-pad));
|
|
116
116
|
padding-inline: var(--xh-popconfirm-px, var(--xh-_popconfirm-pad));
|
|
@@ -154,8 +154,6 @@
|
|
|
154
154
|
|
|
155
155
|
[data-scope='popconfirm'][data-part='content'][data-state='open'] {
|
|
156
156
|
animation: xh-overlay-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
|
|
157
|
-
/* 只在开着的这一档挂:合成层随 data-state 一起收走,收起后不再占着 */
|
|
158
|
-
will-change: opacity, scale, translate;
|
|
159
157
|
}
|
|
160
158
|
|
|
161
159
|
/* 退场:收起那一帧 hidden 由退场闸门押后,这里才播得出来。forwards 把末态钉住,
|
|
@@ -186,7 +184,7 @@
|
|
|
186
184
|
color: var(--xh-popconfirm-title-fg, var(--xh-material-frosted-fg));
|
|
187
185
|
}
|
|
188
186
|
|
|
189
|
-
/*
|
|
187
|
+
/* 说明文字走说明档:13px + fg-muted */
|
|
190
188
|
[data-scope='popconfirm'][data-part='description'] {
|
|
191
189
|
margin: 0;
|
|
192
190
|
min-inline-size: 0;
|
|
@@ -211,7 +209,7 @@
|
|
|
211
209
|
|
|
212
210
|
/*
|
|
213
211
|
* —— 两颗按钮 ——
|
|
214
|
-
*
|
|
212
|
+
* 确认与取消都是浮层末行的文字按钮:盒型、sm 档几何、四态面、0.97 按压并换底、粗指针命中区与
|
|
215
213
|
* 强制色由家族配方按连接层投影的 data-xh-action-variant / -size 给出。这里只把公开槽桥接到矩阵之前
|
|
216
214
|
* (使用者槽 → 形态矩阵 → 家族缺省)与几何映射;内衬与圆角槽取两颗共用的 action 段。
|
|
217
215
|
*/
|
|
@@ -236,7 +234,7 @@
|
|
|
236
234
|
grid-column: 3;
|
|
237
235
|
}
|
|
238
236
|
|
|
239
|
-
/*
|
|
237
|
+
/* 确认是实心的主操作。底色走共享语气槽:作者在 content 上写 data-tone="danger"
|
|
240
238
|
就整体换成危险色,不写则用品牌色——配方 solid 列本就读 --xh-_tone,这里只桥接使用者槽 */
|
|
241
239
|
[data-scope='popconfirm'][data-part='confirm-trigger'] {
|
|
242
240
|
--xh-action-bg-rest: var(--xh-popconfirm-confirm-bg, var(--xh-_action-variant-bg-rest));
|
package/css/popover.css
CHANGED
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
/*
|
|
65
|
-
*
|
|
65
|
+
* 触发器是页面上的独立文字按钮:盒型、md 档几何、outline 四态面、0.97 按压并换底与粗指针命中区
|
|
66
66
|
* 由家族配方按连接层投影的 data-xh-action-variant / -size 给出。皮肤没有自己的外观规则,
|
|
67
67
|
* 只把作者塞进按钮的图标接到随档字形尺(md = 20px)。
|
|
68
68
|
*/
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
}
|
|
77
77
|
|
|
78
78
|
[data-scope='popover'][data-part='content'] {
|
|
79
|
-
/*
|
|
79
|
+
/* 作者塞进面板里的图标按控件档取;关闭钮另由家族配方按 sm 档下发字形尺 */
|
|
80
80
|
--xh-icon-size: var(--xh-popover-icon-size, var(--xh-glyph-size-md));
|
|
81
81
|
|
|
82
82
|
/* 尺寸档只换这两个私有槽。popover 没有 root 部件,size 落在浮层树最外层的 content 上。
|
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
/* 内容由作者给,长度不可预知:不限高就整块伸出视口且滚不到 */
|
|
95
95
|
max-block-size: min(var(--xh-popover-max-h, var(--xh-overlay-max-h)), var(--xh-_popover-available-h));
|
|
96
96
|
overflow-y: auto;
|
|
97
|
-
/* 浮在页面之上的 Overlay
|
|
97
|
+
/* 浮在页面之上的 Overlay 滚动面:滚到头不把页面一起带走 */
|
|
98
98
|
overscroll-behavior: contain;
|
|
99
99
|
padding-block: var(--xh-popover-py, var(--xh-_popover-pad));
|
|
100
100
|
padding-inline: var(--xh-popover-px, var(--xh-_popover-pad));
|
|
@@ -129,8 +129,6 @@
|
|
|
129
129
|
|
|
130
130
|
[data-scope='popover'][data-part='content'][data-state='open'] {
|
|
131
131
|
animation: xh-overlay-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
|
|
132
|
-
/* 只在开着的这一档挂:合成层随 data-state 一起收走,收起后不再占着 */
|
|
133
|
-
will-change: opacity, scale, translate;
|
|
134
132
|
}
|
|
135
133
|
|
|
136
134
|
/* 退场:收起那一帧 hidden 由退场闸门押后,这里才播得出来。forwards 把末态钉住,
|
|
@@ -158,7 +156,7 @@
|
|
|
158
156
|
color: var(--xh-popover-title-fg, var(--xh-material-frosted-fg));
|
|
159
157
|
}
|
|
160
158
|
|
|
161
|
-
/*
|
|
159
|
+
/* 说明文字走说明档:13px + fg-muted */
|
|
162
160
|
[data-scope='popover'][data-part='description'] {
|
|
163
161
|
margin: 0;
|
|
164
162
|
font-size: var(--xh-popover-description-font-size, var(--xh-text-secondary-size));
|
|
@@ -173,7 +171,7 @@
|
|
|
173
171
|
}
|
|
174
172
|
|
|
175
173
|
/*
|
|
176
|
-
*
|
|
174
|
+
* 关闭钮是浮层角落的单图标钮:正方盒、sm 档几何、ghost 四态面、0.97 按压并换底与粗指针命中区
|
|
177
175
|
* 由家族配方给出——磨砂白面上走画布承载阶梯悬停 --xh-bg-subtle(100)→ 按下 --xh-bg-subtle-hover(200),
|
|
178
176
|
* 焦点面透明吃库环。这里只把公开槽桥接到矩阵之前(使用者槽 → 形态矩阵 → 家族缺省)与摆放,
|
|
179
177
|
* 聚焦档的 -bg-focus / -fg-focus 两槽同样桥到配方的 focus-visible 面,缺省仍是透明底与悬停字色:
|
package/css/prompt-input.css
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
/* root 就是视觉盒:描边、底色、圆角、聚焦环、悬停与禁用面由 Field Chrome 家族画在它身上(静息描边式:
|
|
17
|
-
canvas 底 + --xh-border-control 描边 + 无影,不用 soft
|
|
17
|
+
canvas 底 + --xh-border-control 描边 + 无影,不用 soft,登记的例外只在 8px surface 圆角),内部 textarea
|
|
18
18
|
无边框;align-items: flex-end 让按钮随输入框长高贴着底边。
|
|
19
19
|
三个视觉轴都落在 root 上:形态三档由家族按 data-variant 生成,语气管用哪族颜色,尺寸管高度与字号 */
|
|
20
20
|
[data-scope='prompt-input'][data-part='root'] {
|
package/css/question-flow.css
CHANGED
|
@@ -16,10 +16,10 @@
|
|
|
16
16
|
--xh-question-flow-skin: 1;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
/* 一张静态内容面:--xh-border-default 描边 + surface 底 +
|
|
19
|
+
/* 一张静态内容面:--xh-border-default 描边 + surface 底 + 无影(边界只由描边承担)。
|
|
20
20
|
三个视觉轴都落在 root 上:形态管底与描边怎么画,语气管用哪族颜色,尺寸管内衬、按钮高度与字号 */
|
|
21
21
|
[data-scope='question-flow'][data-part='root'] {
|
|
22
|
-
/*
|
|
22
|
+
/* 作者塞进翻页钮的图标按档取尺,与皮肤画的兜底字形同一把尺 */
|
|
23
23
|
--xh-icon-size: var(--xh-question-flow-icon-size, var(--xh-glyph-size-md));
|
|
24
24
|
/* 尺寸缺省档:不写 data-size 时按中档走 */
|
|
25
25
|
--xh-_question-flow-p: var(--xh-space-4);
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
/* 描边式是缺省档,写在上面那条基础规则里 */
|
|
50
50
|
/* 填充式:底色顶替描边表达边界。描边只退成透明而不去掉,
|
|
51
51
|
1px 的位置留着,与 outline 档并排时基线对得上;
|
|
52
|
-
淡底承载面向选项行与几颗中性钮下发 hover 200 → pressed 300
|
|
52
|
+
淡底承载面向选项行与几颗中性钮下发 hover 200 → pressed 300 */
|
|
53
53
|
[data-scope='question-flow'][data-part='root'][data-variant='subtle'] {
|
|
54
54
|
--xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
|
|
55
55
|
--xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
|
|
@@ -145,7 +145,7 @@
|
|
|
145
145
|
pointer-events: auto;
|
|
146
146
|
}
|
|
147
147
|
|
|
148
|
-
/* 题干就是这一题的标题,也是选项组的可访问名:走 Surface 标题档 14/600
|
|
148
|
+
/* 题干就是这一题的标题,也是选项组的可访问名:走 Surface 标题档 14/600 */
|
|
149
149
|
[data-scope='question-flow'][data-part='prompt'] {
|
|
150
150
|
display: block;
|
|
151
151
|
margin: 0;
|
|
@@ -170,9 +170,9 @@
|
|
|
170
170
|
}
|
|
171
171
|
|
|
172
172
|
/* 一个选项:整行可点、可聚焦,记号在左。盒型、悬停 / 按下 / 禁用面由 Action Control 的 row 档给
|
|
173
|
-
(ghost 形态:白底承载 hover 100 → pressed 200
|
|
173
|
+
(ghost 形态:白底承载 hover 100 → pressed 200,按下只换面不缩放;禁用守卫认 data-disabled),
|
|
174
174
|
这里只把使用者槽映射到桥接槽,内衬与间距沿用本组件的档位;字色三态同一支,选中档在下面换一档。
|
|
175
|
-
行高不吃家族的单行档:row
|
|
175
|
+
行高不吃家族的单行档:row 档允许换行、高度随内容,一条会折行的选项文案走正文行高 */
|
|
176
176
|
[data-scope='question-flow'][data-part='item'] {
|
|
177
177
|
--xh-action-gap: var(--xh-question-flow-item-gap, var(--xh-space-1_5));
|
|
178
178
|
--xh-action-padding-inline: var(--xh-question-flow-item-px, var(--xh-space-2));
|
|
@@ -253,7 +253,7 @@
|
|
|
253
253
|
display: none;
|
|
254
254
|
}
|
|
255
255
|
|
|
256
|
-
/* 单选那一档把方格收成圆:正方盒取 circle
|
|
256
|
+
/* 单选那一档把方格收成圆:正方盒取 circle */
|
|
257
257
|
[data-scope='question-flow'][data-part='item-indicator'][data-select-mode='single'] {
|
|
258
258
|
border-radius: var(--xh-question-flow-indicator-radius-single, var(--xh-shape-circle));
|
|
259
259
|
}
|
package/css/radio-group.css
CHANGED
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
--xh-_radio-group-host-bg-pressed: var(--xh-bg-subtle-active);
|
|
28
28
|
|
|
29
29
|
/* 标题与条目都是根的直接子节点,一支 gap 同时管「标题到集合」与「条目之间」:
|
|
30
|
-
集合标题与集合隔 --xh-space-2
|
|
30
|
+
集合标题与集合隔 --xh-space-2,同组条目之间也是同一档紧密关系 */
|
|
31
31
|
display: flex;
|
|
32
32
|
gap: var(--xh-radio-group-gap, var(--xh-space-2));
|
|
33
33
|
}
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
--xh-_radio-group-indicator: var(--xh-control-indicator-lg);
|
|
58
58
|
}
|
|
59
59
|
|
|
60
|
-
/*
|
|
60
|
+
/* 集合标题:14 / 500 / fg-muted,字号不随 size 档——随档的是条目文字 */
|
|
61
61
|
[data-scope='radio-group'][data-part='label'] {
|
|
62
62
|
color: var(--xh-radio-group-label-fg, var(--xh-fg-muted));
|
|
63
63
|
font-size: var(--xh-radio-group-label-font-size, var(--xh-text-label-size));
|
|
@@ -65,12 +65,12 @@
|
|
|
65
65
|
line-height: var(--xh-leading-none);
|
|
66
66
|
}
|
|
67
67
|
|
|
68
|
-
/* label 自己不带状态属性,整组禁用只写在 root 上,禁用标签色统一 --xh-fg-subtle
|
|
68
|
+
/* label 自己不带状态属性,整组禁用只写在 root 上,禁用标签色统一 --xh-fg-subtle */
|
|
69
69
|
[data-scope='radio-group'][data-part='root'][data-disabled] [data-scope='radio-group'][data-part='label'] {
|
|
70
70
|
color: var(--xh-radio-group-label-fg-disabled, var(--xh-fg-subtle));
|
|
71
71
|
}
|
|
72
72
|
|
|
73
|
-
/* 条目是「圆圈 +
|
|
73
|
+
/* 条目是「圆圈 + 文案」的整行命中区:接 Action Control row 档、ghost 形态,悬停 / 按下 / 禁用面、手型、
|
|
74
74
|
过渡与焦点环由家族给,按下只换面不缩放(row 档专属按压块 scale: none);这里只把使用者槽映射到桥接槽。
|
|
75
75
|
行自己坐画布走 100 → 200(--xh-action-bg-* 钉住自己的面),行面上的圆圈按淡底容器阶梯再上一档
|
|
76
76
|
(--xh-action-host-bg-* 向内声明自己是圆圈的承载面,host 槽只对后代生效——自己的面已由 --xh-action-bg-* 钉住;
|
|
@@ -114,8 +114,8 @@
|
|
|
114
114
|
--xh-action-cursor-focus-visible: default;
|
|
115
115
|
}
|
|
116
116
|
|
|
117
|
-
/*
|
|
118
|
-
|
|
117
|
+
/* 圆圈是字段家族的控制盒(字段静息形态):透明底 + --xh-border-control 描边 + 无影。
|
|
118
|
+
不缩放(行级只换面),过渡只有底与描边;按下走 press 时间线、释放同走 micro */
|
|
119
119
|
[data-scope='radio-group'][data-part='indicator'] {
|
|
120
120
|
display: inline-flex;
|
|
121
121
|
flex: none;
|
|
@@ -131,7 +131,7 @@
|
|
|
131
131
|
background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
|
|
132
132
|
}
|
|
133
133
|
|
|
134
|
-
/* 悬停整行时未选中的圆圈描边升一档(字段静息 → hover
|
|
134
|
+
/* 悬停整行时未选中的圆圈描边升一档(字段静息 → hover 的同一条阶梯);
|
|
135
135
|
选中圈与校验失败的圈保住各自的描边——圈内的点 / 警示色本身已经在表达状态 */
|
|
136
136
|
[data-scope='radio-group'][data-part='item']:not([data-disabled]):not([data-readonly]):hover
|
|
137
137
|
> [data-scope='radio-group'][data-part='indicator']:not([data-state='checked']):not([data-invalid]) {
|
|
@@ -139,7 +139,7 @@
|
|
|
139
139
|
}
|
|
140
140
|
|
|
141
141
|
/* 按下去要有回应。圆圈不是激活宿主:宿主是投影了 row 档的整行条目,圆圈在宿主的
|
|
142
|
-
:hover / :is(:active, [data-pressed]) 下读宿主 host
|
|
142
|
+
:hover / :is(:active, [data-pressed]) 下读宿主 host 槽的同一来源换面、不缩放——行按下是 200,
|
|
143
143
|
坐在上面的圆圈到 300(行以 --xh-action-host-bg-pressed 声明自己是圆圈的承载面,桥接槽只写不读,
|
|
144
144
|
圆圈读的是喂给它的那支私有槽),描边不动、几何不动;
|
|
145
145
|
与家族按压块同一时间线(按下 --xh-motion-duration-press,释放同走 micro) */
|
|
@@ -184,7 +184,7 @@
|
|
|
184
184
|
background: var(--xh-radio-group-indicator-dot-pressed, var(--xh-_tone-active, var(--xh-bg-brand-active)));
|
|
185
185
|
}
|
|
186
186
|
|
|
187
|
-
/*
|
|
187
|
+
/* 禁用:--xh-border-default 描边 + --xh-bg-subtle 底 + --xh-fg-disabled 圆点,不靠 opacity;
|
|
188
188
|
与 checkbox-group 方框、独立 checkbox 逐档一致。条目自己带 data-disabled(组禁用也逐条下放),圆圈读它 */
|
|
189
189
|
[data-scope='radio-group'][data-part='item'][data-disabled] > [data-scope='radio-group'][data-part='indicator'] {
|
|
190
190
|
border-color: var(--xh-radio-group-indicator-border-disabled, var(--xh-border-default));
|
package/css/rating.css
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
根上不留基准它就会贴到更外层的定位祖先上,原生校验提示跟着飘到页面别处。 */
|
|
18
18
|
[data-scope='rating'][data-part='root'] {
|
|
19
19
|
/* 尺寸档只换这三个私有槽,星星与分值都从 root 继承它们,换档不必给每个部件各写一条选择器。
|
|
20
|
-
星是控件内的字形,按档取 --xh-glyph-size-sm / md / lg
|
|
20
|
+
星是控件内的字形,按档取 --xh-glyph-size-sm / md / lg;标签字号不随档 */
|
|
21
21
|
--xh-_rating-item-gap: var(--xh-control-gap-md);
|
|
22
22
|
--xh-_rating-item-size: var(--xh-glyph-size-md);
|
|
23
23
|
--xh-_rating-item-box-size: var(--xh-control-action-size);
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
position: relative;
|
|
30
30
|
display: inline-flex;
|
|
31
31
|
flex-direction: column;
|
|
32
|
-
/*
|
|
32
|
+
/* 字段标签贴控件(复合单字段) */
|
|
33
33
|
gap: var(--xh-rating-gap, var(--xh-space-1));
|
|
34
34
|
}
|
|
35
35
|
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
--xh-_rating-font-size: var(--xh-control-font-lg);
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
-
/* 字段标签:14 / 500 / fg-default
|
|
49
|
+
/* 字段标签:14 / 500 / fg-default,禁用换到 --xh-fg-subtle;文字部件不叠 opacity */
|
|
50
50
|
[data-scope='rating'][data-part='label'] {
|
|
51
51
|
color: var(--xh-rating-label-fg, var(--xh-fg-default));
|
|
52
52
|
font-size: var(--xh-rating-label-font-size, var(--xh-text-label-size));
|
|
@@ -106,7 +106,7 @@
|
|
|
106
106
|
|
|
107
107
|
/* 条目固定成一枚方形图标盒:连接层用 clientWidth 判定指针落在左半还是右半,
|
|
108
108
|
固定盒能让半档分界与图形中心严格重合。
|
|
109
|
-
星接 Action Control icon
|
|
109
|
+
星接 Action Control icon 档(定尺的星):盒型、按下 / 禁用面、0.97 缩放与换底、焦点环与过渡由家族配方给,
|
|
110
110
|
这里只把使用者槽映射到桥接槽。静息透明(ghost 形态);悬停不换底——悬停预览由点亮的星形(data-highlighted)
|
|
111
111
|
表达,再给盒换面是重复的通道;按下换到 200 档中性面(白底承载)。前景五态映射同一个值:点亮时五态一起换到
|
|
112
112
|
点亮色,家族的悬停 / 按下块才不会把点亮色换回静息色;禁用不换前景,星带整体的压暗落在 control 的 opacity 上 */
|
package/css/reasoning.css
CHANGED
|
@@ -16,13 +16,13 @@
|
|
|
16
16
|
--xh-reasoning-skin: 1;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
/* 一张淡底面:--xh-bg-subtle 底 + 透明边位 +
|
|
20
|
-
缺省淡底承载开关:向它下发 hover 200 → pressed 300
|
|
19
|
+
/* 一张淡底面:--xh-bg-subtle 底 + 透明边位 + 无影(subtle 无影),描边留给 outline 档打开。
|
|
20
|
+
缺省淡底承载开关:向它下发 hover 200 → pressed 300 的阶梯,白底档在形态规则里改回 100 → 200 */
|
|
21
21
|
[data-scope='reasoning'][data-part='root'] {
|
|
22
22
|
--xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
|
|
23
23
|
--xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
|
|
24
24
|
|
|
25
|
-
/*
|
|
25
|
+
/* 作者塞进两个图形位的图标与皮肤画的兜底字形同一把尺:按档取,与开关的家族档同步——
|
|
26
26
|
不写 data-size 时字号是 sm 档,字形随之取 sm */
|
|
27
27
|
--xh-_reasoning-icon-size: var(--xh-glyph-size-sm);
|
|
28
28
|
--xh-icon-size: var(--xh-reasoning-icon-size, var(--xh-_reasoning-icon-size));
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
|
|
52
52
|
/* —— 形态 —— */
|
|
53
53
|
/* 缺省档即 subtle,写在上面那条基础规则里 */
|
|
54
|
-
/* 描边分区:--xh-border-default 描边 + surface
|
|
54
|
+
/* 描边分区:--xh-border-default 描边 + surface 底(静态内容面);
|
|
55
55
|
白底承载面把开关的阶梯改回 hover 100 → pressed 200 */
|
|
56
56
|
[data-scope='reasoning'][data-part='root'][data-variant='outline'] {
|
|
57
57
|
--xh-action-host-bg-hover: var(--xh-bg-subtle);
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
}
|
|
80
80
|
|
|
81
81
|
/* 开关铺满一行,盒型、悬停 / 按下 / 禁用面由 Action Control 的 disclosure-trigger 档给(ghost 形态,
|
|
82
|
-
阶梯由根按承载面经 host
|
|
82
|
+
阶梯由根按承载面经 host 槽下发,按下只换面不缩放);这里只把使用者槽映射到桥接槽:
|
|
83
83
|
圆角归零贴住面边,内衬与字号沿用本组件的档位(不取 profile 的内衬,几何不变),字色三态都停在
|
|
84
84
|
弱一档的 muted(开关不是正文);字形尺由根按同一档位给 */
|
|
85
85
|
[data-scope='reasoning'][data-part='trigger'] {
|
package/css/reset.css
CHANGED
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
* Typography prose 里的 <pre>——它是库内唯一不带 data-part 的滚动面,作者只写 <pre> 不写角色。
|
|
62
62
|
* 皮肤不得再手写 scrollbar-width / scrollbar-color(stylelint 判红),要藏条写 none。
|
|
63
63
|
* 这里不写 scrollbar-gutter:auto 是初始值,stable 只给内容高度会变的容器由皮肤显式写。
|
|
64
|
-
* ::-webkit-scrollbar-thumb 的圆角取 pill:原生滑块与自绘 scrollbar:thumb
|
|
64
|
+
* ::-webkit-scrollbar-thumb 的圆角取 pill:原生滑块与自绘 scrollbar:thumb 同为一维对象,
|
|
65
65
|
* 不再按厚度折半凑半圆,三档厚度都是同一身份。
|
|
66
66
|
*
|
|
67
67
|
* 令牌住在 xihan.tokens 层、排在本层之后,但自定义属性的求值不受层序影响:
|
package/css/segmented.css
CHANGED
|
@@ -19,17 +19,17 @@
|
|
|
19
19
|
--xh-_segmented-px: var(--xh-control-px-md);
|
|
20
20
|
--xh-_segmented-gap: var(--xh-control-gap-md);
|
|
21
21
|
--xh-_segmented-font-size: var(--xh-control-font-md);
|
|
22
|
-
/*
|
|
22
|
+
/* 指示器(有滑块开关的白色抬起面)的底、描边与选中段的文字色;没写 data-tone 时就是这里的取值 */
|
|
23
23
|
--xh-_segmented-indicator-bg: var(--xh-bg-surface-raised);
|
|
24
24
|
--xh-_segmented-fg-selected: var(--xh-fg-default);
|
|
25
|
-
/* 轨道是淡底承载面:段坐在它上面,悬停 200 → 按下 300
|
|
25
|
+
/* 轨道是淡底承载面:段坐在它上面,悬停 200 → 按下 300,host 槽向内下发同一副阶梯 */
|
|
26
26
|
--xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
|
|
27
27
|
--xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
|
|
28
28
|
|
|
29
29
|
/* 一行排不下就折行:每个选项都必须看得见、点得到,硬撑一行会把末尾几段顶出容器。
|
|
30
30
|
段各自带圆角,折行不会切角;不改成横向滚动是因为段离轨道内沿只有一格衬距,
|
|
31
31
|
轨道一旦成为滚动容器,段的焦点环(画在段外侧 2px 处)会被裁掉。
|
|
32
|
-
|
|
32
|
+
轨道是一块淡底面:--xh-bg-subtle 底 + 同宽透明占位边 + 无影,边界由滑块的描边与轨道底色的落差承担 */
|
|
33
33
|
position: relative;
|
|
34
34
|
display: inline-flex;
|
|
35
35
|
flex-wrap: wrap;
|
|
@@ -149,7 +149,7 @@
|
|
|
149
149
|
white-space: nowrap;
|
|
150
150
|
cursor: pointer;
|
|
151
151
|
user-select: none;
|
|
152
|
-
/*
|
|
152
|
+
/* 段是轨道里铺开的一段(Segmented item 归行级),按下只换面不缩放:transition 里没有 scale */
|
|
153
153
|
transition:
|
|
154
154
|
color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
|
|
155
155
|
background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
|
|
@@ -170,14 +170,14 @@
|
|
|
170
170
|
}
|
|
171
171
|
|
|
172
172
|
/* 悬停只提亮未选中的那几段:选中段的底下压着指示器,再变色就成了两套强调。
|
|
173
|
-
底色用中性的悬停档——它是「指哪一段」的轻反馈,不表达选中;段坐在淡底轨道里,悬停取 200
|
|
173
|
+
底色用中性的悬停档——它是「指哪一段」的轻反馈,不表达选中;段坐在淡底轨道里,悬停取 200 */
|
|
174
174
|
[data-scope='segmented'][data-part='item']:not([data-disabled]):not([data-state='checked']):hover {
|
|
175
175
|
background-color: var(--xh-segmented-item-bg-hover, var(--xh-bg-subtle-hover));
|
|
176
176
|
color: var(--xh-segmented-item-fg-hover, var(--xh-fg-default));
|
|
177
177
|
}
|
|
178
178
|
|
|
179
179
|
/* 按下去要有回应:未选中段换到按下面(淡底承载 300),几何不动;只读段不压。
|
|
180
|
-
|
|
180
|
+
选中段不叠按下面:它压着的白色滑块本身就是选中身份(有滑块开关无叠加态) */
|
|
181
181
|
[data-scope='segmented'][data-part='item']:not([data-disabled]):not([data-readonly]):not([data-state='checked']):is(:active, [data-pressed]) {
|
|
182
182
|
background-color: var(--xh-segmented-item-bg-pressed, var(--xh-bg-subtle-active));
|
|
183
183
|
transition-duration: var(--xh-motion-duration-press);
|
|
@@ -222,7 +222,7 @@
|
|
|
222
222
|
inset-block-start: var(--xh-_segmented-indicator-y);
|
|
223
223
|
inline-size: var(--xh-_segmented-indicator-w);
|
|
224
224
|
block-size: var(--xh-_segmented-indicator-h);
|
|
225
|
-
/*
|
|
225
|
+
/* 白色抬起面三件(有滑块开关):surface-raised 底 + border-default 描边 + raised 影,描边必须在,影只是加成。
|
|
226
226
|
尺寸由连接层按段的盒量出,描边吃进盒里(border-box),滑块与段仍是同一块矩形 */
|
|
227
227
|
border: var(--xh-stroke-thin) solid var(--xh-segmented-indicator-border, var(--xh-border-default));
|
|
228
228
|
border-radius: var(--xh-segmented-indicator-radius, var(--xh-shape-inset));
|
package/css/select.css
CHANGED
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
[data-scope='select'][data-part='root'] {
|
|
81
81
|
/* 作者塞进指示符槽的图标跟着控件的尺寸档走;它自己写了 size 时仍以作者的为准。
|
|
82
82
|
浮层条目里自绘的状态字形(勾选标记所在的标记盒与盒里的勾)不读这支:它们是指示符,走
|
|
83
|
-
--xh-control-indicator-* 一族——标记盒在自己身上把 --xh-icon-size
|
|
83
|
+
--xh-control-indicator-* 一族——标记盒在自己身上把 --xh-icon-size 改接到盒的尺 */
|
|
84
84
|
--xh-icon-size: var(--xh-select-icon-size, var(--xh-glyph-size-md));
|
|
85
85
|
|
|
86
86
|
display: inline-flex;
|
|
@@ -394,8 +394,6 @@
|
|
|
394
394
|
|
|
395
395
|
[data-scope='select'][data-part='content'][data-state='open'] {
|
|
396
396
|
animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
|
|
397
|
-
/* 只在开着的这一档挂:合成层随 data-state 一起收走,收起后不再占着 */
|
|
398
|
-
will-change: opacity, translate;
|
|
399
397
|
}
|
|
400
398
|
|
|
401
399
|
/* 退场:收起那一帧 hidden 由退场闸门押后,这里才播得出来。forwards 把末态钉住,
|
|
@@ -530,7 +528,7 @@
|
|
|
530
528
|
}
|
|
531
529
|
|
|
532
530
|
/* 勾选标记只在选中项上出现;未选中时占位不塌,切换选中不引起行宽抖动。
|
|
533
|
-
|
|
531
|
+
盒与盒里的勾是指示符:盒按指示符档取尺,并在自己身上把 --xh-icon-size 改接到盒的尺,皮肤画的
|
|
534
532
|
兜底勾与作者塞进盒里的 XhIcon 读同一把尺、与盒同边长(勾选标记不是勾选格,不取 × 0.75,与 Listbox / Menu 族
|
|
535
533
|
同口径);不读家族按档下发到行的 --xh-icon-size——那支只管作者放进条目里的图标,按图标档取的 20px 比
|
|
536
534
|
16 / 14 的指示符档大一圈 */
|
package/css/side-nav.css
CHANGED
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
不是根的后代,继承不过去。面板里的行与栏内那些消费的是同一批槽 */
|
|
20
20
|
[data-scope='side-nav']:is([data-part='root'], [data-part='positioner']) {
|
|
21
21
|
/* 行外的字形按档取尺,缺省 md,随 data-size 换档并同样声明在定位层上(弹出面板里的行也拿得到);
|
|
22
|
-
行内的由家族随 data-xh-collection-size
|
|
22
|
+
行内的由家族随 data-xh-collection-size 下发。这支只管作者放进行里的图标:
|
|
23
23
|
侧栏自绘的状态字形(分支行尾的展开方向 chevron)是指示符,branch-indicator 在自己身上
|
|
24
24
|
把 --xh-icon-size 改接到 --xh-control-indicator-* 一族的盒尺 */
|
|
25
25
|
--xh-icon-size: var(--xh-side-nav-icon-size, var(--xh-glyph-size-md));
|
|
@@ -118,7 +118,7 @@
|
|
|
118
118
|
}
|
|
119
119
|
|
|
120
120
|
/* —— 行:分支按钮与链接同一副长相 ——
|
|
121
|
-
两种行都走 Collection Item 的 page
|
|
121
|
+
两种行都走 Collection Item 的 page 语境(页内持久集合):悬停 / 高亮 / 按下面(白底承载 hover 100 →
|
|
122
122
|
pressed 200,只换面不缩放)、当前页(品牌淡底 + 淡底前景 + 起始侧 2px 指示条,current+hover 20% /
|
|
123
123
|
+pressed 28%)、展开路径(与 hover 同档的中性面,不用品牌色、不加粗)与禁用面都由家族按 data-current /
|
|
124
124
|
data-in-path / aria-disabled 给出。这里只把公开槽映射到桥接槽。
|
|
@@ -253,15 +253,13 @@
|
|
|
253
253
|
box-shadow: var(--xh-side-nav-popout-shadow, var(--xh-elevation-floating));
|
|
254
254
|
|
|
255
255
|
/* 子导航条目数没有上限,矮视口下不限高就整块伸出视口且滚不到。
|
|
256
|
-
|
|
256
|
+
浮层滚动面:到底后不把滚动链穿透给页面;细条由 reset 层给 */
|
|
257
257
|
max-block-size: min(var(--xh-side-nav-popout-max-h, var(--xh-overlay-menu-max-h)), var(--xh-_side-nav-available-h));
|
|
258
258
|
overflow-y: auto;
|
|
259
259
|
overscroll-behavior: contain;
|
|
260
260
|
}
|
|
261
261
|
|
|
262
|
-
/* 在场那一档才提前备好合成层:属性随 data-state 一起消失,收起后不长期占着 */
|
|
263
262
|
[data-scope='side-nav'][data-part='branch-content'][data-popout][data-state='open'] {
|
|
264
|
-
will-change: opacity, scale;
|
|
265
263
|
animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
|
|
266
264
|
}
|
|
267
265
|
|
|
@@ -272,7 +270,7 @@
|
|
|
272
270
|
}
|
|
273
271
|
|
|
274
272
|
/* 箭头是行尾的后缀:auto 外边距把它顶到行尾,家族按 suffix 槽下发的外边距已在行上归零。
|
|
275
|
-
盒里的 chevron
|
|
273
|
+
盒里的 chevron 是指示符:盒按指示符档定尺(comfortable 16 / compact 14,与 Tree / TreeSelect
|
|
276
274
|
的 branch-indicator 同款定尺盒),--xh-icon-size 在自己身上改接到盒的尺,兜底字形与作者塞进盒里的
|
|
277
275
|
XhIcon 读同一把尺、与盒同边长;不读家族按档下发到行的 --xh-icon-size——那支只管作者放进行里的
|
|
278
276
|
图标,按图标档取的 20px 比指示符档大一圈。盒自己定尺而不随字形撑开:转 90° 时才不抖 */
|
package/css/signature-pad.css
CHANGED
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
gap: var(--xh-signature-pad-gap, var(--xh-space-2));
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
/*
|
|
26
|
+
/* 复合单字段的标签:14 / 500 / fg-default,不随档;贴画布 space-1——
|
|
27
27
|
容器的 gap 归画布之后的部件,标签在它之上补一段差值把距离收成目标值 */
|
|
28
28
|
[data-scope='signature-pad'][data-part='label'] {
|
|
29
29
|
margin-block-end: calc(
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
/* 画布是块状的写字区:宽度铺满外层,高度由宽高比决定。
|
|
43
43
|
控件行高那把尺量的是一行控件,一块要写字的面积用不上它。
|
|
44
44
|
touch-action 由连接层内联写死,触摸落笔才不会被页面滚动抢走。
|
|
45
|
-
|
|
45
|
+
外壳按字段规则自绘(登记的画布型字段例外:字段家族配方钉死控件行高,画布按宽高比撑高吃不下它):
|
|
46
46
|
静息透明底 + border-control 描边 + control 圆角 + 无影 */
|
|
47
47
|
[data-scope='signature-pad'][data-part='control'] {
|
|
48
48
|
display: block;
|
|
@@ -71,13 +71,13 @@
|
|
|
71
71
|
}
|
|
72
72
|
|
|
73
73
|
/* 只读仍看得见签名,只是改不动:收掉手型,别暗示"在这儿能写";
|
|
74
|
-
|
|
74
|
+
面按字段只读规则只换到淡底,描边不动 */
|
|
75
75
|
[data-scope='signature-pad'][data-part='control'][data-readonly]:not([data-disabled]) {
|
|
76
76
|
background: var(--xh-signature-pad-bg-readonly, var(--xh-bg-subtle));
|
|
77
77
|
cursor: default;
|
|
78
78
|
}
|
|
79
79
|
|
|
80
|
-
/*
|
|
80
|
+
/* 字段禁用面:描边退到 border-default、底换淡底 */
|
|
81
81
|
[data-scope='signature-pad'][data-part='control'][data-disabled] {
|
|
82
82
|
border-color: var(--xh-signature-pad-border-disabled, var(--xh-border-default));
|
|
83
83
|
background: var(--xh-signature-pad-bg-disabled, var(--xh-bg-subtle));
|
|
@@ -100,9 +100,9 @@
|
|
|
100
100
|
}
|
|
101
101
|
|
|
102
102
|
/*
|
|
103
|
-
*
|
|
103
|
+
* 清空按钮是画布旁的独立文字按钮:盒型、sm 档几何、outline 四态面、0.97 按压与粗指针命中区由家族配方
|
|
104
104
|
* 按连接层投影的 data-xh-action-variant / -size 给出(缺省 outline,白底承载阶梯 100 → 200)。这里只把公开槽
|
|
105
|
-
* 桥接到矩阵之前(使用者槽 → 形态矩阵 →
|
|
105
|
+
* 桥接到矩阵之前(使用者槽 → 形态矩阵 → 家族缺省)与几何槽映射,矩阵各态无影(淡底与阴影互斥)。
|
|
106
106
|
*/
|
|
107
107
|
[data-scope='signature-pad'][data-part='clear-trigger'] {
|
|
108
108
|
--xh-action-bg-rest: var(--xh-signature-pad-clear-bg, var(--xh-_action-variant-bg-rest));
|
|
@@ -142,7 +142,7 @@
|
|
|
142
142
|
--xh-action-ring-color-focus-visible: currentColor;
|
|
143
143
|
}
|
|
144
144
|
|
|
145
|
-
/*
|
|
145
|
+
/* 签没签的那句话是说明角色:13 / fg-muted / leading-normal。读屏靠它播报,看得见的人也用得上,因此不做视觉隐藏 */
|
|
146
146
|
[data-scope='signature-pad'][data-part='status'] {
|
|
147
147
|
color: var(--xh-signature-pad-status-fg, var(--xh-fg-muted));
|
|
148
148
|
font-size: var(--xh-signature-pad-status-font-size, var(--xh-text-secondary-size));
|