@semi-bot/semi-theme-hx-pc 1.0.0 → 1.0.1

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 (8) hide show
  1. package/README.md +1 -1
  2. package/package.json +1 -1
  3. package/raw.json +46 -40
  4. package/scss/_palette.scss +10 -10
  5. package/scss/global.scss +32 -30
  6. package/scss/local.scss +4 -0
  7. package/semi.css +46 -44
  8. package/semi.min.css +1 -1
package/README.md CHANGED
@@ -9,7 +9,7 @@ Compatible with Semi Foundation Version 2.92.2 or newer.
9
9
 
10
10
  ## Version Release Note
11
11
 
12
- 深色模式初始化
12
+ 调整 select 和 button 组件样式
13
13
 
14
14
 
15
15
  ## Manual
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@semi-bot/semi-theme-hx-pc",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "Semi theme generated by dsm. https://semi.design/dsm",
5
5
  "keywords": [
6
6
  "semi-theme",
package/raw.json CHANGED
@@ -267,16 +267,16 @@
267
267
  "--semi-amber-7": "169,145,10",
268
268
  "--semi-amber-8": "127,110,6",
269
269
  "--semi-amber-9": "84,75,3",
270
- "--semi-brand-0": "233,244,251",
271
- "--semi-brand-1": "201,230,246",
272
- "--semi-brand-2": "150,204,238",
273
- "--semi-brand-3": "103,178,229",
274
- "--semi-brand-4": "58,153,221",
275
- "--semi-brand-5": "17,127,212",
276
- "--semi-brand-6": "9,101,176",
277
- "--semi-brand-7": "3,76,141",
278
- "--semi-brand-8": "0,54,105",
279
- "--semi-brand-9": "0,34,69",
270
+ "--semi-brand-0": "209,236,255",
271
+ "--semi-brand-1": "163,217,255",
272
+ "--semi-brand-2": "117,198,255",
273
+ "--semi-brand-3": "71,179,255",
274
+ "--semi-brand-4": "25,160,255",
275
+ "--semi-brand-5": "0,118,209",
276
+ "--semi-brand-6": "0,78,150",
277
+ "--semi-brand-7": "0,44,92",
278
+ "--semi-brand-8": "0,26,61",
279
+ "--semi-brand-9": "0,17,43",
280
280
  "--semi-green-0": "237,248,239",
281
281
  "--semi-green-1": "211,240,215",
282
282
  "--semi-green-2": "170,226,179",
@@ -362,11 +362,11 @@
362
362
  "tokens": {
363
363
  "color": {
364
364
  "dark": {
365
- "bg/--semi-color-bg-0": "rgba(22,22,26,1)",
366
- "bg/--semi-color-bg-1": "rgba(35, 36, 41, 1)",
367
- "bg/--semi-color-bg-2": "rgba(53, 54, 60, 1)",
368
- "bg/--semi-color-bg-3": "rgba(67, 68, 74, 1)",
369
- "bg/--semi-color-bg-4": "rgba(79, 81, 89, 1)",
365
+ "bg/--semi-color-bg-0": "rgba(var(--semi-grey-0),1)",
366
+ "bg/--semi-color-bg-1": "rgba(var(--semi-grey-1), 1)",
367
+ "bg/--semi-color-bg-2": "rgba(var(--semi-grey-2), 1)",
368
+ "bg/--semi-color-bg-3": "rgba(var(--semi-grey-3), 1)",
369
+ "bg/--semi-color-bg-4": "rgba(var(--semi-grey-4),1)",
370
370
  "info/--semi-color-info": "rgba(var(--semi-blue-5), 1)",
371
371
  "link/--semi-color-link": "rgba(var(--semi-blue-4),1)",
372
372
  "nav/--semi-color-nav-bg": "rgba(35, 36, 41, 1)",
@@ -388,9 +388,9 @@
388
388
  "fall/--semi-color-fall-4": "rgba(var(--semi-green-4),1)",
389
389
  "fall/--semi-color-fall-5": "rgba(var(--semi-green-3),1)",
390
390
  "fill/--semi-color-fill-0": "rgba(var(--semi-grey-4),0.05)",
391
- "fill/--semi-color-fill-1": "rgba(var(--semi-grey-3), 0.09)",
392
- "fill/--semi-color-fill-2": "rgba(var(--semi-grey-2), 0.13)",
393
- "fill/--semi-color-fill-3": "rgba(var(--semi-grey-1), 1)",
391
+ "fill/--semi-color-fill-1": "rgba(var(--semi-grey-3),0.09)",
392
+ "fill/--semi-color-fill-2": "rgba(var(--semi-grey-2),0.13)",
393
+ "fill/--semi-color-fill-3": "rgba(var(--semi-grey-1),1)",
394
394
  "fill/--semi-color-fill-4": "rgba(var(--semi-grey-0), 1)",
395
395
  "fill/--semi-color-fill-5": "rgba(0,0,0,1)",
396
396
  "rise/--semi-color-rise-1": "rgba(var(--semi-red-8),1)",
@@ -398,10 +398,11 @@
398
398
  "rise/--semi-color-rise-3": "rgba(var(--semi-red-5),1)",
399
399
  "rise/--semi-color-rise-4": "rgba(var(--semi-red-4),1)",
400
400
  "rise/--semi-color-rise-5": "rgba(var(--semi-red-3),1)",
401
- "text/--semi-color-text-0": "rgba(var(--semi-grey-9),1)",
402
- "text/--semi-color-text-1": "rgba(var(--semi-grey-7),0.8)",
403
- "text/--semi-color-text-2": "rgba(var(--semi-grey-5),0.6)",
404
- "text/--semi-color-text-3": "rgba(var(--semi-grey-3),0.35)",
401
+ "text/--semi-color-text-0": "rgba(255,255,255,1)",
402
+ "text/--semi-color-text-1": "rgba(var(--semi-grey-9),1)",
403
+ "text/--semi-color-text-2": "rgba(var(--semi-grey-7),1)",
404
+ "text/--semi-color-text-3": "rgba(var(--semi-grey-5),1)",
405
+ "text/--semi-color-text-4": "rgba(var(--semi-grey-3),1)",
405
406
  "white/--semi-color-white": "rgba(255,255,255,1)",
406
407
  "data/--semi-color-data-10": "rgba(16, 162, 180, 1)",
407
408
  "data/--semi-color-data-11": "rgba(208, 110, 11, 1)",
@@ -413,12 +414,12 @@
413
414
  "data/--semi-color-data-17": "rgba(98, 138, 6, 1)",
414
415
  "data/--semi-color-data-18": "rgba(162, 48, 179, 1)",
415
416
  "data/--semi-color-data-19": "rgba(40, 51, 138, 1)",
416
- "border/--semi-color-border": "rgba(var(--semi-grey-9), 0.08)",
417
+ "border/--semi-color-border": "rgba(var(--semi-grey-9),0.08)",
417
418
  "danger/--semi-color-danger": "rgba(var(--semi-red-4), 1)",
418
419
  "shadow/--semi-color-shadow": "rgba(var(--semi-black),0.04)",
419
420
  "border/--semi-color-border-0": "rgba(var(--semi-grey-5), 1)",
420
421
  "border/--semi-color-border-1": "rgba(var(--semi-grey-4), 1)",
421
- "border/--semi-color-border-2": "rgba(var(--semi-grey-3), 1)",
422
+ "border/--semi-color-border-2": "rgba(var(--semi-grey-3),1)",
422
423
  "border/--semi-color-border-3": "rgba(var(--semi-grey-2), 1)",
423
424
  "border/--semi-color-border-4": "rgba(var(--semi-grey-1),1)",
424
425
  "default/--semi-color-default": "rgba(var(--semi-grey-0),1)",
@@ -433,10 +434,10 @@
433
434
  "tertiary/--semi-color-tertiary": "rgba(var(--semi-green-4),1)",
434
435
  "focus/--semi-color-focus-border": "rgba(var(--semi-brand-5), 1)",
435
436
  "info/--semi-color-info-disabled": "rgba(var(--semi-blue-2), 1)",
436
- "overlay/--semi-color-overlay-bg": "rgba(22, 22, 26, 0.6)",
437
+ "overlay/--semi-color-overlay-bg": "rgba(22,22,26,0.6)",
437
438
  "danger/--semi-color-danger-hover": "rgba(var(--semi-red-5), 1)",
438
- "highlight/--semi-color-highlight": "rgba(var(--semi-white), 1)",
439
- "secondary/--semi-color-secondary": "rgba(var(--semi-red-4),1)",
439
+ "highlight/--semi-color-highlight": "rgba(var(--semi-white),1)",
440
+ "secondary/--semi-color-secondary": "rgba(var(--semi-grey-4), 1)",
440
441
  "danger/--semi-color-danger-active": "rgba(var(--semi-red-3), 1)",
441
442
  "disabled/--semi-color-disabled-bg": "rgba(var(--semi-grey-1), 1)",
442
443
  "default/--semi-color-default-hover": "rgba(var(--semi-grey-1), 1)",
@@ -445,29 +446,30 @@
445
446
  "warning/--semi-color-warning-hover": "rgba(var(--semi-yellow-5),1)",
446
447
  "danger/--semi-color-danger-disabled": "rgba(var(--semi-red-2),1)",
447
448
  "default/--semi-color-default-active": "rgba(var(--semi-grey-2), 1)",
448
- "disabled/--semi-color-disabled-fill": "rgba(var(--semi-grey-8), 0.04)",
449
- "disabled/--semi-color-disabled-text": "rgba(var(--semi-grey-9), 0.35)",
449
+ "disabled/--semi-color-disabled-fill": "rgba(var(--semi-grey-8),0.04)",
450
+ "disabled/--semi-color-disabled-text": "rgba(var(--semi-grey-9),0.35)",
450
451
  "highlight/--semi-color-highlight-bg": "rgba(var(--semi-yellow-2), 1)",
451
452
  "primary/--semi-color-primary-active": "rgba(var(--semi-brand-4),1)",
452
453
  "success/--semi-color-success-active": "rgba(var(--semi-cyan-3),1)",
453
454
  "warning/--semi-color-warning-active": "rgba(var(--semi-yellow-3),1)",
454
455
  "tertiary/--semi-color-tertiary-hover": "rgba(var(--semi-green-5),1)",
456
+ "transparent/--semi-color-transparent": "rgba(var(--semi-grey-3),0)",
455
457
  "disabled/--semi-color-disabled-border": "rgba(var(--semi-grey-1), 1)",
456
458
  "primary/--semi-color-primary-disabled": "rgba(var(--semi-brand-2), 1)",
457
459
  "success/--semi-color-success-disabled": "rgba(var(--semi-cyan-2), 1)",
458
460
  "tertiary/--semi-color-tertiary-active": "rgba(var(--semi-green-3),1)",
459
461
  "warning/--semi-color-warning-disabled": "rgba(var(--semi-yellow-2),1)",
460
- "secondary/--semi-color-secondary-hover": "rgba(var(--semi-red-5),1)",
461
- "secondary/--semi-color-secondary-active": "rgba(var(--semi-red-3),1)",
462
+ "secondary/--semi-color-secondary-hover": "rgba(var(--semi-grey-5), 1)",
463
+ "secondary/--semi-color-secondary-active": "rgba(var(--semi-grey-3), 1)",
462
464
  "tertiary/--semi-color-tertiary-disabled": "rgba(var(--semi-green-2),1)",
463
- "info-light/--semi-color-info-light-hover": "rgba(var(--semi-blue-5), 0.3)",
464
- "info-light/--semi-color-info-light-active": "rgba(var(--semi-blue-5), 0.4)",
465
- "secondary/--semi-color-secondary-disabled": "rgba(var(--semi-red-2),1)",
466
- "info-light/--semi-color-info-light-default": "rgba(var(--semi-blue-5), 0.2)",
467
- "danger-light/--semi-color-danger-light-hover": "rgba(var(--semi-red-5), 0.3)",
465
+ "info-light/--semi-color-info-light-hover": "rgba(var(--semi-blue-5),0.3)",
466
+ "info-light/--semi-color-info-light-active": "rgba(var(--semi-blue-5),0.4)",
467
+ "secondary/--semi-color-secondary-disabled": "rgba(var(--semi-grey-2), 1)",
468
+ "info-light/--semi-color-info-light-default": "rgba(var(--semi-blue-5),0.2)",
469
+ "danger-light/--semi-color-danger-light-hover": "rgba(var(--semi-red-5),0.3)",
468
470
  "danger-light/--semi-color-danger-light-active": "rgba(var(--semi-red-5),0.4)",
469
- "danger-light/--semi-color-danger-light-default": "rgba(var(--semi-red-5), 0.2)",
470
- "primary-light/--semi-color-primary-light-hover": "rgba(var(--semi-brand-5), 0.3)",
471
+ "danger-light/--semi-color-danger-light-default": "rgba(var(--semi-red-5),0.2)",
472
+ "primary-light/--semi-color-primary-light-hover": "rgba(var(--semi-brand-5),0.3)",
471
473
  "success-light/--semi-color-success-light-hover": "rgba(var(--semi-green-5),0.3)",
472
474
  "warning-light/--semi-color-warning-light-hover": "rgba(var(--semi-orange-5),0.3)",
473
475
  "primary-light/--semi-color-primary-light-active": "rgba(var(--semi-brand-5),0.4)",
@@ -722,12 +724,16 @@
722
724
  },
723
725
  "button": {
724
726
  "color": {
727
+ "$color-button_secondary-text-default": "var(--semi-color-text-2)",
725
728
  "$color-button_disabled_danger-bg-default": "var(--semi-color-danger-disabled)",
726
729
  "$color-button_disabled_primary-bg-default": "var(--semi-color-primary-disabled)",
727
730
  "$color-button_disabled_warning-bg-default": "var(--semi-color-warning-disabled)",
728
731
  "$color-button_tertiary_solid-text-default": "var(--semi-color-tertiary)",
729
732
  "$color-button_disabled_tertiary-bg-default": "var(--semi-color-tertiary-disabled)",
730
- "$color-button_disabled_secondary-bg-default": "var(--semi-color-secondary-disabled)"
733
+ "$color-button_disabled_secondary-bg-default": "var(--semi-color-secondary-disabled)",
734
+ "$color-button_primary_outline-border-default": "rgba(23, 144, 255, 0.52)",
735
+ "$color-button_secondary_outline-border-default": "var(--semi-color-border-1)",
736
+ "$color-button_secondary_borderless-text-default": "var(--semi-color-text-1)"
731
737
  },
732
738
  "height": {
733
739
  "$height-button_large": "32px",
@@ -815,7 +821,7 @@
815
821
  "--semi-border-radius-small": "2px",
816
822
  "--semi-border-radius-circle": "50%",
817
823
  "--semi-border-radius-medium": "6px",
818
- "--semi-border-radius-extra-small": "3px"
824
+ "--semi-border-radius-extra-small": "2px"
819
825
  },
820
826
  "typography-base": {
821
827
  "scale": "default",
package/scss/_palette.scss CHANGED
@@ -81,16 +81,16 @@ body, body[theme-mode="dark"] .semi-always-light, :host, :host .semi-always-ligh
81
81
  --semi-amber-7: 169,145,10;
82
82
  --semi-amber-8: 127,110,6;
83
83
  --semi-amber-9: 84,75,3;
84
- --semi-brand-0: 233,244,251;
85
- --semi-brand-1: 201,230,246;
86
- --semi-brand-2: 150,204,238;
87
- --semi-brand-3: 103,178,229;
88
- --semi-brand-4: 58,153,221;
89
- --semi-brand-5: 17,127,212;
90
- --semi-brand-6: 9,101,176;
91
- --semi-brand-7: 3,76,141;
92
- --semi-brand-8: 0,54,105;
93
- --semi-brand-9: 0,34,69;
84
+ --semi-brand-0: 209,236,255;
85
+ --semi-brand-1: 163,217,255;
86
+ --semi-brand-2: 117,198,255;
87
+ --semi-brand-3: 71,179,255;
88
+ --semi-brand-4: 25,160,255;
89
+ --semi-brand-5: 0,118,209;
90
+ --semi-brand-6: 0,78,150;
91
+ --semi-brand-7: 0,44,92;
92
+ --semi-brand-8: 0,26,61;
93
+ --semi-brand-9: 0,17,43;
94
94
  --semi-green-0: 237,248,239;
95
95
  --semi-green-1: 211,240,215;
96
96
  --semi-green-2: 170,226,179;
package/scss/global.scss CHANGED
@@ -111,16 +111,16 @@ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI','PingFang SC
111
111
  --semi-border-radius-small: 2px;
112
112
  --semi-border-radius-circle: 50%;
113
113
  --semi-border-radius-medium: 6px;
114
- --semi-border-radius-extra-small: 3px;
114
+ --semi-border-radius-extra-small: 2px;
115
115
 
116
116
 
117
117
  }
118
118
  body[theme-mode="dark"], body .semi-always-dark, :host([theme-mode="dark"]), :host .semi-always-dark {
119
- --semi-color-bg-0: rgba(22,22,26,1);
120
- --semi-color-bg-1: rgba(35, 36, 41, 1);
121
- --semi-color-bg-2: rgba(53, 54, 60, 1);
122
- --semi-color-bg-3: rgba(67, 68, 74, 1);
123
- --semi-color-bg-4: rgba(79, 81, 89, 1);
119
+ --semi-color-bg-0: rgba(var(--semi-grey-0),1);
120
+ --semi-color-bg-1: rgba(var(--semi-grey-1), 1);
121
+ --semi-color-bg-2: rgba(var(--semi-grey-2), 1);
122
+ --semi-color-bg-3: rgba(var(--semi-grey-3), 1);
123
+ --semi-color-bg-4: rgba(var(--semi-grey-4),1);
124
124
  --semi-color-info: rgba(var(--semi-blue-5), 1);
125
125
  --semi-color-link: rgba(var(--semi-blue-4),1);
126
126
  --semi-color-nav-bg: rgba(35, 36, 41, 1);
@@ -142,9 +142,9 @@ body[theme-mode="dark"], body .semi-always-dark, :host([theme-mode="dark"]), :ho
142
142
  --semi-color-fall-4: rgba(var(--semi-green-4),1);
143
143
  --semi-color-fall-5: rgba(var(--semi-green-3),1);
144
144
  --semi-color-fill-0: rgba(var(--semi-grey-4),0.05);
145
- --semi-color-fill-1: rgba(var(--semi-grey-3), 0.09);
146
- --semi-color-fill-2: rgba(var(--semi-grey-2), 0.13);
147
- --semi-color-fill-3: rgba(var(--semi-grey-1), 1);
145
+ --semi-color-fill-1: rgba(var(--semi-grey-3),0.09);
146
+ --semi-color-fill-2: rgba(var(--semi-grey-2),0.13);
147
+ --semi-color-fill-3: rgba(var(--semi-grey-1),1);
148
148
  --semi-color-fill-4: rgba(var(--semi-grey-0), 1);
149
149
  --semi-color-fill-5: rgba(0,0,0,1);
150
150
  --semi-color-rise-1: rgba(var(--semi-red-8),1);
@@ -152,10 +152,11 @@ body[theme-mode="dark"], body .semi-always-dark, :host([theme-mode="dark"]), :ho
152
152
  --semi-color-rise-3: rgba(var(--semi-red-5),1);
153
153
  --semi-color-rise-4: rgba(var(--semi-red-4),1);
154
154
  --semi-color-rise-5: rgba(var(--semi-red-3),1);
155
- --semi-color-text-0: rgba(var(--semi-grey-9),1);
156
- --semi-color-text-1: rgba(var(--semi-grey-7),0.8);
157
- --semi-color-text-2: rgba(var(--semi-grey-5),0.6);
158
- --semi-color-text-3: rgba(var(--semi-grey-3),0.35);
155
+ --semi-color-text-0: rgba(255,255,255,1);
156
+ --semi-color-text-1: rgba(var(--semi-grey-9),1);
157
+ --semi-color-text-2: rgba(var(--semi-grey-7),1);
158
+ --semi-color-text-3: rgba(var(--semi-grey-5),1);
159
+ --semi-color-text-4: rgba(var(--semi-grey-3),1);
159
160
  --semi-color-white: rgba(255,255,255,1);
160
161
  --semi-color-data-10: rgba(16, 162, 180, 1);
161
162
  --semi-color-data-11: rgba(208, 110, 11, 1);
@@ -167,12 +168,12 @@ body[theme-mode="dark"], body .semi-always-dark, :host([theme-mode="dark"]), :ho
167
168
  --semi-color-data-17: rgba(98, 138, 6, 1);
168
169
  --semi-color-data-18: rgba(162, 48, 179, 1);
169
170
  --semi-color-data-19: rgba(40, 51, 138, 1);
170
- --semi-color-border: rgba(var(--semi-grey-9), 0.08);
171
+ --semi-color-border: rgba(var(--semi-grey-9),0.08);
171
172
  --semi-color-danger: rgba(var(--semi-red-4), 1);
172
173
  --semi-color-shadow: rgba(var(--semi-black),0.04);
173
174
  --semi-color-border-0: rgba(var(--semi-grey-5), 1);
174
175
  --semi-color-border-1: rgba(var(--semi-grey-4), 1);
175
- --semi-color-border-2: rgba(var(--semi-grey-3), 1);
176
+ --semi-color-border-2: rgba(var(--semi-grey-3),1);
176
177
  --semi-color-border-3: rgba(var(--semi-grey-2), 1);
177
178
  --semi-color-border-4: rgba(var(--semi-grey-1),1);
178
179
  --semi-color-default: rgba(var(--semi-grey-0),1);
@@ -187,10 +188,10 @@ body[theme-mode="dark"], body .semi-always-dark, :host([theme-mode="dark"]), :ho
187
188
  --semi-color-tertiary: rgba(var(--semi-green-4),1);
188
189
  --semi-color-focus-border: rgba(var(--semi-brand-5), 1);
189
190
  --semi-color-info-disabled: rgba(var(--semi-blue-2), 1);
190
- --semi-color-overlay-bg: rgba(22, 22, 26, 0.6);
191
+ --semi-color-overlay-bg: rgba(22,22,26,0.6);
191
192
  --semi-color-danger-hover: rgba(var(--semi-red-5), 1);
192
- --semi-color-highlight: rgba(var(--semi-white), 1);
193
- --semi-color-secondary: rgba(var(--semi-red-4),1);
193
+ --semi-color-highlight: rgba(var(--semi-white),1);
194
+ --semi-color-secondary: rgba(var(--semi-grey-4), 1);
194
195
  --semi-color-danger-active: rgba(var(--semi-red-3), 1);
195
196
  --semi-color-disabled-bg: rgba(var(--semi-grey-1), 1);
196
197
  --semi-color-default-hover: rgba(var(--semi-grey-1), 1);
@@ -199,29 +200,30 @@ body[theme-mode="dark"], body .semi-always-dark, :host([theme-mode="dark"]), :ho
199
200
  --semi-color-warning-hover: rgba(var(--semi-yellow-5),1);
200
201
  --semi-color-danger-disabled: rgba(var(--semi-red-2),1);
201
202
  --semi-color-default-active: rgba(var(--semi-grey-2), 1);
202
- --semi-color-disabled-fill: rgba(var(--semi-grey-8), 0.04);
203
- --semi-color-disabled-text: rgba(var(--semi-grey-9), 0.35);
203
+ --semi-color-disabled-fill: rgba(var(--semi-grey-8),0.04);
204
+ --semi-color-disabled-text: rgba(var(--semi-grey-9),0.35);
204
205
  --semi-color-highlight-bg: rgba(var(--semi-yellow-2), 1);
205
206
  --semi-color-primary-active: rgba(var(--semi-brand-4),1);
206
207
  --semi-color-success-active: rgba(var(--semi-cyan-3),1);
207
208
  --semi-color-warning-active: rgba(var(--semi-yellow-3),1);
208
209
  --semi-color-tertiary-hover: rgba(var(--semi-green-5),1);
210
+ --semi-color-transparent: rgba(var(--semi-grey-3),0);
209
211
  --semi-color-disabled-border: rgba(var(--semi-grey-1), 1);
210
212
  --semi-color-primary-disabled: rgba(var(--semi-brand-2), 1);
211
213
  --semi-color-success-disabled: rgba(var(--semi-cyan-2), 1);
212
214
  --semi-color-tertiary-active: rgba(var(--semi-green-3),1);
213
215
  --semi-color-warning-disabled: rgba(var(--semi-yellow-2),1);
214
- --semi-color-secondary-hover: rgba(var(--semi-red-5),1);
215
- --semi-color-secondary-active: rgba(var(--semi-red-3),1);
216
+ --semi-color-secondary-hover: rgba(var(--semi-grey-5), 1);
217
+ --semi-color-secondary-active: rgba(var(--semi-grey-3), 1);
216
218
  --semi-color-tertiary-disabled: rgba(var(--semi-green-2),1);
217
- --semi-color-info-light-hover: rgba(var(--semi-blue-5), 0.3);
218
- --semi-color-info-light-active: rgba(var(--semi-blue-5), 0.4);
219
- --semi-color-secondary-disabled: rgba(var(--semi-red-2),1);
220
- --semi-color-info-light-default: rgba(var(--semi-blue-5), 0.2);
221
- --semi-color-danger-light-hover: rgba(var(--semi-red-5), 0.3);
219
+ --semi-color-info-light-hover: rgba(var(--semi-blue-5),0.3);
220
+ --semi-color-info-light-active: rgba(var(--semi-blue-5),0.4);
221
+ --semi-color-secondary-disabled: rgba(var(--semi-grey-2), 1);
222
+ --semi-color-info-light-default: rgba(var(--semi-blue-5),0.2);
223
+ --semi-color-danger-light-hover: rgba(var(--semi-red-5),0.3);
222
224
  --semi-color-danger-light-active: rgba(var(--semi-red-5),0.4);
223
- --semi-color-danger-light-default: rgba(var(--semi-red-5), 0.2);
224
- --semi-color-primary-light-hover: rgba(var(--semi-brand-5), 0.3);
225
+ --semi-color-danger-light-default: rgba(var(--semi-red-5),0.2);
226
+ --semi-color-primary-light-hover: rgba(var(--semi-brand-5),0.3);
225
227
  --semi-color-success-light-hover: rgba(var(--semi-green-5),0.3);
226
228
  --semi-color-warning-light-hover: rgba(var(--semi-orange-5),0.3);
227
229
  --semi-color-primary-light-active: rgba(var(--semi-brand-5),0.4);
@@ -248,7 +250,7 @@ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI','PingFang SC
248
250
  --semi-border-radius-small: 2px;
249
251
  --semi-border-radius-circle: 50%;
250
252
  --semi-border-radius-medium: 6px;
251
- --semi-border-radius-extra-small: 3px;
253
+ --semi-border-radius-extra-small: 2px;
252
254
 
253
255
 
254
256
  }
package/scss/local.scss CHANGED
@@ -3,12 +3,16 @@ $spacing-table_row_head-paddingX: 8px;
3
3
  $spacing-table_row_head-paddingY: 6px;
4
4
  $spacing-table_tbody_rowCell-padding: 8px;
5
5
  $spacing-table_column_sorter-marginLeft: 4px;
6
+ $color-button_secondary-text-default: var(--semi-color-text-2);
6
7
  $color-button_disabled_danger-bg-default: var(--semi-color-danger-disabled);
7
8
  $color-button_disabled_primary-bg-default: var(--semi-color-primary-disabled);
8
9
  $color-button_disabled_warning-bg-default: var(--semi-color-warning-disabled);
9
10
  $color-button_tertiary_solid-text-default: var(--semi-color-tertiary);
10
11
  $color-button_disabled_tertiary-bg-default: var(--semi-color-tertiary-disabled);
11
12
  $color-button_disabled_secondary-bg-default: var(--semi-color-secondary-disabled);
13
+ $color-button_primary_outline-border-default: rgba(23, 144, 255, 0.52);
14
+ $color-button_secondary_outline-border-default: var(--semi-color-border-1);
15
+ $color-button_secondary_borderless-text-default: var(--semi-color-text-1);
12
16
  $height-button_large: 32px;
13
17
  $height-button_default: 28px;
14
18
  $height-button_iconOnly_default: 28px;
package/semi.css CHANGED
@@ -83,16 +83,16 @@ body, body[theme-mode=dark] .semi-always-light, :host, :host .semi-always-light
83
83
  --semi-amber-7: 169,145,10;
84
84
  --semi-amber-8: 127,110,6;
85
85
  --semi-amber-9: 84,75,3;
86
- --semi-brand-0: 233,244,251;
87
- --semi-brand-1: 201,230,246;
88
- --semi-brand-2: 150,204,238;
89
- --semi-brand-3: 103,178,229;
90
- --semi-brand-4: 58,153,221;
91
- --semi-brand-5: 17,127,212;
92
- --semi-brand-6: 9,101,176;
93
- --semi-brand-7: 3,76,141;
94
- --semi-brand-8: 0,54,105;
95
- --semi-brand-9: 0,34,69;
86
+ --semi-brand-0: 209,236,255;
87
+ --semi-brand-1: 163,217,255;
88
+ --semi-brand-2: 117,198,255;
89
+ --semi-brand-3: 71,179,255;
90
+ --semi-brand-4: 25,160,255;
91
+ --semi-brand-5: 0,118,209;
92
+ --semi-brand-6: 0,78,150;
93
+ --semi-brand-7: 0,44,92;
94
+ --semi-brand-8: 0,26,61;
95
+ --semi-brand-9: 0,17,43;
96
96
  --semi-green-0: 237,248,239;
97
97
  --semi-green-1: 211,240,215;
98
98
  --semi-green-2: 170,226,179;
@@ -471,15 +471,15 @@ body, body[theme-mode=dark] .semi-always-light, :host, :host .semi-always-light
471
471
  --semi-border-radius-small: 2px;
472
472
  --semi-border-radius-circle: 50%;
473
473
  --semi-border-radius-medium: 6px;
474
- --semi-border-radius-extra-small: 3px;
474
+ --semi-border-radius-extra-small: 2px;
475
475
  }
476
476
 
477
477
  body[theme-mode=dark], body .semi-always-dark, :host([theme-mode=dark]), :host .semi-always-dark {
478
- --semi-color-bg-0: rgba(22,22,26,1);
479
- --semi-color-bg-1: rgba(35, 36, 41, 1);
480
- --semi-color-bg-2: rgba(53, 54, 60, 1);
481
- --semi-color-bg-3: rgba(67, 68, 74, 1);
482
- --semi-color-bg-4: rgba(79, 81, 89, 1);
478
+ --semi-color-bg-0: rgba(var(--semi-grey-0),1);
479
+ --semi-color-bg-1: rgba(var(--semi-grey-1), 1);
480
+ --semi-color-bg-2: rgba(var(--semi-grey-2), 1);
481
+ --semi-color-bg-3: rgba(var(--semi-grey-3), 1);
482
+ --semi-color-bg-4: rgba(var(--semi-grey-4),1);
483
483
  --semi-color-info: rgba(var(--semi-blue-5), 1);
484
484
  --semi-color-link: rgba(var(--semi-blue-4),1);
485
485
  --semi-color-nav-bg: rgba(35, 36, 41, 1);
@@ -501,9 +501,9 @@ body[theme-mode=dark], body .semi-always-dark, :host([theme-mode=dark]), :host .
501
501
  --semi-color-fall-4: rgba(var(--semi-green-4),1);
502
502
  --semi-color-fall-5: rgba(var(--semi-green-3),1);
503
503
  --semi-color-fill-0: rgba(var(--semi-grey-4),0.05);
504
- --semi-color-fill-1: rgba(var(--semi-grey-3), 0.09);
505
- --semi-color-fill-2: rgba(var(--semi-grey-2), 0.13);
506
- --semi-color-fill-3: rgba(var(--semi-grey-1), 1);
504
+ --semi-color-fill-1: rgba(var(--semi-grey-3),0.09);
505
+ --semi-color-fill-2: rgba(var(--semi-grey-2),0.13);
506
+ --semi-color-fill-3: rgba(var(--semi-grey-1),1);
507
507
  --semi-color-fill-4: rgba(var(--semi-grey-0), 1);
508
508
  --semi-color-fill-5: rgba(0,0,0,1);
509
509
  --semi-color-rise-1: rgba(var(--semi-red-8),1);
@@ -511,10 +511,11 @@ body[theme-mode=dark], body .semi-always-dark, :host([theme-mode=dark]), :host .
511
511
  --semi-color-rise-3: rgba(var(--semi-red-5),1);
512
512
  --semi-color-rise-4: rgba(var(--semi-red-4),1);
513
513
  --semi-color-rise-5: rgba(var(--semi-red-3),1);
514
- --semi-color-text-0: rgba(var(--semi-grey-9),1);
515
- --semi-color-text-1: rgba(var(--semi-grey-7),0.8);
516
- --semi-color-text-2: rgba(var(--semi-grey-5),0.6);
517
- --semi-color-text-3: rgba(var(--semi-grey-3),0.35);
514
+ --semi-color-text-0: rgba(255,255,255,1);
515
+ --semi-color-text-1: rgba(var(--semi-grey-9),1);
516
+ --semi-color-text-2: rgba(var(--semi-grey-7),1);
517
+ --semi-color-text-3: rgba(var(--semi-grey-5),1);
518
+ --semi-color-text-4: rgba(var(--semi-grey-3),1);
518
519
  --semi-color-white: rgba(255,255,255,1);
519
520
  --semi-color-data-10: rgba(16, 162, 180, 1);
520
521
  --semi-color-data-11: rgba(208, 110, 11, 1);
@@ -526,12 +527,12 @@ body[theme-mode=dark], body .semi-always-dark, :host([theme-mode=dark]), :host .
526
527
  --semi-color-data-17: rgba(98, 138, 6, 1);
527
528
  --semi-color-data-18: rgba(162, 48, 179, 1);
528
529
  --semi-color-data-19: rgba(40, 51, 138, 1);
529
- --semi-color-border: rgba(var(--semi-grey-9), 0.08);
530
+ --semi-color-border: rgba(var(--semi-grey-9),0.08);
530
531
  --semi-color-danger: rgba(var(--semi-red-4), 1);
531
532
  --semi-color-shadow: rgba(var(--semi-black),0.04);
532
533
  --semi-color-border-0: rgba(var(--semi-grey-5), 1);
533
534
  --semi-color-border-1: rgba(var(--semi-grey-4), 1);
534
- --semi-color-border-2: rgba(var(--semi-grey-3), 1);
535
+ --semi-color-border-2: rgba(var(--semi-grey-3),1);
535
536
  --semi-color-border-3: rgba(var(--semi-grey-2), 1);
536
537
  --semi-color-border-4: rgba(var(--semi-grey-1),1);
537
538
  --semi-color-default: rgba(var(--semi-grey-0),1);
@@ -546,10 +547,10 @@ body[theme-mode=dark], body .semi-always-dark, :host([theme-mode=dark]), :host .
546
547
  --semi-color-tertiary: rgba(var(--semi-green-4),1);
547
548
  --semi-color-focus-border: rgba(var(--semi-brand-5), 1);
548
549
  --semi-color-info-disabled: rgba(var(--semi-blue-2), 1);
549
- --semi-color-overlay-bg: rgba(22, 22, 26, 0.6);
550
+ --semi-color-overlay-bg: rgba(22,22,26,0.6);
550
551
  --semi-color-danger-hover: rgba(var(--semi-red-5), 1);
551
- --semi-color-highlight: rgba(var(--semi-white), 1);
552
- --semi-color-secondary: rgba(var(--semi-red-4),1);
552
+ --semi-color-highlight: rgba(var(--semi-white),1);
553
+ --semi-color-secondary: rgba(var(--semi-grey-4), 1);
553
554
  --semi-color-danger-active: rgba(var(--semi-red-3), 1);
554
555
  --semi-color-disabled-bg: rgba(var(--semi-grey-1), 1);
555
556
  --semi-color-default-hover: rgba(var(--semi-grey-1), 1);
@@ -558,29 +559,30 @@ body[theme-mode=dark], body .semi-always-dark, :host([theme-mode=dark]), :host .
558
559
  --semi-color-warning-hover: rgba(var(--semi-yellow-5),1);
559
560
  --semi-color-danger-disabled: rgba(var(--semi-red-2),1);
560
561
  --semi-color-default-active: rgba(var(--semi-grey-2), 1);
561
- --semi-color-disabled-fill: rgba(var(--semi-grey-8), 0.04);
562
- --semi-color-disabled-text: rgba(var(--semi-grey-9), 0.35);
562
+ --semi-color-disabled-fill: rgba(var(--semi-grey-8),0.04);
563
+ --semi-color-disabled-text: rgba(var(--semi-grey-9),0.35);
563
564
  --semi-color-highlight-bg: rgba(var(--semi-yellow-2), 1);
564
565
  --semi-color-primary-active: rgba(var(--semi-brand-4),1);
565
566
  --semi-color-success-active: rgba(var(--semi-cyan-3),1);
566
567
  --semi-color-warning-active: rgba(var(--semi-yellow-3),1);
567
568
  --semi-color-tertiary-hover: rgba(var(--semi-green-5),1);
569
+ --semi-color-transparent: rgba(var(--semi-grey-3),0);
568
570
  --semi-color-disabled-border: rgba(var(--semi-grey-1), 1);
569
571
  --semi-color-primary-disabled: rgba(var(--semi-brand-2), 1);
570
572
  --semi-color-success-disabled: rgba(var(--semi-cyan-2), 1);
571
573
  --semi-color-tertiary-active: rgba(var(--semi-green-3),1);
572
574
  --semi-color-warning-disabled: rgba(var(--semi-yellow-2),1);
573
- --semi-color-secondary-hover: rgba(var(--semi-red-5),1);
574
- --semi-color-secondary-active: rgba(var(--semi-red-3),1);
575
+ --semi-color-secondary-hover: rgba(var(--semi-grey-5), 1);
576
+ --semi-color-secondary-active: rgba(var(--semi-grey-3), 1);
575
577
  --semi-color-tertiary-disabled: rgba(var(--semi-green-2),1);
576
- --semi-color-info-light-hover: rgba(var(--semi-blue-5), 0.3);
577
- --semi-color-info-light-active: rgba(var(--semi-blue-5), 0.4);
578
- --semi-color-secondary-disabled: rgba(var(--semi-red-2),1);
579
- --semi-color-info-light-default: rgba(var(--semi-blue-5), 0.2);
580
- --semi-color-danger-light-hover: rgba(var(--semi-red-5), 0.3);
578
+ --semi-color-info-light-hover: rgba(var(--semi-blue-5),0.3);
579
+ --semi-color-info-light-active: rgba(var(--semi-blue-5),0.4);
580
+ --semi-color-secondary-disabled: rgba(var(--semi-grey-2), 1);
581
+ --semi-color-info-light-default: rgba(var(--semi-blue-5),0.2);
582
+ --semi-color-danger-light-hover: rgba(var(--semi-red-5),0.3);
581
583
  --semi-color-danger-light-active: rgba(var(--semi-red-5),0.4);
582
- --semi-color-danger-light-default: rgba(var(--semi-red-5), 0.2);
583
- --semi-color-primary-light-hover: rgba(var(--semi-brand-5), 0.3);
584
+ --semi-color-danger-light-default: rgba(var(--semi-red-5),0.2);
585
+ --semi-color-primary-light-hover: rgba(var(--semi-brand-5),0.3);
584
586
  --semi-color-success-light-hover: rgba(var(--semi-green-5),0.3);
585
587
  --semi-color-warning-light-hover: rgba(var(--semi-orange-5),0.3);
586
588
  --semi-color-primary-light-active: rgba(var(--semi-brand-5),0.4);
@@ -607,7 +609,7 @@ body[theme-mode=dark], body .semi-always-dark, :host([theme-mode=dark]), :host .
607
609
  --semi-border-radius-small: 2px;
608
610
  --semi-border-radius-circle: 50%;
609
611
  --semi-border-radius-medium: 6px;
610
- --semi-border-radius-extra-small: 3px;
612
+ --semi-border-radius-extra-small: 2px;
611
613
  }
612
614
 
613
615
  body, :host {
@@ -3503,7 +3505,7 @@ body, :host {
3503
3505
  }
3504
3506
  .semi-button-primary.semi-button-outline {
3505
3507
  background-color: transparent;
3506
- border: 1px solid var(--semi-color-border);
3508
+ border: 1px solid rgba(23, 144, 255, 0.52);
3507
3509
  }
3508
3510
  .semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):not(.semi-button-outline):active {
3509
3511
  background-color: var(--semi-color-primary-active);
@@ -3514,7 +3516,7 @@ body, :host {
3514
3516
  .semi-button-secondary {
3515
3517
  background-color: var(--semi-color-secondary);
3516
3518
  outline-color: var(--semi-color-secondary);
3517
- color: rgba(var(--semi-white), 1);
3519
+ color: var(--semi-color-text-2);
3518
3520
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
3519
3521
  transform: scale(var(--semi-transform_scale-none));
3520
3522
  }
@@ -3530,7 +3532,7 @@ body, :host {
3530
3532
  }
3531
3533
  .semi-button-secondary.semi-button-outline {
3532
3534
  background-color: transparent;
3533
- border: 1px solid var(--semi-color-border);
3535
+ border: 1px solid var(--semi-color-border-1);
3534
3536
  }
3535
3537
  .semi-button-secondary:hover {
3536
3538
  background-color: var(--semi-color-secondary-hover);
@@ -3539,7 +3541,7 @@ body, :host {
3539
3541
  background-color: var(--semi-color-secondary-active);
3540
3542
  }
3541
3543
  .semi-button-secondary.semi-button-light, .semi-button-secondary.semi-button-outline, .semi-button-secondary.semi-button-borderless {
3542
- color: var(--semi-color-secondary);
3544
+ color: var(--semi-color-text-1);
3543
3545
  }
3544
3546
  .semi-button-disabled {
3545
3547
  color: var(--semi-color-disabled-text);