@mirohq/design-system-themes 1.3.6 → 1.3.8

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 (12) hide show
  1. package/base.css +24 -1
  2. package/dark.css +28 -5
  3. package/dist/main.js +321 -213
  4. package/dist/main.js.map +1 -1
  5. package/dist/module.js +321 -213
  6. package/dist/module.js.map +1 -1
  7. package/dist/types.d.ts +1 -1
  8. package/light.css +24 -1
  9. package/metadata.json +27 -0
  10. package/new-dark.css +183 -178
  11. package/new-light.css +52 -29
  12. package/package.json +2 -2
package/new-dark.css CHANGED
@@ -11,18 +11,19 @@
11
11
  --colors-alpha-black-200
12
12
  );
13
13
  --colors-background-alpha-subtle: var(--colors-alpha-black-50);
14
- --colors-background-canvas: var(--colors-cloud-1000);
15
- --colors-background-disabled: var(--colors-cloud-850);
16
- --colors-background-elevated: var(--colors-cloud-850);
14
+ --colors-background-canvas: var(--colors-gray-900);
15
+ --colors-background-disabled: var(--colors-ink-650);
16
+ --colors-background-elevated: var(--colors-ink-850);
17
17
  --colors-background-inverted: var(--colors-white);
18
- --colors-background-inverted-secondary: var(--colors-cloud-150);
19
- --colors-background-layout: var(--colors-gray-850);
18
+ --colors-background-inverted-secondary: var(--colors-ink-100);
19
+ --colors-background-layout: var(--colors-ink-850);
20
20
  --colors-background-overlay: var(--colors-alpha-black-400);
21
- --colors-background-static-dark: var(--colors-gray-850);
22
- --colors-background-static-dark-subtle: var(--colors-cloud-750);
21
+ --colors-background-space: var(--colors-ink-900);
22
+ --colors-background-static-dark: var(--colors-ink-850);
23
+ --colors-background-static-dark-subtle: var(--colors-ink-750);
23
24
  --colors-background-static-light: var(--colors-white);
24
- --colors-background-surface: var(--colors-cloud-900);
25
- --colors-background-surface-secondary: var(--colors-cloud-800);
25
+ --colors-background-surface: var(--colors-ink-850);
26
+ --colors-background-surface-secondary: var(--colors-ink-750);
26
27
  --colors-background-transparent: var(--colors-transparent);
27
28
  --colors-background-danger-prominent: var(--colors-red-500);
28
29
  --colors-background-danger-prominent-active: var(--colors-red-400);
@@ -40,33 +41,33 @@
40
41
  --colors-background-interactive-primary-pressed: var(--colors-blue-400);
41
42
  --colors-background-interactive-secondary-selected: var(--colors-blue-700);
42
43
  --colors-background-interactive-selected: var(--colors-blue-500);
43
- --colors-background-interactive-surface-hover: var(--colors-cloud-850);
44
+ --colors-background-interactive-surface-hover: var(--colors-ink-750);
44
45
  --colors-background-interactive-surface-secondary-hover: var(
45
- --colors-cloud-700
46
+ --colors-ink-650
46
47
  );
47
- --colors-background-neutrals: var(--colors-cloud-900);
48
- --colors-background-neutrals-active: var(--colors-cloud-850);
49
- --colors-background-neutrals-container: var(--colors-gray-850);
50
- --colors-background-neutrals-control: var(--colors-gray-700);
51
- --colors-background-neutrals-control-hover: var(--colors-gray-650);
52
- --colors-background-neutrals-control-pressed: var(--colors-gray-600);
53
- --colors-background-neutrals-disabled: var(--colors-cloud-850);
54
- --colors-background-neutrals-hover: var(--colors-cloud-850);
55
- --colors-background-neutrals-inactive: var(--colors-gray-500);
56
- --colors-background-neutrals-inactive-hover: var(--colors-gray-600);
48
+ --colors-background-neutrals: var(--colors-ink-850);
49
+ --colors-background-neutrals-active: var(--colors-ink-800);
50
+ --colors-background-neutrals-container: var(--colors-ink-850);
51
+ --colors-background-neutrals-control: var(--colors-ink-700);
52
+ --colors-background-neutrals-control-hover: var(--colors-ink-650);
53
+ --colors-background-neutrals-control-pressed: var(--colors-ink-600);
54
+ --colors-background-neutrals-disabled: var(--colors-ink-850);
55
+ --colors-background-neutrals-hover: var(--colors-ink-800);
56
+ --colors-background-neutrals-inactive: var(--colors-ink-500);
57
+ --colors-background-neutrals-inactive-hover: var(--colors-ink-600);
57
58
  --colors-background-neutrals-inverted: var(--colors-white);
