@nova-design-system/nova-base 3.0.0-beta.33 → 3.0.0-beta.35

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 (22) hide show
  1. package/dist/css/mccs.css +136 -42
  2. package/dist/css/nova-utils.css +100 -0
  3. package/dist/css/ocean.css +150 -56
  4. package/dist/css/spark.css +148 -54
  5. package/dist/js/mccs_dark.d.ts +63 -22
  6. package/dist/js/mccs_dark.js +63 -22
  7. package/dist/js/mccs_light.d.ts +63 -22
  8. package/dist/js/mccs_light.js +64 -23
  9. package/dist/js/ocean_dark.d.ts +69 -28
  10. package/dist/js/ocean_dark.js +69 -28
  11. package/dist/js/ocean_light.d.ts +69 -28
  12. package/dist/js/ocean_light.js +69 -28
  13. package/dist/js/spacings.d.ts +12 -0
  14. package/dist/js/spacings.js +12 -0
  15. package/dist/js/spark_dark.d.ts +67 -26
  16. package/dist/js/spark_dark.js +69 -28
  17. package/dist/js/spark_light.d.ts +67 -26
  18. package/dist/js/spark_light.js +69 -28
  19. package/dist/lib/cjs/generated/nova-tailwind-tokens.js +69 -0
  20. package/dist/lib/generated/nova-tailwind-tokens.d.ts +69 -0
  21. package/dist/lib/generated/nova-tailwind-tokens.js +69 -0
  22. package/package.json +1 -1
package/dist/js/ocean_dark.js CHANGED
@@ -2,30 +2,41 @@
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
4
 
5
- export const ColorInteractionContainerBrandedLowBackground = "#ffffff";
6
- export const ColorInteractionContainerBrandedLowBackgroundHover = "#0b292e";
7
- export const ColorInteractionContainerBrandedLowText = "#258998";
8
- export const ColorInteractionContainerBrandedLowTextHover = "#4b9eaa";
9
- export const ColorInteractionContainerBrandedLowIcon = "#258998";
10
- export const ColorInteractionContainerBrandedLowIconHover = "#4b9eaa";
11
- export const ColorInteractionContainerBrandedLowBorder = "#258998";
12
- export const ColorInteractionContainerBrandedLowBorderHover = "#4b9eaa";
5
+ export const ColorInteractionContainerBrandedHighBorder = "#ffffff";
6
+ export const ColorInteractionContainerBrandedHighBorderActive = "#ffffff";
7
+ export const ColorInteractionContainerBrandedHighBorderHover = "#ffffff";
13
8
  export const ColorInteractionContainerBrandedHighBackground = "#258998";
9
+ export const ColorInteractionContainerBrandedHighBackgroundActive = "#4b9eaa";
14
10
  export const ColorInteractionContainerBrandedHighBackgroundHover = "#4b9eaa";
15
- export const ColorInteractionContainerBrandedHighText = "#000000";
16
- export const ColorInteractionContainerBrandedHighTextHover = "#000000";
17
11
  export const ColorInteractionContainerBrandedHighIcon = "#000000";
12
+ export const ColorInteractionContainerBrandedHighIconActive = "#000000";
18
13
  export const ColorInteractionContainerBrandedHighIconHover = "#000000";
19
- export const ColorInteractionContainerBrandedHighBorder = "#258998";
20
- export const ColorInteractionContainerBrandedHighBorderHover = "#4b9eaa";
14
+ export const ColorInteractionContainerBrandedHighText = "#000000";
15
+ export const ColorInteractionContainerBrandedHighTextActive = "#000000";
16
+ export const ColorInteractionContainerBrandedHighTextHover = "#000000";
17
+ export const ColorInteractionContainerBrandedLowBackground = "#ffffff";
18
+ export const ColorInteractionContainerBrandedLowBackgroundActive = "#0b292e";
19
+ export const ColorInteractionContainerBrandedLowBackgroundHover = "#0b292e";
20
+ export const ColorInteractionContainerBrandedLowBorder = "#258998";
21
+ export const ColorInteractionContainerBrandedLowBorderActive = "#4b9eaa";
22
+ export const ColorInteractionContainerBrandedLowBorderHover = "#4b9eaa";
23
+ export const ColorInteractionContainerBrandedLowIcon = "#258998";
24
+ export const ColorInteractionContainerBrandedLowIconActive = "#4b9eaa";
25
+ export const ColorInteractionContainerBrandedLowIconHover = "#4b9eaa";
26
+ export const ColorInteractionContainerBrandedLowText = "#258998";
27
+ export const ColorInteractionContainerBrandedLowTextActive = "#4b9eaa";
28
+ export const ColorInteractionContainerBrandedLowTextHover = "#4b9eaa";
21
29
  export const ColorInteractionContainerNeutralBackground = "#ffffff";
22
30
  export const ColorInteractionContainerNeutralBackgroundHover = "#ffffff";
