@volverjs/style 0.1.2-beta.3 → 0.1.2-beta.30

package/src/_preflight.scss

@@ -0,0 +1,412 @@
+@use 'sass:map';
+@use 'context' as *;
+
+:where(:host, :root, .theme) {
+	accent-color: var(--color-brand);
+	background: var(--color-surface);
+	caret-color: var(--color-brand);
+	color-scheme: var(--color-scheme);
+	color: var(--color-word);
+	scrollbar-color: var(--color-brand);
+	font-family: var(--font-sans);
+}
+
+: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;
+		}
+
+		&: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) {
+			@extend %list-decimal !optional;
+		}
+
+		&:where(b, strong, th) {
+			@extend %font-bold !optional;
+		}
+
+		&:where(em, i, cite, dfn, var) {
+			@extend %italic !optional;
+		}
+
+		&:where(svg) {
+			@extend %align-middle !optional;
+		}
+
+		&:where(dfn, var) {
+			@extend %font-serif !optional;
+		}
+
+		&:where(del, s) {
+			@extend %line-through !optional;
+		}
+
+		&:where(ins, u, cite) {
+			@extend %underline !optional;
+		}
+
+		&:where(abbr) {
+			@extend %underline !optional;
+			@extend %decoration-dotted !optional;
+		}
+
+		&:where(code) {
+			@extend %font-mono !optional;
+		}
+
+		&:where(sub) {
+			@extend %align-sub !optional;
+			@extend %text-smaller !optional;
+		}
+
+		&:where(sup) {
+			@extend %align-super !optional;
+			@extend %text-smaller !optional;
+		}
+
+		&:where(q) {
+			@extend %font-serif !optional;
+		}
+
+		&:where(small) {
+			@extend %text-smaller !optional;
+		}
+
+		&:where(mark) {
+			@extend %bg-warning !optional;
+		}
+
+		&:where(pre) {
+			@extend %font-mono !optional;
+			@extend %whitespace-pre-line !optional;
+		}
+
+		&:where(dl) {
+			@extend %my-sm !optional;
+		}
+
+		&:where(dd) {
+			@extend %ml-sm !optional;
+		}
+
+		&:where(hr) {
+			@extend %my-lg !optional;
+			@extend %border !optional;
+			@extend %border-solid !optional;
+			@extend %border-surface-3 !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;
+			}
+		}
+
+		// 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([type='reset']) {
+				@extend %vv-button--secondary !optional;
+			}
+
+			&:where(:disabled) {
+				@extend %vv-button--disabled !optional;
+			}
+
+			&:where(:hover) {
+				@extend %vv-button--hover !optional;
+			}
+
+			&:where(:focus) {
+				@extend %vv-button--focus !optional;
+			}
+
+			&:where(:focus-visible) {
+				@extend %vv-button--focus-visible !optional;
+			}
+
+			&:where(:visited) {
+				@extend %vv-button--visited !optional;
+			}
+
+			&:where(:active) {
+				@extend %vv-button--active !optional;
+			}
+
+			&
+				+ :where(
+					button,
+					input[type='button'],
+					input[type='submit'],
+					input[type='reset']
+				) {
+				@extend %ml-sm !optional;
+			}
+		}
+
+		// table
+		&:where(table) {
+			@extend %vv-table !optional;
+
+			:where(tr) {
+				@extend %vv-table__tr !optional;
+			}
+
+			:where(td) {
+				@extend %vv-table__td !optional;
+			}
+
+			:where(th) {
+				@extend %vv-table__th !optional;
+			}
+		}
+
+		// progress
+		&:where(progress) {
+			@extend %vv-progress !optional;
+		}
+
+		// checkbox
+		&:where(fieldset:has(input[type='checkbox'])) {
+			@extend %vv-checkbox-group !optional;
+
+			:where(legend) {
+				@extend %vv-checkbox-group__legend !optional;
+			}
+		}
+
+		&:where(label:has(input[type='checkbox'])) {
+			@extend %w-full !optional;
+			@extend %vv-checkbox !optional;
+
+			:where(input[type='checkbox']) {
+				@extend %vv-checkbox__input !optional;
+
+				&:checked {
+					@extend %vv-checkbox-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;
+
+			: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='checkbox']:disabled)) {
+			@extend %vv-checkbox--disabled !optional;
+		}
+
+		// radio
+		&:where(fieldset:has(input[type='radio'])) {
+			@extend %vv-radio-group !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;
+
+				&: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;
+		}
+
+		// 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;
+
+			&:disabled {
+				@extend %vv-textarea--disabled !optional;
+			}
+
+			&:readonly {
+				@extend %vv-textarea--readonly !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;
+
+			&: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;
+		}
+
+		&: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;
+			}
+		}
+	}
+}

