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