@globalbrain/sefirot 2.49.0 → 3.1.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 (34) hide show
  1. package/lib/components/SActionList.vue +23 -0
  2. package/lib/components/SActionListItem.vue +64 -0
  3. package/lib/components/SAvatar.vue +1 -1
  4. package/lib/components/SButton.vue +378 -392
  5. package/lib/components/SCard.vue +5 -5
  6. package/lib/components/SCardHeader.vue +1 -1
  7. package/lib/components/SCardHeaderTitle.vue +4 -4
  8. package/lib/components/SContent.vue +2 -2
  9. package/lib/components/SDescItem.vue +1 -1
  10. package/lib/components/SDescLink.vue +2 -2
  11. package/lib/components/SDescText.vue +2 -2
  12. package/lib/components/SDropdown.vue +1 -1
  13. package/lib/components/SDropdownSectionFilter.vue +8 -9
  14. package/lib/components/SDropdownSectionMenu.vue +1 -1
  15. package/lib/components/SHeadLead.vue +2 -2
  16. package/lib/components/SHeadTitle.vue +4 -4
  17. package/lib/components/SInputBase.vue +5 -5
  18. package/lib/components/SInputCheckbox.vue +5 -5
  19. package/lib/components/SInputImage.vue +239 -0
  20. package/lib/components/SInputRadio.vue +4 -4
  21. package/lib/components/SSheet.vue +1 -1
  22. package/lib/components/SState.vue +7 -7
  23. package/lib/components/STableCell.vue +1 -1
  24. package/lib/components/STableColumn.vue +1 -1
  25. package/lib/components/STableHeader.vue +1 -1
  26. package/lib/components/STableHeaderActionItem.vue +1 -1
  27. package/lib/composables/Image.ts +46 -0
  28. package/lib/composables/Table.ts +6 -5
  29. package/lib/styles/base.css +1 -1
  30. package/lib/styles/bootstrap.css +1 -0
  31. package/lib/styles/variables-deprecated.css +336 -0
  32. package/lib/styles/variables.css +582 -578
  33. package/lib/support/Utils.ts +4 -0
  34. package/package.json +1 -1
package/lib/styles/variables.css CHANGED
@@ -1,118 +1,312 @@
1
1
  /**
2
- * Colors Base
2
+ * Color: Solid Primitives
3
3
  *
4
- * These are the pure base color presets. Most of the time, you should not be
5
- * using these colors directly in the theme but rather use "Colors Theme"
6
- * instead because those are "Theme (light or dark)" dependant.
4
+ * These are the pure base color presets that always have same color
5
+ * regardless of the current theme.
7
6
  * -------------------------------------------------------------------------- */
8
7
 
9
8
  :root {
10
- /**
11
- * DEPRECATED: These values are no longer used. Equivalent colors are defined
12
- * directly in theme-aware color definitions.
13
- */
14
- --c-white-soft: #fafafa;
15
- --c-white-mute: #f2f2f2;
16
- --c-white-elv: #fafafa;
17
- --c-white-elv-up: #ffffff;
18
- --c-white-elv-down: #f2f2f2;
19
- --c-black: #000000;
20
- --c-black-soft: #171717;
21
- --c-black-mute: #1c1c1e;
22
- --c-black-elv: #171717;
23
- --c-black-elv-up: #1c1c1e;
24
- --c-black-elv-down: #000000;
25
-
26
9
  --c-white: #ffffff;
27
- --c-black: #000000;
28
-
29
- --c-gray: #8e8e93;
30
-
31
- --c-gray-dark-1: #636366;
32
- --c-gray-dark-2: #48484a;
33
- --c-gray-dark-3: #3a3a3c;
34
- --c-gray-dark-4: #2c2c2e;
35
- --c-gray-dark-5: #1c1c1e;
10
+ --c-white-1: #ffffff;
11
+ --c-white-2: #333333;
12
+ --c-white-3: #525252;
13
+ --c-white-a1: #ffffff;
14
+ --c-white-a2: rgba(255, 255, 255, 0.69);
15
+ --c-white-a3: rgba(255, 255, 255, 0.49);
36
16
 
37
- --c-gray-light-1: #aeaeb2;
38
- --c-gray-light-2: #c7c7cc;
39
- --c-gray-light-3: #d1d1d6;
40
- --c-gray-light-4: #e5e5ea;
41
- --c-gray-light-5: #f2f2f7;
42
-
43
- --c-divider-light-1: rgba(60, 60, 67, 0.29);
44
- --c-divider-light-2: rgba(60, 60, 67, 0.12);
45
-
46
- --c-divider-dark-1: rgba(84, 84, 88, 0.65);
47
- --c-divider-dark-2: rgba(84, 84, 84, 0.48);
17
+ --c-black: #000000;
18
+ --c-black-1: #000000;
19
+ --c-black-2: #333333;
20
+ --c-black-3: #525252;
21
+ --c-black-a1: #000000;
22
+ --c-black-a2: rgba(0, 0, 0, 0.62);
23
+ --c-black-a3: rgba(0, 0, 0, 0.51);
48
24
 
49
25
  --c-neutral-light-1: #000000;
50
26
  --c-neutral-light-2: #333333;
51
27
  --c-neutral-light-3: #525252;
52
- --c-neutral-light-dimm-1: rgba(0, 0, 0, 0.06);
53
- --c-neutral-light-dimm-2: rgba(0, 0, 0, 0.12);
54
- --c-neutral-light-dimm-2: rgba(0, 0, 0, 0.20);
28
+ --c-neutral-light-dimm-a1: rgba(0, 0, 0, 0.06);
29
+ --c-neutral-light-dimm-a2: rgba(0, 0, 0, 0.12);
55
30
 
56
31
  --c-neutral-dark-1: #ffffff;
57
32
  --c-neutral-dark-2: #cccccc;
58
33
  --c-neutral-dark-3: #adadad;
59
- --c-neutral-dark-dimm-1: rgba(255, 255, 255, 0.08);
60
- --c-neutral-dark-dimm-2: rgba(255, 255, 255, 0.16);
61
- --c-neutral-dark-dimm-2: rgba(255, 255, 255, 0.24);
34
+ --c-neutral-dark-dimm-a1: rgba(255, 255, 255, 0.08);
35
+ --c-neutral-dark-dimm-a2: rgba(255, 255, 255, 0.16);
62
36
 
63
- --c-text-light-1: #1f1f1f;
64
- --c-text-light-2: rgba(60, 60, 67, 0.72);
65
- --c-text-light-3: rgba(60, 60, 67, 0.39);
37
+ --c-text-light-1: #1c2024;
38
+ --c-text-light-2: rgba(0, 7, 20, 0.62);
39
+ --c-text-light-3: rgba(0, 4, 26, 0.51);
66
40
 
67
- --c-text-dark-1: rgba(235, 235, 245, 0.98);
68
- --c-text-dark-2: rgba(235, 235, 245, 0.6);
69
- --c-text-dark-3: rgba(235, 235, 245, 0.3);
41
+ --c-text-dark-1: #edeef0;
42
+ --c-text-dark-2: rgba(239, 245, 255, 0.69);
43
+ --c-text-dark-3: rgba(228, 238, 255, 0.49);
70
44
  }
71
45
 
72
46
  /**
73
- * Colors Theme
47
+ * Color: Dynamic Primitives
48
+ *
49
+ * These are the pure base color presets but they are theme-aware and
50
+ * change their color depending on the current theme.
74
51
  * -------------------------------------------------------------------------- */
75
52
 
76
53
  :root {
77
- /* DEPRECATED: Use `--c-bg-elv-{number}`. */
78
- --c-bg: var(--c-white);
79
- --c-bg-soft: var(--c-white-soft);
80
- --c-bg-mute: var(--c-white-mute);
81
- --c-bg-elv: var(--c-white-elv);
82
- --c-bg-elv-up: var(--c-white-elv-up);
83
- --c-bg-elv-down: var(--c-white-elv-down);
84
- --c-bg-lift-1: var(--c-white-soft);
85
- --c-bg-lift-2: var(--c-white-mute);
86
-
87
- /* DEPRECATED: Use `--c-divider-x`. */
88
- --c-divider: var(--c-divider-light-1);
89
- --c-divider-light: var(--c-divider-light-2);
90
-
91
- /* DEPRECATED: Use `--c-bg-soft`. */
92
- --c-soft: var(--c-white-soft);
54
+ --c-gray-1: #fcfcfd;
55
+ --c-gray-2: #f9f9fb;
56
+ --c-gray-3: #f2f2f5;
57
+ --c-gray-4: #ebebef;
58
+ --c-gray-5: #e4e4e9;
59
+ --c-gray-6: #dddde3;
60
+ --c-gray-7: #d3d4db;
61
+ --c-gray-8: #b9bbc6;
62
+ --c-gray-9: #8b8d98;
63
+ --c-gray-10: #7e808a;
64
+ --c-gray-11: #60646c;
65
+ --c-gray-12: #1c2024;
66
+ --c-gray-a9: #ffffff;
67
+ --c-gray-a10: rgba(0, 4, 26, 0.51);
68
+ --c-gray-a11: rgba(0, 7, 20, 0.62);
69
+
70
+ --c-blue-8: #53a0ea;
71
+ --c-blue-9: #147de1;
72
+ --c-blue-10: #0069cc;
73
+ --c-blue-11: #005eb8;
74
+ --c-blue-12: #00498f;
75
+ --c-blue-a3: rgba(0, 102, 255, 0.17);
76
+ --c-blue-a4: rgba(0, 110, 255, 0.23);
77
+
78
+ --c-green-8: #5bb98b;
79
+ --c-green-9: #30a46c;
80
+ --c-green-10: #2b9a66;
81
+ --c-green-11: #218358;
82
+ --c-green-12: #2b644d;
83
+ --c-green-a3: rgba(5, 150, 105, 0.17);
84
+ --c-green-a4: rgba(5, 150, 105, 0.23);
85
+
86
+ --c-yellow-8: #e99e35;
87
+ --c-yellow-9: #d67d00;
88
+ --c-yellow-10: #ad6500;
89
+ --c-yellow-11: #ab6400;
90
+ --c-yellow-12: #64422b;
91
+ --c-yellow-a3: rgba(202, 138, 4, 0.17);
92
+ --c-yellow-a4: rgba(202, 138, 4, 0.23);
93
+
94
+ --c-red-8: #e5768b;
95
+ --c-red-9: #e33a5c;
96
+ --c-red-10: #ce274a;
97
+ --c-red-11: #ca244d;
98
+ --c-red-12: #64172b;
99
+ --c-red-a3: rgba(225, 29, 72, 0.17);
100
+ --c-red-a4: rgba(225, 29, 72, 0.23);
101
+ }
93
102
 