package/src/components/index.scss

@@ -1,17 +1,25 @@
-@import 'vv-badge';
-@import 'vv-button';
-@import 'vv-button-group';
-@import 'vv-progress';
-@import 'vv-collapse';
-@import 'vv-dialog';
-@import 'vv-dropdown';
-@import 'vv-input-checkbox';
-@import 'vv-input-checkbox-group';
-@import 'vv-input-radio';
-@import 'vv-input-radio-group';
-@import 'vv-input-text';
-@import 'vv-textarea';
-@import 'vv-select';
-@import 'vv-table';
-@import 'vv-card';
-@import 'vv-text';
+@use 'vv-accordion';
+@use 'vv-alert';
+@use 'vv-badge';
+@use 'vv-breadcrumb';
+@use 'vv-button';
+@use 'vv-button-group';
+@use 'vv-card';
+@use 'vv-dialog';
+@use 'vv-dropdown';
+@use 'vv-checkbox-group';
+@use 'vv-checkbox';
+@use 'vv-radio-group';
+@use 'vv-radio';
+@use 'vv-avatar';
+@use 'vv-input-text';
+@use 'vv-nav';
+@use 'vv-progress';
+@use 'vv-select';
+@use 'vv-skeleton';
+@use 'vv-tab';
+@use 'vv-table';
+@use 'vv-text';
+@use 'vv-textarea';
+@use 'vv-tooltip';
+@use 'vv-toast';

package/src/components/vv-accordion.scss

@@ -0,0 +1,13 @@
+@use 'sass:map';
+@use '../context' as *;
+
+$component-name: map.get($components-names, vv-accordion);
+$component-map: $vv-accordion;
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
+);

package/src/components/vv-alert.scss

@@ -0,0 +1,13 @@
+@use 'sass:map';
+@use '../context' as *;
+
+$component-name: map.get($components-names, vv-alert);
+$component-map: $vv-alert;
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
+);

package/src/components/vv-avatar.scss

@@ -0,0 +1,13 @@
+@use 'sass:map';
+@use '../context' as *;
+
+$component-name: map.get($components-names, vv-avatar);
+$component-map: $vv-avatar;
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
+);

package/src/components/vv-badge.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-badge);
 $component-map: $vv-badge;
@@ -8,5 +8,6 @@ $component-map: $vv-badge;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
 );

package/src/components/vv-breadcrumb.scss

@@ -0,0 +1,13 @@
+@use 'sass:map';
+@use '../context' as *;
+
+$component-name: map.get($components-names, vv-breadcrumb);
+$component-map: $vv-breadcrumb;
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
+);

package/src/components/vv-button-group.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-button-group);
 $component-map: $vv-button-group;
@@ -11,7 +11,8 @@ $button-component-selector: '.' + $button-component-name;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
 );
 
 // if has block modifier
@@ -22,7 +23,7 @@ $button-component-selector: '.' + $button-component-name;
 				@include wrap-with-where(
 					$selector:
 						'&.active, &#{$button-component-selector}--active, &:active',
-					$enabled: $zero-specificity-for-compoenents
+					$enabled: $zero-specificity-for-components
 				) {
 					z-index: 1;
 				}
@@ -31,7 +32,7 @@ $button-component-selector: '.' + $button-component-name;
 
 		@include wrap-with-where(
 			$selector: $button-component-selector,
-			$enabled: $zero-specificity-for-compoenents
+			$enabled: $zero-specificity-for-components
 		) {
 			flex: 1;
 		}
