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

package/src/props/index.scss

@@ -1,12 +1,12 @@
-@import 'animation';
-@import 'background';
-@import 'borders';
-@import 'colors';
-@import 'effects';
-@import 'filters';
-@import 'layout';
-@import 'media';
-@import 'spacing';
-@import 'typography';
-@import 'sizing';
-@import 'input';
+@use 'animation';
+@use 'background';
+@use 'borders';
+@use 'colors';
+@use 'effects';
+@use 'filters';
+@use 'layout';
+@use 'media';
+@use 'spacing';
+@use 'typography';
+@use 'sizing';
+@use 'input';

package/src/props/input.scss

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 :where(:host, :root, .theme) {
 	@include spread-map-into-props($map: $input, $prefix: input);

package/src/props/layout.scss

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 :where(:host, :root, .theme) {
 	@include spread-map-into-props($map: $aspect-ratio, $prefix: aspect);

package/src/props/media.scss

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 // motion
 @custom-media --motion-ok (prefers-reduced-motion: no-preference);

package/src/props/sizing.scss

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 :where(:host, :root, .theme) {
 	@include spread-map-into-props($width, $prefix: w);

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-badge.scss

@@ -10,7 +10,6 @@ $vv-badge: (
 	[border-color]: var(--badge-background-color),
 	border-style: solid,
 	border-radius: 0.5em,
-	line-height: 2em,
 	min-height: 2em,
 	min-width: 2em,
 	padding: 0 0.5em,
@@ -50,11 +49,19 @@ $vv-badge: (
 			[color]: var(--badge-background-color),
 		),
 		white: (
-			--badge-background-color: alpha-color('white', 80%),
+			--badge-background-color:
+				hsla(
+					var(--color-white-hue) var(--color-white-saturation)
+						var(--color-white-lightness) / 80%
+				),
 			--badge-color: var(--color-black),
 		),
 		black: (
-			--badge-background-color: alpha-color('black', 80%),
+			--badge-background-color:
+				hsla(
+					var(--color-black-hue) var(--color-black-saturation)
+						var(--color-black-lightness) / 80%
+				),
 			--badge-color: var(--color-white),
 		),
 		danger: (

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

@@ -1,16 +1,17 @@
 $vv-button: (
 	--button-border-width: var(--border-2),
+	--button-line-height: var(--leading-normal),
+	[border-width]: var(--button-border-width),
+	[line-height]: var(--button-line-height),
 	position: relative,
 	background: var(--color-brand),
 	border-radius: 0.5ch,
-	[border-width]: var(--button-border-width),
 	border-style: solid,
 	border-color: var(--color-brand),
 	color: var(--color-white),
 	font-family: var(--font-sans),
 	font-weight: var(--font-semibold),
 	gap: 1ch,
-	line-height: var(--leading-normal),
 	padding-block: 0.75ch,
 	padding-inline: 1.75ch,
 	text-shadow: 0 1px 0 var(--color-gray-darken-5),
@@ -51,6 +52,7 @@ $vv-button: (
 			flex-shrink: 0,
 			stroke-linecap: round,
 			stroke-linejoin: round,
+			[min-height]: calc(var(--button-line-height) * 1em),
 		),
 		label: (
 			white-space: nowrap,
@@ -99,7 +101,7 @@ $vv-button: (
 					background: var(--color-gray-lighten-3),
 				),
 				selected: (
-					background: var(--color-gray-lighten-3),
+					background: var(--color-gray-lighten-4),
 				),
 			),
 		),
@@ -216,14 +218,14 @@ $vv-button: (
 		),
 		action: (
 			--button-border-width: var(--border),
-			font-size: 0.875em,
+			--button-line-height: var(--leading-snug),
+			font-size: var(--text-14),
 			background: var(--color-surface-1),
 			color: var(--color-word-1),
 			border-color: var(--color-word-5),
 			font-weight: var(--font-normal),
 			padding-inline: 0.75ch,
 			padding-block: 0.5ch,
-			line-height: var(--leading-snug),
 			text-shadow: none,
 			state: (
 				focus-visible: (
@@ -251,6 +253,7 @@ $vv-button: (
 		),
 		action-quiet: (
 			--button-border-width: var(--border),
+			--button-line-height: var(--leading-snug),
 			font-size: var(--text-14),
 			background: transparent,
 			color: var(--color-word-1),
@@ -258,7 +261,6 @@ $vv-button: (
 			font-weight: var(--font-normal),
 			padding-inline: 0.75ch,
 			padding-block: 0.5ch,
-			line-height: var(--leading-snug),
 			text-shadow: none,
 			state: (
 				focus-visible: (

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',
@@ -66,6 +67,7 @@ $vv-input-text: (
 			[padding]: var(--input-padding-top) var(--input-padding-right)
 				var(--input-padding-bottom) var(--input-padding-left),
 			min-height: var(--input-min-height),
+			min-width: 0,
 			pseudo: (
 				placeholder: (
 					color: var(--input-placeholder-color),
@@ -78,7 +80,11 @@ $vv-input-text: (
 					opacity: 0,
 				),
 				search-cancel-button: (
-					display: none,
+					position: absolute,
+					padding: var(--spacing-sm),
+					top: 0,
+					right: 0,
+					opacity: 0,
 				),
 				color-swatch: (
 					height: var(--spacing-20),
@@ -90,6 +96,12 @@ $vv-input-text: (
 				inner-spin-button: (
 					display: none,
 				),
+				datetime-edit-fields-wrapper: (
+					padding: 0,
+				),
+				datetime-edit-day-field: (
+					padding: 0,
+				),
 			),
 			state: (
 				disabled: (

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

@@ -13,7 +13,6 @@ $vv-nav: (
 			_alias: 'li',
 		),
 		heading-label: (
-			_alias: '[aria-hidden="true"]',
 			display: block,
 			font-weight: var(--font-semibold),
 			[padding]: var(--nav-item-padding),

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-table.scss

@@ -4,6 +4,10 @@ $vv-table: (
 	border-collapse: collapse,
 	border-color: var(--color-surface-5),
 	element: (
+		caption: (
+			_alias: 'caption',
+			caption-side: bottom,
+		),
 		tr: (
 			_alias: 'tr',
 			border-width: 0 0 1px 0,
@@ -24,12 +28,14 @@ $vv-table: (
 			font-weight: semibold,
 			font-size: var(--text-sm),
 			color: var(--color-word-2),
+			vertical-align: middle,
 			[padding]: var(--table-cell-padding),
 		),
 		td: (
 			_alias: 'td',
 			border-style: solid,
 			font-size: var(--text-xs),
+			vertical-align: middle,
 			[padding]: var(--table-cell-padding),
 		),
 	),

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/settings/components/_vv-toast.scss

@@ -93,7 +93,6 @@ $vv-toast: (
 			[animation]: pie-masks var(--toast-pie-animation-duration)
 				steps(1, end) reverse,
 			z-index: 1,
-			opactiy: 1,
 		),
 	),
 	modifier: (

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';