rsuite 5.42.0 → 5.43.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.
Files changed (24) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/Placeholder/styles/index.less +1 -1
  3. package/cjs/AutoComplete/AutoComplete.js +9 -1
  4. package/dist/rsuite-no-reset-rtl.css +795 -711
  5. package/dist/rsuite-no-reset-rtl.min.css +1 -1
  6. package/dist/rsuite-no-reset-rtl.min.css.map +1 -1
  7. package/dist/rsuite-no-reset.css +795 -711
  8. package/dist/rsuite-no-reset.min.css +1 -1
  9. package/dist/rsuite-no-reset.min.css.map +1 -1
  10. package/dist/rsuite-rtl.css +795 -711
  11. package/dist/rsuite-rtl.min.css +1 -1
  12. package/dist/rsuite-rtl.min.css.map +1 -1
  13. package/dist/rsuite.css +795 -711
  14. package/dist/rsuite.js +1 -1
  15. package/dist/rsuite.min.css +1 -1
  16. package/dist/rsuite.min.css.map +1 -1
  17. package/dist/rsuite.min.js +1 -1
  18. package/dist/rsuite.min.js.map +1 -1
  19. package/esm/AutoComplete/AutoComplete.js +9 -1
  20. package/package.json +1 -1
  21. package/styles/color-modes/dark.less +256 -206
  22. package/styles/color-modes/high-contrast.less +252 -207
  23. package/styles/color-modes/light.less +262 -206
  24. package/styles/variables.less +4 -2
package/styles/color-modes/light.less CHANGED
@@ -1,6 +1,7 @@
1
1
  // see https://rsuitejs.com/design/default