94
- --c-bg-elv-1: #ffffff;
95
- --c-bg-elv-2: #f9f9f9;
96
- --c-bg-elv-3: #ffffff;
97
- --c-bg-soft: #f9f9f9;
103
+ .dark {
104
+ --c-gray-1: #151517;
105
+ --c-gray-2: #1b1b1f;
106
+ --c-gray-3: #232429;
107
+ --c-gray-4: #2e3035;
108
+ --c-gray-5: #35373c;
109
+ --c-gray-6: #3c3f44;
110
+ --c-gray-7: #464b50;
111
+ --c-gray-8: #5a6165;
112
+ --c-gray-9: #696e77;
113
+ --c-gray-10: #7d828a;
114
+ --c-gray-11: #adb1b8;
115
+ --c-gray-12: #edeef0;
116
+ --c-gray-a9: rgba(220, 232, 255, 0.41);
117
+ --c-gray-a10: rgba(228, 238, 255, 0.49);
118
+ --c-gray-a11: rgba(239, 245, 255, 0.69);
119
+
120
+ --c-blue-8: #0f57a5;
121
+ --c-blue-9: #0077ed;
122
+ --c-blue-10: #2997ff;
123
+ --c-blue-11: #53b5ff;
124
+ --c-blue-12: #82caff;
125
+ --c-blue-a3: rgba(0, 102, 255, 0.17);
126
+ --c-blue-a4: rgba(0, 110, 255, 0.23);
127
+
128
+ --c-green-8: #096644;
129
+ --c-green-9: #098c5d;
130
+ --c-green-10: #18b87a;
131
+ --c-green-11: #40ce97;
132
+ --c-green-12: #71ffc8;
133
+ --c-green-a3: rgba(5, 150, 105, 0.17);
134
+ --c-green-a4: rgba(5, 150, 105, 0.23);
135
+
136
+ --c-yellow-8: #6a4714;
137
+ --c-yellow-9: #986a25;
138
+ --c-yellow-10: #da8b17;
139
+ --c-yellow-11: #f8ac3c;
140
+ --c-yellow-12: #ffd79b;
141
+ --c-yellow-a3: rgba(202, 138, 4, 0.17);
142
+ --c-yellow-a4: rgba(202, 138, 4, 0.23);
143
+
144
+ --c-red-8: #8a1a29;
145
+ --c-red-9: #c72e42;
146
+ --c-red-10: #f2495f;
147
+ --c-red-11: #f66f81;
148
+ --c-red-12: #fe8e9d;
149
+ --c-red-a3: rgba(225, 29, 72, 0.17);
150
+ --c-red-a4: rgba(225, 29, 72, 0.23);
151
+ }
98
152
 
99
- --c-divider-1: var(--c-divider-light-1);
100
- --c-divider-2: var(--c-divider-light-2);
153
+ /**
154
+ * Color: Divider and Gutter
155
+ * -------------------------------------------------------------------------- */
156
+ :root {
157
+ --c-divider: #e0e0e1;
158
+ --c-gutter: #e2e2e3;
159
+ }
101
160
 
102
- --c-gutter: #e8e8e8;
161
+ .dark {
162
+ --c-divider: #2e3035;
163
+ --c-gutter: #000000;
164
+ }
103
165
 
166
+ /**
167
+ * Color: Neutral
168
+ * -------------------------------------------------------------------------- */
169
+ :root {
104
170
  --c-neutral-1: var(--c-neutral-light-1);
105
171
  --c-neutral-2: var(--c-neutral-light-2);
106
172
  --c-neutral-3: var(--c-neutral-light-3);
107
- --c-neutral-dimm-1: var(--c-neutral-light-dimm-1);
108
- --c-neutral-dimm-2: var(--c-neutral-light-dimm-2);
173
+ --c-neutral-dimm-a1: var(--c-neutral-light-dimm-a1);
174
+ --c-neutral-dimm-a2: var(--c-neutral-light-dimm-a2);
109
175
 
110
176
  --c-neutral-inverse-1: var(--c-neutral-dark-1);
111
177
  --c-neutral-inverse-2: var(--c-neutral-dark-2);
112
178
  --c-neutral-inverse-3: var(--c-neutral-dark-3);
113
- --c-neutral-inverse-dimm-1: var(--c-neutral-dark-dimm-1);
114
- --c-neutral-inverse-dimm-2: var(--c-neutral-dark-dimm-2);
179
+ --c-neutral-inverse-dimm-a1: var(--c-neutral-dark-dimm-a1);
180
+ --c-neutral-inverse-dimm-a2: var(--c-neutral-dark-dimm-a2);
181
+ }
182
+
183
+ .dark {
184
+ --c-neutral-1: var(--c-neutral-dark-1);
185
+ --c-neutral-2: var(--c-neutral-dark-2);
186
+ --c-neutral-3: var(--c-neutral-dark-3);
187
+ --c-neutral-dimm-a1: var(--c-neutral-dark-dimm-a1);
188
+ --c-neutral-dimm-a2: var(--c-neutral-dark-dimm-a2);
189
+
190
+ --c-neutral-inverse-1: var(--c-neutral-light-1);
191
+ --c-neutral-inverse-2: var(--c-neutral-light-2);
192
+ --c-neutral-inverse-3: var(--c-neutral-light-3);
193
+ --c-neutral-inverse-dimm-a1: var(--c-neutral-light-dimm-a1);
194
+ --c-neutral-inverse-dimm-a2: var(--c-neutral-light-dimm-a2);
195
+ }
115
196
 