23
- export const ColorInteractionContainerNeutralText = "#889499";
24
- export const ColorInteractionContainerNeutralTextHover = "#bac1c4";
25
- export const ColorInteractionContainerNeutralIcon = "#889499";
26
- export const ColorInteractionContainerNeutralIconHover = "#bac1c4";
31
+ export const ColorInteractionContainerNeutralBackgroundActive = "#0b292e";
27
32
  export const ColorInteractionContainerNeutralBorder = "#889499";
28
33
  export const ColorInteractionContainerNeutralBorderHover = "#bac1c4";
34
+ export const ColorInteractionContainerNeutralIcon = "#889499";
35
+ export const ColorInteractionContainerNeutralIconActive = "#4b9eaa";
36
+ export const ColorInteractionContainerNeutralIconHover = "#bac1c4";
37
+ export const ColorInteractionContainerNeutralText = "#889499";
38
+ export const ColorInteractionContainerNeutralTextActive = "#4b9eaa";
39
+ export const ColorInteractionContainerNeutralTextHover = "#bac1c4";
29
40
  export const ColorInteractionLinkHighText = "#258998";
30
41
  export const ColorInteractionLinkHighTextHover = "#4b9eaa";
31
42
  export const ColorInteractionLinkHighIcon = "#258998";
@@ -34,13 +45,25 @@ export const ColorInteractionLinkLowText = "#f5f6f7";
34
45
  export const ColorInteractionLinkLowTextHover = "#258998";
35
46
  export const ColorInteractionLinkLowIcon = "#f5f6f7";
36
47
  export const ColorInteractionLinkLowIconHover = "#258998";
48
+ export const ColorInteractionLinkInvertedText = "#27353b";
49
+ export const ColorInteractionLinkInvertedTextHover = "#258998";
50
+ export const ColorInteractionLinkInvertedIcon = "#27353b";
51
+ export const ColorInteractionLinkInvertedIconHover = "#258998";
37
52
  export const ColorBlack = "#000000";
38
53
  export const ColorLevel10Background = "#171f22";
54
+ export const ColorLevel15Background = "#171f22";
39
55
  export const ColorLevel20Background = "#222e33";
40
56
  export const ColorLevel30Background = "#2e3e44";
41
57
  export const ColorLevel40Background = "#394d55";
42
58
  export const ColorLevel00Background = "#0b0f11";
43
59
  export const ColorLevel05Background = "#11171a";
60
+ export const ColorLevelInverted10Background = "#f5f6f7";
61
+ export const ColorLevelInverted15Background = "#eaeef0";
62
+ export const ColorLevelInverted20Background = "#ffffff";
63
+ export const ColorLevelInverted30Background = "#f5f6f7";
64
+ export const ColorLevelInverted40Background = "#ffffff";
65
+ export const ColorLevelInverted00Background = "#ffffff";
66
+ export const ColorLevelInverted05Background = "#fafbfb";
44
67
  export const ColorContentHighBorder = "#889499";
45
68
  export const ColorContentHighText = "#f5f6f7";
46
69
  export const ColorContentHighIcon = "#f5f6f7";
@@ -190,40 +213,56 @@ export const ShadowYAxisXl1 = "10px";
190
213
  export const ShadowYAxisXl2 = "20px";
191
214
  export const ShadowYAxis2xl = "25px";
192
215
  export const ComponentsWpfComponents2 = "#ffffff";
193
- export const ComponentsButtonMediumBackground = "#ffffff";
194
- export const ComponentsButtonMediumBackgroundHover = "#0b292e";
195
- export const ComponentsButtonMediumText = "#258998";
196
- export const ComponentsButtonMediumTextHover = "#4b9eaa";
197
- export const ComponentsButtonMediumIcon = "#258998";
198
- export const ComponentsButtonMediumIconHover = "#4b9eaa";
199
- export const ComponentsButtonMediumBorder = "#258998";
200
- export const ComponentsButtonMediumBorderHover = "#4b9eaa";
201
216
  export const ComponentsButtonHighBorder = "#ffffff";
202
217
  export const ComponentsButtonHighBorderHover = "#ffffff";
218
+ export const ComponentsButtonHighBorderActive = "#ffffff";
203
219
  export const ComponentsButtonHighBackground = "#258998";
220
+ export const ComponentsButtonHighBackgroundActive = "#4b9eaa";
204
221
  export const ComponentsButtonHighBackgroundHover = "#4b9eaa";
205
222
  export const ComponentsButtonHighText = "#000000";
223
+ export const ComponentsButtonHighTextActive = "#000000";
206
224
  export const ComponentsButtonHighTextHover = "#000000";
207
225
  export const ComponentsButtonHighIcon = "#000000";
226
+ export const ComponentsButtonHighIconActive = "#000000";
208
227
  export const ComponentsButtonHighIconHover = "#000000";
