@nova-design-system/nova-base 3.29.0 → 3.30.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.
@@ -1,355 +0,0 @@
1
- /**
2
- * @fileoverview Tailwind safelists for Nova
3
- *
4
- * This file defines various Tailwind safelists used to compile a CSS file
5
- * containing utility classes frequently needed in Nova. The output CSS is
6
- * comprehensive and may be large. If users prefer a more lightweight approach,
7
- * they can configure Tailwind directly without using the predefined safelists.
8
- */
9
- import { spacing } from './nova-theme.js';
10
- import { NOVA_TAILWIND_TOKENS } from '../generated/nova-tailwind-tokens.js';
11
- import { NOVA_TAILWIND_COMPONENTS } from '../generated/nova-tailwind-components.js';
12
- // Enables responsive spacing modifiers for safelist variants
13
- export const responsive = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'];
14
- // Enables responsive color schemes for safelist variants
15
- export const colorSchemes = ['light', 'dark'];
16
- // Enables pointer states for safelist variants
17
- export const pointer = ['hover', 'focus', 'active'];
18
- export const padding = [
19
- {
20
- pattern: new RegExp(`^p-(${Object.keys(spacing).join('|')})$`),
21
- variants: responsive,
22
- },
23
- {
24
- pattern: new RegExp(`^py-(${Object.keys(spacing).join('|')})$`),
25
- variants: responsive,
26
- },
27
- {
28
- pattern: new RegExp(`^px-(${Object.keys(spacing).join('|')})$`),
29
- variants: responsive,
30
- },
31
- {
32
- pattern: new RegExp(`^pt-(${Object.keys(spacing).join('|')})$`),
33
- variants: responsive,
34
- },
35
- {
36
- pattern: new RegExp(`^pr-(${Object.keys(spacing).join('|')})$`),
37
- variants: responsive,
38
- },
39
- {
40
- pattern: new RegExp(`^pb-(${Object.keys(spacing).join('|')})$`),
41
- variants: responsive,
42
- },
43
- {
44
- pattern: new RegExp(`^pl-(${Object.keys(spacing).join('|')})$`),
45
- variants: responsive,
46
- },
47
- ];
48
- export const margin = [
49
- {
50
- pattern: new RegExp(`^m-(${Object.keys(spacing).join('|')}|auto)$`),
51
- variants: responsive,
52
- },
53
- {
54
- pattern: new RegExp(`^my-(${Object.keys(spacing).join('|')}|auto)$`),
55
- variants: responsive,
56
- },
57
- {
58
- pattern: new RegExp(`^mx-(${Object.keys(spacing).join('|')}|auto)$`),
59
- variants: responsive,
60
- },
61
- {
62
- pattern: new RegExp(`^mt-(${Object.keys(spacing).join('|')}|auto)$`),
63
- variants: responsive,
64
- },
65
- {
66
- pattern: new RegExp(`^mr-(${Object.keys(spacing).join('|')}|auto)$`),
67
- variants: responsive,
68
- },
69
- {
70
- pattern: new RegExp(`^mb-(${Object.keys(spacing).join('|')}|auto)$`),
71
- variants: responsive,
72
- },
73
- {
74
- pattern: new RegExp(`^ml-(${Object.keys(spacing).join('|')}|auto)$`),
75
- variants: responsive,
76
- },
77
- ];
78
- export const gap = [
79
- {
80
- pattern: new RegExp(`^gap-(${Object.keys(spacing).join('|')})$`),
81
- variants: responsive,
82
- },
83
- {
84
- pattern: new RegExp(`^gap-x-(${Object.keys(spacing).join('|')})$`),
85
- variants: responsive,
86
- },
87
- {
88
- pattern: new RegExp(`^gap-y-(${Object.keys(spacing).join('|')})$`),
89
- variants: responsive,
90
- },
91
- ];
92
- const flexBox = [
93
- { pattern: /^flex$/, variants: responsive },
94
- { pattern: /^inline-flex$/, variants: responsive },
95
- { pattern: /^flex-row$/, variants: responsive },
96
- { pattern: /^flex-row-reverse$/, variants: responsive },
97
- { pattern: /^flex-col$/, variants: responsive },
98
- { pattern: /^flex-col-reverse$/, variants: responsive },
99
- { pattern: /^flex-wrap$/, variants: responsive },
100
- { pattern: /^flex-wrap-reverse$/, variants: responsive },
101
- { pattern: /^flex-nowrap$/, variants: responsive },
102
- {
103
- pattern: /^place-content-(start|end|center|between|around|evenly)$/,
104
- variants: responsive,
105
- },
106
- { pattern: /^place-items-(start|end|center|stretch)$/, variants: responsive },
107
- {
108
- pattern: /^place-self-(auto|start|end|center|stretch)$/,
109
- variants: responsive,
110
- },
111
- {
112
- pattern: /^justify-(start|end|center|between|around|evenly)$/,
113
- variants: responsive,
114
- },
115
- {
116
- pattern: /^justify-items-(start|end|center|stretch)$/,
117
- variants: responsive,
118
- },
119
- {
120
- pattern: /^justify-self-(auto|start|end|center|stretch)$/,
121
- variants: responsive,
122
- },
123
- {
124
- pattern: /^align-(start|end|center|baseline|stretch)$/,
125
- variants: responsive,
126
- },
127
- {
128
- pattern: /^items-(start|end|center|baseline|stretch)$/,
129
- variants: responsive,
130
- },
131
- {
132
- pattern: /^self-(auto|start|end|center|baseline|stretch)$/,
133
- variants: responsive,
134
- },
135
- {
136
- pattern: /^content-(start|end|center|between|around|evenly)$/,
137
- variants: responsive,
138
- },
139
- { pattern: /^order-(\d+|first|last|none)$/, variants: responsive },
140
- { pattern: /^flex-(\d+|none|auto|initial)$/, variants: responsive },
141
- { pattern: /^grow-(0|1)$/, variants: responsive },
142
- { pattern: /^shrink-(0|1)$/, variants: responsive },
143
- ];
144
- const grid = [
145
- { pattern: /^grid$/, variants: responsive },
146
- { pattern: /^inline-grid$/, variants: responsive },
147
- { pattern: /^grid-cols-(\d+|none|auto)$/, variants: responsive },
148
- { pattern: /^grid-rows-(\d+|none|auto)$/, variants: responsive },
149
- { pattern: /^col-span-(\d+|full)$/, variants: responsive },
150
- { pattern: /^col-start-(\d+|auto)$/, variants: responsive },
151
- { pattern: /^col-end-(\d+|auto)$/, variants: responsive },
152
- { pattern: /^row-span-(\d+|full)$/, variants: responsive },
153
- { pattern: /^row-start-(\d+|auto)$/, variants: responsive },
154
- { pattern: /^row-end-(\d+|auto)$/, variants: responsive },
155
- { pattern: /^gap-(\d+|px)$/, variants: responsive },
156
- { pattern: /^gap-x-(\d+|px)$/, variants: responsive },
157
- { pattern: /^gap-y-(\d+|px)$/, variants: responsive },
158
- {
159
- pattern: /^auto-cols-(auto|min|max|fr)$/,
160
- variants: responsive,
161
- },
162
- {
163
- pattern: /^auto-rows-(auto|min|max|fr)$/,
164
- variants: responsive,
165
- },
166
- {
167
- pattern: /^place-content-(start|end|center|between|around|evenly|stretch)$/,
168
- variants: responsive,
169
- },
170
- {
171
- pattern: /^place-items-(start|end|center|stretch)$/,
172
- variants: responsive,
173
- },
174
- {
175
- pattern: /^place-self-(auto|start|end|center|stretch)$/,
176
- variants: responsive,
177
- },
178
- {
179
- pattern: /^justify-items-(start|end|center|stretch)$/,
180
- variants: responsive,
181
- },
182
- {
183
- pattern: /^justify-self-(auto|start|end|center|stretch)$/,
184
- variants: responsive,
185
- },
186
- {
187
- pattern: /^align-(start|end|center|baseline|stretch)$/,
188
- variants: responsive,
189
- },
190
- {
191
- pattern: /^items-(start|end|center|baseline|stretch)$/,
192
- variants: responsive,
193
- },
194
- {
195
- pattern: /^self-(auto|start|end|center|baseline|stretch)$/,
196
- variants: responsive,
197
- },
198
- {
199
- pattern: /^content-(start|end|center|between|around|evenly|stretch)$/,
200
- variants: responsive,
201
- },
202
- ];
203
- const spaceBetween = [
204
- {
205
- pattern: /^space-x-(\d+|px|reverse)$/,
206
- variants: responsive,
207
- },
208
- {
209
- pattern: /^space-y-(\d+|px|reverse)$/,
210
- variants: responsive,
211
- },
212
- ];
213
- const overflow = [
214
- { pattern: /^overflow-(auto|hidden|visible|scroll)$/, variants: responsive },
215
- {
216
- pattern: /^overflow-x-(auto|hidden|visible|scroll)$/,
217
- variants: responsive,
218
- },
219
- {
220
- pattern: /^overflow-y-(auto|hidden|visible|scroll)$/,
221
- variants: responsive,
222
- },
223
- ];
224
- const position = [
225
- {
226
- pattern: /^(static|fixed|absolute|relative|sticky)$/,
227
- variants: responsive,
228
- },
229
- { pattern: /^inset-(0|auto|full)$/ },
230
- { pattern: /^inset-x-(0|auto|full)$/ },
231
- { pattern: /^inset-y-(0|auto|full)$/ },
232
- { pattern: /^top-(0|auto|full)$/, variants: responsive },
233
- { pattern: /^right-(0|auto|full)$/, variants: responsive },
234
- { pattern: /^bottom-(0|auto|full)$/, variants: responsive },
235
- { pattern: /^left-(0|auto|full)$/, variants: responsive },
236
- { pattern: /^z-(\d+|auto)$/ },
237
- ];
238
- const display = [
239
- {
240
- pattern: /^(block|inline-block|inline|flex|inline-flex|table|inline-table|table-caption|table-cell|table-column|table-column-group|table-footer-group|table-header-group|table-row-group|table-row|flow-root|grid|inline-grid|contents|hidden)$/,
241
- },
242
- ];
243
- const textAlign = [
244
- { pattern: /^text-(left|center|right|justify)$/, variants: responsive },
245
- ];
246
- const textSize = [
247
- {
248
- pattern: /^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/,
249
- variants: responsive,
250
- },
251
- ];
252
- const whitespace = [
253
- {
254
- pattern: /^whitespace-(normal|nowrap|pre|pre-line|pre-wrap)$/,
255
- variants: responsive,
256
- },
257
- ];
258
- const verticalAlign = [
259
- { pattern: /^align-(baseline|top|middle|bottom|text-top|text-bottom)$/ },
260
- ];
261
- const fontWeight = [
262
- {
263
- pattern: /^font-(thin|extralight|light|normal|medium|semibold|bold|extrabold|black)$/,
264
- },
265
- ];
266
- const fontFamily = [{ pattern: /^font-(sans|serif|mono)$/ }];
267
- const borders = [
268
- { pattern: /^border$/ },
269
- { pattern: /^border-(\d+|0)$/ },
270
- { pattern: /^border-(solid|dashed|dotted|double|none)$/ },
271
- { pattern: /^border-(t|r|b|l|x|y)$/ },
272
- { pattern: /^border-(t|r|b|l|x|y)-(\d+|0)$/ },
273
- { pattern: /^rounded$/ },
274
- { pattern: /^rounded-(t|r|b|l|full|none)$/ },
275
- { pattern: /^rounded-(tl|tr|bl|br)$/ },
276
- { pattern: /^rounded-(\d+|sm|md|lg|xl|2xl|3xl)$/ },
277
- ];
278
- const width = [
279
- {
280
- pattern: /^w-(\d+|auto|full|screen|inherit|initial|max-content|min-content|revert|unset)$/,
281
- },
282
- {
283
- pattern: /^max-w-(\d+|xs|sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|full|min|max|prose|screen-(sm|md|lg|xl|2xl))$/,
284
- },
285
- ];
286
- const height = [
287
- { pattern: /^h-(\d+|auto|full|screen)$/ },
288
- {
289
- pattern: /^max-h-(\d+|xs|sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|full|min|max|prose|screen-(sm|md|lg|xl|2xl))$/,
290
- },
291
- ];
292
- const colors = [
293
- { pattern: /^bg-(\w+)$/, variants: colorSchemes },
294
- { pattern: /^text-(\w+)$/, variants: colorSchemes },
295
- {
296
- pattern: /^bg-(green|turquoise|petrol|lime|crimson|red|yellow|gray|amber|orange)-(?!(950))\d{1,3}$/,
297
- variants: colorSchemes,
298
- },
299
- {
300
- pattern: /^text-(green|turquoise|petrol|lime|crimson|red|yellow|gray|amber|orange)-(?!(950))\d{1,3}$/,
301
- variants: colorSchemes,
302
- },
303
- ];
304
- const cursors = [
305
- {
306
- pattern: /^cursor-(auto|default|pointer|wait|text|move|help|not-allowed|none|progress|crosshair|zoom-in|zoom-out|grab|grabbing|col-resize|row-resize|all-scroll)$/,
307
- },
308
- ];
309
- const resize = [
310
- {
311
- pattern: /^resize-(none|y|x)$/,
312
- variants: responsive,
313
- },
314
- ];
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
- ];*/
321
- // From the nova tailwind components (nova-tailwind-components.ts)
322
- const components = [
323
- ...Object.keys(NOVA_TAILWIND_COMPONENTS).filter((key) => /^\.[a-zA-Z0-9-]+$/.test(key)),
324
- ];
325
- // From the nova tailwind tokens (nova-tailwind-tokens.ts)
326
- const tokens = [
327
- ...Object.keys(NOVA_TAILWIND_TOKENS),
328
- { pattern: /-hover$/, variants: ['hover'] },
329
- ];
330
- export const novaThemeSafelist = [
331
- ...padding,
332
- ...margin,
333
- ...gap,
334
- ...flexBox,
335
- ...grid,
336
- ...spaceBetween,
337
- ...overflow,
338
- ...position,
339
- ...display,
340
- ...textAlign,
341
- ...textSize,
342
- ...whitespace,
343
- ...verticalAlign,
344
- ...fontWeight,
345
- ...fontFamily,
346
- ...borders,
347
- ...width,
348
- ...height,
349
- ...colors,
350
- ...cursors,
351
- ...resize,
352
- //...utils,
353
- ...components,
354
- ...tokens,
355
- ];