@volverjs/style 0.1.13 → 0.1.14

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 (12) hide show
  1. package/dist/base.css +1 -1
  2. package/dist/props/input.css +1 -1
  3. package/dist/props.css +1 -1
  4. package/dist/volver.css +1 -1
  5. package/package.json +12 -9
  6. package/src/_config.scss +3 -0
  7. package/src/_preflight.scss +336 -323
  8. package/src/settings/_input.scss +1 -1
  9. package/src/tools/_mixins.scss +1 -1
  10. package/src/utilities/tables.scss +1 -1
  11. package/src/utilities/transforms.scss +10 -1
  12. package/src/volver.scss +4 -8
package/src/_preflight.scss CHANGED
@@ -1,436 +1,449 @@
1
1
  @use 'sass:map';
2
- @use 'context' as *;
3
-
4
- :where(.preflight) {
5
- :not(.preflight-revert *) {
6
- // typography
7
- &:where(h1, h2, h3, h4, h5, h6) {
8
- @extend %vv-text !optional;
9
- @extend %vv-text--headline !optional;
10
- }
11
-
12
- &:where(h1) {
13
- @extend %vv-text--size-1 !optional;
14
- }
15
-
16
- &:where(h2) {
17
- @extend %vv-text--size-2 !optional;
18
- }
19
-
20
- &:where(h3) {
21
- @extend %vv-text--size-3 !optional;
22
- }
23
-
24
- &:where(h4) {
25
- @extend %vv-text--size-4 !optional;
26
- }
27
-
28
- &:where(h5) {
29
- @extend %vv-text--size-5 !optional;
30
- }
31
-
32
- &:where(h6) {
33
- @extend %vv-text--size-6 !optional;
34
- }
35
-
36
- &:where(p) {
37
- @extend %vv-text !optional;
38
- @extend %vv-text--copy !optional;
39
- @extend %overflow-hidden !optional;
40
- @extend %text-ellipsis !optional;
41
- }
42
-
43
- &:where(blockquote) {
44
- @extend %vv-text !optional;
45
- @extend %vv-text--quote !optional;
46
- }
47
-
48
- &:where(ul, ol) {
49
- @extend %list-inside !optional;
50
- @extend %my-sm !optional;
51
- @extend %pl-lg !optional;
52
- }
53
-
54
- &:where(ul) {
55
- @extend %list-disc !optional;
56
- }
57
2
 
58
- &:where(ol, ol[type='1']) {
59
- @extend %list-decimal !optional;
60
- }
3
+ // context
4
+ @use 'context' as *;
61
5
 
62
- &:where(ol[type='a']) {
63
- @extend %list-lower-latin !optional;
64
- }
6
+ // components
7
+ @use 'components';
65
8
 
66
- &:where(ol[type='A']) {
67
- @extend %list-upper-latin !optional;
68
- }
9
+ // utilities
10
+ @use 'utilities';
69
11
 
70
- &:where(ol[type='i']) {
71
- @extend %list-lower-roman !optional;
72
- }
12
+ @if $preflight {
13
+ :where(.preflight) {
14
+ :not(.preflight-revert *) {
15
+ // typography
16
+ &:where(h1, h2, h3, h4, h5, h6) {
17
+ @extend %vv-text !optional;
18
+ @extend %vv-text--headline !optional;
19
+ }
73
20
 
74
- &:where(ol[type='I']) {
75
- @extend %list-upper-roman !optional;
76
- }
21
+ &:where(h1) {
22
+ @extend %vv-text--size-1 !optional;
23
+ }
77
24
 
78
- &:where(li > p) {
79
- @extend %inline !optional;
80
- }
25
+ &:where(h2) {
26
+ @extend %vv-text--size-2 !optional;
27
+ }
81
28
 
82
- &:where(b, strong, th) {
83
- @extend %font-bold !optional;
84
- }
29
+ &:where(h3) {
30
+ @extend %vv-text--size-3 !optional;
31
+ }
85
32
 
86
- &:where(em, i, cite, dfn, var) {
87
- @extend %italic !optional;
88
- }
33
+ &:where(h4) {
34
+ @extend %vv-text--size-4 !optional;
35
+ }
89
36
 
90
- &:where(svg) {
91
- @extend %align-middle !optional;
92
- }
37
+ &:where(h5) {
38
+ @extend %vv-text--size-5 !optional;
39
+ }
93
40
 
94
- &:where(dfn, var) {
95
- @extend %font-serif !optional;
96
- }
41
+ &:where(h6) {
42
+ @extend %vv-text--size-6 !optional;
43
+ }
97
44
 
98
- &:where(del, s) {
99
- @extend %line-through !optional;
100
- }
45
+ &:where(p) {
46
+ @extend %vv-text !optional;
47
+ @extend %vv-text--copy !optional;
48
+ @extend %overflow-hidden !optional;
49
+ @extend %text-ellipsis !optional;
50
+ }
101
51
 
102
- &:where(ins, u, cite) {
103
- @extend %underline !optional;
104
- }
52
+ &:where(blockquote) {
53
+ @extend %vv-text !optional;
54
+ @extend %vv-text--quote !optional;
55
+ }
105
56
 
106
- &:where(abbr) {
107
- @extend %underline !optional;
108
- @extend %decoration-dotted !optional;
109
- @extend %cursor-help !optional;
110
- }
57
+ &:where(ul, ol) {
58
+ @extend %list-inside !optional;
59
+ @extend %my-sm !optional;
60
+ @extend %pl-lg !optional;
61
+ }
111
62
 
112
- &:where(code) {
113
- @extend %font-mono !optional;
114
- }
63
+ &:where(ul) {
64
+ @extend %list-disc !optional;
65
+ }
115
66
 
116
- &:where(p > code) {
117
- @extend %whitespace-nowrap !optional;
118
- }
67
+ &:where(ol, ol[type='1']) {
68
+ @extend %list-decimal !optional;
69
+ }
119
70
 
120
- &:where(sub) {
121
- @extend %align-sub !optional;
122
- @extend %text-smaller !optional;
123
- }
71
+ &:where(ol[type='a']) {
72
+ @extend %list-lower-latin !optional;
73
+ }
124
74
 
125
- &:where(sup) {
126
- @extend %align-super !optional;
127
- @extend %text-smaller !optional;
128
- }
75
+ &:where(ol[type='A']) {
76
+ @extend %list-upper-latin !optional;
77
+ }
129
78
 
130
- &:where(q) {
131
- @extend %font-serif !optional;
132
- }
79
+ &:where(ol[type='i']) {
80
+ @extend %list-lower-roman !optional;
81
+ }
133
82
 
134
- &:where(small) {
135
- @extend %text-smaller !optional;
136
- }
83
+ &:where(ol[type='I']) {
84
+ @extend %list-upper-roman !optional;
85
+ }
137
86
 
138
- &:where(mark) {
139
- @extend %bg-warning !optional;
140
- }
87
+ &:where(li > p) {
88
+ @extend %inline !optional;
89
+ }
141
90
 
142
- &:where(pre) {
143
- @extend %font-mono !optional;
144
- @extend %whitespace-pre !optional;
145
- }
91
+ &:where(b, strong, th) {
92
+ @extend %font-bold !optional;
93
+ }
146
94
 
147
- &:where(dl) {
148
- @extend %my-sm !optional;
149
- }
95
+ &:where(em, i, cite, dfn, var) {
96
+ @extend %italic !optional;
97
+ }
150
98
 
151
- &:where(dd) {
152
- @extend %ml-sm !optional;
153
- }
99
+ &:where(svg) {
100
+ @extend %align-middle !optional;
101
+ }
154
102
 
155
- &:where(hr) {
156
- @extend %my-lg !optional;
157
- @extend %border !optional;
158
- @extend %border-solid !optional;
159
- @extend %border-surface-3 !optional;
160
- }
103
+ &:where(dfn, var) {
104
+ @extend %font-serif !optional;
105
+ }
161
106
 
162
- // anchor
163
- &:where(a:not(.#{map.get($components-names, vv-button)})) {
164
- @extend %vv-text !optional;
165
- @extend %vv-text--link !optional;
107
+ &:where(del, s) {
108
+ @extend %line-through !optional;
109
+ }
166
110
 
167
- &:where(:hover) {
168
- @extend %vv-button-modifier-link--hover !optional;
111
+ &:where(ins, u, cite) {
112
+ @extend %underline !optional;
169
113
  }
170
114
 
171
- &:where(:focus) {
172
- @extend %vv-button-modifier-link--focus !optional;
115
+ &:where(abbr) {
116
+ @extend %underline !optional;
117
+ @extend %decoration-dotted !optional;
118
+ @extend %cursor-help !optional;
173
119
  }
174
120
 
175
- &:where(:focus-visible) {
176
- @extend %vv-button-modifier-link--focus-visible !optional;
121
+ &:where(code) {
122
+ @extend %font-mono !optional;
177
123
  }
178
124
 
179
- &:where(:visited) {
180
- @extend %vv-button-modifier-link--visited !optional;
125
+ &:where(p > code) {
126
+ @extend %whitespace-nowrap !optional;
181
127
  }
182
128
 
183
- &:where(:active) {
184
- @extend %vv-button-modifier-link--active !optional;
129
+ &:where(sub) {
130
+ @extend %align-sub !optional;
131
+ @extend %text-smaller !optional;
185
132
  }
186
- }
187
133
 
188
- // buttons
189
- &:where(
190
- button,
191
- input[type='button'],
192
- input[type='submit'],
193
- input[type='reset']
194
- ) {
195
- @extend %vv-button !optional;
134
+ &:where(sup) {
135
+ @extend %align-super !optional;
136
+ @extend %text-smaller !optional;
137
+ }
196
138
 
197
- &:where([type='button']) {
198
- @extend %vv-button--primary !optional;
139
+ &:where(q) {
140
+ @extend %font-serif !optional;
199
141
  }
200
142
 
201
- &:where([type='reset']) {
202
- @extend %vv-button--secondary !optional;
143
+ &:where(small) {
144
+ @extend %text-smaller !optional;
203
145
  }
204
146
 
205
- &:where(:disabled) {
206
- @extend %vv-button--disabled !optional;
147
+ &:where(mark) {
148
+ @extend %bg-warning !optional;
207
149
  }
208
150
 
209
- &:where(:hover) {
210
- @extend %vv-button--hover !optional;
151
+ &:where(pre) {
152
+ @extend %font-mono !optional;
153
+ @extend %whitespace-pre !optional;
211
154
  }
212
155
 
213
- &:where(:focus) {
214
- @extend %vv-button--focus !optional;
156
+ &:where(dl) {
157
+ @extend %my-sm !optional;
215
158
  }
216
159
 
217
- &:where(:focus-visible) {
218
- @extend %vv-button--focus-visible !optional;
160
+ &:where(dd) {
161
+ @extend %ml-sm !optional;
219
162
  }
220
163
 
221
- &:where(:visited) {
222
- @extend %vv-button--visited !optional;
164
+ &:where(hr) {
165
+ @extend %my-lg !optional;
166
+ @extend %border !optional;
167
+ @extend %border-solid !optional;
168
+ @extend %border-surface-3 !optional;
223
169
  }
224
170
 
225
- &:where(:active) {
226
- @extend %vv-button--active !optional;
171
+ // anchor
172
+ &:where(a:not(.#{map.get($components-names, vv-button)})) {
173
+ @extend %vv-text !optional;
174
+ @extend %vv-text--link !optional;
175
+
176
+ &:where(:hover) {
177
+ @extend %vv-button-modifier-link--hover !optional;
178
+ }
179
+
180
+ &:where(:focus) {
181
+ @extend %vv-button-modifier-link--focus !optional;
182
+ }
183
+
184
+ &:where(:focus-visible) {
185
+ @extend %vv-button-modifier-link--focus-visible !optional;
186
+ }
187
+
188
+ &:where(:visited) {
189
+ @extend %vv-button-modifier-link--visited !optional;
190
+ }
191
+
192
+ &:where(:active) {
193
+ @extend %vv-button-modifier-link--active !optional;
194
+ }
227
195
  }
228
196
 
229
- &
230
- + :where(
197
+ // buttons
198
+ &:where(
231
199
  button,
232
200
  input[type='button'],
233
201
  input[type='submit'],
234
202
  input[type='reset']
235
203
  ) {
236
- @extend %ml-sm !optional;
237
- }
238
- }
204
+ @extend %vv-button !optional;
239
205
 
240
- // table
241
- &:where(table) {
242
- @extend %vv-table !optional;
243
- @extend %vv-table--bordered !optional;
206
+ &:where([type='button']) {
207
+ @extend %vv-button--primary !optional;
208
+ }
244
209
 
245
- :where(tr) {
246
- @extend %vv-table__tr !optional;
247
- }
210
+ &:where([type='reset']) {
211
+ @extend %vv-button--secondary !optional;
212
+ }
248
213
 
249
- :where(td) {
250
- @extend %vv-table__td !optional;
251
- @extend %vv-table-modifier-bordered__td !optional;
252
- }
214
+ &:where(:disabled) {
215
+ @extend %vv-button--disabled !optional;
216
+ }
253
217
 
254
- :where(th) {
255
- @extend %vv-table__th !optional;
256
- @extend %vv-table-modifier-bordered__th !optional;
257
- }
218
+ &:where(:hover) {
219
+ @extend %vv-button--hover !optional;
220
+ }
258
221
 
259
- :where(caption) {
260
- @extend %vv-table__caption !optional;
261
- }
262
- }
222
+ &:where(:focus) {
223
+ @extend %vv-button--focus !optional;
224
+ }
263
225
 
264
- // progress
265
- &:where(progress) {
266
- @extend %vv-progress !optional;
267
- }
226
+ &:where(:focus-visible) {
227
+ @extend %vv-button--focus-visible !optional;
228
+ }
268
229
 
269
- // checkbox
270
- &:where(fieldset:has(input[type='checkbox'])) {
271
- @extend %vv-checkbox-group !optional;
230
+ &:where(:visited) {
231
+ @extend %vv-button--visited !optional;
232
+ }
233
+
234
+ &:where(:active) {
235
+ @extend %vv-button--active !optional;
236
+ }
272
237
 
273
- :where(legend) {
274
- @extend %vv-checkbox-group__legend !optional;
238
+ &
239
+ + :where(
240
+ button,
241
+ input[type='button'],
242
+ input[type='submit'],
243
+ input[type='reset']
244
+ ) {
245
+ @extend %ml-sm !optional;
246
+ }
275
247
  }
276
- }
277
248
 
278
- &:where(label:has(input[type='checkbox'])) {
279
- @extend %w-full !optional;
280
- @extend %vv-checkbox !optional;
249
+ // table
250
+ &:where(table) {
251
+ @extend %vv-table !optional;
252
+ @extend %vv-table--bordered !optional;
281
253
 
282
- :where(input[type='checkbox']) {
283
- @extend %vv-checkbox__input !optional;
254
+ :where(tr) {
255
+ @extend %vv-table__tr !optional;
256
+ }
284
257
 
285
- &:checked {
286
- @extend %vv-checkbox-element-input--checked !optional;
258
+ :where(td) {
259
+ @extend %vv-table__td !optional;
260
+ @extend %vv-table-modifier-bordered__td !optional;
287
261
  }
288
262
 
289
- &:indeterminate {
290
- @extend %vv-checkbox-element-input--indeterminate !optional;
263
+ :where(th) {
264
+ @extend %vv-table__th !optional;
265
+ @extend %vv-table-modifier-bordered__th !optional;
291
266
  }
292
267
 
293
- &:focus-visible {
294
- @extend %vv-checkbox-element-input--focus-visible !optional;
268
+ :where(caption) {
269
+ @extend %vv-table__caption !optional;
295
270
  }
296
271
  }
297
- }
298
272
 
299
- // switch
300
- &:where(label:has(input[type='checkbox'][role='switch'])) {
301
- @extend %vv-checkbox--switch !optional;
273
+ // progress
274
+ &:where(progress) {
275
+ @extend %vv-progress !optional;
276
+ }
302
277
 
303
- :where(input[type='checkbox'][role='switch']) {
304
- @extend %vv-checkbox-modifier-switch__input !optional;
278
+ // checkbox
279
+ &:where(fieldset:has(input[type='checkbox'])) {
280
+ @extend %vv-checkbox-group !optional;
305
281
 
306
- &:hover {
307
- @extend %vv-checkbox-modifier-switch-element-input--hover
308
- !optional;
282
+ :where(legend) {
283
+ @extend %vv-checkbox-group__legend !optional;
309
284
  }
285
+ }
310
286
 
311
- &:active {
312
- @extend %vv-checkbox-modifier-switch-element-input--active
313
- !optional;
314
- }
287
+ &:where(label:has(input[type='checkbox'])) {
288
+ @extend %w-full !optional;
289
+ @extend %vv-checkbox !optional;
315
290
 
316
- &:checked {
317
- @extend %vv-checkbox-modifier-switch-element-input--checked
318
- !optional;
319
- }
291
+ :where(input[type='checkbox']) {
292
+ @extend %vv-checkbox__input !optional;
293
+
294
+ &:checked {
295
+ @extend %vv-checkbox-element-input--checked !optional;
296
+ }
320
297
 
321
- &:focus-visible {
322
- @extend %vv-checkbox-modifier-switch-element-input--focus-visible
323
- !optional;
298
+ &:indeterminate {
299
+ @extend %vv-checkbox-element-input--indeterminate
300
+ !optional;
301
+ }
302
+
303
+ &:focus-visible {
304
+ @extend %vv-checkbox-element-input--focus-visible
305
+ !optional;
306
+ }
324
307
  }
325
308
  }
326
- }
327
309
 
328
- &:where(label:has(input[type='checkbox']:disabled)) {
329
- @extend %vv-checkbox--disabled !optional;
330
- }
310
+ // switch
311
+ &:where(label:has(input[type='checkbox'][role='switch'])) {
312
+ @extend %vv-checkbox--switch !optional;
313
+
314
+ :where(input[type='checkbox'][role='switch']) {
315
+ @extend %vv-checkbox-modifier-switch__input !optional;
316
+
317
+ &:hover {
318
+ @extend %vv-checkbox-modifier-switch-element-input--hover
319
+ !optional;
320
+ }
321
+
322
+ &:active {
323
+ @extend %vv-checkbox-modifier-switch-element-input--active
324
+ !optional;
325
+ }
331
326
 
332
- // radio
333
- &:where(fieldset:has(input[type='radio'])) {
334
- @extend %vv-radio-group !optional;
327
+ &:checked {
328
+ @extend %vv-checkbox-modifier-switch-element-input--checked
329
+ !optional;
330
+ }
335
331
 
336
- :where(legend) {
337
- @extend %vv-radio-group__legend !optional;
332
+ &:focus-visible {
333
+ @extend %vv-checkbox-modifier-switch-element-input--focus-visible
334
+ !optional;
335
+ }
336
+ }
338
337
  }
339
- }
340
338
 
341
- &:where(label:has(input[type='radio'])) {
342
- @extend %w-full !optional;
343
- @extend %vv-radio !optional;
339
+ &:where(label:has(input[type='checkbox']:disabled)) {
340
+ @extend %vv-checkbox--disabled !optional;
341
+ }
344
342
 
345
- :where(input[type='radio']) {
346
- @extend %vv-radio__input !optional;
343
+ // radio
344
+ &:where(fieldset:has(input[type='radio'])) {
345
+ @extend %vv-radio-group !optional;
347
346
 
348
- &:checked {
349
- @extend %vv-radio-element-input--checked !optional;
347
+ :where(legend) {
348
+ @extend %vv-radio-group__legend !optional;
350
349
  }
350
+ }
351
+
352
+ &:where(label:has(input[type='radio'])) {
353
+ @extend %w-full !optional;
354
+ @extend %vv-radio !optional;
351
355
 
352
- &:focus-visible {
353
- @extend %vv-radio-element-input--focus-visible !optional;
356
+ :where(input[type='radio']) {
357
+ @extend %vv-radio__input !optional;
358
+
359
+ &:checked {
360
+ @extend %vv-radio-element-input--checked !optional;
361
+ }
362
+
363
+ &:focus-visible {
364
+ @extend %vv-radio-element-input--focus-visible
365
+ !optional;
366
+ }
354
367
  }
355
368
  }
356
- }
357
369
 
358
- &:where(label:has(input[type='radio']:disabled)) {
359
- @extend %vv-radio--disabled !optional;
360
- }
370
+ &:where(label:has(input[type='radio']:disabled)) {
371
+ @extend %vv-radio--disabled !optional;
372
+ }
361
373
 
362
- // textarea
363
- &:where(label:has(+ textarea)) {
364
- @extend %vv-textarea__label !optional;
365
- }
374
+ // textarea
375
+ &:where(label:has(+ textarea)) {
376
+ @extend %vv-textarea__label !optional;
377
+ }
366
378
 
367
- &:where(textarea) {
368
- @extend %w-full !optional;
369
- @extend %vv-textarea !optional;
370
- @extend %vv-textarea__wrapper !optional;
371
- @extend %vv-textarea__input !optional;
379
+ &:where(textarea) {
380
+ @extend %w-full !optional;
381
+ @extend %vv-textarea !optional;
382
+ @extend %vv-textarea__wrapper !optional;
383
+ @extend %vv-textarea__input !optional;
384
+
385
+ &:disabled {
386
+ @extend %vv-textarea--disabled !optional;
387
+ }
372
388
 
373
- &:disabled {
374
- @extend %vv-textarea--disabled !optional;
389
+ &:read-only {
390
+ @extend %vv-textarea--readonly !optional;
391
+ }
375
392
  }
376
393
 
377
- &:read-only {
378
- @extend %vv-textarea--readonly !optional;
394
+ // select
395
+ &:where(label:has(+ select)) {
396
+ @extend %vv-select__label !optional;
379
397
  }
380
- }
381
398
 
382
- // select
383
- &:where(label:has(+ select)) {
384
- @extend %vv-select__label !optional;
385
- }
399
+ &:where(select) {
400
+ @extend %w-full !optional;
401
+ @extend %vv-select !optional;
402
+ @extend %vv-select__wrapper !optional;
403
+ @extend %vv-select__input !optional;
404
+ @extend %vv-select-modifier-dirty__input !optional;
386
405
 
387
- &:where(select) {
388
- @extend %w-full !optional;
389
- @extend %vv-select !optional;
390
- @extend %vv-select__wrapper !optional;
391
- @extend %vv-select__input !optional;
392
- @extend %vv-select-modifier-dirty__input !optional;
406
+ &:disabled {
407
+ @extend %vv-select--disabled !optional;
408
+ }
409
+ }
393
410
 
394
- &:disabled {
395
- @extend %vv-select--disabled !optional;
411
+ // input text
412
+ &:where(
413
+ label:has(
414
+ + input:not(
415
+ [type='radio'],
416
+ [type='checkbox'],
417
+ [type='button'],
418
+ [type='submit'],
419
+ [type='reset']
420
+ )
421
+ )
422
+ ) {
423
+ @extend %vv-input-text__label !optional;
396
424
  }
397
- }
398
425
 
399
- // input text
400
- &:where(
401
- label:has(
402
- + input:not(
403
- [type='radio'],
404
- [type='checkbox'],
405
- [type='button'],
406
- [type='submit'],
407
- [type='reset']
408
- )
409
- )
410
- ) {
411
- @extend %vv-input-text__label !optional;
412
- }
426
+ &:where(
427
+ input:not(
428
+ [type='radio'],
429
+ [type='checkbox'],
430
+ [type='button'],
431
+ [type='submit'],
432
+ [type='reset']
433
+ )
434
+ ) {
435
+ @extend %w-full !optional;
436
+ @extend %vv-input-text !optional;
437
+ @extend %vv-input-text__wrapper !optional;
438
+ @extend %vv-input-text__input !optional;
439
+
440
+ &:disabled {
441
+ @extend %vv-input-text--disabled !optional;
442
+ }
413
443
 
414
- &:where(
415
- input:not(
416
- [type='radio'],
417
- [type='checkbox'],
418
- [type='button'],
419
- [type='submit'],
420
- [type='reset']
421
- )
422
- ) {
423
- @extend %w-full !optional;
424
- @extend %vv-input-text !optional;
425
- @extend %vv-input-text__wrapper !optional;
426
- @extend %vv-input-text__input !optional;
427
-
428
- &:disabled {
429
- @extend %vv-input-text--disabled !optional;
430
- }
431
-
432
- &:read-only {
433
- @extend %vv-input-text--readonly !optional;
444
+ &:read-only {
445
+ @extend %vv-input-text--readonly !optional;
446
+ }
434
447
  }
435
448
  }
436
449
  }