58
- --colors-background-neutrals-inverted-subtle: var(--colors-cloud-150);
59
- --colors-background-neutrals-layout: var(--colors-gray-850);
60
- --colors-background-neutrals-page: var(--colors-gray-850);
61
- --colors-background-neutrals-page-subtle: var(--colors-cloud-800);
62
- --colors-background-neutrals-pressed: var(--colors-cloud-850);
63
- --colors-background-neutrals-scrollbar: var(--colors-gray-700);
64
- --colors-background-neutrals-scrollbar-active: var(--colors-gray-600);
65
- --colors-background-neutrals-scrollbar-hover: var(--colors-gray-650);
66
- --colors-background-neutrals-subtle: var(--colors-cloud-750);
67
- --colors-background-neutrals-subtle-active: var(--colors-cloud-700);
68
- --colors-background-neutrals-subtle-hover: var(--colors-cloud-700);
69
- --colors-background-neutrals-subtle-pressed: var(--colors-cloud-700);
59
+ --colors-background-neutrals-inverted-subtle: var(--colors-ink-150);
60
+ --colors-background-neutrals-layout: var(--colors-ink-850);
61
+ --colors-background-neutrals-page: var(--colors-ink-850);
62
+ --colors-background-neutrals-page-subtle: var(--colors-ink-800);
63
+ --colors-background-neutrals-pressed: var(--colors-ink-800);
64
+ --colors-background-neutrals-scrollbar: var(--colors-ink-700);
65
+ --colors-background-neutrals-scrollbar-active: var(--colors-ink-600);
66
+ --colors-background-neutrals-scrollbar-hover: var(--colors-ink-650);
67
+ --colors-background-neutrals-subtle: var(--colors-ink-750);
68
+ --colors-background-neutrals-subtle-active: var(--colors-ink-700);
69
+ --colors-background-neutrals-subtle-hover: var(--colors-ink-700);
70
+ --colors-background-neutrals-subtle-pressed: var(--colors-ink-700);
70
71
  --colors-background-neutrals-transparent: var(--colors-transparent);
71
72
  --colors-background-primary-prominent: var(--colors-blue-500);
72
73
  --colors-background-primary-prominent-active: var(--colors-blue-450);
@@ -89,16 +90,17 @@
89
90
  --colors-background-success-subtle: var(--colors-green-900);
90
91
  --colors-background-warning-prominent: var(--colors-yellow-400);
91
92
  --colors-background-warning-subtle: var(--colors-yellow-900);
92
- --colors-border-default: var(--colors-cloud-650);
93
- --colors-border-disabled: var(--colors-cloud-750);
94
- --colors-border-inverted: var(--colors-cloud-100);
95
- --colors-border-inverted-subtle: var(--colors-cloud-500);
96
- --colors-border-option: var(--colors-cloud-450);
93
+ --colors-border-default: var(--colors-ink-650);
94
+ --colors-border-disabled: var(--colors-ink-750);
95
+ --colors-border-inverted: var(--colors-ink-100);
96
+ --colors-border-inverted-subtle: var(--colors-ink-500);
97
+ --colors-border-option: var(--colors-ink-450);
97
98
  --colors-border-option-hover: var(--colors-blue-450);
98
- --colors-border-static-dark: var(--colors-cloud-450);
99
- --colors-border-static-dark-subtle: var(--colors-cloud-750);
100
- --colors-border-strong: var(--colors-cloud-450);
101
- --colors-border-subtle: var(--colors-cloud-550);
99
+ --colors-border-static-dark: var(--colors-ink-450);
100
+ --colors-border-static-dark-subtle: var(--colors-ink-750);
101
+ --colors-border-static-light: var(--colors-white);
102
+ --colors-border-strong: var(--colors-ink-450);
103
+ --colors-border-subtle: var(--colors-ink-750);
102
104
  --colors-border-transparent: var(--colors-transparent);
103
105
  --colors-border-danger: var(--colors-red-400);
104
106
  --colors-border-danger-active: var(--colors-red-300);
@@ -121,27 +123,27 @@
121
123
  --colors-border-interactive-primary: var(--colors-blue-500);