@@ -48,7 +49,7 @@ $button-component-selector: '.' + $button-component-name;
 					// clear top border-radius for first child
 					@include wrap-with-where(
 						$selector: '&:not(:first-child)',
-						$enabled: $zero-specificity-for-compoenents
+						$enabled: $zero-specificity-for-components
 					) {
 						border-top-right-radius: 0;
 						border-top-left-radius: 0;
@@ -57,21 +58,19 @@ $button-component-selector: '.' + $button-component-name;
 					// clear bottom border-radius for last child
 					@include wrap-with-where(
 						$selector: '&:not(:last-child)',
-						$enabled: $zero-specificity-for-compoenents
+						$enabled: $zero-specificity-for-components
 					) {
 						border-bottom-right-radius: 0;
 						border-bottom-left-radius: 0;
 					}
 
 					// clear margin for inner children
-					@if map.get($vv-button, 'border-width') {
+					@if map.get($vv-button, '--button-border-width') {
 						@include wrap-with-where(
 							$selector: '&:not(:last-child, :last-child)',
-							$enabled: $zero-specificity-for-compoenents
+							$enabled: $zero-specificity-for-components
 						) {
-							margin-block: calc(
-								map.get($vv-button, 'border-width') * -1
-							);
+							margin-block: calc(var(--button-border-width) * -1);
 						}
 					}
 				}
@@ -83,7 +82,7 @@ $button-component-selector: '.' + $button-component-name;
 				// clear left border-radius for first child
 				@include wrap-with-where(
 					$selector: '&:not(:first-child)',
-					$enabled: $zero-specificity-for-compoenents
+					$enabled: $zero-specificity-for-components
 				) {
 					border-top-left-radius: 0;
 					border-bottom-left-radius: 0;
@@ -92,21 +91,19 @@ $button-component-selector: '.' + $button-component-name;
 				// clear right border-radius for first child
 				@include wrap-with-where(
 					$selector: '&:not(:last-child)',
-					$enabled: $zero-specificity-for-compoenents
+					$enabled: $zero-specificity-for-components
 				) {
 					border-top-right-radius: 0;
 					border-bottom-right-radius: 0;
 				}
 
 				// clear margin for inner children
-				@if map.get($vv-button, 'border-width') {
+				@if map.get($vv-button, '--button-border-width') {
 					@include wrap-with-where(
 						$selector: '&:not(:last-child, :last-child)',
-						$enabled: $zero-specificity-for-compoenents
+						$enabled: $zero-specificity-for-components
 					) {
-						margin-inline: calc(
-							map.get($vv-button, 'border-width') * -1
-						);
+						margin-inline: calc(var(--button-border-width) * -1);
 					}
 				}
 			}

package/src/components/vv-button.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-button);
 $component-map: $vv-button;
@@ -9,8 +9,9 @@ $component-selector: '.#{ $component-name}';
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents,
-	$custom-block: true
+	$zero-specificity: $zero-specificity-for-components,
+	$custom-block: true,
+	$bps: $breakpoints
 ) {
 	// custom block
 	%#{$component-name} {
@@ -29,15 +30,11 @@ $component-selector: '.#{ $component-name}';
 			$prefix: $component-name,
 			$props: $use-custom-props-for-components
 		);
-
-		@media (prefers-reduced-motion: reduce) {
-			transition: none;
-		}
 	}
 
 	@include wrap-with-where(
 		$selector: $component-selector,
-		$enabled: $zero-specificity-for-compoenents
+		$enabled: $zero-specificity-for-components
 	) {
 		&:where(a[href], button, input[type='button'], input[type='submit'], input[type='reset']),
 		&::file-selector-button {

package/src/components/vv-card.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-card);
 $component-map: $vv-card;
@@ -8,5 +8,6 @@ $component-map: $vv-card;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
 );

package/src/components/vv-checkbox-group.scss

@@ -0,0 +1,13 @@
+@use 'sass:map';
+@use '../context' as *;
+
+$component-name: map.get($components-names, vv-checkbox-group);
+$component-map: $vv-checkbox-group;
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
+);