@nova-design-system/nova-base 3.0.0-beta.30 → 3.0.0-beta.31

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 (27) hide show
  1. package/dist/css/mccs.css +180187 -0
  2. package/dist/css/nova-utils.css +867 -59
  3. package/dist/css/ocean.css +180278 -0
  4. package/dist/css/spark.css +180278 -0
  5. package/dist/js/ocean_dark.d.ts +119 -124
  6. package/dist/js/ocean_dark.js +152 -157
  7. package/dist/js/ocean_light.d.ts +119 -124
  8. package/dist/js/ocean_light.js +143 -148
  9. package/dist/js/primitives.d.ts +0 -6
  10. package/dist/js/primitives.js +0 -6
  11. package/dist/js/spacings.d.ts +2 -0
  12. package/dist/js/spacings.js +3 -1
  13. package/dist/js/spark_dark.d.ts +108 -113
  14. package/dist/js/spark_dark.js +120 -125
  15. package/dist/js/spark_light.d.ts +108 -113
  16. package/dist/js/spark_light.js +108 -113
  17. package/dist/lib/cjs/nova-plugin.js +30 -74
  18. package/dist/lib/cjs/nova-safelist.js +8 -3
  19. package/dist/lib/cjs/nova-tailwind-tokens.js +123 -0
  20. package/dist/lib/cjs/nova-theme.js +14 -2
  21. package/dist/lib/nova-plugin.js +12 -58
  22. package/dist/lib/nova-safelist.d.ts +2 -2
  23. package/dist/lib/nova-safelist.js +9 -2
  24. package/dist/lib/nova-tailwind-tokens.d.ts +123 -0
  25. package/dist/lib/nova-tailwind-tokens.js +123 -0
  26. package/dist/lib/nova-theme.js +14 -2
  27. package/package.json +1 -1
package/dist/lib/cjs/nova-plugin.js CHANGED
@@ -2,12 +2,24 @@
2
2
  /**
3
3
  * @fileoverview This file contains various tailwind utilities for nova
4
4
  */
5
+ var __assign = (this && this.__assign) || function () {
6
+ __assign = Object.assign || function(t) {
7
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
8
+ s = arguments[i];
9
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
10
+ t[p] = s[p];
11
+ }
12
+ return t;
13
+ };
14
+ return __assign.apply(this, arguments);
15
+ };
5
16
  var __importDefault = (this && this.__importDefault) || function (mod) {
6
17
  return (mod && mod.__esModule) ? mod : { "default": mod };
7
18
  };
8
19
  Object.defineProperty(exports, "__esModule", { value: true });
9
20
  exports.novaTailwindPlugin = void 0;
10
21
  var plugin_js_1 = __importDefault(require("tailwindcss/plugin.js"));