122
124
  --colors-border-interactive-primary-hover: var(--colors-blue-450);
123
125
  --colors-border-interactive-primary-pressed: var(--colors-blue-400);
124
- --colors-border-interactive-secondary: var(--colors-cloud-700);
125
- --colors-border-interactive-secondary-hover: var(--colors-cloud-650);
126
- --colors-border-interactive-secondary-pressed: var(--colors-cloud-600);
126
+ --colors-border-interactive-secondary: var(--colors-ink-700);
127
+ --colors-border-interactive-secondary-hover: var(--colors-ink-650);
128
+ --colors-border-interactive-secondary-pressed: var(--colors-ink-600);
127
129
  --colors-border-interactive-selected: var(--colors-blue-400);
128
- --colors-border-neutrals: var(--colors-cloud-650);
129
- --colors-border-neutrals-active: var(--colors-cloud-350);
130
- --colors-border-neutrals-controls: var(--colors-cloud-450);
131
- --colors-border-neutrals-controls-disabled: var(--colors-cloud-800);
132
- --colors-border-neutrals-disabled: var(--colors-cloud-750);
133
- --colors-border-neutrals-hover: var(--colors-cloud-550);
134
- --colors-border-neutrals-inverted: var(--colors-cloud-950);
135
- --colors-border-neutrals-pressed: var(--colors-cloud-450);
136
- --colors-border-neutrals-subtle: var(--colors-cloud-800);
137
- --colors-border-neutrals-subtle-hover: var(--colors-cloud-700);
138
- --colors-border-neutrals-subtle-pressed: var(--colors-cloud-650);
139
- --colors-border-neutrals-text: var(--colors-cloud-100);
140
- --colors-border-neutrals-text-active: var(--colors-cloud-50);
141
- --colors-border-neutrals-text-hover: var(--colors-cloud-50);
142
- --colors-border-neutrals-text-subtle: var(--colors-cloud-300);
143
- --colors-border-neutrals-text-subtle-active: var(--colors-cloud-100);
144
- --colors-border-neutrals-text-subtle-hover: var(--colors-cloud-200);
130
+ --colors-border-neutrals: var(--colors-ink-650);
131
+ --colors-border-neutrals-active: var(--colors-ink-350);
132
+ --colors-border-neutrals-controls: var(--colors-ink-450);
133
+ --colors-border-neutrals-controls-disabled: var(--colors-ink-800);
134
+ --colors-border-neutrals-disabled: var(--colors-ink-750);
135
+ --colors-border-neutrals-hover: var(--colors-ink-550);
136
+ --colors-border-neutrals-inverted: var(--colors-ink-900);
137
+ --colors-border-neutrals-pressed: var(--colors-ink-450);
138
+ --colors-border-neutrals-subtle: var(--colors-ink-800);
139
+ --colors-border-neutrals-subtle-hover: var(--colors-ink-700);
140
+ --colors-border-neutrals-subtle-pressed: var(--colors-ink-650);
141
+ --colors-border-neutrals-text: var(--colors-ink-100);
142
+ --colors-border-neutrals-text-active: var(--colors-ink-50);
143
+ --colors-border-neutrals-text-hover: var(--colors-ink-50);
144
+ --colors-border-neutrals-text-subtle: var(--colors-ink-300);
145
+ --colors-border-neutrals-text-subtle-active: var(--colors-ink-100);
146
+ --colors-border-neutrals-text-subtle-hover: var(--colors-ink-200);
145
147
  --colors-border-neutrals-transparent: var(--colors-transparent);
146
148
  --colors-border-primary: var(--colors-blue-400);
147
149
  --colors-border-primary-active: var(--colors-blue-300);
@@ -161,21 +163,23 @@
161
163
  --colors-border-success-subtle: var(--colors-green-700);
162
164
  --colors-border-warning: var(--colors-yellow-500);
163
165
  --colors-border-warning-subtle: var(--colors-yellow-700);
166
+ --colors-badge-border: var(--colors-ink-850);
167
+ --colors-badge-border-inverted: #ffffff;
164
168
  --colors-button-background-danger: var(--colors-red-500);
165
169
  --colors-button-background-danger-hover: var(--colors-red-450);
166
170
  --colors-button-background-danger-pressed: var(--colors-red-450);
167
171
  --colors-button-background-ghost: var(--colors-transparent);
