@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/spark_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 = "#fceae3";
7
- export const ColorInteractionContainerBrandedLowText = "#e75420";
8
- export const ColorInteractionContainerBrandedLowTextHover = "#bf451a";
9
- export const ColorInteractionContainerBrandedLowIcon = "#e75420";
10
- export const ColorInteractionContainerBrandedLowIconHover = "#bf451a";
11
- export const ColorInteractionContainerBrandedLowBorder = "#e75420";
12
- export const ColorInteractionContainerBrandedLowBorderHover = "#bf451a";
5
+ export const ColorInteractionContainerBrandedHighBorder = "#ffffff";
6
+ export const ColorInteractionContainerBrandedHighBorderActive = "#ffffff";
7
+ export const ColorInteractionContainerBrandedHighBorderHover = "#ffffff";
13
8
  export const ColorInteractionContainerBrandedHighBackground = "#e75420";
9
+ export const ColorInteractionContainerBrandedHighBackgroundActive = "#bf451a";
14
10
  export const ColorInteractionContainerBrandedHighBackgroundHover = "#bf451a";
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 = "#e75420";
20
- export const ColorInteractionContainerBrandedHighBorderHover = "#bf451a";
14
+ export const ColorInteractionContainerBrandedHighText = "#ffffff";
15
+ export const ColorInteractionContainerBrandedHighTextActive = "#ffffff";
16
+ export const ColorInteractionContainerBrandedHighTextHover = "#ffffff";
17
+ export const ColorInteractionContainerBrandedLowBackground = "#ffffff";
18
+ export const ColorInteractionContainerBrandedLowBackgroundActive = "#fceae3";
19
+ export const ColorInteractionContainerBrandedLowBackgroundHover = "#fceae3";
20
+ export const ColorInteractionContainerBrandedLowBorder = "#e75420";
21
+ export const ColorInteractionContainerBrandedLowBorderActive = "#bf451a";
22
+ export const ColorInteractionContainerBrandedLowBorderHover = "#bf451a";
23
+ export const ColorInteractionContainerBrandedLowIcon = "#e75420";
24
+ export const ColorInteractionContainerBrandedLowIconActive = "#bf451a";
25
+ export const ColorInteractionContainerBrandedLowIconHover = "#bf451a";
26
+ export const ColorInteractionContainerBrandedLowText = "#e75420";
27
+ export const ColorInteractionContainerBrandedLowTextActive = "#bf451a";
28
+ export const ColorInteractionContainerBrandedLowTextHover = "#bf451a";
21
29
  export const ColorInteractionContainerNeutralBackground = "#ffffff";
22
30
  export const ColorInteractionContainerNeutralBackgroundHover = "#a5a5a5";
23
- export const ColorInteractionContainerNeutralText = "#6d6d6d";
24
- export const ColorInteractionContainerNeutralTextHover = "#414141";
25
- export const ColorInteractionContainerNeutralIcon = "#6d6d6d";
26
- export const ColorInteractionContainerNeutralIconHover = "#414141";
31
+ export const ColorInteractionContainerNeutralBackgroundActive = "#fceae3";
27
32
  export const ColorInteractionContainerNeutralBorder = "#6d6d6d";
28
33
  export const ColorInteractionContainerNeutralBorderHover = "#414141";
34
+ export const ColorInteractionContainerNeutralIcon = "#6d6d6d";
35
+ export const ColorInteractionContainerNeutralIconActive = "#bf451a";
36
+ export const ColorInteractionContainerNeutralIconHover = "#414141";
37
+ export const ColorInteractionContainerNeutralText = "#6d6d6d";
38
+ export const ColorInteractionContainerNeutralTextActive = "#bf451a";
39
+ export const ColorInteractionContainerNeutralTextHover = "#414141";
29
40
  export const ColorInteractionLinkHighText = "#e75420";
30
41
  export const ColorInteractionLinkHighTextHover = "#bf451a";
31
42
  export const ColorInteractionLinkHighIcon = "#e75420";
@@ -34,13 +45,25 @@ export const ColorInteractionLinkLowText = "#1d1d1d";
34
45
  export const ColorInteractionLinkLowTextHover = "#e75420";
35
46
  export const ColorInteractionLinkLowIcon = "#1d1d1d";
36
47
  export const ColorInteractionLinkLowIconHover = "#e75420";
