@nova-design-system/nova-base 3.0.0-beta.34 → 3.0.0-beta.36

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 (37) hide show
  1. package/dist/{lib/cjs → cjs}/generated/nova-tailwind-tokens.js +69 -0
  2. package/dist/css/mccs.css +136 -42
  3. package/dist/css/nova-utils.css +100 -0
  4. package/dist/css/ocean.css +150 -56
  5. package/dist/css/spark.css +148 -54
  6. package/dist/{lib/generated → generated}/nova-tailwind-tokens.d.ts +69 -0
  7. package/dist/{lib/generated → generated}/nova-tailwind-tokens.js +69 -0
  8. package/dist/js/mccs_dark.d.ts +63 -22
  9. package/dist/js/mccs_dark.js +63 -22
  10. package/dist/js/mccs_light.d.ts +63 -22
  11. package/dist/js/mccs_light.js +64 -23
  12. package/dist/js/ocean_dark.d.ts +69 -28
  13. package/dist/js/ocean_dark.js +69 -28
  14. package/dist/js/ocean_light.d.ts +69 -28
  15. package/dist/js/ocean_light.js +69 -28
  16. package/dist/js/spacings.d.ts +12 -0
  17. package/dist/js/spacings.js +12 -0
  18. package/dist/js/spark_dark.d.ts +67 -26
  19. package/dist/js/spark_dark.js +69 -28
  20. package/dist/js/spark_light.d.ts +67 -26
  21. package/dist/js/spark_light.js +69 -28
  22. package/package.json +6 -6
  23. /package/dist/{lib/cjs → cjs}/generated/nova-tailwind-components.js +0 -0
  24. /package/dist/{lib/cjs/lib → cjs/plugin}/index.js +0 -0
  25. /package/dist/{lib/cjs/lib → cjs/plugin}/nova-plugin.js +0 -0
  26. /package/dist/{lib/cjs/lib → cjs/plugin}/nova-safelist.js +0 -0
  27. /package/dist/{lib/cjs/lib → cjs/plugin}/nova-theme.js +0 -0
  28. /package/dist/{lib/generated → generated}/nova-tailwind-components.d.ts +0 -0
  29. /package/dist/{lib/generated → generated}/nova-tailwind-components.js +0 -0
  30. /package/dist/{lib/lib → plugin}/index.d.ts +0 -0
  31. /package/dist/{lib/lib → plugin}/index.js +0 -0
  32. /package/dist/{lib/lib → plugin}/nova-plugin.d.ts +0 -0
  33. /package/dist/{lib/lib → plugin}/nova-plugin.js +0 -0
  34. /package/dist/{lib/lib → plugin}/nova-safelist.d.ts +0 -0
  35. /package/dist/{lib/lib → plugin}/nova-safelist.js +0 -0
  36. /package/dist/{lib/lib → plugin}/nova-theme.d.ts +0 -0
  37. /package/dist/{lib/lib → plugin}/nova-theme.js +0 -0
