@nova-design-system/nova-base 3.16.0 → 3.17.0

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 (9) hide show
  1. package/dist/cjs/plugin/nova-plugin.js +111 -239
  2. package/dist/cjs/plugin/nova-safelist.js +6 -6
  3. package/dist/css/ocean.css +1 -0
  4. package/dist/css/spark.css +1 -0
  5. package/dist/js/primitives.d.ts +1 -0
  6. package/dist/js/primitives.js +1 -0
  7. package/dist/plugin/nova-plugin.js +105 -260
  8. package/dist/plugin/nova-safelist.js +6 -6
  9. package/package.json +1 -1
package/dist/cjs/plugin/nova-plugin.js CHANGED
@@ -23,72 +23,132 @@ var nova_tailwind_tokens_js_1 = require("../generated/nova-tailwind-tokens.js");
23
23
  var nova_tailwind_components_js_1 = require("../generated/nova-tailwind-components.js");
24
24
  exports.novaTailwindPlugin = (0, plugin_js_1.default)(function (_a) {
25
25
  var addUtilities = _a.addUtilities, addComponents = _a.addComponents, addBase = _a.addBase, theme = _a.theme;
26
- addBase({
27
- 'body, html': {
26
+ addBase(__assign({ 'body, html': {
28
27
  'background-color': theme('colors.background'),
29
28
  color: theme('colors.text'),
30
- },
31
- '*:disabled': {
29
+ }, '*:disabled': {
32
30
  cursor: 'not-allowed',
33
- },
34
- '*:focus, *:focus-within': {
31
+ }, '*:focus, *:focus-within': {
35
32
  outline: 'none',
36
- },
37
- 'button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible': {
33
+ }, 'button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible': {
38
34
  outline: 'var(--focus-outline-stroke) solid var(--color-focus-brand)',
39
35
  'outline-offset': 'var(--focus-outline-offset)',
40
36
  'border-radius': 'var(--radius-rounded)',
41
- },
42
- a: {
37
+ }, a: {
43
38
  color: 'var(--color-interaction-link-high-text)',
44
39
  'text-decoration': 'underline',
45
40
  fontWeight: 'var(--font-weight-high-emphasis)',
46
- },
47
- 'a:hover': {
41
+ }, 'a:hover': {
48
42
  color: 'var(--color-interaction-link-high-text-hover)',
49
- },
50
- 'no-underline': {
43
+ }, 'no-underline': {
51
44
  'text-decoration': 'none',
45
+ } }, (function () {
46
+ var headingConfig = {
47
+ h1: { level: 'h1', color: 'high' },
48
+ h2: { level: 'h2', color: 'high' },
49
+ h3: { level: 'h3', color: 'high' },
50
+ h4: { level: 'h4', color: 'high' },
51
+ h5: {
52
+ level: 'h4',
53
+ fontWeight: 'var(--font-weight-medium-emphasis)',
54
+ color: 'medium',
55
+ },
56
+ h6: {
57
+ level: 'h4',
58
+ fontWeight: 'var(--font-weight-low-emphasis)',
59
+ color: 'low',
60
+ },
61
+ };
62
+ return Object.entries(headingConfig).reduce(function (acc, _a) {
63
+ var tag = _a[0], config = _a[1];
64
+ acc[tag] = {
65
+ fontSize: "var(--global-typography-".concat(config.level, "-font-size)"),
66
+ lineHeight: "var(--global-typography-".concat(config.level, "-line-height)"),
67
+ fontWeight: 'fontWeight' in config
68
+ ? config.fontWeight
69
+ : "var(--global-typography-".concat(config.level, "-font-weight)"),
70
+ color: "var(--color-content-".concat(config.color, "-text)"),
71
+ };
72
+ return acc;
73
+ }, {});
74
+ })()));
75
+ addComponents(__assign({}, nova_tailwind_components_js_1.NOVA_TAILWIND_COMPONENTS));
76
+ // Typography configuration for programmatic utility generation
77
+ var typographyConfig = {
78
+ heading: {
79
+ xl: {
80
+ size: '4xl',
81
+ lineHeight: 'leading-px-10',
82
+ letterSpacing: 'heading-xl',
83
+ },
84
+ lg: {
85
+ size: '3xl',
86
+ lineHeight: 'leading-px-8',
87
+ letterSpacing: 'heading-lg',
88
+ },
89
+ md: {
90
+ size: '2xl',
91
+ lineHeight: 'leading-px-7',
92
+ letterSpacing: 'heading-md',
93
+ },
94
+ sm: {
95
+ size: 'xl',
96
+ lineHeight: 'leading-px-6',
97
+ letterSpacing: 'heading-sm',
98
+ },
99
+ xs: {
100
+ size: 'lg',
101
+ lineHeight: 'leading-px-6',
102
+ letterSpacing: 'heading-xs',
103
+ },
52
104
  },
53
- h1: {
54
- fontSize: 'var(--global-typography-h1-font-size)',
55
- lineHeight: 'var(--global-typography-h1-line-height)',
56
- fontWeight: 'var(--global-typography-h1-font-weight)',
57
- color: 'var(--color-content-high-text)',
58
- },
59
- h2: {
60
- fontSize: 'var(--global-typography-h2-font-size)',
61
- lineHeight: 'var(--global-typography-h2-line-height)',
62
- fontWeight: 'var(--global-typography-h2-font-weight)',
63
- color: 'var(--color-content-high-text)',
64
- },
65
- h3: {
66
- fontSize: 'var(--global-typography-h3-font-size)',
67
- lineHeight: 'var(--global-typography-h3-line-height)',
68
- fontWeight: 'var(--global-typography-h3-font-weight)',
69
- color: 'var(--color-content-high-text)',
70
- },
71
- h4: {
72
- fontSize: 'var(--global-typography-h4-font-size)',
73
- lineHeight: 'var(--global-typography-h4-line-height)',
74
- fontWeight: 'var(--global-typography-h4-font-weight)',
75
- color: 'var(--color-content-high-text)',
76
- },
77
- h5: {
78
- fontSize: 'var(--global-typography-h4-font-size)',
79
- lineHeight: 'var(--global-typography-h4-line-height)',
80
- fontWeight: 'var(--font-weight-medium-emphasis)',
81
- color: 'var(--color-content-medium-text)',
105
+ text: {
106
+ xl: { size: 'xl', lineHeight: 'xl' },
107
+ lg: { size: 'lg', lineHeight: 'lg' },
108
+ md: { size: 'md', lineHeight: 'base' },
109
+ sm: { size: 'sm', lineHeight: 'sm' },
110
+ xs: { size: 'xs', lineHeight: 'xs' },
82
111
  },
83
- h6: {
84
- fontSize: 'var(--global-typography-h4-font-size)',
85
- lineHeight: 'var(--global-typography-h4-line-height)',
86
- fontWeight: 'var(--font-weight-low-emphasis)',
87
- color: 'var(--color-content-low-text)',
112
+ mono: {
113
+ md: { size: 'md', lineHeight: 'base' },
114
+ sm: { size: 'sm', lineHeight: 'sm' },
115
+ xs: { size: 'xs', lineHeight: 'xs' },
88
116
  },
117
+ };
118
+ var weights = ['regular', 'medium', 'bold'];
119
+ var weightMap = {
120
+ regular: 'low-emphasis',
121
+ medium: 'medium-emphasis',
122
+ bold: 'high-emphasis',
123
+ };
124
+ // Generate typography utilities programmatically
125
+ var typographyUtilities = {};
126
+ Object.entries(typographyConfig).forEach(function (_a) {
127
+ var type = _a[0], sizes = _a[1];
128
+ Object.entries(sizes).forEach(function (_a) {
129
+ var size = _a[0], config = _a[1];
130
+ weights.forEach(function (weight) {
131
+ var className = ".typo-".concat(type, "-").concat(size, "-").concat(weight);
132
+ var baseStyles = {
133
+ 'font-size': "var(--font-size-".concat(config.size, ")"),
134
+ 'font-weight': "var(--font-weight-".concat(weightMap[weight], ")"),
135
+ 'line-height': "var(--".concat(config.lineHeight.startsWith('leading-')
136
+ ? config.lineHeight
137
+ : "line-height-".concat(config.lineHeight), ")"),
138
+ };
139
+ // Add letter-spacing for headings
140
+ if (type === 'heading' && 'letterSpacing' in config) {
141
+ baseStyles['letter-spacing'] = "var(--letter-spacing-".concat(config.letterSpacing, ")");
142
+ }
143
+ // Add font-family for mono
144
+ if (type === 'mono') {
145
+ baseStyles['font-family'] = 'var(--font-family-mono), monospace';
146
+ }
147
+ typographyUtilities[className] = baseStyles;
148
+ });
149
+ });
89
150
  });
90
- addComponents(__assign({}, nova_tailwind_components_js_1.NOVA_TAILWIND_COMPONENTS));
91
- addUtilities(__assign(__assign({}, nova_tailwind_tokens_js_1.NOVA_TAILWIND_TOKENS), { '.w-inherit': {
151
+ addUtilities(__assign(__assign(__assign({}, nova_tailwind_tokens_js_1.NOVA_TAILWIND_TOKENS), { '.w-inherit': {
92
152
  width: 'inherit',
93
153
  }, '.w-initial': {
94
154
  width: 'initial',
@@ -100,194 +160,6 @@ exports.novaTailwindPlugin = (0, plugin_js_1.default)(function (_a) {
100
160
  width: 'revert',
101
161
  }, '.w-unset': {
102
162
  width: 'unset',
103
- },
104
- // Typography utilities
105
- // .typo-{type}-{size}-{weight}
106
- // Headings
107
- '.typo-heading-xl-regular': {
108
- 'font-size': 'var(--font-size-4xl)',
109
- 'font-weight': 'var(--font-weight-low-emphasis)',
110
- 'line-height': 'var(--leading-px-10)',
111
- 'letter-spacing': 'var(--letter-spacing-heading-xl)',
112
- }, '.typo-heading-xl-medium': {
113
- 'font-size': 'var(--font-size-4xl)',
114
- 'font-weight': 'var(--font-weight-medium-emphasis)',
115
- 'line-height': 'var(--leading-px-10)',
116
- 'letter-spacing': 'var(--letter-spacing-heading-xl)',
117
- }, '.typo-heading-xl-bold': {
118
- 'font-size': 'var(--font-size-4xl)',
119
- 'font-weight': 'var(--font-weight-high-emphasis)',
120
- 'line-height': 'var(--leading-px-10)',
121
- 'letter-spacing': 'var(--letter-spacing-heading-xl)',
122
- }, '.typo-heading-lg-regular': {
123
- 'font-size': 'var(--font-size-3xl)',
124
- 'font-weight': 'var(--font-weight-low-emphasis)',
125
- 'line-height': 'var(--leading-px-8)',
126
- 'letter-spacing': 'var(--letter-spacing-heading-lg)',
127
- }, '.typo-heading-lg-medium': {
128
- 'font-size': 'var(--font-size-3xl)',
129
- 'font-weight': 'var(--font-weight-medium-emphasis)',
130
- 'line-height': 'var(--leading-px-8)',
131
- 'letter-spacing': 'var(--letter-spacing-heading-lg)',
132
- }, '.typo-heading-lg-bold': {
133
- 'font-size': 'var(--font-size-3xl)',
134
- 'font-weight': 'var(--font-weight-high-emphasis)',
135
- 'line-height': 'var(--leading-px-8)',
136
- 'letter-spacing': 'var(--letter-spacing-heading-lg)',
137
- }, '.typo-heading-md-regular': {
138
- 'font-size': 'var(--font-size-2xl)',
139
- 'font-weight': 'var(--font-weight-low-emphasis)',
140
- 'line-height': 'var(--leading-px-7)',
141
- 'letter-spacing': 'var(--letter-spacing-heading-md)',
142
- }, '.typo-heading-md-medium': {
143
- 'font-size': 'var(--font-size-2xl)',
144
- 'font-weight': 'var(--font-weight-medium-emphasis)',
145
- 'line-height': 'var(--leading-px-7)',
146
- 'letter-spacing': 'var(--letter-spacing-heading-md)',
147
- }, '.typo-heading-md-bold': {
148
- 'font-size': 'var(--font-size-2xl)',
149
- 'font-weight': 'var(--font-weight-high-emphasis)',
150
- 'line-height': 'var(--leading-px-7)',
151
- 'letter-spacing': 'var(--letter-spacing-heading-md)',
152
- }, '.typo-heading-sm-regular': {
153
- 'font-size': 'var(--font-size-xl)',
154
- 'font-weight': 'var(--font-weight-low-emphasis)',
155
- 'line-height': 'var(--leading-px-6)',
156
- 'letter-spacing': 'var(--letter-spacing-heading-sm)',
157
- }, '.typo-heading-sm-medium': {
158
- 'font-size': 'var(--font-size-xl)',
159
- 'font-weight': 'var(--font-weight-medium-emphasis)',
160
- 'line-height': 'var(--leading-px-6)',
161
- 'letter-spacing': 'var(--letter-spacing-heading-sm)',
162
- }, '.typo-heading-sm-bold': {
163
- 'font-size': 'var(--font-size-xl)',
164
- 'font-weight': 'var(--font-weight-high-emphasis)',
165
- 'line-height': 'var(--leading-px-6)',
166
- 'letter-spacing': 'var(--letter-spacing-heading-sm)',
167
- }, '.typo-heading-xs-regular': {
168
- 'font-size': 'var(--font-size-lg)',
169
- 'font-weight': 'var(--font-weight-low-emphasis)',
170
- 'line-height': 'var(--leading-px-6)',
171
- 'letter-spacing': 'var(--letter-spacing-heading-xs)',
172
- }, '.typo-heading-xs-medium': {
173
- 'font-size': 'var(--font-size-lg)',
174
- 'font-weight': 'var(--font-weight-medium-emphasis)',
175
- 'line-height': 'var(--leading-px-6)',
176
- 'letter-spacing': 'var(--letter-spacing-heading-xs)',
177
- }, '.typo-heading-xs-bold': {
178
- 'font-size': 'var(--font-size-lg)',
179
- 'font-weight': 'var(--font-weight-high-emphasis)',
180
- 'line-height': 'var(--leading-px-6)',
181
- 'letter-spacing': 'var(--letter-spacing-heading-xs)',
182
- },
183
- // Text
184
- '.typo-text-xl-regular': {
185
- 'font-size': 'var(--font-size-xl)',
186
- 'font-weight': 'var(--font-weight-low-emphasis)',
187
- 'line-height': 'var(--line-height-xl)',
188
- }, '.typo-text-xl-medium': {
189
- 'font-size': 'var(--font-size-xl)',
190
- 'font-weight': 'var(--font-weight-medium-emphasis)',
191
- 'line-height': 'var(--line-height-xl)',
192
- }, '.typo-text-xl-bold': {
193
- 'font-size': 'var(--font-size-xl)',
194
- 'font-weight': 'var(--font-weight-high-emphasis)',
195
- 'line-height': 'var(--line-height-xl)',
196
- }, '.typo-text-lg-regular': {
197
- 'font-size': 'var(--font-size-lg)',
198
- 'font-weight': 'var(--font-weight-low-emphasis)',
199
- 'line-height': 'var(--line-height-lg)',
200
- }, '.typo-text-lg-medium': {
201
- 'font-size': 'var(--font-size-lg)',
202
- 'font-weight': 'var(--font-weight-medium-emphasis)',
203
- 'line-height': 'var(--line-height-lg)',
204
- }, '.typo-text-lg-bold': {
205
- 'font-size': 'var(--font-size-lg)',
206
- 'font-weight': 'var(--font-weight-high-emphasis)',
207
- 'line-height': 'var(--line-height-lg)',
208
- }, '.typo-text-md-regular': {
209
- 'font-size': 'var(--font-size-md)',
210
- 'font-weight': 'var(--font-weight-low-emphasis)',
211
- 'line-height': 'var(--line-height-base)',
212
- }, '.typo-text-md-medium': {
213
- 'font-size': 'var(--font-size-md)',
214
- 'font-weight': 'var(--font-weight-medium-emphasis)',
215
- 'line-height': 'var(--line-height-base)',
216
- }, '.typo-text-md-bold': {
217
- 'font-size': 'var(--font-size-md)',
218
- 'font-weight': 'var(--font-weight-high-emphasis)',
219
- 'line-height': 'var(--line-height-base)',
220
- }, '.typo-text-sm-regular': {
221
- 'font-size': 'var(--font-size-sm)',
222
- 'font-weight': 'var(--font-weight-low-emphasis)',
223
- 'line-height': 'var(--line-height-sm)',
224
- }, '.typo-text-sm-medium': {
225
- 'font-size': 'var(--font-size-sm)',
226
- 'font-weight': 'var(--font-weight-medium-emphasis)',
227
- 'line-height': 'var(--line-height-sm)',
228
- }, '.typo-text-sm-bold': {
229
- 'font-size': 'var(--font-size-sm)',
230
- 'font-weight': 'var(--font-weight-high-emphasis)',
231
- 'line-height': 'var(--line-height-sm)',
232
- }, '.typo-text-xs-regular': {
233
- 'font-size': 'var(--font-size-xs)',
234
- 'font-weight': 'var(--font-weight-low-emphasis)',
235
- 'line-height': 'var(--line-height-xs)',
236
- }, '.typo-text-xs-medium': {
237
- 'font-size': 'var(--font-size-xs)',
238
- 'font-weight': 'var(--font-weight-medium-emphasis)',
239
- 'line-height': 'var(--line-height-xs)',
240
- }, '.typo-text-xs-bold': {
241
- 'font-size': 'var(--font-size-xs)',
242
- 'font-weight': 'var(--font-weight-high-emphasis)',
243
- 'line-height': 'var(--line-height-xs)',
244
- },
245
- // Mono
246
- '.typo-mono-md-regular': {
247
- 'font-family': 'var(--font-family-default), var(--font-family-fallback), sans-serif',
248
- 'font-size': 'var(--font-size-md)',
249
- 'font-weight': 'var(--font-weight-low-emphasis)',
250
- 'line-height': 'var(--line-height-base)',
251
- }, '.typo-mono-md-medium': {
252
- 'font-family': 'var(--font-family-default), var(--font-family-fallback), sans-serif',
253
- 'font-size': 'var(--font-size-md)',
254
- 'font-weight': 'var(--font-weight-medium-emphasis)',
255
- 'line-height': 'var(--line-height-base)',
256
- }, '.typo-mono-md-bold': {
257
- 'font-family': 'var(--font-family-default), var(--font-family-fallback), sans-serif',
258
- 'font-size': 'var(--font-size-md)',
259
- 'font-weight': 'var(--font-weight-high-emphasis)',
260
- 'line-height': 'var(--line-height-base)',
261
- }, '.typo-mono-sm-regular': {
262
- 'font-family': 'var(--font-family-default), var(--font-family-fallback), sans-serif',
263
- 'font-size': 'var(--font-size-sm)',
264
- 'font-weight': 'var(--font-weight-low-emphasis)',
265
- 'line-height': 'var(--line-height-sm)',
266
- }, '.typo-mono-sm-medium': {
267
- 'font-family': 'var(--font-family-default), var(--font-family-fallback), sans-serif',
268
- 'font-size': 'var(--font-size-sm)',
269
- 'font-weight': 'var(--font-weight-medium-emphasis)',
270
- 'line-height': 'var(--line-height-sm)',
271
- }, '.typo-mono-sm-bold': {
272
- 'font-family': 'var(--font-family-default), var(--font-family-fallback), sans-serif',
273
- 'font-size': 'var(--font-size-sm)',
274
- 'font-weight': 'var(--font-weight-high-emphasis)',
275
- 'line-height': 'var(--line-height-sm)',
276
- }, '.typo-mono-xs-regular': {
277
- 'font-family': 'var(--font-family-default), var(--font-family-fallback), sans-serif',
278
- 'font-size': 'var(--font-size-xs)',
279
- 'font-weight': 'var(--font-weight-low-emphasis)',
280
- 'line-height': 'var(--line-height-xs)',
281
- }, '.typo-mono-xs-medium': {
282
- 'font-family': 'var(--font-family-default), var(--font-family-fallback), sans-serif',
283
- 'font-size': 'var(--font-size-xs)',
284
- 'font-weight': 'var(--font-weight-medium-emphasis)',
285
- 'line-height': 'var(--line-height-xs)',
286
- }, '.typo-mono-xs-bold': {
287
- 'font-family': 'var(--font-family-default), var(--font-family-fallback), sans-serif',
288
- 'font-size': 'var(--font-size-xs)',
289
- 'font-weight': 'var(--font-weight-high-emphasis)',
290
- 'line-height': 'var(--line-height-xs)',
291
- } }));
163
+ } }), typographyUtilities));
292
164
  });
293
165
  exports.default = exports.novaTailwindPlugin;
package/dist/cjs/plugin/nova-safelist.js CHANGED
@@ -325,11 +325,11 @@ var resize = [
325
325
  },
326
326
  ];
327
327
  // From the nova tailwind plugin (nova-plugin.ts)
328
- var utils = [
329
- { pattern: /^text-(high|medium|low)$/ },
330
- { pattern: /^bg-level-(00|10|20|30|40)(-hover)?$/ },
331
- { pattern: /^border-(high|medium|low)$/ },
332
- ];
328
+ /*const utils = [
329
+ { pattern: /^text-(high|medium|low)$/ },
330
+ { pattern: /^bg-level-(00|10|20|30|40)(-hover)?$/ },
331
+ { pattern: /^border-(high|medium|low)$/ },
332
+ ];*/
333
333
  // From the nova tailwind components (nova-tailwind-components.ts)
334
334
  var components = __spreadArray([], Object.keys(nova_tailwind_components_js_1.NOVA_TAILWIND_COMPONENTS).filter(function (key) {
335
335
  return /^\.[a-zA-Z0-9-]+$/.test(key);
@@ -338,4 +338,4 @@ var components = __spreadArray([], Object.keys(nova_tailwind_components_js_1.NOV
338
338
  var tokens = __spreadArray(__spreadArray([], Object.keys(nova_tailwind_tokens_js_1.NOVA_TAILWIND_TOKENS), true), [
339
339
  { pattern: /-hover$/, variants: ['hover'] },
340
340
  ], false);
341
- 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(__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), fontFamily, true), borders, true), width, true), height, true), colors, true), cursors, true), resize, true), utils, true), components, true), tokens, true);
341
+ 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), fontFamily, true), borders, true), width, true), height, true), colors, true), cursors, true), resize, true), components, true), tokens, true);
package/dist/css/ocean.css CHANGED
@@ -1344,6 +1344,7 @@
1344
1344
  --font-size-sm: 14.0000px;