197
+ /**
198
+ * Color: Foreground
199
+ * -------------------------------------------------------------------------- */
200
+
201
+ :root {
202
+ --c-fg-mute-1: var(--c-gray-6);
203
+ --c-fg-mute-2: var(--c-gray-7);
204
+ --c-fg-mute-3: var(--c-gray-8);
205
+
206
+ --c-fg-gray-1: var(--c-gray-10);
207
+
208
+ --c-fg-info-1: var(--c-blue-10);
209
+ --c-fg-info-2: var(--c-blue-11);
210
+ --c-fg-info-3: var(--c-blue-12);
211
+
212
+ --c-fg-success-1: var(--c-green-10);
213
+ --c-fg-success-2: var(--c-green-11);
214
+ --c-fg-success-3: var(--c-green-12);
215
+
216
+ --c-fg-warning-1: var(--c-yellow-10);
217
+ --c-fg-warning-2: var(--c-yellow-11);
218
+ --c-fg-warning-3: var(--c-yellow-12);
219
+
220
+ --c-fg-danger-1: var(--c-red-10);
221
+ --c-fg-danger-2: var(--c-red-11);
222
+ --c-fg-danger-3: var(--c-red-12);
223
+ }
224
+
225
+ /**
226
+ * Color: Background
227
+ * -------------------------------------------------------------------------- */
228
+
229
+ :root {
230
+ --c-bg-elv-1: #ffffff;
231
+ --c-bg-elv-2: #f9f9f9;
232
+ --c-bg-elv-3: #ffffff;
233
+ --c-bg-elv-4: #f9f9f9;
234
+
235
+ --c-bg-mute-1: var(--c-gray-4);
236
+ --c-bg-mute-2: var(--c-gray-5);
237
+ --c-bg-mute-3: var(--c-gray-6);
238
+
239
+ --c-bg-info-1: var(--c-blue-9);
240
+ --c-bg-info-2: var(--c-blue-10);
241
+ --c-bg-info-3: var(--c-blue-11);
242
+ --c-bg-info-dimm-a1: var(--c-blue-a3);
243
+ --c-bg-info-dimm-a2: var(--c-blue-a4);
244
+
245
+ --c-bg-success-1: var(--c-green-9);
246
+ --c-bg-success-2: var(--c-green-10);
247
+ --c-bg-success-3: var(--c-green-11);
248
+ --c-bg-success-dimm-a1: var(--c-green-a3);
249
+ --c-bg-success-dimm-a2: var(--c-green-a4);
250
+
251
+ --c-bg-warning-1: var(--c-yellow-9);
252
+ --c-bg-warning-2: var(--c-yellow-10);
253
+ --c-bg-warning-3: var(--c-yellow-11);
254
+ --c-bg-warning-dimm-a1: var(--c-yellow-a3);
255
+ --c-bg-warning-dimm-a2: var(--c-yellow-a4);
256
+
257
+ --c-bg-danger-1: var(--c-red-9);
258
+ --c-bg-danger-2: var(--c-red-10);
259
+ --c-bg-danger-3: var(--c-red-11);
260
+ --c-bg-danger-dimm-a1: var(--c-red-a3);
261
+ --c-bg-danger-dimm-a2: var(--c-red-a4);
262
+ }
263
+
264
+ .dark {
265
+ --c-bg-elv-1: #000000;
266
+ --c-bg-elv-2: #151517;
267
+ --c-bg-elv-3: #1b1b1f;
268
+ --c-bg-elv-4: #232429;
269
+
270
+ --c-text-1: var(--c-text-dark-1);
271
+ --c-text-2: var(--c-text-dark-2);
272
+ --c-text-3: var(--c-text-dark-3);
273
+
274
+ --c-text-inverse-1: var(--c-text-light-1);
275
+ --c-text-inverse-2: var(--c-text-light-2);
276
+ --c-text-inverse-3: var(--c-text-light-3);
277
+ }
278
+
279
+ /**
280
+ * Color: Border
281
+ * -------------------------------------------------------------------------- */
282
+
283
+ :root {
284
+ --c-border-mute-1: var(--c-gray-6);
285
+ --c-border-mute-2: var(--c-gray-7);
286
+ --c-border-mute-3: var(--c-gray-8);
287
+
288
+ --c-border-info-1: var(--c-blue-10);
289
+ --c-border-info-2: var(--c-blue-11);
290
+ --c-border-info-3: var(--c-blue-12);
291
+
292
+ --c-border-success-1: var(--c-green-10);
293
+ --c-border-success-2: var(--c-green-11);
294
+ --c-border-success-3: var(--c-green-12);
295
+
296
+ --c-border-warning-1: var(--c-yellow-10);
297
+ --c-border-warning-2: var(--c-yellow-11);
298
+ --c-border-warning-3: var(--c-yellow-12);
299
+
300
+ --c-border-danger-1: var(--c-red-10);
301
+ --c-border-danger-2: var(--c-red-11);
302
+ --c-border-danger-3: var(--c-red-12);
303
+ }
304
+
305
+ /**
306
+ * Color: Text
307
+ * -------------------------------------------------------------------------- */
308
+
309
+ :root {
116
310
  --c-text-1: var(--c-text-light-1);
117
311
  --c-text-2: var(--c-text-light-2);
118
312
  --c-text-3: var(--c-text-light-3);
@@ -121,159 +315,24 @@
121
315
  --c-text-inverse-2: var(--c-text-dark-2);
122
316
  --c-text-inverse-3: var(--c-text-dark-3);
123
317
 
124
- --c-mute: #f1f1f1;
125
- --c-mute-light: #f9f9f9;
126
- --c-mute-lighter: #ffffff;
127
- --c-mute-dark: #e3e3e3;
128
- --c-mute-darker: #d1d1d1;
129
- --c-mute-dimm-1: #f1f1f1;
130
- --c-mute-dimm-2: #e3e3e3;
131
-
132
- --c-info: #0969da;
133
- --c-info-light: #218bff;
134
- --c-info-lighter: #54aeff;
135
- --c-info-lghtest: #80ccff;
136
- --c-info-dark: #0550ae;
137
- --c-info-darker: #033d8b;
138
- --c-info-darkest: #0a3069;
139
- --c-info-dimm-1: rgba(2, 132, 199, 0.12);
140
- --c-info-dimm-2: rgba(2, 132, 199, 0.2);
141
- --c-info-dimm-3: rgba(2, 132, 199, 0.28);
142
- --c-info-text: var(--c-info-light);
143
- --c-info-text-light: var(--c-info-lighter);
144
- --c-info-text-lighter: var(--c-info-lightest);
145
- --c-info-text-dark: var(--c-info);
146
- --c-info-text-darker: var(--c-info-dark);
147
- --c-info-border: var(--c-info-light);
148
- --c-info-border-light: var(--c-info-lighter);
149
- --c-info-border-lighter: var(--c-info-lightest);
150
- --c-info-border-dark: var(--c-info);
151
- --c-info-border-darker: var(--c-info-dark);
152
- --c-info-bg: var(--c-info);
153
- --c-info-bg-light: var(--c-info-light);
154
- --c-info-bg-lighter: var(--c-info-lighter);
155
- --c-info-bg-dark: var(--c-info-dark);
156
- --c-info-bg-darker: var(--c-info-darker);
157
-
158
- --c-success: #1a7f58;
159
- --c-success-light: #2da476;
160
- --c-success-lighter: #4ac294;
161
- --c-success-lghtest: #6fddaf;
162
- --c-success-dark: #116345;
163
- --c-success-darker: #044f37;
164
- --c-success-darkest: #003d2b;
165
- --c-success-dimm-1: rgba(5, 150, 105, 0.12);
166
- --c-success-dimm-2: rgba(5, 150, 105, 0.2);
167
- --c-success-dimm-3: rgba(5, 150, 105, 0.28);
168
- --c-success-text: var(--c-success-light);
169
- --c-success-text-light: var(--c-success-lighter);
170
- --c-success-text-lighter: var(--c-success-lightest);
171
- --c-success-text-dark: var(--c-success);
172
- --c-success-text-darker: var(--c-success-dark);
173
- --c-success-border: var(--c-success-light);
174
- --c-success-border-light: var(--c-success-lighter);
175
- --c-success-border-lighter: var(--c-success-lightest);
176
- --c-success-border-dark: var(--c-success);
177
- --c-success-border-darker: var(--c-success-dark);
178
- --c-success-bg: var(--c-success);
179
- --c-success-bg-light: var(--c-success-light);
180
- --c-success-bg-lighter: var(--c-success-lighter);
181
- --c-success-bg-dark: var(--c-success-dark);
182
- --c-success-bg-darker: var(--c-success-darker);
183
-
184
- --c-warning: #bf8700;
185
- --c-warning-light: #d4a72c;
186
- --c-warning-lighter: #eac54f;
187
- --c-warning-lghtest: #fae17d;
188
- --c-warning-dark: #9a6700;
189
- --c-warning-darker: #7d4e00;
190
- --c-warning-darkest: #633c01;
191
- --c-warning-dimm-1: rgba(202, 138, 4, 0.12);
192
- --c-warning-dimm-2: rgba(202, 138, 4, 0.2);
193
- --c-warning-dimm-3: rgba(202, 138, 4, 0.28);
194
- --c-warning-text: var(--c-warning-light);
195
- --c-warning-text-light: var(--c-warning-lighter);
196
- --c-warning-text-lighter: var(--c-warning-lightest);
197
- --c-warning-text-dark: var(--c-warning);
198
- --c-warning-text-darker: var(--c-warning-dark);
199
- --c-warning-border: var(--c-warning-light);
200
- --c-warning-border-light: var(--c-warning-lighter);
201
- --c-warning-border-lighter: var(--c-warning-lightest);
202
- --c-warning-border-dark: var(--c-warning);
203
- --c-warning-border-darker: var(--c-warning-dark);
204
- --c-warning-bg: var(--c-warning);
205
- --c-warning-bg-light: var(--c-warning-light);
206
- --c-warning-bg-lighter: var(--c-warning-lighter);
207
- --c-warning-bg-dark: var(--c-warning-dark);
208
- --c-warning-bg-darker: var(--c-warning-darker);
209
-
210
- --c-danger: #cf222e;
211
- --c-danger-light: #fa4549;
212
- --c-danger-lighter: #ff8182;
213
- --c-danger-lghtest: #ffaba8;
214
- --c-danger-dark: #a40e26;
215
- --c-danger-darker: #82071e;
216
- --c-danger-darkest: #660018;
217
- --c-danger-dimm-1: rgba(225, 29, 72, 0.12);
218
- --c-danger-dimm-2: rgba(225, 29, 72, 0.2);
219
- --c-danger-dimm-3: rgba(225, 29, 72, 0.28);
220
- --c-danger-text: var(--c-danger-light);
221
- --c-danger-text-light: var(--c-danger-lighter);
222
- --c-danger-text-lighter: var(--c-danger-lightest);
223
- --c-danger-text-dark: var(--c-danger);
224
- --c-danger-text-darker: var(--c-danger-dark);
225
- --c-danger-border: var(--c-danger-light);
226
- --c-danger-border-light: var(--c-danger-lighter);
227
- --c-danger-border-lighter: var(--c-danger-lightest);
228
- --c-danger-border-dark: var(--c-danger);
229
- --c-danger-border-darker: var(--c-danger-dark);
230
- --c-danger-bg: var(--c-danger);
231
- --c-danger-bg-light: var(--c-danger-light);
232
- --c-danger-bg-lighter: var(--c-danger-lighter);
233
- --c-danger-bg-dark: var(--c-danger-dark);
234
- --c-danger-bg-darker: var(--c-danger-darker);
235
- }
236
-
237
- .dark {
238
- /* DEPRECATED: Use `--c-bg-elv-x`. */
239
- --c-bg-elv: var(--c-black-elv);
240
- --c-bg-elv-up: var(--c-black-elv-up);
241
- --c-bg-elv-down: var(--c-black-elv-down);
242
- --c-bg: var(--c-black);
243
- --c-bg-soft: var(--c-black-soft);
244
- --c-bg-mute: var(--c-black-mute);
245
- --c-bg-lift-1: #222226;
246
- --c-bg-lift-2: #2c2c2e;
247
-
248
- /* DEPRECATED: Use `--c-divider-1` and `--c-divider-2` instead. */
249
- --c-divider: var(--c-divider-dark-1);
250
- --c-divider-light: var(--c-divider-dark-2);
251
-
252
- /* DEPRECATED: Use `--c-bg-soft`. */
253
- --c-soft: #222226;
254
-
255
- --c-bg-elv-1: #000000;
256
- --c-bg-elv-2: #171717;
257
- --c-bg-elv-3: #1c1c1e;
258
- --c-bg-soft: #222226;
259
-
260
- --c-divider-1: var(--c-divider-dark-1);
261
- --c-divider-2: var(--c-divider-dark-2);
318
+ --c-text-info-1: var(--c-blue-10);
319
+ --c-text-info-2: var(--c-blue-9);
320
+ --c-text-info-3: var(--c-blue-8);
262
321
 
263
- --c-gutter: #000000;
322
+ --c-text-success-1: var(--c-green-10);
323
+ --c-text-success-2: var(--c-green-9);
324
+ --c-text-success-3: var(--c-green-8);
264
325
 
265
- --c-neutral-1: var(--c-neutral-dark-1);
266
- --c-neutral-2: var(--c-neutral-dark-2);
267
- --c-neutral-3: var(--c-neutral-dark-3);
268
- --c-neutral-dimm-1: var(--c-neutral-dark-dimm-1);
269
- --c-neutral-dimm-2: var(--c-neutral-dark-dimm-2);
326
+ --c-text-warning-1: var(--c-yellow-10);
327
+ --c-text-warning-2: var(--c-yellow-9);
328
+ --c-text-warning-3: var(--c-yellow-8);
270
329
 
271
- --c-neutral-inverse-1: var(--c-neutral-light-1);
272
- --c-neutral-inverse-2: var(--c-neutral-light-2);
273
- --c-neutral-inverse-3: var(--c-neutral-light-3);
274
- --c-neutral-inverse-dimm-1: var(--c-neutral-light-dimm-1);
275
- --c-neutral-inverse-dimm-2: var(--c-neutral-light-dimm-2);
330
+ --c-text-danger-1: var(--c-red-10);
331
+ --c-text-danger-2: var(--c-red-9);
332
+ --c-text-danger-3: var(--c-red-8);
333
+ }
276
334
 