package/dist/{lib/cjs → cjs}/generated/nova-tailwind-tokens.js RENAMED
@@ -184,54 +184,81 @@ exports.NOVA_TAILWIND_TOKENS = {
184
184
  '.bg-interaction-container-branded-high': {
185
185
  'background-color': 'var(--color-interaction-container-branded-high-background)'
186
186
  },
187
+ '.bg-interaction-container-branded-high-active': {
188
+ 'background-color': 'var(--color-interaction-container-branded-high-background-active)'
189
+ },
187
190
  '.bg-interaction-container-branded-high-hover': {
188
191
  'background-color': 'var(--color-interaction-container-branded-high-background-hover)'
189
192
  },
190
193
  '.border-interaction-container-branded-high': {
191
194
  'border-color': 'var(--color-interaction-container-branded-high-border)'
192
195
  },
196
+ '.border-interaction-container-branded-high-active': {
197
+ 'border-color': 'var(--color-interaction-container-branded-high-border-active)'
198
+ },
193
199
  '.border-interaction-container-branded-high-hover': {
194
200
  'border-color': 'var(--color-interaction-container-branded-high-border-hover)'
195
201
  },
196
202
  '.icon-interaction-container-branded-high': {
197
203
  'color': 'var(--color-interaction-container-branded-high-icon)'
198
204
  },
205
+ '.icon-interaction-container-branded-high-active': {
206
+ 'color': 'var(--color-interaction-container-branded-high-icon-active)'
207
+ },
199
208
  '.icon-interaction-container-branded-high-hover': {
200
209
  'color': 'var(--color-interaction-container-branded-high-icon-hover)'
201
210
  },
202
211
  '.text-interaction-container-branded-high': {
203
212
  'color': 'var(--color-interaction-container-branded-high-text)'
204
213
  },
214
+ '.text-interaction-container-branded-high-active': {
215
+ 'color': 'var(--color-interaction-container-branded-high-text-active)'
216
+ },
205
217
  '.text-interaction-container-branded-high-hover': {
206
218
  'color': 'var(--color-interaction-container-branded-high-text-hover)'
207
219
  },
208
220
  '.bg-interaction-container-branded-low': {
209
221
  'background-color': 'var(--color-interaction-container-branded-low-background)'
210
222
  },
223
+ '.bg-interaction-container-branded-low-active': {
224
+ 'background-color': 'var(--color-interaction-container-branded-low-background-active)'
225
+ },
211
226
  '.bg-interaction-container-branded-low-hover': {
212
227
  'background-color': 'var(--color-interaction-container-branded-low-background-hover)'
213
228
  },
214
229
  '.border-interaction-container-branded-low': {
215
230
  'border-color': 'var(--color-interaction-container-branded-low-border)'
216
231
  },
232
+ '.border-interaction-container-branded-low-active': {
233
+ 'border-color': 'var(--color-interaction-container-branded-low-border-active)'
234
+ },
217
235
  '.border-interaction-container-branded-low-hover': {
218
236
  'border-color': 'var(--color-interaction-container-branded-low-border-hover)'
219
237
  },
220
238
  '.icon-interaction-container-branded-low': {
221
239
  'color': 'var(--color-interaction-container-branded-low-icon)'
222
240
  },
241
+ '.icon-interaction-container-branded-low-active': {
242
+ 'color': 'var(--color-interaction-container-branded-low-icon-active)'
243
+ },
223
244
  '.icon-interaction-container-branded-low-hover': {
224
245
  'color': 'var(--color-interaction-container-branded-low-icon-hover)'
225
246
  },
226
247
  '.text-interaction-container-branded-low': {
227
248
  'color': 'var(--color-interaction-container-branded-low-text)'
228
249
  },
250
+ '.text-interaction-container-branded-low-active': {
251
+ 'color': 'var(--color-interaction-container-branded-low-text-active)'
252
+ },
229
253
  '.text-interaction-container-branded-low-hover': {
230
254
  'color': 'var(--color-interaction-container-branded-low-text-hover)'
231
255
  },
232
256
  '.bg-interaction-container-neutral': {
233
257
  'background-color': 'var(--color-interaction-container-neutral-background)'
234
258
  },
259
+ '.bg-interaction-container-neutral-active': {
260
+ 'background-color': 'var(--color-interaction-container-neutral-background-active)'
261
+ },
235
262
  '.bg-interaction-container-neutral-hover': {
236
263
  'background-color': 'var(--color-interaction-container-neutral-background-hover)'
237
264
  },
@@ -244,12 +271,18 @@ exports.NOVA_TAILWIND_TOKENS = {
244
271
  '.icon-interaction-container-neutral': {
245
272
  'color': 'var(--color-interaction-container-neutral-icon)'
246
273
  },
274
+ '.icon-interaction-container-neutral-active': {
275
+ 'color': 'var(--color-interaction-container-neutral-icon-active)'
276
+ },
247
277
  '.icon-interaction-container-neutral-hover': {
248
278
  'color': 'var(--color-interaction-container-neutral-icon-hover)'
249
279
  },
250
280
  '.text-interaction-container-neutral': {
251
281
  'color': 'var(--color-interaction-container-neutral-text)'
252
282
  },
283
+ '.text-interaction-container-neutral-active': {
284
+ 'color': 'var(--color-interaction-container-neutral-text-active)'
285
+ },
253
286
  '.text-interaction-container-neutral-hover': {
254
287
  'color': 'var(--color-interaction-container-neutral-text-hover)'
255
288
  },
@@ -265,6 +298,18 @@ exports.NOVA_TAILWIND_TOKENS = {
265
298
  '.text-interaction-link-high-hover': {
266
299
  'color': 'var(--color-interaction-link-high-text-hover)'
267
300
  },
301
+ '.icon-interaction-link-inverted': {
302
+ 'color': 'var(--color-interaction-link-inverted-icon)'
303
+ },
304
+ '.icon-interaction-link-inverted-hover': {
305
+ 'color': 'var(--color-interaction-link-inverted-icon-hover)'
306
+ },
307
+ '.text-interaction-link-inverted': {
308
+ 'color': 'var(--color-interaction-link-inverted-text)'
309
+ },
310
+ '.text-interaction-link-inverted-hover': {
311
+ 'color': 'var(--color-interaction-link-inverted-text-hover)'
312
+ },
268
313
  '.icon-interaction-link-low': {
269
314
  'color': 'var(--color-interaction-link-low-icon)'
270
315
  },
@@ -286,6 +331,9 @@ exports.NOVA_TAILWIND_TOKENS = {
286
331
  '.bg-level-10': {
287
332
  'background-color': 'var(--color-level-10-background)'
288
333
  },
334
+ '.bg-level-15': {
335
+ 'background-color': 'var(--color-level-15-background)'
336
+ },
289
337
  '.bg-level-20': {
290
338
  'background-color': 'var(--color-level-20-background)'
291
339
  },
@@ -295,6 +343,27 @@ exports.NOVA_TAILWIND_TOKENS = {
295
343
  '.bg-level-40': {
296
344
  'background-color': 'var(--color-level-40-background)'
297
345
  },
346
+ '.bg-level-inverted-00': {
347
+ 'background-color': 'var(--color-level-inverted-00-background)'
348
+ },
349
+ '.bg-level-inverted-05': {
350
+ 'background-color': 'var(--color-level-inverted-05-background)'
351
+ },
352
+ '.bg-level-inverted-10': {
353
+ 'background-color': 'var(--color-level-inverted-10-background)'
354
+ },
355
+ '.bg-level-inverted-15': {
356
+ 'background-color': 'var(--color-level-inverted-15-background)'
357
+ },
358
+ '.bg-level-inverted-20': {
359
+ 'background-color': 'var(--color-level-inverted-20-background)'
360
+ },
361
+ '.bg-level-inverted-30': {
362
+ 'background-color': 'var(--color-level-inverted-30-background)'
363
+ },
364
+ '.bg-level-inverted-40': {
365
+ 'background-color': 'var(--color-level-inverted-40-background)'
366
+ },
298
367
  '.bg-rainbow-1': {
299
368
  'background-color': 'var(--color-rainbow-1-background)'
300
369
  },
package/dist/css/mccs.css CHANGED
@@ -3,6 +3,7 @@
3
3
  */
4
4
 
5
5
  .dark:root {
6
+ --components-overlay-opacity: 75px;
6
7
  --components-button-destructive-low-border-hover: rgba(255, 255, 255, 0);
7
8
  --components-button-destructive-low-border: rgba(255, 255, 255, 0);
8
9
  --components-button-destructive-low-background-hover: rgba(255, 255, 255, 0.12);
@@ -26,8 +27,10 @@
26
27
  --components-button-lower-border-hover-2: rgba(255, 255, 255, 0);
27
28
  --components-button-lower-border-2: rgba(255, 255, 255, 0);
28
29
  --components-button-lower-border-hover: rgba(255, 255, 255, 0);
30
+ --components-button-lower-border-active: rgba(255, 255, 255, 0);
29
31
  --components-button-lower-border: rgba(255, 255, 255, 0);
30
32
  --components-button-low-background: rgba(255, 255, 255, 0);
33
+ --components-button-high-border-active: rgba(255, 255, 255, 0);
31
34
  --components-button-high-border-hover: rgba(255, 255, 255, 0);
32
35
  --components-button-high-border: rgba(255, 255, 255, 0);
33
36
  --components-wpf-components-2: #ffffff;
@@ -58,15 +61,18 @@
58
61
  --shadow-color-opacity-1: rgba(11, 15, 17, 0.09);
59
62
  --shadow-color-opacity-0: rgba(11, 15, 17, 0.09);
60
63
  --color-black: #000000;
64
+ --color-interaction-container-neutral-background-active: rgba(255, 255, 255, 0.1);
61
65
  --color-interaction-container-neutral-background-hover: rgba(255, 255, 255, 0.1);
62
66
  --color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
63
67
  --color-interaction-container-branded-low-background-hover: rgba(255, 255, 255, 0.12);
68
+ --color-interaction-container-branded-low-background-active: rgba(255, 255, 255, 0.12);
64
69
  --color-interaction-container-branded-low-background: rgba(255, 255, 255, 0);
65
70
  --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
66
71
  --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
67
72
  --components-tooltip-border: var(--color-gray-ocean-50);
68
73
  --components-tooltip-background: var(--color-gray-ocean-50);
69
74
  --components-popover-background: var(--color-gray-ocean-900);
75
+ --components-overlay-background: var(--color-gray-ocean-650);
70
76
  --components-button-destructive-high-icon-hover: var(--color-base-black);
71
77
  --components-button-destructive-high-icon: var(--color-base-black);
72
78
  --components-button-destructive-high-text-hover: var(--color-base-black);
@@ -99,6 +105,7 @@
99
105
  --components-form-shape-background-default: var(--color-gray-ocean-400);
100
106
  --components-form-field-background-checked: var(--color-petrol-500);
101
107
  --components-button-medium-border-hover: var(--components-button-gr-as-complementary-border-hover);
108
+ --components-button-medium-border-active: var(--components-button-gr-as-complementary-border-hover);
102
109
  --components-button-medium-border: var(--components-button-gr-as-complementary-border);
103
110
  --components-button-gr-as-complementary-icon-hover: var(--color-base-white);
104
111
  --components-button-gr-as-complementary-icon: var(--color-base-white);
@@ -106,9 +113,11 @@
106
113
  --components-button-gr-as-complementary-text: var(--color-base-white);
107
114
  --components-button-gr-as-complementary-background-hover: var(--color-gray-ocean-350);
108
115
  --components-button-gr-as-complementary-background: var(--color-gray-ocean-450);
109
- --components-button-lower-background-hover: var(--color-interaction-container-branded-low-background-hover);
116
+ --components-button-lower-background-hover: var(--color-interaction-container-neutral-background-hover);
117
+ --components-button-lower-background-active: var(--color-interaction-container-neutral-background-active);
110
118
  --components-button-lower-background: var(--color-interaction-container-branded-low-background);
111
119
  --components-button-low-background-hover: var(--color-interaction-container-branded-low-background-hover);
120
+ --components-button-low-background-active: var(--color-interaction-container-branded-low-background-active);
112
121
  --color-dont-use-background: var(--color-gray-ocean-900);
113
122
  --color-dont-use-content: var(--color-gray-ocean-750);
114
123
  --color-dont-use-border: var(--color-gray-ocean-750);
@@ -229,32 +238,51 @@
229
238
  --color-content-high-icon: var(--color-gray-ocean-50);
230
239
  --color-content-high-text: var(--color-gray-ocean-50);
231
240
  --color-content-high-border: var(--color-gray-ocean-300);
241
+ --color-level-inverted-05-background: var(--color-gray-ocean-25);
242
+ --color-level-inverted-00-background: var(--color-gray-ocean-00);
243
+ --color-level-inverted-40-background: var(--color-gray-ocean-00);
244
+ --color-level-inverted-30-background: var(--color-gray-ocean-50);
245
+ --color-level-inverted-20-background: var(--color-gray-ocean-00);
246
+ --color-level-inverted-15-background: var(--color-gray-ocean-75);
247
+ --color-level-inverted-10-background: var(--color-gray-ocean-50);
232
248
  --color-level-05-background: var(--color-gray-ocean-850);
233
249
  --color-level-00-background: var(--color-gray-ocean-900);
234
250
  --color-level-40-background: var(--color-gray-ocean-500);
235
251
  --color-level-30-background: var(--color-gray-ocean-600);
236
252
  --color-level-20-background: var(--color-gray-ocean-700);
253
+ --color-level-15-background: var(--color-gray-ocean-750);
237
254
  --color-level-10-background: var(--color-gray-ocean-800);
255
+ --color-interaction-link-inverted-icon-hover: var(--color-petrol-400);
256
+ --color-interaction-link-inverted-text-hover: var(--color-petrol-400);
238
257
  --color-interaction-link-low-icon-hover: var(--color-petrol-400);
239
258
  --color-interaction-link-low-text-hover: var(--color-petrol-400);
240
259
  --color-interaction-link-high-icon-hover: var(--color-petrol-300);
241
260
  --color-interaction-link-high-icon: var(--color-petrol-400);
242
261
  --color-interaction-link-high-text-hover: var(--color-petrol-300);
243
262
  --color-interaction-link-high-text: var(--color-petrol-400);
244
- --color-interaction-container-branded-high-border-hover: var(--color-petrol-500);
245
- --color-interaction-container-branded-high-border: var(--color-petrol-600);
246
- --color-interaction-container-branded-high-icon-hover: var(--color-base-white);
247
- --color-interaction-container-branded-high-icon: var(--color-base-white);
263
+ --color-interaction-container-neutral-text-active: var(--color-petrol-300);
264
+ --color-interaction-container-neutral-icon-active: var(--color-petrol-300);
248
265
  --color-interaction-container-branded-high-text-hover: var(--color-base-white);
266
+ --color-interaction-container-branded-high-text-active: var(--color-base-white);
249
267
  --color-interaction-container-branded-high-text: var(--color-base-white);
268
+ --color-interaction-container-branded-high-icon-hover: var(--color-base-white);
269
+ --color-interaction-container-branded-high-icon-active: var(--color-base-white);
270
+ --color-interaction-container-branded-high-icon: var(--color-base-white);
271
+ --color-interaction-container-branded-high-border-hover: var(--color-petrol-500);
272
+ --color-interaction-container-branded-high-border-active: var(--color-petrol-500);
273
+ --color-interaction-container-branded-high-border: var(--color-petrol-600);
250
274
  --color-interaction-container-branded-high-background-hover: var(--color-petrol-500);
275
+ --color-interaction-container-branded-high-background-active: var(--color-petrol-500);
251
276
  --color-interaction-container-branded-high-background: var(--color-petrol-600);
252
- --color-interaction-container-branded-low-border-hover: var(--color-petrol-300);
253
- --color-interaction-container-branded-low-border: var(--color-petrol-400);
254
- --color-interaction-container-branded-low-icon-hover: var(--color-petrol-300);
255
- --color-interaction-container-branded-low-icon: var(--color-petrol-400);
256
277
  --color-interaction-container-branded-low-text-hover: var(--color-petrol-300);
278
+ --color-interaction-container-branded-low-text-active: var(--color-petrol-300);
257
279
  --color-interaction-container-branded-low-text: var(--color-petrol-400);
280
+ --color-interaction-container-branded-low-icon-hover: var(--color-petrol-300);
281
+ --color-interaction-container-branded-low-icon-active: var(--color-petrol-300);
282
+ --color-interaction-container-branded-low-icon: var(--color-petrol-400);
283
+ --color-interaction-container-branded-low-border-hover: var(--color-petrol-300);
284
+ --color-interaction-container-branded-low-border-active: var(--color-petrol-300);
285
+ --color-interaction-container-branded-low-border: var(--color-petrol-400);
258
286
  --components-menu-contextual-item-content-disabled: var(--color-content-lower-text);
259
287
  --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
260
288
  --components-menu-contextual-border: var(--color-content-low-border);
@@ -374,38 +402,51 @@
374
402
  --components-form-text-label-default: var(--color-content-high-text);
375
403
  --components-form-text-info-icon: var(--color-content-medium-text);
376
404
  --components-form-text-required: var(--color-feedback-error-low-icon);
377
- --components-button-medium-icon-hover: var(--components-button-gr-as-complementary-icon-hover);
378
- --components-button-medium-icon: var(--components-button-gr-as-complementary-icon);
379
405
  --components-button-medium-text-hover: var(--components-button-gr-as-complementary-text-hover);
406
+ --components-button-medium-text-active: var(--components-button-gr-as-complementary-text-hover);
380
407
  --components-button-medium-text: var(--components-button-gr-as-complementary-text);
408
+ --components-button-medium-icon-hover: var(--components-button-gr-as-complementary-icon-hover);
409
+ --components-button-medium-icon-active: var(--components-button-gr-as-complementary-icon-hover);
410
+ --components-button-medium-icon: var(--components-button-gr-as-complementary-icon);
381
411
  --components-button-medium-background-hover: var(--components-button-gr-as-complementary-background-hover);
412
+ --components-button-medium-background-active: var(--components-button-gr-as-complementary-background-hover);
382
413
  --components-button-medium-background: var(--components-button-gr-as-complementary-background);
383
- --components-button-lower-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
384
- --components-button-lower-icon: var(--color-interaction-container-branded-low-icon);
385
414
  --components-button-lower-text-hover: var(--color-interaction-container-branded-low-text-hover);
415
+ --components-button-lower-text-active: var(--color-interaction-container-branded-low-text-hover);
386
416
  --components-button-lower-text: var(--color-interaction-container-branded-low-text);
387
- --components-button-low-border-hover: var(--color-interaction-container-branded-low-border-hover);
388
- --components-button-low-border: var(--color-interaction-container-branded-low-border);
389
- --components-button-low-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
390
- --components-button-low-icon: var(--color-interaction-container-branded-low-icon);
417
+ --components-button-lower-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
418
+ --components-button-lower-icon-active: var(--color-interaction-container-branded-low-icon-hover);
419
+ --components-button-lower-icon: var(--color-interaction-container-branded-low-icon);
391
420
  --components-button-low-text-hover: var(--color-interaction-container-branded-low-text-hover);
421
+ --components-button-low-text-active: var(--color-interaction-container-branded-low-text-active);
392
422
  --components-button-low-text: var(--color-interaction-container-branded-low-text);
423
+ --components-button-low-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
424
+ --components-button-low-icon-active: var(--color-interaction-container-branded-low-icon-active);
425
+ --components-button-low-icon: var(--color-interaction-container-branded-low-icon);
426
+ --components-button-low-border-hover: var(--color-interaction-container-branded-low-border-hover);
427
+ --components-button-low-border-active: var(--color-interaction-container-branded-low-border-hover);
428
+ --components-button-low-border: var(--color-interaction-container-branded-low-border);
393
429
  --components-button-high-icon-hover: var(--color-interaction-container-branded-high-icon-hover);
430
+ --components-button-high-icon-active: var(--color-interaction-container-branded-high-icon-active);
394
431
  --components-button-high-icon: var(--color-interaction-container-branded-high-icon);
395
432
  --components-button-high-text-hover: var(--color-interaction-container-branded-high-text-hover);
433
+ --components-button-high-text-active: var(--color-interaction-container-branded-high-text-active);
396
434
  --components-button-high-text: var(--color-interaction-container-branded-high-text);
397
435
  --components-button-high-background-hover: var(--color-interaction-container-branded-high-background-hover);
436
+ --components-button-high-background-active: var(--color-interaction-container-branded-high-background-hover);
398
437
  --components-button-high-background: var(--color-interaction-container-branded-high-background);
399
438
  --color-focus-success: var(--color-feedback-success-low-border);
400
439
  --color-focus-destructive: var(--color-feedback-error-high-border);
440
+ --color-interaction-link-inverted-icon: var(--color-content-inverted-medium-icon);
441
+ --color-interaction-link-inverted-text: var(--color-content-inverted-medium-text);
401
442
  --color-interaction-link-low-icon: var(--color-content-high-text);
402
443
  --color-interaction-link-low-text: var(--color-content-high-text);
403
- --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
404
- --color-interaction-container-neutral-border: var(--color-content-low-text);
405
- --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
406
- --color-interaction-container-neutral-icon: var(--color-content-low-text);
407
444
  --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
408
445
  --color-interaction-container-neutral-text: var(--color-content-low-text);
446
+ --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
447
+ --color-interaction-container-neutral-icon: var(--color-content-low-text);
448
+ --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
449
+ --color-interaction-container-neutral-border: var(--color-content-low-text);
409
450
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
410
451
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
411
452
  --components-list-custom-item-content-hover: var(--color-interaction-container-neutral-text-hover);
@@ -426,6 +467,7 @@
426
467
  */
427
468
 
428
469
  :root {
470
+ --components-overlay-opacity: 55px;
429
471
  --components-button-destructive-low-border-hover: rgba(255, 255, 255, 0);
430
472
  --components-button-destructive-low-border: rgba(255, 255, 255, 0);
431
473
  --components-button-destructive-low-background-hover: rgba(11, 15, 17, 0.08);
@@ -449,8 +491,10 @@
449
491
  --components-button-lower-border-hover-2: rgba(255, 255, 255, 0);
450
492
  --components-button-lower-border-2: rgba(255, 255, 255, 0);
451
493
  --components-button-lower-border-hover: rgba(255, 255, 255, 0);
494
+ --components-button-lower-border-active: rgba(255, 255, 255, 0);
452
495
  --components-button-lower-border: rgba(255, 255, 255, 0);
453
496
  --components-button-low-background: rgba(255, 255, 255, 0);
497
+ --components-button-high-border-active: rgba(255, 255, 255, 0);
454
498
  --components-button-high-border-hover: rgba(255, 255, 255, 0);
455
499
  --components-button-high-border: rgba(255, 255, 255, 0);
456
500
  --components-wpf-components-2: #ffffff;
@@ -481,15 +525,18 @@
481
525
  --shadow-color-opacity-1: rgba(11, 15, 17, 0.06);
482
526
  --shadow-color-opacity-0: rgba(255, 255, 255, 0.06);
483
527
  --color-black: #000000;
528
+ --color-interaction-container-neutral-background-active: rgba(165, 166, 167, 0.12);
484
529
  --color-interaction-container-neutral-background-hover: rgba(165, 166, 167, 0.12);
485
530
  --color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
486
531
  --color-interaction-container-branded-low-background-hover: rgba(11, 15, 17, 0.08);
532
+ --color-interaction-container-branded-low-background-active: rgba(11, 15, 17, 0.08);
487
533
  --color-interaction-container-branded-low-background: rgba(255, 255, 255, 0);
488
534
  --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
489
535
  --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
490
536
  --components-tooltip-border: var(--color-gray-ocean-900);
491
537
  --components-tooltip-background: var(--color-gray-ocean-900);
492
538
  --components-popover-background: var(--color-gray-ocean-50);
539
+ --components-overlay-background: var(--color-gray-ocean-850);
493
540
  --components-button-destructive-high-icon-hover: var(--color-base-black);
494
541
  --components-button-destructive-high-icon: var(--color-base-black);
495
542
  --components-button-destructive-high-text-hover: var(--color-base-black);
@@ -522,6 +569,7 @@
522
569
  --components-form-shape-background-default: var(--color-gray-ocean-75);
523
570
  --components-form-field-background-checked: var(--color-petrol-600);
524
571
  --components-button-medium-border-hover: var(--components-button-gr-as-complementary-border-hover);
572
+ --components-button-medium-border-active: var(--components-button-gr-as-complementary-border-hover);
525
573
  --components-button-medium-border: var(--components-button-gr-as-complementary-border);
526
574
  --components-button-gr-as-complementary-icon-hover: var(--color-base-black);
527
575
  --components-button-gr-as-complementary-icon: var(--color-base-black);
@@ -529,9 +577,11 @@
529
577
  --components-button-gr-as-complementary-text: var(--color-base-black);
530
578
  --components-button-gr-as-complementary-background-hover: var(--color-gray-ocean-300);
531
579
  --components-button-gr-as-complementary-background: var(--color-gray-ocean-200);
532
- --components-button-lower-background-hover: var(--color-interaction-container-branded-low-background-hover);
580
+ --components-button-lower-background-hover: var(--color-interaction-container-neutral-background-hover);
581
+ --components-button-lower-background-active: var(--color-interaction-container-neutral-background-active);
533
582
  --components-button-lower-background: var(--color-interaction-container-branded-low-background);
534
583
  --components-button-low-background-hover: var(--color-interaction-container-branded-low-background-hover);
584
+ --components-button-low-background-active: var(--color-interaction-container-branded-low-background-active);
535
585
  --color-dont-use-background: var(--color-gray-ocean-50);
536
586
  --color-dont-use-content: var(--color-gray-ocean-150);
537
587
  --color-dont-use-border: var(--color-gray-ocean-150);
@@ -652,32 +702,51 @@
652
702
  --color-content-high-icon: var(--color-gray-ocean-800);
653
703
  --color-content-high-text: var(--color-gray-ocean-800);
654
704
  --color-content-high-border: var(--color-gray-ocean-300);
705
+ --color-level-inverted-05-background: var(--color-gray-ocean-850);
706
+ --color-level-inverted-00-background: var(--color-gray-ocean-900);
707
+ --color-level-inverted-40-background: var(--color-gray-ocean-500);
708
+ --color-level-inverted-30-background: var(--color-gray-ocean-600);
709
+ --color-level-inverted-20-background: var(--color-gray-ocean-700);
710
+ --color-level-inverted-15-background: var(--color-gray-ocean-750);
711
+ --color-level-inverted-10-background: var(--color-gray-ocean-800);
655
712
  --color-level-05-background: var(--color-gray-ocean-25);
656
713
  --color-level-00-background: var(--color-gray-ocean-00);
657
714
  --color-level-40-background: var(--color-gray-ocean-00);
658
715
  --color-level-30-background: var(--color-gray-ocean-50);
659
716
  --color-level-20-background: var(--color-gray-ocean-00);
717
+ --color-level-15-background: var(--color-gray-ocean-75);
660
718
  --color-level-10-background: var(--color-gray-ocean-50);
719
+ --color-interaction-link-inverted-icon-hover: var(--color-petrol-600);
720
+ --color-interaction-link-inverted-text-hover: var(--color-petrol-600);
661
721
  --color-interaction-link-low-icon-hover: var(--color-petrol-600);
662
722
  --color-interaction-link-low-text-hover: var(--color-petrol-600);
663
723
  --color-interaction-link-high-icon-hover: var(--color-petrol-700);
664
724
  --color-interaction-link-high-icon: var(--color-petrol-600);
665
725
  --color-interaction-link-high-text-hover: var(--color-petrol-700);
666
726
  --color-interaction-link-high-text: var(--color-petrol-600);
667
- --color-interaction-container-branded-high-border-hover: var(--color-petrol-500);
668
- --color-interaction-container-branded-high-border: var(--color-petrol-400);
669
- --color-interaction-container-branded-high-icon-hover: var(--color-base-black);
670
- --color-interaction-container-branded-high-icon: var(--color-base-black);
727
+ --color-interaction-container-neutral-text-active: var(--color-petrol-700);
728
+ --color-interaction-container-neutral-icon-active: var(--color-petrol-700);
671
729
  --color-interaction-container-branded-high-text-hover: var(--color-base-black);
730
+ --color-interaction-container-branded-high-text-active: var(--color-base-black);
672
731
  --color-interaction-container-branded-high-text: var(--color-base-black);
732
+ --color-interaction-container-branded-high-icon-hover: var(--color-base-black);
733
+ --color-interaction-container-branded-high-icon-active: var(--color-base-black);
734
+ --color-interaction-container-branded-high-icon: var(--color-base-black);
735
+ --color-interaction-container-branded-high-border-hover: var(--color-petrol-500);
736
+ --color-interaction-container-branded-high-border-active: var(--color-petrol-500);
737
+ --color-interaction-container-branded-high-border: var(--color-petrol-400);
673
738
  --color-interaction-container-branded-high-background-hover: var(--color-petrol-500);
739
+ --color-interaction-container-branded-high-background-active: var(--color-petrol-500);
674
740
  --color-interaction-container-branded-high-background: var(--color-petrol-400);
675
- --color-interaction-container-branded-low-border-hover: var(--color-petrol-700);
676
- --color-interaction-container-branded-low-border: var(--color-petrol-600);
677
- --color-interaction-container-branded-low-icon-hover: var(--color-petrol-700);
678
- --color-interaction-container-branded-low-icon: var(--color-petrol-600);
679
741
  --color-interaction-container-branded-low-text-hover: var(--color-petrol-700);
742
+ --color-interaction-container-branded-low-text-active: var(--color-petrol-700);
680
743
  --color-interaction-container-branded-low-text: var(--color-petrol-600);
744
+ --color-interaction-container-branded-low-icon-hover: var(--color-petrol-700);
745
+ --color-interaction-container-branded-low-icon-active: var(--color-petrol-700);
746
+ --color-interaction-container-branded-low-icon: var(--color-petrol-600);
747
+ --color-interaction-container-branded-low-border-hover: var(--color-petrol-700);
748
+ --color-interaction-container-branded-low-border-active: var(--color-petrol-700);
749
+ --color-interaction-container-branded-low-border: var(--color-petrol-600);
681
750
  --components-menu-contextual-item-content-disabled: var(--color-content-lower-text);
682
751
  --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
683
752
  --components-menu-contextual-border: var(--color-content-low-border);
@@ -797,43 +866,56 @@
797
866
  --components-form-text-label-default: var(--color-content-high-text);
798
867
  --components-form-text-info-icon: var(--color-content-low-text);
799
868
  --components-form-text-required: var(--color-feedback-error-low-icon);
800
- --components-button-medium-icon-hover: var(--components-button-gr-as-complementary-icon-hover);
801
- --components-button-medium-icon: var(--components-button-gr-as-complementary-icon);
802
869
  --components-button-medium-text-hover: var(--components-button-gr-as-complementary-text-hover);
870
+ --components-button-medium-text-active: var(--components-button-gr-as-complementary-text-hover);
803
871
  --components-button-medium-text: var(--components-button-gr-as-complementary-text);
872
+ --components-button-medium-icon-hover: var(--components-button-gr-as-complementary-icon-hover);
873
+ --components-button-medium-icon-active: var(--components-button-gr-as-complementary-icon-hover);
874
+ --components-button-medium-icon: var(--components-button-gr-as-complementary-icon);
804
875
  --components-button-medium-background-hover: var(--components-button-gr-as-complementary-background-hover);
876
+ --components-button-medium-background-active: var(--components-button-gr-as-complementary-background-hover);
805
877
  --components-button-medium-background: var(--components-button-gr-as-complementary-background);
806
- --components-button-lower-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
807
- --components-button-lower-icon: var(--color-interaction-container-branded-low-icon);
808
878
  --components-button-lower-text-hover: var(--color-interaction-container-branded-low-text-hover);
879
+ --components-button-lower-text-active: var(--color-interaction-container-branded-low-text-hover);
809
880
  --components-button-lower-text: var(--color-interaction-container-branded-low-text);
810
- --components-button-low-border-hover: var(--color-interaction-container-branded-low-border-hover);
811
- --components-button-low-border: var(--color-interaction-container-branded-low-border);
812
- --components-button-low-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
813
- --components-button-low-icon: var(--color-interaction-container-branded-low-icon);
881
+ --components-button-lower-icon-active: var(--color-interaction-container-branded-low-icon-hover);
882
+ --components-button-lower-icon: var(--color-interaction-container-branded-low-icon);
814
883
  --components-button-low-text-hover: var(--color-interaction-container-branded-low-text-hover);
884
+ --components-button-low-text-active: var(--color-interaction-container-branded-low-text-active);
815
885
  --components-button-low-text: var(--color-interaction-container-branded-low-text);
886
+ --components-button-low-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
887
+ --components-button-low-icon-active: var(--color-interaction-container-branded-low-icon-active);
888
+ --components-button-low-icon: var(--color-interaction-container-branded-low-icon);
889
+ --components-button-low-border-hover: var(--color-interaction-container-branded-low-border-hover);
890
+ --components-button-low-border-active: var(--color-interaction-container-branded-low-border-hover);
891
+ --components-button-low-border: var(--color-interaction-container-branded-low-border);
816
892
  --components-button-high-icon-hover: var(--color-interaction-container-branded-high-icon-hover);
893
+ --components-button-high-icon-active: var(--color-interaction-container-branded-high-icon-active);
817
894
  --components-button-high-icon: var(--color-interaction-container-branded-high-icon);
818
895
  --components-button-high-text-hover: var(--color-interaction-container-branded-high-text-hover);
896
+ --components-button-high-text-active: var(--color-interaction-container-branded-high-text-active);
819
897
  --components-button-high-text: var(--color-interaction-container-branded-high-text);
820
898
  --components-button-high-background-hover: var(--color-interaction-container-branded-high-background-hover);
899
+ --components-button-high-background-active: var(--color-interaction-container-branded-high-background-hover);
821
900
  --components-button-high-background: var(--color-interaction-container-branded-high-background);
822
901
  --color-focus-success: var(--color-feedback-success-low-border);
823
902
  --color-focus-destructive: var(--color-feedback-error-high-border);
903
+ --color-interaction-link-inverted-icon: var(--color-content-inverted-medium-icon);
904
+ --color-interaction-link-inverted-text: var(--color-content-inverted-medium-text);
824
905
  --color-interaction-link-low-icon: var(--color-content-high-text);
825
906
  --color-interaction-link-low-text: var(--color-content-high-text);
826
- --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
827
- --color-interaction-container-neutral-border: var(--color-content-inverted-low-text);
828
- --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
829
- --color-interaction-container-neutral-icon: var(--color-content-low-text);
830
907
  --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
831
908
  --color-interaction-container-neutral-text: var(--color-content-low-text);
909
+ --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
910
+ --color-interaction-container-neutral-icon: var(--color-content-low-text);
911
+ --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
912
+ --color-interaction-container-neutral-border: var(--color-content-inverted-low-text);
832
913
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
833
914
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
834
915
  --components-list-custom-item-content-hover: var(--color-interaction-container-neutral-text-hover);
835
916
  --components-list-custom-item-content-default: var(--color-interaction-container-neutral-text);
836
917
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
918
+ --components-button-lower-icon-hover: var(--color-interaction-container-neutral-icon-hover);
837
919
  }
838
920
 
839
921
  /**
@@ -1226,6 +1308,18 @@
1226
1308
  --focus-outline-stroke: var(--spacing-0-5);
1227
1309
  --focus-outline-offset: var(--spacing-0-5);
1228
1310
  --focus-field-stroke: var(--spacing-px);
1311
+ --dialog-footer-padding-x: var(--spacing-6);
1312
+ --dialog-footer-padding-bottom: var(--spacing-6);
1313
+ --dialog-footer-padding-top: var(--spacing-2);
1314
+ --dialog-footer-gap-y: var(--spacing-3);
1315
+ --dialog-body-padding-y: var(--spacing-2);
1316
+ --dialog-body-padding-x: var(--spacing-6);
1317
+ --dialog-header-padding-x: var(--spacing-6);
1318
+ --dialog-header-padding-bottom: var(--spacing-2);
1319
+ --dialog-header-padding-top: var(--spacing-6);
1320
+ --dialog-header-gap-y: var(--spacing-0);
1321
+ --dialog-dismissible-position-right: var(--spacing-3);
1322
+ --dialog-dismissible-position-top: var(--spacing-5);
1229
1323
  --badge-radius: var(--radius-rounded-full);
1230
1324
  --badge-padding-y: var(--spacing-1);
1231
1325
  --badge-padding-x: var(--spacing-2);