@volverjs/style 0.0.0

package/src/props/animation.scss

@@ -0,0 +1,80 @@
+@import '../context';
+
+:where(:host, :root, .theme) {
+	@media (prefers-reduced-motion: no-preference) {
+		@include spread-map-into-props($animate, $prefix: animate);
+	}
+}
+
+@keyframes indeterminate {
+	0% {
+		transform: scaleX(0);
+	}
+
+	50% {
+		transform: scaleX(1);
+		transform-origin: left;
+	}
+
+	51% {
+		transform: scaleX(1);
+		transform-origin: center right;
+	}
+
+	100% {
+		transform: scaleX(0);
+		transform-origin: center right;
+	}
+}
+
+@keyframes spin {
+	from {
+		transform: rotate(0deg);
+	}
+
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+@keyframes ping {
+	75%,
+	100% {
+		transform: scale(2);
+		opacity: 0;
+	}
+}
+
+@keyframes pulse {
+	0%,
+	100% {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 0.5;
+	}
+}
+
+@keyframes bounce {
+	0%,
+	100% {
+		transform: translateY(-25%);
+		animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+	}
+
+	50% {
+		transform: translateY(0);
+		animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+	}
+}
+
+@keyframes progress-indeterminate {
+	0% {
+		background-position: 200% 0;
+	}
+
+	100% {
+		background-position: -200% 0;
+	}
+}

package/src/props/background.scss

@@ -0,0 +1,5 @@
+@import '../context';
+
+:where(:host, :root, .theme) {
+	@include spread-map-into-props($background-image, $prefix: bg);
+}

package/src/props/borders.scss

@@ -0,0 +1,6 @@
+@import '../context';
+
+:where(:host, :root, .theme) {
+	@include spread-map-into-props($border-radius, $prefix: rounded);
+	@include spread-map-into-props($border-width, $prefix: border);
+}

package/src/props/colors.scss

@@ -0,0 +1,5 @@
+@import '../context';
+
+:where(:host, :root, .theme) {
+	@include spread-map-into-props($colors, $prefix: color);
+}

package/src/props/effects.scss

@@ -0,0 +1,5 @@
+@import '../context';
+
+:where(:host, :root, .theme) {
+	@include spread-map-into-props($box-shadow, $prefix: shadow);
+}

package/src/props/filters.scss

@@ -0,0 +1,6 @@
+@import '../context';
+
+:where(:host, :root, .theme) {
+	@include spread-map-into-props($blur, $prefix: blur);
+	@include spread-map-into-props($brightness, $prefix: brightness);
+}

package/src/props/index.scss

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

package/src/props/input.scss

@@ -0,0 +1,5 @@
+@import '../context';
+
+:where(:host, :root, .theme) {
+	@include spread-map-into-props($map: $input, $prefix: input);
+}

package/src/props/layout.scss

@@ -0,0 +1,6 @@
+@import '../context';
+
+:where(:host, :root, .theme) {
+	@include spread-map-into-props($map: $aspect-ratio, $prefix: aspect);
+	@include spread-map-into-props($map: $z-index, $prefix: z);
+}

package/src/props/media.scss

@@ -0,0 +1,49 @@
+@import '../context';
+
+// motion
+@custom-media --motion-ok (prefers-reduced-motion: no-preference);
+@custom-media --motion-not-ok (prefers-reduced-motion: reduce);
+
+// opacity
+@custom-media --opacity-ok (prefers-reduced-transparency: no-preference);
+@custom-media --opacity-not-ok (prefers-reduced-transparency: reduce);
+
+// data
+@custom-media --use-data-ok (prefers-reduced-data: no-preference);
+@custom-media --use-data-not-ok (prefers-reduced-data: reduce);
+
+// color scheme
+@custom-media --os-dark (prefers-color-scheme: dark);
+@custom-media --os-light (prefers-color-scheme: light);
+
+// constrast
+@custom-media --high-contrast (prefers-contrast: more);
+@custom-media --low-contrast (prefers-contrast: less);
+
+// orientation
+@custom-media --portrait (orientation: portrait);
+@custom-media --landscape (orientation: landscape);
+
+// dynamic range
+@custom-media --hd-color (dynamic-range: high);
+
+// pointer
+@custom-media --touch (hover: none) and (pointer: coarse);
+@custom-media --stylus (hover: none) and (pointer: fine);
+@custom-media --pointer (hover) and (pointer: coarse);
+@custom-media --mouse (hover) and (pointer: fine);
+
+// breakpoints
+/* stylelint-disable */
+$old-breakpoint: null;
+$old-breakpoint-value: null;
+@each $breakpoint, $breakpoint-value in $breakpoints {
+	@if $old-breakpoint {
+		@custom-media --#{$old-breakpoint}-only (#{$old-breakpoint-value} <= width <= #{$breakpoint-value});
+		@custom-media --#{$old-breakpoint}-n-above (width >= #{$breakpoint-value});
+		@custom-media --#{$old-breakpoint}-n-below (width <= #{$breakpoint-value});
+	}
+
+	$old-breakpoint: $breakpoint;
+	$old-breakpoint-value: $breakpoint-value;
+}

package/src/props/sizing.scss

@@ -0,0 +1,6 @@
+@import '../context';
+
+:where(:host, :root, .theme) {
+	@include spread-map-into-props($width, $prefix: w);
+	@include spread-map-into-props($height, $prefix: h);
+}

package/src/props/spacing.scss

@@ -0,0 +1,27 @@
+@use 'sass:map';
+@import '../context';
+
+:where(:host, :root, .theme) {
+	// static
+	@each $size, $value in $spacing {
+		--spacing-#{$size}: #{$value};
+	}
+
+	// dynamic
+	@each $name, $sizes in $spacing-dynamic {
+		@each $breakpoint, $size in $sizes {
+			@if map-has-key($breakpoints, $breakpoint) {
+				@include media-breakpoint-up($breakpoint) {
+					$var: $size;
+
+					// if is a static spacing
+					@if map-has-key($spacing, $size) {
+						$var: var(--spacing-#{$size});
+					}
+
+					--spacing-#{$name}: #{$var};
+				}
+			}
+		}
+	}
+}

package/src/props/typography.scss

@@ -0,0 +1,38 @@
+@import '../context';
+
+:where(:host, :root, .theme) {
+	// font-family
+	@include spread-map-into-props($font-family, $prefix: font);
+
+	// font-weight
+	@include spread-map-into-props($font-weight, $prefix: font);
+
+	// line-height
+	@include spread-map-into-props($line-height, $prefix: leading);
+
+	// letter-spacing
+	@include spread-map-into-props($letter-spacing, $prefix: tracking);
+
+	// font-size
+	@each $size, $value in $font-size {
+		--text-#{$size}: #{$value};
+	}
+
+	// font-size dynamic
+	@each $name, $sizes in $font-size-dynamic {
+		@each $breakpoint, $size in $sizes {
+			@if map-has-key($breakpoints, $breakpoint) {
+				@include media-breakpoint-up($breakpoint) {
+					$var: $size;
+
+					// if is a static font-size
+					@if map-has-key($font-size, $size) {
+						$var: var(--text-#{$size});
+					}
+
+					--text-#{$name}: #{$var};
+				}
+			}
+		}
+	}
+}

package/src/reset.scss

@@ -0,0 +1,88 @@
+/*
+    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
+    - The "symbol *" part is to solve Firefox SVG sprite bug
+ */
+*:where(:not(html, iframe, canvas, img, svg, video, details, summary, svg
+			*, symbol *)) {
+	all: unset;
+	display: revert;
+}
+
+/* Preferred box-sizing value */
+:where(*, *::before, *::after) {
+	box-sizing: border-box;
+	border: 0px solid transparent;
+}
+
+/* Reapply the pointer cursor for anchor tags */
+:where(a, button) {
+	cursor: revert;
+}
+
+/* Remove list styles (bullets/numbers) */
+:where(ol, ul, menu) {
+	list-style: none;
+}
+
+/* For images to not be able to exceed their container */
+:where(img) {
+	max-width: 100%;
+}
+
+/* removes spacing between cells in tables */
+:where(table) {
+	border-collapse: collapse;
+}
+
+/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
+:where(input, textarea) {
+	-webkit-user-select: auto;
+}
+
+/* revert the 'white-space' property for textarea elements on Safari */
+:where(textarea) {
+	white-space: revert;
+}
+
+/* minimum style to allow to style meter element */
+:where(meter) {
+	-webkit-appearance: revert;
+	appearance: revert;
+}
+
+/* reset default text opacity of input placeholder */
+::placeholder {
+	color: unset;
+}
+
+/* fix the feature of 'hidden' attribute.
+   display:revert; revert to element instead of attribute */
+:where([hidden]) {
+	display: none;
+}
+
+/* revert for bug in Chromium browsers
+	- fix for the content editable attribute will work properly.
+   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element */
+:where([contenteditable]:not([contenteditable='false'])) {
+	-moz-user-modify: read-write;
+	-webkit-user-modify: read-write;
+	overflow-wrap: break-word;
+	-webkit-line-break: after-white-space;
+	-webkit-user-select: auto;
+}
+
+/* apply back the draggable feature - exist only in Chromium and Safari */
+:where([draggable='true']) {
+	-webkit-user-drag: element;
+}
+
+:where(.revert *) {
+	all: revert;
+	accent-color: initial;
+	background-color: initial;
+	caret-color: initial;
+	color: initial;
+	scrollbar-color: initial;
+	font-family: initial;
+}

package/src/settings/_animation.scss

@@ -0,0 +1,9 @@
+$animate: (
+	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,
+) !default;

package/src/settings/_background.scss

@@ -0,0 +1,56 @@
+// background-attachment
+$background-attachment: (fixed, local, scroll) !default;
+
+// background-clip
+$background-clip: (
+	border: border-box,
+	padding: padding-box,
+	content: content-box,
+	text: text,
+) !default;
+
+// background-origin
+$background-origin: (
+	border: border-box,
+	padding: padding-box,
+	content: content-box,
+) !default;
+
+// background-position
+$background-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;
+
+// background-repeat
+$background-repeat: (
+	repeat: repeat,
+	no-repeat: no-repeat,
+	repeat-x: repeat-x,
+	repeat-y: repeat-y,
+	repeat-round: round,
+	repeat-space: space,
+) !default;
+
+// background-size
+$background-size: (auto, cover, contain) !default;
+
+// 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/settings/_borders.scss

@@ -0,0 +1,24 @@
+// border-radius
+$border-radius: (
+	none: 0px,
+	sm: 0.125rem,
+	rounded: 0.25rem,
+	md: 0.375rem,
+	lg: 0.5rem,
+	xl: 0.75rem,
+	xxl: 1rem,
+	xxxl: 1.5rem,
+	full: 9999px,
+) !default;
+
+// border-width
+$border-width: (
+	0: 0px,
+	border: 1px,
+	2: 2px,
+	4: 4px,
+	8: 8px,
+) !default;
+
+// border-style
+$border-style: (solid, dashed, dotted, double, hidden, none) !default;

package/src/settings/_breakpoints.scss

@@ -0,0 +1,13 @@
+$breakpoints: (
+	xxs: 0,
+	xs: 360px,
+	sm: 576px,
+	md: 992px,
+	lg: 1024px,
+	xl: 1280px,
+	xxl: 1440px,
+	xxxl: 1536px,
+) !default;
+
+@include assert-ascending($breakpoints, '$breakpoints');
+@include assert-starts-at-zero($breakpoints, '$breakpoints');

package/src/settings/_colors.scss

@@ -0,0 +1,39 @@
+@use 'sass:color';
+
+// color variables
+$color-scheme: light !default;
+$color-transparent: transparent !default;
+$color-black: #000 !default;
+$color-white: #fff !default;
+$color-brand: #1976d2 !default;
+$color-accent: #9c27b0 !default;
+$color-success: #21ba45 !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-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;
+
+// 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: 15%),
+	surface: color-darken-map($color-surface, 'surface', $scale: 2%),
+	shadow: hsla-map($color-shadow, 'shadow'),
+	backdrop: hsla-map($color-backdrop, 'backdrop'),
+	alpha: color-alpha-map($color-alpha, 'alpha', $steps: 5, $scale: 5%),
+) !default;

package/src/settings/_effects.scss

@@ -0,0 +1,39 @@
+// box-shadow
+$box-shadow: (
+	sm:
+		'0 1px 2px 0 hsla(var(--color-shadow-hue) var(--color-shadow-saturation) var(--color-shadow-lightness) / 5%)',
+	shadow:
+		'0 1px 3px 0 hsla(var(--color-shadow-hue) var(--color-shadow-saturation) var(--color-shadow-lightness) / 10%), 0 1px 2px -1px hsla(var(--color-shadow-hue) var(--color-shadow-saturation) var(--color-shadow-lightness) / 10%)',
+	md:
+		'0 4px 6px -1px hsla(var(--color-shadow-hue) var(--color-shadow-saturation) var(--color-shadow-lightness) / 10%), 0 2px 4px -2px hsla(var(--color-shadow-hue) var(--color-shadow-saturation) var(--color-shadow-lightness) / 10%)',
+	lg:
+		'0 10px 15px -3px hsla(var(--color-shadow-hue) var(--color-shadow-saturation) var(--color-shadow-lightness) / 10%), 0 4px 6px -4px hsla(var(--color-shadow-hue) var(--color-shadow-saturation) var(--color-shadow-lightness) / 10%)',
+	xl:
+		'0 20px 25px -5px hsla(var(--color-shadow-hue) var(--color-shadow-saturation) var(--color-shadow-lightness) / 10%), 0 8px 10px -6px hsla(var(--color-shadow-hue) var(--color-shadow-saturation) var(--color-shadow-lightness) / 10%)',
+	2xl:
+		'0 25px 50px -12px hsla(var(--color-shadow-hue) var(--color-shadow-saturation) var(--color-shadow-lightness) / 25%)',
+	inner:
+		'inset 0 2px 4px 0 hsla(var(--color-shadow-hue) var(--color-shadow-saturation) var(--color-shadow-lightness) / 5%)',
+	none: '0 0 #0000',
+) !default;
+
+// blend-mode
+$blend-mode: (
+	normal,
+	multiply,
+	screen,
+	overlay,
+	darken,
+	lighten,
+	color-dodge,
+	color-burn,
+	hard-light,
+	soft-light,
+	difference,
+	exclusion,
+	hue,
+	saturation,
+	color,
+	luminosity,
+	plus-lighter
+) !default;

package/src/settings/_filters.scss

@@ -0,0 +1,26 @@
+// blur
+$blur: (
+	none: blur(0),
+	sm: blur(4px),
+	blur: blur(8px),
+	md: blur(12px),
+	lg: blur(16px),
+	xl: blur(24px),
+	xxl: blur(40px),
+	xxxl: blur(64px),
+) !default;
+
+// brightness
+$brightness: (
+	0: brightness(0),
+	50: brightness(0.5),
+	75: brightness(0.75),
+	90: brightness(0.9),
+	95: brightness(0.95),
+	100: brightness(1),
+	105: brightness(1.05),
+	110: brightness(1.1),
+	125: brightness(1.25),
+	150: brightness(1.5),
+	200: brightness(2),
+) !default;

package/src/settings/_flexbox.scss

@@ -0,0 +1,66 @@
+// flex-direction
+$flex-direction: (
+	row: row,
+	row-reverse: row-reverse,
+	col: column,
+	col-reverse: column-reverse,
+) !default;
+
+// flex-wrap
+$flex-wrap: (wrap, wrap-reverse, nowrap) !default;
+
+// flex
+$flex: (
+	1: 1 1 0%,
+	auto: 1 1 auto,
+	initial: 0 1 auto,
+	none: none,
+) !default;
+
+// order
+$order: (
+	1: 1,
+	2: 2,
+	3: 3,
+	4: 4,
+	5: 5,
+	6: 6,
+	7: 7,
+	8: 8,
+	9: 9,
+	10: 10,
+	11: 11,
+	12: 12,
+	first: -9999,
+	last: 9999,
+	none: 0,
+) !default;
+
+// justify and align content
+$justify-align-content: (
+	start: flex-start,
+	end: flex-end,
+	center: center,
+	between: space-between,
+	around: space-around,
+	evenly: space-evenly,
+) !default;
+
+// justify and align items
+$justify-align-items: (
+	start: flex-start,
+	end: flex-end,
+	center: center,
+	baseline: baseline,
+	stretch: stretch,
+) !default;
+
+// justify and align self
+$justify-align-self: (
+	auto: auto,
+	start: flex-start,
+	end: flex-end,
+	center: center,
+	baseline: baseline,
+	stretch: stretch,
+) !default;