22
+ var nova_tailwind_tokens_js_1 = require("./nova-tailwind-tokens.js");
11
23
  exports.novaTailwindPlugin = (0, plugin_js_1.default)(function (_a) {
12
24
  var addUtilities = _a.addUtilities, addComponents = _a.addComponents, addBase = _a.addBase, theme = _a.theme;
13
25
  addBase({
@@ -27,62 +39,61 @@ exports.novaTailwindPlugin = (0, plugin_js_1.default)(function (_a) {
27
39
  'border-radius': 'var(--radius-rounded)',
28
40
  },
29
41
  a: {
30
- color: 'var(--color-interaction-link-inline-text)',
42
+ color: 'var(--color-interaction-link-high-text)',
31
43
  'text-decoration': 'underline',
32
44
  fontWeight: '700',
33
45
  },
34
46
  'a:hover': {
35
- color: 'var(--color-interaction-link-inline-text-hover)',
47
+ color: 'var(--color-interaction-link-high-text-hover)',
36
48
  },
37
49
  h1: {
38
50
  fontSize: 'var(--global-typography-h1-font-size)',
39
51
  lineHeight: 'var(--global-typography-h1-line-height)',
40
52
  fontWeight: 'var(--global-typography-h1-font-weight)',
41
- color: 'var(--color-base-content-high-emphasis)',
53
+ color: 'var(--color-content-high-text)',
42
54
  },
43
55
  h2: {
44
56
  fontSize: 'var(--global-typography-h2-font-size)',
45
57
  lineHeight: 'var(--global-typography-h2-line-height)',
46
58
  fontWeight: 'var(--global-typography-h2-font-weight)',
47
- color: 'var(--color-base-content-high-emphasis)',
59
+ color: 'var(--color-content-high-text)',
48
60
  },
49
61
  h3: {
50
62
  fontSize: 'var(--global-typography-h3-font-size)',
51
63
  lineHeight: 'var(--global-typography-h3-line-height)',
52
64
  fontWeight: 'var(--global-typography-h3-font-weight)',
53
- color: 'var(--color-base-content-high-emphasis)',
65
+ color: 'var(--color-content-high-text)',
54
66
  },
55
67
  h4: {
56
68
  fontSize: 'var(--global-typography-h4-font-size)',
57
69
  lineHeight: 'var(--global-typography-h4-line-height)',
58
70
  fontWeight: 'var(--global-typography-h4-font-weight)',
59
- color: 'var(--color-base-content-high-emphasis)',
71
+ color: 'var(--color-content-high-text)',
60
72
  },
61
73
  h5: {
62
74
  fontSize: 'var(--global-typography-h4-font-size)',
63
75
  lineHeight: 'var(--global-typography-h4-line-height)',
64
76
  fontWeight: 'var(--font-weight-medium-emphasis)',
65
- color: 'var(--color-base-content-medium-emphasis)',
77
+ color: 'var(--color-content-medium-text)',
66
78
  },
67
79
  h6: {
68
80
  fontSize: 'var(--global-typography-h4-font-size)',
69
81
  lineHeight: 'var(--global-typography-h4-line-height)',
70
82
  fontWeight: 'var(--font-weight-low-emphasis)',
71
- color: 'var(--color-base-content-low-emphasis)',
83
+ color: 'var(--color-content-low-text)',
72
84
  },
73
85
  });
74
86
  addComponents({
75
87
  '.link': {
76
- color: 'var(--color-interaction-link-standalone-text)',
88
+ color: 'var(--color-interaction-link-high-text)',
77
89
  fontWeight: '500',
78
90
  'text-decoration': 'none',
79
91
  },
80
92
  '.link:hover': {
81
- color: 'var(--color-interaction-link-standalone-text-hover)',
93
+ color: 'var(--color-interaction-link-high-text-hover)',
82
94
  },
83
95
  });
84
- addUtilities({
85
- '.visually-hidden': {
96
+ addUtilities(__assign(__assign({}, nova_tailwind_tokens_js_1.NOVA_TAILWIND_TOKENS), { '.visually-hidden': {
86
97
  position: 'absolute',
87
98
  padding: '0',
88
99
  border: '0',
@@ -92,72 +103,17 @@ exports.novaTailwindPlugin = (0, plugin_js_1.default)(function (_a) {
92
103
  height: '1px',
93
104
  margin: '-1px',
94
105
  clip: 'rect(0, 0, 0, 0)',
95
- },
96
- '.text-high-emphasis': {
97
- color: 'var(--color-base-content-high-emphasis)',
98
- },
99
- '.text-medium-emphasis': {
100
- color: 'var(--color-base-content-medium-emphasis)',
101
- },
102
- '.text-low-emphasis': {
103
- color: 'var(--color-base-content-low-emphasis)',
104
- },
105
- '.bg-level-00': {
106
- 'background-color': 'var(--color-base-level-00)',
107
- },
108
- '.bg-level-00-hover': {
109
- 'background-color': 'var(--color-base-level-00-hover)',
110
- },
111
- '.bg-level-10': {
112
- 'background-color': 'var(--color-base-level-10)',
113
- },
114
- '.bg-level-10-hover': {
115
- 'background-color': 'var(--color-base-level-10-hover)',
116
- },
117
- '.bg-level-20': {
118
- 'background-color': 'var(--color-base-level-20)',
119
- },
120
- '.bg-level-20-hover': {
121
- 'background-color': 'var(--color-base-level-20-hover)',
122
- },
123
- '.bg-level-30': {
124
- 'background-color': 'var(--color-base-level-30)',
125
- },
126
- '.bg-level-30-hover': {
127
- 'background-color': 'var(--color-base-level-30-hover)',
128
- },
129
- '.bg-level-40': {
130
- 'background-color': 'var(--color-base-level-40)',
131
- },
132
- '.bg-level-40-hover': {
133
- 'background-color': 'var(--color-base-level-40-hover)',
134
- },
135
- '.border-high-emphasis': {
136
- 'border-color': 'var(--color-base-border-high-emphasis)',
137
- },
138
- '.border-medium-emphasis': {
139
- 'border-color': 'var(--color-base-border-medium-emphasis)',
140
- },
141
- '.border-low-emphasis': {
142
- 'border-color': 'var(--color-base-border-low-emphasis)',
143
- },
144
- '.w-inherit': {
106
+ }, '.w-inherit': {
145
107
  width: 'inherit',
146
- },
147
- '.w-initial': {
108
+ }, '.w-initial': {
148
109
  width: 'initial',
149
- },
150
- '.w-max-content': {
110
+ }, '.w-max-content': {
151
111
  width: 'max-content',
152
- },
153
- '.w-min-content': {
112
+ }, '.w-min-content': {
154
113
  width: 'min-content',
155
- },
156
- '.w-revert': {
114
+ }, '.w-revert': {
157
115
  width: 'revert',
158
- },
159
- '.w-unset': {
116
+ }, '.w-unset': {
160
117
  width: 'unset',
161
- },
162
- });
118
+ } }));
163
119
  });
package/dist/lib/cjs/nova-safelist.js CHANGED
@@ -19,6 +19,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
19
19
  Object.defineProperty(exports, "__esModule", { value: true });
20
20
  exports.novaThemeSafelist = exports.gap = exports.margin = exports.padding = exports.pointer = exports.colorSchemes = exports.responsive = void 0;
21
21
  var nova_theme_js_1 = require("./nova-theme.js");
22
+ var nova_tailwind_tokens_js_1 = require("./nova-tailwind-tokens.js");
22
23
  // Enables responsive spacing modifiers for safelist variants
23
24
  exports.responsive = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'];
24
25
  // Enables responsive color schemes for safelist variants
@@ -324,10 +325,14 @@ var resize = [
324
325
  // From the nova tailwind plugin (nova-plugin.ts)
325
326
  var utils = [
326
327
  { pattern: /^visually-hidden$/, variants: exports.responsive },
327
- { pattern: /^font-(high|medium|low)-emphasis$/ },
328
+ { pattern: /^text-(high|medium|low)$/ },
328
329
  { pattern: /^bg-level-(00|10|20|30|40)(-hover)?$/ },
329
- { pattern: /^border-(high|medium|low)-emphasis$/ },
330
+ { pattern: /^border-(high|medium|low)$/ },
330
331
  ];
331
332
  // From the nova tailwind plugin (nova-plugin.ts)
332
333
  var components = [{ pattern: /^link$/, variants: exports.pointer }];
333
- exports.novaThemeSafelist = __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], exports.padding, true), exports.margin, true), exports.gap, true), flexBox, true), grid, true), spaceBetween, true), overflow, true), position, true), display, true), textAlign, true), textSize, true), whitespace, true), verticalAlign, true), fontWeight, true), borders, true), width, true), height, true), colors, true), cursors, true), resize, true), utils, true), components, true);
334
+ // From the nova tailwind tokens (nova-tailwind-tokens.ts)
335
+ var tokens = __spreadArray(__spreadArray([], Object.keys(nova_tailwind_tokens_js_1.NOVA_TAILWIND_TOKENS), true), [
336
+ { pattern: /-hover$/, variants: ['hover'] },
337
+ ], false);
338
+ exports.novaThemeSafelist = __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], exports.padding, true), exports.margin, true), exports.gap, true), flexBox, true), grid, true), spaceBetween, true), overflow, true), position, true), display, true), textAlign, true), textSize, true), whitespace, true), verticalAlign, true), fontWeight, true), borders, true), width, true), height, true), colors, true), cursors, true), resize, true), utils, true), components, true), tokens, true);
package/dist/lib/cjs/nova-tailwind-tokens.js CHANGED
@@ -7,6 +7,21 @@ exports.NOVA_TAILWIND_TOKENS = void 0;
7
7
  * @ref generate-tailwind-tokens.ts
