@volverjs/style 0.0.0

package/src/settings/_grid.scss

@@ -0,0 +1,104 @@
+// grid template columns
+$grid-template-columns: (
+	1: repeat(1, minmax(0, 1fr)),
+	2: repeat(2, minmax(0, 1fr)),
+	3: repeat(3, minmax(0, 1fr)),
+	4: repeat(4, minmax(0, 1fr)),
+	5: repeat(5, minmax(0, 1fr)),
+	6: repeat(6, minmax(0, 1fr)),
+	7: repeat(7, minmax(0, 1fr)),
+	8: repeat(8, minmax(0, 1fr)),
+	9: repeat(9, minmax(0, 1fr)),
+	10: repeat(10, minmax(0, 1fr)),
+	11: repeat(11, minmax(0, 1fr)),
+	12: repeat(12, minmax(0, 1fr)),
+	none: none,
+) !default;
+
+// grid column
+$grid-column: (
+	auto: auto,
+	span-1: span 1 / span 1,
+	span-2: span 2 / span 2,
+	span-3: span 3 / span 3,
+	span-4: span 4 / span 4,
+	span-5: span 5 / span 5,
+	span-6: span 6 / span 6,
+	span-7: span 7 / span 7,
+	span-8: span 8 / span 8,
+	span-9: span 9 / span 9,
+	span-10: span 10 / span 10,
+	span-11: span 11 / span 11,
+	span-12: span 12 / span 12,
+	span-full: 1 #{'/'} -1,
+) !default;
+
+// grid column start/end
+$grid-column-start-end: (
+	1: 1,
+	2: 2,
+	3: 3,
+	4: 4,
+	5: 5,
+	6: 6,
+	7: 7,
+	8: 8,
+	9: 9,
+	10: 10,
+	11: 11,
+	12: 12,
+	13: 13,
+	auto: auto,
+) !default;
+
+// grid template rows
+$grid-template-rows: (
+	1: repeat(1, minmax(0, 1fr)),
+	2: repeat(2, minmax(0, 1fr)),
+	3: repeat(3, minmax(0, 1fr)),
+	4: repeat(4, minmax(0, 1fr)),
+	5: repeat(5, minmax(0, 1fr)),
+	6: repeat(6, minmax(0, 1fr)),
+	none: none,
+) !default;
+
+// grid row
+$grid-row: (
+	auto: auto,
+	span-1: span 1 / span 1,
+	span-2: span 2 / span 2,
+	span-3: span 3 / span 3,
+	span-4: span 4 / span 4,
+	span-5: span 5 / span 5,
+	span-6: span 6 / span 6,
+	span-full: 1 #{'/'} -1,
+) !default;
+
+// grid row start/end
+$grid-row-start-end: (
+	1: 1,
+	2: 2,
+	3: 3,
+	4: 4,
+	5: 5,
+	6: 6,
+	7: 7,
+	auto: auto,
+) !default;
+
+// grid auto flow
+$grid-auto-flow: (
+	row: row,
+	col: column,
+	dense: dense,
+	row-dense: row dense,
+	col-dense: column dense,
+) !default;
+
+// grid auto rows/columns
+$grid-auto-rows-columns: (
+	auto: auto,
+	min: min-content,
+	max: max-content,
+	fr: minmax(0, 1fr),
+) !default;

package/src/settings/_index.scss

@@ -0,0 +1,34 @@
+// 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';
+
+// 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';

package/src/settings/_input.scss

@@ -0,0 +1,51 @@
+$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),
+	color: var(--color-word),
+	background-color: var(--color-surface-1),
+	gap: var(--spacing-md),
+	line-height: var(--leading-normal),
+	font-size: var(--text-16),
+	label: (
+		color: var(--color-word-3),
+		display: block,
+		font-size: var(--text-xs),
+		gap: var(--spacing-xs),
+		white-space: nowrap,
+		text-overflow: ellipsis,
+		overflow: hidden,
+		max-width: 100%,
+	),
+	icon: (
+		position: absolute,
+		width: 1em,
+		height: calc(var(--input-icon-width) * var(--input-line-height)),
+		padding: calc((var(--input-icon-height) - var(--input-icon-width)) / 2)
+			0,
+		pointer-events: none,
+	),
+	hint: (
+		display: block,
+		font-size: var(--text-12),
+		color: var(--color-word-4),
+		gap: var(--spacing-8),
+		white-space: nowrap,
+		text-overflow: ellipsis,
+		overflow: hidden,
+		max-width: 100%,
+	),
+	placeholder: (
+		color: var(--color-word-4),
+	),
+	valid: (
+		color: var(--color-success),
+	),
+	invalid: (
+		color: var(--color-danger),
+	),
+) !default;