2
2
  & {
3
3
  // Gray levels
4
+ --rs-gray-0: @B000;
4
5
  --rs-gray-50: @B050;
5
6
  --rs-gray-100: @B100;
6
7
  --rs-gray-200: @B200;
@@ -24,6 +25,15 @@
24
25
  --rs-primary-800: @H800;
25
26
  --rs-primary-900: @H900;
26
27
 
28
+ // Spectrum
29
+ --rs-color-red: @red;
30
+ --rs-color-orange: @orange;
31
+ --rs-color-yellow: @yellow;
32
+ --rs-color-green: @green;
33
+ --rs-color-cyan: @cyan;
34
+ --rs-color-blue: @blue;
35
+ --rs-color-violet: @violet;
36
+
27
37
  // Spectrum levels
28
38
  each(@spectrum, .(@color-name) {
29
39
  @color: @@color-name;
@@ -38,13 +48,13 @@
38
48
  });
39
49
 
40
50
  // Stateful colors
41
- --rs-state-success: @green;
42
- --rs-state-info: @blue;
43
- --rs-state-warning: @yellow;
44
- --rs-state-error: @red;
51
+ --rs-state-success: var(--rs-color-green);
52
+ --rs-state-info: var(--rs-color-blue);
53
+ --rs-state-warning: var(--rs-color-yellow);
54
+ --rs-state-error: var(--rs-color-red);
45
55
 
46
56
  // Reset
47
- --rs-body: @B000;
57
+ --rs-body: var(--rs-gray-0);
48
58
 
49
59
  // States
50
60
  --rs-bg-success: #edfae1;
@@ -53,289 +63,289 @@
53
63
  --rs-bg-error: #fde9ef;
54
64
 
55
65
  // Misc
56
- --rs-text-link: @H700;
57
- --rs-text-link-hover: @H800;
58
- --rs-text-link-active: @H900;
59
- --rs-text-primary: @B800;
60
- --rs-text-secondary: @B600;
61
- --rs-text-tertiary: @B500;
62
- --rs-text-heading: @B900;
63
- --rs-text-inverse: @B050;
64
- --rs-text-heading-inverse: @B000;
65
- --rs-text-active: @H700;
66
- --rs-text-disabled: @B400;
67
- --rs-text-error: @red;
68
- --rs-border-primary: @B200;
69
- --rs-border-secondary: @B100;
70
- --rs-bg-card: @B000;
71
- --rs-bg-overlay: @B000;
72
- --rs-bg-well: @B050;
73
- --rs-bg-active: @H500;
74
- --rs-bg-backdrop: fade(@B900, 30%);
75
- --rs-state-hover-bg: @H050;
76
- --rs-color-focus-ring: fade(@H500, 25%);
77
- --rs-state-focus-shadow: 0 0 0 3px fade(@H500, 25%);
78
- --rs-state-focus-outline: 3px solid fade(@H500, 25%);
66
+ --rs-text-link: var(--rs-primary-700);
67
+ --rs-text-link-hover: var(--rs-primary-800);
68
+ --rs-text-link-active: var(--rs-primary-900);
69
+ --rs-text-primary: var(--rs-gray-800);
70
+ --rs-text-secondary: var(--rs-gray-600);
71
+ --rs-text-tertiary: var(--rs-gray-500);
72
+ --rs-text-heading: var(--rs-gray-900);
73
+ --rs-text-inverse: var(--rs-gray-50);
74
+ --rs-text-heading-inverse: var(--rs-gray-0);
75
+ --rs-text-active: var(--rs-primary-700);
76
+ --rs-text-disabled: var(--rs-gray-400);
77
+ --rs-text-error: var(--rs-color-red);
78
+ --rs-border-primary: var(--rs-gray-200);
79
+ --rs-border-secondary: var(--rs-gray-100);
80
+ --rs-bg-card: var(--rs-gray-0);
81
+ --rs-bg-overlay: var(--rs-gray-0);
82
+ --rs-bg-well: var(--rs-gray-50);
83
+ --rs-bg-active: var(--rs-primary-500);
84
+ --rs-bg-backdrop: rgb(from var(--rs-gray-900) r g b / 30%);
85
+ --rs-state-hover-bg: var(--rs-primary-50);
86
+ --rs-color-focus-ring: rgb(from var(--rs-primary-500) r g b / 25%);
87
+ --rs-state-focus-shadow: 0 0 0 3px rgb(from var(--rs-primary-500) r g b / 25%);
88
+ --rs-state-focus-outline: 3px solid rgb(from var(--rs-primary-500) r g b / 25%);
79
89
  --rs-shadow-overlay: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
80
90
 
81
91
  // Button
82
- --rs-btn-default-bg: @B050;
83
- --rs-btn-default-text: @B800;
84
- --rs-btn-default-hover-bg: @B200;
85
- --rs-btn-default-active-bg: @B300;
86
- --rs-btn-default-active-text: @B900;
87
- --rs-btn-default-disabled-bg: @B050;
88
- --rs-btn-default-disabled-text: @B400;
89
- --rs-btn-primary-bg: @H500;
90
- --rs-btn-primary-text: @B000;
91
- --rs-btn-primary-hover-bg: @H600;
92
- --rs-btn-primary-active-bg: @H700;
93
- --rs-btn-subtle-text: @B800;
94
- --rs-btn-subtle-hover-bg: @B200;
95
- --rs-btn-subtle-hover-text: @B800;
96
- --rs-btn-subtle-active-bg: @B200;
97
- --rs-btn-subtle-active-text: @B900;
98
- --rs-btn-subtle-disabled-text: @B400;
99
- --rs-btn-ghost-border: @H700;
100
- --rs-btn-ghost-text: @H700;
101
- --rs-btn-ghost-hover-border: @H800;
102
- --rs-btn-ghost-hover-text: @H800;
103
- --rs-btn-ghost-active-border: @H900;
104
- --rs-btn-ghost-active-text: @H900;
105
- --rs-btn-link-text: @H700;
106
- --rs-btn-link-hover-text: @H800;
107
- --rs-btn-link-active-text: @H900;
92
+ --rs-btn-default-bg: var(--rs-gray-50);
93
+ --rs-btn-default-text: var(--rs-gray-800);
94
+ --rs-btn-default-hover-bg: var(--rs-gray-200);
95
+ --rs-btn-default-active-bg: var(--rs-gray-300);
96
+ --rs-btn-default-active-text: var(--rs-gray-900);
97
+ --rs-btn-default-disabled-bg: var(--rs-gray-50);
98
+ --rs-btn-default-disabled-text: var(--rs-gray-400);
99
+ --rs-btn-primary-bg: var(--rs-primary-500);
100
+ --rs-btn-primary-text: var(--rs-gray-0);
101
+ --rs-btn-primary-hover-bg: var(--rs-primary-600);
102
+ --rs-btn-primary-active-bg: var(--rs-primary-700);
103
+ --rs-btn-subtle-text: var(--rs-gray-800);
104
+ --rs-btn-subtle-hover-bg: var(--rs-gray-200);
105
+ --rs-btn-subtle-hover-text: var(--rs-gray-800);
106
+ --rs-btn-subtle-active-bg: var(--rs-gray-200);
107
+ --rs-btn-subtle-active-text: var(--rs-gray-900);
108
+ --rs-btn-subtle-disabled-text: var(--rs-gray-400);
109
+ --rs-btn-ghost-border: var(--rs-primary-700);
110
+ --rs-btn-ghost-text: var(--rs-primary-700);
111
+ --rs-btn-ghost-hover-border: var(--rs-primary-800);
112
+ --rs-btn-ghost-hover-text: var(--rs-primary-800);
113
+ --rs-btn-ghost-active-border: var(--rs-primary-900);
114
+ --rs-btn-ghost-active-text: var(--rs-primary-900);
115
+ --rs-btn-link-text: var(--rs-primary-700);
116
+ --rs-btn-link-hover-text: var(--rs-primary-800);
117
+ --rs-btn-link-active-text: var(--rs-primary-900);
108
118
 
109
119
  // Icon Button
110
- --rs-iconbtn-addon: @B100;
111
- --rs-iconbtn-activated-addon: @B300;
112
- --rs-iconbtn-pressed-addon: @B400;
113
- --rs-iconbtn-primary-addon: @H600;
114
- --rs-iconbtn-primary-activated-addon: @H700;
115
- --rs-iconbtn-primary-pressed-addon: @H800;
120
+ --rs-iconbtn-addon: var(--rs-gray-100);
121
+ --rs-iconbtn-activated-addon: var(--rs-gray-300);
122
+ --rs-iconbtn-pressed-addon: var(--rs-gray-400);
123
+ --rs-iconbtn-primary-addon: var(--rs-primary-600);
124
+ --rs-iconbtn-primary-activated-addon: var(--rs-primary-700);
125
+ --rs-iconbtn-primary-pressed-addon: var(--rs-primary-800);
116
126
 
117
127
  // Divider
118
- --rs-divider-border: @B200;
128
+ --rs-divider-border: var(--rs-gray-200);
119
129
 
120
130
  // Loader
121
- --rs-loader-ring: fade(@B050, 80);
122
- --rs-loader-rotor: @B500;
123
- --rs-loader-backdrop: fade(@B000, 90%);
124
- --rs-loader-ring-inverse: fade(@B050, 30);
125
- --rs-loader-rotor-inverse: @B000;
126
- --rs-loader-backdrop-inverse: fade(@B900, 83);
131
+ --rs-loader-ring: rgb(from var(--rs-gray-50) r g b / 80%);
132
+ --rs-loader-rotor: var(--rs-gray-500);
133
+ --rs-loader-backdrop: rgb(from var(--rs-gray-0) r g b / 90%);
134
+ --rs-loader-ring-inverse: rgb(from var(--rs-gray-50) r g b / 30%);
135
+ --rs-loader-rotor-inverse: var(--rs-gray-0);
136
+ --rs-loader-backdrop-inverse: rgb(from var(--rs-gray-900) r g b / 83%);
127
137
 
128
138
  // Message
129
139
  --rs-message-success-header: var(--rs-text-heading);
130
140
  --rs-message-success-text: var(--rs-text-primary);
131
- --rs-message-success-icon: @green;
132
- --rs-message-success-bg: @green-50;
141
+ --rs-message-success-icon: var(--rs-color-green);
142
+ --rs-message-success-bg: var(--rs-green-50);
133
143
  --rs-message-info-header: var(--rs-text-heading);
134
144
  --rs-message-info-text: var(--rs-text-primary);
135
- --rs-message-info-icon: @blue;
136
- --rs-message-info-bg: @blue-50;
145
+ --rs-message-info-icon: var(--rs-color-blue);
146
+ --rs-message-info-bg: var(--rs-blue-50);
137
147
  --rs-message-warning-header: var(--rs-text-heading);
138
148
  --rs-message-warning-text: var(--rs-text-primary);
139
- --rs-message-warning-icon: @yellow;
140
- --rs-message-warning-bg: @yellow-50;
149
+ --rs-message-warning-icon: var(--rs-color-yellow);
150
+ --rs-message-warning-bg: var(--rs-yellow-50);
141
151
  --rs-message-error-header: var(--rs-text-heading);
142
152
  --rs-message-error-text: var(--rs-text-primary);
143
- --rs-message-error-icon: @red;
144
- --rs-message-error-bg: @red-50;
153
+ --rs-message-error-icon: var(--rs-color-red);
154
+ --rs-message-error-bg: var(--rs-red-50);
145
155
 
146
156
  // Tooltip
147
- --rs-tooltip-bg: @B900;
148
- --rs-tooltip-text: @B000;
157
+ --rs-tooltip-bg: var(--rs-gray-900);
158
+ --rs-tooltip-text: var(--rs-gray-0);
149
159
 
150
160
  // Progress
151
- --rs-progress-bg: @B200;
152
- --rs-progress-bar: @H500;
153
- --rs-progress-bar-success: @green;
154
- --rs-progress-bar-fail: @red;
161
+ --rs-progress-bg: var(--rs-gray-200);
162
+ --rs-progress-bar: var(--rs-primary-500);
163
+ --rs-progress-bar-success: var(--rs-color-green);
164
+ --rs-progress-bar-fail: var(--rs-color-red);
155
165
 
156
166
  // Placeholder
157
- --rs-placeholder: @B100;
158
- --rs-placeholder-active: @B200;
167
+ --rs-placeholder: var(--rs-gray-100);
168
+ --rs-placeholder-active: var(--rs-gray-200);
159
169
 
160
170
  // Breadcrumb
161
- --rs-breadcrumb-item-active-text: @B900;
171
+ --rs-breadcrumb-item-active-text: var(--rs-gray-900);
162
172
 
163
173
  // Dropdown
164
- --rs-dropdown-divider: @B200;
165
- --rs-dropdown-item-bg-hover: fade(@H100, 50%);
166
- --rs-dropdown-item-bg-active: @H050;
167
- --rs-dropdown-item-text-active: @H700;
168
- --rs-dropdown-header-text: @B500;
174
+ --rs-dropdown-divider: var(--rs-gray-200);
175
+ --rs-dropdown-item-bg-hover: rgb(from var(--rs-primary-100) r g b / 50%);
176
+ --rs-dropdown-item-bg-active: var(--rs-primary-50);
177
+ --rs-dropdown-item-text-active: var(--rs-primary-700);
178
+ --rs-dropdown-header-text: var(--rs-gray-500);
169
179
  --rs-dropdown-shadow: 0 0 10px rgba(0, 0, 0, 0.06), 0 4px 4px rgba(0, 0, 0, 0.12);
170
180
 
171
181
  // ARIA menu
172
- --rs-menuitem-active-bg: fade(@H100, 50);
173
- --rs-menuitem-active-text: @H700;
182
+ --rs-menuitem-active-bg: rgb(from var(--rs-primary-100) r g b / 50%);
183
+ --rs-menuitem-active-text: var(--rs-primary-700);
174
184
 
175
185
  // Steps
176
- --rs-steps-border: @B600;
177
- --rs-steps-state-finish: @H500;
178
- --rs-steps-border-state-finish: @H500;
179
- --rs-steps-state-wait: @B600;
180
- --rs-steps-state-process: @H500;
181
- --rs-steps-state-error: @red;
182
- --rs-steps-border-state-error: @red;
183
- --rs-steps-icon-state-process: @H500;
184
- --rs-steps-icon-state-error: @red;
186
+ --rs-steps-border: var(--rs-gray-600);
187
+ --rs-steps-state-finish: var(--rs-primary-500);
188
+ --rs-steps-border-state-finish: var(--rs-primary-500);
189
+ --rs-steps-state-wait: var(--rs-gray-600);
190
+ --rs-steps-state-process: var(--rs-primary-500);
191
+ --rs-steps-state-error: var(--rs-color-red);
192
+ --rs-steps-border-state-error: var(--rs-color-red);
193
+ --rs-steps-icon-state-process: var(--rs-primary-500);
194
+ --rs-steps-icon-state-error: var(--rs-color-red);
185
195
 
186
196
  // Nav
187
- --rs-navs-text: @B800;
188
- --rs-navs-text-hover: @B800;
189
- --rs-navs-bg-hover: @B200;
190
- --rs-navs-text-active: @B900;
191
- --rs-navs-bg-active: @B200;
192
- --rs-navs-tab-border: @B300;
193
- --rs-navs-subtle-border: @B050;
194
- --rs-navs-selected: @H700;
197
+ --rs-navs-text: var(--rs-gray-800);
198
+ --rs-navs-text-hover: var(--rs-gray-800);
199
+ --rs-navs-bg-hover: var(--rs-gray-200);
200
+ --rs-navs-text-active: var(--rs-gray-900);
201
+ --rs-navs-bg-active: var(--rs-gray-200);
202
+ --rs-navs-tab-border: var(--rs-gray-300);
203
+ --rs-navs-subtle-border: var(--rs-gray-50);
204
+ --rs-navs-selected: var(--rs-primary-700);
195
205
 
196
206
  // Navbar
197
- --rs-navbar-default-bg: @B050;
198
- --rs-navbar-default-text: @B800;
199
- --rs-navbar-default-selected-text: @H700;
200
- --rs-navbar-default-hover-bg: @B200;
201
- --rs-navbar-default-hover-text: @B800;
202
- --rs-navbar-inverse-bg: @H500;
207
+ --rs-navbar-default-bg: var(--rs-gray-50);
208
+ --rs-navbar-default-text: var(--rs-gray-800);
209
+ --rs-navbar-default-selected-text: var(--rs-primary-700);
210
+ --rs-navbar-default-hover-bg: var(--rs-gray-200);
211
+ --rs-navbar-default-hover-text: var(--rs-gray-800);
212
+ --rs-navbar-inverse-bg: var(--rs-primary-500);
203
213
  --rs-navbar-inverse-text: #fff;
204
- --rs-navbar-inverse-selected-bg: @H700;
205
- --rs-navbar-inverse-hover-bg: @H600;
214
+ --rs-navbar-inverse-selected-bg: var(--rs-primary-700);
215
+ --rs-navbar-inverse-hover-bg: var(--rs-primary-600);
206
216
  --rs-navbar-inverse-hover-text: #fff;
207
217
  --rs-navbar-subtle-bg: #fff;
208
- --rs-navbar-subtle-text: @B800;
209
- --rs-navbar-subtle-selected-text: @H700;
210
- --rs-navbar-subtle-hover-bg: @B050;
211
- --rs-navbar-subtle-hover-text: @B800;
218
+ --rs-navbar-subtle-text: var(--rs-gray-800);
219
+ --rs-navbar-subtle-selected-text: var(--rs-primary-700);
220
+ --rs-navbar-subtle-hover-bg: var(--rs-gray-50);
221
+ --rs-navbar-subtle-hover-text: var(--rs-gray-800);
212
222
 
213
223
  // Sidenav
214
- --rs-sidenav-default-bg: @B050;
215
- --rs-sidenav-default-text: @B800;
216
- --rs-sidenav-default-selected-text: @H700;
217
- --rs-sidenav-default-hover-bg: @B200;
218
- --rs-sidenav-default-hover-text: @B800;
219
- --rs-sidenav-default-footer-border: @B200;
220
- --rs-sidenav-inverse-bg: @H500;
224
+ --rs-sidenav-default-bg: var(--rs-gray-50);
225
+ --rs-sidenav-default-text: var(--rs-gray-800);
226
+ --rs-sidenav-default-selected-text: var(--rs-primary-700);
227
+ --rs-sidenav-default-hover-bg: var(--rs-gray-200);
228
+ --rs-sidenav-default-hover-text: var(--rs-gray-800);
229
+ --rs-sidenav-default-footer-border: var(--rs-gray-200);
230
+ --rs-sidenav-inverse-bg: var(--rs-primary-500);
221
231
  --rs-sidenav-inverse-text: #fff;
222
- --rs-sidenav-inverse-selected-bg: @H700;
223
- --rs-sidenav-inverse-hover-bg: @H600;
224
- --rs-sidenav-inverse-footer-border: @H600;
232
+ --rs-sidenav-inverse-selected-bg: var(--rs-primary-700);
233
+ --rs-sidenav-inverse-hover-bg: var(--rs-primary-600);
234
+ --rs-sidenav-inverse-footer-border: var(--rs-primary-600);
225
235
  --rs-sidenav-subtle-bg: #fff;
226
- --rs-sidenav-subtle-text: @B800;
227
- --rs-sidenav-subtle-selected-text: @H700;
228
- --rs-sidenav-subtle-hover-bg: @B050;
229
- --rs-sidenav-subtle-hover-text: @B800;
230
- --rs-sidenav-subtle-footer-border: @B200;
236
+ --rs-sidenav-subtle-text: var(--rs-gray-800);
237
+ --rs-sidenav-subtle-selected-text: var(--rs-primary-700);
238
+ --rs-sidenav-subtle-hover-bg: var(--rs-gray-50);
239
+ --rs-sidenav-subtle-hover-text: var(--rs-gray-800);
240
+ --rs-sidenav-subtle-footer-border: var(--rs-gray-200);
231
241
 
232
242
  // Input
233
- --rs-input-bg: @B000;
234
- --rs-input-focus-border: @H500;
235
- --rs-input-disabled-bg: @B050;
243
+ --rs-input-bg: var(--rs-gray-0);
244
+ --rs-input-focus-border: var(--rs-primary-500);
245
+ --rs-input-disabled-bg: var(--rs-gray-50);
236
246
 
237
247
  // ARIA Listboxes
238
- --rs-listbox-option-hover-bg: fade(@H100, 50%);
239
- --rs-listbox-option-hover-text: @H700;
240
- --rs-listbox-option-selected-text: @H700;
241
- --rs-listbox-option-selected-bg: @H050;
242
- --rs-listbox-option-disabled-text: @B400;
243
- --rs-listbox-option-disabled-selected-text: @H200;
248
+ --rs-listbox-option-hover-bg: rgb(from var(--rs-primary-100) r g b / 50%);
249
+ --rs-listbox-option-hover-text: var(--rs-primary-700);
250
+ --rs-listbox-option-selected-text: var(--rs-primary-700);
251
+ --rs-listbox-option-selected-bg: var(--rs-primary-50);
252
+ --rs-listbox-option-disabled-text: var(--rs-gray-400);
253
+ --rs-listbox-option-disabled-selected-text: var(--rs-primary-200);
244
254
 
245
255
  // Checkbox
246
256
  --rs-checkbox-icon: #fff;
247
- --rs-checkbox-border: @B300;
248
- --rs-checkbox-checked-bg: @H500;
249
- --rs-checkbox-disabled-bg: @B050;
257
+ --rs-checkbox-border: var(--rs-gray-300);
258
+ --rs-checkbox-checked-bg: var(--rs-primary-500);
259
+ --rs-checkbox-disabled-bg: var(--rs-gray-50);
250
260
 
251
261
  // Radio
252
262
  --rs-radio-marker: #fff;
253
- --rs-radio-border: @B300;
254
- --rs-radio-checked-bg: @H500;
255
- --rs-radio-disabled-bg: @B050;
263
+ --rs-radio-border: var(--rs-gray-300);
264
+ --rs-radio-checked-bg: var(--rs-primary-500);
265
+ --rs-radio-disabled-bg: var(--rs-gray-50);
256
266
 
257
267
  // RadioTile
258
- --rs-radio-tile-border: @B300;
259
- --rs-radio-tile-bg: @B000;
260
- --rs-radio-tile-checked-color: @H500;
268
+ --rs-radio-tile-border: var(--rs-gray-300);
269
+ --rs-radio-tile-bg: var(--rs-gray-0);
270
+ --rs-radio-tile-checked-color: var(--rs-primary-500);
261
271
  --rs-radio-tile-checked-mark-color: #fff;
262
- --rs-radio-tile-checked-disabled-color: @H100;
272
+ --rs-radio-tile-checked-disabled-color: var(--rs-primary-100);
263
273
  --rs-radio-tile-icon-size: 32px;
264
274
 
265
275
  // Rate
266
- --rs-rate-symbol: @B600;
267
- --rs-rate-symbol-checked: @yellow-500;
276
+ --rs-rate-symbol: var(--rs-gray-600);
277
+ --rs-rate-symbol-checked: var(--rs-blue-500);
268
278
 
269
279
  // Toggle
270
- --rs-toggle-bg: @B300;
280
+ --rs-toggle-bg: var(--rs-gray-300);
271
281
  --rs-toggle-thumb: #fff;
272
- --rs-toggle-loader-ring: fade(@B050, 30%);
273
- --rs-toggle-loader-rotor: @B000;
274
- --rs-toggle-hover-bg: @B400;
275
- --rs-toggle-disabled-bg: @B050;
282
+ --rs-toggle-loader-ring: rgb(from var(--rs-gray-50) r g b / 30%);
283
+ --rs-toggle-loader-rotor: var(--rs-gray-0);
284
+ --rs-toggle-hover-bg: var(--rs-gray-400);
285
+ --rs-toggle-disabled-bg: var(--rs-gray-50);
276
286
  --rs-toggle-disabled-thumb: #fff;
277
- --rs-toggle-checked-bg: @H500;
287
+ --rs-toggle-checked-bg: var(--rs-primary-500);
278
288
  --rs-toggle-checked-thumb: #fff;
279
- --rs-toggle-checked-hover-bg: @H600;
280
- --rs-toggle-checked-disabled-bg: @H100;
289
+ --rs-toggle-checked-hover-bg: var(--rs-primary-600);
290
+ --rs-toggle-checked-disabled-bg: var(--rs-primary-100);
281
291
  --rs-toggle-checked-disabled-thumb: #fff;
282
292
 
283
293
  // Slider
284
- --rs-slider-bar: @B100;
285
- --rs-slider-hover-bar: @B200;
286
- --rs-slider-thumb-border: @H500;
294
+ --rs-slider-bar: var(--rs-gray-100);
295
+ --rs-slider-hover-bar: var(--rs-gray-200);
296
+ --rs-slider-thumb-border: var(--rs-primary-500);
287
297
  --rs-slider-thumb-bg: #fff;
288
- --rs-slider-thumb-hover-shadow: 0 0 0 8px fade(@H500, 25);
289
- --rs-slider-progress: @H500;
298
+ --rs-slider-thumb-hover-shadow: 0 0 0 8px rgb(from var(--rs-gray-500) r g b / 25%);
299
+ --rs-slider-progress: var(--rs-primary-500);
290
300
 
291
301
  // Uploader
292
- --rs-uploader-item-bg: @B300;
293
- --rs-uploader-item-hover-bg: @B050;
294
- --rs-uploader-overlay-bg: fade(#fff, 80);
295
- --rs-uploader-dnd-bg: @B000;
296
- --rs-uploader-dnd-border: @B200;
297
- --rs-uploader-dnd-hover-border: @H500;
302
+ --rs-uploader-item-bg: var(--rs-gray-300);
303
+ --rs-uploader-item-hover-bg: var(--rs-gray-50);
304
+ --rs-uploader-overlay-bg: rgb(from #fff r g b / 80%);
305
+ --rs-uploader-dnd-bg: var(--rs-gray-0);
306
+ --rs-uploader-dnd-border: var(--rs-gray-200);
307
+ --rs-uploader-dnd-hover-border: var(--rs-primary-500);
298
308
 
299
309
  // Avatar
300
- --rs-avatar-bg: @B300;
301
- --rs-avatar-text: @B000;
310
+ --rs-avatar-bg: var(--rs-gray-300);
311
+ --rs-avatar-text: var(--rs-gray-0);
302
312
 
303
313
  // Badge
304
- --rs-badge-bg: @red;
305
- --rs-badge-text: @B000;
314
+ --rs-badge-bg: var(--rs-color-red);
315
+ --rs-badge-text: var(--rs-gray-0);
306
316
 
307
317
  // Tag
308
- --rs-tag-bg: @B050;
309
- --rs-tag-close: @red;
318
+ --rs-tag-bg: var(--rs-gray-50);
319
+ --rs-tag-close: var(--rs-color-red);
310
320
 
311
321
  // Carousel
312
- --rs-carousel-bg: @B600;
313
- --rs-carousel-indicator: fade(@B000, 40);
314
- --rs-carousel-indicator-hover: @B000;
315
- --rs-carousel-indicator-active: @H500;
322
+ --rs-carousel-bg: var(--rs-gray-600);
323
+ --rs-carousel-indicator: rgb(from var(--rs-gray-0) r g b / 40%);
324
+ --rs-carousel-indicator-hover: var(--rs-gray-0);
325
+ --rs-carousel-indicator-active: var(--rs-primary-500);
316
326
 
317
327
  // Panel
318
328
  --rs-panel-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
319
329
 
320
330
  // List
321
- --rs-list-bg: @B000;
322
- --rs-list-border: @B200;
323
- --rs-list-hover-bg: @H050;
324
- --rs-list-placeholder-bg: fade(@H050, 50%);
325
- --rs-list-placeholder-border: @H500;
331
+ --rs-list-bg: var(--rs-gray-0);
332
+ --rs-list-border: var(--rs-gray-200);
333
+ --rs-list-hover-bg: var(--rs-primary-50);
334
+ --rs-list-placeholder-bg: rgb(from var(--rs-primary-50) r g b / 50%);
335
+ --rs-list-placeholder-border: var(--rs-primary-500);
326
336
 
327
337
  // Timeline
328
- --rs-timeline-indicator-bg: @B300;
329
- --rs-timeline-indicator-active-bg: @H500;
338
+ --rs-timeline-indicator-bg: var(--rs-gray-300);
339
+ --rs-timeline-indicator-active-bg: var(--rs-primary-500);
330
340
 
331
341
  // Table
332
342
  --rs-table-shadow: rgba(9, 9, 9, 0.08);
333
- --rs-table-sort: @H500;
334
- --rs-table-resize: @H500;
335
- --rs-table-scrollbar-track: @B200;
336
- --rs-table-scrollbar-thumb: @B800;
337
- --rs-table-scrollbar-thumb-active: @B900;
338
- --rs-table-scrollbar-vertical-track: fade(@B200, 40%);
343
+ --rs-table-sort: var(--rs-primary-500);
344
+ --rs-table-resize: var(--rs-primary-500);
345
+ --rs-table-scrollbar-track: var(--rs-gray-200);
346
+ --rs-table-scrollbar-thumb: var(--rs-gray-800);
347
+ --rs-table-scrollbar-thumb-active: var(--rs-gray-900);
348
+ --rs-table-scrollbar-vertical-track: rgb(from var(--rs-gray-200) r g b / 40%);
339
349
 
340
350
  // Drawer
341
351
  --rs-drawer-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
@@ -344,23 +354,69 @@
344
354
  --rs-modal-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
345
355
 
346
356
  // Form
347
- --rs-form-errormessage-text: @red;
357
+ --rs-form-errormessage-text: var(--rs-color-red);
348
358
  --rs-form-errormessage-bg: #fff;
349
- --rs-form-errormessage-border: @B200;
359
+ --rs-form-errormessage-border: var(--rs-gray-200);
350
360
 
351
361
  // Picker
352
- --rs-picker-value: @H700;
353
- --rs-picker-count-bg: @H500;
362
+ --rs-picker-value: var(--rs-primary-700);
363
+ --rs-picker-count-bg: var(--rs-primary-500);
354
364
  --rs-picker-count-text: #fff;
355
365
 
356
366
  // Calendar
357
- --rs-calendar-today-bg: @H500;
367
+ --rs-calendar-today-bg: var(--rs-primary-500);
358
368
  --rs-calendar-today-text: #fff;
359
- --rs-calendar-range-bg: fade(@H100, 50%);
360
- --rs-calendar-time-unit-bg: @B050;
369
+ --rs-calendar-range-bg: rgb(from var(--rs-primary-100) r g b / 50%);
370
+ --rs-calendar-time-unit-bg: var(--rs-gray-50);
361
371
  --rs-calendar-date-selected-text: #fff;
362
- --rs-calendar-cell-selected-hover-bg: @H700;
372
+ --rs-calendar-cell-selected-hover-bg: var(--rs-primary-700);
363
373
 
364
374
  // Popover
365
375
  --rs-popover-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
376
+
377
+ // CSS relative color syntax is not supported
378
+ // https://developer.chrome.com/blog/css-relative-color-syntax/
379
+ @supports not (color: rgb(from white r g b)) {
380
+ // Misc
381
+ --rs-bg-backdrop: fade(@B900, 30%);
382
+ --rs-color-focus-ring: fade(@H500, 25%);
383
+ --rs-state-focus-shadow: 0 0 0 3px fade(@H500, 25%);
384
+ --rs-state-focus-outline: 3px solid fade(@H500, 25%);
385
+
386
+ // Loader
387
+ --rs-loader-ring: fade(@B050, 80);
388
+ --rs-loader-backdrop: fade(@B000, 90%);
389
+ --rs-loader-ring-inverse: fade(@B050, 30%);
390
+ --rs-loader-backdrop-inverse: fade(@B900, 83%);
391
+
392
+ // Dropdown
393
+ --rs-dropdown-item-bg-hover: fade(@H100, 50%);
394
+
395
+ // ARIA menu
396
+ --rs-menuitem-active-bg: fade(@H100, 50);
397
+
398
+ // ARIA Listboxes
399
+ --rs-listbox-option-hover-bg: fade(@H100, 50%);
400
+
401
+ // Toggle
402
+ --rs-toggle-loader-ring: fade(@B050, 30%);
403
+
404
+ // Slider
405
+ --rs-slider-thumb-hover-shadow: 0 0 0 8px fade(@H500, 25%);
406
+
407
+ // Uploader
408
+ --rs-uploader-overlay-bg: fade(#fff, 80);
409
+
410
+ // Carousel
411
+ --rs-carousel-indicator: fade(@B000, 40);
412
+
413
+ // List
414
+ --rs-list-placeholder-bg: fade(@H050, 50%);
415
+
416
+ // Table
417
+ --rs-table-scrollbar-vertical-track: fade(@B200, 40%);
418
+
419
+ // Calendar
420
+ --rs-calendar-range-bg: fade(@H100, 50%);
421
+ }
366
422
  }
package/styles/variables.less CHANGED
@@ -123,6 +123,7 @@
123
123
 
124
124
  @font-family-base: Apple-System, Arial, Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', STXihei, sans-serif;
125
125
 
126
+ @font-size-extra-large: 18px;
126
127
  @font-size-large: 16px;
127
128
  @font-size-base: 14px;
128
129
  @font-size-small: 12px;
@@ -147,6 +148,7 @@
147
148
  @line-height-large-computed: 22px;
148
149
 
149
150
  // Unit-less `line-height` for use in components like buttons.
151
+ @line-height-extra-large: unit((@line-height-large-computed / @font-size-extra-large)); // ~1.222
150
152
  @line-height-large: unit((@line-height-large-computed / @font-size-large)); // ~1.375
151
153
  @line-height-base: unit((@line-height-computed / @font-size-base)); // ~1.4285714285714286
152
154
  @line-height-small: unit((@line-height-computed / @font-size-small)); // ~1.6666666666666667
@@ -517,9 +519,9 @@
517
519
  @modal-body-margin: 20px;
518
520
  @modal-border-radius: @border-radius;
519
521
 
520
- @modal-title-font-size: @font-size-large;
522
+ @modal-title-font-size: @font-size-extra-large;
521
523
  @modal-title-color: var(--rs-text-primary);
522
- @modal-title-line-height: @line-height-large;
524
+ @modal-title-line-height: @line-height-extra-large;
523
525
 
524
526
  @modal-close-btn-size: @font-size-small;
525
527
  @modal-close-btn-line-height: @line-height-small;