@semi-bot/semi-theme-fnos 1.0.1 → 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 (11) hide show
  1. package/README.md +4 -4
  2. package/package.json +1 -1
  3. package/raw.json +515 -1014
  4. package/scss/_font.scss +1 -1
  5. package/scss/_palette.scss +334 -374
  6. package/scss/animation.scss +1 -1
  7. package/scss/global.scss +154 -296
  8. package/scss/local.scss +9 -204
  9. package/scss/mixin.scss +1 -10
  10. package/semi.css +2472 -1154
  11. package/semi.min.css +1 -1
package/scss/local.scss CHANGED
@@ -1,207 +1,12 @@
1
- $radius-tag: 4px;
2
- $spacing-tag_large-paddingX: 8px;
3
- $radius-tabs_tab_card: 4px;
4
- $radius-tabs_tab_button: 4px;
5
- $color-badge_default-text-default: var(--semi-color-white);
6
- $color-badge_primary_light-bg-default: var(--semi-color-primary-light-hover);
7
- $color-badge_primary_solid-bg-default: var(--semi-color-danger);
8
- $color-input_danger-bg-focus: var(--semi-color-bg-1);
9
- $color-input_danger-bg-hover: var(--semi-color-bg-1);
10
- $color-input_danger-bg-active: var(--semi-color-bg-1);
11
- $color-input_default-bg-focus: var(--semi-color-bg-1);
12
- $color-input_default-bg-hover: var(--semi-color-bg-1);
13
- $color-input_warning-bg-focus: var(--semi-color-bg-1);
14
- $color-input_warning-bg-hover: var(--semi-color-bg-1);
15
- $color-input_danger-bg-default: var(--semi-color-bg-1);
16
- $color-input_default-bg-active: var(--semi-color-bg-1);
17
- $color-input_warning-bg-active: var(--semi-color-bg-1);
18
- $color-input_default-bg-default: var(--semi-color-bg-1);
19
- $color-input_warning-bg-default: var(--semi-color-bg-1);
20
- $color-input_danger-border-focus: var(--semi-color-danger-active);
21
- $color-input_danger-border-hover: var(--semi-color-danger-hover);
22
- $color-input_disabled-bg-default: var(--semi-color-disabled-bg);
23
- $color-input_default-border-focus: var(--semi-color-focus-border);
24
- $color-input_default-border-hover: var(--semi-color-border-hover);
25
- $color-input_warning-border-focus: var(--semi-color-warning-active);
26
- $color-input_warning-border-hover: var(--semi-color-warning-hover);
27
- $color-input_danger-border-default: var(--semi-color-danger);
28
- $color-input_default-bg-focus-hover: var(--semi-color-bg-1);
29
- $color-input_default-border-default: var(--semi-color-border);
30
- $color-input_warning-border-default: var(--semi-color-warning);
31
- $color-inputNumber_button-bg-disabled: var(--semi-color-disabled-bg);
32
- $height-input_large: 40px;
33
- $height-input_small: 24px;
34
- $height-input_default: 34px;
35
- $height-input_wrapper_small: 28px;
36
- $height-input_wrapper_default: 36px;
37
- $radius-input_wrapper: 6px;
38
- $font-modal_header-fontSize: $font-size-regular;
39
- $color-modal_content-border: var(--semi-color-border-modal);
40
- $color-radio_default-bg-default: var(--semi-color-bg-1);
41
- $color-radio_checked-bg-disabled: var(--semi-color-disabled-bg);
42
- $color-radio_disabled-bg-default: var(--semi-color-disabled-bg);
43
- $color-radio_checked-border-disabled: var(--semi-color-disabled-border);
44
- $color-radio_default-border-disabled: var(--semi-color-disabled-border);
45
- $color-table-border-default: var(--semi-color-divider-1);
46
- $color-table_th-border-default: var(--semi-color-divider-1);
47
- $color-table_shadow-border-default: var(--semi-color-divider-1);
48
- $width-table_header_border: 1px;
49
- $color-button_primary-bg-hover: var(--semi-color-primary-hover);
50
- $color-button_tertiary-bg-hover: var(--semi-color-tertiary-hover);
51
- $color-button_primary-bg-default: var(--semi-color-primary);
52
- $color-button_secondary-bg-hover: var(--semi-color-secondary-hover);
53
- $color-button_secondary-bg-active: var(--semi-color-fill-1);
54
- $color-button_tertiary-bg-default: var(--semi-color-tertiary);
55
- $color-button_secondary-bg-default: var(--semi-color-secondary);
56
- $color-button_tertiary-text-default: var(--semi-color-white);
57
- $color-button_primary-border-default: var(--semi-color-bg-transparent);
58
- $color-button_secondary-text-default: var(--semi-color-white);
59
- $color-button_secondary-border-default: var(--semi-color-bg-transparent);
60
- $width-button-border: 0px;
61
- $width-button-outline: 1px;
62
- $width-button_light-border: 1px;
63
- $width-button_iconOnl_large: 54px;
64
- $width-button_iconOnly_small: 28px;
65
- $width-button_iconOnly_default: 36px;
66
- $width-button_borderless-border: 1px;
67
- $height-button_xl: 54px;
68
- $height-button_large: 54px;
69
- $height-button_small: 28px;
70
- $height-button_default: 36px;
71
- $height-button_iconOnly_large: 54px;
72
- $height-button_iconOnly_small: 28px;
73
- $height-button_iconOnly_default: 36px;
74
- $radius-button: 8px;
75
- $radius-button_splitButtonGroup_first_topLeft: 8px;
76
- $radius-button_splitButtonGroup_last_topRight: 8px;
77
- $radius-button_splitButtonGroup_first_bottomLeft: 8px;
78
- $radius-button_splitButtonGroup_last_bottomRight: 8px;
79
- $spacing-button_large-paddingTop: 14px;
80
- $spacing-button_small-paddingTop: 0px;
81
- $spacing-button_large-paddingLeft: 20px;
82
- $spacing-button_small-paddingLeft: 12px;
83
- $spacing-button_default-paddingTop: 0px;
84
- $spacing-button_large-paddingRight: 20px;
85
- $spacing-button_small-paddingRight: 12px;
86
- $spacing-button_default-paddingLeft: 16px;
87
- $spacing-button_large-paddingBottom: 14px;
88
- $spacing-button_small-paddingBottom: 0px;
89
- $spacing-button_default-paddingRight: 16px;
90
- $color-select-bg-focus: var(--semi-color-bg-1);
91
- $color-select-bg-hover: var(--semi-color-bg-1);
92
- $color-select-bg-active: var(--semi-color-bg-1);
93
- $color-select-bg-default: var(--semi-color-bg-1);
94
- $color-select-border-focus: var(--semi-color-border);
95
- $color-select-border-hover: var(--semi-color-border-hover);
96
- $color-select-border-active: var(--semi-color-info-active);
97
- $color-select-border-default: var(--semi-color-border);
98
- $color-select_danger-bg-focus: var(--semi-color-bg-1);
99
- $color-select_danger-bg-hover: var(--semi-color-bg-1);
100
- $color-select_option-bg-hover: var(--semi-color-fill-0);
101
- $color-select_danger-bg-active: var(--semi-color-bg-1);
102
- $color-select_option-bg-active: var(--semi-color-fill-1);
103
- $color-select_warning-bg-focus: var(--semi-color-bg-1);
104
- $color-select_warning-bg-hover: var(--semi-color-bg-1);
105
- $color-select_danger-bg-default: var(--semi-color-bg-1);
106
- $color-select_input_disabled-bg: var(--semi-color-disabled-bg);
107
- $color-select_warning-bg-active: var(--semi-color-bg-1);
108
- $color-select_warning-bg-default: var(--semi-color-bg-1);
109
- $color-select_danger-border-hover: var(--semi-color-danger-hover);
110
- $color-select_danger-border-active: var(--semi-color-danger-active);
111
- $color-select_warning-border-hover: var(--semi-color-warning-hover);
112
- $color-select_danger-border-default: var(--semi-color-danger);
113
- $color-select_warning-border-active: var(--semi-color-warning-active);
114
- $color-select_warning-border-default: var(--semi-color-warning);
115
- $color-select_input_disabled-border-focus: var(--semi-color-disabled-border);
116
- $height-select_small: 28px;
117
- $height-select_default: 36px;
118
- $radius-select: 6px;
119
- $radius-select_option: 4px;
120
1
  $color-switch_checked-bg-hover: var(--semi-color-primary-hover);
