@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/css/nova-utils.css CHANGED
@@ -6976,6 +6976,10 @@ h6 {
6976
6976
  background-color: var(--color-interaction-container-branded-high-background);
6977
6977
  }
6978
6978
 
6979
+ .bg-interaction-container-branded-high-active {
6980
+ background-color: var(--color-interaction-container-branded-high-background-active);
6981
+ }
6982
+
6979
6983
  .bg-interaction-container-branded-high-hover {
6980
6984
  background-color: var(--color-interaction-container-branded-high-background-hover);
6981
6985
  }
@@ -6984,6 +6988,10 @@ h6 {
6984
6988
  border-color: var(--color-interaction-container-branded-high-border);
6985
6989
  }
6986
6990
 
6991
+ .border-interaction-container-branded-high-active {
6992
+ border-color: var(--color-interaction-container-branded-high-border-active);
6993
+ }
6994
+
6987
6995
  .border-interaction-container-branded-high-hover {
6988
6996
  border-color: var(--color-interaction-container-branded-high-border-hover);
6989
6997
  }
@@ -6992,6 +7000,10 @@ h6 {
6992
7000
  color: var(--color-interaction-container-branded-high-icon);
6993
7001
  }
6994
7002
 
7003
+ .icon-interaction-container-branded-high-active {
7004
+ color: var(--color-interaction-container-branded-high-icon-active);
7005
+ }
7006
+
6995
7007
  .icon-interaction-container-branded-high-hover {
6996
7008
  color: var(--color-interaction-container-branded-high-icon-hover);
6997
7009
  }
@@ -7000,6 +7012,10 @@ h6 {
7000
7012
  color: var(--color-interaction-container-branded-high-text);
7001
7013
  }
7002
7014
 
7015
+ .text-interaction-container-branded-high-active {
7016
+ color: var(--color-interaction-container-branded-high-text-active);
7017
+ }
7018
+
7003
7019
  .text-interaction-container-branded-high-hover {
7004
7020
  color: var(--color-interaction-container-branded-high-text-hover);
7005
7021
  }
@@ -7008,6 +7024,10 @@ h6 {
7008
7024
  background-color: var(--color-interaction-container-branded-low-background);
7009
7025
  }
7010
7026
 
7027
+ .bg-interaction-container-branded-low-active {
7028
+ background-color: var(--color-interaction-container-branded-low-background-active);
7029
+ }
7030
+
7011
7031
  .bg-interaction-container-branded-low-hover {
7012
7032
  background-color: var(--color-interaction-container-branded-low-background-hover);
7013
7033
  }
@@ -7016,6 +7036,10 @@ h6 {
7016
7036
  border-color: var(--color-interaction-container-branded-low-border);
7017
7037
  }
7018
7038
 
7039
+ .border-interaction-container-branded-low-active {
7040
+ border-color: var(--color-interaction-container-branded-low-border-active);
7041
+ }
7042
+
7019
7043
  .border-interaction-container-branded-low-hover {
7020
7044
  border-color: var(--color-interaction-container-branded-low-border-hover);
7021
7045
  }
@@ -7024,6 +7048,10 @@ h6 {
7024
7048
  color: var(--color-interaction-container-branded-low-icon);
7025
7049
  }
7026
7050
 
7051
+ .icon-interaction-container-branded-low-active {
7052
+ color: var(--color-interaction-container-branded-low-icon-active);
7053
+ }
7054
+
7027
7055
  .icon-interaction-container-branded-low-hover {
7028
7056
  color: var(--color-interaction-container-branded-low-icon-hover);
7029
7057
  }
@@ -7032,6 +7060,10 @@ h6 {
7032
7060
  color: var(--color-interaction-container-branded-low-text);
7033
7061
  }
7034
7062
 
7063
+ .text-interaction-container-branded-low-active {
7064
+ color: var(--color-interaction-container-branded-low-text-active);
7065
+ }
7066
+
7035
7067
  .text-interaction-container-branded-low-hover {
7036
7068
  color: var(--color-interaction-container-branded-low-text-hover);
7037
7069
  }
@@ -7040,6 +7072,10 @@ h6 {
7040
7072
  background-color: var(--color-interaction-container-neutral-background);
7041
7073
  }
7042
7074
 
7075
+ .bg-interaction-container-neutral-active {
7076
+ background-color: var(--color-interaction-container-neutral-background-active);
7077
+ }
7078
+
7043
7079
  .bg-interaction-container-neutral-hover {
7044
7080
  background-color: var(--color-interaction-container-neutral-background-hover);
7045
7081
  }
@@ -7056,6 +7092,10 @@ h6 {
7056
7092
  color: var(--color-interaction-container-neutral-icon);
7057
7093
  }
7058
7094
 