335
+ .dark {
277
336
  --c-text-1: var(--c-text-dark-1);
278
337
  --c-text-2: var(--c-text-dark-2);
279
338
  --c-text-3: var(--c-text-dark-3);
@@ -281,118 +340,6 @@
281
340
  --c-text-inverse-1: var(--c-text-light-1);
282
341
  --c-text-inverse-2: var(--c-text-light-2);
283
342
  --c-text-inverse-3: var(--c-text-light-3);
284
-
285
- --c-mute: #2c2c2e;
286
- --c-mute-light: #3a3a3c;
287
- --c-mute-lighter: #505053;
288
- --c-mute-dark: #222226;
289
- --c-mute-darker: #1c1c1e;
290
- --c-mute-dimm-1: #222226;
291
- --c-mute-dimm-2: #2c2c2e;
292
-
293
- --c-info: #1f6feb;
294
- --c-info-light: #388bfd;
295
- --c-info-lighter: #58a6ff;
296
- --c-info-lghtest: #79c0ff;
297
- --c-info-dark: #1158c7;
298
- --c-info-darker: #0d419d;
299
- --c-info-darkest: #0c2d6b;
300
- --c-info-dimm-1: rgba(2, 132, 199, 0.12);
301
- --c-info-dimm-2: rgba(2, 132, 199, 0.2);
302
- --c-info-dimm-3: rgba(2, 132, 199, 0.28);
303
- --c-info-text: var(--c-info-light);
304
- --c-info-text-light: var(--c-info-lighter);
305
- --c-info-text-lighter: var(--c-info-lightest);
306
- --c-info-text-dark: var(--c-info);
307
- --c-info-text-darker: var(--c-info-dark);
308
- --c-info-border: var(--c-info-light);
309
- --c-info-border-light: var(--c-info-lighter);
310
- --c-info-border-lighter: var(--c-info-lightest);
311
- --c-info-border-dark: var(--c-info);
312
- --c-info-border-darker: var(--c-info-dark);
313
- --c-info-bg: var(--c-info);
314
- --c-info-bg-light: var(--c-info-light);
315
- --c-info-bg-lighter: var(--c-info-lighter);
316
- --c-info-bg-dark: var(--c-info-dark);
317
- --c-info-bg-darker: var(--c-info-darker);
318
-
319
- --c-success: #238554;
320
- --c-success-light: #2ea069;
321
- --c-success-lighter: #3fb978;
322
- --c-success-lghtest: #56d38e;
323
- --c-success-dark: #196c49;
324
- --c-success-darker: #0f533a;
325
- --c-success-darkest: #033a29;
326
- --c-success-dimm-1: rgba(5, 150, 105, 0.12);
327
- --c-success-dimm-2: rgba(5, 150, 105, 0.2);
328
- --c-success-dimm-3: rgba(5, 150, 105, 0.28);
329
- --c-success-text: var(--c-success-light);
330
- --c-success-text-light: var(--c-success-lighter);
331
- --c-success-text-lighter: var(--c-success-lightest);
332
- --c-success-text-dark: var(--c-success);
333
- --c-success-text-darker: var(--c-success-dark);
334
- --c-success-border: var(--c-success-light);
335
- --c-success-border-light: var(--c-success-lighter);
336
- --c-success-border-lighter: var(--c-success-lightest);
337
- --c-success-border-dark: var(--c-success);
338
- --c-success-border-darker: var(--c-success-dark);
339
- --c-success-bg: var(--c-success);
340
- --c-success-bg-light: var(--c-success-light);
341
- --c-success-bg-lighter: var(--c-success-lighter);
342
- --c-success-bg-dark: var(--c-success-dark);
343
- --c-success-bg-darker: var(--c-success-darker);
344
-
345
- --c-warning: #bb8009;
346
- --c-warning-light: #d29922;
347
- --c-warning-lighter: #e3b341;
348
- --c-warning-lghtest: #f2cc60;
349
- --c-warning-dark: #9e6a03;
350
- --c-warning-darker: #845306;
351
- --c-warning-darkest: #693e00;
352
- --c-warning-dimm-1: rgba(202, 138, 4, 0.12);
353
- --c-warning-dimm-2: rgba(202, 138, 4, 0.2);
354
- --c-warning-dimm-3: rgba(202, 138, 4, 0.28);
355
- --c-warning-text: var(--c-warning-light);
356
- --c-warning-text-light: var(--c-warning-lighter);
357
- --c-warning-text-lighter: var(--c-warning-lightest);
358
- --c-warning-text-dark: var(--c-warning);
359
- --c-warning-text-darker: var(--c-warning-dark);
360
- --c-warning-border: var(--c-warning-light);
361
- --c-warning-border-light: var(--c-warning-lighter);
362
- --c-warning-border-lighter: var(--c-warning-lightest);
363
- --c-warning-border-dark: var(--c-warning);
364
- --c-warning-border-darker: var(--c-warning-dark);
365
- --c-warning-bg: var(--c-warning);
366
- --c-warning-bg-light: var(--c-warning-light);
367
- --c-warning-bg-lighter: var(--c-warning-lighter);
368
- --c-warning-bg-dark: var(--c-warning-dark);
369
- --c-warning-bg-darker: var(--c-warning-darker);
370
-
371
- --c-danger: #da3633;
372
- --c-danger-light: #f85149;
373
- --c-danger-lighter: #ff7b72;
374
- --c-danger-lghtest: #ffaba8;
375
- --c-danger-dark: #b62324;
376
- --c-danger-darker: #8e1519;
377
- --c-danger-darkest: #67060c;
378
- --c-danger-dimm-1: rgba(225, 29, 72, 0.12);
379
- --c-danger-dimm-2: rgba(225, 29, 72, 0.2);
380
- --c-danger-dimm-3: rgba(225, 29, 72, 0.28);
381
- --c-danger-text: var(--c-danger-light);
382
- --c-danger-text-light: var(--c-danger-lighter);
383
- --c-danger-text-lighter: var(--c-danger-lightest);
384
- --c-danger-text-dark: var(--c-danger);
385
- --c-danger-text-darker: var(--c-danger-dark);
386
- --c-danger-border: var(--c-danger-light);
387
- --c-danger-border-light: var(--c-danger-lighter);
388
- --c-danger-border-lighter: var(--c-danger-lightest);
389
- --c-danger-border-dark: var(--c-danger);
390
- --c-danger-border-darker: var(--c-danger-dark);
391
- --c-danger-bg: var(--c-danger);
392
- --c-danger-bg-light: var(--c-danger-light);
393
- --c-danger-bg-lighter: var(--c-danger-lighter);
394
- --c-danger-bg-dark: var(--c-danger-dark);
395
- --c-danger-bg-darker: var(--c-danger-darker);
396
343
  }
397
344
 
