@teamix-evo/tokens 0.4.0 → 0.5.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/README.md +1 -1
- package/package.json +1 -1
- package/variants/opentrek/base.tokens.json +806 -351
- package/variants/opentrek/theme.css +71 -7
- package/variants/uni-manager/base.tokens.json +186 -37
- package/variants/uni-manager/theme.css +272 -105
|
@@ -8,64 +8,73 @@
|
|
|
8
8
|
* @import "tailwindcss";
|
|
9
9
|
* @import "@teamix-evo/tokens/variants/uni-manager/theme.css";
|
|
10
10
|
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
11
|
+
* 可交互元素的 `cursor: pointer` 由 @teamix-evo/ui 各组件源码内显式声明,
|
|
12
|
+
* 不再有全局 preferences.css(见 ADR 0023)。
|
|
13
13
|
*/
|
|
14
14
|
|
|
15
15
|
@theme {
|
|
16
16
|
/* ─── Semantic Colors (Light) ─────────────────────────────── */
|
|
17
|
-
--color-background: #
|
|
18
|
-
--color-foreground: #
|
|
19
|
-
--color-card: #
|
|
20
|
-
--color-card-foreground: #
|
|
21
|
-
--color-popover: #
|
|
22
|
-
--color-popover-foreground: #
|
|
23
|
-
--color-primary: #
|
|
24
|
-
--color-primary-foreground: #
|
|
25
|
-
--color-secondary: #
|
|
26
|
-
--color-secondary-foreground: #
|
|
27
|
-
--color-muted: #
|
|
17
|
+
--color-background: #ffffff;
|
|
18
|
+
--color-foreground: #1a1a1a;
|
|
19
|
+
--color-card: #ffffff;
|
|
20
|
+
--color-card-foreground: #1a1a1a;
|
|
21
|
+
--color-popover: #ffffff;
|
|
22
|
+
--color-popover-foreground: #1a1a1a;
|
|
23
|
+
--color-primary: #0064c8;
|
|
24
|
+
--color-primary-foreground: #ffffff;
|
|
25
|
+
--color-secondary: #f7f7f7;
|
|
26
|
+
--color-secondary-foreground: #1a1a1a;
|
|
27
|
+
--color-muted: #f7f7f7;
|
|
28
28
|
--color-muted-foreground: #696969;
|
|
29
|
-
--color-accent: #
|
|
30
|
-
--color-accent-foreground: #
|
|
31
|
-
--color-destructive: #
|
|
32
|
-
--color-destructive-foreground: #
|
|
29
|
+
--color-accent: #f0f7ff;
|
|
30
|
+
--color-accent-foreground: #0064c8;
|
|
31
|
+
--color-destructive: #e84738;
|
|
32
|
+
--color-destructive-foreground: #ffffff;
|
|
33
33
|
|
|
34
34
|
/* ─── Status Colors ───────────────────────────────────────── */
|
|
35
|
-
--color-success: #
|
|
36
|
-
--color-success-foreground: #
|
|
37
|
-
--color-success-subtle: #
|
|
38
|
-
--color-success-border: #
|
|
39
|
-
--color-warning: #
|
|
40
|
-
--color-warning-foreground: #
|
|
41
|
-
--color-warning-subtle: #
|
|
42
|
-
--color-warning-border: #
|
|
43
|
-
--color-info: #
|
|
44
|
-
--color-info-foreground: #
|
|
45
|
-
--color-info-subtle: #
|
|
46
|
-
--color-info-border: #
|
|
35
|
+
--color-success: #23b066;
|
|
36
|
+
--color-success-foreground: #ffffff;
|
|
37
|
+
--color-success-subtle: #ebfff6;
|
|
38
|
+
--color-success-border: #43bf7e;
|
|
39
|
+
--color-warning: #f98e1a;
|
|
40
|
+
--color-warning-foreground: #ffffff;
|
|
41
|
+
--color-warning-subtle: #fff5eb;
|
|
42
|
+
--color-warning-border: #f7a854;
|
|
43
|
+
--color-info: #0064c8;
|
|
44
|
+
--color-info-foreground: #ffffff;
|
|
45
|
+
--color-info-subtle: #f0f7ff;
|
|
46
|
+
--color-info-border: #589adb;
|
|
47
47
|
|
|
48
48
|
/* ─── Borders ─────────────────────────────────────────────── */
|
|
49
|
-
--color-border: #
|
|
50
|
-
--color-input: #
|
|
51
|
-
|
|
49
|
+
--color-border: #d9d9d9;
|
|
50
|
+
--color-input: #d9d9d9;
|
|
51
|
+
/**
|
|
52
|
+
* Focus 态走 cd hybridcloud "中性边框加深" 风格,不显示品牌色 halo ring。
|
|
53
|
+
* `--color-ring: transparent` 让所有 `ring-X ring-ring` 视觉静默;
|
|
54
|
+
* 实际焦点反馈通过下方 scoped CSS 给 form 控件做 border-color 深化。
|
|
55
|
+
*/
|
|
56
|
+
--color-ring: transparent;
|
|
57
|
+
/** Form 控件 focus 时的 border 颜色(对齐 cd hybridcloud `--input-focus-border-color`)。 */
|
|
58
|
+
--color-input-focus: #aaaaaa;
|
|
59
|
+
/** Form 控件 hover 阴影(对齐 cd hybridcloud `--shadow-1-down`)。 */
|
|
60
|
+
--shadow-form-hover: 0 3px 8px 0 rgb(0 0 0 / 0.06);
|
|
52
61
|
|
|
53
62
|
/* ─── Chart ───────────────────────────────────────────────── */
|
|
54
|
-
--color-chart-1: #
|
|
55
|
-
--color-chart-2: #
|
|
56
|
-
--color-chart-3: #
|
|
57
|
-
--color-chart-4: #
|
|
58
|
-
--color-chart-5: #
|
|
63
|
+
--color-chart-1: #bf0030;
|
|
64
|
+
--color-chart-2: #e84738;
|
|
65
|
+
--color-chart-3: #f98e1a;
|
|
66
|
+
--color-chart-4: #fac31e;
|
|
67
|
+
--color-chart-5: #d1bb4f;
|
|
59
68
|
|
|
60
69
|
/* ─── Sidebar ─────────────────────────────────────────────── */
|
|
61
|
-
--color-sidebar
|
|
70
|
+
--color-sidebar: #ffffff;
|
|
62
71
|
--color-sidebar-foreground: #696969;
|
|
63
|
-
--color-sidebar-primary: #
|
|
64
|
-
--color-sidebar-primary-foreground: #
|
|
65
|
-
--color-sidebar-accent: #
|
|
66
|
-
--color-sidebar-accent-foreground: #
|
|
67
|
-
--color-sidebar-border: #
|
|
68
|
-
--color-sidebar-ring: #
|
|
72
|
+
--color-sidebar-primary: #0064c8;
|
|
73
|
+
--color-sidebar-primary-foreground: #ffffff;
|
|
74
|
+
--color-sidebar-accent: #f0f7ff;
|
|
75
|
+
--color-sidebar-accent-foreground: #0064c8;
|
|
76
|
+
--color-sidebar-border: #d9d9d9;
|
|
77
|
+
--color-sidebar-ring: #0064c8;
|
|
69
78
|
|
|
70
79
|
/* ─── Layout Sizes ────────────────────────────────────────── */
|
|
71
80
|
--layout-dialog-sm: 400px;
|
|
@@ -89,33 +98,49 @@
|
|
|
89
98
|
--layout-image-preview-max-w: 90vw;
|
|
90
99
|
--layout-image-preview-max-h: 85vh;
|
|
91
100
|
|
|
101
|
+
/* ─── Form 间距精确刻度 ──────────────────────────────── */
|
|
102
|
+
--spacing-form-label-to-input: 0.25rem; /* 4px */
|
|
103
|
+
--spacing-form-error-to-input: 0; /* 0px */
|
|
104
|
+
--spacing-form-help-to-input: 0.25rem; /* 4px */
|
|
105
|
+
--spacing-form-item-gap: 1.25rem; /* 20px */
|
|
106
|
+
--spacing-form-section-gap: 2rem; /* 32px */
|
|
107
|
+
--spacing-form-section-title-gap: 1.25rem; /* 20px */
|
|
108
|
+
|
|
109
|
+
/* ─── Input 宽度 5 档 ───────────────────────────────── */
|
|
110
|
+
--input-width-xs: 104px;
|
|
111
|
+
--input-width-s: 216px;
|
|
112
|
+
--input-width-m: 328px;
|
|
113
|
+
--input-width-l: 440px;
|
|
114
|
+
--input-width-xl: 552px;
|
|
115
|
+
|
|
92
116
|
/* ─── Typography Scale (覆盖 Tailwind v4 默认 text-* 档) ───── */
|
|
93
117
|
/* Tailwind 默认: 12/14/16/18/20/24/30/36/48/60；cd 用 12/14/16/18/20/24/28/36
|
|
94
118
|
不一致只在 text-3xl (30→28)。其余档保持 Tailwind 默认即可（行高 / 字号一致）。 */
|
|
95
|
-
--text-xs: 0.75rem;
|
|
96
|
-
--text-sm: 0.875rem;
|
|
97
|
-
--text-base: 1rem;
|
|
98
|
-
--text-lg: 1.125rem;
|
|
99
|
-
--text-xl: 1.25rem;
|
|
100
|
-
--text-2xl: 1.5rem;
|
|
101
|
-
--text-3xl: 1.75rem;
|
|
102
|
-
--text-4xl: 2.25rem;
|
|
119
|
+
--text-xs: 0.75rem; /* 12px — cd font.size.body.1 / caption */
|
|
120
|
+
--text-sm: 0.875rem; /* 14px — cd font.size.body.2 */
|
|
121
|
+
--text-base: 1rem; /* 16px — cd font.size.subhead */
|
|
122
|
+
--text-lg: 1.125rem; /* 18px — cd font.size.title */
|
|
123
|
+
--text-xl: 1.25rem; /* 20px — cd font.size.headline */
|
|
124
|
+
--text-2xl: 1.5rem; /* 24px — cd font.size.display.1 */
|
|
125
|
+
--text-3xl: 1.75rem; /* 28px — cd font.size.display.2（覆盖 Tailwind 30px）*/
|
|
126
|
+
--text-4xl: 2.25rem; /* 36px — 超大档(备用，运营页頭 / 营销广告) */
|
|
103
127
|
|
|
104
128
|
/* 辅助字号档（cd 高频但不在 Tailwind 默认） */
|
|
105
|
-
--text-xxs: 0.625rem;
|
|
129
|
+
--text-xxs: 0.625rem; /* 10px */
|
|
106
130
|
--text-xs-cal: 0.8rem;
|
|
131
|
+
--text-display-3: 2rem; /* 32px — cd font.size.display.3 / 运营标题(超 Tailwind 4xl=36 一档) */
|
|
107
132
|
|
|
108
133
|
/* ─── Shadow (从 hybridcloud shadow.1/2/3.down 投影) ──────── */
|
|
109
134
|
--shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
|
|
110
135
|
--shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
|
|
111
136
|
--shadow-2xs: 0px 1px 1px 0px rgba(0, 0, 0, 0.04);
|
|
112
|
-
--shadow-md: 0px 3px 8px 0px rgba(0, 0, 0, 0.06);
|
|
113
|
-
--shadow-lg: 0px 3px 8px 0px rgba(0, 0, 0, 0.18);
|
|
114
|
-
--shadow-xl: 0px 6px 24px 0px rgba(0, 0, 0, 0.
|
|
115
|
-
--shadow-2xl: 0px 12px 48px 0px rgba(0, 0, 0, 0.
|
|
137
|
+
--shadow-md: 0px 3px 8px 0px rgba(0, 0, 0, 0.06); /* hybridcloud shadow.1.down — 卡片 / 默认浮起 */
|
|
138
|
+
--shadow-lg: 0px 3px 8px 0px rgba(0, 0, 0, 0.18); /* hybridcloud shadow.2.down — Dropdown / Popover */
|
|
139
|
+
--shadow-xl: 0px 6px 24px 0px rgba(0, 0, 0, 0.1); /* hybridcloud shadow.3.down — Sheet / Drawer / Dialog */
|
|
140
|
+
--shadow-2xl: 0px 12px 48px 0px rgba(0, 0, 0, 0.2); /* 顶层模态 */
|
|
116
141
|
|
|
117
142
|
/* ─── Overlay ─────────────────────────────────────────────── */
|
|
118
|
-
--overlay-scrim: rgba(0, 0, 0, 0.
|
|
143
|
+
--overlay-scrim: rgba(0, 0, 0, 0.5);
|
|
119
144
|
--overlay-watermark: rgba(0, 0, 0, 0.15);
|
|
120
145
|
|
|
121
146
|
/* ─── Border Radius ───────────────────────────────────────── */
|
|
@@ -129,12 +154,18 @@
|
|
|
129
154
|
--radius-xl: 8px;
|
|
130
155
|
--radius-2xl: 12px;
|
|
131
156
|
|
|
157
|
+
/* ─── Component Radius (组件级圆角，供下游组件消费) ──────── */
|
|
158
|
+
/* uni-manager 走 cd hybridcloud `--dialog-corner: var(--corner-1, 2px)` 锐利风格;
|
|
159
|
+
* 与 OpenTrek 16px 的圆润风格不同,通过 variant 覆盖实现. */
|
|
160
|
+
--radius-dialog: 2px; /* Dialog / Sheet 圆角 — 对齐 cd corner-1 */
|
|
161
|
+
--radius-tag: 4px; /* Tag 圆角（对齐 corner.2） */
|
|
162
|
+
|
|
132
163
|
/* ─── Font Family ─────────────────────────────────────────── */
|
|
133
|
-
--font-sans:
|
|
134
|
-
Arial, ui-sans-serif, -apple-system, BlinkMacSystemFont,
|
|
164
|
+
--font-sans: 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei', Helvetica,
|
|
165
|
+
Arial, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI',
|
|
135
166
|
sans-serif;
|
|
136
|
-
--font-mono: ui-monospace, SFMono-Regular,
|
|
137
|
-
|
|
167
|
+
--font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
|
|
168
|
+
'Liberation Mono', monospace;
|
|
138
169
|
}
|
|
139
170
|
|
|
140
171
|
/* class 模式暗色，保持与 v3 一致的切换约定 */
|
|
@@ -142,58 +173,194 @@
|
|
|
142
173
|
|
|
143
174
|
@layer base {
|
|
144
175
|
.dark {
|
|
145
|
-
--color-background: #
|
|
146
|
-
--color-foreground: #
|
|
176
|
+
--color-background: #0a0a0a;
|
|
177
|
+
--color-foreground: #e6e6e6;
|
|
147
178
|
--color-card: #141414;
|
|
148
|
-
--color-card-foreground: #
|
|
179
|
+
--color-card-foreground: #e6e6e6;
|
|
149
180
|
--color-popover: #141414;
|
|
150
|
-
--color-popover-foreground: #
|
|
151
|
-
--color-primary: #
|
|
152
|
-
--color-primary-foreground: #
|
|
181
|
+
--color-popover-foreground: #e6e6e6;
|
|
182
|
+
--color-primary: #2789f2;
|
|
183
|
+
--color-primary-foreground: #ffffff;
|
|
153
184
|
--color-secondary: #333333;
|
|
154
|
-
--color-secondary-foreground: #
|
|
185
|
+
--color-secondary-foreground: #e6e6e6;
|
|
155
186
|
--color-muted: #333333;
|
|
156
|
-
--color-muted-foreground: #
|
|
157
|
-
--color-accent: #
|
|
158
|
-
--color-accent-foreground: #
|
|
159
|
-
--color-destructive: #
|
|
160
|
-
--color-destructive-foreground: #
|
|
161
|
-
--color-success: #
|
|
162
|
-
--color-success-foreground: #
|
|
163
|
-
--color-success-subtle: #
|
|
164
|
-
--color-success-border: #
|
|
165
|
-
--color-warning: #
|
|
166
|
-
--color-warning-foreground: #
|
|
167
|
-
--color-warning-subtle: #
|
|
168
|
-
--color-warning-border: #
|
|
169
|
-
--color-info: #
|
|
170
|
-
--color-info-foreground: #
|
|
171
|
-
--color-info-subtle: #
|
|
172
|
-
--color-info-border: #
|
|
187
|
+
--color-muted-foreground: #8c8c8c;
|
|
188
|
+
--color-accent: #18232e;
|
|
189
|
+
--color-accent-foreground: #2789f2;
|
|
190
|
+
--color-destructive: #f2493a;
|
|
191
|
+
--color-destructive-foreground: #ffffff;
|
|
192
|
+
--color-success: #12b862;
|
|
193
|
+
--color-success-foreground: #ffffff;
|
|
194
|
+
--color-success-subtle: #0f1f16;
|
|
195
|
+
--color-success-border: #1b9657;
|
|
196
|
+
--color-warning: #e67c0b;
|
|
197
|
+
--color-warning-foreground: #ffffff;
|
|
198
|
+
--color-warning-subtle: #241b12;
|
|
199
|
+
--color-warning-border: #d47815;
|
|
200
|
+
--color-info: #2789f2;
|
|
201
|
+
--color-info-foreground: #ffffff;
|
|
202
|
+
--color-info-subtle: #18232e;
|
|
203
|
+
--color-info-border: #33699f;
|
|
173
204
|
--color-border: #333333;
|
|
174
205
|
--color-input: #333333;
|
|
175
|
-
|
|
176
|
-
--color-
|
|
177
|
-
--color-
|
|
178
|
-
--
|
|
179
|
-
--color-chart-
|
|
180
|
-
--color-chart-
|
|
181
|
-
--color-
|
|
182
|
-
--color-
|
|
183
|
-
--color-
|
|
184
|
-
--color-sidebar
|
|
185
|
-
--color-sidebar-
|
|
186
|
-
--color-sidebar-
|
|
187
|
-
--color-sidebar-
|
|
188
|
-
--color-sidebar-
|
|
206
|
+
/* dark 主题同样 transparent — 焦点态走 border 深化 */
|
|
207
|
+
--color-ring: transparent;
|
|
208
|
+
--color-input-focus: #777777;
|
|
209
|
+
--shadow-form-hover: 0 3px 8px 0 rgb(0 0 0 / 0.24);
|
|
210
|
+
--color-chart-1: #b81838;
|
|
211
|
+
--color-chart-2: #f2493a;
|
|
212
|
+
--color-chart-3: #e67c0b;
|
|
213
|
+
--color-chart-4: #d6a81c;
|
|
214
|
+
--color-chart-5: #8c7f3b;
|
|
215
|
+
--color-sidebar: #141414;
|
|
216
|
+
--color-sidebar-foreground: #8c8c8c;
|
|
217
|
+
--color-sidebar-primary: #2789f2;
|
|
218
|
+
--color-sidebar-primary-foreground: #ffffff;
|
|
219
|
+
--color-sidebar-accent: #1c1c1c;
|
|
220
|
+
--color-sidebar-accent-foreground: #2789f2;
|
|
221
|
+
--color-sidebar-border: #1c1c1c;
|
|
222
|
+
--color-sidebar-ring: #2789f2;
|
|
189
223
|
|
|
190
224
|
/* Shadow — hybridcloud shadow.X.down dark values（不透明度更高，对应深色背景上的更明显投影）*/
|
|
191
|
-
--shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.
|
|
192
|
-
--shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.
|
|
225
|
+
--shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
|
|
226
|
+
--shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
|
|
193
227
|
--shadow-2xs: 0px 1px 1px 0px rgba(0, 0, 0, 0.16);
|
|
194
|
-
--shadow-md: 0px 4px 16px 0px rgba(0, 0, 0, 0.
|
|
228
|
+
--shadow-md: 0px 4px 16px 0px rgba(0, 0, 0, 0.3);
|
|
195
229
|
--shadow-lg: 0px 6px 24px 0px rgba(0, 0, 0, 0.64);
|
|
196
|
-
--shadow-xl: 0px 12px 48px 0px rgba(0, 0, 0, 0.
|
|
197
|
-
--shadow-2xl: 0px 16px 64px 0px rgba(0, 0, 0, 0.
|
|
230
|
+
--shadow-xl: 0px 12px 48px 0px rgba(0, 0, 0, 0.8);
|
|
231
|
+
--shadow-2xl: 0px 16px 64px 0px rgba(0, 0, 0, 0.8);
|
|
198
232
|
}
|
|
199
233
|
}
|
|
234
|
+
|
|
235
|
+
/* ─────────────────────────────────────────────────────────────────────────
|
|
236
|
+
* uni-manager: Form 控件 focus / hover 行为对齐 cd hybridcloud
|
|
237
|
+
*
|
|
238
|
+
* cd hybridcloud 的 form 控件不显示品牌色 halo ring,而是:
|
|
239
|
+
* - hover: border 不变 + 柔和向下阴影(`--shadow-1-down`)
|
|
240
|
+
* - focus: border 颜色加深到中性灰(`#aaaaaa`),无 ring / 无 shadow
|
|
241
|
+
*
|
|
242
|
+
* 实现策略:
|
|
243
|
+
* 1. `--color-ring: transparent`(上方 @theme 块) — 所有 `ring-X ring-ring`
|
|
244
|
+
* 视觉静默,API 不变,opentrek 主题不受影响
|
|
245
|
+
* 2. 下方 scoped CSS 选择器 — 给 form 控件 / 其包壳 wrapper 注入
|
|
246
|
+
* focus-within border-color 深化 + hover box-shadow
|
|
247
|
+
*
|
|
248
|
+
* 命中策略 — 用 `[class*="border-input"]` 锁定"带 design token 边框"的 wrapper
|
|
249
|
+
* (Input wrapper / Select trigger / Combobox trigger / Cascader trigger / etc),
|
|
250
|
+
* 与原生 `<input>` / `<textarea>` 一并覆盖。
|
|
251
|
+
*
|
|
252
|
+
* 例外:`[aria-invalid='true']` 走 destructive 分支,disabled / readonly 不响应。
|
|
253
|
+
* ─────────────────────────────────────────────────────────────────────────── */
|
|
254
|
+
|
|
255
|
+
/**
|
|
256
|
+
* form 原生元素 — 默认无阴影,hover 时加阴影,focus 时边框深化。
|
|
257
|
+
* cd hybridcloud `.next-input` 默认状态没有 box-shadow,只在 :hover / :focus 时
|
|
258
|
+
* 加 `--active-shadow`;我们 cva base 写了 `shadow-sm` 是 shadcn opentrek 默认风格,
|
|
259
|
+
* 在 uni-manager 下需要先归零再按 cd 的节奏加。
|
|
260
|
+
*
|
|
261
|
+
* **只命中带 `border-input` 类**的输入控件 — 即真正"自带边框、独立显示"的
|
|
262
|
+
* Input / Textarea / NumberPicker;prefix/suffix 包壳内的 transparent
|
|
263
|
+
* 子输入(`bg-transparent` / 无 border 类)不应吃这套 hover/focus 反馈,
|
|
264
|
+
* 否则会在 wrapper 阴影内再叠一层"内层小阴影"。
|
|
265
|
+
*/
|
|
266
|
+
[data-theme='uni-manager'] :is(input, textarea):not(:disabled):not([readonly]) {
|
|
267
|
+
box-shadow: none;
|
|
268
|
+
}
|
|
269
|
+
[data-theme='uni-manager']
|
|
270
|
+
:is(input, textarea)[class*='border-input']:not(:disabled):not(
|
|
271
|
+
[readonly]
|
|
272
|
+
):not([aria-invalid='true']):hover {
|
|
273
|
+
box-shadow: var(--shadow-form-hover);
|
|
274
|
+
}
|
|
275
|
+
[data-theme='uni-manager']
|
|
276
|
+
:is(input, textarea)[class*='border-input']:not(:disabled):not(
|
|
277
|
+
[readonly]
|
|
278
|
+
):not([aria-invalid='true']):focus,
|
|
279
|
+
[data-theme='uni-manager']
|
|
280
|
+
:is(input, textarea)[class*='border-input']:not(:disabled):not(
|
|
281
|
+
[readonly]
|
|
282
|
+
):not([aria-invalid='true']):focus-visible {
|
|
283
|
+
border-color: var(--color-input-focus);
|
|
284
|
+
box-shadow: var(--shadow-form-hover);
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
/**
|
|
288
|
+
* form wrappers — 凭 `border-input` Tailwind 类锁定(Input prefix/suffix 包壳、
|
|
289
|
+
* Select / Combobox / Cascader / DatePicker / TreeSelect / TimePicker trigger 等)。
|
|
290
|
+
* 同样默认无阴影,hover / focus-within 才加。
|
|
291
|
+
*
|
|
292
|
+
* **关键 :not() 排除链** — 排除 Radix 组件的"激活态"(`data-state="checked"` /
|
|
293
|
+
* `"indeterminate"`(Checkbox)/ `"on"`(Toggle)/ `"checked"`(Radio/Switch)),
|
|
294
|
+
* 这些状态下组件自身已经有 `border-primary` + `bg-primary` 视觉,全局 hover/focus
|
|
295
|
+
* 规则不应再叠加中性灰边框 / 阴影 — 否则蓝底周围会包一圈灰晕(本规则之前的反复 bug)。
|
|
296
|
+
*/
|
|
297
|
+
[data-theme='uni-manager']
|
|
298
|
+
:where(div, button, span)[class*='border-input']:not([disabled]) {
|
|
299
|
+
box-shadow: none;
|
|
300
|
+
}
|
|
301
|
+
[data-theme='uni-manager']
|
|
302
|
+
:where(div, button, span)[class*='border-input']:not([disabled]):not(
|
|
303
|
+
[aria-invalid='true']
|
|
304
|
+
):not([data-state='checked']):not([data-state='indeterminate']):not(
|
|
305
|
+
[data-state='on']
|
|
306
|
+
):hover {
|
|
307
|
+
box-shadow: var(--shadow-form-hover);
|
|
308
|
+
}
|
|
309
|
+
[data-theme='uni-manager']
|
|
310
|
+
:where(div, button, span)[class*='border-input']:not([disabled]):not(
|
|
311
|
+
[aria-invalid='true']
|
|
312
|
+
):not([data-state='checked']):not([data-state='indeterminate']):not(
|
|
313
|
+
[data-state='on']
|
|
314
|
+
):focus-within,
|
|
315
|
+
[data-theme='uni-manager']
|
|
316
|
+
:where(div, button, span)[class*='border-input']:not([disabled]):not(
|
|
317
|
+
[aria-invalid='true']
|
|
318
|
+
):not([data-state='checked']):not([data-state='indeterminate']):not(
|
|
319
|
+
[data-state='on']
|
|
320
|
+
):focus-visible {
|
|
321
|
+
border-color: var(--color-input-focus);
|
|
322
|
+
box-shadow: var(--shadow-form-hover);
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
/**
|
|
326
|
+
* uni-manager: aria-invalid (error) 态下也走"中性化"焦点 —
|
|
327
|
+
* 不叠 destructive ring(`focus:ring-destructive` 默认会渲染 1px 红色 box-shadow),
|
|
328
|
+
* 只保留 1px destructive 边框,与 cd hybridcloud error 视觉一致。
|
|
329
|
+
*/
|
|
330
|
+
[data-theme='uni-manager'] :is(input, textarea)[aria-invalid='true']:focus,
|
|
331
|
+
[data-theme='uni-manager']
|
|
332
|
+
:is(input, textarea)[aria-invalid='true']:focus-visible {
|
|
333
|
+
box-shadow: none;
|
|
334
|
+
}
|
|
335
|
+
[data-theme='uni-manager'] :where(div, button, span)[aria-invalid='true']:focus,
|
|
336
|
+
[data-theme='uni-manager']
|
|
337
|
+
:where(div, button, span)[aria-invalid='true']:focus-within,
|
|
338
|
+
[data-theme='uni-manager']
|
|
339
|
+
:where(div, button, span)[aria-invalid='true']:focus-visible {
|
|
340
|
+
box-shadow: none;
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
/**
|
|
344
|
+
* uni-manager: Dialog / AlertDialog / Sheet 视觉对齐 cd hybridcloud
|
|
345
|
+
* `--dialog-*` token 真值:
|
|
346
|
+
* - dialog-corner: 2px(已由 --radius-dialog token 覆盖)
|
|
347
|
+
* - dialog-content-padding: 20px(覆盖 shadcn baseline 24px / `p-6`)
|
|
348
|
+
* - dialog-title-font-size: 16px(本库取 cd 14 + 现代视觉折中,覆盖 shadcn `text-lg` 18px)
|
|
349
|
+
*
|
|
350
|
+
* 选择器:`[data-slot='dialog-content' / 'dialog-title' / 'sheet-content' / 'sheet-title']`,
|
|
351
|
+
* 在组件源码里 hardcode 了 data-slot 属性,与 shadcn 2025 趋势一致。
|
|
352
|
+
*/
|
|
353
|
+
[data-theme='uni-manager'] [data-slot='dialog-content'] {
|
|
354
|
+
padding: 20px;
|
|
355
|
+
}
|
|
356
|
+
[data-theme='uni-manager'] [data-slot='dialog-title'] {
|
|
357
|
+
font-size: 1rem; /* 16px — 比 cd 14 略大保持可读性,比 shadcn 18 紧凑 */
|
|
358
|
+
line-height: 1.5rem;
|
|
359
|
+
}
|
|
360
|
+
[data-theme='uni-manager'] [data-slot='sheet-content'] {
|
|
361
|
+
padding: 20px;
|
|
362
|
+
}
|
|
363
|
+
[data-theme='uni-manager'] [data-slot='sheet-title'] {
|
|
364
|
+
font-size: 1rem;
|
|
365
|
+
line-height: 1.5rem;
|
|
366
|
+
}
|