228
+ export const ComponentsButtonMediumBackground = "#ffffff";
229
+ export const ComponentsButtonMediumBackgroundActive = "#0b292e";
230
+ export const ComponentsButtonMediumBackgroundHover = "#0b292e";
231
+ export const ComponentsButtonMediumBorder = "#258998";
232
+ export const ComponentsButtonMediumBorderActive = "#4b9eaa";
233
+ export const ComponentsButtonMediumBorderHover = "#4b9eaa";
234
+ export const ComponentsButtonMediumIcon = "#258998";
235
+ export const ComponentsButtonMediumIconActive = "#4b9eaa";
236
+ export const ComponentsButtonMediumIconHover = "#4b9eaa";
237
+ export const ComponentsButtonMediumText = "#258998";
238
+ export const ComponentsButtonMediumTextActive = "#4b9eaa";
239
+ export const ComponentsButtonMediumTextHover = "#4b9eaa";
209
240
  export const ComponentsButtonLowBackground = "#ffffff";
210
241
  export const ComponentsButtonLowBorder = "#ffffff";
242
+ export const ComponentsButtonLowBorderActive = "#ffffff";
211
243
  export const ComponentsButtonLowBorderHover = "#ffffff";
244
+ export const ComponentsButtonLowBackgroundActive = "#0b292e";
212
245
  export const ComponentsButtonLowBackgroundHover = "#0b292e";
213
- export const ComponentsButtonLowText = "#258998";
214
- export const ComponentsButtonLowTextHover = "#4b9eaa";
215
246
  export const ComponentsButtonLowIcon = "#258998";
247
+ export const ComponentsButtonLowIconActive = "#4b9eaa";
216
248
  export const ComponentsButtonLowIconHover = "#4b9eaa";
249
+ export const ComponentsButtonLowText = "#258998";
250
+ export const ComponentsButtonLowTextActive = "#4b9eaa";
251
+ export const ComponentsButtonLowTextHover = "#4b9eaa";
217
252
  export const ComponentsButtonLowerBorder = "#ffffff";
253
+ export const ComponentsButtonLowerBorderActive = "#ffffff";
218
254
  export const ComponentsButtonLowerBorderHover = "#ffffff";
219
255
  export const ComponentsButtonLowerBorder2 = "#ffffff";
220
256
  export const ComponentsButtonLowerBorderHover2 = "#ffffff";
221
257
  export const ComponentsButtonLowerBackground = "#ffffff";
258
+ export const ComponentsButtonLowerBackgroundActive = "#0b292e";
222
259
  export const ComponentsButtonLowerBackgroundHover = "#ffffff";
223
- export const ComponentsButtonLowerText = "#889499";
224
- export const ComponentsButtonLowerTextHover = "#bac1c4";
225
260
  export const ComponentsButtonLowerIcon = "#889499";
261
+ export const ComponentsButtonLowerIconActive = "#4b9eaa";
226
262
  export const ComponentsButtonLowerIconHover = "#bac1c4";
263
+ export const ComponentsButtonLowerText = "#889499";
264
+ export const ComponentsButtonLowerTextActive = "#4b9eaa";
265
+ export const ComponentsButtonLowerTextHover = "#bac1c4";
227
266
  export const ComponentsButtonGrAsComplementaryBorder = "#ffffff";
228
267
  export const ComponentsButtonGrAsComplementaryBorderHover = "#ffffff";
229
268
  export const ComponentsButtonGrAsComplementaryBackground = "#3f555e";
@@ -330,6 +369,8 @@ export const ComponentsButtonDestructiveLowerIcon = "#1e272b";
330
369
  export const ComponentsButtonDestructiveLowerIconHover = "#1e272b";
331
370
  export const ComponentsButtonDestructiveLowerBorder = "#1e272b";
332
371
  export const ComponentsButtonDestructiveLowerBorderHover = "#1e272b";
372
+ export const ComponentsOverlayOpacity = "75px";
373
+ export const ComponentsOverlayBackground = "#27353b";
333
374
  export const ComponentsAlertInformationBackground = "#001c37";
334
375
  export const ComponentsAlertInformationIcon = "#659fff";
335
376
  export const ComponentsAlertInformationBorder = "#659fff";
package/dist/js/ocean_light.d.ts CHANGED
@@ -2,30 +2,41 @@
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
4
 
5
- export const ColorInteractionContainerBrandedLowBackground : string;
6
- export const ColorInteractionContainerBrandedLowBackgroundHover : string;
7
- export const ColorInteractionContainerBrandedLowText : string;
8
- export const ColorInteractionContainerBrandedLowTextHover : string;
9
- export const ColorInteractionContainerBrandedLowIcon : string;
10
- export const ColorInteractionContainerBrandedLowIconHover : string;
11
- export const ColorInteractionContainerBrandedLowBorder : string;
12
- export const ColorInteractionContainerBrandedLowBorderHover : string;
5
+ export const ColorInteractionContainerBrandedHighBorder : string;
6
+ export const ColorInteractionContainerBrandedHighBorderActive : string;
7
+ export const ColorInteractionContainerBrandedHighBorderHover : string;
13
8
  export const ColorInteractionContainerBrandedHighBackground : string;