package/src/settings/_layout.scss

@@ -0,0 +1,109 @@
+// aspect-ratio
+$aspect-ratio: (
+	auto: auto,
+	square: '1/1',
+	photo: '3/2',
+	tv: '4/3',
+	wide: '16/9',
+	ultrawide: '21/9',
+) !default;
+
+// columns
+$columns: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12) !default;
+
+// break-after
+$break-after: (
+	auto,
+	avoid,
+	all,
+	avoid-page,
+	page,
+	left,
+	right,
+	column
+) !default;
+
+// break-before
+$break-before: (
+	auto,
+	avoid,
+	all,
+	avoid-page,
+	page,
+	left,
+	right,
+	column
+) !default;
+
+// break-inside
+$break-inside: (auto, avoid, avoid-page, avoid-column) !default;
+
+// display-without-breakpoints
+$display-without-breakpoints: (
+	table,
+	inline-table,
+	table-caption,
+	table-cell,
+	table-column,
+	table-column-group,
+	table-footer-group,
+	table-header-group,
+	table-row-group,
+	table-row,
+	flow-root,
+	contents,
+	list-item
+) !default;
+
+// display-with-breakpoints
+$display-with-breakpoints: (
+	block,
+	inline-block,
+	inline,
+	flex,
+	inline-flex,
+	grid,
+	inline-grid,
+	none
+) !default;
+
+// object-fit
+$object-fit: (fill, contain, cover, none, scale-down) !default;
+
+// object-position
+$object-position: (
+	bottom: bottom,
+	center: center,
+	left: left,
+	left-bottom: left bottom,
+	left-top: left top,
+	right: right,
+	right-bottom: right bottom,
+	right-top: right top,
+	top: top,
+) !default;
+
+// position
+$position: (static, fixed, absolute, relative, sticky) !default;
+
+// visibility
+$visibility: (
+	visible: visible,
+	invisible: hidden,
+) !default;
+
+// z-index
+$z-index: (
+	dropdown: 1000,
+	sticky: 1020,
+	fixed: 1030,
+	modal-backdrop: 1040,
+	modal: 1050,
+	confirm-backdrop: 1060,
+	confirm: 1070,
+	popover: 1060,
+	tooltip: 1070,
+	toast: 1080,
+	notification-alert: 1090,
+	auto: 'auto',
+) !default;

package/src/settings/_sizing.scss

@@ -0,0 +1,99 @@
+// width
+$width: (
+	auto: auto,
+	1\/2: 50%,
+	1\/3: 33.3333%,
+	2\/3: 66.6667%,
+	1\/4: 25%,
+	2\/4: 50%,
+	3\/4: 75%,
+	1\/5: 20%,
+	2\/5: 40%,
+	3\/5: 60%,
+	4\/5: 80%,
+	1\/6: 16.6667%,
+	2\/6: 33.3333%,
+	3\/6: 50%,
+	4\/6: 66.6667%,
+	5\/6: 83.3333%,
+	1\/12: 8.3333%,
+	2\/12: 16.6667%,
+	3\/12: 25%,
+	4\/12: 33.3333%,
+	5\/12: 41.6667%,
+	6\/12: 50%,
+	7\/12: 58.3333%,
+	8\/12: 66.6667%,
+	9\/12: 75%,
+	10\/12: 83.3333%,
+	11\/12: 91.6667%,
+	full: 100%,
+	screen: 100vw,
+	min: min-content,
+	max: max-content,
+	fit: fit-content,
+) !default;
+
+// height
+$height: (
+	auto: auto,
+	1\/2: 50%,
+	1\/3: 33.3333%,
+	2\/3: 66.6667%,
+	1\/4: 25%,
+	2\/4: 50%,
+	3\/4: 75%,
+	1\/5: 20%,
+	2\/5: 40%,
+	3\/5: 60%,
+	4\/5: 80%,
+	1\/6: 16.6667%,
+	2\/6: 33.3333%,
+	3\/6: 50%,
+	4\/6: 66.6667%,
+	5\/6: 83.3333%,
+	full: 100%,
+	screen: 100vh,
+	min: min-content,
+	max: max-content,
+	fit: fit-content,
+) !default;
+
+// max-width
+$max-width: (
+	0: 0px,
+	none: none,
+	full: 100%,
+	min: min-content,
+	max: max-content,
+	fit: fit-content,
+	prose: 65ch,
+) !default;
+
+// max-height
+$max-height: (
+	full: 100%,
+	screen: 100vh,
+	min: min-content,
+	max: max-content,
+	fit: fit-content,
+) !default;
+
+// min-width
+$min-width: (
+	0: 0px,
+	full: 100%,
+	min: min-content,
+	max: max-content,
+	fit: fit-content,
+) !default;
+
+// min-height
+$min-height: (
+	0: 0px,
+	full: 100%,
+	screen: 100vh,
+	min: min-content,
+	max: max-content,
+	fit: fit-content,
+) !default;