48
+ export const ColorInteractionLinkInvertedText = "#919191";
49
+ export const ColorInteractionLinkInvertedTextHover = "#e75420";
50
+ export const ColorInteractionLinkInvertedIcon = "#919191";
51
+ export const ColorInteractionLinkInvertedIconHover = "#e75420";
37
52
  export const ColorBlack = "#000000";
38
53
  export const ColorLevel10Background = "#f6f6f6";
54
+ export const ColorLevel15Background = "#ededed";
39
55
  export const ColorLevel20Background = "#ffffff";
40
56
  export const ColorLevel30Background = "#f6f6f6";
41
57
  export const ColorLevel40Background = "#ffffff";
42
58
  export const ColorLevel00Background = "#ffffff";
43
59
  export const ColorLevel05Background = "#fbfbfb";
60
+ export const ColorLevelInverted10Background = "#1d1d1d";
61
+ export const ColorLevelInverted15Background = "#252525";
62
+ export const ColorLevelInverted20Background = "#2b2b2b";
63
+ export const ColorLevelInverted30Background = "#3a3a3a";
64
+ export const ColorLevelInverted40Background = "#484848";
65
+ export const ColorLevelInverted00Background = "#0e0e0e";
66
+ export const ColorLevelInverted05Background = "#161616";
44
67
  export const ColorContentHighBorder = "#919191";
45
68
  export const ColorContentHighText = "#1d1d1d";
46
69
  export const ColorContentHighIcon = "#1d1d1d";
@@ -191,31 +214,43 @@ export const ShadowYAxisXl2 = "20px";
191
214
  export const ShadowYAxis2xl = "25px";
192
215
  export const ComponentsWpfComponents2 = "#ffffff";
193
216
  export const ComponentsButtonHighBorder = "#ffffff";
194
- export const ComponentsButtonHighBorderHover = "#ffffff";
195
217
  export const ComponentsButtonHighBackground = "#e75420";
218
+ export const ComponentsButtonHighBackgroundActive = "#bf451a";
196
219
  export const ComponentsButtonHighBackgroundHover = "#bf451a";
220
+ export const ComponentsButtonHighBorderHover = "#ffffff";
221
+ export const ComponentsButtonHighBorderActive = "#ffffff";
197
222
  export const ComponentsButtonHighText = "#ffffff";
223
+ export const ComponentsButtonHighTextActive = "#ffffff";
198
224
  export const ComponentsButtonHighTextHover = "#ffffff";
199
225
  export const ComponentsButtonHighIcon = "#ffffff";
226
+ export const ComponentsButtonHighIconActive = "#ffffff";
200
227
  export const ComponentsButtonHighIconHover = "#ffffff";
201
228
  export const ComponentsButtonLowBackground = "#ffffff";
202
229
  export const ComponentsButtonLowBorder = "#ffffff";
230
+ export const ComponentsButtonLowBorderActive = "#ffffff";
203
231
  export const ComponentsButtonLowBorderHover = "#ffffff";
232
+ export const ComponentsButtonLowBackgroundActive = "#fceae3";
204
233
  export const ComponentsButtonLowBackgroundHover = "#fceae3";
205
- export const ComponentsButtonLowText = "#e75420";
206
- export const ComponentsButtonLowTextHover = "#bf451a";
207
234
  export const ComponentsButtonLowIcon = "#e75420";
235
+ export const ComponentsButtonLowIconActive = "#bf451a";
208
236
  export const ComponentsButtonLowIconHover = "#bf451a";
209
- export const ComponentsButtonLowerBackground = "#ffffff";
237
+ export const ComponentsButtonLowText = "#e75420";
238
+ export const ComponentsButtonLowTextActive = "#bf451a";
239
+ export const ComponentsButtonLowTextHover = "#bf451a";
210
240
  export const ComponentsButtonLowerBorder = "#ffffff";
241
+ export const ComponentsButtonLowerBorderActive = "#ffffff";
211
242
  export const ComponentsButtonLowerBorderHover = "#ffffff";
212
243
  export const ComponentsButtonLowerBorder2 = "#ffffff";
213
244
  export const ComponentsButtonLowerBorderHover2 = "#ffffff";
245
+ export const ComponentsButtonLowerBackground = "#ffffff";
246
+ export const ComponentsButtonLowerBackgroundActive = "#fceae3";
214
247
  export const ComponentsButtonLowerBackgroundHover = "#a5a5a5";