7095
+ .icon-interaction-container-neutral-active {
7096
+ color: var(--color-interaction-container-neutral-icon-active);
7097
+ }
7098
+
7059
7099
  .icon-interaction-container-neutral-hover {
7060
7100
  color: var(--color-interaction-container-neutral-icon-hover);
7061
7101
  }
@@ -7064,6 +7104,10 @@ h6 {
7064
7104
  color: var(--color-interaction-container-neutral-text);
7065
7105
  }
7066
7106
 
7107
+ .text-interaction-container-neutral-active {
7108
+ color: var(--color-interaction-container-neutral-text-active);
7109
+ }
7110
+
7067
7111
  .text-interaction-container-neutral-hover {
7068
7112
  color: var(--color-interaction-container-neutral-text-hover);
7069
7113
  }
@@ -7084,6 +7128,22 @@ h6 {
7084
7128
  color: var(--color-interaction-link-high-text-hover);
7085
7129
  }
7086
7130
 
7131
+ .icon-interaction-link-inverted {
7132
+ color: var(--color-interaction-link-inverted-icon);
7133
+ }
7134
+
7135
+ .icon-interaction-link-inverted-hover {
7136
+ color: var(--color-interaction-link-inverted-icon-hover);
7137
+ }
7138
+
7139
+ .text-interaction-link-inverted {
7140
+ color: var(--color-interaction-link-inverted-text);
7141
+ }
7142
+
7143
+ .text-interaction-link-inverted-hover {
7144
+ color: var(--color-interaction-link-inverted-text-hover);
7145
+ }
7146
+
7087
7147
  .icon-interaction-link-low {
7088
7148
  color: var(--color-interaction-link-low-icon);
7089
7149
  }
@@ -7112,6 +7172,10 @@ h6 {
7112
7172
  background-color: var(--color-level-10-background);
7113
7173
  }
7114
7174
 
7175
+ .bg-level-15 {
7176
+ background-color: var(--color-level-15-background);
7177
+ }
7178
+
7115
7179
  .bg-level-20 {
7116
7180
  background-color: var(--color-level-20-background);
7117
7181
  }
@@ -7124,6 +7188,34 @@ h6 {
7124
7188
  background-color: var(--color-level-40-background);
7125
7189
  }
7126
7190
 
7191
+ .bg-level-inverted-00 {
7192
+ background-color: var(--color-level-inverted-00-background);
7193
+ }
7194
+
7195
+ .bg-level-inverted-05 {
7196
+ background-color: var(--color-level-inverted-05-background);
7197
+ }
7198
+
7199
+ .bg-level-inverted-10 {
7200
+ background-color: var(--color-level-inverted-10-background);
7201
+ }
7202
+
7203
+ .bg-level-inverted-15 {
7204
+ background-color: var(--color-level-inverted-15-background);
7205
+ }
7206
+
7207
+ .bg-level-inverted-20 {
7208
+ background-color: var(--color-level-inverted-20-background);
7209
+ }
7210
+
7211
+ .bg-level-inverted-30 {
7212
+ background-color: var(--color-level-inverted-30-background);
7213
+ }
7214
+
7215
+ .bg-level-inverted-40 {
7216
+ background-color: var(--color-level-inverted-40-background);
7217
+ }
7218
+
7127
7219
  .bg-rainbow-1 {
7128
7220
  background-color: var(--color-rainbow-1-background);
7129
7221
  }
@@ -7724,6 +7816,14 @@ h6 {
7724
7816
  color: var(--color-interaction-link-high-text-hover);
7725
7817
  }
7726
7818
 
7819
+ .hover\:icon-interaction-link-inverted-hover:hover {
7820
+ color: var(--color-interaction-link-inverted-icon-hover);
7821
+ }
7822
+
7823
+ .hover\:text-interaction-link-inverted-hover:hover {
7824
+ color: var(--color-interaction-link-inverted-text-hover);
7825
+ }
7826
+
7727
7827
  .hover\:icon-interaction-link-low-hover:hover {
7728
7828
  color: var(--color-interaction-link-low-icon-hover);
7729
7829
  }
package/dist/css/ocean.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: rgba(255, 255, 255, 0);
@@ -24,13 +25,16 @@
24
25
  --components-button-lower-border-hover-2: rgba(255, 255, 255, 0);
25
26
  --components-button-lower-border-2: rgba(255, 255, 255, 0);
26
27
  --components-button-lower-border-hover: rgba(255, 255, 255, 0);
28
+ --components-button-lower-border-active: rgba(255, 255, 255, 0);
27
29
  --components-button-lower-border: rgba(255, 255, 255, 0);
28
30
  --components-button-low-border-hover: rgba(255, 255, 255, 0);