121
2
  $color-switch_checked-bg-active: var(--semi-color-primary-active);
122
3
  $color-switch_checked-bg-default: var(--semi-color-primary);
123
- $color-switch_default-bg-default: var(--semi-color-fill-2);
124
- $color-switch_spin_checked-bg-default: var(--semi-color-primary-hover);
125
- $color-switch_checked_disabled-bg-default: var(--semi-color-primary-disabled);
126
- $color-cascader_default-bg-hover: var(--semi-color-bg-transparent);
127
- $color-cascader_default-bg-default: var(--semi-color-bg-transparent);
128
- $color-cascader_default-border-hover: var(--semi-color-border-hover);
129
- $color-cascader_default-border-default: var(--semi-color-border);
130
- $height-cascader_default: 36px;
131
- $radius-cascader: 8px;
132
- $color-checkbox_checked-icon-hover: var(--semi-color-bg-1);
133
- $color-checkbox_default-bg-default: var(--semi-color-bg-1);
134
- $color-checkbox_extra-text-default: var(--semi-color-text-1);
135
- $color-checkbox_checked-bg-disabled: var(--semi-color-disabled-bg);
136
- $color-checkbox_checked-icon-active: var(--semi-color-bg-1);
137
- $color-checkbox_checked-icon-default: var(--semi-color-bg-1);
138
- $color-checkbox_checked-icon-disabled: var(--semi-color-disabled-text);
139
- $color-checkbox_default-border-default: var(--semi-color-border);
140
- $color-checkbox_cardType_inner-bg-hover: var(--semi-color-bg-1);
141
- $color-checkbox_disabled-border-default: var(--semi-color-disabled-border);
142
- $color-checkbox_cardType_inner-bg-active: var(--semi-color-bg-1);
143
- $radius-checkbox_inner: 4px;
144
- $color-dropdown-bg-default: var(--semi-color-bg-dropdown);
145
- $color-dropdown_item_disabled-text-default: var(--semi-color-disabled-text);
146
- $radius-dropdown: 8px;
147
- $spacing-dropdown_menu-paddingX: 0px;
148
- $spacing-dropdown_seperator-marginX: 0px;
149
- $color-progress_default-bg: rgba(204,214,224,0.3);
150
- $color-progress_track_inner-bg: var(--semi-color-primary);
151
- $color-tagInput-border-hover: var(--semi-color-danger);
152
- $color-tagInput-border-default: var(--semi-color-border-hover);
153
- $color-tagInput_danger-bg-focus: var(--semi-color-bg-transparent);
154
- $color-tagInput_danger-bg-hover: var(--semi-color-bg-transparent);
155
- $color-tagInput_default-bg-focus: var(--semi-color-bg-transparent);
156
- $color-tagInput_default-bg-hover: var(--semi-color-bg-transparent);
157
- $color-tagInput_warning-bg-focus: var(--semi-color-border-hover);
158
- $color-tagInput_warning-bg-hover: var(--semi-color-bg-transparent);
159
- $color-tagInput_danger-bg-default: var(--semi-color-bg-transparent);
160
- $color-tagInput_default-bg-default: var(--semi-color-bg-transparent);
161
- $color-tagInput_warning-bg-default: var(--semi-color-bg-transparent);
162
- $color-tagInput_danger-border-hover: var(--semi-color-danger-hover);
163
- $color-tagInput_warning-border-focus: var(--semi-color-warning);
164
- $color-tagInput_warning-border-hover: var(--semi-color-warning-hover);
165
- $color-tagInput_danger-border-default: var(--semi-color-danger);
166
- $color-tagInput_warning-border-default: var(--semi-color-warning);
167
- $height-tagInput-small: 28px;
168
- $height-tagInput-default: 36px;
169
- $height-tagInput_input_large: 28px;
170
- $height-tagInput_input_default: 24px;
171
- $radius-tagInput: 8px;
172
- $color-datepicker_date-bg-hover: var(--semi-color-bg-0);
173
- $color-datepicker_date-bg-default: var(--semi-color-bg-0);
174
- $color-datepicker_range_input-bg-hover: var(--semi-color-bg-transparent);
175
- $color-datepicker_range_trigger-border: var(--semi-color-border);
176
- $color-datepicker_range_input-bg-default: var(--semi-color-bg-transparent);
177
- $color-datepicker_range_input-border-active: var(--semi-color-bg-transparent);
178
- $color-datepicker_range_trigger-border-focus: var(--semi-color-border-actvie);
179
- $color-datepicker_range_trigger-border-hover: var(--semi-color-border-hover);
180
- $color-datepicker_range_input_inputWrapper-bg-focus: var(--semi-color-bg-transparent);
181
- $width-datepicker_range_trigger-border: 1px;
182
- $height-datepicker_range_input-default: 36px;
183
- $radius-datepicker_range_input: 8px;
184
- $radius-datepicker_range_input_inputWrapper: 8px;
185
- $color-navigation_itemL1-text-default: var(--semi-color-text-1);
186
- $color-pagination_item-bg-hover: var(--semi-color-fill-0);
187
- $color-pagination_item-bg-active: var(--semi-color-primary-hover);
188
- $color-pagination_item-bg-selected: var(--semi-color-primary);
189
- $color-pagination_item-border-active: var(--semi-color-border-hover);
190
- $color-pagination_item-text-selected: var(--semi-color-white);
191
- $color-pagination_item-border-default: var(--semi-color-border);
192
- $color-pagination_item-border-disabled: var(--semi-color-border);
193
- $color-pagination_item-border-selected: var(--semi-color-border-actvie);
194
- $width-pagination_item_border: 1px;
195
- $radius-pagination_item: 6px;
196
- $radius-timePicker_input: 8px;
197
- $color-treeSelect_default-bg-focus: var(--semi-color-bg-transparent);
198
- $color-treeSelect_default-bg-hover: var(--semi-color-bg-transparent);
199
- $color-treeSelect_default-bg-active: var(--semi-color-bg-transparent);
200
- $color-treeSelect_default-bg-default: var(--semi-color-bg-transparent);
201
- $color-treeSelect_default-border-hover: var(--semi-color-border-hover);
202
- $color-treeSelect_default-border-default: var(--semi-color-border);
203
- $height-treeSelect_small: 28px;
204
- $height-treeSelect_default: 36px;
205
- $radius-treeSelect: 8px;
206
- $height-inputNumber_button_default: 36px;
207
- $radius-inputNumber: 4px;
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/scss/mixin.scss CHANGED
@@ -7,20 +7,11 @@
7
7
  @mixin shadow-2 {
8
8
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.14), 0px 0px 1px 0px rgba(0,0,0,0.16);
9
9
  };
10
- @mixin shadow-app {
11
- box-shadow: 0px 15px 20px 0px var(--semi-color-shadow),8px 8px 16px -6px rgba(3,3,3,0.08),1px 12px 42px -4px rgba(10,10,10,0.08);
12
- };
13
10
  @mixin shadow-knob {
14
11
  box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.10), 0px 0px 1px 0px rgba(0,0,0,0.30);
15
12
  };
16
- @mixin shadow-text {
17
- box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5),0px 1px 6px 0px rgba(0,0,0,0.2);
18
- };
19
- @mixin shadow-dropdown {
20
- box-shadow: 0px 12px 42px -4px rgba(20,23,26,0.12),0px 8px 18px -6px rgba(20,23,26,0.2);
21
- };
22
13
  @mixin shadow-elevated {
23
- box-shadow: 0px 12px 42px -4px rgba(0,0,0,0.08),0px 8px 16px -6px rgba(0,0,0,0.08);
14
+ box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.30), 0px 4px 14px 0px rgba(0,0,0,0.10);
24
15
  };
25
16
 
26
17
  @mixin box-sizing() {