168
- --colors-button-background-ghost-hover: var(--colors-cloud-750);
169
- --colors-button-background-ghost-pressed: var(--colors-cloud-700);
172
+ --colors-button-background-ghost-hover: var(--colors-ink-750);
173
+ --colors-button-background-ghost-pressed: var(--colors-ink-700);
170
174
  --colors-button-background-primary: var(--colors-white);
171
- --colors-button-background-primary-hover: var(--colors-cloud-100);
172
- --colors-button-background-primary-pressed: var(--colors-cloud-150);
173
- --colors-button-background-secondary: var(--colors-transparent);
174
- --colors-button-background-secondary-hover: var(--colors-cloud-750);
175
- --colors-button-background-secondary-pressed: var(--colors-cloud-700);
175
+ --colors-button-background-primary-hover: var(--colors-ink-100);
176
+ --colors-button-background-primary-pressed: var(--colors-ink-150);
177
+ --colors-button-background-secondary: var(--colors-ink-700);
178
+ --colors-button-background-secondary-hover: var(--colors-ink-650);
179
+ --colors-button-background-secondary-pressed: var(--colors-ink-600);
176
180
  --colors-button-background-tertiary: var(--colors-transparent);
177
- --colors-button-background-tertiary-hover: var(--colors-cloud-750);
178
- --colors-button-background-tertiary-pressed: var(--colors-cloud-700);
181
+ --colors-button-background-tertiary-hover: var(--colors-ink-750);
182
+ --colors-button-background-tertiary-pressed: var(--colors-ink-700);
179
183
  --colors-button-border-danger: var(--colors-red-500);
180
184
  --colors-button-border-danger-hover: var(--colors-red-450);
181
185
  --colors-button-border-danger-pressed: var(--colors-red-400);
@@ -184,23 +188,24 @@
184
188
  --colors-button-border-primary: var(--colors-blue-500);
185
189
  --colors-button-border-primary-hover: var(--colors-blue-450);
186
190
  --colors-button-border-primary-pressed: var(--colors-blue-400);
187
- --colors-button-border-secondary: var(--colors-cloud-100);
188
- --colors-button-border-secondary-hover: var(--colors-cloud-50);
189
- --colors-button-border-secondary-pressed: var(--colors-cloud-50);
190
- --colors-button-border-tertiary: var(--colors-cloud-700);
191
- --colors-button-border-tertiary-hover: var(--colors-cloud-650);
192
- --colors-button-border-tertiary-pressed: var(--colors-cloud-600);
191
+ --colors-button-border-secondary: var(--colors-transparent);
192
+ --colors-button-border-secondary-hover: var(--colors-transparent);
193
+ --colors-button-border-secondary-pressed: var(--colors-transparent);
194
+ --colors-button-border-tertiary: var(--colors-ink-600);
195
+ --colors-button-border-tertiary-hover: var(--colors-ink-550);
196
+ --colors-button-border-tertiary-pressed: var(--colors-ink-500);
193
197
  --colors-button-icon-on-danger: var(--colors-white);
194
- --colors-button-icon-on-primary: var(--colors-cloud-900);
198
+ --colors-button-icon-on-primary: var(--colors-ink-900);
195
199
  --colors-button-icon-on-secondary: var(--colors-white);
196
200
  --colors-button-icon-on-tertiary: var(--colors-white);
197
201
  --colors-button-text-on-danger: var(--colors-white);
198
- --colors-button-text-on-primary: var(--colors-cloud-900);
202
+ --colors-button-text-on-primary: var(--colors-ink-900);
199
203
  --colors-button-text-on-secondary: var(--colors-white);
200
204
  --colors-button-text-on-tertiary: var(--colors-white);
201
- --colors-chip-background: var(--colors-cloud-750);
202
- --colors-chip-background-hover: var(--colors-cloud-700);
203
- --colors-chip-text: var(--colors-cloud-50);
205
+ --colors-chip-background: var(--colors-ink-750);
206
+ --colors-chip-background-disabled: var(--colors-ink-650);
207
+ --colors-chip-background-hover: var(--colors-ink-700);
208
+ --colors-chip-text: var(--colors-ink-50);
204
209
  --colors-format-icon-diagram: var(--colors-orange-600);
205
210
  --colors-format-icon-docs: var(--colors-cyan-600);
206
211
  --colors-format-icon-external: var(--colors-teal-600);
@@ -209,86 +214,86 @@
209
214
  --colors-format-icon-slides: var(--colors-coral-600);
210
215
  --colors-format-icon-table: var(--colors-moss-600);