9
+ export const ColorInteractionContainerBrandedHighBackgroundActive : string;
14
10
  export const ColorInteractionContainerBrandedHighBackgroundHover : string;
15
- export const ColorInteractionContainerBrandedHighText : string;
16
- export const ColorInteractionContainerBrandedHighTextHover : string;
17
11
  export const ColorInteractionContainerBrandedHighIcon : string;
12
+ export const ColorInteractionContainerBrandedHighIconActive : string;
18
13
  export const ColorInteractionContainerBrandedHighIconHover : string;
19
- export const ColorInteractionContainerBrandedHighBorder : string;
20
- export const ColorInteractionContainerBrandedHighBorderHover : string;
14
+ export const ColorInteractionContainerBrandedHighText : string;
15
+ export const ColorInteractionContainerBrandedHighTextActive : string;
16
+ export const ColorInteractionContainerBrandedHighTextHover : string;
17
+ export const ColorInteractionContainerBrandedLowBackground : string;
18
+ export const ColorInteractionContainerBrandedLowBackgroundActive : string;
19
+ export const ColorInteractionContainerBrandedLowBackgroundHover : string;
20
+ export const ColorInteractionContainerBrandedLowBorder : string;
21
+ export const ColorInteractionContainerBrandedLowBorderActive : string;
22
+ export const ColorInteractionContainerBrandedLowBorderHover : string;
23
+ export const ColorInteractionContainerBrandedLowIcon : string;
24
+ export const ColorInteractionContainerBrandedLowIconActive : string;
25
+ export const ColorInteractionContainerBrandedLowIconHover : string;
26
+ export const ColorInteractionContainerBrandedLowText : string;
27
+ export const ColorInteractionContainerBrandedLowTextActive : string;
28
+ export const ColorInteractionContainerBrandedLowTextHover : string;
21
29
  export const ColorInteractionContainerNeutralBackground : string;
22
30
  export const ColorInteractionContainerNeutralBackgroundHover : string;
23
- export const ColorInteractionContainerNeutralText : string;
24
- export const ColorInteractionContainerNeutralTextHover : string;
25
- export const ColorInteractionContainerNeutralIcon : string;
26
- export const ColorInteractionContainerNeutralIconHover : string;
31
+ export const ColorInteractionContainerNeutralBackgroundActive : string;
27
32
  export const ColorInteractionContainerNeutralBorder : string;
28
33
  export const ColorInteractionContainerNeutralBorderHover : string;
34
+ export const ColorInteractionContainerNeutralIcon : string;
35
+ export const ColorInteractionContainerNeutralIconActive : string;
36
+ export const ColorInteractionContainerNeutralIconHover : string;
37
+ export const ColorInteractionContainerNeutralText : string;
38
+ export const ColorInteractionContainerNeutralTextActive : string;
39
+ export const ColorInteractionContainerNeutralTextHover : string;
29
40
  export const ColorInteractionLinkHighText : string;
30
41
  export const ColorInteractionLinkHighTextHover : string;
31
42
  export const ColorInteractionLinkHighIcon : string;
@@ -34,13 +45,25 @@ export const ColorInteractionLinkLowText : string;
34
45
  export const ColorInteractionLinkLowTextHover : string;
35
46
  export const ColorInteractionLinkLowIcon : string;
36
47
  export const ColorInteractionLinkLowIconHover : string;
48
+ export const ColorInteractionLinkInvertedText : string;
49
+ export const ColorInteractionLinkInvertedTextHover : string;
50
+ export const ColorInteractionLinkInvertedIcon : string;
51
+ export const ColorInteractionLinkInvertedIconHover : string;
37
52
  export const ColorBlack : string;
38
53
  export const ColorLevel10Background : string;
54
+ export const ColorLevel15Background : string;
39
55
  export const ColorLevel20Background : string;
40
56
  export const ColorLevel30Background : string;
41
57
  export const ColorLevel40Background : string;
42
58
  export const ColorLevel00Background : string;
43
59
  export const ColorLevel05Background : string;
60
+ export const ColorLevelInverted10Background : string;
61
+ export const ColorLevelInverted15Background : string;
62
+ export const ColorLevelInverted20Background : string;
63
+ export const ColorLevelInverted30Background : string;
64
+ export const ColorLevelInverted40Background : string;
65
+ export const ColorLevelInverted00Background : string;
66
+ export const ColorLevelInverted05Background : string;
44
67
  export const ColorContentHighBorder : string;
45
68
  export const ColorContentHighText : string;
46
69
  export const ColorContentHighIcon : string;