31
+ --components-button-low-border-active: rgba(255, 255, 255, 0);
29
32
  --components-button-low-border: rgba(255, 255, 255, 0);
30
33
  --components-button-low-background: rgba(255, 255, 255, 0);
34
+ --components-button-medium-background: rgba(255, 255, 255, 0);
35
+ --components-button-high-border-active: rgba(255, 255, 255, 0);
31
36
  --components-button-high-border-hover: rgba(255, 255, 255, 0);
32
37
  --components-button-high-border: rgba(255, 255, 255, 0);
33
- --components-button-medium-background: rgba(255, 255, 255, 0);
34
38
  --components-wpf-components-2: #ffffff;
35
39
  --shadow-y-axis-2xl: 25px;
36
40
  --shadow-y-axis-xl-2: 20px;
@@ -62,11 +66,15 @@
62
66
  --color-interaction-container-neutral-background-hover: rgba(255, 255, 255, 0.1);
63
67
  --color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
64
68
  --color-interaction-container-branded-low-background: rgba(255, 255, 255, 0);
69
+ --color-interaction-container-branded-high-border-hover: rgba(255, 255, 255, 0);
70
+ --color-interaction-container-branded-high-border-active: rgba(255, 255, 255, 0);
71
+ --color-interaction-container-branded-high-border: rgba(255, 255, 255, 0);
65
72
  --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
66
73
  --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
67
74
  --components-tooltip-border: var(--color-gray-ocean-50);
68
75
  --components-tooltip-background: var(--color-gray-ocean-50);
69
76
  --components-popover-background: var(--color-gray-ocean-900);
77
+ --components-overlay-background: var(--color-gray-ocean-650);
70
78
  --components-button-destructive-high-icon-hover: var(--color-base-black);
71
79
  --components-button-destructive-high-icon: var(--color-base-black);
72
80
  --components-button-destructive-high-text-hover: var(--color-base-black);
@@ -107,7 +115,7 @@
107
115
  --components-button-gr-as-complementary-background-hover: var(--color-gray-ocean-350);
108
116
  --components-button-gr-as-complementary-background: var(--color-gray-ocean-450);
109
117
  --components-button-lower-background-hover: var(--color-interaction-container-neutral-background-hover);
110
- --components-button-lower-background: var(--color-interaction-container-branded-low-background);
118
+ --components-button-lower-background: var(--color-interaction-container-neutral-background);
111
119
  --color-dont-use-background: var(--color-gray-ocean-900);
112
120
  --color-dont-use-content: var(--color-gray-ocean-750);
113
121
  --color-dont-use-border: var(--color-gray-ocean-750);
@@ -228,33 +236,51 @@
228
236
  --color-content-high-icon: var(--color-gray-ocean-50);
229
237
  --color-content-high-text: var(--color-gray-ocean-50);
230
238
  --color-content-high-border: var(--color-gray-ocean-300);
239
+ --color-level-inverted-05-background: var(--color-gray-ocean-25);
240
+ --color-level-inverted-00-background: var(--color-gray-ocean-00);
241
+ --color-level-inverted-40-background: var(--color-gray-ocean-00);
242
+ --color-level-inverted-30-background: var(--color-gray-ocean-50);
243
+ --color-level-inverted-20-background: var(--color-gray-ocean-00);
244
+ --color-level-inverted-15-background: var(--color-gray-ocean-75);
245
+ --color-level-inverted-10-background: var(--color-gray-ocean-50);
231
246
  --color-level-05-background: var(--color-gray-ocean-850);
232
247
  --color-level-00-background: var(--color-gray-ocean-900);
233
248
  --color-level-40-background: var(--color-gray-ocean-500);
234
249
  --color-level-30-background: var(--color-gray-ocean-600);
235
250
  --color-level-20-background: var(--color-gray-ocean-700);
251
+ --color-level-15-background: var(--color-gray-ocean-800);
236
252
  --color-level-10-background: var(--color-gray-ocean-800);
253
+ --color-interaction-link-inverted-icon-hover: var(--color-petrol-500);
254
+ --color-interaction-link-inverted-text-hover: var(--color-petrol-500);
237
255
  --color-interaction-link-low-icon-hover: var(--color-petrol-500);
238
256
  --color-interaction-link-low-text-hover: var(--color-petrol-500);
239
257
  --color-interaction-link-high-icon-hover: var(--color-petrol-400);
240
258
  --color-interaction-link-high-icon: var(--color-petrol-500);
241
259
  --color-interaction-link-high-text-hover: var(--color-petrol-400);
242
260
  --color-interaction-link-high-text: var(--color-petrol-500);