1345
1345
  --font-size-xs: 12.0000px;
1346
1346
  --font-family-fallback: Arial;
1347
+ --font-family-mono: TT Norms Pro Mono;
1347
1348
  --font-family-default: TT Norms Pro;
1348
1349
  --color-yellow-900: #4d3a00;
1349
1350
  --color-yellow-800: #795c00;
package/dist/css/spark.css CHANGED
@@ -1344,6 +1344,7 @@
1344
1344
  --font-size-sm: 14.0000px;
1345
1345
  --font-size-xs: 12.0000px;
1346
1346
  --font-family-fallback: Arial;
1347
+ --font-family-mono: TT Norms Pro Mono;
1347
1348
  --font-family-default: TT Norms Pro;
1348
1349
  --color-yellow-900: #4d3a00;
1349
1350
  --color-yellow-800: #795c00;
package/dist/js/primitives.d.ts CHANGED
@@ -181,6 +181,7 @@ export const ColorYellow700 : string;
181
181
  export const ColorYellow800 : string;
182
182
  export const ColorYellow900 : string;
183
183
  export const FontFamilyDefault : string;
184
+ export const FontFamilyMono : string;
184
185
  export const FontFamilyFallback : string;
185
186
  export const FontSizeXs : string;
186
187
  export const FontSizeSm : string;