@@ -190,40 +213,56 @@ export const ShadowYAxisXl1 : string;
190
213
  export const ShadowYAxisXl2 : string;
191
214
  export const ShadowYAxis2xl : string;
192
215
  export const ComponentsWpfComponents2 : string;
193
- export const ComponentsButtonMediumBackground : string;
194
- export const ComponentsButtonMediumBackgroundHover : string;
195
- export const ComponentsButtonMediumText : string;
196
- export const ComponentsButtonMediumTextHover : string;
197
- export const ComponentsButtonMediumIcon : string;
198
- export const ComponentsButtonMediumIconHover : string;
199
- export const ComponentsButtonMediumBorder : string;
200
- export const ComponentsButtonMediumBorderHover : string;
201
216
  export const ComponentsButtonHighBorder : string;
202
217
  export const ComponentsButtonHighBorderHover : string;
218
+ export const ComponentsButtonHighBorderActive : string;
203
219
  export const ComponentsButtonHighBackground : string;
220
+ export const ComponentsButtonHighBackgroundActive : string;
204
221
  export const ComponentsButtonHighBackgroundHover : string;
205
222
  export const ComponentsButtonHighText : string;
223
+ export const ComponentsButtonHighTextActive : string;
206
224
  export const ComponentsButtonHighTextHover : string;
207
225
  export const ComponentsButtonHighIcon : string;
226
+ export const ComponentsButtonHighIconActive : string;
208
227
  export const ComponentsButtonHighIconHover : string;
228
+ export const ComponentsButtonMediumBackground : string;
229
+ export const ComponentsButtonMediumBackgroundActive : string;
230
+ export const ComponentsButtonMediumBackgroundHover : string;
231
+ export const ComponentsButtonMediumBorder : string;
232
+ export const ComponentsButtonMediumBorderActive : string;
233
+ export const ComponentsButtonMediumBorderHover : string;
234
+ export const ComponentsButtonMediumIcon : string;
235
+ export const ComponentsButtonMediumIconActive : string;
236
+ export const ComponentsButtonMediumIconHover : string;
237
+ export const ComponentsButtonMediumText : string;
238
+ export const ComponentsButtonMediumTextActive : string;
239
+ export const ComponentsButtonMediumTextHover : string;
209
240
  export const ComponentsButtonLowBackground : string;
210
241
  export const ComponentsButtonLowBorder : string;
242
+ export const ComponentsButtonLowBorderActive : string;
211
243
  export const ComponentsButtonLowBorderHover : string;
244
+ export const ComponentsButtonLowBackgroundActive : string;
212
245
  export const ComponentsButtonLowBackgroundHover : string;
213
- export const ComponentsButtonLowText : string;
214
- export const ComponentsButtonLowTextHover : string;
215
246
  export const ComponentsButtonLowIcon : string;
247
+ export const ComponentsButtonLowIconActive : string;
216
248
  export const ComponentsButtonLowIconHover : string;
249
+ export const ComponentsButtonLowText : string;
250
+ export const ComponentsButtonLowTextActive : string;
251
+ export const ComponentsButtonLowTextHover : string;
217
252
  export const ComponentsButtonLowerBorder : string;
253
+ export const ComponentsButtonLowerBorderActive : string;
218
254
  export const ComponentsButtonLowerBorderHover : string;
219
255
  export const ComponentsButtonLowerBorder2 : string;
220
256
  export const ComponentsButtonLowerBorderHover2 : string;
221
257
  export const ComponentsButtonLowerBackground : string;
258
+ export const ComponentsButtonLowerBackgroundActive : string;
222
259
  export const ComponentsButtonLowerBackgroundHover : string;
223
- export const ComponentsButtonLowerText : string;
224
- export const ComponentsButtonLowerTextHover : string;
225
260
  export const ComponentsButtonLowerIcon : string;
261
+ export const ComponentsButtonLowerIconActive : string;
226
262
  export const ComponentsButtonLowerIconHover : string;
263
+ export const ComponentsButtonLowerText : string;
264
+ export const ComponentsButtonLowerTextActive : string;
265
+ export const ComponentsButtonLowerTextHover : string;
227
266
  export const ComponentsButtonGrAsComplementaryBorder : string;
228
267
  export const ComponentsButtonGrAsComplementaryBorderHover : string;
229
268
  export const ComponentsButtonGrAsComplementaryBackground : string;
@@ -330,6 +369,8 @@ export const ComponentsButtonDestructiveLowerIcon : string;
330
369
  export const ComponentsButtonDestructiveLowerIconHover : string;
331
370
  export const ComponentsButtonDestructiveLowerBorder : string;
332
371
  export const ComponentsButtonDestructiveLowerBorderHover : string;
372
+ export const ComponentsOverlayOpacity : string;
373
+ export const ComponentsOverlayBackground : string;
333
374
  export const ComponentsAlertInformationBackground : string;
334
375
  export const ComponentsAlertInformationIcon : string;
