@volverjs/style 0.1.12-beta.2 → 0.1.12-beta.21

package/src/settings/_colors.scss

@@ -7,15 +7,15 @@ $color-scheme: light !default;
 $color-transparent: transparent !default;
 $color-black: #000 !default;
 $color-white: #fff !default;
-$color-brand: #1976d2 !default;
+$color-brand: #166abd !default;
 $color-accent: #9c27b0 !default;
 $color-success: #178230 !default;
 $color-danger: #af2323 !default;
 $color-info: #31ccec !default;
 $color-warning: #e7b735 !default;
-$color-gray: hsl(color.hue($color-brand) 15% 50%) !default;
-$color-word: hsl(color.hue($color-brand) 15% 10%) !default;
-$color-surface: hsl(color.hue($color-brand) 10% 98%) !default;
+$color-gray: hsl(color-hue($color-brand) 15% 50%) !default;
+$color-word: hsl(color-hue($color-brand) 15% 10%) !default;
+$color-surface: hsl(color-hue($color-brand) 10% 100%) !default;
 $color-surface-palette: (
 	brand: hsl(var(--color-brand-hue) var(--color-brand-saturation) 90%),
 	accent: hsl(var(--color-accent-hue) var(--color-accent-saturation) 90%),
@@ -25,76 +25,32 @@ $color-surface-palette: (
 	warning: hsl(var(--color-warning-hue) var(--color-warning-saturation) 90%),
 ) !default;
 $color-surface-palette-no-vars: (
-	brand: hsl(color.hue($color-brand) color.saturation($color-brand) 90%),
-	accent: hsl(color.hue($color-accent) color.saturation($color-accent) 90%),
-	success: hsl(color.hue($color-success) color.saturation($color-success) 90%),
-	danger: hsl(color.hue($color-danger) color.saturation($color-danger) 90%),
-	info: hsl(color.hue($color-info) color.saturation($color-info) 90%),
-	warning: hsl(color.hue($color-warning) color.saturation($color-warning) 90%),
+	brand: hsl(color-hue($color-brand) color-saturation($color-brand) 90%),
+	accent: hsl(color-hue($color-accent) color-saturation($color-accent) 90%),
+	success: hsl(color-hue($color-success) color-saturation($color-success) 90%),
+	danger: hsl(color-hue($color-danger) color-saturation($color-danger) 90%),
+	info: hsl(color-hue($color-info) color-saturation($color-info) 90%),
+	warning: hsl(color-hue($color-warning) color-saturation($color-warning) 90%),
 ) !default;
-$color-shadow: hsl(color.hue($color-brand) 50% 20%) !default;
-$color-backdrop: hsla(color.hue($color-brand) 50% 20% / 20%) !default;
-$color-alpha: hsla(0deg 0% 0% / 0%) !default;
+$color-shadow: hsl(color-hue($color-brand) 50% 20%) !default;
+$color-backdrop: hsla(color-hue($color-brand) 50% 20% / 20%) !default;
+$color-alpha: hsl(0deg 0% 0% / 0%) !default;
 
 // colors map
 $colors: (
 	scheme: $color-scheme,
 	transparent: $color-transparent,
-	black: hsla-map($color-black, 'black'),
-	white: hsla-map($color-white, 'white'),
-	brand: color-shades-map($color-brand, 'brand'),
-	accent: color-shades-map($color-accent, 'accent'),
-	success: color-shades-map($color-success, 'success'),
-	danger: color-shades-map($color-danger, 'danger'),
-	info: color-shades-map($color-info, 'info'),
-	warning: color-shades-map($color-warning, 'warning'),
-	gray: color-shades-map($color-gray, 'gray', $scale: 15%),
-	word: color-lighten-map($color-word, 'word', $scale: 12%, $fixed: true),
-	surface:
-		map.merge(
-			color-darken-map(
-				$color-surface,
-				'surface',
-				$scale: 2%,
-				$fixed: true
-			),
-			$color-surface-palette
-		),
 	shadow: hsla-map($color-shadow, 'shadow'),
 	backdrop: hsla-map($color-backdrop, 'backdrop'),
-	alpha: color-alpha-map($color-alpha, 'alpha', $steps: 5, $scale: 5%),
-) !default;
-
-// colors-computed map
-$colors-computed: (
-	scheme: $color-scheme,
-	transparent: $color-transparent,
-	black: hsla-map($color-black, 'black', $noVarExport: true),
-	white: hsla-map($color-white, 'white', $noVarExport: true),
-	shadow: hsla-map($color-shadow, 'shadow', $noVarExport: true),
-	backdrop: hsla-map($color-backdrop, 'backdrop', $noVarExport: true),
-	alpha:
-		color-alpha-map(
-			$color-alpha,
-			'alpha',
-			$steps: 5,
-			$scale: 5%,
-			$noVarExport: true
-		),
-	brand: color-shades-map($color-brand, 'brand', $noVarExport: true),
-	accent: color-shades-map($color-accent, 'accent', $noVarExport: true),
-	success: color-shades-map($color-success, 'success', $noVarExport: true),
-	danger: color-shades-map($color-danger, 'danger', $noVarExport: true),
-	info: color-shades-map($color-info, 'info', $noVarExport: true),
-	warning: color-shades-map($color-warning, 'warning', $noVarExport: true),
-	gray: color-shades-map($color-gray, 'gray', $scale: 15%, $noVarExport: true),
+	black: hsla-map($color-black, 'black'),
+	white: hsla-map($color-white, 'white'),
 	word:
 		color-lighten-map(
 			$color-word,
 			'word',
 			$scale: 12%,
 			$fixed: true,
-			$noVarExport: true
+			$inverted: false
 		),
 	surface:
 		map.merge(
@@ -102,9 +58,16 @@ $colors-computed: (
 				$color-surface,
 				'surface',
 				$scale: 2%,
-				$fixed: true,
-				$noVarExport: true
+				$fixed: true
 			),
-			$color-surface-palette-no-vars
+			$color-surface-palette
 		),
+	alpha: color-alpha-map($color-alpha, 'alpha', $steps: 5, $scale: 0.05),
+	brand: color-shades-map($color-brand, 'brand'),
+	accent: color-shades-map($color-accent, 'accent'),
+	success: color-shades-map($color-success, 'success'),
+	danger: color-shades-map($color-danger, 'danger'),
+	info: color-shades-map($color-info, 'info'),
+	warning: color-shades-map($color-warning, 'warning'),
+	gray: color-shades-map($color-gray, 'gray', $scale: 15%),
 ) !default;

package/src/settings/_effects.scss

@@ -22,27 +22,9 @@ $box-shadow: (
 ) !default;
 
 // box-shadow without css vars
-$color-shadow-hue: color.hue(colors.$color-shadow);
-$color-shadow-saturation: color.saturation(colors.$color-shadow);
-$color-shadow-lightness: color.lightness(colors.$color-shadow);
-
-$box-shadow-no-vars: (
-	sm:
-		'0 1px 2px 0 hsla(#{$color-shadow-hue} #{$color-shadow-saturation} #{$color-shadow-lightness} / 5%)',
-	shadow:
-		'0 1px 3px 0 hsla(#{$color-shadow-hue} #{$color-shadow-saturation} #{$color-shadow-lightness} / 10%), 0 1px 2px -1px hsla(#{$color-shadow-hue} #{$color-shadow-saturation} #{$color-shadow-lightness} / 10%)',
-	md:
-		'0 4px 6px -1px hsla(#{$color-shadow-hue} #{$color-shadow-saturation} #{$color-shadow-lightness} / 10%), 0 2px 4px -2px hsla(#{$color-shadow-hue} #{$color-shadow-saturation} #{$color-shadow-lightness} / 10%)',
-	lg:
-		'0 10px 15px -3px hsla(#{$color-shadow-hue} #{$color-shadow-saturation} #{$color-shadow-lightness} / 10%), 0 4px 6px -4px hsla(#{$color-shadow-hue} #{$color-shadow-saturation} #{$color-shadow-lightness} / 10%)',
-	xl:
-		'0 20px 25px -5px hsla(#{$color-shadow-hue} #{$color-shadow-saturation} #{$color-shadow-lightness} / 10%), 0 8px 10px -6px hsla(#{$color-shadow-hue} #{$color-shadow-saturation} #{$color-shadow-lightness} / 10%)',
-	2xl:
-		'0 25px 50px -12px hsla(#{$color-shadow-hue} #{$color-shadow-saturation} #{$color-shadow-lightness} / 25%)',
-	inner:
-		'inset 0 2px 4px 0 hsla(#{$color-shadow-hue} #{$color-shadow-saturation} #{$color-shadow-lightness} / 5%)',
-	none: '0 0 #0000'
-) !default;
+$color-shadow-hue: color-hue(colors.$color-shadow);
+$color-shadow-saturation: color-saturation(colors.$color-shadow);
+$color-shadow-lightness: color-lightness(colors.$color-shadow);
 
 // opacity
 $opacity: (

package/src/settings/_filters.scss

@@ -23,6 +23,21 @@ $brightness: (
 	125: brightness(1.25),
 	150: brightness(1.5),
 	200: brightness(2),
+	250: brightness(2.5),
+	500: brightness(5),
+	1000: brightness(10),
+) !default;
+
+// contrast
+$contrast: (
+	0: contrast(0),
+	50: contrast(0.5),
+	75: contrast(0.75),
+	100: contrast(1),
+	125: contrast(1.25),
+	150: contrast(1.5),
+	200: brightness(2),
+	300: brightness(3),
 ) !default;
 
 // saturation

package/src/settings/_index.scss

@@ -6,7 +6,6 @@
 @forward 'effects';
 @forward 'filters';
 @forward 'flexbox';
-@forward 'gradient';
 @forward 'grid';
 @forward 'input';
 @forward 'interactivity';
@@ -39,6 +38,7 @@
 @forward 'components/vv-radio-group';
 @forward 'components/vv-avatar';
 @forward 'components/vv-avatar-group';
+@forward 'components/vv-input-file';
 @forward 'components/vv-input-text';
 @forward 'components/vv-nav';
 @forward 'components/vv-progress';

package/src/settings/_input.scss

@@ -11,15 +11,16 @@ $input: (
 	line-height: var(--leading-normal),
 	min-height: var(--spacing-52),
 	min-width: 0,
+	spacing-top: var(--spacing-sm),
+	spacing-right: var(--spacing-sm),
 	spacing-bottom: var(--spacing-sm),
 	spacing-left: var(--spacing-sm),
-	spacing-right: var(--spacing-sm),
-	spacing-top: var(--spacing-sm),
 	text-overflow: ellipsis,
 	label: (
 		color: var(--color-word-2),
 		display: inline,
-		font-size: var(--text-xs),
+		font-size: var(--text-14),
+		font-weight: var(--font-normal),
 		gap: var(--spacing-xs),
 		max-width: 100%,
 		overflow: hidden,

package/src/settings/_interactivity.scss

@@ -37,3 +37,17 @@ $cursor: (
 	zoom-in: zoom-in,
 	zoom-out: zoom-out,
 ) !default;
+
+// pointer events
+$pointer-events: (
+	none: none,
+	auto: auto,
+) !default;
+
+// user select
+$user-select: (
+	none: none,
+	text: text,
+	all: all,
+	auto: auto,
+) !default;

package/src/settings/_layout.scss

@@ -114,6 +114,7 @@ $visibility: (
 
 // z-index
 $z-index: (
+	1: 1,
 	dropdown: 1000,
 	sticky: 1010,
 	fixed: 1020,

package/src/settings/_transitions.scss

@@ -39,4 +39,5 @@ $animation: (
 	pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite,
 	bounce: bounce 1s infinite,
 	shine: shine 1.5s infinite,
+	clippath: clippath 3s infinite,
 ) !default;

package/src/settings/_typography.scss

@@ -114,7 +114,15 @@ $font-variant-numeric: (
 ) !default;
 
 // list-style-type
-$list-style-type: (none, disc, decimal) !default;
+$list-style-type: (
+	none,
+	disc,
+	decimal,
+	lower-latin,
+	upper-latin,
+	lower-roman,
+	upper-roman
+) !default;
 
 // list-style-position
 $list-style-position: (inside, outside) !default;

package/src/settings/components/_vv-accordion-group.scss

@@ -1,7 +1,7 @@
 $vv-accordion-group: (
 	display: flex,
 	flex-direction: column,
-	gap: var(--spacing-sm),
+	[gap]: var(--spacing-sm),
 	element: (
 		not-last-child: (
 			_alias: '> details:not(:last-child)',
@@ -9,7 +9,7 @@ $vv-accordion-group: (
 	),
 	modifier: (
 		condensed: (
-			gap: 0,
+			gap: var(--spacing-0),
 			element: (
 				not-last-child: (
 					border-bottom-width: 0,

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

@@ -1,10 +1,10 @@
 $vv-accordion: (
 	--accordion-marker-size:
 		calc(var(--spacing-sm) + var(--leading-normal) * 1em),
-	--accordion-padding-top: var(--spacing-xs),
-	--accordion-padding-right: var(--spacing-xs),
-	--accordion-padding-bottom: var(--spacing-xs),
-	--accordion-padding-left: var(--spacing-xs),
+	--accordion-padding-top: var(--spacing-14),
+	--accordion-padding-right: var(--spacing-14),
+	--accordion-padding-bottom: var(--spacing-14),
+	--accordion-padding-left: var(--spacing-14),
 	overflow: hidden,
 	state: (
 		open: (
@@ -32,6 +32,7 @@ $vv-accordion: (
 	element: (
 		summary: (
 			_alias: '> summary',
+			_combinator: '>',
 			position: relative,
 			cursor: pointer,
 			user-select: none,
@@ -46,7 +47,6 @@ $vv-accordion: (
 			color: var(--color-word-2),
 			will-change: background-color,
 			transition: var(--transition-colors),
-			font-size: var(--text-sm),
 			border-radius: var(--rounded-lg),
 			-webkit-tap-highlight-color: transparent,
 			outline: none,
@@ -84,6 +84,7 @@ $vv-accordion: (
 		),
 		content: (
 			_alias: '> summary + *',
+			_combinator: '>',
 			padding-block: var(--spacing-sm),
 			[padding-inline]: var(--accordion-padding-left)
 				var(--accordion-padding-right),

package/src/settings/components/_vv-alert-group.scss

@@ -5,17 +5,25 @@ $vv-alert-group: (
 	flex-direction: column,
 	gap: var(--spacing-sm),
 	overflow: hidden,
+	pointer-events: none,
 	element: (
 		list: (
 			_alias: '> [role="group"]',
+			_combinator: '>',
 			display: flex,
 			flex-direction: column,
 			gap: var(--spacing-xs),
+			state: (
+				empty: (
+					display: none,
+				),
+			),
 		),
 		item: (
 			_alias: '> [role="group"] > *',
 			transition: var(--transition-all),
 			flex-shrink: 0,
+			pointer-events: auto,
 		),
 		not-first: (
 			_alias: '> [role="group"] > *:not(:first-child)',
@@ -58,10 +66,10 @@ $vv-alert-group: (
 			max-height: var(--h-full),
 		),
 		reverse: (
-			flex-flow: column-reverse,
+			flex-direction: column-reverse,
 			element: (
 				list: (
-					flex-flow: column-reverse,
+					flex-direction: column-reverse,
 				),
 			),
 		),
@@ -123,8 +131,10 @@ $vv-alert-group: (
 					[scale]: calc(1 - 0.05 * (var(--alert-counter, 1) - 1)),
 					[z-index]:
 						calc(
-							var(--z-notification-alert) -
-								var(--alert-counter, 1)
+							var(--z-notification-alert) - var(
+									--alert-counter,
+									1
+								)
 						),
 					filter: grayscale(100%),
 				),

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

@@ -12,7 +12,6 @@ $vv-alert: (
 	gap: var(--spacing-sm),
 	min-width: 0,
 	overflow: hidden,
-	font-size: var(--text-sm),
 	padding: var(--spacing-sm),
 	element: (
 		header: (
@@ -23,6 +22,7 @@ $vv-alert: (
 			color: var(--color-word),
 			overflow: hidden,
 			text-overflow: ellipsis,
+			flex-shrink: 0,
 		),
 		title: (
 			min-width: 0,
@@ -64,7 +64,7 @@ $vv-alert: (
 			left: 50%,
 			background-color: var(--color-gray),
 			[animation]: pie-masks var(--alert-duration) steps(1, end) reverse,
-			z-index: 1,
+			z-index: var(--z-1),
 		),
 	),
 	modifier: (
@@ -133,10 +133,10 @@ $vv-alert: (
 			background-color: var(--color-surface-brand),
 			element: (
 				icon: (
-					color: var(--color-brand-darken-2),
+					color: var(--color-brand-darken-3),
 				),
 				header: (
-					color: var(--color-brand-darken-2),
+					color: var(--color-brand-darken-3),
 				),
 			),
 		),
@@ -174,7 +174,7 @@ $vv-alert: (
 				),
 				content: (
 					padding: var(--spacing-sm),
-					font-size: var(--text-xs),
+					font-size: var(--text-14),
 				),
 				footer: (
 					padding: 0 var(--spacing-sm) var(--spacing-sm)
@@ -215,18 +215,18 @@ $vv-alert: (
 					),
 				),
 				warning: (
-					border-color: var(--color-warning),
+					border-color: var(--color-warning-darken-5),
 					element: (
 						header: (
-							background-color: var(--color-warning),
+							background-color: var(--color-warning-darken-5),
 						),
 					),
 				),
 				info: (
-					border-color: var(--color-info),
+					border-color: var(--color-info-darken-5),
 					element: (
 						header: (
-							background-color: var(--color-info),
+							background-color: var(--color-info-darken-5),
 						),
 					),
 				),

package/src/settings/components/_vv-avatar-group.scss

@@ -5,6 +5,7 @@ $vv-avatar-group: (
 	element: (
 		item: (
 			_alias: '> *',
+			_combinator: '>',
 			box-shadow: var(--shadow-md),
 		),
 		item-not-first: (

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

@@ -1,11 +1,7 @@
 $vv-avatar: (
-	--avatar-background-color: var(--color-brand),
-	--avatar-color: var(--color-white),
-	--avatar-border-radius: var(--rounded),
-	--avatar-border-color: var(--color-brand-darken-3),
-	[background-color]: var(--avatar-background-color),
-	[border-radius]: var(--avatar-border-radius),
-	[color]: var(--avatar-color),
+	background-color: var(--color-brand),
+	border-radius: var(--rounded),
+	color: var(--color-white),
 	display: inline-flex,
 	position: relative,
 	justify-content: center,
@@ -18,6 +14,7 @@ $vv-avatar: (
 	background-size: contain,
 	background-repeat: no-repeat,
 	object-fit: contain,
+	flex-shrink: 0,
 	state: (
 		focus: (
 			outline: var(--spacing-px) solid var(--color-brand),
@@ -27,6 +24,7 @@ $vv-avatar: (
 	element: (
 		badge: (
 			_alias: '> sup',
+			_combinator: '>',
 			position: absolute,
 			top: 0,
 			right: 0,
@@ -35,6 +33,7 @@ $vv-avatar: (
 		),
 		badge-bottom: (
 			_alias: '> sub',
+			_combinator: '>',
 			position: absolute,
 			bottom: 0,
 			right: 0,
@@ -43,22 +42,33 @@ $vv-avatar: (
 		),
 		image: (
 			_alias: '> img',
+			_combinator: '>',
 			width: 100%,
 			height: 100%,
 			object-fit: inherit,
-			[border-radius]: var(--avatar-border-radius),
+			border-radius: var(--rounded),
 			overflow: hidden,
 		),
 	),
 	modifier: (
 		rounded: (
-			--avatar-border-radius: var(--rounded-full),
+			border-radius: var(--rounded-full),
+			element: (
+				image: (
+					border-radius: var(--rounded-full),
+				),
+			),
 		),
 		square: (
-			--avatar-border-radius: var(--rounded-none),
+			border-radius: var(--rounded-none),
+			element: (
+				image: (
+					border-radius: var(--rounded-none),
+				),
+			),
 		),
 		bordered: (
-			[border-color]: var(--avatar-border-color),
+			border-color: var(--color-brand-lighten-3),
 			border-width: var(--border),
 			border-style: solid,
 		),
@@ -73,79 +83,71 @@ $vv-avatar: (
 			height: var(--spacing-40),
 		),
 		transparent: (
-			--avatar-background-color: var(--color-transparent),
+			background-color: var(--color-transparent),
 		),
 		surface: (
-			--avatar-background-color: var(--color-surface-1),
-			--avatar-border-color: var(--color-surface-3),
-			--avatar-color: var(--color-word-2),
+			background-color: var(--color-surface-2),
+			border-color: var(--color-surface-5),
+			color: var(--color-word-2),
 		),
 		danger: (
-			--avatar-background-color: var(--color-danger),
-			--avatar-border-color: var(--color-danger-darken-3),
+			background-color: var(--color-danger),
+			border-color: var(--color-danger-lighten-3),
 		),
 		success: (
-			--avatar-background-color: var(--color-success),
-			--avatar-border-color: var(--color-success-darken-3),
+			background-color: var(--color-success),
+			border-color: var(--color-success-lighten-3),
 		),
 		warning: (
-			--avatar-background-color: var(--color-warning),
-			--avatar-border-color: var(--color-warning-darken-3),
+			background-color: var(--color-warning-darken-5),
+			border-color: var(--color-warning-darken-2),
 		),
 		info: (
-			--avatar-background-color: var(--color-info),
-			--avatar-border-color: var(--color-info-darken-3),
+			background-color: var(--color-info-darken-5),
+			border-color: var(--color-info-darken-2),
 		),
 		accent: (
-			--avatar-background-color: var(--color-accent),
-			--avatar-border-color: var(--color-accent-darken-3),
+			background-color: var(--color-accent),
+			border-color: var(--color-accent-darken-3),
 		),
 		gray: (
-			--avatar-background-color: var(--color-gray),
-			--avatar-border-color: var(--color-gray-darken-3),
+			background-color: var(--color-gray-darken-1),
+			border-color: var(--color-gray-lighten-2),
 		),
 		ring: (
-			--avatar-color: var(--color-brand),
-			--avatar-background-color: var(--color-surface-brand),
-			--avatar-border-color: var(--color-brand),
-			[border-color]: var(--avatar-border-color),
+			color: var(--color-brand-darken-3),
+			background-color: var(--color-surface-brand),
+			border-color: currentcolor,
 			border-width: var(--border),
 			border-style: solid,
 			modifier: (
 				surface: (
-					--avatar-background-color: var(--color-surface),
-					--avatar-border-color: var(--color-surface-5),
-					--avatar-color: var(--color-word-2),
+					background-color: var(--color-surface),
+					color: var(--color-word-2),
 				),
 				danger: (
-					--avatar-background-color: var(--color-surface-danger),
-					--avatar-border-color: var(--color-danger),
-					--avatar-color: var(--color-danger),
+					background-color: var(--color-surface-danger),
+					color: var(--color-danger),
 				),
 				success: (
-					--avatar-background-color: var(--color-surface-success),
-					--avatar-border-color: var(--color-success),
-					--avatar-color: var(--color-success),
+					background-color: var(--color-surface-success),
+					color: var(--color-success-darken-3),
 				),
 				warning: (
-					--avatar-background-color: var(--color-surface-warning),
-					--avatar-border-color: var(--color-warning),
-					--avatar-color: var(--color-warning),
+					background-color: var(--color-surface-warning),
+					color: var(--color-warning-darken-5),
 				),
 				info: (
-					--avatar-background-color: var(--color-surface-info),
-					--avatar-border-color: var(--color-info),
-					--avatar-color: var(--color-info),
+					background-color: var(--color-surface-info),
+					color: var(--color-info-darken-5),
 				),
 				accent: (
-					--avatar-background-color: var(--color-surface-accent),
-					--avatar-border-color: var(--color-accent),
-					--avatar-color: var(--color-accent),
+					background-color: var(--color-surface-accent),
+					color: var(--color-accent),
 				),
 				gray: (
-					--avatar-background-color: var(--color-surface-4),
-					--avatar-border-color: var(--color-gray),
-					--avatar-color: var(--color-word-2),
+					background-color: var(--color-surface-4),
+					color: var(--color-word-2),
 				),
 			),
 		),