@volverjs/style 0.1.2-beta.22 → 0.1.2-beta.23

package/src/props/spacing.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 :where(:host, :root, .theme) {
 	// static
@@ -11,7 +11,7 @@
 	@each $name, $sizes in $spacing-dynamic {
 		@each $breakpoint, $size in $sizes {
 			@if map-has-key($breakpoints, $breakpoint) {
-				@include media-breakpoint-up($breakpoint) {
+				@include media-breakpoint-up($breakpoint, $breakpoints) {
 					$var: $size;
 
 					// if is a static spacing

package/src/props/typography.scss

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 :where(:host, :root, .theme) {
 	// font-family
@@ -22,7 +22,7 @@
 	@each $name, $sizes in $font-size-dynamic {
 		@each $breakpoint, $size in $sizes {
 			@if map-has-key($breakpoints, $breakpoint) {
-				@include media-breakpoint-up($breakpoint) {
+				@include media-breakpoint-up($breakpoint, $breakpoints) {
 					$var: $size;
 
 					// if is a static font-size

package/src/settings/_background.scss

@@ -1,3 +1,6 @@
+@use 'colors' as *;
+@use '../tools/functions' as *;
+
 // background-attachment
 $background-attachment: (fixed, local, scroll) !default;
 

package/src/settings/_breakpoints.scss

@@ -1,3 +1,5 @@
+@use '../tools/mixins' as *;
+
 $breakpoints: (
 	xxs: 0,
 	xs: 360px,

package/src/settings/_colors.scss

@@ -1,5 +1,6 @@
 @use 'sass:color';
 @use 'sass:map';
+@use '../tools/functions' as *;
 
 // color variables
 $color-scheme: light !default;

package/src/settings/_effects.scss

@@ -17,8 +17,33 @@ $box-shadow: (
 	none: '0 0 #0000',
 ) !default;
 
-// blend-mode
-$blend-mode: (
+// opacity
+$opacity: (
+	0: 0,
+	5: 0.05,
+	10: 0.1,
+	15: 0.15,
+	20: 0.2,
+	25: 0.25,
+	30: 0.3,
+	35: 0.35,
+	40: 0.4,
+	45: 0.45,
+	50: 0.5,
+	55: 0.55,
+	60: 0.6,
+	65: 0.65,
+	70: 0.7,
+	75: 0.75,
+	80: 0.8,
+	85: 0.85,
+	90: 0.9,
+	95: 0.95,
+	100: 1,
+) !default;
+
+// mix blend-mode
+$mix-blend-mode: (
 	normal,
 	multiply,
 	screen,
@@ -37,3 +62,23 @@ $blend-mode: (
 	luminosity,
 	plus-lighter
 ) !default;
+
+// background blend-mode
+$background-blend-mode: (
+	normal,
+	multiply,
+	screen,
+	overlay,
+	darken,
+	lighten,
+	color-dodge,
+	color-burn,
+	hard-light,
+	soft-light,
+	difference,
+	exclusion,
+	hue,
+	saturation,
+	color,
+	luminosity
+) !default;

package/src/settings/_index.scss

@@ -1,41 +1,42 @@
 // utilities and custom props
-@import 'animation';
-@import 'borders';
-@import 'breakpoints';
-@import 'colors';
-@import 'layout';
-@import 'filters';
-@import 'flexbox';
-@import 'grid';
-@import 'sizing';
-@import 'spacing';
-@import 'typography';
-@import 'background';
-@import 'effects';
-@import 'input';
+@forward 'animation';
+@forward 'borders';
+@forward 'breakpoints';
+@forward 'colors';
+@forward 'layout';
+@forward 'filters';
+@forward 'flexbox';
+@forward 'grid';
+@forward 'sizing';
+@forward 'spacing';
+@forward 'typography';
+@forward 'background';
+@forward 'effects';
+@forward 'input';
+@forward 'transitions';
 
 // components
-@import 'components/vv-accordion';
-@import 'components/vv-alert';
-@import 'components/vv-badge';
-@import 'components/vv-breadcrumb';
-@import 'components/vv-button';
-@import 'components/vv-button-group';
-@import 'components/vv-card';
-@import 'components/vv-dialog';
-@import 'components/vv-dropdown';
-@import 'components/vv-input-checkbox-group';
-@import 'components/vv-input-checkbox';
-@import 'components/vv-input-radio-group';
-@import 'components/vv-input-radio';
-@import 'components/vv-avatar';
-@import 'components/vv-input-text';
-@import 'components/vv-nav';
-@import 'components/vv-progress';
-@import 'components/vv-select';
-@import 'components/vv-tab';
-@import 'components/vv-table';
-@import 'components/vv-text';
-@import 'components/vv-textarea';
-@import 'components/vv-toast';
-@import 'components/vv-tooltip';
+@forward 'components/vv-accordion';
+@forward 'components/vv-alert';
+@forward 'components/vv-badge';
+@forward 'components/vv-breadcrumb';
+@forward 'components/vv-button';
+@forward 'components/vv-button-group';
+@forward 'components/vv-card';
+@forward 'components/vv-dialog';
+@forward 'components/vv-dropdown';
+@forward 'components/vv-input-checkbox-group';
+@forward 'components/vv-input-checkbox';
+@forward 'components/vv-input-radio-group';
+@forward 'components/vv-input-radio';
+@forward 'components/vv-avatar';
+@forward 'components/vv-input-text';
+@forward 'components/vv-nav';
+@forward 'components/vv-progress';
+@forward 'components/vv-select';
+@forward 'components/vv-tab';
+@forward 'components/vv-table';
+@forward 'components/vv-text';
+@forward 'components/vv-textarea';
+@forward 'components/vv-toast';
+@forward 'components/vv-tooltip';

package/src/settings/_input.scss

@@ -12,6 +12,7 @@ $input: (
 	line-height: var(--leading-normal),
 	font-size: var(--text-16),
 	min-height: var(--spacing-50),
+	min-width: 0,
 	label: (
 		color: var(--color-word-3),
 		display: block,

package/src/settings/_transitions.scss

@@ -0,0 +1,41 @@
+// transition property
+$transition-property: (
+	none: none,
+	all: all,
+	transition:
+		'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
+	colors:
+		'color, background-color, border-color, text-decoration-color, fill, stroke',
+	opacity: opacity,
+	shadow: box-shadow,
+	transform: transform,
+) !default;
+
+// transition duration and transition delay
+$transition-duration-delay: (
+	75: 75ms,
+	100: 100ms,
+	150: 150ms,
+	200: 200ms,
+	300: 300ms,
+	500: 500ms,
+	700: 700ms,
+	1000: 1000ms,
+) !default;
+
+// transition timing function
+$transition-timing-function: (
+	linear: linear,
+	in: cubic-bezier(0.4, 0, 1, 1),
+	out: cubic-bezier(0, 0, 0.2, 1),
+	in-out: cubic-bezier(0.4, 0, 0.2, 1),
+) !default;
+
+// animation
+$animation: (
+	none: none,
+	spin: spin 1s linear infinite,
+	ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite,
+	pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite,
+	bounce: bounce 1s infinite,
+) !default;

package/src/settings/components/_vv-input-checkbox-group.scss

@@ -2,6 +2,7 @@ $vv-input-checkbox-group: (
 	display: var(--input-display),
 	flex: var(--input-flex),
 	flex-direction: var(--input-flex-direction),
+	min-width: var(--input-min-width),
 	element: (
 		legend: (
 			_alias: '> legend',

package/src/settings/components/_vv-input-checkbox.scss

@@ -8,6 +8,7 @@ $vv-input-checkbox: (
 	color: var(--input-color),
 	font-size: var(--input-font-size),
 	line-height: var(--input-line-height),
+	min-width: var(--input-min-width),
 	state: (
 		disabled: (
 			opacity: 0.3,

package/src/settings/components/_vv-input-radio-group.scss

@@ -1 +1,3 @@
+@use 'vv-input-checkbox-group' as *;
+
 $vv-input-radio-group: $vv-input-checkbox-group !default;

package/src/settings/components/_vv-input-radio.scss

@@ -8,6 +8,7 @@ $vv-input-radio: (
 	color: var(--input-color),
 	font-size: var(--input-font-size),
 	line-height: var(--input-line-height),
+	min-width: var(--input-min-width),
 	state: (
 		disabled: (
 			opacity: 0.3,

package/src/settings/components/_vv-input-text.scss

@@ -5,6 +5,7 @@ $vv-input-text: (
 	margin-bottom: var(--input-gap),
 	font-size: var(--input-font-size),
 	line-height: var(--input-line-height),
+	min-width: var(--input-min-width),
 	element: (
 		label: (
 			_alias: '> label',

package/src/settings/components/_vv-select.scss

@@ -6,6 +6,7 @@ $vv-select: (
 	font-size: var(--input-font-size),
 	line-height: var(--input-line-height),
 	user-select: none,
+	min-width: var(--input-min-width),
 	element: (
 		label: (
 			_alias: '> label',

package/src/settings/components/_vv-textarea.scss

@@ -5,6 +5,7 @@ $vv-textarea: (
 	margin-bottom: var(--input-gap),
 	font-size: var(--input-font-size),
 	line-height: var(--input-line-height),
+	min-width: var(--input-min-width),
 	element: (
 		label: (
 			_alias: '> label',

package/src/themes/dark/_context.scss

@@ -1,11 +1,11 @@
 // configuration
-@import '../../config';
+@forward '../../config';
 
 // tools (mixins, functions, recipes)
-@import '../../tools';
+@forward '../../tools';
 
 // main settings
-@import '../../settings';
+@forward '../../settings';
 
 // theme settings
-@import 'settings';
+@forward 'settings';

package/src/themes/dark/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: $dark-vv-button;

package/src/themes/dark/components/index.scss

@@ -1,2 +1 @@
-@import 'vv-button';
-@import 'vv-input-checkbox';
+@use 'vv-button';

package/src/themes/dark/props/_background.scss

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 @mixin theme-dark-bg {
 	@include spread-map-into-props($dark-background-image, 'bg');

package/src/themes/dark/props/_colors.scss

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 @mixin theme-dark-colors {
 	@include spread-map-into-props($dark-colors, 'color');

package/src/themes/dark/props/index.scss

@@ -1,2 +1,2 @@
-@import 'background';
-@import 'colors';
+@use 'background';
+@use 'colors';

package/src/themes/dark/settings/_background.scss

@@ -1,3 +1,6 @@
+@use 'colors' as *;
+@use '../../../tools/functions' as *;
+
 // background-image
 $dark-background-image: (
 	none: none,

package/src/themes/dark/settings/_colors.scss

@@ -1,5 +1,7 @@
 @use 'sass:color';
 @use 'sass:map';
+@use '../../../tools/functions' as *;
+@use '../../../settings/colors' as *;
 
 $dark-color-scheme: dark !default;
 $dark-color-brand: #1976d2 !default;

package/src/themes/dark/settings/_index.scss

@@ -1,5 +1,4 @@
-@import 'colors';
-@import 'background';
+@forward 'colors';
+@forward 'background';
 
-@import 'components/vv-button';
-@import 'components/vv-input-checkbox';
+@forward 'components/vv-button';

package/src/themes/dark/volver.scss

@@ -1,5 +1,5 @@
 // props
-@import 'props';
+@use 'props';
 
 // components
-@import 'components';
+@use 'components';

package/src/tools/_breakpoints.scss

@@ -28,7 +28,7 @@
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
 //    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    576px
-@function breakpoint-min($name, $bps: $breakpoints) {
+@function breakpoint-min($name, $bps) {
 	$min: map.get($bps, $name);
 	@return if($min != 0, $min, null);
 }
@@ -41,7 +41,7 @@
 // See https://bugs.webkit.org/show_bug.cgi?id=178261
 //    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    767.98px
-@function breakpoint-max($name, $bps: $breakpoints) {
+@function breakpoint-max($name, $bps) {
 	$next: breakpoint-next($name, $bps);
 	@return if($next, breakpoint-min($next, $bps) - 0.02, null);
 }
@@ -52,13 +52,13 @@
 //    ""  (Returns a blank string)
 //    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    "-sm"
-@function breakpoint-infix($name, $bps: $breakpoints) {
+@function breakpoint-infix($name, $bps) {
 	@return if(breakpoint-min($name, $bps) == null, '', '-#{$name}');
 }
 
 // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
 // Makes the @content apply to the given breakpoint and wider.
-@mixin media-breakpoint-up($name, $bps: $breakpoints) {
+@mixin media-breakpoint-up($name, $bps) {
 	$min: breakpoint-min($name, $bps);
 	@if $min {
 		@media (min-width: $min) {
@@ -71,7 +71,7 @@
 
 // Media of at most the maximum breakpoint width. No query for the largest breakpoint.
 // Makes the @content apply to the given breakpoint and narrower.
-@mixin media-breakpoint-down($name, $bps: $breakpoints) {
+@mixin media-breakpoint-down($name, $bps) {
 	$max: breakpoint-max($name, $bps);
 	@if $max {
 		@media (max-width: $max) {
@@ -84,7 +84,7 @@
 
 // Media that spans multiple breakpoint widths.
 // Makes the @content apply between the min and max breakpoints
-@mixin media-breakpoint-between($lower, $upper, $bps: $breakpoints) {
+@mixin media-breakpoint-between($lower, $upper, $bps) {
 	$min: breakpoint-min($lower, $bps);
 	$max: breakpoint-max($upper, $bps);
 
@@ -106,7 +106,7 @@
 // Media between the breakpoint's minimum and maximum widths.
 // No minimum for the smallest breakpoint, and no maximum for the largest one.
 // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
-@mixin media-breakpoint-only($name, $bps: $breakpoints) {
+@mixin media-breakpoint-only($name, $bps) {
 	$min: breakpoint-min($name, $bps);
 	$max: breakpoint-max($name, $bps);
 

package/src/tools/_index.scss

@@ -1,3 +1,3 @@
-@import 'functions';
-@import 'mixins';
-@import 'breakpoints';
+@forward 'functions';
+@forward 'mixins';
+@forward 'breakpoints';

package/src/tools/_mixins.scss

@@ -3,6 +3,8 @@
 @use 'sass:string';
 @use 'sass:meta';
 @use 'sass:selector';
+@use 'functions' as *;
+@use 'breakpoints' as *;
 
 // Check ascending order
 // Used to ensure the breakpoints are ordered ascending.
@@ -77,7 +79,7 @@
 		xxs: 0,
 	),
 	$prefix: '',
-	$zero-specificity: $zero-specificity-for-utilities
+	$zero-specificity: false
 ) {
 	@if (type-of($map) == 'map' or type-of($map) == 'list') and $attribute != ''
 	{
@@ -91,12 +93,14 @@
 				}
 				@if type-of($value) == 'map' and $deep {
 					@include spread-map-into-utilities(
-						$value,
-						$class,
-						$attribute,
-						$prop,
-						$key,
-						$prefix
+						$map: $value,
+						$class: $class,
+						$attribute: $attribute,
+						$prop: $prop,
+						$name: $key,
+						$bps: $bps,
+						$prefix: $prefix,
+						$zero-specificity: $zero-specificity
 					);
 				} @else {
 					$default: null;
@@ -134,7 +138,7 @@
 					}
 
 					%#{$prefix}#{$class-name} {
-						@include media-breakpoint-up($breakpoint) {
+						@include media-breakpoint-up($breakpoint, $bps) {
 							@if type-of($attribute) != 'list' {
 								$attribute: ($attribute);
 							}
@@ -170,7 +174,10 @@
 	$key: 'modifier',
 	$block: null,
 	$props: true,
-	$zero-specificity: true
+	$zero-specificity: true,
+	$bps: (
+		xxs: 0,
+	)
 ) {
 	@if not $block {
 		$block: &;
@@ -255,7 +262,10 @@
 	$block: null,
 	$modifier: null,
 	$props: true,
-	$zero-specificity: true
+	$zero-specificity: true,
+	$bps: (
+		xxs: 0,
+	)
 ) {
 	@if not $block {
 		$block: &;
@@ -360,7 +370,10 @@
 	$modifier: '',
 	$alias: null,
 	$props: true,
-	$zero-specificity: true
+	$zero-specificity: true,
+	$bps: (
+		xxs: 0,
+	)
 ) {
 	@if not $original {
 		$original: $map;
@@ -593,7 +606,9 @@
 	$key: 'breakpoint',
 	$block: null,
 	$props: true,
-	$bps: $breakpoints,
+	$bps: (
+		xxs: 0,
+	),
 	$zero-specificity: true
 ) {
 	@if not $block {
@@ -660,7 +675,10 @@
 	$postfix: '',
 	$deep: false,
 	$ignore: (),
-	$props: true
+	$props: true,
+	$bps: (
+		xxs: 0,
+	)
 ) {
 	@if type-of($map) == 'map' and $prefix != '' {
 		@each $key, $value in $map {
@@ -838,7 +856,8 @@
 	$custom-elements: false,
 	$custom-modifiers: false,
 	$custom-states: false,
-	$custom-breakpoints: false
+	$custom-breakpoints: false,
+	$bps: (xxs: 0)
 ) {
 	@if type-of($map) == 'map' and $block != '' {
 		$selector: '.' + $block;
@@ -888,7 +907,8 @@
 					$key: $elements-key,
 					$block: $selector,
 					$props: $props,
-					$zero-specificity: $zero-specificity
+					$zero-specificity: $zero-specificity,
+					$bps: $bps
 				);
 			}
 		}
@@ -902,7 +922,8 @@
 					$key: $states-key,
 					$block: $selector,
 					$props: $props,
-					$zero-specificity: $zero-specificity
+					$zero-specificity: $zero-specificity,
+					$bps: $bps
 				);
 			}
 		}
@@ -916,7 +937,8 @@
 					$key: $modifiers-key,
 					$block: $selector,
 					$props: $props,
-					$zero-specificity: $zero-specificity
+					$zero-specificity: $zero-specificity,
+					$bps: $bps
 				);
 			}
 		}
@@ -930,7 +952,8 @@
 					$key: $breakpoints-key,
 					$block: $selector,
 					$props: $props,
-					$zero-specificity: $zero-specificity
+					$zero-specificity: $zero-specificity,
+					$bps: $bps
 				);
 			}
 		}

package/src/utilities/animation.scss

@@ -1,8 +1,9 @@
-@import '../context';
+@use '../context' as *;
 
 // animate
 @include spread-map-into-utilities(
 	$map: $animate,
 	$class: 'animate',
-	$attribute: 'animation'
+	$attribute: 'animation',
+	$zero-specificity: $zero-specificity-for-utilities
 );