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

package/src/reset.scss

@@ -31,7 +31,7 @@
 
 /* removes spacing between cells in tables */
 :where(table) {
-	border-collapse: collapse;
+	border-accordion: accordion;
 }
 
 /* Safari - solving issue when using user-select:none on the <body> text input doesn't working */

package/src/settings/_background.scss

@@ -1,3 +1,6 @@
+@use 'colors' as *;
+@use '../tools/functions' as *;
+
 // background-attachment
 $background-attachment: (fixed, local, scroll) !default;
 
@@ -48,9 +51,11 @@ $background-image: (
 	chevron:
 		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(#{hex-to-rgb($color-word)})' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"),
 	grid:
-		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(51 65 85 / 0.25)'%3E%3Cpath d='M0 .5H31.5V32'/%3E%3C/svg%3E"),
+		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none' stroke='rgb(51 65 85 / 0.25)'%3E%3Cpath d='M0 .5H31.5V32'/%3E%3C/svg%3E"),
 	check:
 		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(#{hex-to-rgb($color-word)})' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"),
 	minus:
 		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(#{hex-to-rgb($color-word)})' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"),
+	close:
+		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(#{hex-to-rgb($color-word)})' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20L4 4m16 0L4 20'/%3E%3C/svg%3E"),
 ) !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,4 +1,6 @@
 @use 'sass:color';
+@use 'sass:map';
+@use '../tools/functions' as *;
 
 // color variables
 $color-scheme: light !default;
@@ -7,13 +9,21 @@ $color-black: #000 !default;
 $color-white: #fff !default;
 $color-brand: #1976d2 !default;
 $color-accent: #9c27b0 !default;
-$color-success: #21ba45 !default;
+$color-success: #178230 !default;
 $color-danger: #c10015 !default;
 $color-info: #31ccec !default;
 $color-warning: #f2c037 !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-surface-palette: (
+	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;
@@ -32,7 +42,11 @@ $colors: (
 	warning: color-shades-map($color-warning, 'warning'),
 	gray: color-shades-map($color-gray, 'gray', $scale: 15%),
 	word: color-lighten-map($color-word, 'word', $scale: 15%),
-	surface: color-darken-map($color-surface, 'surface', $scale: 2%),
+	surface:
+		map.merge(
+			color-darken-map($color-surface, 'surface', $scale: 2%),
+			$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%),

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/_filters.scss

@@ -24,3 +24,12 @@ $brightness: (
 	150: brightness(1.5),
 	200: brightness(2),
 ) !default;
+
+// saturation
+$saturation: (
+	0: saturate(0),
+	50: saturate(0.5),
+	100: saturate(1),
+	150: saturate(1.5),
+	200: saturate(2),
+) !default;

package/src/settings/_index.scss

@@ -1,34 +1,43 @@
 // 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 'colors';
+@forward 'background';
+@forward 'borders';
+@forward 'breakpoints';
+@forward 'effects';
+@forward 'filters';
+@forward 'flexbox';
+@forward 'grid';
+@forward 'input';
+@forward 'interactivity';
+@forward 'layout';
+@forward 'sizing';
+@forward 'spacing';
+@forward 'transitions';
+@forward 'typography';
 
 // components
-@import 'components/vv-badge';
-@import 'components/vv-button';
-@import 'components/vv-button-group';
-@import 'components/vv-progress';
-@import 'components/vv-collapse';
-@import 'components/vv-dialog';
-@import 'components/vv-dropdown';
-@import 'components/vv-input-checkbox';
-@import 'components/vv-input-checkbox-group';
-@import 'components/vv-input-radio';
-@import 'components/vv-input-radio-group';
-@import 'components/vv-input-text';
-@import 'components/vv-textarea';
-@import 'components/vv-select';
-@import 'components/vv-table';
-@import 'components/vv-card';
-@import 'components/vv-text';
+@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-checkbox-group';
+@forward 'components/vv-checkbox';
+@forward 'components/vv-radio-group';
+@forward 'components/vv-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-skeleton';
+@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

@@ -2,17 +2,19 @@ $input: (
 	display: flex,
 	flex: 1,
 	flex-direction: column,
-	padding-top: var(--spacing-sm),
-	padding-right: var(--spacing-sm),
-	padding-bottom: var(--spacing-sm),
-	padding-left: var(--spacing-sm),
+	spacing-top: var(--spacing-sm),
+	spacing-right: var(--spacing-sm),
+	spacing-bottom: var(--spacing-sm),
+	spacing-left: var(--spacing-sm),
 	color: var(--color-word),
 	background-color: var(--color-surface-1),
 	gap: var(--spacing-md),
 	line-height: var(--leading-normal),
 	font-size: var(--text-16),
+	min-height: var(--spacing-50),
+	min-width: 0,
 	label: (
-		color: var(--color-word-3),
+		color: var(--color-word-2),
 		display: block,
 		font-size: var(--text-xs),
 		gap: var(--spacing-xs),
@@ -32,7 +34,7 @@ $input: (
 	hint: (
 		display: block,
 		font-size: var(--text-12),
-		color: var(--color-word-4),
+		color: var(--color-word-2),
 		gap: var(--spacing-8),
 		white-space: nowrap,
 		text-overflow: ellipsis,

package/src/settings/_interactivity.scss

@@ -0,0 +1,39 @@
+// cursor
+$cursor: (
+	auto: auto,
+	default: default,
+	pointer: pointer,
+	wait: wait,
+	text: text,
+	move: move,
+	help: help,
+	not-allowed: not-allowed,
+	none: none,
+	context-menu: context-menu,
+	progress: progress,
+	cell: cell,
+	crosshair: crosshair,
+	vertical-text: vertical-text,
+	alias: alias,
+	copy: copy,
+	no-drop: no-drop,
+	grab: grab,
+	grabbing: grabbing,
+	all-scroll: all-scroll,
+	col-resize: col-resize,
+	row-resize: row-resize,
+	n-resize: n-resize,
+	e-resize: e-resize,
+	s-resize: s-resize,
+	w-resize: w-resize,
+	ne-resize: ne-resize,
+	nw-resize: nw-resize,
+	se-resize: se-resize,
+	sw-resize: sw-resize,
+	ew-resize: ew-resize,
+	ns-resize: ns-resize,
+	nesw-resize: nesw-resize,
+	nwse-resize: nwse-resize,
+	zoom-in: zoom-in,
+	zoom-out: zoom-out,
+) !default;

package/src/settings/_spacing.scss

@@ -11,6 +11,7 @@ $spacing: (
 	12: 0.75rem,
 	14: 0.875rem,
 	16: 1rem,
+	18: 1.125rem,
 	20: 1.25rem,
 	22: 1.375rem,
 	24: 1.5rem,

package/src/settings/_transitions.scss

@@ -0,0 +1,44 @@
+// 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,
+	indeterminate: indeterminate 2s infinite,
+	progress-indeterminate: progress-indeterminate 1.5s linear infinite,
+	spin: spin 1s 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,
+	shine: shine 1.5s infinite,
+) !default;

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

@@ -0,0 +1,134 @@
+$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),
+	overflow: hidden,
+	state: (
+		open: (
+			element: (
+				summary: (
+					background-color: var(--color-surface-2),
+					pseudo: (
+						before: (
+							transform: rotate(0),
+						),
+					),
+				),
+			),
+		),
+	),
+	element: (
+		summary: (
+			_alias: '> summary',
+			position: relative,
+			cursor: pointer,
+			[padding-top]: var(--accordion-padding-top),
+			[padding-right]: var(--accordion-padding-right),
+			[padding-bottom]: var(--accordion-padding-bottom),
+			[padding-left]:
+				calc(
+					var(--accordion-padding-left) + var(--accordion-marker-size)
+				),
+			line-height: var(--leading-normal),
+			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,
+			pseudo: (
+				before: (
+					display: block,
+					position: absolute,
+					[top]: var(--accordion-padding-top),
+					[left]: var(--accordion-padding-left),
+					width: calc(var(--leading-normal) * 1em),
+					height: calc(var(--leading-normal) * 1em),
+					background-image: var(--bg-chevron),
+					background-position: center,
+					background-size: 1em,
+					background-repeat: no-repeat,
+					will-change: transform,
+					transition: var(--transition-transform),
+					transform: rotate(-90deg),
+				),
+				marker: (
+					display: none,
+				),
+				-webkit-details-marker: (
+						display: none,
+					),
+			),
+			state: (
+				hover: (
+					background-color: var(--color-surface-1),
+				),
+				focus-visible: (
+					background-color: var(--color-surface-1),
+				),
+			),
+		),
+		content: (
+			_alias: '> summary + *',
+			padding-block: var(--spacing-sm),
+			[padding-inline]: var(--accordion-padding-left)
+				var(--accordion-padding-right),
+		),
+	),
+	modifier: (
+		marker-right: (
+			element: (
+				summary: (
+					[padding-right]:
+						calc(
+							var(--accordion-padding-right) +
+								var(--accordion-marker-size)
+						),
+					[padding-left]: var(--accordion-padding-left),
+					pseudo: (
+						before: (
+							left: auto,
+							[right]: var(--accordion-padding-right),
+							transform: rotate(0def),
+						),
+					),
+				),
+			),
+			state: (
+				open: (
+					element: (
+						summary: (
+							pseudo: (
+								before: (
+									transform: rotate(-180deg),
+								),
+							),
+						),
+					),
+				),
+			),
+		),
+		bordered: (
+			--accordion-padding-top: var(--spacing-xs),
+			--accordion-padding-right: var(--spacing-xs),
+			--accordion-padding-bottom: var(--spacing-xs),
+			--accordion-padding-left: var(--spacing-xs),
+			border: var(--border) solid var(--color-surface-4),
+			border-radius: var(--rounded-lg),
+			state: (
+				open: (
+					element: (
+						summary: (
+							border-bottom-right-radius: 0,
+							border-bottom-left-radius: 0,
+						),
+					),
+				),
+			),
+		),
+	),
+) !default;

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

@@ -0,0 +1,161 @@
+$vv-alert: (
+	display: flex,
+	min-width: 0,
+	overflow: hidden,
+	align-items: center,
+	padding: var(--spacing-sm) var(--spacing-md),
+	background-color: var(--color-surface-2),
+	border-color: var(--color-gray-lighten-4),
+	border-width: var(--border),
+	border-style: solid,
+	border-radius: var(--rounded),
+	position: relative,
+	element: (
+		icon: (
+			_alias: '> :where(svg, [data-icon])',
+			position: absolute,
+			left: var(--spacing-md),
+			inline-size: 1.2em,
+			block-size: 1.2em,
+		),
+		close: (
+			position: absolute,
+			right: var(--spacing-md),
+			inline-size: 1em,
+			block-size: 1em,
+			cursor: pointer,
+			background-image: var(--bg-close),
+			background-position: center,
+			background-size: 100% auto,
+			background-repeat: no-repeat,
+		),
+		title: (
+			display: flex,
+			margin-right: 1ch,
+			line-height: var(--leading-normal),
+			font-weight: var(--font-bold),
+			color: var(--color-word),
+		),
+		content: (
+			line-height: var(--leading-normal),
+			color: var(--color-word-1),
+			text-overflow: ellipsis,
+			white-space: nowrap,
+			overflow: hidden,
+		),
+		separator: (
+			_alias: '> hr',
+			height: var(--border),
+			background-color: var(--color-alpha-2),
+			margin-block: var(--spacing-sm),
+		),
+	),
+	modifier: (
+		fixed: (
+			position: fixed,
+			z-index: var(--z-notification-alert),
+		),
+		top: (
+			inset-inline: var(--spacing-lg),
+			inset-block: var(--spacing-lg) auto,
+		),
+		bottom: (
+			inset-inline: var(--spacing-lg),
+			inset-block: auto var(--spacing-lg),
+		),
+		success: (
+			border-color: var(--color-success-lighten-5),
+			background-color: var(--color-surface-success),
+			element: (
+				icon: (
+					color: var(--color-success),
+				),
+				title: (
+					color: var(--color-success),
+				),
+			),
+		),
+		danger: (
+			border-color: var(--color-danger-lighten-5),
+			background-color: var(--color-surface-danger),
+			element: (
+				icon: (
+					color: var(--color-danger),
+				),
+				title: (
+					color: var(--color-danger),
+				),
+			),
+		),
+		warning: (
+			border-color: var(--color-warning-lighten-5),
+			background-color: var(--color-surface-warning),
+			element: (
+				icon: (
+					color: var(--color-warning-darken-2),
+				),
+				title: (
+					color: var(--color-warning-darken-2),
+				),
+			),
+		),
+		info: (
+			border-color: var(--color-info-lighten-5),
+			background-color: var(--color-surface-info),
+			element: (
+				icon: (
+					color: var(--color-info-darken-2),
+				),
+				title: (
+					color: var(--color-info-darken-2),
+				),
+			),
+		),
+		accent: (
+			border-color: var(--color-accent-lighten-5),
+			background-color: var(--color-surface-accent),
+			element: (
+				icon: (
+					color: var(--color-accent),
+				),
+				title: (
+					color: var(--color-accent),
+				),
+			),
+		),
+		brand: (
+			border-color: var(--color-brand-lighten-5),
+			background-color: var(--color-surface-brand),
+			element: (
+				icon: (
+					color: var(--color-brand),
+				),
+				title: (
+					color: var(--color-brand),
+				),
+			),
+		),
+		callout: (
+			display: block,
+			border-radius: var(--rounded-none),
+			border-width: 0 0 0 var(--spacing-4),
+			element: (
+				title: (
+					margin-bottom: var(--spacing-sm),
+					margin-right: 0,
+					text-transform: uppercase,
+				),
+				content: (
+					line-height: var(--leading-normal),
+					white-space: wrap,
+				),
+			),
+		),
+		icon: (
+			padding-left: calc(var(--spacing-md) * 2 + 1em),
+		),
+		close: (
+			padding-right: calc(var(--spacing-md) * 2 + 1em),
+		),
+	),
+) !default;