335
376
  export const ComponentsAlertInformationBorder : string;
package/dist/js/ocean_light.js CHANGED
@@ -2,30 +2,41 @@
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
4
 
5
- export const ColorInteractionContainerBrandedLowBackground = "#ffffff";
6
- export const ColorInteractionContainerBrandedLowBackgroundHover = "#e4f0f2";
7
- export const ColorInteractionContainerBrandedLowText = "#1f717d";
8
- export const ColorInteractionContainerBrandedLowTextHover = "#185963";
9
- export const ColorInteractionContainerBrandedLowIcon = "#1f717d";
10
- export const ColorInteractionContainerBrandedLowIconHover = "#185963";
11
- export const ColorInteractionContainerBrandedLowBorder = "#1f717d";
12
- export const ColorInteractionContainerBrandedLowBorderHover = "#185963";
5
+ export const ColorInteractionContainerBrandedHighBorder = "#ffffff";
6
+ export const ColorInteractionContainerBrandedHighBorderActive = "#ffffff";
7
+ export const ColorInteractionContainerBrandedHighBorderHover = "#ffffff";
13
8
  export const ColorInteractionContainerBrandedHighBackground = "#1f717d";
9
+ export const ColorInteractionContainerBrandedHighBackgroundActive = "#185963";
14
10
  export const ColorInteractionContainerBrandedHighBackgroundHover = "#185963";
15
- export const ColorInteractionContainerBrandedHighText = "#ffffff";
16
- export const ColorInteractionContainerBrandedHighTextHover = "#ffffff";
17
11
  export const ColorInteractionContainerBrandedHighIcon = "#ffffff";
12
+ export const ColorInteractionContainerBrandedHighIconActive = "#ffffff";
18
13
  export const ColorInteractionContainerBrandedHighIconHover = "#ffffff";
19
- export const ColorInteractionContainerBrandedHighBorder = "#1f717d";
20
- export const ColorInteractionContainerBrandedHighBorderHover = "#185963";
14
+ export const ColorInteractionContainerBrandedHighText = "#ffffff";
15
+ export const ColorInteractionContainerBrandedHighTextActive = "#ffffff";
16
+ export const ColorInteractionContainerBrandedHighTextHover = "#ffffff";
17
+ export const ColorInteractionContainerBrandedLowBackground = "#ffffff";
18
+ export const ColorInteractionContainerBrandedLowBackgroundActive = "#e4f0f2";
19
+ export const ColorInteractionContainerBrandedLowBackgroundHover = "#e4f0f2";
20
+ export const ColorInteractionContainerBrandedLowBorder = "#1f717d";
21
+ export const ColorInteractionContainerBrandedLowBorderActive = "#185963";
22
+ export const ColorInteractionContainerBrandedLowBorderHover = "#185963";
23
+ export const ColorInteractionContainerBrandedLowIcon = "#1f717d";
24
+ export const ColorInteractionContainerBrandedLowIconActive = "#185963";
25
+ export const ColorInteractionContainerBrandedLowIconHover = "#185963";
26
+ export const ColorInteractionContainerBrandedLowText = "#1f717d";
27
+ export const ColorInteractionContainerBrandedLowTextActive = "#185963";
28
+ export const ColorInteractionContainerBrandedLowTextHover = "#185963";
21
29
  export const ColorInteractionContainerNeutralBackground = "#ffffff";
22
30
  export const ColorInteractionContainerNeutralBackgroundHover = "#a5a6a7";
23
- export const ColorInteractionContainerNeutralText = "#617177";
24
- export const ColorInteractionContainerNeutralTextHover = "#34464d";
25
- export const ColorInteractionContainerNeutralIcon = "#617177";
26
- export const ColorInteractionContainerNeutralIconHover = "#34464d";
31
+ export const ColorInteractionContainerNeutralBackgroundActive = "#e4f0f2";
27
32
  export const ColorInteractionContainerNeutralBorder = "#617177";
28
33
  export const ColorInteractionContainerNeutralBorderHover = "#34464d";
34
+ export const ColorInteractionContainerNeutralIcon = "#617177";
35
+ export const ColorInteractionContainerNeutralIconActive = "#185963";
36
+ export const ColorInteractionContainerNeutralIconHover = "#34464d";
37
+ export const ColorInteractionContainerNeutralText = "#617177";
38
+ export const ColorInteractionContainerNeutralTextActive = "#185963";
39
+ export const ColorInteractionContainerNeutralTextHover = "#34464d";
29
40
  export const ColorInteractionLinkHighText = "#1f717d";
30
41
  export const ColorInteractionLinkHighTextHover = "#185963";
31
42
  export const ColorInteractionLinkHighIcon = "#1f717d";
@@ -34,13 +45,25 @@ export const ColorInteractionLinkLowText = "#171f22";
34
45
  export const ColorInteractionLinkLowTextHover = "#1f717d";
