@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
|
@@ -103,8 +103,13 @@
|
|
|
103
103
|
font-size: var(--xh-collection-description-font-size, var(--xh-control-caption-md));
|
|
104
104
|
}
|
|
105
105
|
|
|
106
|
+
/* 快捷键提示：与说明同档同色的次级文字，只是落位在行尾而不是第 2 行。
|
|
107
|
+
不换行——它是一串按键记号，折行会被读成两个组合。跟着 description 那支前景走，因此也不跟语气。 */
|
|
106
108
|
[data-xh-collection-slot='shortcut'] {
|
|
107
109
|
grid-column: shortcut;
|
|
110
|
+
color: var(--xh-_collection-description-fg);
|
|
111
|
+
font-size: var(--xh-collection-shortcut-font-size, var(--xh-control-caption-md));
|
|
112
|
+
white-space: nowrap;
|
|
108
113
|
}
|
|
109
114
|
|
|
110
115
|
[data-xh-collection-slot='suffix'] {
|
|
@@ -124,20 +129,9 @@
|
|
|
124
129
|
margin-inline-start: var(--xh-collection-gap, var(--xh-_collection-gap));
|
|
125
130
|
}
|
|
126
131
|
|
|
127
|
-
/* page
|
|
132
|
+
/* page 上下文：对号与 overlay 同在行尾的 indicator 列（trailing）；当前项的起始侧指示条按配方开关（none），none 即只由行面与字色表达。 */
|
|
128
133
|
[data-xh-collection-item][data-xh-collection-context='page'] {
|
|
129
134
|
position: relative;
|
|
130
|
-
grid-template-columns:
|
|
131
|
-
[indicator] max-content
|
|
132
|
-
[prefix] max-content
|
|
133
|
-
[text] minmax(0, 1fr)
|
|
134
|
-
[shortcut] max-content
|
|
135
|
-
[suffix] max-content;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
[data-xh-collection-item][data-xh-collection-context='page'] [data-xh-collection-slot='indicator'] {
|
|
139
|
-
margin-inline-start: 0;
|
|
140
|
-
margin-inline-end: var(--xh-collection-gap, var(--xh-_collection-gap));
|
|
141
135
|
}
|
|
142
136
|
|
|
143
137
|
[data-xh-collection-item][data-in-path] {
|
|
@@ -188,6 +182,31 @@
|
|
|
188
182
|
transition-timing-function: var(--xh-motion-ease-press);
|
|
189
183
|
}
|
|
190
184
|
|
|
185
|
+
/* 语气段：条目自身动作的性质，静息只换字、hover / 高亮 / 按下换语气淡底，节奏与中性行一致。
|
|
186
|
+
必须排在上下文段之前：语气与 selected / current 同特指度，靠源序让选中与当前压过语气。 */
|
|
187
|
+
[data-xh-collection-item][data-tone]:not([data-xh-collection-context='nav']):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]) {
|
|
188
|
+
--xh-_collection-bg: transparent;
|
|
189
|
+
--xh-_collection-fg: var(--xh-tone-fg);
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
[data-xh-collection-item][data-tone]:not([data-xh-collection-context='nav']):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):hover {
|
|
193
|
+
--xh-_collection-bg: var(--xh-tone-subtle);
|
|
194
|
+
--xh-_collection-fg: var(--xh-tone-fg);
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
[data-xh-collection-item][data-tone]:not([data-xh-collection-context='nav']):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:focus-visible, [data-highlighted]) {
|
|
198
|
+
--xh-_collection-bg: var(--xh-tone-subtle);
|
|
199
|
+
--xh-_collection-fg: var(--xh-tone-fg);
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
[data-xh-collection-item][data-tone]:not([data-xh-collection-context='nav']):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed]) {
|
|
203
|
+
--xh-_collection-bg: var(--xh-tone-subtle-hover);
|
|
204
|
+
--xh-_collection-fg: var(--xh-tone-fg);
|
|
205
|
+
|
|
206
|
+
transition-duration: var(--xh-motion-duration-press);
|
|
207
|
+
transition-timing-function: var(--xh-motion-ease-press);
|
|
208
|
+
}
|
|
209
|
+
|
|
191
210
|
[data-xh-collection-item][data-xh-collection-context='overlay']:is([aria-selected='true'], [data-selected]):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]) {
|
|
192
211
|
--xh-_collection-bg: var(--xh-collection-bg-selected, transparent);
|
|
193
212
|
--xh-_collection-fg: var(--xh-collection-fg-selected, var(--xh-material-frosted-fg));
|
|
@@ -535,6 +554,36 @@
|
|
|
535
554
|
--xh-_collection-indicator-fg: HighlightText;
|
|
536
555
|
}
|
|
537
556
|
|
|
557
|
+
/* 语气在强制颜色下退出：逐态用系统色盖回家族缺省，只留图标与文案通道。
|
|
558
|
+
语气段在媒体查询外的特指度比这里的基础态各高一级，必须逐条同形盖回，不能只写一条。 */
|
|
559
|
+
[data-xh-collection-item][data-tone]:not([data-xh-collection-context='nav']):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]) {
|
|
560
|
+
--xh-_collection-bg: Canvas;
|
|
561
|
+
--xh-_collection-fg: CanvasText;
|
|
562
|
+
--xh-_collection-outline: transparent;
|
|
563
|
+
--xh-_collection-indicator-fg: ButtonText;
|
|
564
|
+
}
|
|
565
|
+
|
|
566
|
+
[data-xh-collection-item][data-tone]:not([data-xh-collection-context='nav']):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):hover {
|
|
567
|
+
--xh-_collection-bg: Highlight;
|
|
568
|
+
--xh-_collection-fg: HighlightText;
|
|
569
|
+
--xh-_collection-outline: transparent;
|
|
570
|
+
--xh-_collection-indicator-fg: HighlightText;
|
|
571
|
+
}
|
|
572
|
+
|
|
573
|
+
[data-xh-collection-item][data-tone]:not([data-xh-collection-context='nav']):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:focus-visible, [data-highlighted]) {
|
|
574
|
+
--xh-_collection-bg: Canvas;
|
|
575
|
+
--xh-_collection-fg: CanvasText;
|
|
576
|
+
--xh-_collection-outline: Highlight;
|
|
577
|
+
--xh-_collection-indicator-fg: Highlight;
|
|
578
|
+
}
|
|
579
|
+
|
|
580
|
+
[data-xh-collection-item][data-tone]:not([data-xh-collection-context='nav']):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed]) {
|
|
581
|
+
--xh-_collection-bg: Highlight;
|
|
582
|
+
--xh-_collection-fg: HighlightText;
|
|
583
|
+
--xh-_collection-outline: transparent;
|
|
584
|
+
--xh-_collection-indicator-fg: HighlightText;
|
|
585
|
+
}
|
|
586
|
+
|
|
538
587
|
[data-xh-collection-item][data-xh-collection-context='overlay']:is([aria-selected='true'], [data-selected]):not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]) {
|
|
539
588
|
--xh-_collection-bg: Canvas;
|
|
540
589
|
--xh-_collection-fg: CanvasText;
|