398
345
  /**
@@ -462,17 +409,53 @@
462
409
 
463
410
  :root {
464
411
  --button-mini-font-size: 12px;
465
- --button-small-font-size: 14px;
412
+ --button-small-font-size: 13px;
466
413
  --button-medium-font-size: 14px;
467
414
  --button-large-font-size: 14px;
468
415
  --button-jumbo-font-size: 16px;
469
416
 
417
+ --button-fill-default-border-color: var(--c-border-mute-1);
418
+ --button-fill-default-text-color: var(--c-text-1);
419
+ --button-fill-default-content-color: var(--c-text-1);
420
+ --button-fill-default-bg-color: var(--c-bg-mute-1);
421
+ --button-fill-default-loader-color: var(--c-neutral-1);
422
+ --button-fill-default-hover-border-color: var(--c-border-mute-2);
423
+ --button-fill-default-hover-text-color: var(--c-text-1);
424
+ --button-fill-default-hover-bg-color: var(--c-bg-mute-2);
425
+ --button-fill-default-active-border-color: var(--c-border-mute-3);
426
+ --button-fill-default-active-text-color: var(--c-text-1);
427
+ --button-fill-default-active-bg-color: var(--c-bg-mute-3);
428
+ --button-fill-default-disabled-border-color: var(--c-border-mute-1);
429
+ --button-fill-default-disabled-text-color: var(--c-text-3);
430
+ --button-fill-default-disabled-content-color: var(--c-text-3);
431
+ --button-fill-default-disabled-bg-color: var(--c-bg-mute-1);
432
+
433
+ --button-fill-mute-border-color: var(--c-border-mute-1);
434
+ --button-fill-mute-text-color: var(--c-text-2);
435
+ --button-fill-mute-content-color: var(--c-text-2);
436
+ --button-fill-mute-bg-color: var(--c-bg-mute-1);
437
+ --button-fill-mute-loader-color: var(--c-neutral);
438
+ --button-fill-mute-hover-border-color: var(--c-border-mute-2);
439
+ --button-fill-mute-hover-text-color: var(--c-text-2);
440
+ --button-fill-mute-hover-bg-color: var(--c-bg-mute-2);
441
+ --button-fill-mute-active-border-color: var(--c-border-mute-3);
442
+ --button-fill-mute-active-text-color: var(--c-text-2);
443
+ --button-fill-mute-active-bg-color: var(--c-bg-mute-3);
444
+ --button-fill-mute-disabled-border-color: var(--c-divider-2);
445
+ --button-fill-mute-disabled-text-color: var(--c-text-3);
446
+ --button-fill-mute-disabled-content-color: var(--c-text-3);
447
+ --button-fill-mute-disabled-bg-color: var(--c-bg-mute-1);
448
+
470
449
  --button-fill-neutral-border-color: transparent;
471
450
  --button-fill-neutral-text-color: var(--c-text-inverse-1);
472
451
  --button-fill-neutral-content-color: var(--c-text-1);
473
452
  --button-fill-neutral-bg-color: var(--c-neutral-1);
474
453
  --button-fill-neutral-loader-color: var(--c-neutral-inverse-1);
454
+ --button-fill-neutral-hover-border-color: transparent;
455
+ --button-fill-neutral-hover-text-color: var(--c-text-inverse-1);
475
456
  --button-fill-neutral-hover-bg-color: var(--c-neutral-2);
457
+ --button-fill-neutral-active-border-color: transparent;
458
+ --button-fill-neutral-active-text-color: var(--c-text-inverse-1);
476
459
  --button-fill-neutral-active-bg-color: var(--c-neutral-3);
477
460
  --button-fill-neutral-disabled-border-color: transparent;
478
461
  --button-fill-neutral-disabled-text-color: var(--c-text-inverse-2);
@@ -484,7 +467,11 @@
484
467
  --button-fill-white-content-color: var(--c-text-dark-1);
485
468
  --button-fill-white-bg-color: var(--c-neutral-dark-1);
486
469
  --button-fill-white-loader-color: var(--c-neutral-light-1);
470
+ --button-fill-white-hover-border-color: transparent;
471
+ --button-fill-white-hover-text-color: var(--c-text-light-1);
487
472
  --button-fill-white-hover-bg-color: var(--c-neutral-dark-2);
473
+ --button-fill-white-active-border-color: transparent;
474
+ --button-fill-white-active-text-color: var(--c-text-light-1);
488
475
  --button-fill-white-active-bg-color: var(--c-neutral-dark-3);
489
476
  --button-fill-white-disabled-border-color: transparent;
490
477
  --button-fill-white-disabled-text-color: var(--c-text-light-2);
@@ -496,208 +483,233 @@
496
483
  --button-fill-black-content-color: var(--c-text-light-1);
497
484
  --button-fill-black-bg-color: var(--c-neutral-light-1);
498
485
  --button-fill-black-loader-color: var(--c-neutral-dark-1);
486
+ --button-fill-black-hover-border-color: transparent;
487
+ --button-fill-black-hover-text-color: var(--c-text-dark-1);
499
488
  --button-fill-black-hover-bg-color: var(--c-neutral-light-2);
489
+ --button-fill-black-active-border-color: transparent;
490
+ --button-fill-black-active-text-color:var(--c-text-dark-1);
500
491
  --button-fill-black-active-bg-color: var(--c-neutral-light-3);
501
492
  --button-fill-black-disabled-border-color: transparent;
502
493
  --button-fill-black-disabled-text-color: var(--c-text-dark-2);
503
494
  --button-fill-black-disabled-content-color: var(--c-text-light-2);
504
495
  --button-fill-black-disabled-bg-color: var(--c-neutral-light-2);
505
496
 
506
- --button-fill-mute-border-color: var(--c-divider-1);
507
- --button-fill-mute-text-color: var(--c-text-1);
508
- --button-fill-mute-content-color: var(--c-text-2);
509
- --button-fill-mute-bg-color: var(--c-mute);
510
- --button-fill-mute-loader-color: var(--c-neutral);
511
- --button-fill-mute-hover-bg-color: var(--c-mute-dark);
512
- --button-fill-mute-active-bg-color: var(--c-mute-darker);
513
- --button-fill-mute-disabled-border-color: var(--c-divider-2);
514
- --button-fill-mute-disabled-text-color: var(--c-text-2);
515
- --button-fill-mute-disabled-content-color: var(--c-text-3);
516
- --button-fill-mute-disabled-bg-color: var(--c-mute-dark);
517
-
518
- --button-fill-info-border-color: var(--c-info-light);
519
- --button-fill-info-text-color: var(--c-text-dark-1);
520
- --button-fill-info-content-color: var(--c-info-text);
521
- --button-fill-info-bg-color: var(--c-info-bg);
522
- --button-fill-info-loader-color: var(--c-white);
523
- --button-fill-info-hover-bg-color: var(--c-info-bg-dark);
524
- --button-fill-info-active-bg-color: var(--c-info-bg-darker);
525
- --button-fill-info-disabled-border-color: var(--c-info);
526
- --button-fill-info-disabled-text-color: var(--c-text-dark-2);
527
- --button-fill-info-disabled-content-color: var(--c-info-text-dark);
497
+ --button-fill-info-border-color: var(--c-border-info-1);
498
+ --button-fill-info-text-color: var(--c-white-1);
499
+ --button-fill-info-content-color: var(--c-white-1);
500
+ --button-fill-info-bg-color: var(--c-bg-info-1);
501
+ --button-fill-info-loader-color: var(--c-white-1);
502
+ --button-fill-info-hover-border-color: var(--c-border-info-2);
503
+ --button-fill-info-hover-text-color: var(--c-white-1);
504
+ --button-fill-info-hover-bg-color: var(--c-bg-info-2);
505
+ --button-fill-info-active-border-color: var(--c-border-info-3);
506
+ --button-fill-info-active-text-color: var(--c-white-1);
507
+ --button-fill-info-active-bg-color: var(--c-bg-info-3);
508
+ --button-fill-info-disabled-border-color: var(--c-border-info-1);
509
+ --button-fill-info-disabled-text-color: var(--c-white-a3);
510
+ --button-fill-info-disabled-content-color: var(--c-white-a3);
528
511
  --button-fill-info-disabled-bg-color: var(--c-info-bg-dark);
529
512
 
530
- --button-fill-success-border-color: var(--c-success-light);
531
- --button-fill-success-text-color: var(--c-text-dark-1);
513
+ --button-fill-success-border-color: var(--c-border-success-1);
514
+ --button-fill-success-text-color: var(--c-white-1);
532
515
  --button-fill-success-content-color: var(--c-success-text);
533
- --button-fill-success-bg-color: var(--c-success-bg);
516
+ --button-fill-success-bg-color: var(--c-bg-success-1);
534
517
  --button-fill-success-loader-color: var(--c-white);
535
- --button-fill-success-hover-bg-color: var(--c-success-bg-dark);
536
- --button-fill-success-active-bg-color: var(--c-success-bg-darker);
537
- --button-fill-success-disabled-border-color: var(--c-success);
538
- --button-fill-success-disabled-text-color: var(--c-text-dark-2);
539
- --button-fill-success-disabled-content-color: var(--c-success-text-dark);
518
+ --button-fill-success-hover-border-color: var(--c-border-success-2);
519
+ --button-fill-success-hover-text-color: var(--c-white);
520
+ --button-fill-success-hover-bg-color: var(--c-bg-success-2);
521
+ --button-fill-success-active-border-color: var(--c-border-success-3);
522
+ --button-fill-success-active-text-color: var(--c-white);
523
+ --button-fill-success-active-bg-color: var(--c-bg-success-3);
524
+ --button-fill-success-disabled-border-color: var(--c-border-success-1);
525
+ --button-fill-success-disabled-text-color: var(--c-white-a3);
526
+ --button-fill-success-disabled-content-color: var(--c-white-a3);
540
527
  --button-fill-success-disabled-bg-color: var(--c-success-bg-dark);
541
528
 
542
- --button-fill-warning-border-color: var(--c-warning-light);
543
- --button-fill-warning-text-color: var(--c-text-dark-1);
544
- --button-fill-warning-content-color: var(--c-warning-text);
545
- --button-fill-warning-bg-color: var(--c-warning-bg);
546
- --button-fill-warning-loader-color: var(--c-white);
547
- --button-fill-warning-hover-bg-color: var(--c-warning-bg-dark);
548
- --button-fill-warning-active-bg-color: var(--c-warning-bg-darker);
549
- --button-fill-warning-disabled-border-color: var(--c-warning);
550
- --button-fill-warning-disabled-text-color: var(--c-text-dark-2);
551
- --button-fill-warning-disabled-content-color: var(--c-warning-text-dark);
552
- --button-fill-warning-disabled-bg-color: var(--c-warning-bg-dark);
553
-
554
- --button-fill-danger-border-color: var(--c-danger-light);
555
- --button-fill-danger-text-color: var(--c-text-dark-1);
556
- --button-fill-danger-content-color: var(--c-danger-text);
557
- --button-fill-danger-bg-color: var(--c-danger-bg);
558
- --button-fill-danger-loader-color: var(--c-white);
559
- --button-fill-danger-hover-bg-color: var(--c-danger-bg-dark);
560
- --button-fill-danger-active-bg-color: var(--c-danger-bg-darker);
561
- --button-fill-danger-disabled-border-color: var(--c-danger);
562
- --button-fill-danger-disabled-text-color: var(--c-text-dark-2);
563
- --button-fill-danger-disabled-content-color: var(--c-danger-text-dark);
564
- --button-fill-danger-disabled-bg-color: var(--c-danger-bg-dark);
529
+ --button-fill-warning-border-color: var(--c-border-mute-1);
530
+ --button-fill-warning-text-color: var(--c-text-warning-1);
531
+ --button-fill-warning-content-color: var(--c-text-warning-1);
532
+ --button-fill-warning-bg-color: var(--c-bg-mute-1);
533
+ --button-fill-warning-loader-color: var(--c-neutral);
534
+ --button-fill-warning-hover-border-color: var(--c-border-warning-1);
535
+ --button-fill-warning-hover-text-color: var(--c-white);
536
+ --button-fill-warning-hover-bg-color: var(--c-bg-warning-1);
537
+ --button-fill-warning-active-border-color: var(--c-border-warning-2);
538
+ --button-fill-warning-active-text-color: var(--c-white);
539
+ --button-fill-warning-active-bg-color: var(--c-bg-warning-2);
540
+ --button-fill-warning-disabled-border-color: var(--c-border-mute-1);
541
+ --button-fill-warning-disabled-text-color: var(--c-text-warning-3);
542
+ --button-fill-warning-disabled-content-color: var(--c-text-warning-3);
543
+ --button-fill-warning-disabled-bg-color: var(--c-bg-mute-1);
544
+
545
+ --button-fill-danger-border-color: var(--c-border-mute-1);
546
+ --button-fill-danger-text-color: var(--c-text-danger-1);
547
+ --button-fill-danger-content-color: var(--c-text-danger-1);
548
+ --button-fill-danger-bg-color: var(--c-bg-mute-1);
549
+ --button-fill-danger-loader-color: var(--c-neutral);
550
+ --button-fill-danger-hover-border-color: var(--c-border-danger-1);
551
+ --button-fill-danger-hover-text-color: var(--c-white);
552
+ --button-fill-danger-hover-bg-color: var(--c-bg-danger-1);
553
+ --button-fill-danger-active-border-color: var(--c-border-danger-2);
554
+ --button-fill-danger-active-text-color: var(--c-white);
555
+ --button-fill-danger-active-bg-color: var(--c-bg-danger-2);
556
+ --button-fill-danger-disabled-border-color: var(--c-border-mute-1);
557
+ --button-fill-danger-disabled-text-color: var(--c-text-danger-3);
558
+ --button-fill-danger-disabled-content-color: var(--c-text-danger-3);
559
+ --button-fill-danger-disabled-bg-color: var(--c-bg-mute-1);
560
+
561
+ --button-outline-default-border-color: var(--c-border-mute-1);
562
+ --button-outline-default-text-color: var(--c-text-1);
563
+ --button-outline-default-content-color: var(--c-text-1);
564
+ --button-outline-default-loader-color: var(--c-neutral-1);
565
+ --button-outline-default-hover-bg-color: var(--c-neutral-dimm-a1);
566
+ --button-outline-default-active-bg-color: var(--c-neutral-dimm-a2);
567
+ --button-outline-default-disabled-border-color: var(--c-border-mute-1);
568
+ --button-outline-default-disabled-text-color: var(--c-text-3);
569
+ --button-outline-default-disabled-content-color: var(--c-text-3);
570
+
571
+ --button-outline-mute-border-color: var(--c-border-mute-1);
572
+ --button-outline-mute-text-color: var(--c-text-2);
573
+ --button-outline-mute-content-color: var(--c-text-2);
574
+ --button-outline-mute-loader-color: var(--c-neutral-1);
575
+ --button-outline-mute-hover-bg-color: var(--c-neutral-dimm-a1);
576
+ --button-outline-mute-active-bg-color: var(--c-neutral-dimm-a2);
577
+ --button-outline-mute-disabled-border-color: var(--c-border-mute-1);
578
+ --button-outline-mute-disabled-text-color: var(--c-text-3);
579
+ --button-outline-mute-disabled-content-color: var(--c-text-3);
565
580
 
566
581
  --button-outline-neutral-border-color: var(--c-neutral-1);
567
582
  --button-outline-neutral-text-color: var(--c-text-1);
568
583
  --button-outline-neutral-content-color: var(--c-text-1);
569
584
  --button-outline-neutral-loader-color: var(--c-neutral-1);
570
- --button-outline-neutral-hover-bg-color: var(--c-neutral-dimm-1);
571
- --button-outline-neutral-active-bg-color: var(--c-neutral-dimm-2);
585
+ --button-outline-neutral-hover-bg-color: var(--c-neutral-dimm-a1);
586
+ --button-outline-neutral-active-bg-color: var(--c-neutral-dimm-a2);
572
587
  --button-outline-neutral-disabled-border-color: var(--c-neutral-3);
573
- --button-outline-neutral-disabled-text-color: var(--c-text-2);
574
- --button-outline-neutral-disabled-content-color: var(--c-text-2);
588
+ --button-outline-neutral-disabled-text-color: var(--c-text-3);
589
+ --button-outline-neutral-disabled-content-color: var(--c-text-3);
575
590
 
576
591
  --button-outline-white-border-color: var(--c-neutral-dark-1);
577
592
  --button-outline-white-text-color: var(--c-text-dark-1);
578
593
  --button-outline-white-content-color: var(--c-text-dark-1);
579
594
  --button-outline-white-loader-color: var(--c-neutral-dark-1);
580
- --button-outline-white-hover-bg-color: var(--c-neutral-dark-dimm-1);
581
- --button-outline-white-active-bg-color: var(--c-neutral-dark-dimm-2);
595
+ --button-outline-white-hover-bg-color: var(--c-neutral-dark-dimm-a1);
596
+ --button-outline-white-active-bg-color: var(--c-neutral-dark-dimm-a2);
582
597
  --button-outline-white-disabled-border-color: var(--c-neutral-dark-3);
583
- --button-outline-white-disabled-text-color: var(--c-text-dark-2);
584
- --button-outline-white-disabled-content-color: var(--c-text-dark-2);
598
+ --button-outline-white-disabled-text-color: var(--c-text-dark-3);
599
+ --button-outline-white-disabled-content-color: var(--c-text-dark-3);
585
600
 
586
601
  --button-outline-black-border-color: var(--c-neutral-light-1);
587
602
  --button-outline-black-text-color: var(--c-text-light-1);
588
603
  --button-outline-black-content-color: var(--c-text-light-1);
589
604
  --button-outline-black-loader-color: var(--c-neutral-light-1);
590
- --button-outline-black-hover-bg-color: var(--c-neutral-light-dimm-1);
591
- --button-outline-black-active-bg-color: var(--c-neutral-light-dimm-2);
605
+ --button-outline-black-hover-bg-color: var(--c-neutral-light-dimm-a1);
606
+ --button-outline-black-active-bg-color: var(--c-neutral-light-dimm-a2);
592
607
  --button-outline-black-disabled-border-color: var(--c-neutral-light-3);
593
- --button-outline-black-disabled-text-color: var(--c-text-light-2);
594
- --button-outline-black-disabled-content-color: var(--c-text-light-2);
608
+ --button-outline-black-disabled-text-color: var(--c-text-light-3);
609
+ --button-outline-black-disabled-content-color: var(--c-text-light-3);
595
610
 
596
- --button-outline-mute-border-color: var(--c-divider-1);
597
- --button-outline-mute-text-color: var(--c-text-2);
598
- --button-outline-mute-content-color: var(--c-text-2);
599
- --button-outline-mute-loader-color: var(--c-neutral-1);
600
- --button-outline-mute-hover-bg-color: var(--c-mute-dimm-1);
601
- --button-outline-mute-active-bg-color: var(--c-mute-dimm-2);
602
- --button-outline-mute-disabled-border-color: var(--c-divider-2);
603
- --button-outline-mute-disabled-text-color: var(--c-text-3);
604
- --button-outline-mute-disabled-content-color: var(--c-text-3);
605
-
606
- --button-outline-info-border-color: var(--c-info-light);
607
- --button-outline-info-text-color: var(--c-info-text);
608
- --button-outline-info-content-color: var(--c-info-text);
611
+ --button-outline-info-border-color: var(--c-border-info-1);
612
+ --button-outline-info-text-color: var(--c-text-info-1);
613
+ --button-outline-info-content-color: var(--c-text-info-1);
609
614
  --button-outline-info-loader-color: var(--c-neutral-1);
610
- --button-outline-info-hover-bg-color: var(--c-info-dimm-1);
611
- --button-outline-info-active-bg-color: var(--c-info-dimm-2);
612
- --button-outline-info-disabled-border-color: var(--c-info-dark);
613
- --button-outline-info-disabled-text-color: var(--c-info-text-dark);
614
- --button-outline-info-disabled-content-color: var(--c-info-text-dark);
615
-
616
- --button-outline-success-border-color: var(--c-success-light);
617
- --button-outline-success-text-color: var(--c-success-text);
618
- --button-outline-success-content-color: var(--c-success-text);
615
+ --button-outline-info-hover-bg-color: var(--c-bg-info-dimm-a1);
616
+ --button-outline-info-active-bg-color: var(--c-bg-info-dimm-a2);
617
+ --button-outline-info-disabled-border-color: var(--c-blue-8);
618
+ --button-outline-info-disabled-text-color: var(--c-text-info-3);
619
+ --button-outline-info-disabled-content-color: var(--c-text-info-3);
620
+
621
+ --button-outline-success-border-color: var(--c-border-success-1);
622
+ --button-outline-success-text-color: var(--c-text-success-1);
623
+ --button-outline-success-content-color: var(--c-text-success-1);
619
624
  --button-outline-success-loader-color: var(--c-neutral-1);
620
- --button-outline-success-hover-bg-color: var(--c-success-dimm-1);
621
- --button-outline-success-active-bg-color: var(--c-success-dimm-2);
622
- --button-outline-success-disabled-border-color: var(--c-success-dark);
623
- --button-outline-success-disabled-text-color: var(--c-success-text-dark);
624
- --button-outline-success-disabled-content-color: var(--c-success-text-dark);
625
-
626
- --button-outline-warning-border-color: var(--c-warning-light);
627
- --button-outline-warning-text-color: var(--c-warning-text);
628
- --button-outline-warning-content-color: var(--c-warning-text);
625
+ --button-outline-success-hover-bg-color: var(--c-bg-success-dimm-a1);
626
+ --button-outline-success-active-bg-color: var(--c-bg-success-dimm-a2);
627
+ --button-outline-success-disabled-border-color: var(--c-green-8);
628
+ --button-outline-success-disabled-text-color: var(--c-text-success-3);
629
+ --button-outline-success-disabled-content-color: var(--c-text-success-3);
630
+
631
+ --button-outline-warning-border-color: var(--c-border-warning-1);
632
+ --button-outline-warning-text-color: var(--c-text-warning-1);
633
+ --button-outline-warning-content-color: var(--c-text-warning-1);
629
634
  --button-outline-warning-loader-color: var(--c-neutral-1);
630
- --button-outline-warning-hover-bg-color: var(--c-warning-dimm-1);
631
- --button-outline-warning-active-bg-color: var(--c-warning-dimm-2);
632
- --button-outline-warning-disabled-border-color: var(--c-warning-dark);
633
- --button-outline-warning-disabled-text-color: var(--c-warning-text-dark);
634
- --button-outline-warning-disabled-content-color: var(--c-warning-text-dark);
635
-
636
- --button-outline-danger-border-color: var(--c-danger-light);
637
- --button-outline-danger-text-color: var(--c-danger-text);
638
- --button-outline-danger-content-color: var(--c-danger-text);
635
+ --button-outline-warning-hover-bg-color: var(--c-bg-warning-dimm-a1);
636
+ --button-outline-warning-active-bg-color: var(--c-bg-warning-dimm-a2);
637
+ --button-outline-warning-disabled-border-color: var(--c-yellow-8);
638
+ --button-outline-warning-disabled-text-color: var(--c-text-warning-3);
639
+ --button-outline-warning-disabled-content-color: var(--c-text-warning-3);
640
+
641
+ --button-outline-danger-border-color: var(--c-border-danger-1);
642
+ --button-outline-danger-text-color: var(--c-text-danger-1);
643
+ --button-outline-danger-content-color: var(--c-text-danger-1);
639
644
  --button-outline-danger-loader-color: var(--c-neutral-1);
640
- --button-outline-danger-hover-bg-color: var(--c-danger-dimm-1);
641
- --button-outline-danger-active-bg-color: var(--c-danger-dimm-2);
642
- --button-outline-danger-disabled-border-color: var(--c-danger-dark);
643
- --button-outline-danger-disabled-text-color: var(--c-danger-text-dark);
644
- --button-outline-danger-disabled-content-color: var(--c-danger-text-dark);
645
+ --button-outline-danger-hover-bg-color: var(--c-bg-danger-dimm-a1);
646
+ --button-outline-danger-active-bg-color: var(--c-bg-danger-dimm-a2);
647
+ --button-outline-danger-disabled-border-color: var(--c-red-8);
648
+ --button-outline-danger-disabled-text-color: var(--c-text-danger-3);
649
+ --button-outline-danger-disabled-content-color: var(--c-text-danger-3);
650
+
651
+ --button-text-default-text-color: var(--c-text-1);
652
+ --button-text-default-content-color: var(--c-text-1);
653
+ --button-text-default-hover-bg-color: var(--c-bg-mute-1);
654
+ --button-text-default-active-bg-color: var(--c-bg-mute-2);
655
+ --button-text-default-disabled-text-color: var(--c-text-3);
656
+ --button-text-default-disabled-content-color: var(--c-text-3);
657
+
658
+ --button-text-mute-text-color: var(--c-text-2);
659
+ --button-text-mute-content-color: var(--c-text-2);
660
+ --button-text-mute-hover-bg-color: var(--c-bg-mute-1);
661
+ --button-text-mute-active-bg-color: var(--c-bg-mute-2);
662
+ --button-text-mute-disabled-text-color: var(--c-text-3);
663
+ --button-text-mute-disabled-content-color: var(--c-text-3);
645
664
 
646
665
  --button-text-neutral-text-color: var(--c-text-1);
647
666
  --button-text-neutral-content-color: var(--c-text-1);
648
- --button-text-neutral-hover-bg-color: var(--c-neutral-dimm-1);
649
- --button-text-neutral-active-bg-color: var(--c-neutral-dimm-2);
650
- --button-text-neutral-disabled-text-color: var(--c-text-2);
651
- --button-text-neutral-disabled-content-color: var(--c-text-2);
667
+ --button-text-neutral-hover-bg-color: var(--c-neutral-dimm-a1);
668
+ --button-text-neutral-active-bg-color: var(--c-neutral-dimm-a2);
669
+ --button-text-neutral-disabled-text-color: var(--c-text-3);
670
+ --button-text-neutral-disabled-content-color: var(--c-text-3);
652
671
 
653
672
  --button-text-white-text-color: var(--c-text-dark-1);
654
673
  --button-text-white-content-color: var(--c-text-dark-1);
655
- --button-text-white-hover-bg-color: var(--c-neutral-dark-dimm-1);
656
- --button-text-white-active-bg-color: var(--c-neutral-dark-dimm-2);
657
- --button-text-white-disabled-text-color: var(--c-text-dark-2);
658
- --button-text-white-disabled-content-color: var(--c-text-dark-2);
674
+ --button-text-white-hover-bg-color: var(--c-neutral-dark-dimm-a1);
675
+ --button-text-white-active-bg-color: var(--c-neutral-dark-dimm-a2);
676
+ --button-text-white-disabled-text-color: var(--c-text-dark-3);
677
+ --button-text-white-disabled-content-color: var(--c-text-dark-3);
659
678
 
660
679
  --button-text-black-text-color: var(--c-text-light-1);
661
680
  --button-text-black-content-color: var(--c-text-light-1);
662
- --button-text-black-hover-bg-color: var(--c-neutral-light-dimm-1);
663
- --button-text-black-active-bg-color: var(--c-neutral-light-dimm-2);
664
- --button-text-black-disabled-text-color: var(--c-text-light-2);
665
- --button-text-black-disabled-content-color: var(--c-text-light-2);
666
-
667
- --button-text-mute-text-color: var(--c-text-2);
668
- --button-text-mute-content-color: var(--c-text-2);
669
- --button-text-mute-hover-bg-color: var(--c-mute);
670
- --button-text-mute-active-bg-color: var(--c-mute-light);
671
- --button-text-mute-disabled-text-color: var(--c-text-3);
672
- --button-text-mute-disabled-content-color: var(--c-text-3);
673
-
674
- --button-text-info-text-color: var(--c-info-text);
675
- --button-text-info-content-color: var(--c-info-text);
676
- --button-text-info-hover-bg-color: var(--c-info-dimm-1);
677
- --button-text-info-active-bg-color: var(--c-info-dimm-2);
678
- --button-text-info-disabled-text-color: var(--c-info-text-dark);
679
- --button-text-info-disabled-content-color: var(--c-info-text-dark);
680
-
681
- --button-text-success-text-color: var(--c-success-text);
682
- --button-text-success-content-color: var(--c-success-text);
683
- --button-text-success-hover-bg-color: var(--c-success-dimm-1);
684
- --button-text-success-active-bg-color: var(--c-success-dimm-2);
685
- --button-text-success-disabled-text-color: var(--c-success-text-dark);
686
- --button-text-success-disabled-content-color: var(--c-success-text-dark);
687
-
688
- --button-text-warning-text-color: var(--c-warning-text);
689
- --button-text-warning-content-color: var(--c-warning-text);
690
- --button-text-warning-hover-bg-color: var(--c-warning-dimm-1);
691
- --button-text-warning-active-bg-color: var(--c-warning-dimm-2);
692
- --button-text-warning-disabled-text-color: var(--c-warning-text-dark);
693
- --button-text-warning-disabled-content-color: var(--c-warning-text-dark);
694
-
695
- --button-text-danger-text-color: var(--c-danger-text);
696
- --button-text-danger-content-color: var(--c-danger-text);
697
- --button-text-danger-hover-bg-color: var(--c-danger-dimm-1);
698
- --button-text-danger-active-bg-color: var(--c-danger-dimm-2);
699
- --button-text-danger-disabled-text-color: var(--c-danger-text-dark);
700
- --button-text-danger-disabled-content-color: var(--c-danger-text-dark);
681
+ --button-text-black-hover-bg-color: var(--c-neutral-light-dimm-a1);
682
+ --button-text-black-active-bg-color: var(--c-neutral-light-dimm-a2);
683
+ --button-text-black-disabled-text-color: var(--c-text-light-3);
684
+ --button-text-black-disabled-content-color: var(--c-text-light-3);
685
+
686
+ --button-text-info-text-color: var(--c-text-info-1);
687
+ --button-text-info-content-color: var(--c-text-info-1);
688
+ --button-text-info-hover-bg-color: var(--c-bg-info-dimm-a1);
689
+ --button-text-info-active-bg-color: var(--c-bg-info-dimm-a2);
690
+ --button-text-info-disabled-text-color: var(--c-text-info-3);
691
+ --button-text-info-disabled-content-color: var(--c-text-info-3);
692
+
693
+ --button-text-success-text-color: var(--c-text-success-1);
694
+ --button-text-success-content-color: var(--c-text-success-1);
695
+ --button-text-success-hover-bg-color: var(--c-bg-success-dimm-a1);
696
+ --button-text-success-active-bg-color: var(--c-bg-success-dimm-a2);
697
+ --button-text-success-disabled-text-color: var(--c-text-success-3);
698
+ --button-text-success-disabled-content-color: var(--c-text-success-3);
699
+
700
+ --button-text-warning-text-color: var(--c-text-warning-1);
701
+ --button-text-warning-content-color: var(--c-text-warning-1);
702
+ --button-text-warning-hover-bg-color: var(--c-bg-warning-dimm-a1);
703
+ --button-text-warning-active-bg-color: var(--c-bg-warning-dimm-a2);
704
+ --button-text-warning-disabled-text-color: var(--c-text-warning-3);
705
+ --button-text-warning-disabled-content-color: var(--c-text-warning-3);
706
+
707
+ --button-text-danger-text-color: var(--c-text-danger-1);
708
+ --button-text-danger-content-color: var(--c-text-danger-1);
709
+ --button-text-danger-hover-bg-color: var(--c-bg-danger-dimm-a1);
710
+ --button-text-danger-active-bg-color: var(--c-bg-danger-dimm-a2);
711
+ --button-text-danger-disabled-text-color: var(--c-text-danger-3);
712
+ --button-text-danger-disabled-content-color: var(--c-text-danger-3);
701
713
  }
702
714
 
703
715
  /**
@@ -705,41 +717,41 @@
705
717
  * -------------------------------------------------------------------------- */
