@carbon/themes 10.47.0 → 10.49.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 (11) hide show
  1. package/es/index.js +9 -21
  2. package/lib/index.js +106 -308
  3. package/package.json +11 -11
  4. package/scss/compat/generated/_themes.scss +192 -192
  5. package/scss/modules/generated/_themes.scss +292 -292
  6. package/src/next/g10.js +4 -4
  7. package/src/next/g100.js +6 -6
  8. package/src/next/g90.js +6 -6
  9. package/src/next/white.js +4 -4
  10. package/src/tools.js +12 -0
  11. package/umd/index.js +108 -310
package/scss/modules/generated/_themes.scss CHANGED
@@ -13,101 +13,101 @@
13
13
 
14
14
  $white: (
15
15
  background: #ffffff,
16
- background-inverse: #393939,
17
- background-brand: #0f62fe,
18
16
  background-active: #c6c6c6,
17
+ background-brand: #0f62fe,
19
18
  background-hover: #e8e8e8,
19
+ background-inverse: #393939,
20
20
  background-inverse-hover: #474747,
21
21
  background-selected: #e0e0e0,
22
22
  background-selected-hover: #d1d1d1,
23
+ border-disabled: #c6c6c6,
24
+ border-interactive: #0f62fe,
25
+ border-inverse: #161616,
26
+ border-strong-01: #8d8d8d,
27
+ border-strong-02: #8d8d8d,
28
+ border-strong-03: #8d8d8d,
29
+ border-subtle-00: #e0e0e0,
30
+ border-subtle-01: #e0e0e0,
31
+ border-subtle-02: #e0e0e0,
32
+ border-subtle-03: #e0e0e0,
33
+ border-subtle-selected-01: #c6c6c6,
34
+ border-subtle-selected-02: #c6c6c6,
35
+ border-subtle-selected-03: #c6c6c6,
36
+ field-01: #f4f4f4,
37
+ field-02: #ffffff,
38
+ field-03: #f4f4f4,
39
+ field-disabled: #f4f4f4,
40
+ field-hover-01: #e8e8e8,
41
+ field-hover-02: #e8e8e8,
42
+ field-hover-03: #e8e8e8,
43
+ focus: #0f62fe,
44
+ focus-inset: #ffffff,
45
+ focus-inverse: #ffffff,
46
+ highlight: #d0e2ff,
47
+ icon-disabled: #c6c6c6,
48
+ icon-inverse: #ffffff,
49
+ icon-on-color: #ffffff,
50
+ icon-on-color-disabled: #8d8d8d,
51
+ icon-primary: #161616,
52
+ icon-secondary: #525252,
53
+ interactive: #0f62fe,
23
54
  layer-01: #f4f4f4,
24
- layer-active-01: #c6c6c6,
25
- layer-hover-01: #e8e8e8,
26
- layer-selected-01: #e0e0e0,
27
- layer-selected-hover-01: #d1d1d1,
28
55
  layer-02: #ffffff,
29
- layer-active-02: #c6c6c6,
30
- layer-hover-02: #e8e8e8,
31
- layer-selected-02: #e0e0e0,
32
- layer-selected-hover-02: #d1d1d1,
33
56
  layer-03: #f4f4f4,
34
- layer-active-03: #c6c6c6,
35
- layer-hover-03: #e8e8e8,
36
- layer-selected-03: #e0e0e0,
37
- layer-selected-hover-03: #d1d1d1,
38
- layer-disabled: #f4f4f4,
39
- layer-selected-inverse: #161616,
40
- layer-selected-disabled: #8d8d8d,
41
57
  layer-accent-01: #e0e0e0,
42
- layer-accent-active-01: #a8a8a8,
43
- layer-accent-hover-01: #d1d1d1,
44
58
  layer-accent-02: #e0e0e0,
45
- layer-accent-active-02: #a8a8a8,
46
- layer-accent-hover-02: #d1d1d1,
47
59
  layer-accent-03: #e0e0e0,
60
+ layer-accent-active-01: #a8a8a8,
61
+ layer-accent-active-02: #a8a8a8,
48
62
  layer-accent-active-03: #a8a8a8,
63
+ layer-accent-hover-01: #d1d1d1,
64
+ layer-accent-hover-02: #d1d1d1,
49
65
  layer-accent-hover-03: #d1d1d1,
50
- field-01: #f4f4f4,
51
- field-hover-01: #e8e8e8,
52
- field-02: #ffffff,
53
- field-hover-02: #e8e8e8,
54
- field-03: #f4f4f4,
55
- field-hover-03: #e8e8e8,
56
- field-disabled: #f4f4f4,
57
- border-subtle-00: #e0e0e0,
58
- border-subtle-01: #e0e0e0,
59
- border-subtle-selected-01: #c6c6c6,
60
- border-subtle-02: #e0e0e0,
61
- border-subtle-selected-02: #c6c6c6,
62
- border-subtle-03: #e0e0e0,
63
- border-subtle-selected-03: #c6c6c6,
64
- border-strong-01: #8d8d8d,
65
- border-strong-02: #8d8d8d,
66
- border-strong-03: #8d8d8d,
67
- border-inverse: #161616,
68
- border-interactive: #0f62fe,
69
- border-disabled: #f4f4f4,
70
- text-primary: #161616,
71
- text-secondary: #525252,
72
- text-placeholder: #a8a8a8,
73
- text-helper: #6f6f6f,
74
- text-error: #da1e28,
75
- text-inverse: #ffffff,
76
- text-on-color: #ffffff,
77
- text-on-color-disabled: #8d8d8d,
78
- text-disabled: #c6c6c6,
66
+ layer-active-01: #c6c6c6,
67
+ layer-active-02: #c6c6c6,
68
+ layer-active-03: #c6c6c6,
69
+ layer-disabled: #f4f4f4,
70
+ layer-hover-01: #e8e8e8,
71
+ layer-hover-02: #e8e8e8,
72
+ layer-hover-03: #e8e8e8,
73
+ layer-selected-01: #e0e0e0,
74
+ layer-selected-02: #e0e0e0,
75
+ layer-selected-03: #e0e0e0,
76
+ layer-selected-disabled: #8d8d8d,
77
+ layer-selected-hover-01: #d1d1d1,
78
+ layer-selected-hover-02: #d1d1d1,
79
+ layer-selected-hover-03: #d1d1d1,
80
+ layer-selected-inverse: #161616,
81
+ link-inverse: #78a9ff,
79
82
  link-primary: #0f62fe,
80
83
  link-primary-hover: #0043ce,
81
84
  link-secondary: #0043ce,
82
- link-inverse: #78a9ff,
83
85
  link-visited: #8a3ffc,
84
- icon-primary: #161616,
85
- icon-secondary: #525252,
86
- icon-inverse: #ffffff,
87
- icon-on-color: #ffffff,
88
- icon-on-color-disabled: #8d8d8d,
89
- icon-disabled: #c6c6c6,
86
+ overlay: rgba(22, 22, 22, 0.5),
87
+ shadow: rgba(0, 0, 0, 0.3),
88
+ skeleton-background: #e8e8e8,
89
+ skeleton-element: #c6c6c6,
90
+ support-caution-major: #ff832b,
91
+ support-caution-minor: #f1c21b,
92
+ support-caution-undefined: #8a3ffc,
90
93
  support-error: #da1e28,
91
- support-success: #24a148,
92
- support-warning: #f1c21b,
93
- support-info: #0043ce,
94
94
  support-error-inverse: #fa4d56,
95
+ support-info: #0043ce,
96
+ support-info-inverse: #4589ff,
97
+ support-success: #24a148,
95
98
  support-success-inverse: #42be65,
99
+ support-warning: #f1c21b,
96
100
  support-warning-inverse: #f1c21b,
97
- support-info-inverse: #4589ff,
98
- support-caution-minor: #f1c21b,
99
- support-caution-major: #ff832b,
100
- support-caution-undefined: #8a3ffc,
101
- focus: #0f62fe,
102
- focus-inset: #ffffff,
103
- focus-inverse: #ffffff,
104
- skeleton-background: #e8e8e8,
105
- skeleton-element: #c6c6c6,
106
- interactive: #0f62fe,
107
- highlight: #d0e2ff,
108
- overlay: rgba(22, 22, 22, 0.5),
101
+ text-disabled: rgba(22, 22, 22, 0.25),
102
+ text-error: #da1e28,
103
+ text-helper: #6f6f6f,
104
+ text-inverse: #ffffff,
105
+ text-on-color: #ffffff,
106
+ text-on-color-disabled: #8d8d8d,
107
+ text-placeholder: rgba(22, 22, 22, 0.4),
108
+ text-primary: #161616,
109
+ text-secondary: #525252,
109
110
  toggle-off: #8d8d8d,
110
- shadow: rgba(0, 0, 0, 0.3),
111
111
  ) !default;