215
- export const ComponentsButtonLowerText = "#414141";
216
- export const ComponentsButtonLowerTextHover = "#1d1d1d";
217
- export const ComponentsButtonLowerIcon = "#414141";
218
- export const ComponentsButtonLowerIconHover = "#1d1d1d";
248
+ export const ComponentsButtonLowerIcon = "#6d6d6d";
249
+ export const ComponentsButtonLowerIconActive = "#bf451a";
250
+ export const ComponentsButtonLowerIconHover = "#414141";
251
+ export const ComponentsButtonLowerText = "#6d6d6d";
252
+ export const ComponentsButtonLowerTextActive = "#bf451a";
253
+ export const ComponentsButtonLowerTextHover = "#414141";
219
254
  export const ComponentsButtonGrAsComplementaryBorder = "#ffffff";
220
255
  export const ComponentsButtonGrAsComplementaryBorderHover = "#ffffff";
221
256
  export const ComponentsButtonGrAsComplementaryBackground = "#bfbfbf";
@@ -225,13 +260,17 @@ export const ComponentsButtonGrAsComplementaryTextHover = "#000000";
225
260
  export const ComponentsButtonGrAsComplementaryIcon = "#000000";
226
261
  export const ComponentsButtonGrAsComplementaryIconHover = "#000000";
227
262
  export const ComponentsButtonMediumBackground = "#ffffff";
263
+ export const ComponentsButtonMediumBackgroundActive = "#fceae3";
228
264
  export const ComponentsButtonMediumBackgroundHover = "#fceae3";
229
- export const ComponentsButtonMediumText = "#e75420";
230
- export const ComponentsButtonMediumTextHover = "#bf451a";
231
- export const ComponentsButtonMediumIcon = "#e75420";
232
- export const ComponentsButtonMediumIconHover = "#bf451a";
233
265
  export const ComponentsButtonMediumBorder = "#e75420";
266
+ export const ComponentsButtonMediumBorderActive = "#bf451a";
234
267
  export const ComponentsButtonMediumBorderHover = "#bf451a";
268
+ export const ComponentsButtonMediumIcon = "#e75420";
269
+ export const ComponentsButtonMediumIconActive = "#bf451a";
270
+ export const ComponentsButtonMediumIconHover = "#bf451a";
271
+ export const ComponentsButtonMediumText = "#e75420";
272
+ export const ComponentsButtonMediumTextActive = "#bf451a";
273
+ export const ComponentsButtonMediumTextHover = "#bf451a";
235
274
  export const ComponentsFormOpacityDefault = "100px";
236
275
  export const ComponentsFormOpacityDisabled = "50px";
237
276
  export const ComponentsFormTextRequired = "#da2424";
@@ -330,6 +369,8 @@ export const ComponentsButtonDestructiveLowerIcon = "#e3e3e3";
330
369
  export const ComponentsButtonDestructiveLowerIconHover = "#e3e3e3";
331
370
  export const ComponentsButtonDestructiveLowerBorder = "#e3e3e3";
332
371
  export const ComponentsButtonDestructiveLowerBorderHover = "#e3e3e3";
372
+ export const ComponentsOverlayOpacity = "55px";
373
+ export const ComponentsOverlayBackground = "#161616";
333
374
  export const ComponentsAlertInformationBackground = "#f0f6ff";
334
375
  export const ComponentsAlertInformationIcon = "#2660c2";
335
376
  export const ComponentsAlertInformationBorder = "#2660c2";
