@volverjs/style 0.0.0

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

@@ -0,0 +1,216 @@
+$vv-select: (
+	display: var(--input-display),
+	flex: var(--input-flex),
+	flex-direction: var(--input-flex-direction),
+	margin-bottom: var(--input-gap),
+	font-size: var(--input-font-size),
+	line-height: var(--input-line-height),
+	user-select: none,
+	element: (
+		label: (
+			_alias: '> label',
+			display: var(--input-label-display),
+			font-size: var(--input-label-font-size),
+			color: var(--input-label-color),
+			margin: 0 0 var(--input-label-gap) 0,
+			white-space: var(--input-label-white-space),
+			text-overflow: var(--input-label-text-overflow),
+			overflow: var(--input-label-overflow),
+			max-width: var(--input-label-max-width),
+		),
+		wrapper: (
+			position: relative,
+			display: flex,
+			align-items: center,
+			flex: 1,
+			background-color: var(--input-background-color),
+			will-change: background-color,
+			transition: background-color 0.2s ease-in-out,
+			pseudo: (
+				before: (
+					position: absolute,
+					height: var(--spacing-1),
+					inset: auto 0 0 0,
+					background: var(--color-word-5),
+				),
+				after: (
+					position: absolute,
+					height: var(--spacing-2),
+					inset: auto 0 0 0,
+					background: var(--color-brand),
+					transform: scaleX(0),
+					transform-origin: left,
+					will-change: transform,
+					transition: transform 0.2s ease-in-out,
+				),
+			),
+			state: (
+				hover: (
+					background-color: var(--color-surface-3),
+				),
+				focus-within: (
+					background-color: var(--color-surface-2),
+					pseudo: (
+						after: (
+							transform: scaleX(1),
+						),
+					),
+				),
+				open: (
+					background-color: var(--color-surface-2),
+					pseudo: (
+						after: (
+							transform: scaleX(1),
+						),
+					),
+				),
+			),
+		),
+		input: (
+			_alias: 'select',
+			display: block,
+			flex: 1,
+			color: var(--input-placeholder-color),
+			[padding]: var(--input-padding-top) var(--input-padding-right)
+				var(--input-padding-bottom) var(--input-padding-left),
+			min-height: var(--spacing-50),
+			background-image: var(--bg-chevron),
+			background-repeat: no-repeat,
+			[background-position]: right var(--input-padding-right) center,
+			background-size: 1em,
+			state: (
+				disabled: (
+					cursor: not-allowed,
+				),
+			),
+		),
+		icon: (
+			_alias: ':where(svg, [data-icon])',
+			margin: var(--input-padding-top) var(--input-padding-right)
+				var(--input-padding-bottom) var(--input-padding-left),
+			position: var(--input-icon-position),
+			width: var(--input-icon-width),
+			height: var(--input-icon-height),
+			padding: var(--input-icon-padding),
+			pointer-events: var(--input-icon-pointer-events),
+		),
+		icon-right: (
+			_alias: 'select + :where(svg, [data-icon])',
+			right: 0,
+		),
+		hint: (
+			_alias: '> small',
+			display: var(--input-hint-display),
+			font-size: var(--input-hint-font-size),
+			color: var(--input-hint-color),
+			padding-top: var(--input-hint-gap),
+			padding-inline: var(--spacing-xs),
+			white-space: var(--input-hint-white-space),
+			text-overflow: var(--input-hint-text-overflow),
+			overflow: var(--input-hint-overflow),
+			max-width: var(--input-hint-max-width),
+		),
+	),
+	modifier: (
+		dirty: (
+			element: (
+				input: (
+					color: var(--input-color),
+				),
+			),
+		),
+		icon-left: (
+			--input-padding-left: calc(var(--spacing-sm) * 2 + 1em),
+		),
+		icon-right: (
+			--input-padding-right: calc(var(--spacing-sm) * 2 + 1em),
+		),
+		valid: (
+			element: (
+				wrapper: (
+					pseudo: (
+						after: (
+							background: var(--input-valid-color),
+							transform: scaleX(1),
+						),
+					),
+				),
+				hint: (
+					color: var(--input-valid-color),
+				),
+				icon-right: (
+					color: var(--input-valid-color),
+				),
+			),
+		),
+		invalid: (
+			element: (
+				wrapper: (
+					pseudo: (
+						after: (
+							background: var(--input-invalid-color),
+							transform: scaleX(1),
+						),
+					),
+				),
+				hint: (
+					color: var(--input-invalid-color),
+				),
+				icon-right: (
+					color: var(--input-invalid-color),
+				),
+			),
+		),
+		loading: (
+			element: (
+				wrapper: (
+					pseudo: (
+						before: (
+							height: 2px,
+							background: var(--color-brand-lighten-5),
+						),
+						after: (
+							animation: progress 2.2s infinite,
+						),
+					),
+				),
+			),
+		),
+		readonly: (
+			opacity: 1,
+			user-select: text,
+			element: (
+				wrapper: (
+					pseudo: (
+						after: (
+							opacity: 0,
+						),
+					),
+					state: (
+						hover: (
+							background-color: var(--color-surface-1),
+						),
+					),
+				),
+				input: (
+					background-image: none,
+					cursor: 'text',
+				),
+			),
+		),
+	),
+	state: (
+		disabled: (
+			opacity: 0.5,
+			element: (
+				wrapper: (
+					state: (
+						hover: (
+							background-color: var(--color-surface-1),
+						),
+					),
+				),
+			),
+		),
+	),
+) !default;

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