package/dist/js/primitives.js CHANGED
@@ -181,6 +181,7 @@ export const ColorYellow700 = "#a67d00";
181
181
  export const ColorYellow800 = "#795c00";
182
182
  export const ColorYellow900 = "#4d3a00";
183
183
  export const FontFamilyDefault = "TT Norms Pro";
184
+ export const FontFamilyMono = "TT Norms Pro Mono";
184
185
  export const FontFamilyFallback = "Arial";
185
186
  export const FontSizeXs = "12.0000px";
186
187
  export const FontSizeSm = "14.0000px";
package/dist/plugin/nova-plugin.js CHANGED
@@ -32,46 +32,113 @@ export const novaTailwindPlugin = plugin(({ addUtilities, addComponents, addBase
32
32
  'no-underline': {
33
33
  'text-decoration': 'none',
34
34
  },
35
- h1: {
36
- fontSize: 'var(--global-typography-h1-font-size)',
37
- lineHeight: 'var(--global-typography-h1-line-height)',
38
- fontWeight: 'var(--global-typography-h1-font-weight)',
39
- color: 'var(--color-content-high-text)',
40
- },
41
- h2: {
42
- fontSize: 'var(--global-typography-h2-font-size)',
43
- lineHeight: 'var(--global-typography-h2-line-height)',
44
- fontWeight: 'var(--global-typography-h2-font-weight)',
45
- color: 'var(--color-content-high-text)',
46
- },
47
- h3: {
48
- fontSize: 'var(--global-typography-h3-font-size)',
49
- lineHeight: 'var(--global-typography-h3-line-height)',
50
- fontWeight: 'var(--global-typography-h3-font-weight)',
51
- color: 'var(--color-content-high-text)',
52
- },
53
- h4: {
54
- fontSize: 'var(--global-typography-h4-font-size)',
55
- lineHeight: 'var(--global-typography-h4-line-height)',
56
- fontWeight: 'var(--global-typography-h4-font-weight)',
57
- color: 'var(--color-content-high-text)',
58
- },
59
- h5: {
60
- fontSize: 'var(--global-typography-h4-font-size)',
61
- lineHeight: 'var(--global-typography-h4-line-height)',
62
- fontWeight: 'var(--font-weight-medium-emphasis)',
63
- color: 'var(--color-content-medium-text)',
64
- },
65
- h6: {
66
- fontSize: 'var(--global-typography-h4-font-size)',
67
- lineHeight: 'var(--global-typography-h4-line-height)',
68
- fontWeight: 'var(--font-weight-low-emphasis)',
69
- color: 'var(--color-content-low-text)',
70
- },
35
+ // Generate heading styles programmatically
36
+ ...(() => {
37
+ const headingConfig = {
38
+ h1: { level: 'h1', color: 'high' },
39
+ h2: { level: 'h2', color: 'high' },
40
+ h3: { level: 'h3', color: 'high' },
41
+ h4: { level: 'h4', color: 'high' },
42
+ h5: {
43
+ level: 'h4',
44
+ fontWeight: 'var(--font-weight-medium-emphasis)',
45
+ color: 'medium',
46
+ },
47
+ h6: {
48
+ level: 'h4',
49
+ fontWeight: 'var(--font-weight-low-emphasis)',
50
+ color: 'low',
51
+ },
52
+ };
53
+ return Object.entries(headingConfig).reduce((acc, [tag, config]) => {
54
+ acc[tag] = {
55
+ fontSize: `var(--global-typography-${config.level}-font-size)`,
56
+ lineHeight: `var(--global-typography-${config.level}-line-height)`,
57
+ fontWeight: 'fontWeight' in config
58
+ ? config.fontWeight
59
+ : `var(--global-typography-${config.level}-font-weight)`,
60
+ color: `var(--color-content-${config.color}-text)`,
61
+ };
62
+ return acc;
63
+ }, {});
64
+ })(),
71
65
  });
72
66
  addComponents({
73
67
  ...NOVA_TAILWIND_COMPONENTS,
74
68
  });
69
+ // Typography configuration for programmatic utility generation
70
+ const typographyConfig = {
71
+ heading: {
72
+ xl: {
73
+ size: '4xl',
74
+ lineHeight: 'leading-px-10',
75
+ letterSpacing: 'heading-xl',
76
+ },
77
+ lg: {
78
+ size: '3xl',
79
+ lineHeight: 'leading-px-8',
80
+ letterSpacing: 'heading-lg',
81
+ },
82
+ md: {
83
+ size: '2xl',
84
+ lineHeight: 'leading-px-7',
85
+ letterSpacing: 'heading-md',
86
+ },
87
+ sm: {
88
+ size: 'xl',
89
+ lineHeight: 'leading-px-6',
90
+ letterSpacing: 'heading-sm',
91
+ },
92
+ xs: {
93
+ size: 'lg',
94
+ lineHeight: 'leading-px-6',
95
+ letterSpacing: 'heading-xs',
96
+ },
97
+ },
98
+ text: {
99
+ xl: { size: 'xl', lineHeight: 'xl' },
100
+ lg: { size: 'lg', lineHeight: 'lg' },
101
+ md: { size: 'md', lineHeight: 'base' },
102
+ sm: { size: 'sm', lineHeight: 'sm' },
103
+ xs: { size: 'xs', lineHeight: 'xs' },
104
+ },
105
+ mono: {
106
+ md: { size: 'md', lineHeight: 'base' },
107
+ sm: { size: 'sm', lineHeight: 'sm' },
108
+ xs: { size: 'xs', lineHeight: 'xs' },
109
+ },
110
+ };
111
+ const weights = ['regular', 'medium', 'bold'];
112
+ const weightMap = {
113
+ regular: 'low-emphasis',
114
+ medium: 'medium-emphasis',
115
+ bold: 'high-emphasis',
116
+ };
117
+ // Generate typography utilities programmatically
118
+ const typographyUtilities = {};
119
+ Object.entries(typographyConfig).forEach(([type, sizes]) => {
120
+ Object.entries(sizes).forEach(([size, config]) => {
121
+ weights.forEach((weight) => {
122
+ const className = `.typo-${type}-${size}-${weight}`;
123
+ const baseStyles = {
124
+ 'font-size': `var(--font-size-${config.size})`,
125
+ 'font-weight': `var(--font-weight-${weightMap[weight]})`,
126
+ 'line-height': `var(--${config.lineHeight.startsWith('leading-')
127
+ ? config.lineHeight
128
+ : `line-height-${config.lineHeight}`})`,
129
+ };
130
+ // Add letter-spacing for headings
131
+ if (type === 'heading' && 'letterSpacing' in config) {
132
+ baseStyles['letter-spacing'] = `var(--letter-spacing-${config.letterSpacing})`;
133
+ }
134
+ // Add font-family for mono
135
+ if (type === 'mono') {
136
+ baseStyles['font-family'] = 'var(--font-family-mono), monospace';
137
+ }
138
+ typographyUtilities[className] = baseStyles;
139
+ });
140
+ });
141
+ });
75
142
  addUtilities({
76
143
  ...NOVA_TAILWIND_TOKENS,
77
144
  '.w-inherit': {
@@ -92,230 +159,8 @@ export const novaTailwindPlugin = plugin(({ addUtilities, addComponents, addBase
92
159
  '.w-unset': {
93
160
  width: 'unset',
94
161
  },
95
- // Typography utilities
96
- // .typo-{type}-{size}-{weight}
97
- // Headings
98
- '.typo-heading-xl-regular': {
99
- 'font-size': 'var(--font-size-4xl)',
100
- 'font-weight': 'var(--font-weight-low-emphasis)',
101
- 'line-height': 'var(--leading-px-10)',
102
- 'letter-spacing': 'var(--letter-spacing-heading-xl)',
103
- },
104
- '.typo-heading-xl-medium': {
105
- 'font-size': 'var(--font-size-4xl)',
106
- 'font-weight': 'var(--font-weight-medium-emphasis)',
107
- 'line-height': 'var(--leading-px-10)',
108
- 'letter-spacing': 'var(--letter-spacing-heading-xl)',
109
- },
110
- '.typo-heading-xl-bold': {
111
- 'font-size': 'var(--font-size-4xl)',
112
- 'font-weight': 'var(--font-weight-high-emphasis)',
113
- 'line-height': 'var(--leading-px-10)',
114
- 'letter-spacing': 'var(--letter-spacing-heading-xl)',
115
- },
116
- '.typo-heading-lg-regular': {
117
- 'font-size': 'var(--font-size-3xl)',
118
- 'font-weight': 'var(--font-weight-low-emphasis)',
119
- 'line-height': 'var(--leading-px-8)',
120
- 'letter-spacing': 'var(--letter-spacing-heading-lg)',
121
- },
122
- '.typo-heading-lg-medium': {
123
- 'font-size': 'var(--font-size-3xl)',
124
- 'font-weight': 'var(--font-weight-medium-emphasis)',
125
- 'line-height': 'var(--leading-px-8)',
126
- 'letter-spacing': 'var(--letter-spacing-heading-lg)',
127
- },
128
- '.typo-heading-lg-bold': {
129
- 'font-size': 'var(--font-size-3xl)',
130
- 'font-weight': 'var(--font-weight-high-emphasis)',
131
- 'line-height': 'var(--leading-px-8)',
132
- 'letter-spacing': 'var(--letter-spacing-heading-lg)',
133
- },
134
- '.typo-heading-md-regular': {
135
- 'font-size': 'var(--font-size-2xl)',
136
- 'font-weight': 'var(--font-weight-low-emphasis)',
137
- 'line-height': 'var(--leading-px-7)',
138
- 'letter-spacing': 'var(--letter-spacing-heading-md)',
139
- },
140
- '.typo-heading-md-medium': {
141
- 'font-size': 'var(--font-size-2xl)',
142
- 'font-weight': 'var(--font-weight-medium-emphasis)',
143
- 'line-height': 'var(--leading-px-7)',
144
- 'letter-spacing': 'var(--letter-spacing-heading-md)',
145
- },
146
- '.typo-heading-md-bold': {
147
- 'font-size': 'var(--font-size-2xl)',
148
- 'font-weight': 'var(--font-weight-high-emphasis)',
149
- 'line-height': 'var(--leading-px-7)',
150
- 'letter-spacing': 'var(--letter-spacing-heading-md)',
151
- },
152
- '.typo-heading-sm-regular': {
153
- 'font-size': 'var(--font-size-xl)',
154
- 'font-weight': 'var(--font-weight-low-emphasis)',
155
- 'line-height': 'var(--leading-px-6)',
156
- 'letter-spacing': 'var(--letter-spacing-heading-sm)',
157
- },
158
- '.typo-heading-sm-medium': {
159
- 'font-size': 'var(--font-size-xl)',
160
- 'font-weight': 'var(--font-weight-medium-emphasis)',
161
- 'line-height': 'var(--leading-px-6)',
162
- 'letter-spacing': 'var(--letter-spacing-heading-sm)',
163
- },
164
- '.typo-heading-sm-bold': {
165
- 'font-size': 'var(--font-size-xl)',
166
- 'font-weight': 'var(--font-weight-high-emphasis)',
167
- 'line-height': 'var(--leading-px-6)',
168
- 'letter-spacing': 'var(--letter-spacing-heading-sm)',
169
- },
170
- '.typo-heading-xs-regular': {
171
- 'font-size': 'var(--font-size-lg)',
172
- 'font-weight': 'var(--font-weight-low-emphasis)',
173
- 'line-height': 'var(--leading-px-6)',
174
- 'letter-spacing': 'var(--letter-spacing-heading-xs)',
175
- },
176
- '.typo-heading-xs-medium': {
177
- 'font-size': 'var(--font-size-lg)',
178
- 'font-weight': 'var(--font-weight-medium-emphasis)',
179
- 'line-height': 'var(--leading-px-6)',
180
- 'letter-spacing': 'var(--letter-spacing-heading-xs)',
181
- },
182
- '.typo-heading-xs-bold': {
183
- 'font-size': 'var(--font-size-lg)',
184
- 'font-weight': 'var(--font-weight-high-emphasis)',
185
- 'line-height': 'var(--leading-px-6)',
186
- 'letter-spacing': 'var(--letter-spacing-heading-xs)',
187
- },
188
- // Text
189
- '.typo-text-xl-regular': {
190
- 'font-size': 'var(--font-size-xl)',
191
- 'font-weight': 'var(--font-weight-low-emphasis)',
192
- 'line-height': 'var(--line-height-xl)',
193
- },
194
- '.typo-text-xl-medium': {
195
- 'font-size': 'var(--font-size-xl)',
196
- 'font-weight': 'var(--font-weight-medium-emphasis)',
197
- 'line-height': 'var(--line-height-xl)',
198
- },
199
- '.typo-text-xl-bold': {
200
- 'font-size': 'var(--font-size-xl)',
201
- 'font-weight': 'var(--font-weight-high-emphasis)',
202
- 'line-height': 'var(--line-height-xl)',
203
- },
204
- '.typo-text-lg-regular': {
205
- 'font-size': 'var(--font-size-lg)',
206
- 'font-weight': 'var(--font-weight-low-emphasis)',
207
- 'line-height': 'var(--line-height-lg)',
208
- },
209
- '.typo-text-lg-medium': {
210
- 'font-size': 'var(--font-size-lg)',
211
- 'font-weight': 'var(--font-weight-medium-emphasis)',
212
- 'line-height': 'var(--line-height-lg)',
213
- },
214
- '.typo-text-lg-bold': {
215
- 'font-size': 'var(--font-size-lg)',
216
- 'font-weight': 'var(--font-weight-high-emphasis)',
217
- 'line-height': 'var(--line-height-lg)',
218
- },
219
- '.typo-text-md-regular': {
220
- 'font-size': 'var(--font-size-md)',
221
- 'font-weight': 'var(--font-weight-low-emphasis)',
222
- 'line-height': 'var(--line-height-base)',
223
- },
224
- '.typo-text-md-medium': {
225
- 'font-size': 'var(--font-size-md)',
226
- 'font-weight': 'var(--font-weight-medium-emphasis)',
227
- 'line-height': 'var(--line-height-base)',
228
- },
229
- '.typo-text-md-bold': {
230
- 'font-size': 'var(--font-size-md)',
231
- 'font-weight': 'var(--font-weight-high-emphasis)',
232
- 'line-height': 'var(--line-height-base)',
233
- },
234
- '.typo-text-sm-regular': {
235
- 'font-size': 'var(--font-size-sm)',
236
- 'font-weight': 'var(--font-weight-low-emphasis)',
237
- 'line-height': 'var(--line-height-sm)',
238
- },
239
- '.typo-text-sm-medium': {
240
- 'font-size': 'var(--font-size-sm)',
241
- 'font-weight': 'var(--font-weight-medium-emphasis)',
242
- 'line-height': 'var(--line-height-sm)',
243
- },
244
- '.typo-text-sm-bold': {
245
- 'font-size': 'var(--font-size-sm)',
246
- 'font-weight': 'var(--font-weight-high-emphasis)',
247
- 'line-height': 'var(--line-height-sm)',
248
- },
249
- '.typo-text-xs-regular': {
250
- 'font-size': 'var(--font-size-xs)',
251
- 'font-weight': 'var(--font-weight-low-emphasis)',
252
- 'line-height': 'var(--line-height-xs)',
253
- },
254
- '.typo-text-xs-medium': {
255
- 'font-size': 'var(--font-size-xs)',
256
- 'font-weight': 'var(--font-weight-medium-emphasis)',
257
- 'line-height': 'var(--line-height-xs)',
258
- },
259
- '.typo-text-xs-bold': {
260
- 'font-size': 'var(--font-size-xs)',
261
- 'font-weight': 'var(--font-weight-high-emphasis)',
262
- 'line-height': 'var(--line-height-xs)',
263
- },
264
- // Mono
265
- '.typo-mono-md-regular': {
266
- 'font-family': 'var(--font-family-default), var(--font-family-fallback), sans-serif',
267
- 'font-size': 'var(--font-size-md)',
268
- 'font-weight': 'var(--font-weight-low-emphasis)',
269
- 'line-height': 'var(--line-height-base)',
270
- },
271
- '.typo-mono-md-medium': {
272
- 'font-family': 'var(--font-family-default), var(--font-family-fallback), sans-serif',
273
- 'font-size': 'var(--font-size-md)',
274
- 'font-weight': 'var(--font-weight-medium-emphasis)',
275
- 'line-height': 'var(--line-height-base)',
276
- },
277
- '.typo-mono-md-bold': {
278
- 'font-family': 'var(--font-family-default), var(--font-family-fallback), sans-serif',
279
- 'font-size': 'var(--font-size-md)',
280
- 'font-weight': 'var(--font-weight-high-emphasis)',
281
- 'line-height': 'var(--line-height-base)',
282
- },
283
- '.typo-mono-sm-regular': {
284
- 'font-family': 'var(--font-family-default), var(--font-family-fallback), sans-serif',
285
- 'font-size': 'var(--font-size-sm)',
286
- 'font-weight': 'var(--font-weight-low-emphasis)',
287
- 'line-height': 'var(--line-height-sm)',
288
- },
289
- '.typo-mono-sm-medium': {
290
- 'font-family': 'var(--font-family-default), var(--font-family-fallback), sans-serif',
291
- 'font-size': 'var(--font-size-sm)',
292
- 'font-weight': 'var(--font-weight-medium-emphasis)',
293
- 'line-height': 'var(--line-height-sm)',
294
- },
295
- '.typo-mono-sm-bold': {
296
- 'font-family': 'var(--font-family-default), var(--font-family-fallback), sans-serif',
297
- 'font-size': 'var(--font-size-sm)',
298
- 'font-weight': 'var(--font-weight-high-emphasis)',
299
- 'line-height': 'var(--line-height-sm)',
300
- },
301
- '.typo-mono-xs-regular': {
302
- 'font-family': 'var(--font-family-default), var(--font-family-fallback), sans-serif',
303
- 'font-size': 'var(--font-size-xs)',
304
- 'font-weight': 'var(--font-weight-low-emphasis)',
305
- 'line-height': 'var(--line-height-xs)',
306
- },
307
- '.typo-mono-xs-medium': {
308
- 'font-family': 'var(--font-family-default), var(--font-family-fallback), sans-serif',
309
- 'font-size': 'var(--font-size-xs)',
310
- 'font-weight': 'var(--font-weight-medium-emphasis)',
311
- 'line-height': 'var(--line-height-xs)',
312
- },
313
- '.typo-mono-xs-bold': {
314
- 'font-family': 'var(--font-family-default), var(--font-family-fallback), sans-serif',
315
- 'font-size': 'var(--font-size-xs)',
316
- 'font-weight': 'var(--font-weight-high-emphasis)',
317
- 'line-height': 'var(--line-height-xs)',
318
- },
162
+ // Typography utilities generated programmatically
163
+ ...typographyUtilities,
319
164
  });
320
165
  });
321
166
  export default novaTailwindPlugin;
package/dist/plugin/nova-safelist.js CHANGED
@@ -313,11 +313,11 @@ const resize = [
313
313
  },
314
314
  ];
315
315
  // From the nova tailwind plugin (nova-plugin.ts)
316
- const utils = [
317
- { pattern: /^text-(high|medium|low)$/ },
318
- { pattern: /^bg-level-(00|10|20|30|40)(-hover)?$/ },
319
- { pattern: /^border-(high|medium|low)$/ },
320
- ];
316
+ /*const utils = [
317
+ { pattern: /^text-(high|medium|low)$/ },
318
+ { pattern: /^bg-level-(00|10|20|30|40)(-hover)?$/ },
319
+ { pattern: /^border-(high|medium|low)$/ },
320
+ ];*/
321
321
  // From the nova tailwind components (nova-tailwind-components.ts)
322
322
  const components = [
323
323
  ...Object.keys(NOVA_TAILWIND_COMPONENTS).filter((key) => /^\.[a-zA-Z0-9-]+$/.test(key)),
@@ -349,7 +349,7 @@ export const novaThemeSafelist = [
349
349
  ...colors,
350
350
  ...cursors,
351
351
  ...resize,
352
- ...utils,
352
+ //...utils,
353
353
  ...components,
354
354
  ...tokens,
355
355
  ];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nova-design-system/nova-base",
3
- "version": "3.16.0",
3
+ "version": "3.17.0",
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",