package/dist/lib/cjs/generated/nova-tailwind-tokens.js CHANGED
@@ -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/lib/generated/nova-tailwind-tokens.d.ts CHANGED
@@ -180,54 +180,81 @@ export declare const NOVA_TAILWIND_TOKENS: {
180
180
  '.bg-interaction-container-branded-high': {
181
181
  'background-color': string;
182
182
  };
183
+ '.bg-interaction-container-branded-high-active': {
184
+ 'background-color': string;
185
+ };
183
186
  '.bg-interaction-container-branded-high-hover': {
184
187
  'background-color': string;
185
188
  };
186
189
  '.border-interaction-container-branded-high': {
187
190
  'border-color': string;
188
191
  };
192
+ '.border-interaction-container-branded-high-active': {
193
+ 'border-color': string;
194
+ };
189
195
  '.border-interaction-container-branded-high-hover': {
190
196
  'border-color': string;
191
197
  };
192
198
  '.icon-interaction-container-branded-high': {
193
199
  color: string;
194
200
  };
201
+ '.icon-interaction-container-branded-high-active': {
202
+ color: string;
203
+ };
195
204
  '.icon-interaction-container-branded-high-hover': {
196
205
  color: string;
197
206
  };
198
207
  '.text-interaction-container-branded-high': {
199
208
  color: string;
200
209
  };
210
+ '.text-interaction-container-branded-high-active': {
211
+ color: string;
212
+ };
201
213
  '.text-interaction-container-branded-high-hover': {
202
214
  color: string;
203
215
  };
204
216
  '.bg-interaction-container-branded-low': {
205
217
  'background-color': string;
206
218
  };
219
+ '.bg-interaction-container-branded-low-active': {
220
+ 'background-color': string;
221
+ };
207
222
  '.bg-interaction-container-branded-low-hover': {
208
223
  'background-color': string;
209
224
  };
210
225
  '.border-interaction-container-branded-low': {
211
226
  'border-color': string;
212
227
  };
228
+ '.border-interaction-container-branded-low-active': {
229
+ 'border-color': string;
230
+ };
213
231
  '.border-interaction-container-branded-low-hover': {
214
232
  'border-color': string;
215
233
  };
216
234
  '.icon-interaction-container-branded-low': {
217
235
  color: string;
218
236
  };
237
+ '.icon-interaction-container-branded-low-active': {
238
+ color: string;
239
+ };
219
240
  '.icon-interaction-container-branded-low-hover': {
220
241
  color: string;
221
242
  };
222
243
  '.text-interaction-container-branded-low': {
223
244
  color: string;
224
245
  };
246
+ '.text-interaction-container-branded-low-active': {
247
+ color: string;
248
+ };
225
249
  '.text-interaction-container-branded-low-hover': {
226
250
  color: string;
227
251
  };
228
252
  '.bg-interaction-container-neutral': {
229
253
  'background-color': string;
230
254
  };
255
+ '.bg-interaction-container-neutral-active': {
256
+ 'background-color': string;
257
+ };
231
258
  '.bg-interaction-container-neutral-hover': {
232
259
  'background-color': string;
233
260
  };
@@ -240,12 +267,18 @@ export declare const NOVA_TAILWIND_TOKENS: {
240
267
  '.icon-interaction-container-neutral': {
241
268
  color: string;
242
269
  };
270
+ '.icon-interaction-container-neutral-active': {
271
+ color: string;
272
+ };
243
273
  '.icon-interaction-container-neutral-hover': {
244
274
  color: string;
245
275
  };
246
276
  '.text-interaction-container-neutral': {
247
277
  color: string;
248
278
  };
279
+ '.text-interaction-container-neutral-active': {
280
+ color: string;
281
+ };
249
282
  '.text-interaction-container-neutral-hover': {
250
283
  color: string;
251
284
  };
@@ -261,6 +294,18 @@ export declare const NOVA_TAILWIND_TOKENS: {
261
294
  '.text-interaction-link-high-hover': {
262
295
  color: string;
263
296
  };
297
+ '.icon-interaction-link-inverted': {
298
+ color: string;
299
+ };
300
+ '.icon-interaction-link-inverted-hover': {
301
+ color: string;
302
+ };
303
+ '.text-interaction-link-inverted': {
304
+ color: string;
305
+ };
306
+ '.text-interaction-link-inverted-hover': {
307
+ color: string;
308
+ };
264
309
  '.icon-interaction-link-low': {
265
310
  color: string;
266
311
  };
@@ -282,6 +327,9 @@ export declare const NOVA_TAILWIND_TOKENS: {
282
327
  '.bg-level-10': {
283
328
  'background-color': string;
284
329
  };
330
+ '.bg-level-15': {
331
+ 'background-color': string;
332
+ };
285
333
  '.bg-level-20': {
286
334
  'background-color': string;
287
335
  };
@@ -291,6 +339,27 @@ export declare const NOVA_TAILWIND_TOKENS: {
291
339
  '.bg-level-40': {
292
340
  'background-color': string;
293
341
  };
342
+ '.bg-level-inverted-00': {
343
+ 'background-color': string;
344
+ };
345
+ '.bg-level-inverted-05': {
346
+ 'background-color': string;
347
+ };
348
+ '.bg-level-inverted-10': {
349
+ 'background-color': string;
350
+ };
351
+ '.bg-level-inverted-15': {
352
+ 'background-color': string;
353
+ };
354
+ '.bg-level-inverted-20': {
355
+ 'background-color': string;
356
+ };
357
+ '.bg-level-inverted-30': {
358
+ 'background-color': string;
359
+ };
360
+ '.bg-level-inverted-40': {
361
+ 'background-color': string;
362
+ };
294
363
  '.bg-rainbow-1': {
295
364
  'background-color': string;
296
365
  };
package/dist/lib/generated/nova-tailwind-tokens.js CHANGED
@@ -181,54 +181,81 @@ export const NOVA_TAILWIND_TOKENS = {
181
181
  '.bg-interaction-container-branded-high': {
182
182
  'background-color': 'var(--color-interaction-container-branded-high-background)'
183
183
  },
184
+ '.bg-interaction-container-branded-high-active': {
185
+ 'background-color': 'var(--color-interaction-container-branded-high-background-active)'
186
+ },
184
187
  '.bg-interaction-container-branded-high-hover': {
185
188
  'background-color': 'var(--color-interaction-container-branded-high-background-hover)'
186
189
  },
187
190
  '.border-interaction-container-branded-high': {
188
191
  'border-color': 'var(--color-interaction-container-branded-high-border)'
189
192
  },
193
+ '.border-interaction-container-branded-high-active': {
194
+ 'border-color': 'var(--color-interaction-container-branded-high-border-active)'
195
+ },
190
196
  '.border-interaction-container-branded-high-hover': {
191
197
  'border-color': 'var(--color-interaction-container-branded-high-border-hover)'
192
198
  },
193
199
  '.icon-interaction-container-branded-high': {
194
200
  'color': 'var(--color-interaction-container-branded-high-icon)'
195
201
  },
202
+ '.icon-interaction-container-branded-high-active': {
203
+ 'color': 'var(--color-interaction-container-branded-high-icon-active)'
204
+ },
196
205
  '.icon-interaction-container-branded-high-hover': {
197
206
  'color': 'var(--color-interaction-container-branded-high-icon-hover)'
198
207
  },
199
208
  '.text-interaction-container-branded-high': {
200
209
  'color': 'var(--color-interaction-container-branded-high-text)'
201
210
  },
211
+ '.text-interaction-container-branded-high-active': {
212
+ 'color': 'var(--color-interaction-container-branded-high-text-active)'
213
+ },
202
214
  '.text-interaction-container-branded-high-hover': {
203
215
  'color': 'var(--color-interaction-container-branded-high-text-hover)'
204
216
  },
205
217
  '.bg-interaction-container-branded-low': {
206
218
  'background-color': 'var(--color-interaction-container-branded-low-background)'
207
219
  },
220
+ '.bg-interaction-container-branded-low-active': {
221
+ 'background-color': 'var(--color-interaction-container-branded-low-background-active)'
222
+ },
208
223
  '.bg-interaction-container-branded-low-hover': {
209
224
  'background-color': 'var(--color-interaction-container-branded-low-background-hover)'
210
225
  },
211
226
  '.border-interaction-container-branded-low': {
212
227
  'border-color': 'var(--color-interaction-container-branded-low-border)'
213
228
  },
229
+ '.border-interaction-container-branded-low-active': {
230
+ 'border-color': 'var(--color-interaction-container-branded-low-border-active)'
231
+ },
214
232
  '.border-interaction-container-branded-low-hover': {
215
233
  'border-color': 'var(--color-interaction-container-branded-low-border-hover)'
216
234
  },
217
235
  '.icon-interaction-container-branded-low': {
218
236
  'color': 'var(--color-interaction-container-branded-low-icon)'
219
237
  },
238
+ '.icon-interaction-container-branded-low-active': {
239
+ 'color': 'var(--color-interaction-container-branded-low-icon-active)'
240
+ },
220
241
  '.icon-interaction-container-branded-low-hover': {
221
242
  'color': 'var(--color-interaction-container-branded-low-icon-hover)'
222
243
  },
223
244
  '.text-interaction-container-branded-low': {
224
245
  'color': 'var(--color-interaction-container-branded-low-text)'
225
246
  },
247
+ '.text-interaction-container-branded-low-active': {
248
+ 'color': 'var(--color-interaction-container-branded-low-text-active)'
249
+ },
226
250
  '.text-interaction-container-branded-low-hover': {
227
251
  'color': 'var(--color-interaction-container-branded-low-text-hover)'
228
252
  },
229
253
  '.bg-interaction-container-neutral': {
230
254
  'background-color': 'var(--color-interaction-container-neutral-background)'
231
255
  },
256
+ '.bg-interaction-container-neutral-active': {
257
+ 'background-color': 'var(--color-interaction-container-neutral-background-active)'
258
+ },
232
259
  '.bg-interaction-container-neutral-hover': {
233
260
  'background-color': 'var(--color-interaction-container-neutral-background-hover)'
234
261
  },
@@ -241,12 +268,18 @@ export const NOVA_TAILWIND_TOKENS = {
241
268
  '.icon-interaction-container-neutral': {
242
269
  'color': 'var(--color-interaction-container-neutral-icon)'
243
270
  },
271
+ '.icon-interaction-container-neutral-active': {
272
+ 'color': 'var(--color-interaction-container-neutral-icon-active)'
273
+ },
244
274
  '.icon-interaction-container-neutral-hover': {
245
275
  'color': 'var(--color-interaction-container-neutral-icon-hover)'
246
276
  },
247
277
  '.text-interaction-container-neutral': {
248
278
  'color': 'var(--color-interaction-container-neutral-text)'
249
279
  },
280
+ '.text-interaction-container-neutral-active': {
281
+ 'color': 'var(--color-interaction-container-neutral-text-active)'
282
+ },
250
283
  '.text-interaction-container-neutral-hover': {
251
284
  'color': 'var(--color-interaction-container-neutral-text-hover)'
252
285
  },
@@ -262,6 +295,18 @@ export const NOVA_TAILWIND_TOKENS = {
262
295
  '.text-interaction-link-high-hover': {
263
296
  'color': 'var(--color-interaction-link-high-text-hover)'
264
297
  },
298
+ '.icon-interaction-link-inverted': {
299
+ 'color': 'var(--color-interaction-link-inverted-icon)'
300
+ },
301
+ '.icon-interaction-link-inverted-hover': {
302
+ 'color': 'var(--color-interaction-link-inverted-icon-hover)'
303
+ },
304
+ '.text-interaction-link-inverted': {
305
+ 'color': 'var(--color-interaction-link-inverted-text)'
306
+ },
307
+ '.text-interaction-link-inverted-hover': {
308
+ 'color': 'var(--color-interaction-link-inverted-text-hover)'
309
+ },
265
310
  '.icon-interaction-link-low': {
266
311
  'color': 'var(--color-interaction-link-low-icon)'
267
312
  },
@@ -283,6 +328,9 @@ export const NOVA_TAILWIND_TOKENS = {
283
328
  '.bg-level-10': {
284
329
  'background-color': 'var(--color-level-10-background)'
285
330
  },
331
+ '.bg-level-15': {
332
+ 'background-color': 'var(--color-level-15-background)'
333
+ },
286
334
  '.bg-level-20': {
287
335
  'background-color': 'var(--color-level-20-background)'
288
336
  },
@@ -292,6 +340,27 @@ export const NOVA_TAILWIND_TOKENS = {
292
340
  '.bg-level-40': {
293
341
  'background-color': 'var(--color-level-40-background)'
294
342
  },
343
+ '.bg-level-inverted-00': {
344
+ 'background-color': 'var(--color-level-inverted-00-background)'
345
+ },
346
+ '.bg-level-inverted-05': {
347
+ 'background-color': 'var(--color-level-inverted-05-background)'
348
+ },
349
+ '.bg-level-inverted-10': {
350
+ 'background-color': 'var(--color-level-inverted-10-background)'
351
+ },
352
+ '.bg-level-inverted-15': {
353
+ 'background-color': 'var(--color-level-inverted-15-background)'
354
+ },
355
+ '.bg-level-inverted-20': {
356
+ 'background-color': 'var(--color-level-inverted-20-background)'
357
+ },
358
+ '.bg-level-inverted-30': {
359
+ 'background-color': 'var(--color-level-inverted-30-background)'
360
+ },
361
+ '.bg-level-inverted-40': {
362
+ 'background-color': 'var(--color-level-inverted-40-background)'
363
+ },
295
364
  '.bg-rainbow-1': {
296
365
  'background-color': 'var(--color-rainbow-1-background)'
297
366
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nova-design-system/nova-base",
3
- "version": "3.0.0-beta.33",
3
+ "version": "3.0.0-beta.35",
4
4
  "description": "Nova is a design system created by Elia Group to empower creators to efficiently build solutions that people love to use.",
5
5
  "author": "Elia Group",
6
6
  "homepage": "https://nova.eliagroup.io",