@@ -0,0 +1,29 @@
+$vv-table: (
+	width: 100%,
+	element: (
+		tr: (
+			_alias: 'tr',
+			border-width: 0 0 1px 0,
+			border-style: solid,
+			border-color: var(--color-alpha-1),
+			state: (
+				last-child: (
+					border-width: 0,
+				),
+			),
+		),
+		th: (
+			_alias: 'th',
+			font-weight: semibold,
+			padding-block: var(--spacing-md),
+			font-size: var(--text-sm),
+			color: var(--color-word-2),
+		),
+		td: (
+			_alias: 'td',
+			padding-block: var(--spacing-md),
+			border-style: solid,
+			font-size: var(--text-xs),
+		),
+	),
+) !default;

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

@@ -0,0 +1,42 @@
+$vv-text: (
+	font-family: var(--font-sans),
+	font-weight: var(--font-normal),
+	line-height: var(--leading-normal),
+	modifier: (
+		headline: (
+			font-family: var(--font-serif),
+			font-weight: var(--font-semibold),
+			line-height: var(--leading-tight),
+			margin-top: var(--spacing-24),
+			margin-bottom: var(--spacing-16),
+		),
+		copy: (
+			margin-block: var(--spacing-16),
+		),
+		quote: (
+			font-family: var(--font-serif),
+			border-left: var(--spacing-4) solid var(--color-surface-3),
+			padding-left: var(--spacing-16),
+			margin-block: var(--spacing-16),
+			margin-inline: var(--spacing-40),
+		),
+		size-1: (
+			font-size: var(--text-32),
+		),
+		size-2: (
+			font-size: var(--text-24),
+		),
+		size-3: (
+			font-size: var(--text-20),
+		),
+		size-4: (
+			font-size: var(--text-16),
+		),
+		size-5: (
+			font-size: var(--text-14),
+		),
+		size-6: (
+			font-size: var(--text-12),
+		),
+	),
+) !default;

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