package/src/settings/_spacing.scss

@@ -0,0 +1,77 @@
+// static spacing
+$spacing: (
+	0: 0,
+	px: 1px,
+	1: 0.0625rem,
+	2: 0.125rem,
+	4: 0.25rem,
+	6: 0.375rem,
+	8: 0.5rem,
+	10: 0.625rem,
+	12: 0.75rem,
+	14: 0.875rem,
+	16: 1rem,
+	20: 1.25rem,
+	22: 1.375rem,
+	24: 1.5rem,
+	26: 1.625rem,
+	28: 1.75rem,
+	32: 2rem,
+	34: 2.125rem,
+	36: 2.25rem,
+	38: 2.375rem,
+	40: 2.5rem,
+	44: 2.75rem,
+	48: 3rem,
+	50: 3.125rem,
+	56: 3.5rem,
+	64: 4rem,
+	80: 5rem,
+	96: 6rem,
+	100: 6.25rem,
+	112: 7rem,
+	128: 8rem,
+	144: 9rem,
+	150: 9.375rem,
+	160: 10rem,
+	176: 11rem,
+	192: 12rem,
+	208: 13rem,
+	224: 14rem,
+	240: 15rem,
+	256: 16rem,
+	288: 18rem,
+	300: 18.75rem,
+	320: 20rem,
+	384: 24rem,
+) !default;
+
+// dynamic spacing
+// could be a static reference or a custom value
+$spacing-dynamic: (
+	xs: (
+		xxs: 6,
+		sm: 8,
+		lg: 10,
+	),
+	sm: (
+		xxs: 10,
+		sm: 12,
+		lg: 14,
+	),
+	md: (
+		xxs: 12,
+		sm: 14,
+		lg: 16,
+	),
+	lg: (
+		xxs: 16,
+		sm: 22,
+		lg: 36,
+	),
+	xl: (
+		xxs: 24,
+		sm: 36,
+		lg: 48,
+	),
+) !default;

package/src/settings/_typography.scss