211
216
  --colors-format-icon-timeline: var(--colors-moss-600);
212
- --colors-input-background-alt-active: var(--colors-cloud-950);
213
- --colors-input-background-alt-default: var(--colors-cloud-950);
214
- --colors-input-background-alt-hover: var(--colors-cloud-950);
215
- --colors-input-background-default: var(--colors-cloud-850);
216
- --colors-input-background-disabled: var(--colors-cloud-850);
217
- --colors-input-background-focused: var(--colors-cloud-850);
218
- --colors-input-background-hover: var(--colors-cloud-850);
219
- --colors-input-border-default: var(--colors-transparent);
217
+ --colors-input-background-alt-active: var(--colors-ink-650);
218
+ --colors-input-background-alt-default: var(--colors-ink-700);
219
+ --colors-input-background-alt-hover: var(--colors-ink-650);
220
+ --colors-input-background-default: var(--colors-ink-850);
221
+ --colors-input-background-disabled: var(--colors-ink-750);
222
+ --colors-input-background-focused: var(--colors-ink-800);
223
+ --colors-input-background-hover: var(--colors-ink-800);
224
+ --colors-input-border-default: var(--colors-ink-500);
220
225
  --colors-input-border-disabled: var(--colors-transparent);
221
226
  --colors-input-border-error: var(--colors-red-400);
222
- --colors-input-border-focused: var(--colors-transparent);
223
- --colors-input-border-hover: var(--colors-transparent);
227
+ --colors-input-border-focused: var(--colors-blue-450);
228
+ --colors-input-border-hover: var(--colors-ink-450);
224
229
  --colors-input-border-success: var(--colors-green-400);
225
- --colors-notification-background: var(--colors-cloud-150);
226
- --colors-notification-border: var(--colors-cloud-450);
227
- --colors-notification-border-subtle: var(--colors-cloud-300);
230
+ --colors-notification-background: var(--colors-ink-50);
231
+ --colors-notification-border: var(--colors-ink-500);
232
+ --colors-notification-border-subtle: var(--colors-ink-200);
228
233
  --colors-popover-background: var(--colors-cloud-800);
229
234
  --colors-popover-border: var(--colors-cloud-600);
230
- --colors-scrollbar-background: var(--colors-gray-700);
231
- --colors-scrollbar-background-hover: var(--colors-gray-650);
232
- --colors-slider-background: var(--colors-gray-700);
233
- --colors-slider-control-background: var(--colors-cloud-900);
234
- --colors-slider-notch-background: var(--colors-gray-700);
235
- --colors-switch-background-default: var(--colors-gray-700);
236
- --colors-switch-background-hover: var(--colors-gray-650);
237
- --colors-switch-control-background: var(--colors-cloud-900);
238
- --colors-tooltip-background: var(--colors-cloud-650);
239
- --colors-tooltip-background-inset: var(--colors-cloud-850);
235
+ --colors-scrollbar-background: var(--colors-ink-700);
236
+ --colors-scrollbar-background-hover: var(--colors-ink-650);
237
+ --colors-slider-background: var(--colors-ink-700);
238
+ --colors-slider-control-background: var(--colors-ink-900);
239
+ --colors-slider-notch-background: var(--colors-ink-700);
240
+ --colors-switch-background-default: var(--colors-ink-500);
241
+ --colors-switch-background-hover: var(--colors-ink-475);
242
+ --colors-switch-control-background: var(--colors-ink-700);
243
+ --colors-tooltip-background: var(--colors-ink-650);
244
+ --colors-tooltip-background-inset: var(--colors-ink-800);
240
245
  --colors-icon-danger: var(--colors-red-400);
241
246
  --colors-icon-danger-active: var(--colors-red-300);
242
247
  --colors-icon-danger-hover: var(--colors-red-350);
243
248
  --colors-icon-danger-inverted: var(--colors-red-900);
244
249
  --colors-icon-danger-pressed: var(--colors-red-300);