@@ -0,0 +1,275 @@
+$vv-textarea: (
+	display: var(--input-display),
+	flex: var(--input-flex),
+	flex-direction: var(--input-flex-direction),
+	margin-bottom: var(--input-gap),
+	font-size: var(--input-font-size),
+	line-height: var(--input-line-height),
+	element: (
+		label: (
+			_alias: '> label',
+			display: var(--input-label-display),
+			font-size: var(--input-label-font-size),
+			color: var(--input-label-color),
+			margin: 0 0 var(--input-label-gap) 0,
+			white-space: var(--input-label-white-space),
+			text-overflow: var(--input-label-text-overflow),
+			overflow: var(--input-label-overflow),
+			max-width: var(--input-label-max-width),
+		),
+		wrapper: (
+			position: relative,
+			display: flex,
+			align-items: flex-start,
+			flex: 1,
+			overflow: hidden,
+			background-color: var(--input-background-color),
+			will-change: background-color,
+			transition: background-color 0.2s ease-in-out,
+			pseudo: (
+				before: (
+					position: absolute,
+					height: var(--spacing-1),
+					inset: auto 0 0 0,
+					background: var(--color-word-5),
+				),
+				after: (
+					position: absolute,
+					height: var(--spacing-2),
+					inset: auto 0 0 0,
+					background: var(--color-brand),
+					transform: scaleX(0),
+					transform-origin: left,
+					will-change: transform,
+					transition: transform 0.2s ease-in-out,
+				),
+			),
+			state: (
+				hover: (
+					background-color: var(--color-surface-3),
+				),
+				focus-within: (
+					background-color: var(--color-surface-2),
+					pseudo: (
+						after: (
+							transform: scaleX(1),
+						),
+					),
+				),
+			),
+		),
+		input: (
+			_alias: 'textarea',
+			display: block,
+			flex: 1,
+			color: var(--input-color),
+			[padding]: var(--input-padding-top) var(--input-padding-right)
+				var(--input-padding-bottom) var(--input-padding-left),
+			min-height: var(--spacing-50),
+			pseudo: (
+				placeholder: (
+					color: var(--input-placeholder-color),
+				),
+			),
+			state: (
+				disabled: (
+					cursor: not-allowed,
+				),
+				readonly: (
+					cursor: text,
+				),
+			),
+		),
+		icon: (
+			_alias: ':where(svg, [data-icon])',
+			margin: var(--input-padding-top) var(--input-padding-right)
+				var(--input-padding-bottom) var(--input-padding-left),
+			position: var(--input-icon-position),
+			width: var(--input-icon-width),
+			height: var(--input-icon-height),
+			padding: var(--input-icon-padding),
+			pointer-events: var(--input-icon-pointer-events),
+		),
+		icon-right: (
+			_alias: 'textarea + :where(svg, [data-icon])',
+			right: 0,
+		),
+		actions-group: (
+			display: flex,
+			flex-direction: column,
+			position: absolute,
+			right: 0,
+			top: 0,
+			bottom: var(--spacing-px),
+		),
+		hint: (
+			_alias: '> small',
+			display: var(--input-hint-display),
+			font-size: var(--input-hint-font-size),
+			color: var(--input-hint-color),
+			padding-top: var(--input-hint-gap),
+			padding-inline: var(--spacing-xs),
+			white-space: var(--input-hint-white-space),
+			text-overflow: var(--input-hint-text-overflow),
+			overflow: var(--input-hint-overflow),
+			max-width: var(--input-hint-max-width),
+		),
+	),
+	modifier: (
+		icon-left: (
+			--input-padding-left: calc(var(--spacing-sm) * 2 + 1em),
+		),
+		icon-right: (
+			--input-padding-right: calc(var(--spacing-sm) * 2 + 1em),
+		),
+		valid: (
+			element: (
+				wrapper: (
+					pseudo: (
+						after: (
+							background: var(--input-valid-color),
+							transform: scaleX(1),
+						),
+					),
+				),
+				hint: (
+					color: var(--input-valid-color),
+				),
+				icon-right: (
+					color: var(--input-valid-color),
+				),
+			),
+		),
+		invalid: (
+			element: (
+				wrapper: (
+					pseudo: (
+						after: (
+							background: var(--input-invalid-color),
+							transform: scaleX(1),
+						),
+					),
+				),
+				hint: (
+					color: var(--input-invalid-color),
+				),
+				icon-right: (
+					color: var(--input-invalid-color),
+				),
+			),
+		),
+		loading: (
+			element: (
+				wrapper: (
+					pseudo: (
+						before: (
+							height: 2px,
+							background: var(--color-brand-lighten-5),
+						),
+						after: (
+							animation: var(--animate-indeterminate),
+						),
+					),
+				),
+			),
+		),
+		floating: (
+			[margin-left]: var(--input-padding-left),
+			[margin-right]: var(--input-padding-right),
+			element: (
+				wrapper: (
+					[margin-left]: calc(var(--input-padding-left) * -1),
+					[margin-right]: calc(var(--input-padding-right) * -1),
+				),
+				hint: (
+					[margin-left]: calc(var(--input-padding-left) * -1),
+					[margin-right]: calc(var(--input-padding-right) * -1),
+				),
+				label: (
+					position: absolute,
+					z-index: 1,
+					pointer-events: none,
+					font-size: inherit,
+					[padding-top]: var(--input-padding-top),
+					[padding-bottom]: var(--input-padding-bottom),
+					padding-inline: 0,
+					margin: 0,
+					will-change: 'transform',
+					transform-origin: left,
+					transition: all 0.2s ease-in-out,
+				),
+				input: (
+					pseudo: (
+						placeholder: (
+							opacity: 0,
+						),
+					),
+				),
+			),
+			state: (
+				focus-within: (
+					element: (
+						label: (
+							transform: translateY(-1.2ch),
+							font-size: var(--text-12),
+						),
+						input: (
+							transform: translateY(0.85ch),
+							pseudo: (
+								placeholder: (
+									opacity: 1,
+								),
+							),
+						),
+					),
+				),
+				dirty: (
+					element: (
+						label: (
+							transform: translateY(-1.2ch),
+							font-size: var(--text-12),
+						),
+						input: (
+							transform: translateY(0.85ch),
+							pseudo: (
+								placeholder: (
+									opacity: 1,
+								),
+							),
+						),
+					),
+				),
+			),
+		),
+	),
+	state: (
+		disabled: (
+			opacity: 0.5,
+			element: (
+				wrapper: (
+					state: (
+						hover: (
+							background-color: var(--color-surface-1),
+						),
+					),
+				),
+			),
+		),
+		readonly: (
+			element: (
+				wrapper: (
+					pseudo: (
+						after: (
+							opacity: 0,
+						),
+					),
+					state: (
+						hover: (
+							background-color: var(--color-surface-1),
+						),
+					),
+				),
+			),
+		),
+	),
+) !default;

