@dsh-plugin/dsh-ui-components 0.0.1 → 0.1.0-dev.43616582648

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 (65) hide show
  1. package/LICENSE +21 -21
  2. package/NOTICE +21 -21
  3. package/README.md +136 -136
  4. package/README.zh_CN.md +136 -136
  5. package/docs/tokens.md +67 -67
  6. package/lib/basic/form.js +49 -49
  7. package/lib/basic/styles.js +391 -391
  8. package/lib/composites/styles.js +427 -427
  9. package/lib/data/styles.js +257 -257
  10. package/lib/display/styles.js +310 -310
  11. package/lib/feedback/styles.js +228 -228
  12. package/lib/foundation/bridge.js +203 -203
  13. package/lib/navigation/styles.js +417 -417
  14. package/package.json +104 -104
  15. package/scripts/check-size.mjs +69 -69
  16. package/scripts/dump-npm-latest.mjs +59 -59
  17. package/scripts/gen-host-tokens.mjs +61 -61
  18. package/scripts/gen-icons.mjs +188 -178
  19. package/scripts/verify-no-literal-colors.mjs +63 -63
  20. package/scripts/verify-tokens.mjs +135 -135
  21. package/src/basic/button.tsx +76 -76
  22. package/src/basic/form.tsx +187 -187
  23. package/src/basic/icon-button.tsx +66 -66
  24. package/src/basic/index.ts +38 -38
  25. package/src/basic/input.tsx +140 -140
  26. package/src/basic/select.tsx +120 -120
  27. package/src/basic/styles.ts +412 -412
  28. package/src/basic/toggle.tsx +116 -116
  29. package/src/composites/data-view.tsx +189 -189
  30. package/src/composites/index.ts +11 -11
  31. package/src/composites/indicator.tsx +90 -90
  32. package/src/composites/menu-select.tsx +230 -230
  33. package/src/composites/panel.tsx +72 -72
  34. package/src/composites/settings.tsx +80 -80
  35. package/src/composites/styles.ts +450 -450
  36. package/src/data/collection.tsx +71 -71
  37. package/src/data/index.ts +39 -39
  38. package/src/data/info.tsx +89 -89
  39. package/src/data/picker.tsx +113 -113
  40. package/src/data/styles.ts +278 -278
  41. package/src/display/container.tsx +67 -67
  42. package/src/display/feedback.tsx +92 -92
  43. package/src/display/index.ts +44 -44
  44. package/src/display/label.tsx +165 -165
  45. package/src/display/overlay.tsx +103 -103
  46. package/src/display/styles.ts +332 -332
  47. package/src/feedback/global.tsx +110 -110
  48. package/src/feedback/index.ts +19 -19
  49. package/src/feedback/inline.tsx +50 -50
  50. package/src/feedback/panel.tsx +93 -93
  51. package/src/feedback/styles.ts +250 -250
  52. package/src/foundation/bridge.ts +318 -318
  53. package/src/foundation/icons.tsx +315 -315
  54. package/src/foundation/index.ts +33 -33
  55. package/src/foundation/palette.ts +153 -153
  56. package/src/foundation/provider.tsx +62 -62
  57. package/src/foundation/style.ts +63 -63
  58. package/src/foundation/tokens.ts +62 -62
  59. package/src/index.ts +18 -18
  60. package/src/navigation/hierarchy.tsx +82 -82
  61. package/src/navigation/index.ts +21 -21
  62. package/src/navigation/indicator.tsx +125 -125
  63. package/src/navigation/menu.tsx +94 -94
  64. package/src/navigation/segmented.tsx +136 -136
  65. package/src/navigation/styles.ts +438 -438
package/lib/feedback/styles.js CHANGED
@@ -9,234 +9,234 @@
9
9
  import { injectUiStyle } from '../foundation/style.js';
10
10
  import { G } from '../foundation/tokens.js';
11
11
  /** 反馈与浮层样式表。 */