243
- --color-interaction-container-branded-high-border-hover: var(--color-petrol-400);
244
- --color-interaction-container-branded-high-border: var(--color-petrol-500);
245
- --color-interaction-container-branded-high-icon-hover: var(--color-base-black);
246
- --color-interaction-container-branded-high-icon: var(--color-base-black);
261
+ --color-interaction-container-neutral-text-active: var(--color-petrol-400);
262
+ --color-interaction-container-neutral-icon-active: var(--color-petrol-400);
263
+ --color-interaction-container-neutral-background-active: var(--color-petrol-900);
264
+ --color-interaction-container-branded-low-text-hover: var(--color-petrol-400);
265
+ --color-interaction-container-branded-low-text-active: var(--color-petrol-400);
266
+ --color-interaction-container-branded-low-text: var(--color-petrol-500);
267
+ --color-interaction-container-branded-low-icon-hover: var(--color-petrol-400);
268
+ --color-interaction-container-branded-low-icon-active: var(--color-petrol-400);
269
+ --color-interaction-container-branded-low-icon: var(--color-petrol-500);
270
+ --color-interaction-container-branded-low-border-hover: var(--color-petrol-400);
271
+ --color-interaction-container-branded-low-border-active: var(--color-petrol-400);
272
+ --color-interaction-container-branded-low-border: var(--color-petrol-500);
273
+ --color-interaction-container-branded-low-background-hover: var(--color-petrol-900);
274
+ --color-interaction-container-branded-low-background-active: var(--color-petrol-900);
247
275
  --color-interaction-container-branded-high-text-hover: var(--color-base-black);
276
+ --color-interaction-container-branded-high-text-active: var(--color-base-black);
248
277
  --color-interaction-container-branded-high-text: var(--color-base-black);
278
+ --color-interaction-container-branded-high-icon-hover: var(--color-base-black);
279
+ --color-interaction-container-branded-high-icon-active: var(--color-base-black);
280
+ --color-interaction-container-branded-high-icon: var(--color-base-black);
249
281
  --color-interaction-container-branded-high-background-hover: var(--color-petrol-400);
282
+ --color-interaction-container-branded-high-background-active: var(--color-petrol-400);
250
283
  --color-interaction-container-branded-high-background: var(--color-petrol-500);
251
- --color-interaction-container-branded-low-border-hover: var(--color-petrol-400);
252
- --color-interaction-container-branded-low-border: var(--color-petrol-500);
253
- --color-interaction-container-branded-low-icon-hover: var(--color-petrol-400);
254
- --color-interaction-container-branded-low-icon: var(--color-petrol-500);
255
- --color-interaction-container-branded-low-text-hover: var(--color-petrol-400);
256
- --color-interaction-container-branded-low-text: var(--color-petrol-500);
257
- --color-interaction-container-branded-low-background-hover: var(--color-petrol-900);
258
284
  --components-menu-contextual-item-content-disabled: var(--color-content-lower-text);
259
285
  --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
260
286
  --components-menu-contextual-border: var(--color-content-low-border);
@@ -374,43 +400,58 @@
374
400
  --components-form-text-label-default: var(--color-content-high-text);
375
401
  --components-form-text-info-icon: var(--color-content-medium-text);
376
402
  --components-form-text-required: var(--color-feedback-error-low-icon);
377
- --components-button-low-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
378
- --components-button-low-icon: var(--color-interaction-container-branded-low-icon);
403
+ --components-button-lower-text-active: var(--color-interaction-container-neutral-text-active);
404
+ --components-button-lower-icon-active: var(--color-interaction-container-neutral-icon-active);
405
+ --components-button-lower-background-active: var(--color-interaction-container-neutral-background-active);
379
406
  --components-button-low-text-hover: var(--color-interaction-container-branded-low-text-hover);
407
+ --components-button-low-text-active: var(--color-interaction-container-branded-low-text-active);
380
408
  --components-button-low-text: var(--color-interaction-container-branded-low-text);
409
+ --components-button-low-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
410
+ --components-button-low-icon-active: var(--color-interaction-container-branded-low-icon-active);
411
+ --components-button-low-icon: var(--color-interaction-container-branded-low-icon);
381
412
  --components-button-low-background-hover: var(--color-interaction-container-branded-low-background-hover);
413
+ --components-button-low-background-active: var(--color-interaction-container-branded-low-background-active);
414
+ --components-button-medium-text-hover: var(--color-interaction-container-branded-low-text-hover);
415
+ --components-button-medium-text-active: var(--color-interaction-container-branded-low-text-active);
416
+ --components-button-medium-text: var(--color-interaction-container-branded-low-text);
417
+ --components-button-medium-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
418
+ --components-button-medium-icon-active: var(--color-interaction-container-branded-low-icon-active);
419
+ --components-button-medium-icon: var(--color-interaction-container-branded-low-icon);
420
+ --components-button-medium-border-hover: var(--color-interaction-container-branded-low-border-hover);
421
+ --components-button-medium-border-active: var(--color-interaction-container-branded-low-border-hover);
422
+ --components-button-medium-border: var(--color-interaction-container-branded-low-border);
423
+ --components-button-medium-background-hover: var(--color-interaction-container-branded-low-background-hover);
424
+ --components-button-medium-background-active: var(--color-interaction-container-branded-low-background-active);
382
425
  --components-button-high-icon-hover: var(--color-interaction-container-branded-high-icon-hover);