@@ -0,0 +1,179 @@
+// font-variables
+$font-family-sans: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"' !default;
+$font-family-serif: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif' !default;
+$font-family-mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace' !default;
+
+// font-family
+$font-family: (
+	sans: $font-family-sans,
+	serif: $font-family-serif,
+	mono: $font-family-mono,
+) !default;
+
+// font-size static
+$font-size: (
+	smaller: smaller,
+	larger: larger,
+	6: 0.375rem,
+	8: 0.5rem,
+	10: 0.625rem,
+	12: 0.75rem,
+	14: 0.875rem,
+	16: 1rem,
+	18: 1.125rem,
+	20: 1.25rem,
+	22: 1.375rem,
+	24: 1.5rem,
+	26: 1.625rem,
+	28: 1.75rem,
+	30: 1.875rem,
+	32: 2rem,
+	34: 2.125rem,
+	36: 2.25rem,
+	48: 3rem,
+	60: 3.75rem,
+	72: 4.5rem,
+	96: 6rem,
+	128: 8rem,
+) !default;
+
+// font-size dynamic
+// could be a static reference or a custom value
+$font-size-dynamic: (
+	xs: (
+		xxs: 10,
+		sm: 12,
+		lg: 14,
+	),
+	sm: (
+		xxs: 12,
+		sm: 14,
+		lg: 16,
+	),
+	md: (
+		xxs: 14,
+		sm: 16,
+		lg: 18,
+	),
+	lg: (
+		xxs: 16,
+		sm: 18,
+		lg: 20,
+	),
+	xl: (
+		xxs: 18,
+		sm: 20,
+		lg: 22,
+	),
+) !default;
+
+// font-weight
+$font-weight: (
+	thin: 100,
+	extralight: 200,
+	light: 300,
+	normal: 400,
+	medium: 500,
+	semibold: 600,
+	bold: 700,
+	extrabold: 800,
+	black: 900,
+) !default;
+
+// line-height (leading)
+$line-height: (
+	none: 1,
+	tight: 1.25,
+	snug: 1.375,
+	normal: 1.5,
+	relaxed: 1.625,
+	loose: 2,
+) !default;
+
+// letter-spacing (tracking)
+$letter-spacing: (
+	tighter: -0.05em,
+	tight: -0.025em,
+	normal: 0em,
+	wide: 0.025em,
+	wider: 0.05em,
+	widest: 0.1em,
+) !default;
+
+// font-variant-numeric
+$font-variant-numeric: (
+	normal-nums: normal,
+	ordinal: ordinal,
+	slashed-zero: slashed-zero,
+	lining-nums: lining-nums,
+	oldstyle-nums: oldstyle-nums,
+	proportional-nums: proportional-nums,
+	tabular-nums: tabular-nums,
+	diagonal-fractions: diagonal-fractions,
+	stacked-fractions: stacked-fractions,
+) !default;
+
+// list-style-type
+$list-style-type: (none, disc, decimal) !default;
+
+// list-style-position
+$list-style-position: (inside, outside) !default;
+
+// text-align
+$text-align: (left, center, right, justify, start, end) !default;
+
+// text-decorator-line
+$text-decorator-line: (
+	underline: underline,
+	overline: overline,
+	line-through: line-through,
+	no-underline: none,
+) !default;
+
+// text-decorator-style
+$text-decorator-style: (solid, double, dotted, dashed, wavy) !default;
+
+// text-decorator-thickness
+$text-decorator-thickness: (
+	auto: auto,
+	from-font: from-font,
+	0: 0px,
+	1: 1px,
+	2: 2px,
+	4: 4px,
+	8: 8px,
+) !default;
+
+// text-underline-offset
+$text-underline-offset: (
+	auto: auto,
+	from-font: from-font,
+	0: 0px,
+	1: 1px,
+	2: 2px,
+	4: 4px,
+	8: 8px,
+) !default;
+
+// text-transform
+$text-transform: (
+	uppercase: uppercase,
+	lowercase: lowercase,
+	capitalize: capitalize,
+	normal-case: none,
+) !default;
+
+// vertical-align
+$vertical-align: (
+	baseline,
+	top,
+	middle,
+	bottom,
+	text-top,
+	text-bottom,
+	sub,
+	super
+) !default;
+
+// white-space
+$white-space: (normal, nowrap, pre, pre-line, pre-wrap) !default;

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

@@ -0,0 +1,43 @@
+$vv-badge: (
+	border-radius: 1.0465em,
+	background: var(--color-brand),
+	color: var(--color-white),
+	font-size: 0.6em,
+	height: 2.093em,
+	min-width: 2.093em,
+	padding: 0.37em 0.475em,
+	display: inline-flex,
+	justify-content: center,
+	font-weight: normal,
+	font-family: var(--font-sans),
+	text-shadow: none,
+	state: (
+		empty: (
+			font-size: inherit,
+			width: 0.5em,
+			height: 0.5em,
+			min-width: 0,
+			border-radius: 0.25em,
+			padding: 0,
+		),
+	),
+	modifier: (
+		white: (
+			background: alpha-color('white', 80%),
+			color: var(--color-black),
+		),
+		black: (
+			background: alpha-color('black', 80%),
+			color: var(--color-white),
+		),
+		danger: (
+			background: var(--color-danger),
+		),
+		success: (
+			background: var(--color-success),
+		),
+		warning: (
+			background: var(--color-warning),
+		),
+	),
+) !default;

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

@@ -0,0 +1,20 @@
+$vv-button-group: (
+	display: inline-flex,
+	align-items: center,
+	gap: var(--spacing-4),
+	modifier: (
+		block: (
+			display: flex,
+			width: 100%,
+		),
+		vertical: (
+			display: inline-flex,
+			flex-direction: column,
+			align-items: normal,
+		),
+		compact: (
+			gap: 0,
+			align-items: normal,
+		),
+	),
+) !default;