12
- export const FEEDBACK_CSS = `
13
- /* ── 提示条 ─────────────────────────────────────────────────────── */
14
- .dsh-ui .arco-alert {
15
- border-radius: var(--dsw-radius-lg, 16px);
16
- border: 0.5px solid var(--dsw-alias-border-l2);
17
- font-size: 14px;
18
- line-height: 22px;
19
- padding: 12px 16px;
20
- }
21
-
22
- .dsh-ui .arco-alert-info {
23
- border-color: color-mix(in srgb, var(--dsw-alias-state-business-primary) 28%, transparent);
24
- background-color: color-mix(in srgb, var(--dsw-alias-state-business-primary) 8%, transparent);
25
- color: var(--dsw-alias-label-primary);
26
- }
27
-
28
- .dsh-ui .arco-alert-success {
29
- border-color: color-mix(in srgb, var(--dsw-alias-state-success-primary) 28%, transparent);
30
- background-color: color-mix(in srgb, var(--dsw-alias-state-success-primary) 8%, transparent);
31
- color: var(--dsw-alias-label-primary);
32
- }
33
-
34
- .dsh-ui .arco-alert-warning {
35
- border-color: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 32%, transparent);
36
- background-color: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 10%, transparent);
37
- color: var(--dsw-alias-label-primary);
38
- }
39
-
40
- .dsh-ui .arco-alert-error {
41
- border-color: color-mix(in srgb, var(--dsw-alias-state-error-primary) 28%, transparent);
42
- background-color: color-mix(in srgb, var(--dsw-alias-state-error-primary) 8%, transparent);
43
- color: var(--dsw-alias-label-primary);
44
- }
45
-
46
- .dsh-ui .arco-alert-title {
47
- font-size: 14px;
48
- line-height: 22px;
49
- font-weight: 500;
50
- }
51
-
52
- .dsh-ui .arco-alert-content {
53
- font-size: 13px;
54
- line-height: 20px;
55
- color: var(--dsw-alias-label-secondary);
56
- }
57
-
58
- /* ── 弹窗 ───────────────────────────────────────────────────────── */
59
- .dsh-ui-overlay .arco-modal-mask,
60
- .dsh-ui .arco-modal-mask {
61
- background-color: var(--dsw-alias-bg-mask-1);
62
- backdrop-filter: none;
63
- }
64
-
65
- .dsh-ui-overlay .arco-modal,
66
- .dsh-ui .arco-modal {
67
- border-radius: var(--dsw-radius-panel, 28px);
68
- border: 0;
69
- box-shadow: var(--dsw-elevation-prominent);
70
- background-color: var(--dsw-alias-bg-layer-2);
71
- max-height: calc(100dvh - ${G.overlayMargin * 2}px);
72
- overflow: hidden;
73
- display: flex;
74
- flex-direction: column;
75
- }
76
-
77
- .dsh-ui-overlay .arco-modal-header,
78
- .dsh-ui .arco-modal-header {
79
- border-bottom: 0.5px solid var(--dsw-alias-border-l1);
80
- padding: 20px 24px 14px;
81
- flex: none;
82
- }
83
-
84
- .dsh-ui-overlay .arco-modal-title,
85
- .dsh-ui .arco-modal-title {
86
- font-size: 16px;
87
- line-height: 24px;
88
- font-weight: 500;
89
- color: var(--dsw-alias-label-primary);
90
- text-align: left;
91
- }
92
-
93
- .dsh-ui-overlay .arco-modal-content,
94
- .dsh-ui .arco-modal-content {
95
- padding: 16px 24px;
96
- font-size: 14px;
97
- line-height: 22px;
98
- color: var(--dsw-alias-label-primary);
99
- overflow: auto;
100
- min-height: 0;
101
- }
102
-
103
- .dsh-ui-overlay .arco-modal-footer,
104
- .dsh-ui .arco-modal-footer {
105
- border-top: 0.5px solid var(--dsw-alias-border-l1);
106
- padding: 14px 24px;
107
- flex: none;
108
- }
109
-
110
- /* ── 抽屉 ───────────────────────────────────────────────────────── */
111
- .dsh-ui-overlay .arco-drawer,
112
- .dsh-ui .arco-drawer {
113
- background-color: var(--dsw-alias-bg-layer-2);
114
- border: 0;
115
- max-height: calc(100dvh - ${G.overlayMargin * 2}px);
116
- }
117
-
118
- .dsh-ui-overlay .arco-drawer-header,
119
- .dsh-ui .arco-drawer-header {
120
- border-bottom: 0.5px solid var(--dsw-alias-border-l1);
121
- height: auto;
122
- padding: 18px 24px;
123
- }
124
-
125
- .dsh-ui-overlay .arco-drawer-title,
126
- .dsh-ui .arco-drawer-title {
127
- font-size: 16px;
128
- line-height: 24px;
129
- font-weight: 500;
130
- color: var(--dsw-alias-label-primary);
131
- }
132
-
133
- .dsh-ui-overlay .arco-drawer-content,
134
- .dsh-ui .arco-drawer-content {
135
- padding: 20px 24px;
136
- font-size: 14px;
137
- line-height: 22px;
138
- color: var(--dsw-alias-label-primary);
139
- overflow: auto;
140
- }
141
-
142
- /* ── 全局消息 ───────────────────────────────────────────────────── */
143
- .dsh-ui-overlay .arco-message,
144
- .dsh-ui .arco-message {
145
- border-radius: var(--dsw-radius-lg, 16px);
146
- border: 0;
147
- background-color: var(--dsw-alias-toast-bg);
148
- color: var(--dsw-alias-toast-label);
149
- box-shadow: var(--dsw-shadow-lv3);
150
- font-size: 14px;
151
- line-height: 22px;
152
- padding: 12px 16px;
153
- }
154
-
155
- .dsh-ui-overlay .arco-message-success .arco-message-icon,
156
- .dsh-ui .arco-message-success .arco-message-icon {
157
- color: var(--dsw-alias-state-success-primary);
158
- }
159
-
160
- .dsh-ui-overlay .arco-message-error .arco-message-icon,
161
- .dsh-ui .arco-message-error .arco-message-icon {
162
- color: var(--dsw-alias-state-error-primary);
163
- }
164
-
165
- .dsh-ui-overlay .arco-message-warning .arco-message-icon,
166
- .dsh-ui .arco-message-warning .arco-message-icon {
167
- color: var(--dsw-alias-state-warn-label);
168
- }
169
-
170
- .dsh-ui-overlay .arco-notification,
171
- .dsh-ui .arco-notification {
172
- border-radius: var(--dsw-radius-xl, 20px);
173
- border: 0;
174
- background-color: var(--dsw-alias-bg-layer-2);
175
- box-shadow: var(--dsw-elevation-prominent);
176
- }
177
-
178
- .dsh-ui-overlay .arco-notification-title,
179
- .dsh-ui .arco-notification-title {
180
- font-size: 15px;
181
- line-height: 22px;
182
- font-weight: 500;
183
- color: var(--dsw-alias-label-primary);
184
- }
185
-
186
- .dsh-ui-overlay .arco-notification-content,
187
- .dsh-ui .arco-notification-content {
188
- font-size: 13px;
189
- line-height: 20px;
190
- color: var(--dsw-alias-label-secondary);
191
- }
192
-
193
- /* ── 进度与结果 ─────────────────────────────────────────────────── */
194
- .dsh-ui .arco-progress-line-outer {
195
- background-color: var(--dsw-alias-border-l2);
196
- border-radius: 999px;
197
- corner-shape: round;
198
- }
199
-
200
- .dsh-ui .arco-progress-line-inner {
201
- border-radius: 999px;
202
- corner-shape: round;
203
- background-color: var(--dsw-alias-brand-primary);
204
- }
205
-
206
- .dsh-ui .arco-progress-line-text {
207
- font-size: 12px;
208
- line-height: 18px;
209
- color: var(--dsw-alias-label-tertiary);
210
- }
211
-
212
- .dsh-ui .arco-result-title {
213
- font-size: 19px;
214
- line-height: 28px;
215
- color: var(--dsw-alias-label-primary);
216
- }
217
-
218
- .dsh-ui .arco-result-subtitle {
219
- font-size: 13px;
220
- line-height: 20px;
221
- color: var(--dsw-alias-label-tertiary);
222
- }
223
-
224
- /* ── 确认气泡 ───────────────────────────────────────────────────── */
225
- .dsh-ui-overlay .arco-popconfirm-content,
226
- .dsh-ui .arco-popconfirm-content {
227
- border-radius: var(--dsw-radius-lg, 16px);
228
- border: 0;
229
- background: var(--dsw-specific-menu, var(--dsw-alias-bg-layer-2));
230
- box-shadow: var(--dsw-elevation-prominent);
231
- color: var(--dsw-alias-label-primary);
232
- }
233
-
234
- @media (prefers-reduced-motion: reduce) {
235
- .dsh-ui-overlay .arco-modal,
236
- .dsh-ui .arco-modal {
237
- animation: none;
238
- }
239
- }
12
+ export const FEEDBACK_CSS = `
13
+ /* ── 提示条 ─────────────────────────────────────────────────────── */
14
+ .dsh-ui .arco-alert {
15
+ border-radius: var(--dsw-radius-lg, 16px);
16
+ border: 0.5px solid var(--dsw-alias-border-l2);
17
+ font-size: 14px;
18
+ line-height: 22px;
19
+ padding: 12px 16px;
20
+ }
21
+
22
+ .dsh-ui .arco-alert-info {
23
+ border-color: color-mix(in srgb, var(--dsw-alias-state-business-primary) 28%, transparent);
24
+ background-color: color-mix(in srgb, var(--dsw-alias-state-business-primary) 8%, transparent);
25
+ color: var(--dsw-alias-label-primary);
26
+ }
27
+
28
+ .dsh-ui .arco-alert-success {
29
+ border-color: color-mix(in srgb, var(--dsw-alias-state-success-primary) 28%, transparent);
30
+ background-color: color-mix(in srgb, var(--dsw-alias-state-success-primary) 8%, transparent);
31
+ color: var(--dsw-alias-label-primary);
32
+ }
33
+
34
+ .dsh-ui .arco-alert-warning {
35
+ border-color: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 32%, transparent);
36
+ background-color: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 10%, transparent);
37
+ color: var(--dsw-alias-label-primary);
38
+ }
39
+
40
+ .dsh-ui .arco-alert-error {
41
+ border-color: color-mix(in srgb, var(--dsw-alias-state-error-primary) 28%, transparent);
42
+ background-color: color-mix(in srgb, var(--dsw-alias-state-error-primary) 8%, transparent);
43
+ color: var(--dsw-alias-label-primary);
44
+ }
45
+
46
+ .dsh-ui .arco-alert-title {
47
+ font-size: 14px;
48
+ line-height: 22px;
49
+ font-weight: 500;
50
+ }
51
+
52
+ .dsh-ui .arco-alert-content {
53
+ font-size: 13px;
54
+ line-height: 20px;
55
+ color: var(--dsw-alias-label-secondary);
56
+ }
57
+
58
+ /* ── 弹窗 ───────────────────────────────────────────────────────── */
59
+ .dsh-ui-overlay .arco-modal-mask,
60
+ .dsh-ui .arco-modal-mask {
61
+ background-color: var(--dsw-alias-bg-mask-1);
62
+ backdrop-filter: none;
63
+ }
64
+
65
+ .dsh-ui-overlay .arco-modal,
66
+ .dsh-ui .arco-modal {
67
+ border-radius: var(--dsw-radius-panel, 28px);
68
+ border: 0;
69
+ box-shadow: var(--dsw-elevation-prominent);
70
+ background-color: var(--dsw-alias-bg-layer-2);
71
+ max-height: calc(100dvh - ${G.overlayMargin * 2}px);
72
+ overflow: hidden;
73
+ display: flex;
74
+ flex-direction: column;
75
+ }
76
+
77
+ .dsh-ui-overlay .arco-modal-header,
78
+ .dsh-ui .arco-modal-header {
79
+ border-bottom: 0.5px solid var(--dsw-alias-border-l1);
80
+ padding: 20px 24px 14px;
81
+ flex: none;
82
+ }
83
+
84
+ .dsh-ui-overlay .arco-modal-title,
85
+ .dsh-ui .arco-modal-title {
86
+ font-size: 16px;
87
+ line-height: 24px;
88
+ font-weight: 500;
89
+ color: var(--dsw-alias-label-primary);
90
+ text-align: left;
91
+ }
92
+
93
+ .dsh-ui-overlay .arco-modal-content,
94
+ .dsh-ui .arco-modal-content {
95
+ padding: 16px 24px;
96
+ font-size: 14px;
97
+ line-height: 22px;
98
+ color: var(--dsw-alias-label-primary);
99
+ overflow: auto;
100
+ min-height: 0;
101
+ }
102
+
103
+ .dsh-ui-overlay .arco-modal-footer,
104
+ .dsh-ui .arco-modal-footer {
105
+ border-top: 0.5px solid var(--dsw-alias-border-l1);
106
+ padding: 14px 24px;
107
+ flex: none;
108
+ }
109
+
110
+ /* ── 抽屉 ───────────────────────────────────────────────────────── */
111
+ .dsh-ui-overlay .arco-drawer,
112
+ .dsh-ui .arco-drawer {
113
+ background-color: var(--dsw-alias-bg-layer-2);
114
+ border: 0;
115
+ max-height: calc(100dvh - ${G.overlayMargin * 2}px);
116
+ }
117
+
118
+ .dsh-ui-overlay .arco-drawer-header,
119
+ .dsh-ui .arco-drawer-header {
120
+ border-bottom: 0.5px solid var(--dsw-alias-border-l1);
121
+ height: auto;
122
+ padding: 18px 24px;
123
+ }
124
+
125
+ .dsh-ui-overlay .arco-drawer-title,
126
+ .dsh-ui .arco-drawer-title {
127
+ font-size: 16px;
128
+ line-height: 24px;
129
+ font-weight: 500;
130
+ color: var(--dsw-alias-label-primary);
131
+ }
132
+
133
+ .dsh-ui-overlay .arco-drawer-content,
134
+ .dsh-ui .arco-drawer-content {
135
+ padding: 20px 24px;
136
+ font-size: 14px;
137
+ line-height: 22px;
138
+ color: var(--dsw-alias-label-primary);
139
+ overflow: auto;
140
+ }
141
+
142
+ /* ── 全局消息 ───────────────────────────────────────────────────── */
143
+ .dsh-ui-overlay .arco-message,
144
+ .dsh-ui .arco-message {
145
+ border-radius: var(--dsw-radius-lg, 16px);
146
+ border: 0;
147
+ background-color: var(--dsw-alias-toast-bg);
148
+ color: var(--dsw-alias-toast-label);
149
+ box-shadow: var(--dsw-shadow-lv3);
150
+ font-size: 14px;
151
+ line-height: 22px;
152
+ padding: 12px 16px;
153
+ }
154
+
155
+ .dsh-ui-overlay .arco-message-success .arco-message-icon,
156
+ .dsh-ui .arco-message-success .arco-message-icon {
157
+ color: var(--dsw-alias-state-success-primary);
158
+ }
159
+
160
+ .dsh-ui-overlay .arco-message-error .arco-message-icon,
161
+ .dsh-ui .arco-message-error .arco-message-icon {
162
+ color: var(--dsw-alias-state-error-primary);
163
+ }
164
+
165
+ .dsh-ui-overlay .arco-message-warning .arco-message-icon,
166
+ .dsh-ui .arco-message-warning .arco-message-icon {
167
+ color: var(--dsw-alias-state-warn-label);
168
+ }
169
+
170
+ .dsh-ui-overlay .arco-notification,
171
+ .dsh-ui .arco-notification {
172
+ border-radius: var(--dsw-radius-xl, 20px);
173
+ border: 0;
174
+ background-color: var(--dsw-alias-bg-layer-2);
175
+ box-shadow: var(--dsw-elevation-prominent);
176
+ }
177
+
178
+ .dsh-ui-overlay .arco-notification-title,
179
+ .dsh-ui .arco-notification-title {
180
+ font-size: 15px;
181
+ line-height: 22px;
182
+ font-weight: 500;
183
+ color: var(--dsw-alias-label-primary);
184
+ }
185
+
186
+ .dsh-ui-overlay .arco-notification-content,
187
+ .dsh-ui .arco-notification-content {
188
+ font-size: 13px;
189
+ line-height: 20px;
190
+ color: var(--dsw-alias-label-secondary);
191
+ }
192
+
193
+ /* ── 进度与结果 ─────────────────────────────────────────────────── */
194
+ .dsh-ui .arco-progress-line-outer {
195
+ background-color: var(--dsw-alias-border-l2);
196
+ border-radius: 999px;
197
+ corner-shape: round;
198
+ }
199
+
200
+ .dsh-ui .arco-progress-line-inner {
201
+ border-radius: 999px;
202
+ corner-shape: round;
203
+ background-color: var(--dsw-alias-brand-primary);
204
+ }
205
+
206
+ .dsh-ui .arco-progress-line-text {
207
+ font-size: 12px;
208
+ line-height: 18px;
209
+ color: var(--dsw-alias-label-tertiary);
210
+ }
211
+
212
+ .dsh-ui .arco-result-title {
213
+ font-size: 19px;
214
+ line-height: 28px;
215
+ color: var(--dsw-alias-label-primary);
216
+ }
217
+
218
+ .dsh-ui .arco-result-subtitle {
219
+ font-size: 13px;
220
+ line-height: 20px;
221
+ color: var(--dsw-alias-label-tertiary);
222
+ }
223
+
224
+ /* ── 确认气泡 ───────────────────────────────────────────────────── */
225
+ .dsh-ui-overlay .arco-popconfirm-content,
226
+ .dsh-ui .arco-popconfirm-content {
227
+ border-radius: var(--dsw-radius-lg, 16px);
228
+ border: 0;
229
+ background: var(--dsw-specific-menu, var(--dsw-alias-bg-layer-2));
230
+ box-shadow: var(--dsw-elevation-prominent);
231
+ color: var(--dsw-alias-label-primary);
232
+ }
233
+
234
+ @media (prefers-reduced-motion: reduce) {
235
+ .dsh-ui-overlay .arco-modal,
236
+ .dsh-ui .arco-modal {
237
+ animation: none;
238
+ }
239
+ }
240
240
  `;
241
241
  /**
242
242
  * 注入反馈与浮层样式。幂等。