426
+ --components-button-high-icon-active: var(--color-interaction-container-branded-high-icon-active);
383
427
  --components-button-high-icon: var(--color-interaction-container-branded-high-icon);
384
428
  --components-button-high-text-hover: var(--color-interaction-container-branded-high-text-hover);
429
+ --components-button-high-text-active: var(--color-interaction-container-branded-high-text-active);
385
430
  --components-button-high-text: var(--color-interaction-container-branded-high-text);
386
431
  --components-button-high-background-hover: var(--color-interaction-container-branded-high-background-hover);
432
+ --components-button-high-background-active: var(--color-interaction-container-branded-high-background-active);
387
433
  --components-button-high-background: var(--color-interaction-container-branded-high-background);
388
- --components-button-medium-border-hover: var(--color-interaction-container-branded-low-border-hover);
389
- --components-button-medium-border: var(--color-interaction-container-branded-low-border);
390
- --components-button-medium-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
391
- --components-button-medium-icon: var(--color-interaction-container-branded-low-icon);
392
- --components-button-medium-text-hover: var(--color-interaction-container-branded-low-text-hover);
393
- --components-button-medium-text: var(--color-interaction-container-branded-low-text);
394
- --components-button-medium-background-hover: var(--color-interaction-container-branded-low-background-hover);
395
434
  --color-focus-success: var(--color-feedback-success-low-border);
396
435
  --color-focus-destructive: var(--color-feedback-error-high-border);
436
+ --color-interaction-link-inverted-icon: var(--color-content-inverted-medium-icon);
437
+ --color-interaction-link-inverted-text: var(--color-content-inverted-medium-text);
397
438
  --color-interaction-link-low-icon: var(--color-content-high-text);
398
439
  --color-interaction-link-low-text: var(--color-content-high-text);
399
- --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
400
- --color-interaction-container-neutral-border: var(--color-content-low-text);
401
- --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
402
- --color-interaction-container-neutral-icon: var(--color-content-low-text);
403
440
  --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
404
441
  --color-interaction-container-neutral-text: var(--color-content-low-text);
442
+ --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
443
+ --color-interaction-container-neutral-icon: var(--color-content-low-text);
444
+ --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
445
+ --color-interaction-container-neutral-border: var(--color-content-low-text);
405
446
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
406
447
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
407
448
  --components-list-custom-item-content-hover: var(--color-interaction-container-neutral-text-hover);
408
449
  --components-list-custom-item-content-default: var(--color-interaction-container-neutral-text);
409
450
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
410
- --components-button-lower-icon-hover: var(--color-interaction-container-neutral-icon-hover);
411
- --components-button-lower-icon: var(--color-interaction-container-neutral-icon);
412
451
  --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
413
452
  --components-button-lower-text: var(--color-interaction-container-neutral-text);
453
+ --components-button-lower-icon-hover: var(--color-interaction-container-neutral-icon-hover);
454
+ --components-button-lower-icon: var(--color-interaction-container-neutral-icon);
414
455
  }
415
456
 