package/src/style.scss

@@ -0,0 +1,14 @@
+// reset
+@import 'reset';
+
+// props
+@import 'props';
+
+// preflight
+@import 'preflight';
+
+// components
+@import 'components';
+
+// utilities (must be the last one)
+@import 'utilities';

package/src/themes/dark/_context.scss

@@ -0,0 +1,8 @@
+// configuration
+@import '../../config';
+
+// tools (mixins, functions, recipes)
+@import '../../tools';
+
+// settings
+@import 'settings';

package/src/themes/dark/components/_vv-button.scss

@@ -0,0 +1,24 @@
+@use 'sass:map';
+@import '../context';
+
+$component-name: map.get($components-names, vv-button);
+$component-map: $vv-button;
+$props: true;
+
+@mixin theme-dark-vv-button {
+	@include spread-map-into-props(
+		$map: $component-map,
+		$prefix: $component-name,
+		$deep: $props
+	);
+}
+
+:where(:host, :root, .theme):not(.theme--light) {
+	@media (prefers-color-scheme: dark) {
+		@include theme-dark-vv-button;
+	}
+}
+
+:where(.theme.theme--dark) {
+	@include theme-dark-vv-button;
+}

package/src/themes/dark/components/_vv-input-checkbox.scss

@@ -0,0 +1,24 @@
+@use 'sass:map';
+@import '../context';
+
+$component-name: map.get($components-names, vv-input-checkbox);
+$component-map: $vv-input-checkbox;
+$props: true;
+
+@mixin theme-dark-vv-input-checkbox {
+	@include spread-map-into-props(
+		$map: $component-map,
+		$prefix: $component-name,
+		$deep: $props
+	);
+}
+
+:where(:host, :root, .theme):not(.theme--light) {
+	@media (prefers-color-scheme: dark) {
+		@include theme-dark-vv-input-checkbox;
+	}
+}
+
+:where(.theme.theme--dark) {
+	@include theme-dark-vv-input-checkbox;
+}

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

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

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

@@ -0,0 +1,15 @@
+@import '../context';
+
+@mixin theme-dark-bg {
+	@include spread-map-into-props($background-image, 'bg');
+}
+
+:where(:host, :root, .theme):not(.theme--light) {
+	@media (prefers-color-scheme: dark) {
+		@include theme-dark-bg;
+	}
+}
+
+:where(.theme.theme--dark) {
+	@include theme-dark-bg;
+}

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

@@ -0,0 +1,15 @@
+@import '../context';
+
+@mixin theme-dark-colors {
+	@include spread-map-into-props($colors, 'color');
+}
+
+:where(:host, :root, .theme):not(.theme--light) {
+	@media (prefers-color-scheme: dark) {
+		@include theme-dark-colors;
+	}
+}
+
+:where(.theme.theme--dark) {
+	@include theme-dark-colors;
+}

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

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

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

@@ -0,0 +1,12 @@
+// background-image
+$background-image: (
+	none: none,
+	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"),
+	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"),
+) !default;

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

@@ -0,0 +1,15 @@
+@use 'sass:color';
+
+$color-scheme: dark !default;
+$color-brand: #1976d2 !default;
+$color-word: hsl(color.hue($color-brand) 15% 85%) !default;
+$color-surface: hsl(color.hue($color-brand) 10% 5%) !default;
+$color-alpha: hsla(0deg 0% 100% / 0%) !default;
+
+// color map
+$colors: (
+	scheme: $color-scheme,
+	word: color-darken-map($color-word, 'word', $scale: 15%),
+	surface: color-lighten-map($color-surface, 'surface', $scale: 5%),
+	alpha: color-alpha-map($color-alpha, 'alpha', $steps: 5, $scale: 5%),
+) !default;