@yh-ui/theme 1.0.25 → 1.0.30

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.
Files changed (17) hide show
  1. package/dist/component-theme.d.ts +1 -0
  2. package/dist/styles/components.css +2 -453
  3. package/dist/styles/index.css +6 -0
  4. package/dist/styles/mixins/mixins.css +0 -451
  5. package/dist/styles/root.css +453 -0
  6. package/dist/styles/variables.css +3 -449
  7. package/dist/theme.cjs +6 -20
  8. package/dist/theme.mjs +6 -20
  9. package/dist/tokens/index.cjs +48 -1
  10. package/dist/tokens/index.d.ts +88 -0
  11. package/dist/tokens/index.mjs +47 -0
  12. package/package.json +10 -8
  13. package/src/styles/index.scss +1 -0
  14. package/src/styles/mixins/mixins.scss +1 -1
  15. package/src/styles/root.scss +514 -0
  16. package/src/styles/variables.scss +2 -511
  17. package/LICENSE +0 -21
package/dist/styles/mixins/mixins.css CHANGED
@@ -1,451 +0,0 @@
1
- @charset "UTF-8";
2
- /**
3
- * YH-UI CSS Variables
4
- * 全局 CSS 变量定义 - 业内最佳主题系统
5
- */
6
- :root {
7
- /* ==================== 密度/紧凑度系统 ==================== */
8
- --yh-density-factor: 1;
9
- --yh-component-size-default: 32px;
10
- --yh-component-size-small: 24px;
11
- --yh-component-size-large: 40px;
12
- --yh-padding-default: 12px 16px;
13
- --yh-padding-small: 8px 12px;
14
- --yh-padding-large: 16px 20px;
15
- --yh-spacing-unit: 8px;
16
- /* ==================== 基础颜色 ==================== */
17
- --yh-color-white: #ffffff;
18
- --yh-color-black: #000000;
19
- /* ==================== 颜色系统 ==================== */
20
- /* 主色 */
21
- --yh-color-primary: #409eff;
22
- --yh-color-primary-light-1: #53a8ff;
23
- --yh-color-primary-light-2: #66b1ff;
24
- --yh-color-primary-light-3: #79bbff;
25
- --yh-color-primary-light-4: #8cc5ff;
26
- --yh-color-primary-light-5: #a0cfff;
27
- --yh-color-primary-light-6: #b3d8ff;
28
- --yh-color-primary-light-7: #c6e2ff;
29
- --yh-color-primary-light-8: #d9ecff;
30
- --yh-color-primary-light-9: #ecf5ff;
31
- --yh-color-primary-dark-2: #337ecc;
32
- /* 成功色 */
33
- --yh-color-success: #67c23a;
34
- --yh-color-success-light-3: #95d475;
35
- --yh-color-success-light-5: #b3e19d;
36
- --yh-color-success-light-7: #d1edc4;
37
- --yh-color-success-light-9: #f0f9eb;
38
- --yh-color-success-dark-2: #529b2e;
39
- /* 警告色 */
40
- --yh-color-warning: #e6a23c;
41
- --yh-color-warning-light-3: #eebe77;
42
- --yh-color-warning-light-5: #f3d19e;
43
- --yh-color-warning-light-7: #f8e3c5;
44
- --yh-color-warning-light-9: #fdf6ec;
45
- --yh-color-warning-dark-2: #b88230;
46
- /* 危险色 */
47
- --yh-color-danger: #f56c6c;
48
- --yh-color-danger-light-3: #f89898;
49
- --yh-color-danger-light-5: #fab6b6;
50
- --yh-color-danger-light-7: #fcd3d3;
51
- --yh-color-danger-light-9: #fef0f0;
52
- --yh-color-danger-dark-2: #c45656;
53
- /* 信息色 */
54
- --yh-color-info: #909399;
55
- --yh-color-info-light-3: #b1b3b8;
56
- --yh-color-info-light-5: #c8c9cc;
57
- --yh-color-info-light-7: #dedfe0;
58
- --yh-color-info-light-9: #f4f4f5;
59
- --yh-color-info-dark-2: #73767a;
60
- /* 文字颜色 */
61
- --yh-text-color-primary: #303133;
62
- --yh-text-color-regular: #606266;
63
- --yh-text-color-secondary: #909399;
64
- --yh-text-color-placeholder: #a8abb2;
65
- --yh-text-color-disabled: #c0c4cc;
66
- /* 边框颜色 */
67
- --yh-border-color: #dcdfe6;
68
- --yh-border-color-hover: var(--yh-color-primary);
69
- --yh-border-color-light: #e4e7ed;
70
- --yh-border-color-lighter: #ebeef5;
71
- --yh-border-color-extra-light: #f2f6fc;
72
- --yh-border-color-dark: #d4d7de;
73
- --yh-border-color-darker: #cdd0d6;
74
- /* 填充颜色 */
75
- --yh-fill-color: #f0f2f5;
76
- --yh-fill-color-light: #f5f7fa;
77
- --yh-fill-color-lighter: #fafafa;
78
- --yh-fill-color-extra-light: #fafcff;
79
- --yh-fill-color-dark: #ebedf0;
80
- --yh-fill-color-darker: #e6e8eb;
81
- --yh-fill-color-blank: #ffffff;
82
- /* 背景颜色 */
83
- --yh-bg-color: #ffffff;
84
- --yh-bg-color-page: #f2f3f5;
85
- --yh-bg-color-overlay: #ffffff;
86
- /* ==================== 间距系统 ==================== */
87
- --yh-spacing-none: 0;
88
- --yh-spacing-xs: 4px;
89
- --yh-spacing-sm: 8px;
90
- --yh-spacing-md: 16px;
91
- --yh-spacing-lg: 24px;
92
- --yh-spacing-xl: 32px;
93
- --yh-spacing-xxl: 48px;
94
- /* ==================== 圆角系统 ==================== */
95
- --yh-radius-none: 0;
96
- --yh-radius-sm: 2px;
97
- --yh-radius-base: 4px;
98
- --yh-radius-md: 8px;
99
- --yh-radius-lg: 12px;
100
- --yh-radius-xl: 16px;
101
- --yh-radius-round: 20px;
102
- --yh-radius-circle: 50%;
103
- /* ==================== 字体系统 ==================== */
104
- --yh-font-family:
105
- -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
106
- sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
107
- /* 字号 */
108
- --yh-font-size-xs: 12px;
109
- --yh-font-size-sm: 13px;
110
- --yh-font-size-base: 14px;
111
- --yh-font-size-md: 16px;
112
- --yh-font-size-lg: 18px;
113
- --yh-font-size-xl: 20px;
114
- --yh-font-size-xxl: 24px;
115
- /* 行高 */
116
- --yh-line-height-none: 1;
117
- --yh-line-height-tight: 1.25;
118
- --yh-line-height-snug: 1.375;
119
- --yh-line-height-normal: 1.5;
120
- --yh-line-height-relaxed: 1.625;
121
- --yh-line-height-loose: 2;
122
- /* 字重 */
123
- --yh-font-weight-light: 300;
124
- --yh-font-weight-normal: 400;
125
- --yh-font-weight-medium: 500;
126
- --yh-font-weight-semibold: 600;
127
- --yh-font-weight-bold: 700;
128
- /* ==================== 阴影系统 ==================== */
129
- --yh-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
130
- --yh-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
131
- --yh-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
132
- --yh-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
133
- --yh-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
134
- /* ==================== 过渡动效 ==================== */
135
- --yh-duration-fast: 150ms;
136
- --yh-duration-base: 200ms;
137
- --yh-duration-slow: 300ms;
138
- --yh-timing-ease: ease;
139
- --yh-timing-ease-in: cubic-bezier(0.4, 0, 1, 1);
140
- --yh-timing-ease-out: cubic-bezier(0, 0, 0.2, 1);
141
- --yh-timing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
142
- --yh-timing-linear: linear;
143
- --yh-transition-base: all var(--yh-duration-base) var(--yh-timing-ease-in-out);
144
- --yh-transition-fast: all var(--yh-duration-fast) var(--yh-timing-ease-in-out);
145
- --yh-transition-slow: all var(--yh-duration-slow) var(--yh-timing-ease-in-out);
146
- /* ==================== 层级系统 ==================== */
147
- --yh-z-index-normal: 1;
148
- --yh-z-index-top: 1000;
149
- --yh-z-index-popper: 2000;
150
- --yh-z-index-overlay: 2001;
151
- --yh-z-index-modal: 2002;
152
- --yh-z-index-popover: 2003;
153
- --yh-z-index-tooltip: 2004;
154
- --yh-z-index-loading: 2005;
155
- /* ==================== 组件尺寸 ==================== */
156
- /* Large */
157
- --yh-component-size-large: 40px;
158
- --yh-component-size-large-font: 14px;
159
- --yh-component-size-large-padding: 20px;
160
- /* Default */
161
- --yh-component-size-default: 32px;
162
- --yh-component-size-default-font: 14px;
163
- --yh-component-size-default-padding: 16px;
164
- /* Small */
165
- --yh-component-size-small: 24px;
166
- --yh-component-size-small-font: 12px;
167
- --yh-component-size-small-padding: 12px;
168
- /* ==================== 组件语义化变量 ==================== */
169
- --yh-border-radius-base: var(--yh-radius-base);
170
- --yh-border-radius-small: var(--yh-radius-sm);
171
- --yh-border-radius-round: var(--yh-radius-round);
172
- /* Message 消息提示 */
173
- --yh-message-bg-color: var(--yh-bg-color-overlay);
174
- --yh-message-border-color: var(--yh-border-color-lighter);
175
- --yh-message-shadow: var(--yh-shadow-lg);
176
- --yh-message-text-color: var(--yh-text-color-primary);
177
- --yh-message-close-color: var(--yh-text-color-secondary);
178
- --yh-message-close-hover-color: var(--yh-text-color-primary);
179
- /* Notification 通知 */
180
- --yh-notification-bg-color: var(--yh-bg-color-overlay);
181
- --yh-notification-border-color: var(--yh-border-color-lighter);
182
- --yh-notification-shadow: var(--yh-shadow-lg);
183
- --yh-notification-title-color: var(--yh-text-color-primary);
184
- --yh-notification-content-color: var(--yh-text-color-regular);
185
- /* Badge 徽标 */
186
- --yh-badge-bg-color: var(--yh-color-danger);
187
- --yh-badge-text-color: #ffffff;
188
- --yh-badge-border-color: var(--yh-bg-color);
189
- /* Card 卡片 */
190
- --yh-card-bg-color: var(--yh-bg-color-overlay);
191
- --yh-card-border-color: var(--yh-border-color-lighter);
192
- --yh-card-shadow: var(--yh-shadow-base);
193
- --yh-card-header-padding: 18px 20px;
194
- --yh-card-body-padding: 20px;
195
- /* Input 输入框 */
196
- --yh-input-bg-color: var(--yh-fill-color-blank);
197
- --yh-input-text-color: var(--yh-text-color-regular);
198
- --yh-input-border-color: var(--yh-border-color);
199
- --yh-input-hover-border-color: var(--yh-color-primary);
200
- --yh-input-focus-border-color: var(--yh-color-primary);
201
- --yh-input-placeholder-color: var(--yh-text-color-placeholder);
202
- --yh-input-icon-color: var(--yh-text-color-placeholder);
203
- --yh-input-disabled-bg-color: var(--yh-fill-color-light);
204
- --yh-input-disabled-text-color: var(--yh-text-color-disabled);
205
- --yh-input-disabled-border-color: var(--yh-border-color-light);
206
- /* Image 图片 */
207
- --yh-image-placeholder-bg-color: var(--yh-fill-color-light);
208
- --yh-image-placeholder-text-color: var(--yh-text-color-placeholder);
209
- --yh-image-error-bg-color: var(--yh-fill-color-extra-light);
210
- --yh-image-error-text-color: var(--yh-text-color-placeholder);
211
- /* Image Viewer 预览器 */
212
- --yh-image-viewer-mask-bg-color: rgba(0, 0, 0, 0.5);
213
- --yh-image-viewer-btn-bg-color: var(--yh-text-color-regular);
214
- --yh-image-viewer-btn-color: #ffffff;
215
- --yh-image-viewer-btn-hover-bg-color: var(--yh-color-primary);
216
- /* Calendar 日历 */
217
- --yh-calendar-bg: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
218
- --yh-calendar-border-color: rgba(0, 0, 0, 0.06);
219
- --yh-calendar-border-radius: var(--yh-radius-xl);
220
- --yh-calendar-header-bg: rgba(255, 255, 255, 0.95);
221
- --yh-calendar-header-border: rgba(0, 0, 0, 0.04);
222
- --yh-calendar-header-padding: 18px 22px;
223
- --yh-calendar-body-padding: 14px 18px 18px;
224
- /* Calendar 尺寸 */
225
- --yh-calendar-cell-height: 85px;
226
- --yh-calendar-cell-height-small: 52px;
227
- --yh-calendar-cell-height-large: 110px;
228
- --yh-calendar-cell-radius: 10px;
229
- --yh-calendar-cell-radius-small: 6px;
230
- --yh-calendar-cell-radius-large: 12px;
231
- /* Calendar 颜色 */
232
- --yh-calendar-primary: var(--yh-color-primary);
233
- --yh-calendar-primary-light: rgba(59, 130, 246, 0.1);
234
- --yh-calendar-selected-bg: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
235
- --yh-calendar-selected-border: rgba(59, 130, 246, 0.4);
236
- --yh-calendar-today-dot: var(--yh-color-primary);
237
- --yh-calendar-weekend-color: #f97316;
238
- --yh-calendar-disabled-color: var(--yh-text-color-disabled);
239
- --yh-calendar-other-month-opacity: 0.35;
240
- /* Calendar 假日 */
241
- --yh-calendar-holiday-color: var(--yh-color-success);
242
- --yh-calendar-holiday-bg: rgba(16, 185, 129, 0.12);
243
- --yh-calendar-holiday-border: rgba(16, 185, 129, 0.25);
244
- --yh-calendar-workday-color: var(--yh-color-warning);
245
- --yh-calendar-workday-bg: rgba(245, 158, 11, 0.12);
246
- --yh-calendar-workday-border: rgba(245, 158, 11, 0.25);
247
- /* Calendar 范围选择 */
248
- --yh-calendar-range-bg: rgba(59, 130, 246, 0.08);
249
- --yh-calendar-range-border: rgba(59, 130, 246, 0.2);
250
- /* Calendar 字体 */
251
- --yh-calendar-weekday-font-size: var(--yh-font-size-sm);
252
- --yh-calendar-weekday-color: var(--yh-text-color-secondary);
253
- --yh-calendar-day-font-size: 15px;
254
- --yh-calendar-day-color: var(--yh-text-color-primary);
255
- --yh-calendar-badge-font-size: 9px;
256
- /* Table 表格 */
257
- --yh-table-border-color: var(--yh-border-color-lighter);
258
- --yh-table-header-bg: var(--yh-fill-color-light);
259
- --yh-table-header-text-color: var(--yh-text-color-primary);
260
- --yh-table-header-font-weight: var(--yh-font-weight-semibold);
261
- --yh-table-row-bg: var(--yh-bg-color);
262
- --yh-table-row-hover-bg: var(--yh-fill-color-light);
263
- --yh-table-row-stripe-bg: var(--yh-fill-color-lighter);
264
- --yh-table-row-current-bg: var(--yh-color-primary-light-9);
265
- --yh-table-row-selected-bg: var(--yh-color-primary-light-8);
266
- --yh-table-row-success-bg: var(--yh-color-success-light-9);
267
- --yh-table-row-warning-bg: var(--yh-color-warning-light-9);
268
- --yh-table-text-color: var(--yh-text-color-regular);
269
- --yh-table-empty-text-color: var(--yh-text-color-secondary);
270
- --yh-table-font-size: var(--yh-font-size-base);
271
- --yh-table-cell-padding: 12px 0;
272
- --yh-table-cell-spacing: 12px;
273
- --yh-table-fixed-left-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.15);
274
- --yh-table-fixed-right-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.15);
275
- /* ==================== 边框基础 ==================== */
276
- --yh-border-width: 1px;
277
- --yh-border-style: solid;
278
- --yh-border: var(--yh-border-width) var(--yh-border-style) var(--yh-border-color);
279
- /* ==================== 断点系统 ==================== */
280
- --yh-breakpoint-xs: 0;
281
- --yh-breakpoint-sm: 576px;
282
- --yh-breakpoint-md: 768px;
283
- --yh-breakpoint-lg: 992px;
284
- --yh-breakpoint-xl: 1200px;
285
- --yh-breakpoint-xxl: 1400px;
286
- /* ==================== 字体系统扩展 ==================== */
287
- --yh-font-family-monospace:
288
- 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
289
- --yh-font-family-serif: Georgia, Cambria, 'Times New Roman', Times, serif;
290
- /* ==================== 无障碍/聚焦系统 ==================== */
291
- --yh-focus-ring-color: var(--yh-color-primary);
292
- --yh-focus-ring-width: 2px;
293
- --yh-focus-ring-offset: 2px;
294
- --yh-focus-ring-opacity: 0.2;
295
- --yh-focus-ring:
296
- 0 0 0 var(--yh-focus-ring-offset) var(--yh-bg-color),
297
- 0 0 0 calc(var(--yh-focus-ring-offset) + var(--yh-focus-ring-width)) var(--yh-focus-ring-color);
298
- /* 高对比度模式支持 */
299
- --yh-high-contrast-outline: 2px solid transparent;
300
- --yh-high-contrast-outline-offset: 2px;
301
- /* ==================== 滚动条样式 ==================== */
302
- --yh-scrollbar-width: 6px;
303
- --yh-scrollbar-thumb-color: var(--yh-text-color-disabled);
304
- --yh-scrollbar-thumb-hover-color: var(--yh-text-color-secondary);
305
- --yh-scrollbar-track-color: transparent;
306
- --yh-scrollbar-thumb-radius: 3px;
307
- /* ==================== 遮罩层 ==================== */
308
- --yh-mask-color: rgba(0, 0, 0, 0.5);
309
- --yh-mask-color-light: rgba(0, 0, 0, 0.3);
310
- --yh-mask-color-extra-light: rgba(0, 0, 0, 0.1);
311
- }
312
-
313
- /* ==================== 暗黑模式 ==================== */
314
- html.dark {
315
- --yh-color-primary: #409eff;
316
- --yh-color-primary-light-3: #3375b9;
317
- --yh-color-primary-light-5: #2a598a;
318
- --yh-color-primary-light-7: #213d5b;
319
- --yh-color-primary-light-9: #18222c;
320
- --yh-color-primary-dark-2: #66b1ff;
321
- --yh-color-success: #67c23a;
322
- --yh-color-success-light-3: #4e8e2f;
323
- --yh-color-success-light-5: #3e6b27;
324
- --yh-color-success-light-7: #2d481f;
325
- --yh-color-success-light-9: #1d2518;
326
- --yh-color-warning: #e6a23c;
327
- --yh-color-warning-light-3: #a77730;
328
- --yh-color-warning-light-5: #7d5b28;
329
- --yh-color-warning-light-7: #533f20;
330
- --yh-color-warning-light-9: #292218;
331
- --yh-color-danger: #f56c6c;
332
- --yh-color-danger-light-3: #b25252;
333
- --yh-color-danger-light-5: #854040;
334
- --yh-color-danger-light-7: #582e2e;
335
- --yh-color-danger-light-9: #2b1d1d;
336
- --yh-color-info: #909399;
337
- --yh-color-info-light-3: #6b6d71;
338
- --yh-color-info-light-5: #525457;
339
- --yh-color-info-light-7: #393b3e;
340
- --yh-color-info-light-9: #202124;
341
- --yh-text-color-primary: #e5eaf3;
342
- --yh-text-color-regular: #cfd3dc;
343
- --yh-text-color-secondary: #a3a6ad;
344
- --yh-text-color-placeholder: #8d9095;
345
- --yh-text-color-disabled: #6c6e72;
346
- --yh-border-color: #4c4d4f;
347
- --yh-border-color-light: #414243;
348
- --yh-border-color-lighter: #363637;
349
- --yh-border-color-extra-light: #2b2b2c;
350
- --yh-border-color-dark: #58585b;
351
- --yh-border-color-darker: #636466;
352
- --yh-fill-color: #303030;
353
- --yh-fill-color-light: #262727;
354
- --yh-fill-color-lighter: #1d1d1d;
355
- --yh-fill-color-extra-light: #191919;
356
- --yh-fill-color-dark: #39393a;
357
- --yh-fill-color-darker: #424243;
358
- --yh-fill-color-blank: transparent;
359
- --yh-bg-color: #141414;
360
- --yh-bg-color-page: #0a0a0a;
361
- --yh-bg-color-overlay: #1d1e1f;
362
- /* 组件暗色模式覆盖 */
363
- --yh-message-bg-color: var(--yh-bg-color-overlay);
364
- --yh-message-border-color: var(--yh-border-color-lighter);
365
- --yh-notification-bg-color: var(--yh-bg-color-overlay);
366
- --yh-notification-border-color: var(--yh-border-color-lighter);
367
- --yh-badge-border-color: var(--yh-bg-color);
368
- --yh-card-bg-color: var(--yh-bg-color-overlay);
369
- --yh-card-border-color: var(--yh-border-color-lighter);
370
- /* Calendar 暗黑模式 */
371
- --yh-calendar-bg: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
372
- --yh-calendar-border-color: rgba(255, 255, 255, 0.08);
373
- --yh-calendar-header-bg: rgba(30, 30, 30, 0.95);
374
- --yh-calendar-header-border: rgba(255, 255, 255, 0.06);
375
- --yh-calendar-day-color: var(--yh-text-color-primary);
376
- --yh-calendar-weekday-color: var(--yh-text-color-secondary);
377
- --yh-calendar-selected-bg: linear-gradient(
378
- 135deg,
379
- rgba(59, 130, 246, 0.2) 0%,
380
- rgba(59, 130, 246, 0.1) 100%
381
- );
382
- /* Table 暗黑模式 */
383
- --yh-table-border-color: var(--yh-border-color-lighter);
384
- --yh-table-header-bg: var(--yh-fill-color-dark);
385
- --yh-table-header-text-color: var(--yh-text-color-primary);
386
- --yh-table-row-bg: var(--yh-bg-color);
387
- --yh-table-row-hover-bg: var(--yh-fill-color);
388
- --yh-table-row-stripe-bg: var(--yh-fill-color-light);
389
- --yh-table-row-current-bg: var(--yh-color-primary-light-9);
390
- --yh-table-row-selected-bg: var(--yh-color-primary-light-9);
391
- --yh-table-row-success-bg: var(--yh-color-success-light-9);
392
- --yh-table-row-warning-bg: var(--yh-color-warning-light-9);
393
- --yh-table-fixed-left-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.3);
394
- --yh-table-fixed-right-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.3);
395
- /* 遮罩层暗黑模式 */
396
- --yh-mask-color: rgba(0, 0, 0, 0.7);
397
- --yh-mask-color-light: rgba(0, 0, 0, 0.5);
398
- --yh-mask-color-extra-light: rgba(0, 0, 0, 0.3);
399
- /* 滚动条暗黑模式 */
400
- --yh-scrollbar-thumb-color: var(--yh-fill-color-darker);
401
- --yh-scrollbar-thumb-hover-color: var(--yh-text-color-placeholder);
402
- }
403
-
404
- /* ==================== 减少动画偏好支持 ==================== */
405
- @media (prefers-reduced-motion: reduce) {
406
- :root,
407
- html.dark {
408
- --yh-duration-fast: 0ms;
409
- --yh-duration-base: 0ms;
410
- --yh-duration-slow: 0ms;
411
- --yh-transition-base: none;
412
- --yh-transition-fast: none;
413
- --yh-transition-slow: none;
414
- }
415
- *,
416
- *::before,
417
- *::after {
418
- animation-duration: 0.01ms !important;
419
- animation-iteration-count: 1 !important;
420
- transition-duration: 0.01ms !important;
421
- scroll-behavior: auto !important;
422
- }
423
- }
424
- /* ==================== 高对比度模式支持 ==================== */
425
- @media (prefers-contrast: high) {
426
- :root {
427
- --yh-border-color: #000000;
428
- --yh-border-color-light: #333333;
429
- --yh-text-color-primary: #000000;
430
- --yh-text-color-regular: #1a1a1a;
431
- --yh-focus-ring-width: 3px;
432
- --yh-focus-ring-color: #000000;
433
- }
434
- html.dark {
435
- --yh-border-color: #ffffff;
436
- --yh-border-color-light: #cccccc;
437
- --yh-text-color-primary: #ffffff;
438
- --yh-text-color-regular: #e5e5e5;
439
- --yh-focus-ring-color: #ffffff;
440
- }
441
- }
442
- /* ==================== 强制颜色模式支持 (Windows 高对比度) ==================== */
443
- @media (forced-colors: active) {
444
- :root {
445
- --yh-color-primary: LinkText;
446
- --yh-border-color: ButtonBorder;
447
- --yh-bg-color: Canvas;
448
- --yh-text-color-primary: CanvasText;
449
- --yh-focus-ring-color: Highlight;
450
- }
451
- }