35
46
  export const ColorInteractionLinkLowIcon = "#171f22";
36
47
  export const ColorInteractionLinkLowIconHover = "#1f717d";
48
+ export const ColorInteractionLinkInvertedText = "#889499";
49
+ export const ColorInteractionLinkInvertedTextHover = "#1f717d";
50
+ export const ColorInteractionLinkInvertedIcon = "#889499";
51
+ export const ColorInteractionLinkInvertedIconHover = "#1f717d";
37
52
  export const ColorBlack = "#000000";
38
53
  export const ColorLevel10Background = "#f5f6f7";
54
+ export const ColorLevel15Background = "#eaeef0";
39
55
  export const ColorLevel20Background = "#ffffff";
40
56
  export const ColorLevel30Background = "#f5f6f7";
41
57
  export const ColorLevel40Background = "#ffffff";
42
58
  export const ColorLevel00Background = "#ffffff";
43
59
  export const ColorLevel05Background = "#fafbfb";
60
+ export const ColorLevelInverted10Background = "#171f22";
61
+ export const ColorLevelInverted15Background = "#1e272b";
62
+ export const ColorLevelInverted20Background = "#222e33";
63
+ export const ColorLevelInverted30Background = "#2e3e44";
64
+ export const ColorLevelInverted40Background = "#394d55";
65
+ export const ColorLevelInverted00Background = "#0b0f11";
66
+ export const ColorLevelInverted05Background = "#11171a";
44
67
  export const ColorContentHighBorder = "#889499";
45
68
  export const ColorContentHighText = "#171f22";
46
69
  export const ColorContentHighIcon = "#171f22";
@@ -190,40 +213,56 @@ export const ShadowYAxisXl1 = "10px";
190
213
  export const ShadowYAxisXl2 = "20px";
191
214
  export const ShadowYAxis2xl = "25px";
192
215
  export const ComponentsWpfComponents2 = "#ffffff";
193
- export const ComponentsButtonMediumBackground = "#ffffff";
194
- export const ComponentsButtonMediumBackgroundHover = "#e4f0f2";
195
- export const ComponentsButtonMediumText = "#1f717d";
196
- export const ComponentsButtonMediumTextHover = "#185963";
197
- export const ComponentsButtonMediumIcon = "#1f717d";
198
- export const ComponentsButtonMediumIconHover = "#185963";
199
- export const ComponentsButtonMediumBorder = "#1f717d";
200
- export const ComponentsButtonMediumBorderHover = "#185963";
201
216
  export const ComponentsButtonHighBorder = "#ffffff";
202
217
  export const ComponentsButtonHighBorderHover = "#ffffff";
218
+ export const ComponentsButtonHighBorderActive = "#ffffff";
203
219
  export const ComponentsButtonHighBackground = "#1f717d";
220
+ export const ComponentsButtonHighBackgroundActive = "#185963";
204
221
  export const ComponentsButtonHighBackgroundHover = "#185963";
205
222
  export const ComponentsButtonHighText = "#ffffff";
223
+ export const ComponentsButtonHighTextActive = "#ffffff";
206
224
  export const ComponentsButtonHighTextHover = "#ffffff";
207
225
  export const ComponentsButtonHighIcon = "#ffffff";
226
+ export const ComponentsButtonHighIconActive = "#ffffff";
208
227
  export const ComponentsButtonHighIconHover = "#ffffff";
228
+ export const ComponentsButtonMediumBackground = "#ffffff";
229
+ export const ComponentsButtonMediumBackgroundActive = "#e4f0f2";
230
+ export const ComponentsButtonMediumBackgroundHover = "#e4f0f2";
231
+ export const ComponentsButtonMediumBorder = "#1f717d";
232
+ export const ComponentsButtonMediumBorderActive = "#185963";
233
+ export const ComponentsButtonMediumBorderHover = "#185963";
234
+ export const ComponentsButtonMediumIcon = "#1f717d";
235
+ export const ComponentsButtonMediumIconActive = "#185963";
236
+ export const ComponentsButtonMediumIconHover = "#185963";
237
+ export const ComponentsButtonMediumText = "#1f717d";
238
+ export const ComponentsButtonMediumTextActive = "#185963";
239
+ export const ComponentsButtonMediumTextHover = "#185963";
209
240
  export const ComponentsButtonLowBackground = "#ffffff";
210
241
  export const ComponentsButtonLowBorder = "#ffffff";
242
+ export const ComponentsButtonLowBorderActive = "#ffffff";
211
243
  export const ComponentsButtonLowBorderHover = "#ffffff";
244
+ export const ComponentsButtonLowBackgroundActive = "#e4f0f2";
212
245
  export const ComponentsButtonLowBackgroundHover = "#e4f0f2";
213
- export const ComponentsButtonLowText = "#1f717d";
214
- export const ComponentsButtonLowTextHover = "#185963";
215
246
  export const ComponentsButtonLowIcon = "#1f717d";