706
718
 
707
719
  :root {
708
- --pill-dimm-neutral-border-color: var(--c-divider-1);
720
+ --pill-dimm-neutral-border-color: var(--c-border-mute-1);
709
721
  --pill-dimm-neutral-text-color: var(--c-text-1);
710
- --pill-dimm-neutral-bg-color: var(--c-mute);
711
- --pill-dimm-neutral-hover-bg-color: var(--c-mute-dimm-1);
712
- --pill-dimm-neutral-active-bg-color: var(--c-mute-dimm-2);
722
+ --pill-dimm-neutral-bg-color: var(--c-bg-mute-1);
723
+ --pill-dimm-neutral-hover-bg-color: var(--c-bg-mute-2);
724
+ --pill-dimm-neutral-active-bg-color: var(--c-bg-mute-3);
713
725
 
714
- --pill-dimm-mute-border-color: var(--c-divider-1);
726
+ --pill-dimm-mute-border-color: var(--c-border-mute-1);
715
727
  --pill-dimm-mute-text-color: var(--c-text-2);
716
- --pill-dimm-mute-bg-color: var(--c-mute);
717
- --pill-dimm-mute-hover-bg-color: var(--c-mute-dimm-1);
718
- --pill-dimm-mute-active-bg-color: var(--c-mute-dimm-2);
719
-
720
- --pill-dimm-info-border-color: var(--c-info-light);
721
- --pill-dimm-info-text-color: var(--c-info-text);
722
- --pill-dimm-info-bg-color: var(--c-info-dimm-1);
723
- --pill-dimm-info-hover-bg-color: var(--c-info-dimm-2);
724
- --pill-dimm-info-active-bg-color: var(--c-info-dimm-3);
725
-
726
- --pill-dimm-success-border-color: var(--c-success-light);
727
- --pill-dimm-success-text-color: var(--c-success-text);
728
- --pill-dimm-success-bg-color: var(--c-success-dimm-1);
729
- --pill-dimm-success-hover-bg-color: var(--c-success-dimm-2);
730
- --pill-dimm-success-active-bg-color: var(--c-success-dimm-3);
731
-
732
- --pill-dimm-warning-border-color: var(--c-warning-light);
733
- --pill-dimm-warning-text-color: var(--c-warning-text);
734
- --pill-dimm-warning-bg-color: var(--c-warning-dimm-1);
735
- --pill-dimm-warning-hover-bg-color: var(--c-warning-dimm-2);
736
- --pill-dimm-warning-active-bg-color: var(--c-warning-dimm-3);
737
-
738
- --pill-dimm-danger-border-color: var(--c-danger-light);
739
- --pill-dimm-danger-text-color: var(--c-danger-text);
740
- --pill-dimm-danger-bg-color: var(--c-danger-dimm-1);
741
- --pill-dimm-danger-hover-bg-color: var(--c-danger-dimm-2);
742
- --pill-dimm-danger-active-bg-color: var(--c-danger-dimm-3);
728
+ --pill-dimm-mute-bg-color: var(--c-bg-mute-1);
729
+ --pill-dimm-mute-hover-bg-color: var(--c-bg-mute-2);
730
+ --pill-dimm-mute-active-bg-color: var(--c-bg-mute-3);
731
+
732
+ --pill-dimm-info-border-color: var(--c-border-info-1);
733
+ --pill-dimm-info-text-color: var(--c-text-info-1);
734
+ --pill-dimm-info-bg-color: var(--c-bg-info-dimm-a1);
735
+ --pill-dimm-info-hover-bg-color: var(--c-bg-info-dimm-a2);
736
+ --pill-dimm-info-active-bg-color: var(--c-bg-info-dimm-a2);
737
+
738
+ --pill-dimm-success-border-color: var(--c-border-success-1);
739
+ --pill-dimm-success-text-color: var(--c-text-success-1);
740
+ --pill-dimm-success-bg-color: var(--c-bg-success-dimm-a1);
741
+ --pill-dimm-success-hover-bg-color: var(--c-bg-success-dimm-a2);
742
+ --pill-dimm-success-active-bg-color: var(--c-bg-success-dimm-a2);
743
+
744
+ --pill-dimm-warning-border-color: var(--c-border-warning-1);
745
+ --pill-dimm-warning-text-color: var(--c-text-warning-1);
746
+ --pill-dimm-warning-bg-color: var(--c-bg-warning-dimm-a1);
747
+ --pill-dimm-warning-hover-bg-color: var(--c-bg-warning-dimm-a2);
748
+ --pill-dimm-warning-active-bg-color: var(--c-bg-warning-dimm-a2);
749
+
750
+ --pill-dimm-danger-border-color: var(--c-border-danger-1);
751
+ --pill-dimm-danger-text-color: var(--c-text-danger-1);
752
+ --pill-dimm-danger-bg-color: var(--c-bg-danger-dimm-a1);
753
+ --pill-dimm-danger-hover-bg-color: var(--c-bg-danger-dimm-a2);
754
+ --pill-dimm-danger-active-bg-color: var(--c-bg-danger-dimm-a2);
743
755
 
744
756
  --pill-fill-neutral-border-color: transparent;
745
757
  --pill-fill-neutral-text-color: var(--c-text-inverse-1);
@@ -748,34 +760,34 @@
748
760
  --pill-fill-neutral-active-bg-color: var(--c-neutral-3);
749
761
 
750
762
  --pill-fill-mute-border-color: transparent;
751
- --pill-fill-mute-text-color: var(--c-text-1);
752
- --pill-fill-mute-bg-color: var(--c-mute);
753
- --pill-fill-mute-hover-bg-color: var(--c-mute-dimm-1);
754
- --pill-fill-mute-active-bg-color: var(--c-mute-dimm-2);
763
+ --pill-fill-mute-text-color: var(--c-text-2);
764
+ --pill-fill-mute-bg-color: var(--c-bg-mute-1);
765
+ --pill-fill-mute-hover-bg-color: var(--c-bg-mute-2);
766
+ --pill-fill-mute-active-bg-color: var(--c-bg-mute-3);
755
767
 
756
768
  --pill-fill-info-border-color: transparent;
757
- --pill-fill-info-text-color: var(--c-text-dark-1);
758
- --pill-fill-info-bg-color: var(--c-info);
759
- --pill-fill-info-hover-bg-color: var(--c-info-dark);
760
- --pill-fill-info-active-bg-color: var(--c-info-darker);
769
+ --pill-fill-info-text-color: var(--c-white-1);
770
+ --pill-fill-info-bg-color: var(--c-bg-info-1);
771
+ --pill-fill-info-hover-bg-color: var(--c-bg-info-2);
772
+ --pill-fill-info-active-bg-color: var(--c-bg-info-3);
761
773
 
762
774
  --pill-fill-success-border-color: transparent;
763
- --pill-fill-success-text-color: var(--c-text-dark-1);
764
- --pill-fill-success-bg-color: var(--c-success-bg);
765
- --pill-fill-success-hover-bg-color: var(--c-success-bg-dark);
766
- --pill-fill-success-active-bg-color: var(--c-success-bg-darker);
775
+ --pill-fill-success-text-color: var(--c-white-1);
776
+ --pill-fill-success-bg-color: var(--c-bg-success-1);
777
+ --pill-fill-success-hover-bg-color: var(--c-bg-success-2);
778
+ --pill-fill-success-active-bg-color: var(--c-bg-success-3);
767
779
 
768
780
  --pill-fill-warning-border-color: transparent;
769
- --pill-fill-warning-text-color: var(--c-text-dark-1);
770
- --pill-fill-warning-bg-color: var(--c-warning-bg);
771
- --pill-fill-warning-hover-bg-color: var(--c-warning-bg-dark);
772
- --pill-fill-warning-active-bg-color: var(--c-warning-bg-darker);
781
+ --pill-fill-warning-text-color: var(--c-white-1);
782
+ --pill-fill-warning-bg-color: var(--c-bg-warning-1);
783
+ --pill-fill-warning-hover-bg-color: var(--c-bg-warning-2);
784
+ --pill-fill-warning-active-bg-color: var(--c-bg-warning-3);
773
785
 
774
786
  --pill-fill-danger-border-color: transparent;
775
- --pill-fill-danger-text-color: var(--c-text-dark-1);
776
- --pill-fill-danger-bg-color: var(--c-danger-bg);
777
- --pill-fill-danger-hover-bg-color: var(--c-danger-bg-dark);
778
- --pill-fill-danger-active-bg-color: var(--c-danger-bg-darker);
787
+ --pill-fill-danger-text-color: var(--c-white-1);
788
+ --pill-fill-danger-bg-color: var(--c-bg-danger-1);
789
+ --pill-fill-danger-hover-bg-color: var(--c-bg-danger-2);
790
+ --pill-fill-danger-active-bg-color: var(--c-bg-danger-3);
779
791
  }