245
- --colors-icon-default: var(--colors-cloud-50);
246
- --colors-icon-disabled: var(--colors-cloud-450);
247
- --colors-icon-inverted: var(--colors-cloud-900);
248
- --colors-icon-inverted-secondary: var(--colors-cloud-700);
249
- --colors-icon-muted: var(--colors-cloud-400);
250
- --colors-icon-on-disabled: var(--colors-cloud-400);
251
- --colors-icon-on-static-dark: var(--colors-gray-50);
252
- --colors-icon-on-static-dark-subtle: var(--colors-gray-300);
253
- --colors-icon-placeholder: var(--colors-cloud-400);
254
- --colors-icon-secondary: var(--colors-cloud-300);
255
- --colors-icon-interactive-on-inverted: var(--colors-cloud-900);
256
- --colors-icon-interactive-on-inverted-hover: var(--colors-cloud-850);
257
- --colors-icon-interactive-on-inverted-pressed: var(--colors-cloud-800);
258
- --colors-icon-interactive-on-inverted-secondary: var(--colors-cloud-700);
259
- --colors-icon-interactive-on-inverted-secondary-hover: var(
260
- --colors-cloud-650
261
- );
250
+ --colors-icon-default: var(--colors-ink-50);
251
+ --colors-icon-disabled: var(--colors-ink-450);
252
+ --colors-icon-inverted: var(--colors-ink-900);
253
+ --colors-icon-inverted-secondary: var(--colors-ink-700);
254
+ --colors-icon-muted: var(--colors-ink-400);
255
+ --colors-icon-on-disabled: var(--colors-ink-450);
256
+ --colors-icon-on-static-dark: var(--colors-ink-50);
257
+ --colors-icon-on-static-dark-subtle: var(--colors-ink-300);
258
+ --colors-icon-on-static-light: var(--colors-ink-900);
259
+ --colors-icon-on-static-light-subtle: var(--colors-ink-700);
260
+ --colors-icon-placeholder: var(--colors-ink-400);
261
+ --colors-icon-secondary: var(--colors-ink-300);
262
+ --colors-icon-interactive-on-inverted: var(--colors-ink-900);
263
+ --colors-icon-interactive-on-inverted-hover: var(--colors-ink-850);
264
+ --colors-icon-interactive-on-inverted-pressed: var(--colors-ink-800);
265
+ --colors-icon-interactive-on-inverted-secondary: var(--colors-ink-700);
266
+ --colors-icon-interactive-on-inverted-secondary-hover: var(--colors-ink-650);
262
267
  --colors-icon-interactive-on-inverted-secondary-pressed: var(
263
- --colors-cloud-600
268
+ --colors-ink-600
264
269
  );
265
270
  --colors-icon-interactive-primary: var(--colors-blue-500);
266
271
  --colors-icon-interactive-primary-hover: var(--colors-blue-450);
267
272
  --colors-icon-interactive-primary-pressed: var(--colors-blue-400);
268
- --colors-icon-interactive-secondary: var(--colors-cloud-300);
269
- --colors-icon-interactive-secondary-hover: var(--colors-cloud-250);
270
- --colors-icon-interactive-secondary-pressed: var(--colors-cloud-200);
273
+ --colors-icon-interactive-secondary: var(--colors-ink-300);
274
+ --colors-icon-interactive-secondary-hover: var(--colors-ink-250);
275
+ --colors-icon-interactive-secondary-pressed: var(--colors-ink-200);
271
276
  --colors-icon-interactive-selected: var(--colors-blue-400);
272
277
  --colors-icon-on-interactive-danger: var(--colors-white);
273
278
  --colors-icon-on-interactive-primary: var(--colors-white);
274
279
  --colors-icon-on-interactive-secondary: var(--colors-white);
275
280
  --colors-icon-on-interactive-selected: var(--colors-blue-400);
