@volverjs/style 0.1.2-beta.8 → 0.1.2

package/src/_preflight.scss

@@ -1,4 +1,7 @@
-:where(:host, :root, [class*='theme']) {
+@use 'sass:map';
+@use 'context' as *;
+
+:where(:host, :root, .theme) {
 	accent-color: var(--color-brand);
 	background: var(--color-surface);
 	caret-color: var(--color-brand);
@@ -9,343 +12,401 @@
 }
 
 :where(.preflight) {
-	// 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;
-	}
-
-	: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;
-	}
+	:not(.preflight-revert *) {
+		// typography
+		&:where(h1, h2, h3, h4, h5, h6) {
+			@extend %vv-text !optional;
+			@extend %vv-text--headline !optional;
+		}
 
-	:where(ol) {
-		@extend %list-decimal !optional;
-	}
+		&:where(h1) {
+			@extend %vv-text--size-1 !optional;
+		}
 
-	:where(b, strong, th) {
-		@extend %font-bold !optional;
-	}
+		&:where(h2) {
+			@extend %vv-text--size-2 !optional;
+		}
 
-	:where(em, i, cite, dfn, var) {
-		@extend %italic !optional;
-	}
+		&:where(h3) {
+			@extend %vv-text--size-3 !optional;
+		}
 
-	:where(dfn, var) {
-		@extend %font-serif !optional;
-	}
+		&:where(h4) {
+			@extend %vv-text--size-4 !optional;
+		}
 
-	:where(del, s) {
-		@extend %line-through !optional;
-	}
+		&:where(h5) {
+			@extend %vv-text--size-5 !optional;
+		}
 
-	:where(ins, u, cite, a) {
-		@extend %underline !optional;
-	}
+		&:where(h6) {
+			@extend %vv-text--size-6 !optional;
+		}
 
-	:where(abbr) {
-		@extend %underline !optional;
-		@extend %decoration-dotted !optional;
-	}
+		&:where(p) {
+			@extend %vv-text !optional;
+			@extend %vv-text--copy !optional;
+		}
 
-	:where(code) {
-		@extend %font-mono !optional;
-	}
+		&:where(blockquote) {
+			@extend %vv-text !optional;
+			@extend %vv-text--quote !optional;
+		}
 
-	:where(sub) {
-		@extend %align-sub !optional;
-		@extend %text-smaller !optional;
-	}
+		&:where(ul, ol) {
+			@extend %list-inside !optional;
+			@extend %my-sm !optional;
+			@extend %pl-lg !optional;
+		}
 
-	:where(sup) {
-		@extend %align-super !optional;
-		@extend %text-smaller !optional;
-	}
+		&:where(ul) {
+			@extend %list-disc !optional;
+		}
 
-	:where(q) {
-		@extend %font-serif !optional;
-	}
+		&:where(ol) {
+			@extend %list-decimal !optional;
+		}
 
-	:where(small) {
-		@extend %text-smaller !optional;
-	}
+		&:where(b, strong, th) {
+			@extend %font-bold !optional;
+		}
 
-	:where(mark) {
-		@extend %bg-warning !optional;
-	}
+		&:where(em, i, cite, dfn, var) {
+			@extend %italic !optional;
+		}
 
-	:where(pre) {
-		@extend %font-mono !optional;
-		@extend %whitespace-pre-line !optional;
-	}
+		&:where(svg) {
+			@extend %align-middle !optional;
+		}
 
-	:where(dl) {
-		@extend %my-sm !optional;
-	}
+		&:where(dfn, var) {
+			@extend %font-serif !optional;
+		}
 
-	:where(dd) {
-		@extend %ml-sm !optional;
-	}
+		&:where(del, s) {
+			@extend %line-through !optional;
+		}
 
-	:where(hr) {
-		@extend %my-lg !optional;
-		@extend %border !optional;
-		@extend %border-solid !optional;
-		@extend %border-surface-3 !optional;
-	}
+		&:where(ins, u, cite) {
+			@extend %underline !optional;
+		}
 
-	// buttons
-	:where(button, input[type='button'], input[type='submit'], input[type='reset']) {
-		@extend %vv-button !optional;
+		&:where(abbr) {
+			@extend %underline !optional;
+			@extend %decoration-dotted !optional;
+		}
 
-		&:where([type='button']) {
-			@extend %vv-button--primary !optional;
+		&:where(code) {
+			@extend %font-mono !optional;
 		}
 
-		&:where([type='reset']) {
-			@extend %vv-button--secondary !optional;
+		&:where(sub) {
+			@extend %align-sub !optional;
+			@extend %text-smaller !optional;
 		}
 
-		&:where(:disabled) {
-			@extend %vv-button--disabled !optional;
+		&:where(sup) {
+			@extend %align-super !optional;
+			@extend %text-smaller !optional;
 		}
 
-		&:where(:hover) {
-			@extend %vv-button--hover !optional;
+		&:where(q) {
+			@extend %font-serif !optional;
 		}
 
-		&:where(:focus) {
-			@extend %vv-button--focus !optional;
+		&:where(small) {
+			@extend %text-smaller !optional;
 		}
 
-		&:where(:focus-visible) {
-			@extend %vv-button--focus-visible !optional;
+		&:where(mark) {
+			@extend %bg-warning !optional;
 		}
 
-		&:where(:visited) {
-			@extend %vv-button--visited !optional;
+		&:where(pre) {
+			@extend %font-mono !optional;
+			@extend %whitespace-pre !optional;
 		}
 
-		&:where(:active) {
-			@extend %vv-button--active !optional;
+		&:where(dl) {
+			@extend %my-sm !optional;
 		}
 
-		&
-			+ :where(button, input[type='button'], input[type='submit'], input[type='reset']) {
+		&:where(dd) {
 			@extend %ml-sm !optional;
 		}
-	}
-
-	// table
-	:where(table) {
-		@extend %vv-table !optional;
 
-		:where(tr) {
-			@extend %vv-table__tr !optional;
+		&:where(hr) {
+			@extend %my-lg !optional;
+			@extend %border !optional;
+			@extend %border-solid !optional;
+			@extend %border-surface-3 !optional;
 		}
 
-		:where(td) {
-			@extend %vv-table__td !optional;
-		}
+		// anchor
+		&:where(a:not(.#{map.get($components-names, vv-button)})) {
+			@extend %vv-text !optional;
+			@extend %vv-text--link !optional;
 
-		:where(th) {
-			@extend %vv-table__th !optional;
-		}
-	}
+			&:where(:hover) {
+				@extend %vv-button-modifier-link--hover !optional;
+			}
 
-	// progress
-	:where(progress) {
-		@extend %vv-progress !optional;
-	}
+			&:where(:focus) {
+				@extend %vv-button-modifier-link--focus !optional;
+			}
 
-	// checkbox
-	:where(fieldset:has(input[type='checkbox'])) {
-		@extend %vv-input-checkbox-group !optional;
+			&:where(:focus-visible) {
+				@extend %vv-button-modifier-link--focus-visible !optional;
+			}
 
-		:where(legend) {
-			@extend %vv-input-checkbox-group__legend !optional;
+			&:where(:visited) {
+				@extend %vv-button-modifier-link--visited !optional;
+			}
+
+			&:where(:active) {
+				@extend %vv-button-modifier-link--active !optional;
+			}
 		}
-	}
 
-	:where(label:has(input[type='checkbox'])) {
-		@extend %w-full !optional;
-		@extend %vv-input-checkbox !optional;
+		// buttons
+		&:where(
+				button,
+				input[type='button'],
+				input[type='submit'],
+				input[type='reset']
+			) {
+			@extend %vv-button !optional;
+
+			&:where([type='button']) {
+				@extend %vv-button--primary !optional;
+			}
 
-		:where(input[type='checkbox']) {
-			@extend %vv-input-checkbox__input !optional;
+			&:where([type='reset']) {
+				@extend %vv-button--secondary !optional;
+			}
 
-			&:checked {
-				@extend %vv-input-checkbox-element-input--checked !optional;
+			&:where(:disabled) {
+				@extend %vv-button--disabled !optional;
 			}
 
-			&:indeterminate {
-				@extend %vv-input-checkbox-element-input--indeterminate
-						!optional;
+			&:where(:hover) {
+				@extend %vv-button--hover !optional;
 			}
 
-			&:focus-visible {
-				@extend %vv-input-checkbox-element-input--focus-visible
-						!optional;
+			&:where(:focus) {
+				@extend %vv-button--focus !optional;
 			}
-		}
-	}
 
-	// switch
-	:where(label:has(input[type='checkbox'][role='switch'])) {
-		@extend %vv-input-checkbox--switch !optional;
+			&:where(:focus-visible) {
+				@extend %vv-button--focus-visible !optional;
+			}
+
+			&:where(:visited) {
+				@extend %vv-button--visited !optional;
+			}
 
-		:where(input[type='checkbox'][role='switch']) {
-			@extend %vv-input-checkbox-modifier-switch__input !optional;
+			&:where(:active) {
+				@extend %vv-button--active !optional;
+			}
 
-			&:hover {
-				@extend %vv-input-checkbox-modifier-switch-element-input--hover
-						!optional;
+			&
+				+ :where(
+					button,
+					input[type='button'],
+					input[type='submit'],
+					input[type='reset']
+				) {
+				@extend %ml-sm !optional;
 			}
+		}
+
+		// table
+		&:where(table) {
+			@extend %vv-table !optional;
 
-			&:active {
-				@extend %vv-input-checkbox-modifier-switch-element-input--active
-						!optional;
+			:where(tr) {
+				@extend %vv-table__tr !optional;
 			}
 
-			&:checked {
-				@extend %vv-input-checkbox-modifier-switch-element-input--checked
-						!optional;
+			:where(td) {
+				@extend %vv-table__td !optional;
 			}
 
-			&:focus-visible {
-				@extend %vv-input-checkbox-modifier-switch-element-input--focus-visible
-						!optional;
+			:where(th) {
+				@extend %vv-table__th !optional;
 			}
 		}
-	}
 
-	:where(label:has(input[type='checkbox']:disabled)) {
-		@extend %vv-input-checkbox--disabled !optional;
-	}
+		// progress
+		&:where(progress) {
+			@extend %vv-progress !optional;
+		}
 
-	// radio
-	:where(fieldset:has(input[type='radio'])) {
-		@extend %vv-input-radio-group !optional;
+		// checkbox
+		&:where(fieldset:has(input[type='checkbox'])) {
+			@extend %vv-checkbox-group !optional;
 
-		:where(legend) {
-			@extend %vv-input-radio-group__legend !optional;
+			:where(legend) {
+				@extend %vv-checkbox-group__legend !optional;
+			}
 		}
-	}
 
-	:where(label:has(input[type='radio'])) {
-		@extend %w-full !optional;
-		@extend %vv-input-radio !optional;
+		&:where(label:has(input[type='checkbox'])) {
+			@extend %w-full !optional;
+			@extend %vv-checkbox !optional;
+
+			:where(input[type='checkbox']) {
+				@extend %vv-checkbox__input !optional;
 
-		:where(input[type='radio']) {
-			@extend %vv-input-radio__input !optional;
+				&:checked {
+					@extend %vv-checkbox-element-input--checked !optional;
+				}
 
-			&:checked {
-				@extend %vv-input-radio-element-input--checked !optional;
+				&:indeterminate {
+					@extend %vv-checkbox-element-input--indeterminate !optional;
+				}
+
+				&:focus-visible {
+					@extend %vv-checkbox-element-input--focus-visible !optional;
+				}
 			}
+		}
+
+		// switch
+		&:where(label:has(input[type='checkbox'][role='switch'])) {
+			@extend %vv-checkbox--switch !optional;
 
-			&:focus-visible {
-				@extend %vv-input-radio-element-input--focus-visible !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;
+				}
+
+				&:checked {
+					@extend %vv-checkbox-modifier-switch-element-input--checked
+							!optional;
+				}
+
+				&:focus-visible {
+					@extend %vv-checkbox-modifier-switch-element-input--focus-visible
+							!optional;
+				}
 			}
 		}
-	}
 
-	:where(label:has(input[type='radio']:disabled)) {
-		@extend %vv-input-radio--disabled !optional;
-	}
+		&:where(label:has(input[type='checkbox']:disabled)) {
+			@extend %vv-checkbox--disabled !optional;
+		}
 
-	// textarea
-	:where(label:has(+ textarea)) {
-		@extend %vv-textarea__label !optional;
-	}
+		// radio
+		&:where(fieldset:has(input[type='radio'])) {
+			@extend %vv-radio-group !optional;
 
-	:where(textarea) {
-		@extend %w-full !optional;
-		@extend %vv-textarea !optional;
-		@extend %vv-textarea__wrapper !optional;
-		@extend %vv-textarea__input !optional;
+			:where(legend) {
+				@extend %vv-radio-group__legend !optional;
+			}
+		}
+
+		&:where(label:has(input[type='radio'])) {
+			@extend %w-full !optional;
+			@extend %vv-radio !optional;
+
+			:where(input[type='radio']) {
+				@extend %vv-radio__input !optional;
 
-		&:disabled {
-			@extend %vv-textarea--disabled !optional;
+				&:checked {
+					@extend %vv-radio-element-input--checked !optional;
+				}
+
+				&:focus-visible {
+					@extend %vv-radio-element-input--focus-visible !optional;
+				}
+			}
 		}
 
-		&:readonly {
-			@extend %vv-textarea--readonly !optional;
+		&:where(label:has(input[type='radio']:disabled)) {
+			@extend %vv-radio--disabled !optional;
 		}
-	}
 
-	// select
-	:where(label:has(+ select)) {
-		@extend %vv-select__label !optional;
-	}
+		// textarea
+		&:where(label:has(+ textarea)) {
+			@extend %vv-textarea__label !optional;
+		}
 
-	:where(select) {
-		@extend %w-full !optional;
-		@extend %vv-select !optional;
-		@extend %vv-select__wrapper !optional;
-		@extend %vv-select__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-select--disabled !optional;
+			&:readonly {
+				@extend %vv-textarea--readonly !optional;
+			}
 		}
-	}
 
-	// input text
-	:where(label:has(+ input:not([type='radio'], [type='checkbox'], [type='button'], [type='submit'], [type='reset']))) {
-		@extend %vv-input-text__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;
 
-	: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-select--disabled !optional;
+			}
+		}
 
-		&:disabled {
-			@extend %vv-input-text--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;
 		}
 
-		&:readonly {
-			@extend %vv-input-text--readonly !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;
+			}
+
+			&:readonly {
+				@extend %vv-input-text--readonly !optional;
+			}
 		}
 	}
 }