@semi-bot/semi-theme-fnos 1.0.0 → 1.0.2

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 (7) hide show
  1. package/package.json +1 -1
  2. package/raw.json +37 -3
  3. package/scss/_palette.scss +10 -0
  4. package/scss/global.scss +2 -2
  5. package/scss/local.scss +12 -0
  6. package/semi.css +28 -18
  7. package/semi.min.css +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@semi-bot/semi-theme-fnos",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "description": "Semi theme generated by dsm. https://semi.design/dsm",
5
5
  "keywords": [
6
6
  "semi-theme",
package/raw.json CHANGED
@@ -327,6 +327,16 @@
327
327
  "--semi-yellow-7": "158,134,8",
328
328
  "--semi-yellow-8": "119,102,5",
329
329
  "--semi-yellow-9": "79,69,3",
330
+ "--semi-neutral-0": "246,246,247",
331
+ "--semi-neutral-1": "241,244,249",
332
+ "--semi-neutral-2": "226,232,240",
333
+ "--semi-neutral-3": "177,190,206",
334
+ "--semi-neutral-4": "169,185,204",
335
+ "--semi-neutral-5": "132,150,174",
336
+ "--semi-neutral-6": "104,119,141",
337
+ "--semi-neutral-7": "74,85,104",
338
+ "--semi-neutral-8": "50,58,67",
339
+ "--semi-neutral-9": "32,35,39",
330
340
  "--semi-light-blue-0": "234,246,252",
331
341
  "--semi-light-blue-1": "203,234,249",
332
342
  "--semi-light-blue-2": "153,212,243",
@@ -459,7 +469,7 @@
459
469
  "bg/--semi-color-bg-4": "rgba(var(--semi-white), 1)",
460
470
  "info/--semi-color-info": "rgba(var(--semi-blue-5), 1)",
461
471
  "link/--semi-color-link": "rgba(var(--semi-blue-5), 1)",
462
- "nav/--semi-color-nav-bg": "rgba(var(--semi-white), 1)",
472
+ "nav/--semi-color-nav-bg": "rgba(var(--semi-neutral-1),1)",
463
473
  "black/--semi-color-black": "rgba(var(--semi-black), 1)",
464
474
  "data/--semi-color-data-0": "rgba(87, 105, 255, 1)",
465
475
  "data/--semi-color-data-1": "rgba(142, 212, 231, 1)",
@@ -489,7 +499,7 @@
489
499
  "data/--semi-color-data-17": "rgba(182, 215, 129, 1)",
490
500
  "data/--semi-color-data-18": "rgba(212, 88, 212, 1)",
491
501
  "data/--semi-color-data-19": "rgba(188, 198, 255, 1)",
492
- "border/--semi-color-border": "rgba(var(--semi-grey-9), 0.08)",
502
+ "border/--semi-color-border": "rgba(var(--semi-neutral-5),0.08)",
493
503
  "danger/--semi-color-danger": "rgba(var(--semi-red-5), 1)",
494
504
  "shadow/--semi-color-shadow": "rgba(var(--semi-black), 0.04)",
495
505
  "default/--semi-color-default": "rgba(var(--semi-grey-0), 1)",
@@ -676,7 +686,30 @@
676
686
  "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)"
677
687
  }
678
688
  },
