@volverjs/style 0.1.12 → 0.1.14

package/src/_preflight.scss

@@ -1,436 +1,449 @@
 @use 'sass:map';
-@use 'context' as *;
-
-:where(.preflight) {
-	:not(.preflight-revert *) {
-		// typography
-		&:where(h1, h2, h3, h4, h5, h6) {
-			@extend %vv-text !optional;
-			@extend %vv-text--headline !optional;
-		}
-
-		&:where(h1) {
-			@extend %vv-text--size-1 !optional;
-		}
-
-		&:where(h2) {
-			@extend %vv-text--size-2 !optional;
-		}
-
-		&:where(h3) {
-			@extend %vv-text--size-3 !optional;
-		}
-
-		&:where(h4) {
-			@extend %vv-text--size-4 !optional;
-		}
-
-		&:where(h5) {
-			@extend %vv-text--size-5 !optional;
-		}
-
-		&:where(h6) {
-			@extend %vv-text--size-6 !optional;
-		}
-
-		&:where(p) {
-			@extend %vv-text !optional;
-			@extend %vv-text--copy !optional;
-			@extend %overflow-hidden !optional;
-			@extend %text-ellipsis !optional;
-		}
-
-		&:where(blockquote) {
-			@extend %vv-text !optional;
-			@extend %vv-text--quote !optional;
-		}
-
-		&:where(ul, ol) {
-			@extend %list-inside !optional;
-			@extend %my-sm !optional;
-			@extend %pl-lg !optional;
-		}
-
-		&:where(ul) {
-			@extend %list-disc !optional;
-		}
 
-		&:where(ol, ol[type='1']) {
-			@extend %list-decimal !optional;
-		}
+// context
+@use 'context' as *;
 
-		&:where(ol[type='a']) {
-			@extend %list-lower-latin !optional;
-		}
+// components
+@use 'components';
 
-		&:where(ol[type='A']) {
-			@extend %list-upper-latin !optional;
-		}
+// utilities
+@use 'utilities';
 
-		&:where(ol[type='i']) {
-			@extend %list-lower-roman !optional;
-		}
+@if $preflight {
+	:where(.preflight) {
+		:not(.preflight-revert *) {
+			// typography
+			&:where(h1, h2, h3, h4, h5, h6) {
+				@extend %vv-text !optional;
+				@extend %vv-text--headline !optional;
+			}
 
-		&:where(ol[type='I']) {
-			@extend %list-upper-roman !optional;
-		}
+			&:where(h1) {
+				@extend %vv-text--size-1 !optional;
+			}
 
-		&:where(li > p) {
-			@extend %inline !optional;
-		}
+			&:where(h2) {
+				@extend %vv-text--size-2 !optional;
+			}
 
-		&:where(b, strong, th) {
-			@extend %font-bold !optional;
-		}
+			&:where(h3) {
+				@extend %vv-text--size-3 !optional;
+			}
 
-		&:where(em, i, cite, dfn, var) {
-			@extend %italic !optional;
-		}
+			&:where(h4) {
+				@extend %vv-text--size-4 !optional;
+			}
 
-		&:where(svg) {
-			@extend %align-middle !optional;
-		}
+			&:where(h5) {
+				@extend %vv-text--size-5 !optional;
+			}
 
-		&:where(dfn, var) {
-			@extend %font-serif !optional;
-		}
+			&:where(h6) {
+				@extend %vv-text--size-6 !optional;
+			}
 
-		&:where(del, s) {
-			@extend %line-through !optional;
-		}
+			&:where(p) {
+				@extend %vv-text !optional;
+				@extend %vv-text--copy !optional;
+				@extend %overflow-hidden !optional;
+				@extend %text-ellipsis !optional;
+			}
 
-		&:where(ins, u, cite) {
-			@extend %underline !optional;
-		}
+			&:where(blockquote) {
+				@extend %vv-text !optional;
+				@extend %vv-text--quote !optional;
+			}
 
-		&:where(abbr) {
-			@extend %underline !optional;
-			@extend %decoration-dotted !optional;
-			@extend %cursor-help !optional;
-		}
+			&:where(ul, ol) {
+				@extend %list-inside !optional;
+				@extend %my-sm !optional;
+				@extend %pl-lg !optional;
+			}
 
-		&:where(code) {
-			@extend %font-mono !optional;
-		}
+			&:where(ul) {
+				@extend %list-disc !optional;
+			}
 
-		&:where(p > code) {
-			@extend %whitespace-nowrap !optional;
-		}
+			&:where(ol, ol[type='1']) {
+				@extend %list-decimal !optional;
+			}
 
-		&:where(sub) {
-			@extend %align-sub !optional;
-			@extend %text-smaller !optional;
-		}
+			&:where(ol[type='a']) {
+				@extend %list-lower-latin !optional;
+			}
 
-		&:where(sup) {
-			@extend %align-super !optional;
-			@extend %text-smaller !optional;
-		}
+			&:where(ol[type='A']) {
+				@extend %list-upper-latin !optional;
+			}
 
-		&:where(q) {
-			@extend %font-serif !optional;
-		}
+			&:where(ol[type='i']) {
+				@extend %list-lower-roman !optional;
+			}
 
-		&:where(small) {
-			@extend %text-smaller !optional;
-		}
+			&:where(ol[type='I']) {
+				@extend %list-upper-roman !optional;
+			}
 
-		&:where(mark) {
-			@extend %bg-warning !optional;
-		}
+			&:where(li > p) {
+				@extend %inline !optional;
+			}
 
-		&:where(pre) {
-			@extend %font-mono !optional;
-			@extend %whitespace-pre !optional;
-		}
+			&:where(b, strong, th) {
+				@extend %font-bold !optional;
+			}
 
-		&:where(dl) {
-			@extend %my-sm !optional;
-		}
+			&:where(em, i, cite, dfn, var) {
+				@extend %italic !optional;
+			}
 
-		&:where(dd) {
-			@extend %ml-sm !optional;
-		}
+			&:where(svg) {
+				@extend %align-middle !optional;
+			}
 
-		&:where(hr) {
-			@extend %my-lg !optional;
-			@extend %border !optional;
-			@extend %border-solid !optional;
-			@extend %border-surface-3 !optional;
-		}
+			&:where(dfn, var) {
+				@extend %font-serif !optional;
+			}
 
-		// anchor
-		&:where(a:not(.#{map.get($components-names, vv-button)})) {
-			@extend %vv-text !optional;
-			@extend %vv-text--link !optional;
+			&:where(del, s) {
+				@extend %line-through !optional;
+			}
 
-			&:where(:hover) {
-				@extend %vv-button-modifier-link--hover !optional;
+			&:where(ins, u, cite) {
+				@extend %underline !optional;
 			}
 
-			&:where(:focus) {
-				@extend %vv-button-modifier-link--focus !optional;
+			&:where(abbr) {
+				@extend %underline !optional;
+				@extend %decoration-dotted !optional;
+				@extend %cursor-help !optional;
 			}
 
-			&:where(:focus-visible) {
-				@extend %vv-button-modifier-link--focus-visible !optional;
+			&:where(code) {
+				@extend %font-mono !optional;
 			}
 
-			&:where(:visited) {
-				@extend %vv-button-modifier-link--visited !optional;
+			&:where(p > code) {
+				@extend %whitespace-nowrap !optional;
 			}
 
-			&:where(:active) {
-				@extend %vv-button-modifier-link--active !optional;
+			&:where(sub) {
+				@extend %align-sub !optional;
+				@extend %text-smaller !optional;
 			}
-		}
 
-		// buttons
-		&:where(
-				button,
-				input[type='button'],
-				input[type='submit'],
-				input[type='reset']
-			) {
-			@extend %vv-button !optional;
+			&:where(sup) {
+				@extend %align-super !optional;
+				@extend %text-smaller !optional;
+			}
 
-			&:where([type='button']) {
-				@extend %vv-button--primary !optional;
+			&:where(q) {
+				@extend %font-serif !optional;
 			}
 
-			&:where([type='reset']) {
-				@extend %vv-button--secondary !optional;
+			&:where(small) {
+				@extend %text-smaller !optional;
 			}
 
-			&:where(:disabled) {
-				@extend %vv-button--disabled !optional;
+			&:where(mark) {
+				@extend %bg-warning !optional;
 			}
 
-			&:where(:hover) {
-				@extend %vv-button--hover !optional;
+			&:where(pre) {
+				@extend %font-mono !optional;
+				@extend %whitespace-pre !optional;
 			}
 
-			&:where(:focus) {
-				@extend %vv-button--focus !optional;
+			&:where(dl) {
+				@extend %my-sm !optional;
 			}
 
-			&:where(:focus-visible) {
-				@extend %vv-button--focus-visible !optional;
+			&:where(dd) {
+				@extend %ml-sm !optional;
 			}
 
-			&:where(:visited) {
-				@extend %vv-button--visited !optional;
+			&:where(hr) {
+				@extend %my-lg !optional;
+				@extend %border !optional;
+				@extend %border-solid !optional;
+				@extend %border-surface-3 !optional;
 			}
 
-			&:where(:active) {
-				@extend %vv-button--active !optional;
+			// anchor
+			&:where(a:not(.#{map.get($components-names, vv-button)})) {
+				@extend %vv-text !optional;
+				@extend %vv-text--link !optional;
+
+				&:where(:hover) {
+					@extend %vv-button-modifier-link--hover !optional;
+				}
+
+				&:where(:focus) {
+					@extend %vv-button-modifier-link--focus !optional;
+				}
+
+				&:where(:focus-visible) {
+					@extend %vv-button-modifier-link--focus-visible !optional;
+				}
+
+				&:where(:visited) {
+					@extend %vv-button-modifier-link--visited !optional;
+				}
+
+				&:where(:active) {
+					@extend %vv-button-modifier-link--active !optional;
+				}
 			}
 
-			&
-				+ :where(
+			// buttons
+			&:where(
 					button,
 					input[type='button'],
 					input[type='submit'],
 					input[type='reset']
 				) {
-				@extend %ml-sm !optional;
-			}
-		}
+				@extend %vv-button !optional;
 
-		// table
-		&:where(table) {
-			@extend %vv-table !optional;
-			@extend %vv-table--bordered !optional;
+				&:where([type='button']) {
+					@extend %vv-button--primary !optional;
+				}
 
-			:where(tr) {
-				@extend %vv-table__tr !optional;
-			}
+				&:where([type='reset']) {
+					@extend %vv-button--secondary !optional;
+				}
 
-			:where(td) {
-				@extend %vv-table__td !optional;
-				@extend %vv-table-modifier-bordered__td !optional;
-			}
+				&:where(:disabled) {
+					@extend %vv-button--disabled !optional;
+				}
 
-			:where(th) {
-				@extend %vv-table__th !optional;
-				@extend %vv-table-modifier-bordered__th !optional;
-			}
+				&:where(:hover) {
+					@extend %vv-button--hover !optional;
+				}
 
-			:where(caption) {
-				@extend %vv-table__caption !optional;
-			}
-		}
+				&:where(:focus) {
+					@extend %vv-button--focus !optional;
+				}
 
-		// progress
-		&:where(progress) {
-			@extend %vv-progress !optional;
-		}
+				&:where(:focus-visible) {
+					@extend %vv-button--focus-visible !optional;
+				}
 
-		// checkbox
-		&:where(fieldset:has(input[type='checkbox'])) {
-			@extend %vv-checkbox-group !optional;
+				&:where(:visited) {
+					@extend %vv-button--visited !optional;
+				}
+
+				&:where(:active) {
+					@extend %vv-button--active !optional;
+				}
 
-			:where(legend) {
-				@extend %vv-checkbox-group__legend !optional;
+				&
+					+ :where(
+						button,
+						input[type='button'],
+						input[type='submit'],
+						input[type='reset']
+					) {
+					@extend %ml-sm !optional;
+				}
 			}
-		}
 
-		&:where(label:has(input[type='checkbox'])) {
-			@extend %w-full !optional;
-			@extend %vv-checkbox !optional;
+			// table
+			&:where(table) {
+				@extend %vv-table !optional;
+				@extend %vv-table--bordered !optional;
 
-			:where(input[type='checkbox']) {
-				@extend %vv-checkbox__input !optional;
+				:where(tr) {
+					@extend %vv-table__tr !optional;
+				}
 
-				&:checked {
-					@extend %vv-checkbox-element-input--checked !optional;
+				:where(td) {
+					@extend %vv-table__td !optional;
+					@extend %vv-table-modifier-bordered__td !optional;
 				}
 
-				&:indeterminate {
-					@extend %vv-checkbox-element-input--indeterminate !optional;
+				:where(th) {
+					@extend %vv-table__th !optional;
+					@extend %vv-table-modifier-bordered__th !optional;
 				}
 
-				&:focus-visible {
-					@extend %vv-checkbox-element-input--focus-visible !optional;
+				:where(caption) {
+					@extend %vv-table__caption !optional;
 				}
 			}
-		}
 
-		// switch
-		&:where(label:has(input[type='checkbox'][role='switch'])) {
-			@extend %vv-checkbox--switch !optional;
+			// progress
+			&:where(progress) {
+				@extend %vv-progress !optional;
+			}
 
-			:where(input[type='checkbox'][role='switch']) {
-				@extend %vv-checkbox-modifier-switch__input !optional;
+			// checkbox
+			&:where(fieldset:has(input[type='checkbox'])) {
+				@extend %vv-checkbox-group !optional;
 
-				&:hover {
-					@extend %vv-checkbox-modifier-switch-element-input--hover
-							!optional;
+				:where(legend) {
+					@extend %vv-checkbox-group__legend !optional;
 				}
+			}
 
-				&:active {
-					@extend %vv-checkbox-modifier-switch-element-input--active
-							!optional;
-				}
+			&:where(label:has(input[type='checkbox'])) {
+				@extend %w-full !optional;
+				@extend %vv-checkbox !optional;
 
-				&:checked {
-					@extend %vv-checkbox-modifier-switch-element-input--checked
-							!optional;
-				}
+				:where(input[type='checkbox']) {
+					@extend %vv-checkbox__input !optional;
+
+					&:checked {
+						@extend %vv-checkbox-element-input--checked !optional;
+					}
 
-				&:focus-visible {
-					@extend %vv-checkbox-modifier-switch-element-input--focus-visible
-							!optional;
+					&:indeterminate {
+						@extend %vv-checkbox-element-input--indeterminate
+								!optional;
+					}
+
+					&:focus-visible {
+						@extend %vv-checkbox-element-input--focus-visible
+								!optional;
+					}
 				}
 			}
-		}
 
-		&:where(label:has(input[type='checkbox']:disabled)) {
-			@extend %vv-checkbox--disabled !optional;
-		}
+			// switch
+			&:where(label:has(input[type='checkbox'][role='switch'])) {
+				@extend %vv-checkbox--switch !optional;
+
+				:where(input[type='checkbox'][role='switch']) {
+					@extend %vv-checkbox-modifier-switch__input !optional;
+
+					&:hover {
+						@extend %vv-checkbox-modifier-switch-element-input--hover
+								!optional;
+					}
+
+					&:active {
+						@extend %vv-checkbox-modifier-switch-element-input--active
+								!optional;
+					}
 
-		// radio
-		&:where(fieldset:has(input[type='radio'])) {
-			@extend %vv-radio-group !optional;
+					&:checked {
+						@extend %vv-checkbox-modifier-switch-element-input--checked
+								!optional;
+					}
 
-			:where(legend) {
-				@extend %vv-radio-group__legend !optional;
+					&:focus-visible {
+						@extend %vv-checkbox-modifier-switch-element-input--focus-visible
+								!optional;
+					}
+				}
 			}
-		}
 
-		&:where(label:has(input[type='radio'])) {
-			@extend %w-full !optional;
-			@extend %vv-radio !optional;
+			&:where(label:has(input[type='checkbox']:disabled)) {
+				@extend %vv-checkbox--disabled !optional;
+			}
 
-			:where(input[type='radio']) {
-				@extend %vv-radio__input !optional;
+			// radio
+			&:where(fieldset:has(input[type='radio'])) {
+				@extend %vv-radio-group !optional;
 
-				&:checked {
-					@extend %vv-radio-element-input--checked !optional;
+				:where(legend) {
+					@extend %vv-radio-group__legend !optional;
 				}
+			}
+
+			&:where(label:has(input[type='radio'])) {
+				@extend %w-full !optional;
+				@extend %vv-radio !optional;
 
-				&:focus-visible {
-					@extend %vv-radio-element-input--focus-visible !optional;
+				:where(input[type='radio']) {
+					@extend %vv-radio__input !optional;
+
+					&:checked {
+						@extend %vv-radio-element-input--checked !optional;
+					}
+
+					&:focus-visible {
+						@extend %vv-radio-element-input--focus-visible
+								!optional;
+					}
 				}
 			}
-		}
 
-		&:where(label:has(input[type='radio']:disabled)) {
-			@extend %vv-radio--disabled !optional;
-		}
+			&:where(label:has(input[type='radio']:disabled)) {
+				@extend %vv-radio--disabled !optional;
+			}
 
-		// textarea
-		&:where(label:has(+ textarea)) {
-			@extend %vv-textarea__label !optional;
-		}
+			// textarea
+			&:where(label:has(+ textarea)) {
+				@extend %vv-textarea__label !optional;
+			}
 
-		&:where(textarea) {
-			@extend %w-full !optional;
-			@extend %vv-textarea !optional;
-			@extend %vv-textarea__wrapper !optional;
-			@extend %vv-textarea__input !optional;
+			&:where(textarea) {
+				@extend %w-full !optional;
+				@extend %vv-textarea !optional;
+				@extend %vv-textarea__wrapper !optional;
+				@extend %vv-textarea__input !optional;
+
+				&:disabled {
+					@extend %vv-textarea--disabled !optional;
+				}
 
-			&:disabled {
-				@extend %vv-textarea--disabled !optional;
+				&:read-only {
+					@extend %vv-textarea--readonly !optional;
+				}
 			}
 
-			&:read-only {
-				@extend %vv-textarea--readonly !optional;
+			// select
+			&:where(label:has(+ select)) {
+				@extend %vv-select__label !optional;
 			}
-		}
 
-		// select
-		&:where(label:has(+ select)) {
-			@extend %vv-select__label !optional;
-		}
+			&:where(select) {
+				@extend %w-full !optional;
+				@extend %vv-select !optional;
+				@extend %vv-select__wrapper !optional;
+				@extend %vv-select__input !optional;
+				@extend %vv-select-modifier-dirty__input !optional;
 
-		&:where(select) {
-			@extend %w-full !optional;
-			@extend %vv-select !optional;
-			@extend %vv-select__wrapper !optional;
-			@extend %vv-select__input !optional;
-			@extend %vv-select-modifier-dirty__input !optional;
+				&:disabled {
+					@extend %vv-select--disabled !optional;
+				}
+			}
 
-			&:disabled {
-				@extend %vv-select--disabled !optional;
+			// input text
+			&:where(
+					label:has(
+							+ input:not(
+									[type='radio'],
+									[type='checkbox'],
+									[type='button'],
+									[type='submit'],
+									[type='reset']
+								)
+						)
+				) {
+				@extend %vv-input-text__label !optional;
 			}
-		}
 
-		// input text
-		&:where(
-				label:has(
-						+ input:not(
-								[type='radio'],
-								[type='checkbox'],
-								[type='button'],
-								[type='submit'],
-								[type='reset']
-							)
-					)
-			) {
-			@extend %vv-input-text__label !optional;
-		}
+			&:where(
+					input:not(
+							[type='radio'],
+							[type='checkbox'],
+							[type='button'],
+							[type='submit'],
+							[type='reset']
+						)
+				) {
+				@extend %w-full !optional;
+				@extend %vv-input-text !optional;
+				@extend %vv-input-text__wrapper !optional;
+				@extend %vv-input-text__input !optional;
+
+				&:disabled {
+					@extend %vv-input-text--disabled !optional;
+				}
 
-		&:where(
-				input:not(
-						[type='radio'],
-						[type='checkbox'],
-						[type='button'],
-						[type='submit'],
-						[type='reset']
-					)
-			) {
-			@extend %w-full !optional;
-			@extend %vv-input-text !optional;
-			@extend %vv-input-text__wrapper !optional;
-			@extend %vv-input-text__input !optional;
-
-			&:disabled {
-				@extend %vv-input-text--disabled !optional;
-			}
-
-			&:read-only {
-				@extend %vv-input-text--readonly !optional;
+				&:read-only {
+					@extend %vv-input-text--readonly !optional;
+				}
 			}
 		}
 	}