416
457
  :root {
@@ -441,6 +482,7 @@
441
482
  */
442
483
 
443
484
  :root {
485
+ --components-overlay-opacity: 55px;
444
486
  --components-button-destructive-low-border-hover: rgba(255, 255, 255, 0);
445
487
  --components-button-destructive-low-border: rgba(255, 255, 255, 0);
446
488
  --components-button-destructive-low-background: rgba(255, 255, 255, 0);
@@ -462,13 +504,16 @@
462
504
  --components-button-lower-border-hover-2: rgba(255, 255, 255, 0);
463
505
  --components-button-lower-border-2: rgba(255, 255, 255, 0);
464
506
  --components-button-lower-border-hover: rgba(255, 255, 255, 0);
507
+ --components-button-lower-border-active: rgba(255, 255, 255, 0);
465
508
  --components-button-lower-border: rgba(255, 255, 255, 0);
466
509
  --components-button-low-border-hover: rgba(255, 255, 255, 0);
510
+ --components-button-low-border-active: rgba(255, 255, 255, 0);
467
511
  --components-button-low-border: rgba(255, 255, 255, 0);
468
512
  --components-button-low-background: rgba(255, 255, 255, 0);
513
+ --components-button-medium-background: rgba(255, 255, 255, 0);
514
+ --components-button-high-border-active: rgba(255, 255, 255, 0);
469
515
  --components-button-high-border-hover: rgba(255, 255, 255, 0);
470
516
  --components-button-high-border: rgba(255, 255, 255, 0);
471
- --components-button-medium-background: rgba(255, 255, 255, 0);
472
517
  --components-wpf-components-2: #ffffff;
473
518
  --shadow-y-axis-2xl: 25px;
474
519
  --shadow-y-axis-xl-2: 20px;
@@ -500,11 +545,15 @@
500
545
  --color-interaction-container-neutral-background-hover: rgba(165, 166, 167, 0.12);
501
546
  --color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
502
547
  --color-interaction-container-branded-low-background: rgba(255, 255, 255, 0);
548
+ --color-interaction-container-branded-high-border-hover: rgba(255, 255, 255, 0);
549
+ --color-interaction-container-branded-high-border-active: rgba(255, 255, 255, 0);
550
+ --color-interaction-container-branded-high-border: rgba(255, 255, 255, 0);
503
551
  --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
504
552
  --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
505
553
  --components-tooltip-border: var(--color-gray-ocean-900);
506
554
  --components-tooltip-background: var(--color-gray-ocean-900);
507
555
  --components-popover-background: var(--color-gray-ocean-50);
556
+ --components-overlay-background: var(--color-gray-ocean-850);
508
557
  --components-button-destructive-high-icon-hover: var(--color-base-white);
509
558
  --components-button-destructive-high-icon: var(--color-base-white);
510
559
  --components-button-destructive-high-text-hover: var(--color-base-white);
@@ -545,7 +594,7 @@
545
594
  --components-button-gr-as-complementary-background-hover: var(--color-gray-ocean-300);
546
595
  --components-button-gr-as-complementary-background: var(--color-gray-ocean-200);
547
596
  --components-button-lower-background-hover: var(--color-interaction-container-neutral-background-hover);
548
- --components-button-lower-background: var(--color-interaction-container-branded-low-background);
597
+ --components-button-lower-background: var(--color-interaction-container-neutral-background);
549
598
  --color-dont-use-background: var(--color-gray-ocean-50);
550
599
  --color-dont-use-content: var(--color-gray-ocean-150);
551
600
  --color-dont-use-border: var(--color-gray-ocean-150);
@@ -666,33 +715,51 @@
666
715
  --color-content-high-icon: var(--color-gray-ocean-800);
667
716
  --color-content-high-text: var(--color-gray-ocean-800);
668
717
  --color-content-high-border: var(--color-gray-ocean-300);
718
+ --color-level-inverted-05-background: var(--color-gray-ocean-850);
719
+ --color-level-inverted-00-background: var(--color-gray-ocean-900);
720
+ --color-level-inverted-40-background: var(--color-gray-ocean-500);
721
+ --color-level-inverted-30-background: var(--color-gray-ocean-600);
722
+ --color-level-inverted-20-background: var(--color-gray-ocean-700);
723
+ --color-level-inverted-15-background: var(--color-gray-ocean-750);
724
+ --color-level-inverted-10-background: var(--color-gray-ocean-800);
669
725
  --color-level-05-background: var(--color-gray-ocean-25);
670
726
  --color-level-00-background: var(--color-gray-ocean-00);
671
727
  --color-level-40-background: var(--color-gray-ocean-00);
672
728
  --color-level-30-background: var(--color-gray-ocean-50);
673
729
  --color-level-20-background: var(--color-gray-ocean-00);
730
+ --color-level-15-background: var(--color-gray-ocean-75);
674
731
  --color-level-10-background: var(--color-gray-ocean-50);
732
+ --color-interaction-link-inverted-icon-hover: var(--color-petrol-600);
733
+ --color-interaction-link-inverted-text-hover: var(--color-petrol-600);
675
734
  --color-interaction-link-low-icon-hover: var(--color-petrol-600);
676
735
  --color-interaction-link-low-text-hover: var(--color-petrol-600);
677
736
  --color-interaction-link-high-icon-hover: var(--color-petrol-700);
678
737
  --color-interaction-link-high-icon: var(--color-petrol-600);
679
738
  --color-interaction-link-high-text-hover: var(--color-petrol-700);
680
739
  --color-interaction-link-high-text: var(--color-petrol-600);
681
- --color-interaction-container-branded-high-border-hover: var(--color-petrol-700);
682
- --color-interaction-container-branded-high-border: var(--color-petrol-600);
683
- --color-interaction-container-branded-high-icon-hover: var(--color-base-white);
684
- --color-interaction-container-branded-high-icon: var(--color-base-white);
740
+ --color-interaction-container-neutral-text-active: var(--color-petrol-700);
741
+ --color-interaction-container-neutral-icon-active: var(--color-petrol-700);
742
+ --color-interaction-container-neutral-background-active: var(--color-petrol-50);
743
+ --color-interaction-container-branded-low-text-hover: var(--color-petrol-700);
744
+ --color-interaction-container-branded-low-text-active: var(--color-petrol-700);
745
+ --color-interaction-container-branded-low-text: var(--color-petrol-600);
746
+ --color-interaction-container-branded-low-icon-hover: var(--color-petrol-700);
747
+ --color-interaction-container-branded-low-icon-active: var(--color-petrol-700);
748
+ --color-interaction-container-branded-low-icon: var(--color-petrol-600);
749
+ --color-interaction-container-branded-low-border-hover: var(--color-petrol-700);
750
+ --color-interaction-container-branded-low-border-active: var(--color-petrol-700);
751
+ --color-interaction-container-branded-low-border: var(--color-petrol-600);
752
+ --color-interaction-container-branded-low-background-hover: var(--color-petrol-50);
753
+ --color-interaction-container-branded-low-background-active: var(--color-petrol-50);
685
754
  --color-interaction-container-branded-high-text-hover: var(--color-base-white);
755
+ --color-interaction-container-branded-high-text-active: var(--color-base-white);
686
756
  --color-interaction-container-branded-high-text: var(--color-base-white);
757
+ --color-interaction-container-branded-high-icon-hover: var(--color-base-white);
758
+ --color-interaction-container-branded-high-icon-active: var(--color-base-white);
759
+ --color-interaction-container-branded-high-icon: var(--color-base-white);
687
760
  --color-interaction-container-branded-high-background-hover: var(--color-petrol-700);
761
+ --color-interaction-container-branded-high-background-active: var(--color-petrol-700);
688
762
  --color-interaction-container-branded-high-background: var(--color-petrol-600);
689
- --color-interaction-container-branded-low-border-hover: var(--color-petrol-700);
690
- --color-interaction-container-branded-low-border: var(--color-petrol-600);
691
- --color-interaction-container-branded-low-icon-hover: var(--color-petrol-700);
692
- --color-interaction-container-branded-low-icon: var(--color-petrol-600);
693
- --color-interaction-container-branded-low-text-hover: var(--color-petrol-700);
694
- --color-interaction-container-branded-low-text: var(--color-petrol-600);
695
- --color-interaction-container-branded-low-background-hover: var(--color-petrol-50);
696
763
  --components-menu-contextual-item-content-disabled: var(--color-content-lower-text);
697
764
  --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
698
765
  --components-menu-contextual-border: var(--color-content-low-border);
@@ -812,43 +879,58 @@
812
879
  --components-form-text-label-default: var(--color-content-high-text);
813
880
  --components-form-text-info-icon: var(--color-content-low-text);
814
881
  --components-form-text-required: var(--color-feedback-error-low-icon);
815
- --components-button-low-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
816
- --components-button-low-icon: var(--color-interaction-container-branded-low-icon);
882
+ --components-button-lower-text-active: var(--color-interaction-container-neutral-text-active);
883
+ --components-button-lower-icon-active: var(--color-interaction-container-neutral-icon-active);
884
+ --components-button-lower-background-active: var(--color-interaction-container-neutral-background-active);
817
885
  --components-button-low-text-hover: var(--color-interaction-container-branded-low-text-hover);
886
+ --components-button-low-text-active: var(--color-interaction-container-branded-low-text-active);
818
887
  --components-button-low-text: var(--color-interaction-container-branded-low-text);
888
+ --components-button-low-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
889
+ --components-button-low-icon-active: var(--color-interaction-container-branded-low-icon-active);
890
+ --components-button-low-icon: var(--color-interaction-container-branded-low-icon);
819
891
  --components-button-low-background-hover: var(--color-interaction-container-branded-low-background-hover);
892
+ --components-button-low-background-active: var(--color-interaction-container-branded-low-background-active);
893
+ --components-button-medium-text-hover: var(--color-interaction-container-branded-low-text-hover);
894
+ --components-button-medium-text-active: var(--color-interaction-container-branded-low-text-active);
895
+ --components-button-medium-text: var(--color-interaction-container-branded-low-text);
896
+ --components-button-medium-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
897
+ --components-button-medium-icon-active: var(--color-interaction-container-branded-low-icon-active);
898
+ --components-button-medium-icon: var(--color-interaction-container-branded-low-icon);
899
+ --components-button-medium-border-hover: var(--color-interaction-container-branded-low-border-hover);
900
+ --components-button-medium-border-active: var(--color-interaction-container-branded-low-border-hover);
901
+ --components-button-medium-border: var(--color-interaction-container-branded-low-border);
902
+ --components-button-medium-background-hover: var(--color-interaction-container-branded-low-background-hover);
903
+ --components-button-medium-background-active: var(--color-interaction-container-branded-low-background-active);
820
904
  --components-button-high-icon-hover: var(--color-interaction-container-branded-high-icon-hover);
905
+ --components-button-high-icon-active: var(--color-interaction-container-branded-high-icon-active);
821
906
  --components-button-high-icon: var(--color-interaction-container-branded-high-icon);
822
907
  --components-button-high-text-hover: var(--color-interaction-container-branded-high-text-hover);
908
+ --components-button-high-text-active: var(--color-interaction-container-branded-high-text-active);
823
909
  --components-button-high-text: var(--color-interaction-container-branded-high-text);
824
910
  --components-button-high-background-hover: var(--color-interaction-container-branded-high-background-hover);
911
+ --components-button-high-background-active: var(--color-interaction-container-branded-high-background-active);
825
912
  --components-button-high-background: var(--color-interaction-container-branded-high-background);
826
- --components-button-medium-border-hover: var(--color-interaction-container-branded-low-border-hover);
827
- --components-button-medium-border: var(--color-interaction-container-branded-low-border);
828
- --components-button-medium-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
829
- --components-button-medium-icon: var(--color-interaction-container-branded-low-icon);
830
- --components-button-medium-text-hover: var(--color-interaction-container-branded-low-text-hover);
831
- --components-button-medium-text: var(--color-interaction-container-branded-low-text);
832
- --components-button-medium-background-hover: var(--color-interaction-container-branded-low-background-hover);
833
913
  --color-focus-success: var(--color-feedback-success-low-border);
834
914
  --color-focus-destructive: var(--color-feedback-error-high-border);
915
+ --color-interaction-link-inverted-icon: var(--color-content-inverted-medium-icon);
916
+ --color-interaction-link-inverted-text: var(--color-content-inverted-medium-text);
835
917
  --color-interaction-link-low-icon: var(--color-content-high-text);
836
918
  --color-interaction-link-low-text: var(--color-content-high-text);
837
- --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
838
- --color-interaction-container-neutral-border: var(--color-content-inverted-low-text);
839
- --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
840
- --color-interaction-container-neutral-icon: var(--color-content-low-text);
841
919
  --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
842
920
  --color-interaction-container-neutral-text: var(--color-content-low-text);
921
+ --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
922
+ --color-interaction-container-neutral-icon: var(--color-content-low-text);
923
+ --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
924
+ --color-interaction-container-neutral-border: var(--color-content-inverted-low-text);
843
925
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
844
926
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
845
927
  --components-list-custom-item-content-hover: var(--color-interaction-container-neutral-text-hover);
846
928
  --components-list-custom-item-content-default: var(--color-interaction-container-neutral-text);
847
929
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
848
- --components-button-lower-icon-hover: var(--color-interaction-container-neutral-icon-hover);
849
- --components-button-lower-icon: var(--color-interaction-container-neutral-icon);
850
930
  --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
851
931
  --components-button-lower-text: var(--color-interaction-container-neutral-text);
932
+ --components-button-lower-icon-hover: var(--color-interaction-container-neutral-icon-hover);
933
+ --components-button-lower-icon: var(--color-interaction-container-neutral-icon);
852
934
  }
853
935
 
854
936
  /**
@@ -1241,6 +1323,18 @@
1241
1323
  --focus-outline-stroke: var(--spacing-0-5);
1242
1324
  --focus-outline-offset: var(--spacing-0-5);
1243
1325
  --focus-field-stroke: var(--spacing-px);
1326
+ --dialog-footer-padding-x: var(--spacing-6);
1327
+ --dialog-footer-padding-bottom: var(--spacing-6);
1328
+ --dialog-footer-padding-top: var(--spacing-2);
1329
+ --dialog-footer-gap-y: var(--spacing-3);
1330
+ --dialog-body-padding-y: var(--spacing-2);
1331
+ --dialog-body-padding-x: var(--spacing-6);
1332
+ --dialog-header-padding-x: var(--spacing-6);
1333
+ --dialog-header-padding-bottom: var(--spacing-2);
1334
+ --dialog-header-padding-top: var(--spacing-6);
1335
+ --dialog-header-gap-y: var(--spacing-0);
1336
+ --dialog-dismissible-position-right: var(--spacing-3);
1337
+ --dialog-dismissible-position-top: var(--spacing-5);
1244
1338
  --badge-radius: var(--radius-rounded-full);
1245
1339
  --badge-padding-y: var(--spacing-1);
1246
1340
  --badge-padding-x: var(--spacing-2);