247
+ export const ComponentsButtonLowIconActive = "#185963";
216
248
  export const ComponentsButtonLowIconHover = "#185963";
249
+ export const ComponentsButtonLowText = "#1f717d";
250
+ export const ComponentsButtonLowTextActive = "#185963";
251
+ export const ComponentsButtonLowTextHover = "#185963";
217
252
  export const ComponentsButtonLowerBorder = "#ffffff";
253
+ export const ComponentsButtonLowerBorderActive = "#ffffff";
218
254
  export const ComponentsButtonLowerBorderHover = "#ffffff";
219
255
  export const ComponentsButtonLowerBorder2 = "#ffffff";
220
256
  export const ComponentsButtonLowerBorderHover2 = "#ffffff";
221
257
  export const ComponentsButtonLowerBackground = "#ffffff";
258
+ export const ComponentsButtonLowerBackgroundActive = "#e4f0f2";
222
259
  export const ComponentsButtonLowerBackgroundHover = "#a5a6a7";
223
- export const ComponentsButtonLowerText = "#617177";
224
- export const ComponentsButtonLowerTextHover = "#34464d";
225
260
  export const ComponentsButtonLowerIcon = "#617177";
261
+ export const ComponentsButtonLowerIconActive = "#185963";
226
262
  export const ComponentsButtonLowerIconHover = "#34464d";
263
+ export const ComponentsButtonLowerText = "#617177";
264
+ export const ComponentsButtonLowerTextActive = "#185963";
265
+ export const ComponentsButtonLowerTextHover = "#34464d";
227
266
  export const ComponentsButtonGrAsComplementaryBorder = "#ffffff";
228
267
  export const ComponentsButtonGrAsComplementaryBorderHover = "#ffffff";
229
268
  export const ComponentsButtonGrAsComplementaryBackground = "#bac1c4";
@@ -330,6 +369,8 @@ export const ComponentsButtonDestructiveLowerIcon = "#c6ced1";
330
369
  export const ComponentsButtonDestructiveLowerIconHover = "#c6ced1";
331
370
  export const ComponentsButtonDestructiveLowerBorder = "#c6ced1";
332
371
  export const ComponentsButtonDestructiveLowerBorderHover = "#c6ced1";
372
+ export const ComponentsOverlayOpacity = "55px";
373
+ export const ComponentsOverlayBackground = "#11171a";
333
374
  export const ComponentsAlertInformationBackground = "#f0f6ff";
334
375
  export const ComponentsAlertInformationIcon = "#2660c2";
335
376
  export const ComponentsAlertInformationBorder = "#2660c2";
package/dist/js/spacings.d.ts CHANGED
@@ -173,6 +173,18 @@ export const BadgeGapX : string;
173
173
  export const BadgePaddingX : string;
174
174
  export const BadgePaddingY : string;
175
175
  export const BadgeRadius : string;
176
+ export const DialogDismissiblePositionTop : string;
177
+ export const DialogDismissiblePositionRight : string;
178
+ export const DialogHeaderGapY : string;
179
+ export const DialogHeaderPaddingTop : string;
180
+ export const DialogHeaderPaddingBottom : string;
181
+ export const DialogHeaderPaddingX : string;
182
+ export const DialogBodyPaddingX : string;
183
+ export const DialogBodyPaddingY : string;
184
+ export const DialogFooterGapY : string;
185
+ export const DialogFooterPaddingTop : string;
186
+ export const DialogFooterPaddingBottom : string;
187
+ export const DialogFooterPaddingX : string;
176
188
  export const FocusFieldStroke : string;
177
189
  export const FocusOutlineOffset : string;
178
190
  export const FocusOutlineStroke : string;
package/dist/js/spacings.js CHANGED
@@ -173,6 +173,18 @@ export const BadgeGapX = "4px";
173
173
  export const BadgePaddingX = "8px";
174
174
  export const BadgePaddingY = "4px";
175
175
  export const BadgeRadius = "9999px";
176
+ export const DialogDismissiblePositionTop = "20px";
177
+ export const DialogDismissiblePositionRight = "12px";
178
+ export const DialogHeaderGapY = "0px";
179
+ export const DialogHeaderPaddingTop = "24px";
180
+ export const DialogHeaderPaddingBottom = "8px";
181
+ export const DialogHeaderPaddingX = "24px";
182
+ export const DialogBodyPaddingX = "24px";
183
+ export const DialogBodyPaddingY = "8px";
184
+ export const DialogFooterGapY = "12px";
185
+ export const DialogFooterPaddingTop = "8px";
186
+ export const DialogFooterPaddingBottom = "24px";
187
+ export const DialogFooterPaddingX = "24px";
176
188
  export const FocusFieldStroke = "1px";
177
189
  export const FocusOutlineOffset = "2px";
178
190
  export const FocusOutlineStroke = "2px";