@nova-design-system/nova-base 3.16.0 → 3.18.0-beta.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 (10) hide show
  1. package/assets/icons/icon-sprite.svg +1 -1
  2. package/dist/cjs/plugin/nova-plugin.js +111 -239
  3. package/dist/cjs/plugin/nova-safelist.js +6 -6
  4. package/dist/css/ocean.css +1 -0
  5. package/dist/css/spark.css +1 -0
  6. package/dist/js/primitives.d.ts +1 -0
  7. package/dist/js/primitives.js +1 -0
  8. package/dist/plugin/nova-plugin.js +105 -260
  9. package/dist/plugin/nova-safelist.js +6 -6
  10. package/package.json +1 -1
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.18.0-beta.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",