112
112
  $white: utilities.merge(
113
113
  $white,
@@ -118,101 +118,101 @@ $white: utilities.merge(
118
118
 
119
119
  $g10: (
120
120
  background: #f4f4f4,
121
- background-inverse: #393939,
122
- background-brand: #0f62fe,
123
121
  background-active: #c6c6c6,
122
+ background-brand: #0f62fe,
124
123
  background-hover: #e8e8e8,
124
+ background-inverse: #393939,
125
125
  background-inverse-hover: #474747,
126
126
  background-selected: #e0e0e0,
127
127
  background-selected-hover: #d1d1d1,
128
+ border-disabled: #c6c6c6,
129
+ border-interactive: #0f62fe,
130
+ border-inverse: #161616,
131
+ border-strong-01: #8d8d8d,
132
+ border-strong-02: #8d8d8d,
133
+ border-strong-03: #8d8d8d,
134
+ border-subtle-00: #e0e0e0,
135
+ border-subtle-01: #e0e0e0,
136
+ border-subtle-02: #e0e0e0,
137
+ border-subtle-03: #e0e0e0,
138
+ border-subtle-selected-01: #c6c6c6,
139
+ border-subtle-selected-02: #c6c6c6,
140
+ border-subtle-selected-03: #c6c6c6,
141
+ field-01: #ffffff,
142
+ field-02: #f4f4f4,
143
+ field-03: #ffffff,
144
+ field-disabled: #ffffff,
145
+ field-hover-01: #e8e8e8,
146
+ field-hover-02: #e8e8e8,
147
+ field-hover-03: #e8e8e8,
148
+ focus: #0f62fe,
149
+ focus-inset: #ffffff,
150
+ focus-inverse: #ffffff,
151
+ highlight: #d0e2ff,
152
+ icon-disabled: #c6c6c6,
153
+ icon-inverse: #ffffff,
154
+ icon-on-color: #ffffff,
155
+ icon-on-color-disabled: #8d8d8d,
156
+ icon-primary: #161616,
157
+ icon-secondary: #525252,
158
+ interactive: #0f62fe,
128
159
  layer-01: #ffffff,
129
- layer-active-01: #c6c6c6,
130
- layer-hover-01: #e8e8e8,
131
- layer-selected-01: #e0e0e0,
132
- layer-selected-hover-01: #d1d1d1,
133
160
  layer-02: #f4f4f4,
134
- layer-active-02: #c6c6c6,
135
- layer-hover-02: #e8e8e8,
136
- layer-selected-02: #e0e0e0,
137
- layer-selected-hover-02: #d1d1d1,
138
161
  layer-03: #ffffff,
139
- layer-active-03: #c6c6c6,
140
- layer-hover-03: #e8e8e8,
141
- layer-selected-03: #e0e0e0,
142
- layer-selected-hover-03: #d1d1d1,
143
- layer-disabled: #ffffff,
144
- layer-selected-inverse: #161616,
145
- layer-selected-disabled: #8d8d8d,
146
162
  layer-accent-01: #e0e0e0,
147
- layer-accent-active-01: #a8a8a8,
148
- layer-accent-hover-01: #d1d1d1,
149
163
  layer-accent-02: #e0e0e0,
150
- layer-accent-active-02: #a8a8a8,
151
- layer-accent-hover-02: #d1d1d1,
152
164
  layer-accent-03: #e0e0e0,
165
+ layer-accent-active-01: #a8a8a8,
166
+ layer-accent-active-02: #a8a8a8,
153
167
  layer-accent-active-03: #a8a8a8,
168
+ layer-accent-hover-01: #d1d1d1,
169
+ layer-accent-hover-02: #d1d1d1,
154
170
  layer-accent-hover-03: #d1d1d1,
155
- field-01: #ffffff,
156
- field-hover-01: #e8e8e8,
157
- field-02: #f4f4f4,
158
- field-hover-02: #e8e8e8,
159
- field-03: #ffffff,
160
- field-hover-03: #e8e8e8,
161
- field-disabled: #ffffff,
162
- border-subtle-00: #e0e0e0,
163
- border-subtle-01: #e0e0e0,
164
- border-subtle-selected-01: #c6c6c6,
165
- border-subtle-02: #e0e0e0,
166
- border-subtle-selected-02: #c6c6c6,
167
- border-subtle-03: #e0e0e0,
168
- border-subtle-selected-03: #c6c6c6,
169
- border-strong-01: #8d8d8d,
170
- border-strong-02: #8d8d8d,
171
- border-strong-03: #8d8d8d,
172
- border-inverse: #161616,
173
- border-interactive: #0f62fe,
174
- border-disabled: #ffffff,
175
- text-primary: #161616,
176
- text-secondary: #525252,
177
- text-placeholder: #a8a8a8,
178
- text-helper: #6f6f6f,
179
- text-error: #da1e28,
180
- text-inverse: #ffffff,
181
- text-on-color: #ffffff,
182
- text-on-color-disabled: #8d8d8d,
183
- text-disabled: #c6c6c6,
171
+ layer-active-01: #c6c6c6,
172
+ layer-active-02: #c6c6c6,
173
+ layer-active-03: #c6c6c6,
174
+ layer-disabled: #ffffff,
175
+ layer-hover-01: #e8e8e8,
176
+ layer-hover-02: #e8e8e8,
177
+ layer-hover-03: #e8e8e8,
178
+ layer-selected-01: #e0e0e0,
179
+ layer-selected-02: #e0e0e0,
180
+ layer-selected-03: #e0e0e0,
181
+ layer-selected-disabled: #8d8d8d,
182
+ layer-selected-hover-01: #d1d1d1,
183
+ layer-selected-hover-02: #d1d1d1,
184
+ layer-selected-hover-03: #d1d1d1,
185
+ layer-selected-inverse: #161616,
186
+ link-inverse: #78a9ff,
184
187
  link-primary: #0f62fe,
185
188
  link-primary-hover: #0043ce,
186
189
  link-secondary: #0043ce,
187
- link-inverse: #78a9ff,
188
190
  link-visited: #8a3ffc,
189
- icon-primary: #161616,
190
- icon-secondary: #525252,
191
- icon-inverse: #ffffff,
192
- icon-on-color: #ffffff,
193
- icon-on-color-disabled: #8d8d8d,
194
- icon-disabled: #c6c6c6,
191
+ overlay: rgba(22, 22, 22, 0.5),
192
+ shadow: rgba(0, 0, 0, 0.3),
193
+ skeleton-background: #e8e8e8,
194
+ skeleton-element: #c6c6c6,
195
+ support-caution-major: #ff832b,
196
+ support-caution-minor: #f1c21b,
197
+ support-caution-undefined: #8a3ffc,
195
198
  support-error: #da1e28,
196
- support-success: #24a148,
197
- support-warning: #f1c21b,
198
- support-info: #0043ce,
199
199
  support-error-inverse: #fa4d56,
200
+ support-info: #0043ce,
201
+ support-info-inverse: #4589ff,
202
+ support-success: #24a148,
200
203
  support-success-inverse: #42be65,
204
+ support-warning: #f1c21b,
201
205
  support-warning-inverse: #f1c21b,
202
- support-info-inverse: #4589ff,
203
- support-caution-minor: #f1c21b,
204
- support-caution-major: #ff832b,
205
- support-caution-undefined: #8a3ffc,
206
- focus: #0f62fe,
207
- focus-inset: #ffffff,
208
- focus-inverse: #ffffff,
209
- skeleton-background: #e8e8e8,
210
- skeleton-element: #c6c6c6,
211
- interactive: #0f62fe,
212
- highlight: #d0e2ff,
213
- overlay: rgba(22, 22, 22, 0.5),
206
+ text-disabled: rgba(22, 22, 22, 0.25),
207
+ text-error: #da1e28,
208
+ text-helper: #6f6f6f,
209
+ text-inverse: #ffffff,
210
+ text-on-color: #ffffff,
211
+ text-on-color-disabled: #8d8d8d,
212
+ text-placeholder: rgba(22, 22, 22, 0.4),
213
+ text-primary: #161616,
214
+ text-secondary: #525252,
214
215
  toggle-off: #8d8d8d,
215
- shadow: rgba(0, 0, 0, 0.3),
216
216
  ) !default;
217
217
  $g10: utilities.merge(
218
218
  $g10,
@@ -223,101 +223,101 @@ $g10: utilities.merge(
223
223
 
224
224
  $g90: (
225
225
  background: #262626,
226
- background-inverse: #f4f4f4,
227
- background-brand: #0f62fe,
228
226
  background-active: #393939,
227
+ background-brand: #0f62fe,
229
228
  background-hover: #333333,
229
+ background-inverse: #f4f4f4,
230
230
  background-inverse-hover: #e8e8e8,
231
231
  background-selected: #393939,
232
232
  background-selected-hover: #474747,
233
+ border-disabled: rgba(141, 141, 141, 0.5),
234
+ border-interactive: #4589ff,
235
+ border-inverse: #f4f4f4,
236
+ border-strong-01: #8d8d8d,
237
+ border-strong-02: #a8a8a8,
238
+ border-strong-03: #c6c6c6,
239
+ border-subtle-00: #525252,
240
+ border-subtle-01: #525252,
241
+ border-subtle-02: #6f6f6f,
242
+ border-subtle-03: #8d8d8d,
243
+ border-subtle-selected-01: #6f6f6f,
244
+ border-subtle-selected-02: #8d8d8d,
245
+ border-subtle-selected-03: #a8a8a8,
246
+ field-01: #393939,
247
+ field-02: #525252,
248
+ field-03: #6f6f6f,
249
+ field-disabled: #393939,
250
+ field-hover-01: #474747,
251
+ field-hover-02: #636363,
252
+ field-hover-03: #5e5e5e,
253
+ focus: #ffffff,
254
+ focus-inset: #161616,
255
+ focus-inverse: #0f62fe,
256
+ highlight: #0043ce,
257
+ icon-disabled: #6f6f6f,
258
+ icon-inverse: #161616,
259
+ icon-on-color: #ffffff,
260
+ icon-on-color-disabled: rgba(255, 255, 255, 0.25),
261
+ icon-primary: #f4f4f4,
262
+ icon-secondary: #c6c6c6,
263
+ interactive: #4589ff,
233
264
  layer-01: #393939,
234
- layer-active-01: #6f6f6f,
235
- layer-hover-01: #474747,
236
- layer-selected-01: #525252,
237
- layer-selected-hover-01: #636363,
238
265
  layer-02: #525252,
239
- layer-active-02: #8d8d8d,
240
- layer-hover-02: #636363,
241
- layer-selected-02: #6f6f6f,
242
- layer-selected-hover-02: #5e5e5e,
243
266
  layer-03: #6f6f6f,
244
- layer-active-03: #393939,
245
- layer-hover-03: #5e5e5e,
246
- layer-selected-03: #8d8d8d,
247
- layer-selected-hover-03: #7a7a7a,
248
- layer-disabled: #393939,
249
- layer-selected-inverse: #f4f4f4,
250
- layer-selected-disabled: #a8a8a8,
251
267
  layer-accent-01: #525252,
252
- layer-accent-active-01: #8d8d8d,
253
- layer-accent-hover-01: #636363,
254
268
  layer-accent-02: #6f6f6f,
255
- layer-accent-active-02: #393939,
256
- layer-accent-hover-02: #404040,
257
269
  layer-accent-03: #8d8d8d,
270
+ layer-accent-active-01: #8d8d8d,
271
+ layer-accent-active-02: #393939,
258
272
  layer-accent-active-03: #525252,
273
+ layer-accent-hover-01: #636363,
274
+ layer-accent-hover-02: #404040,
259
275
  layer-accent-hover-03: #7a7a7a,
260
- field-01: #393939,
261
- field-hover-01: #474747,
262
- field-02: #525252,
263
- field-hover-02: #636363,
264
- field-03: #6f6f6f,
265
- field-hover-03: #5e5e5e,
266
- field-disabled: #393939,
267
- border-subtle-00: #525252,
268
- border-subtle-01: #525252,
269
- border-subtle-selected-01: #6f6f6f,
270
- border-subtle-02: #6f6f6f,
271
- border-subtle-selected-02: #8d8d8d,
272
- border-subtle-03: #8d8d8d,
273
- border-subtle-selected-03: #a8a8a8,
274
- border-strong-01: #8d8d8d,
275
- border-strong-02: #a8a8a8,
276
- border-strong-03: #c6c6c6,
277
- border-inverse: #f4f4f4,
278
- border-interactive: #4589ff,
279
- border-disabled: #393939,
280
- text-primary: #f4f4f4,
281
- text-secondary: #c6c6c6,
282
- text-placeholder: #8d8d8d,
283
- text-helper: #c6c6c6,
284
- text-error: #ffb3b8,
285
- text-inverse: #161616,
286
- text-on-color: #ffffff,
287
- text-on-color-disabled: #a8a8a8,
288
- text-disabled: #6f6f6f,
276
+ layer-active-01: #6f6f6f,
277
+ layer-active-02: #8d8d8d,
278
+ layer-active-03: #393939,
279
+ layer-disabled: #393939,
280
+ layer-hover-01: #474747,
281
+ layer-hover-02: #636363,
282
+ layer-hover-03: #5e5e5e,
283
+ layer-selected-01: #525252,
284
+ layer-selected-02: #6f6f6f,
285
+ layer-selected-03: #8d8d8d,
286
+ layer-selected-disabled: #a8a8a8,
287
+ layer-selected-hover-01: #636363,
288
+ layer-selected-hover-02: #5e5e5e,
289
+ layer-selected-hover-03: #7a7a7a,
290
+ layer-selected-inverse: #f4f4f4,
291
+ link-inverse: #0f62fe,
289
292
  link-primary: #78a9ff,
290
293
  link-primary-hover: #a6c8ff,
291
294
  link-secondary: #a6c8ff,
292
- link-inverse: #0f62fe,
293
295
  link-visited: #be95ff,
294
- icon-primary: #f4f4f4,
295
- icon-secondary: #c6c6c6,
296
- icon-inverse: #161616,
297
- icon-on-color: #ffffff,
298
- icon-on-color-disabled: #a8a8a8,
299
- icon-disabled: #6f6f6f,
296
+ overlay: rgba(0, 0, 0, 0.65),
297
+ shadow: rgba(0, 0, 0, 0.8),
298
+ skeleton-background: #333333,
299
+ skeleton-element: #525252,
300
+ support-caution-major: #ff832b,
301
+ support-caution-minor: #f1c21b,
302
+ support-caution-undefined: #a56eff,
300
303
  support-error: #ff8389,
301
- support-success: #42be65,
302
- support-warning: #f1c21b,
303
- support-info: #4589ff,
304
304
  support-error-inverse: #da1e28,
305
+ support-info: #4589ff,
306
+ support-info-inverse: #0f62fe,
307
+ support-success: #42be65,
305
308
  support-success-inverse: #24a148,
309
+ support-warning: #f1c21b,
306
310
  support-warning-inverse: #f1c21b,
307
- support-info-inverse: #0f62fe,
308
- support-caution-minor: #f1c21b,
309
- support-caution-major: #ff832b,
310
- support-caution-undefined: #a56eff,
311
- focus: #ffffff,
312
- focus-inset: #161616,
313
- focus-inverse: #0f62fe,
314
- skeleton-background: #333333,
315
- skeleton-element: #525252,
316
- interactive: #4589ff,
317
- highlight: #0043ce,
318
- overlay: rgba(0, 0, 0, 0.65),
311
+ text-disabled: rgba(244, 244, 244, 0.25),
312
+ text-error: #ffb3b8,
313
+ text-helper: #c6c6c6,
314
+ text-inverse: #161616,
315
+ text-on-color: #ffffff,
316
+ text-on-color-disabled: rgba(255, 255, 255, 0.25),
317
+ text-placeholder: rgba(244, 244, 244, 0.4),
318
+ text-primary: #f4f4f4,
319
+ text-secondary: #c6c6c6,
319
320
  toggle-off: #8d8d8d,
320
- shadow: rgba(0, 0, 0, 0.8),
321
321
  ) !default;
322
322
  $g90: utilities.merge(
323
323
  $g90,
@@ -328,101 +328,101 @@ $g90: utilities.merge(
328
328
 
329
329
  $g100: (
330
330
  background: #161616,
331
- background-inverse: #f4f4f4,
332
- background-brand: #0f62fe,
333
331
  background-active: #393939,
332
+ background-brand: #0f62fe,
334
333
  background-hover: #292929,
334
+ background-inverse: #f4f4f4,
335
335
  background-inverse-hover: #e8e8e8,
336
336
  background-selected: #262626,
337
337
  background-selected-hover: #333333,
338
+ border-disabled: rgba(141, 141, 141, 0.5),
339
+ border-interactive: #4589ff,
340
+ border-inverse: #f4f4f4,
341
+ border-strong-01: #6f6f6f,
342
+ border-strong-02: #8d8d8d,
343
+ border-strong-03: #a8a8a8,
344
+ border-subtle-00: #393939,
345
+ border-subtle-01: #393939,
346
+ border-subtle-02: #525252,
347
+ border-subtle-03: #6f6f6f,
348
+ border-subtle-selected-01: #525252,
349
+ border-subtle-selected-02: #6f6f6f,
350
+ border-subtle-selected-03: #8d8d8d,
351
+ field-01: #262626,
352
+ field-02: #393939,
353
+ field-03: #525252,
354
+ field-disabled: #393939,
355
+ field-hover-01: #333333,
356
+ field-hover-02: #474747,
357
+ field-hover-03: #636363,
358
+ focus: #ffffff,
359
+ focus-inset: #161616,
360
+ focus-inverse: #0f62fe,
361
+ highlight: #d0e2ff,
362
+ icon-disabled: #525252,
363
+ icon-inverse: #161616,
364
+ icon-on-color: #ffffff,
365
+ icon-on-color-disabled: rgba(255, 255, 255, 0.25),
366
+ icon-primary: #f4f4f4,
367
+ icon-secondary: #c6c6c6,
368
+ interactive: #4589ff,
338
369
  layer-01: #262626,
339
- layer-active-01: #525252,
340
- layer-hover-01: #333333,
341
- layer-selected-01: #393939,
342
- layer-selected-hover-01: #474747,
343
370
  layer-02: #393939,
344
- layer-active-02: #6f6f6f,
345
- layer-hover-02: #474747,
346
- layer-selected-02: #525252,
347
- layer-selected-hover-02: #636363,
348
371
  layer-03: #525252,
349
- layer-active-03: #8d8d8d,
350
- layer-hover-03: #636363,
351
- layer-selected-03: #6f6f6f,
352
- layer-selected-hover-03: #5e5e5e,
353
- layer-disabled: #262626,
354
- layer-selected-inverse: #f4f4f4,
355
- layer-selected-disabled: #a8a8a8,
356
372
  layer-accent-01: #393939,
357
- layer-accent-active-01: #6f6f6f,
358
- layer-accent-hover-01: #474747,
359
373
  layer-accent-02: #525252,
360
- layer-accent-active-02: #8d8d8d,
361
- layer-accent-hover-02: #636363,
362
374
  layer-accent-03: #6f6f6f,
375
+ layer-accent-active-01: #6f6f6f,
376
+ layer-accent-active-02: #8d8d8d,
363
377
  layer-accent-active-03: #393939,
378
+ layer-accent-hover-01: #474747,
379
+ layer-accent-hover-02: #636363,
364
380
  layer-accent-hover-03: #5e5e5e,
365
- field-01: #262626,
366
- field-hover-01: #333333,
367
- field-02: #393939,
368
- field-hover-02: #474747,
369
- field-03: #525252,
370
- field-hover-03: #636363,
371
- field-disabled: #393939,
372
- border-subtle-00: #393939,
373
- border-subtle-01: #393939,
374
- border-subtle-selected-01: #525252,
375
- border-subtle-02: #525252,
376
- border-subtle-selected-02: #6f6f6f,
377
- border-subtle-03: #6f6f6f,
378
- border-subtle-selected-03: #8d8d8d,
379
- border-strong-01: #6f6f6f,
380
- border-strong-02: #8d8d8d,
381
- border-strong-03: #a8a8a8,
382
- border-inverse: #f4f4f4,
383
- border-interactive: #4589ff,
384
- border-disabled: #262626,
385
- text-primary: #f4f4f4,
386
- text-secondary: #c6c6c6,
387
- text-placeholder: #6f6f6f,
388
- text-helper: #a8a8a8,
389
- text-error: #ffb3b8,
390
- text-inverse: #161616,
391
- text-on-color: #ffffff,
392
- text-on-color-disabled: #a8a8a8,
393
- text-disabled: #525252,
381
+ layer-active-01: #525252,
382
+ layer-active-02: #6f6f6f,
383
+ layer-active-03: #8d8d8d,
384
+ layer-disabled: #262626,
385
+ layer-hover-01: #333333,
386
+ layer-hover-02: #474747,
387
+ layer-hover-03: #636363,
388
+ layer-selected-01: #393939,
389
+ layer-selected-02: #525252,
390
+ layer-selected-03: #6f6f6f,
391
+ layer-selected-disabled: #a8a8a8,
392
+ layer-selected-hover-01: #474747,
393
+ layer-selected-hover-02: #636363,
394
+ layer-selected-hover-03: #5e5e5e,
395
+ layer-selected-inverse: #f4f4f4,
396
+ link-inverse: #0f62fe,
394
397
  link-primary: #78a9ff,
395
398
  link-primary-hover: #a6c8ff,
396
399
  link-secondary: #a6c8ff,
397
- link-inverse: #0f62fe,
398
400
  link-visited: #be95ff,
399
- icon-primary: #f4f4f4,
400
- icon-secondary: #c6c6c6,
401
- icon-inverse: #161616,
402
- icon-on-color: #ffffff,
403
- icon-on-color-disabled: #a8a8a8,
404
- icon-disabled: #525252,
401
+ overlay: rgba(0, 0, 0, 0.65),
402
+ shadow: rgba(0, 0, 0, 0.8),
403
+ skeleton-background: #292929,
404
+ skeleton-element: #393939,
405
+ support-caution-major: #ff832b,
406
+ support-caution-minor: #f1c21b,
407
+ support-caution-undefined: #a56eff,
405
408
  support-error: #fa4d56,
406
- support-success: #42be65,
407
- support-warning: #f1c21b,
408
- support-info: #4589ff,
409
409
  support-error-inverse: #da1e28,
410
+ support-info: #4589ff,
411
+ support-info-inverse: #0f62fe,
412
+ support-success: #42be65,
410
413
  support-success-inverse: #24a148,
414
+ support-warning: #f1c21b,
411
415
  support-warning-inverse: #f1c21b,
412
- support-info-inverse: #0f62fe,
413
- support-caution-minor: #f1c21b,
414
- support-caution-major: #ff832b,
415
- support-caution-undefined: #a56eff,
416
- focus: #ffffff,
417
- focus-inset: #161616,
418
- focus-inverse: #0f62fe,
419
- skeleton-background: #292929,
420
- skeleton-element: #393939,
421
- interactive: #4589ff,
422
- highlight: #d0e2ff,
423
- overlay: rgba(0, 0, 0, 0.65),
416
+ text-disabled: rgba(244, 244, 244, 0.25),
417
+ text-error: #ffb3b8,
418
+ text-helper: #a8a8a8,
419
+ text-inverse: #161616,
420
+ text-on-color: #ffffff,
421
+ text-on-color-disabled: rgba(255, 255, 255, 0.25),
422
+ text-placeholder: rgba(244, 244, 244, 0.4),
423
+ text-primary: #f4f4f4,
424
+ text-secondary: #c6c6c6,
424
425
  toggle-off: #8d8d8d,
425
- shadow: rgba(0, 0, 0, 0.8),
426
426
  ) !default;
427
427
  $g100: utilities.merge(
428
428
  $g100,