8
8
  */
9
9
  exports.NOVA_TAILWIND_TOKENS = {
10
+ '.border-base-focus': {
11
+ 'border-color': 'var(--color-base-border-focus)'
12
+ },
13
+ '.border-base-focus-high': {
14
+ 'border-color': 'var(--color-base-border-focus-high)'
15
+ },
16
+ '.border-base-high-emphasis': {
17
+ 'border-color': 'var(--color-base-border-high-emphasis)'
18
+ },
19
+ '.border-base-low-emphasis': {
20
+ 'border-color': 'var(--color-base-border-low-emphasis)'
21
+ },
22
+ '.border-base-medium-emphasis': {
23
+ 'border-color': 'var(--color-base-border-medium-emphasis)'
24
+ },
10
25
  '.border-high': {
11
26
  'border-color': 'var(--color-content-high-border)'
12
27
  },
@@ -181,6 +196,54 @@ exports.NOVA_TAILWIND_TOKENS = {
181
196
  '.text-feedback-warning-low': {
182
197
  'color': 'var(--color-feedback-warning-low-text)'
183
198
  },
199
+ '.bg-interaction-brand-high': {
200
+ 'background-color': 'var(--color-interaction-brand-high-background)'
201
+ },
202
+ '.bg-interaction-brand-high-hover': {
203
+ 'background-color': 'var(--color-interaction-brand-high-background-hover)'
204
+ },
205
+ '.border-interaction-brand-high': {
206
+ 'border-color': 'var(--color-interaction-brand-high-border)'
207
+ },
208
+ '.border-interaction-brand-high-hover': {
209
+ 'border-color': 'var(--color-interaction-brand-high-border-hover)'
210
+ },
211
+ '.icon-interaction-brand-high': {
212
+ 'color': 'var(--color-interaction-brand-high-icon)'
213
+ },
214
+ '.icon-interaction-brand-high-hover': {
215
+ 'color': 'var(--color-interaction-brand-high-icon-hover)'
216
+ },
217
+ '.text-interaction-brand-high': {
218
+ 'color': 'var(--color-interaction-brand-high-text)'
219
+ },
220
+ '.text-interaction-brand-high-hover': {
221
+ 'color': 'var(--color-interaction-brand-high-text-hover)'
222
+ },
223
+ '.bg-interaction-brand-low': {
224
+ 'background-color': 'var(--color-interaction-brand-low-background)'
225
+ },
226
+ '.bg-interaction-brand-low-hover': {
227
+ 'background-color': 'var(--color-interaction-brand-low-background-hover)'
228
+ },
229
+ '.border-interaction-brand-low': {
230
+ 'border-color': 'var(--color-interaction-brand-low-border)'
231
+ },
232
+ '.border-interaction-brand-low-hover': {
233
+ 'border-color': 'var(--color-interaction-brand-low-border-hover)'
234
+ },
235
+ '.icon-interaction-brand-low': {
236
+ 'color': 'var(--color-interaction-brand-low-icon)'
237
+ },
238
+ '.icon-interaction-brand-low-hover': {
239
+ 'color': 'var(--color-interaction-brand-low-icon-hover)'
240
+ },
241
+ '.text-interaction-brand-low': {
242
+ 'color': 'var(--color-interaction-brand-low-text)'
243
+ },
244
+ '.text-interaction-brand-low-hover': {
245
+ 'color': 'var(--color-interaction-brand-low-text-hover)'
246
+ },
184
247
  '.bg-interaction-container-branded-high': {
185
248
  'background-color': 'var(--color-interaction-container-branded-high-background)'
186
249
  },
@@ -265,6 +328,18 @@ exports.NOVA_TAILWIND_TOKENS = {
265
328
  '.text-interaction-link-high-hover': {
266
329
  'color': 'var(--color-interaction-link-high-text-hover)'
267
330
  },
331
+ '.icon-interaction-link-inline': {
332
+ 'color': 'var(--color-interaction-link-inline-icon)'
333
+ },
334
+ '.icon-interaction-link-inline-hover': {
335
+ 'color': 'var(--color-interaction-link-inline-icon-hover)'
336
+ },
337
+ '.text-interaction-link-inline': {
338
+ 'color': 'var(--color-interaction-link-inline-text)'
339
+ },
340
+ '.text-interaction-link-inline-hover': {
341
+ 'color': 'var(--color-interaction-link-inline-text-hover)'
342
+ },
268
343
  '.icon-interaction-link-low': {
269
344
  'color': 'var(--color-interaction-link-low-icon)'
270
345
  },
@@ -277,6 +352,54 @@ exports.NOVA_TAILWIND_TOKENS = {
277
352
  '.text-interaction-link-low-hover': {
278
353
  'color': 'var(--color-interaction-link-low-text-hover)'
279
354
  },
355
+ '.icon-interaction-link-standalone': {
356
+ 'color': 'var(--color-interaction-link-standalone-icon)'
357
+ },
358
+ '.icon-interaction-link-standalone-hover': {
359
+ 'color': 'var(--color-interaction-link-standalone-icon-hover)'
360
+ },
361
+ '.text-interaction-link-standalone': {
362
+ 'color': 'var(--color-interaction-link-standalone-text)'
363
+ },
364
+ '.text-interaction-link-standalone-hover': {
365
+ 'color': 'var(--color-interaction-link-standalone-text-hover)'
366
+ },
367
+ '.icon-interaction-link-table': {
368
+ 'color': 'var(--color-interaction-link-table-icon)'
369
+ },
370
+ '.icon-interaction-link-table-hover': {
371
+ 'color': 'var(--color-interaction-link-table-icon-hover)'
372
+ },
373
+ '.text-interaction-link-table': {
374
+ 'color': 'var(--color-interaction-link-table-text)'
375
+ },
376
+ '.text-interaction-link-table-hover': {
377
+ 'color': 'var(--color-interaction-link-table-text-hover)'
378
+ },
379
+ '.bg-interaction-neutral': {
380
+ 'background-color': 'var(--color-interaction-neutral-background)'
381
+ },
382
+ '.bg-interaction-neutral-hover': {
383
+ 'background-color': 'var(--color-interaction-neutral-background-hover)'
384
+ },
385
+ '.border-interaction-neutral': {
386
+ 'border-color': 'var(--color-interaction-neutral-border)'
387
+ },
388
+ '.border-interaction-neutral-hover': {
389
+ 'border-color': 'var(--color-interaction-neutral-border-hover)'
390
+ },
391
+ '.icon-interaction-neutral': {
392
+ 'color': 'var(--color-interaction-neutral-icon)'
393
+ },
394
+ '.icon-interaction-neutral-hover': {
395
+ 'color': 'var(--color-interaction-neutral-icon-hover)'
396
+ },
397
+ '.text-interaction-neutral': {
398
+ 'color': 'var(--color-interaction-neutral-text)'
399
+ },
400
+ '.text-interaction-neutral-hover': {
401
+ 'color': 'var(--color-interaction-neutral-text-hover)'
402
+ },
280
403
  '.bg-level-00': {
281
404
  'background-color': 'var(--color-level-00-background)'
282
405
  },
package/dist/lib/cjs/nova-theme.js CHANGED
@@ -87,8 +87,20 @@ exports.lineHeight = {
87
87
  '9xl': 'var(--line-height-9xl)',
88
88
  };
89
89
  exports.colors = {
90
- background: 'var(--color-base-level-00)',
91
- text: 'var(--color-base-content-medium-emphasis)',
90
+ background: 'var(--color-level-00-background)',
91
+ text: 'var(--color-content-medium-text)',
92
+ brand: {
93
+ 50: 'var(--color-brand-50)',
94
+ 100: 'var(--color-brand-100)',
95
+ 200: 'var(--color-brand-200)',
96
+ 300: 'var(--color-brand-300)',
97
+ 400: 'var(--color-brand-400)',
98
+ 500: 'var(--color-brand-500)',
99
+ 600: 'var(--color-brand-600)',
100
+ 700: 'var(--color-brand-700)',
101
+ 800: 'var(--color-brand-800)',
102
+ 900: 'var(--color-brand-900)',
103
+ },
92
104
  green: {
93
105
  50: 'var(--color-green-50)',
94
106
  100: 'var(--color-green-100)',
package/dist/lib/nova-plugin.js CHANGED
@@ -2,6 +2,7 @@
2
2
  * @fileoverview This file contains various tailwind utilities for nova
3
3
  */
4
4
  import plugin from 'tailwindcss/plugin.js';
5
+ import { NOVA_TAILWIND_TOKENS } from './nova-tailwind-tokens.js';
5
6
  export const novaTailwindPlugin = plugin(({ addUtilities, addComponents, addBase, theme }) => {
6
7
  addBase({
7
8
  'body, html': {
@@ -20,61 +21,62 @@ export const novaTailwindPlugin = plugin(({ addUtilities, addComponents, addBase
20
21
  'border-radius': 'var(--radius-rounded)',
21
22
  },
22
23
  a: {
23
- color: 'var(--color-interaction-link-inline-text)',
24
+ color: 'var(--color-interaction-link-high-text)',
24
25
  'text-decoration': 'underline',
25
26
  fontWeight: '700',
26
27
  },
27
28
  'a:hover': {
28
- color: 'var(--color-interaction-link-inline-text-hover)',
29
+ color: 'var(--color-interaction-link-high-text-hover)',
29
30
  },
30
31
  h1: {
31
32
  fontSize: 'var(--global-typography-h1-font-size)',
32
33
  lineHeight: 'var(--global-typography-h1-line-height)',
33
34
  fontWeight: 'var(--global-typography-h1-font-weight)',
34
- color: 'var(--color-base-content-high-emphasis)',
35
+ color: 'var(--color-content-high-text)',
35
36
  },
36
37
  h2: {
37
38
  fontSize: 'var(--global-typography-h2-font-size)',
38
39
  lineHeight: 'var(--global-typography-h2-line-height)',
39
40
  fontWeight: 'var(--global-typography-h2-font-weight)',
40
- color: 'var(--color-base-content-high-emphasis)',
41
+ color: 'var(--color-content-high-text)',
41
42
  },
42
43
  h3: {
43
44
  fontSize: 'var(--global-typography-h3-font-size)',
44
45
  lineHeight: 'var(--global-typography-h3-line-height)',
45
46
  fontWeight: 'var(--global-typography-h3-font-weight)',
46
- color: 'var(--color-base-content-high-emphasis)',
47
+ color: 'var(--color-content-high-text)',
47
48
  },
48
49
  h4: {
49
50
  fontSize: 'var(--global-typography-h4-font-size)',
50
51
  lineHeight: 'var(--global-typography-h4-line-height)',
51
52
  fontWeight: 'var(--global-typography-h4-font-weight)',
52
- color: 'var(--color-base-content-high-emphasis)',
53
+ color: 'var(--color-content-high-text)',
53
54
  },
54
55
  h5: {
55
56
  fontSize: 'var(--global-typography-h4-font-size)',
56
57
  lineHeight: 'var(--global-typography-h4-line-height)',
57
58
  fontWeight: 'var(--font-weight-medium-emphasis)',
58
- color: 'var(--color-base-content-medium-emphasis)',
59
+ color: 'var(--color-content-medium-text)',
59
60
  },
60
61
  h6: {
61
62
  fontSize: 'var(--global-typography-h4-font-size)',
62
63
  lineHeight: 'var(--global-typography-h4-line-height)',
63
64
  fontWeight: 'var(--font-weight-low-emphasis)',
64
- color: 'var(--color-base-content-low-emphasis)',
65
+ color: 'var(--color-content-low-text)',
65
66
  },
66
67
  });
67
68
  addComponents({
68
69
  '.link': {
69
- color: 'var(--color-interaction-link-standalone-text)',
70
+ color: 'var(--color-interaction-link-high-text)',
70
71
  fontWeight: '500',
71
72
  'text-decoration': 'none',
72
73
  },
73
74
  '.link:hover': {
74
- color: 'var(--color-interaction-link-standalone-text-hover)',
75
+ color: 'var(--color-interaction-link-high-text-hover)',
75
76
  },
76
77
  });
77
78
  addUtilities({
79
+ ...NOVA_TAILWIND_TOKENS,
78
80
  '.visually-hidden': {
79
81
  position: 'absolute',
80
82
  padding: '0',
@@ -86,54 +88,6 @@ export const novaTailwindPlugin = plugin(({ addUtilities, addComponents, addBase
86
88
  margin: '-1px',
87
89
  clip: 'rect(0, 0, 0, 0)',
88
90
  },
89
- '.text-high-emphasis': {
90
- color: 'var(--color-base-content-high-emphasis)',
91
- },
92
- '.text-medium-emphasis': {
93
- color: 'var(--color-base-content-medium-emphasis)',
94
- },
95
- '.text-low-emphasis': {
96
- color: 'var(--color-base-content-low-emphasis)',
97
- },
98
- '.bg-level-00': {
99
- 'background-color': 'var(--color-base-level-00)',
100
- },
101
- '.bg-level-00-hover': {
102
- 'background-color': 'var(--color-base-level-00-hover)',
103
- },
104
- '.bg-level-10': {
105
- 'background-color': 'var(--color-base-level-10)',
106
- },
107
- '.bg-level-10-hover': {
108
- 'background-color': 'var(--color-base-level-10-hover)',
109
- },
110
- '.bg-level-20': {
111
- 'background-color': 'var(--color-base-level-20)',
112
- },
113
- '.bg-level-20-hover': {
114
- 'background-color': 'var(--color-base-level-20-hover)',
115
- },
116
- '.bg-level-30': {
117
- 'background-color': 'var(--color-base-level-30)',
118
- },
119
- '.bg-level-30-hover': {
120
- 'background-color': 'var(--color-base-level-30-hover)',
121
- },
122
- '.bg-level-40': {
123
- 'background-color': 'var(--color-base-level-40)',
124
- },
125
- '.bg-level-40-hover': {
126
- 'background-color': 'var(--color-base-level-40-hover)',
127
- },
128
- '.border-high-emphasis': {
129
- 'border-color': 'var(--color-base-border-high-emphasis)',
130
- },
131
- '.border-medium-emphasis': {
132
- 'border-color': 'var(--color-base-border-medium-emphasis)',
133
- },
134
- '.border-low-emphasis': {
135
- 'border-color': 'var(--color-base-border-low-emphasis)',
136
- },
137
91
  '.w-inherit': {
138
92
  width: 'inherit',
139
93
  },
package/dist/lib/nova-safelist.d.ts CHANGED
@@ -21,6 +21,6 @@ export declare const gap: {
21
21
  pattern: RegExp;
22
22
  variants: string[];
23
23
  }[];
24
- export declare const novaThemeSafelist: {
24
+ export declare const novaThemeSafelist: (string | {
25
25
  pattern: RegExp;
26
- }[];
26
+ })[];
package/dist/lib/nova-safelist.js CHANGED
@@ -7,6 +7,7 @@
7
7
  * they can configure Tailwind directly without using the predefined safelists.
8
8
  */
9
9
  import { spacing } from './nova-theme.js';
10
+ import { NOVA_TAILWIND_TOKENS } from './nova-tailwind-tokens.js';
10
11
  // Enables responsive spacing modifiers for safelist variants
11
12
  export const responsive = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'];
12
13
  // Enables responsive color schemes for safelist variants
@@ -312,12 +313,17 @@ const resize = [
312
313
  // From the nova tailwind plugin (nova-plugin.ts)
313
314
  const utils = [
314
315
  { pattern: /^visually-hidden$/, variants: responsive },
315
- { pattern: /^font-(high|medium|low)-emphasis$/ },
316
+ { pattern: /^text-(high|medium|low)$/ },
316
317
  { pattern: /^bg-level-(00|10|20|30|40)(-hover)?$/ },
317
- { pattern: /^border-(high|medium|low)-emphasis$/ },
318
+ { pattern: /^border-(high|medium|low)$/ },
318
319
  ];
319
320
  // From the nova tailwind plugin (nova-plugin.ts)
320
321
  const components = [{ pattern: /^link$/, variants: pointer }];
322
+ // From the nova tailwind tokens (nova-tailwind-tokens.ts)
323
+ const tokens = [
324
+ ...Object.keys(NOVA_TAILWIND_TOKENS),
325
+ { pattern: /-hover$/, variants: ['hover'] },
326
+ ];
321
327
  export const novaThemeSafelist = [
322
328
  ...padding,
323
329
  ...margin,
@@ -341,4 +347,5 @@ export const novaThemeSafelist = [
341
347
  ...resize,
342
348
  ...utils,
343
349
  ...components,
350
+ ...tokens,
344
351
  ];