679
- "components": {},
689
+ "components": {
690
+ "switch": {
691
+ "color": {
692
+ "$color-switch_checked-bg-hover": "var(--semi-color-primary-hover)",
693
+ "$color-switch_checked-bg-active": "var(--semi-color-primary-active)",
694
+ "$color-switch_checked-bg-default": "var(--semi-color-primary)"
695
+ }
696
+ },
697
+ "navigation": {
698
+ "color": {
699
+ "$color-navigation-bg-default": "var(--semi-color-nav-bg)",
700
+ "$color-navigation_border-default": "var(--semi-color-border)",
701
+ "$color-navigation_itemL1-bg-hover": "var(--semi-color-bg-1)",
702
+ "$color-navigation_itemL1-bg-active": "var(--semi-color-bg-1)",
703
+ "$color-navigation_itemLn-text-default": "var(--semi-color-text-0)",
704
+ "$color-navigation_itemL1_selected-text-default": "var(--semi-color-text-0)"
705
+ },
706
+ "transition": {
707
+ "$transition_delay-navigation_itemL1-bg": "var(--semi-transition_delay-none)",
708
+ "$transition_duration-navigation_itemL1-bg": "var(--semi-transition_duration-fast)",
709
+ "$transition_function-navigation_itemL1-bg": "var(--semi-transition_function-easeInOut)"
710
+ }
711
+ }
712
+ },
680
713
  "typography": {
681
714
  "Header": {
682
715
  "header-1": {
@@ -739,6 +772,7 @@
739
772
  "purple": "#a432b3",
740
773
  "violet": "#6f41bc",
741
774
  "yellow": "#edc211",
775
+ "neutral": "#8496AE",
742
776
  "light-blue": "#118fe1",
743
777
  "light-green": "#79b33e"
744
778
  },
package/scss/_palette.scss CHANGED
@@ -151,6 +151,16 @@ body, body[theme-mode="dark"] .semi-always-light, :host, :host .semi-always-ligh
151
151
  --semi-yellow-7: 158,134,8;
152
152
  --semi-yellow-8: 119,102,5;
153
153
  --semi-yellow-9: 79,69,3;
154
+ --semi-neutral-0: 246,246,247;
155
+ --semi-neutral-1: 241,244,249;
156
+ --semi-neutral-2: 226,232,240;
157
+ --semi-neutral-3: 177,190,206;
158
+ --semi-neutral-4: 169,185,204;
159
+ --semi-neutral-5: 132,150,174;
160
+ --semi-neutral-6: 104,119,141;
161
+ --semi-neutral-7: 74,85,104;
162
+ --semi-neutral-8: 50,58,67;
163
+ --semi-neutral-9: 32,35,39;
154
164
  --semi-light-blue-0: 234,246,252;
155
165
  --semi-light-blue-1: 203,234,249;
156
166
  --semi-light-blue-2: 153,212,243;
package/scss/global.scss CHANGED
@@ -8,7 +8,7 @@ body, body[theme-mode="dark"] .semi-always-light, :host, :host .semi-always-ligh
8
8
  --semi-color-bg-4: rgba(var(--semi-white), 1);
9
9
  --semi-color-info: rgba(var(--semi-blue-5), 1);
10
10
  --semi-color-link: rgba(var(--semi-blue-5), 1);
11
- --semi-color-nav-bg: rgba(var(--semi-white), 1);
11
+ --semi-color-nav-bg: rgba(var(--semi-neutral-1),1);
12
12
  --semi-color-black: rgba(var(--semi-black), 1);
13
13
  --semi-color-data-0: rgba(87, 105, 255, 1);
14
14
  --semi-color-data-1: rgba(142, 212, 231, 1);
@@ -38,7 +38,7 @@ body, body[theme-mode="dark"] .semi-always-light, :host, :host .semi-always-ligh
38
38
  --semi-color-data-17: rgba(182, 215, 129, 1);
39
39
  --semi-color-data-18: rgba(212, 88, 212, 1);
40
40
  --semi-color-data-19: rgba(188, 198, 255, 1);
41
- --semi-color-border: rgba(var(--semi-grey-9), 0.08);
41
+ --semi-color-border: rgba(var(--semi-neutral-5),0.08);
42
42
  --semi-color-danger: rgba(var(--semi-red-5), 1);
43
43
  --semi-color-shadow: rgba(var(--semi-black), 0.04);
44
44
  --semi-color-default: rgba(var(--semi-grey-0), 1);
package/scss/local.scss CHANGED
@@ -0,0 +1,12 @@
1
+ $color-switch_checked-bg-hover: var(--semi-color-primary-hover);
2
+ $color-switch_checked-bg-active: var(--semi-color-primary-active);
3
+ $color-switch_checked-bg-default: var(--semi-color-primary);
4
+ $color-navigation-bg-default: var(--semi-color-nav-bg);
5
+ $color-navigation_border-default: var(--semi-color-border);
6
+ $color-navigation_itemL1-bg-hover: var(--semi-color-bg-1);
7
+ $color-navigation_itemL1-bg-active: var(--semi-color-bg-1);
8
+ $color-navigation_itemLn-text-default: var(--semi-color-text-0);
9
+ $color-navigation_itemL1_selected-text-default: var(--semi-color-text-0);
10
+ $transition_delay-navigation_itemL1-bg: var(--semi-transition_delay-none);
11
+ $transition_duration-navigation_itemL1-bg: var(--semi-transition_duration-fast);
12
+ $transition_function-navigation_itemL1-bg: var(--semi-transition_function-easeInOut);
package/semi.css CHANGED
@@ -153,6 +153,16 @@ body, body[theme-mode=dark] .semi-always-light, :host, :host .semi-always-light
153
153
  --semi-yellow-7: 158,134,8;
154
154
  --semi-yellow-8: 119,102,5;
155
155
  --semi-yellow-9: 79,69,3;
156
+ --semi-neutral-0: 246,246,247;
157
+ --semi-neutral-1: 241,244,249;
158
+ --semi-neutral-2: 226,232,240;
159
+ --semi-neutral-3: 177,190,206;
160
+ --semi-neutral-4: 169,185,204;
161
+ --semi-neutral-5: 132,150,174;
162
+ --semi-neutral-6: 104,119,141;
163
+ --semi-neutral-7: 74,85,104;
164
+ --semi-neutral-8: 50,58,67;
165
+ --semi-neutral-9: 32,35,39;
156
166
  --semi-light-blue-0: 234,246,252;
157
167
  --semi-light-blue-1: 203,234,249;
158
168
  --semi-light-blue-2: 153,212,243;
@@ -358,7 +368,7 @@ body, body[theme-mode=dark] .semi-always-light, :host, :host .semi-always-light
358
368
  --semi-color-bg-4: rgba(var(--semi-white), 1);
359
369
  --semi-color-info: rgba(var(--semi-blue-5), 1);
360
370
  --semi-color-link: rgba(var(--semi-blue-5), 1);
361
- --semi-color-nav-bg: rgba(var(--semi-white), 1);
371
+ --semi-color-nav-bg: rgba(var(--semi-neutral-1),1);
362
372
  --semi-color-black: rgba(var(--semi-black), 1);
363
373
  --semi-color-data-0: rgba(87, 105, 255, 1);
364
374
  --semi-color-data-1: rgba(142, 212, 231, 1);
@@ -388,7 +398,7 @@ body, body[theme-mode=dark] .semi-always-light, :host, :host .semi-always-light
388
398
  --semi-color-data-17: rgba(182, 215, 129, 1);
389
399
  --semi-color-data-18: rgba(212, 88, 212, 1);
390
400
  --semi-color-data-19: rgba(188, 198, 255, 1);
391
- --semi-color-border: rgba(var(--semi-grey-9), 0.08);
401
+ --semi-color-border: rgba(var(--semi-neutral-5),0.08);
392
402
  --semi-color-danger: rgba(var(--semi-red-5), 1);
393
403
  --semi-color-shadow: rgba(var(--semi-black), 0.04);
394
404
  --semi-color-default: rgba(var(--semi-grey-0), 1);
@@ -15917,7 +15927,7 @@ img[src=""], img:not([src]) {
15917
15927
  font-weight: 400;
15918
15928
  color: var(--semi-color-text-0);
15919
15929
  width: 100%;
15920
- transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
15930
+ transition: background-color var(--semi-transition_duration-fast) var(--semi-transition_function-easeInOut) var(--semi-transition_delay-none);
15921
15931
  }
15922
15932
  .semi-navigation-sub-wrap .semi-navigation-sub-title-text, .semi-navigation-item-text {
15923
15933
  overflow: hidden;
@@ -16017,7 +16027,7 @@ img[src=""], img:not([src]) {
16017
16027
  color: var(--semi-color-text-0);
16018
16028
  }
16019
16029
  .semi-navigation-item-normal:hover:not(.semi-navigation-item-selected) {
16020
- background-color: var(--semi-color-fill-0);
16030
+ background-color: var(--semi-color-bg-1);
16021
16031
  color: var(--semi-color-text-0);
16022
16032
  }
16023
16033
  .semi-navigation-item-normal:hover:not(.semi-navigation-item-selected) .semi-navigation-item-icon:first-child {
@@ -16025,7 +16035,7 @@ img[src=""], img:not([src]) {
16025
16035
  }
16026
16036
  .semi-navigation-item-normal:hover.semi-navigation-item-selected {
16027
16037
  color: var(--semi-color-text-0);
16028
- background-color: var(--semi-color-fill-0);
16038
+ background-color: var(--semi-color-bg-1);
16029
16039
  }
16030
16040
  .semi-navigation-item-normal:hover.semi-navigation-item-selected .semi-navigation-item-icon:first-child {
16031
16041
  color: var(--semi-color-primary);
@@ -16048,7 +16058,7 @@ img[src=""], img:not([src]) {
16048
16058
  color: var(--semi-color-primary-disabled);
16049
16059
  }
16050
16060
  .semi-navigation-item-normal:active:not(.semi-navigation-item-selected), .semi-navigation-inner > .semi-navigation-item-normal:active:not(.semi-navigation-item-selected) {
16051
- background-color: var(--semi-color-fill-1);
16061
+ background-color: var(--semi-color-bg-1);
16052
16062
  color: var(--semi-color-text-0);
16053
16063
  }
16054
16064
  .semi-navigation-item-normal:active:not(.semi-navigation-item-selected) .semi-navigation-item-icon:first-child, .semi-navigation-inner > .semi-navigation-item-normal:active:not(.semi-navigation-item-selected) .semi-navigation-item-icon:first-child {
@@ -16056,7 +16066,7 @@ img[src=""], img:not([src]) {
16056
16066
  }
16057
16067
  .semi-navigation-item-normal:active.semi-navigation-item-selected, .semi-navigation-inner > .semi-navigation-item-normal:active.semi-navigation-item-selected {
16058
16068
  color: var(--semi-color-text-0);
16059
- background-color: var(--semi-color-fill-1);
16069
+ background-color: var(--semi-color-bg-1);
16060
16070
  }
16061
16071
  .semi-navigation-item-normal:active.semi-navigation-item-selected .semi-navigation-item-icon:first-child, .semi-navigation-inner > .semi-navigation-item-normal:active.semi-navigation-item-selected .semi-navigation-item-icon:first-child {
16062
16072
  color: var(--semi-color-primary);
@@ -16110,7 +16120,7 @@ img[src=""], img:not([src]) {
16110
16120
  margin-left: 44px;
16111
16121
  }
16112
16122
  .semi-navigation-sub .semi-navigation-item:hover:not(.semi-navigation-sub-wrap):not(.semi-navigation-item-selected):not(.semi-navigation-item-disabled) {
16113
- background-color: var(--semi-color-fill-0);
16123
+ background-color: var(--semi-color-bg-1);
16114
16124
  color: var(--semi-color-text-0);
16115
16125
  }
16116
16126
  .semi-navigation-sub .semi-navigation-item:hover:not(.semi-navigation-sub-wrap):not(.semi-navigation-item-selected):not(.semi-navigation-item-disabled) .semi-navigation-item-icon:first-child {
@@ -16133,7 +16143,7 @@ img[src=""], img:not([src]) {
16133
16143
  color: var(--semi-color-primary);
16134
16144
  }
16135
16145
  .semi-navigation-sub .semi-navigation-item:active:not(.semi-navigation-sub-wrap):not(.semi-navigation-item-selected):not(.semi-navigation-item-disabled) {
16136
- background-color: var(--semi-color-fill-1);
16146
+ background-color: var(--semi-color-bg-1);
16137
16147
  color: var(--semi-color-text-0);
16138
16148
  }
16139
16149
  .semi-navigation-sub .semi-navigation-item:active:not(.semi-navigation-sub-wrap):not(.semi-navigation-item-selected):not(.semi-navigation-item-disabled) .semi-navigation-item-icon:first-child {
@@ -16281,7 +16291,7 @@ img[src=""], img:not([src]) {
16281
16291
  color: var(--semi-color-disabled-text);
16282
16292
  }
16283
16293
  .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover:not(.semi-navigation-sub-title-selected) {
16284
- background-color: var(--semi-color-fill-0);
16294
+ background-color: var(--semi-color-bg-1);
16285
16295
  color: var(--semi-color-text-0);
16286
16296
  }
16287
16297
  .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover:not(.semi-navigation-sub-title-selected) .semi-navigation-item-icon:first-child {
@@ -16289,13 +16299,13 @@ img[src=""], img:not([src]) {
16289
16299
  }
16290
16300
  .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover.semi-navigation-sub-title-selected {
16291
16301
  color: var(--semi-color-text-0);
16292
- background-color: var(--semi-color-fill-0);
16302
+ background-color: var(--semi-color-bg-1);
16293
16303
  }
16294
16304
  .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover.semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child {
16295
16305
  color: var(--semi-color-primary);
16296
16306
  }
16297
16307
  .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active:not(.semi-navigation-sub-title-selected) {
16298
- background-color: var(--semi-color-fill-1);
16308
+ background-color: var(--semi-color-bg-1);
16299
16309
  color: var(--semi-color-text-0);
16300
16310
  }
16301
16311
  .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active:not(.semi-navigation-sub-title-selected) .semi-navigation-item-icon:first-child {
@@ -16303,7 +16313,7 @@ img[src=""], img:not([src]) {
16303
16313
  }
16304
16314
  .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active.semi-navigation-sub-title-selected {
16305
16315
  color: var(--semi-color-text-0);
16306
- background-color: var(--semi-color-fill-1);
16316
+ background-color: var(--semi-color-bg-1);
16307
16317
  }
16308
16318
  .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active.semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child {
16309
16319
  color: var(--semi-color-primary);
@@ -16336,7 +16346,7 @@ img[src=""], img:not([src]) {
16336
16346
  color: var(--semi-color-disabled-text);
16337
16347
  }
16338
16348
  .semi-navigation-vertical .semi-navigation-list .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover:not(.semi-navigation-sub-title-selected) {
16339
- background-color: var(--semi-color-fill-0);
16349
+ background-color: var(--semi-color-bg-1);
16340
16350
  color: var(--semi-color-text-0);
16341
16351
  }
16342
16352
  .semi-navigation-vertical .semi-navigation-list .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover:not(.semi-navigation-sub-title-selected) .semi-navigation-item-icon:first-child {
@@ -16344,7 +16354,7 @@ img[src=""], img:not([src]) {
16344
16354
  }
16345
16355
  .semi-navigation-vertical .semi-navigation-list .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover.semi-navigation-sub-title-selected {
16346
16356
  color: var(--semi-color-text-0);
16347
- background-color: var(--semi-color-fill-0);
16357
+ background-color: var(--semi-color-bg-1);
16348
16358
  }
16349
16359
  .semi-navigation-vertical .semi-navigation-list .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover.semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child {
16350
16360
  color: var(--semi-color-primary);
@@ -20138,10 +20148,10 @@ img[src=""], img:not([src]) {
20138
20148
  outline: 2px solid var(--semi-color-primary-light-active);
20139
20149
  }
20140
20150
  .semi-switch-checked {
20141
- background-color: var(--semi-color-success);
20151
+ background-color: var(--semi-color-primary);
20142
20152
  }
20143
20153
  .semi-switch-checked:hover {
20144
- background-color: var(--semi-color-success-hover);
20154
+ background-color: var(--semi-color-primary-hover);
20145
20155
  }
20146
20156
  .semi-switch-checked .semi-switch-knob {
20147
20157
  transform: translateX(18px);
@@ -20150,7 +20160,7 @@ img[src=""], img:not([src]) {
20150
20160
  transform: translateX(12px);
20151
20161
  }
20152
20162
  .semi-switch-active {
20153
- background-color: var(--semi-color-success-active);
20163
+ background-color: var(--semi-color-primary-active);
20154
20164
  }
20155
20165
  .semi-switch-disabled {
20156
20166
  cursor: not-allowed;