276
- --colors-icon-neutrals: var(--colors-gray-50);
277
- --colors-icon-neutrals-disabled: var(--colors-gray-450);
278
- --colors-icon-neutrals-hover: var(--colors-gray-100);
279
- --colors-icon-neutrals-inactive: var(--colors-gray-400);
280
- --colors-icon-neutrals-inactive-hover: var(--colors-gray-300);
281
- --colors-icon-neutrals-inverted: var(--colors-gray-950);
282
- --colors-icon-neutrals-inverted-hover: var(--colors-cloud-900);
283
- --colors-icon-neutrals-inverted-subtle: var(--colors-gray-700);
284
- --colors-icon-neutrals-inverted-subtle-hover: var(--colors-gray-650);
285
- --colors-icon-neutrals-placeholder: var(--colors-gray-650);
286
- --colors-icon-neutrals-pressed: var(--colors-gray-150);
287
- --colors-icon-neutrals-search: var(--colors-gray-400);
288
- --colors-icon-neutrals-subtle: var(--colors-gray-300);
289
- --colors-icon-neutrals-subtle-hover: var(--colors-gray-250);
290
- --colors-icon-neutrals-subtle-pressed: var(--colors-gray-200);
291
- --colors-icon-neutrals-text: var(--colors-gray-300);
281
+ --colors-icon-neutrals: var(--colors-ink-50);
282
+ --colors-icon-neutrals-disabled: var(--colors-ink-450);
283
+ --colors-icon-neutrals-hover: var(--colors-ink-100);
284
+ --colors-icon-neutrals-inactive: var(--colors-ink-400);
285
+ --colors-icon-neutrals-inactive-hover: var(--colors-ink-300);
286
+ --colors-icon-neutrals-inverted: var(--colors-ink-900);
287
+ --colors-icon-neutrals-inverted-hover: var(--colors-ink-850);
288
+ --colors-icon-neutrals-inverted-subtle: var(--colors-ink-800);
289
+ --colors-icon-neutrals-inverted-subtle-hover: var(--colors-ink-650);
290
+ --colors-icon-neutrals-placeholder: var(--colors-ink-650);
291
+ --colors-icon-neutrals-pressed: var(--colors-ink-150);
292
+ --colors-icon-neutrals-search: var(--colors-ink-400);
293
+ --colors-icon-neutrals-subtle: var(--colors-ink-300);
294
+ --colors-icon-neutrals-subtle-hover: var(--colors-ink-250);
295
+ --colors-icon-neutrals-subtle-pressed: var(--colors-ink-200);
296
+ --colors-icon-neutrals-text: var(--colors-ink-300);
292
297
  --colors-icon-primary: var(--colors-blue-400);
293
298
  --colors-icon-primary-active: var(--colors-blue-300);
294
299
  --colors-icon-primary-hover: var(--colors-blue-350);
@@ -316,42 +321,40 @@
316
321
  --colors-text-danger-hover: var(--colors-red-350);
317
322
  --colors-text-danger-inverted: var(--colors-red-900);
318
323
  --colors-text-danger-pressed: var(--colors-red-300);
319
- --colors-text-interactive-on-inverted: var(--colors-cloud-900);
320
- --colors-text-interactive-on-inverted-hover: var(--colors-cloud-850);
321
- --colors-text-interactive-on-inverted-pressed: var(--colors-cloud-800);
322
- --colors-text-interactive-on-inverted-secondary: var(--colors-cloud-700);
323
- --colors-text-interactive-on-inverted-secondary-hover: var(
324
- --colors-cloud-650
325
- );
324
+ --colors-text-interactive-on-inverted: var(--colors-ink-900);
325
+ --colors-text-interactive-on-inverted-hover: var(--colors-ink-850);
326
+ --colors-text-interactive-on-inverted-pressed: var(--colors-ink-800);
327
+ --colors-text-interactive-on-inverted-secondary: var(--colors-ink-750);
328
+ --colors-text-interactive-on-inverted-secondary-hover: var(--colors-ink-650);
326
329
  --colors-text-interactive-on-inverted-secondary-pressed: var(
327
- --colors-cloud-600
330
+ --colors-ink-600
328
331
  );
329
332
  --colors-text-interactive-primary: var(--colors-blue-500);
330
333
  --colors-text-interactive-primary-hover: var(--colors-blue-450);
331
334
  --colors-text-interactive-primary-pressed: var(--colors-blue-400);
332
- --colors-text-interactive-secondary: var(--colors-cloud-300);
333
- --colors-text-interactive-secondary-hover: var(--colors-cloud-250);
334
- --colors-text-interactive-secondary-pressed: var(--colors-cloud-200);
335
+ --colors-text-interactive-secondary: var(--colors-ink-300);
336
+ --colors-text-interactive-secondary-hover: var(--colors-ink-250);
337
+ --colors-text-interactive-secondary-pressed: var(--colors-ink-200);
335
338
  --colors-text-interactive-selected: var(--colors-blue-400);
336
339
  --colors-text-on-interactive-danger: var(--colors-white);
337
340
  --colors-text-on-interactive-primary: var(--colors-white);
338
341
  --colors-text-on-interactive-secondary: var(--colors-white);
339
342
  --colors-text-on-interactive-selected: var(--colors-blue-400);