780
792
 
781
793
  /**
@@ -784,9 +796,9 @@
784
796
 
785
797
  :root {
786
798
  --tooltip-max-width: 288px;
787
- --tooltip-border-color: var(--c-divider-2);
799
+ --tooltip-border-color: var(--c-border-mute-1);
788
800
  --tooltip-text-color: var(--c-text-1);
789
- --tooltip-bg-color: var(--c-bg-soft);
801
+ --tooltip-bg-color: var(--c-bg-elv-4);
790
802
  }
791
803
 
792
804
  /**
@@ -794,11 +806,7 @@
794
806
  * -------------------------------------------------------------------------- */
795
807
 
796
808
  :root {
797
- --dropdown-item-hover-bg: var(--c-white-soft);
798
- }
799
-
800
- .dark {
801
- --dropdown-item-hover-bg: var(--c-black);
809
+ --dropdown-item-hover-bg: var(--c-bg-mute-1);
802
810
  }
803
811
 
804
812
  /**
@@ -819,7 +827,7 @@
819
827
  --table-cell-font-size: 14px;
820
828
  --table-cell-font-weight: 400;
821
829
 
822
- --table-cell-summary-font-weight: 600;
830
+ --table-cell-summary-font-weight: 500;
823
831
  }
824
832
 
825
833
  /**
@@ -828,33 +836,29 @@
828
836
 
829
837
  :root {
830
838
  --input-label-color: var(--c-text-1);
831
- --input-border-color: var(--c-divider-1);
839
+ --input-border-color: var(--c-border-mute-1);
832
840
  --input-value-color: var(--c-text-1);
833
841
  --input-placeholder-color: var(--c-text-3);
834
- --input-bg-color: var(--c-bg-elv-1);
835
- --input-hover-border-color: var(--c-gray);
836
- --input-focus-border-color: var(--c-info-light);
837
- --input-error-text-color: var(--c-danger-text);
838
- --input-error-border-color: var(--c-danger-light);
839
- --input-disabled-border-color: var(--c-divider-1);
842
+ --input-bg-color: var(--c-bg-elv-2);
843
+ --input-hover-border-color: var(--c-border-mute-3);
844
+ --input-focus-border-color: var(--c-border-info-1);
845
+ --input-error-text-color: var(--c-text-danger-1);
846
+ --input-error-border-color: var(--c-border-danger-1);
847
+ --input-disabled-border-color: var(--c-border-mute-1);
840
848
  --input-disabled-value-color: var(--c-text-1);
841
- --input-disabled-bg-color: var(--c-mute);
849
+ --input-disabled-bg-color: var(--c-bg-mute-1);
842
850
 
843
851
  --input-mini-font-size: 14px;
844
- --input-small-font-size: 16px;
845
- --input-medium-font-size: 16px;
846
-
847
852
  --input-mini-label-font-size: 12px;
853
+
854
+ --input-small-font-size: 14px;
848
855
  --input-small-label-font-size: 14px;
856
+
857
+ --input-medium-font-size: 16px;
849
858
  --input-medium-label-font-size: 14px;
850
859
 
851
860
  --input-switch-toggle-color: var(--c-neutral-1);
852
- --input-switch-bg-color: var(--c-mute);
853
- --input-switch-disabled-toggle-color: var(--c-gray);
854
- --input-switch-disabled-bg-color: var(--c-mute);
855
- }
856
-
857
- .dark {
858
- --input-switch-bg-color: var(--c-bg-elv-1);
859
- --input-switch-disabled-bg-color: var(--c-mute);
861
+ --input-switch-bg-color: var(--input-bg-color);
862
+ --input-switch-disabled-toggle-color: var(--c-fg-gray-1);
863
+ --input-switch-disabled-bg-color: var(--c-bg-mute-1);
860
864
  }