340
- --colors-text-neutrals: var(--colors-cloud-100);
341
- --colors-text-neutrals-active: var(--colors-cloud-50);
342
- --colors-text-neutrals-disabled: var(--colors-cloud-400);
343
- --colors-text-neutrals-hover: var(--colors-cloud-50);
344
- --colors-text-neutrals-inverted: var(--colors-cloud-900);
345
- --colors-text-neutrals-inverted-hover: var(--colors-cloud-850);
346
- --colors-text-neutrals-inverted-subtle: var(--colors-cloud-700);
347
- --colors-text-neutrals-inverted-subtle-hover: var(--colors-cloud-650);
348
- --colors-text-neutrals-placeholder: var(--colors-cloud-500);
349
- --colors-text-neutrals-placeholder-only: var(--colors-cloud-500);
350
- --colors-text-neutrals-pressed: var(--colors-cloud-50);
351
- --colors-text-neutrals-subtle: var(--colors-cloud-300);
352
- --colors-text-neutrals-subtle-active: var(--colors-cloud-250);
353
- --colors-text-neutrals-subtle-hover: var(--colors-cloud-250);
354
- --colors-text-neutrals-subtle-pressed: var(--colors-cloud-250);
343
+ --colors-text-neutrals: var(--colors-ink-100);
344
+ --colors-text-neutrals-active: var(--colors-ink-50);
345
+ --colors-text-neutrals-disabled: var(--colors-ink-400);
346
+ --colors-text-neutrals-hover: var(--colors-ink-50);
347
+ --colors-text-neutrals-inverted: var(--colors-ink-900);
348
+ --colors-text-neutrals-inverted-hover: var(--colors-ink-850);
349
+ --colors-text-neutrals-inverted-subtle: var(--colors-ink-700);
350
+ --colors-text-neutrals-inverted-subtle-hover: var(--colors-ink-650);
351
+ --colors-text-neutrals-placeholder: var(--colors-ink-500);
352
+ --colors-text-neutrals-placeholder-only: var(--colors-ink-500);
353
+ --colors-text-neutrals-pressed: var(--colors-ink-50);
354
+ --colors-text-neutrals-subtle: var(--colors-ink-300);
355
+ --colors-text-neutrals-subtle-active: var(--colors-ink-250);
356
+ --colors-text-neutrals-subtle-hover: var(--colors-ink-250);
357
+ --colors-text-neutrals-subtle-pressed: var(--colors-ink-250);
355
358
  --colors-text-primary: var(--colors-blue-400);
356
359
  --colors-text-primary-active: var(--colors-blue-300);
357
360
  --colors-text-primary-hover: var(--colors-blue-350);
@@ -371,16 +374,18 @@
371
374
  --colors-text-success-hover: var(--colors-green-350);
372
375
  --colors-text-success-inverted: var(--colors-green-900);
373
376
  --colors-text-success-pressed: var(--colors-green-300);
374
- --colors-text-default: var(--colors-cloud-50);
375
- --colors-text-disabled: var(--colors-cloud-450);
376
- --colors-text-inverted: var(--colors-cloud-900);
377
- --colors-text-inverted-secondary: var(--colors-cloud-700);
378
- --colors-text-muted: var(--colors-cloud-400);
379
- --colors-text-on-disabled: var(--colors-cloud-400);
380
- --colors-text-on-static-dark: var(--colors-cloud-50);
381
- --colors-text-on-static-dark-subtle: var(--colors-cloud-300);
382
- --colors-text-placeholder: var(--colors-cloud-400);
383
- --colors-text-secondary: var(--colors-cloud-300);
377
+ --colors-text-default: var(--colors-ink-50);
378
+ --colors-text-disabled: var(--colors-ink-450);
379
+ --colors-text-inverted: var(--colors-ink-900);
380
+ --colors-text-inverted-secondary: var(--colors-ink-700);
381
+ --colors-text-muted: var(--colors-ink-400);
382
+ --colors-text-on-disabled: var(--colors-ink-450);
383
+ --colors-text-on-static-dark: var(--colors-ink-50);
384
+ --colors-text-on-static-dark-subtle: var(--colors-ink-300);
385
+ --colors-text-on-static-light: var(--colors-ink-900);
386
+ --colors-text-on-static-light-subtle: var(--colors-ink-700);
387
+ --colors-text-placeholder: var(--colors-ink-450);
388
+ --colors-text-secondary: var(--colors-ink-300);
384
389
  --colors-text-warning: var(--colors-yellow-200);
385
390
  --colors-text-warning-subtle: var(--colors-yellow-300);
386
391
  --colors-coal-background: var(--colors-coal-500);