@volverjs/style 0.1.2-beta.25 → 0.1.2-beta.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volverjs/style",
-  "version": "0.1.2-beta.25",
+  "version": "0.1.2-beta.27",
   "description": "@volverjs/style is a lightweight responsive CSS utility library to accompany @volverjs/ui and static webpages as well.",
   "main": "dist/style.css",
   "style": "dist/style.css",
@@ -59,6 +59,8 @@
     "./scss/components/vv-progress": "./src/components/vv-progress.scss",
     "./components/vv-select": "./dist/components/vv-select.css",
     "./scss/components/vv-select": "./src/components/vv-select.scss",
+    "./components/vv-skeleton": "./dist/components/vv-skeleton.css",
+    "./scss/components/vv-skeleton": "./src/components/vv-skeleton.scss",
     "./components/vv-tab": "./dist/components/vv-tab.css",
     "./scss/components/vv-tab": "./src/components/vv-tab.scss",
     "./components/vv-table": "./dist/components/vv-table.css",
@@ -73,8 +75,6 @@
     "./scss/components/vv-tooltip": "./src/components/vv-tooltip.scss",
     "./export": "./dist/export.css",
     "./scss/export": "./src/export.scss",
-    "./props/animation": "./dist/props/animation.css",
-    "./scss/props/animation": "./src/props/animation.scss",
     "./props/background": "./dist/props/background.css",
     "./scss/props/background": "./src/props/background.scss",
     "./props/borders": "./dist/props/borders.css",
@@ -97,6 +97,8 @@
     "./scss/props/sizing": "./src/props/sizing.scss",
     "./props/spacing": "./dist/props/spacing.css",
     "./scss/props/spacing": "./src/props/spacing.scss",
+    "./props/transitions": "./dist/props/transitions.css",
+    "./scss/props/transitions": "./src/props/transitions.scss",
     "./props/typography": "./dist/props/typography.css",
     "./scss/props/typography": "./src/props/typography.scss",
     "./reset": "./dist/reset.css",
@@ -107,8 +109,6 @@
     "./scss/themes/dark/props": "./src/themes/dark/props/index.scss",
     "./themes/dark": "./dist/themes/dark/volver.css",
     "./scss/themes/dark": "./src/themes/dark/volver.scss",
-    "./utilities/animation": "./dist/utilities/animation.css",
-    "./scss/utilities/animation": "./src/utilities/animation.scss",
     "./utilities/backgrounds": "./dist/utilities/backgrounds.css",
     "./scss/utilities/backgrounds": "./src/utilities/backgrounds.scss",
     "./utilities/borders": "./dist/utilities/borders.css",
@@ -125,6 +125,8 @@
     "./scss/utilities/grid": "./src/utilities/grid.scss",
     "./utilities": "./dist/utilities.css",
     "./scss/utilities": "./src/utilities/index.scss",
+    "./utilities/interactivity": "./dist/utilities/interactivity.css",
+    "./scss/utilities/interactivity": "./src/utilities/interactivity.scss",
     "./utilities/layout": "./dist/utilities/layout.css",
     "./scss/utilities/layout": "./src/utilities/layout.scss",
     "./utilities/sizing": "./dist/utilities/sizing.css",
@@ -153,42 +155,42 @@
   },
   "homepage": "https://github.com/volverjs/style#readme",
   "devDependencies": {
-    "@iconify/vue": "^4.0.0",
-    "@vitejs/plugin-vue": "^3.2.0",
-    "@vueuse/core": "^9.6.0",
-    "@vueuse/head": "^1.0.18",
-    "eslint": "^8.28.0",
+    "@iconify/vue": "^4.0.2",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vueuse/core": "^9.8.2",
+    "@vueuse/head": "^1.0.22",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-vue": "^9.8.0",
     "glob": "^8.0.3",
     "icss-utils": "^5.1.0",
-    "markdown-it-anchor": "^8.6.5",
+    "markdown-it-anchor": "^8.6.6",
     "markdown-it-prism": "^2.3.0",
-    "postcss": "^8.4.19",
+    "postcss": "^8.4.20",
     "postcss-html": "^1.5.0",
     "postcss-preset-env": "^7.8.3",
     "prism-themes": "^1.9.0",
     "prismjs": "1.29.0",
-    "sass": "^1.56.1",
-    "stylelint": "^14.15.0",
+    "sass": "^1.57.1",
+    "stylelint": "^14.16.0",
     "stylelint-config-prettier": "^9.0.4",
     "stylelint-config-recommended-scss": "^8.0.0",
     "stylelint-config-recommended-vue": "^1.4.0",
     "stylelint-config-standard-scss": "^6.1.0",
-    "unplugin-auto-import": "^0.11.5",
-    "unplugin-vue-components": "^0.22.11",
-    "vite": "^3.2.4",
-    "vite-plugin-css-export": "^1.2.0",
+    "unplugin-auto-import": "^0.12.1",
+    "unplugin-vue-components": "^0.22.12",
+    "vite": "^4.0.3",
+    "vite-plugin-css-export": "^1.2.1",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-handlebars": "^1.6.0",
     "vite-plugin-markdown": "^2.1.0",
-    "vite-plugin-pages": "^0.27.1",
-    "vite-plugin-stylelint": "^3.0.9",
+    "vite-plugin-pages": "^0.28.0",
+    "vite-plugin-stylelint": "^4.1.3",
     "vite-plugin-vue-layouts": "^0.7.0",
-    "vite-ssg": "^0.22.0",
+    "vite-ssg": "^0.22.1",
     "vite-ssg-sitemap": "^0.4.3",
     "vue": "^3.2.45",
-    "vue-live": "2.1.0",
+    "vue-live": "2.3.2",
     "vue-router": "^4.1.6"
   },
   "scripts": {

package/src/_config.scss

@@ -30,6 +30,7 @@ $components-names: (
 	vv-nav: $components-prefix + -nav,
 	vv-progress: $components-prefix + -progress,
 	vv-select: $components-prefix + -select,
+	vv-skeleton: $components-prefix + -skeleton,
 	vv-tab: $components-prefix + -tab,
 	vv-table: $components-prefix + -table,
 	vv-text: $components-prefix + -text,

package/src/_preflight.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use 'context' as *;
 
-:where(:host, :root, [class*='theme']) {
+:where(:host, :root, .theme) {
 	accent-color: var(--color-brand);
 	background: var(--color-surface);
 	caret-color: var(--color-brand);
@@ -169,7 +169,12 @@
 		}
 
 		// buttons
-		&:where(button, input[type='button'], input[type='submit'], input[type='reset']) {
+		&:where(
+				button,
+				input[type='button'],
+				input[type='submit'],
+				input[type='reset']
+			) {
 			@extend %vv-button !optional;
 
 			&:where([type='button']) {
@@ -205,7 +210,12 @@
 			}
 
 			&
-				+ :where(button, input[type='button'], input[type='submit'], input[type='reset']) {
+				+ :where(
+					button,
+					input[type='button'],
+					input[type='submit'],
+					input[type='reset']
+				) {
 				@extend %ml-sm !optional;
 			}
 		}
@@ -365,11 +375,29 @@
 		}
 
 		// input text
-		&:where(label:has(+ input:not([type='radio'], [type='checkbox'], [type='button'], [type='submit'], [type='reset']))) {
+		&:where(
+				label:has(
+						+ input:not(
+								[type='radio'],
+								[type='checkbox'],
+								[type='button'],
+								[type='submit'],
+								[type='reset']
+							)
+					)
+			) {
 			@extend %vv-input-text__label !optional;
 		}
 
-		&:where(input:not([type='radio'], [type='checkbox'], [type='button'], [type='submit'], [type='reset'])) {
+		&:where(
+				input:not(
+						[type='radio'],
+						[type='checkbox'],
+						[type='button'],
+						[type='submit'],
+						[type='reset']
+					)
+			) {
 			@extend %w-full !optional;
 			@extend %vv-input-text !optional;
 			@extend %vv-input-text__wrapper !optional;

package/src/components/index.scss

@@ -16,6 +16,7 @@
 @use 'vv-nav';
 @use 'vv-progress';
 @use 'vv-select';
+@use 'vv-skeleton';
 @use 'vv-tab';
 @use 'vv-table';
 @use 'vv-text';

package/src/components/vv-button.scss

@@ -30,10 +30,6 @@ $component-selector: '.#{ $component-name}';
 			$prefix: $component-name,
 			$props: $use-custom-props-for-components
 		);
-
-		@media (prefers-reduced-motion: reduce) {
-			transition: none;
-		}
 	}
 
 	@include wrap-with-where(

package/src/components/vv-skeleton.scss

@@ -0,0 +1,14 @@
+@use 'sass:map';
+@use '../context' as *;
+
+$component-name: map.get($components-names, vv-skeleton);
+$component-map: $vv-skeleton;
+$component-selector: '.#{ $component-name}';
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
+);

package/src/export.scss

@@ -219,7 +219,7 @@
 	// width spacer
 	@each $key, $value in $width {
 		$name: meta.inspect($key);
-		$name: str-replace($name, '\\/', '/');
+		$name: str-replace($name, '\\/', '_');
 
 		#{'width-spacer__' + $name}: $value;
 	}
@@ -227,7 +227,7 @@
 	// height spacer
 	@each $key, $value in $height {
 		$name: meta.inspect($key);
-		$name: str-replace($name, '\\/', '/');
+		$name: str-replace($name, '\\/', '_');
 
 		#{'height-spacer__' + $name}: $value;
 	}
@@ -424,6 +424,25 @@
 
 	// #endregion
 
+	// ============================================================== */
+	// #region FILTERS
+	// blur
+	@each $key, $value in $blur {
+		#{'blur__' + $key}: $value;
+	}
+
+	// brightness
+	@each $key, $value in $brightness {
+		#{'brightness__' + $key}: $value;
+	}
+
+	// saturation
+	@each $key, $value in $saturation {
+		#{'saturation__' + $key}: $value;
+	}
+
+	// #endregion
+
 	// ============================================================== */
 	// #region TRANSITIONS & ANIMATIONS
 	// transition property

package/src/props/filters.scss

@@ -3,4 +3,5 @@
 :where(:host, :root, .theme) {
 	@include spread-map-into-props($blur, $prefix: blur);
 	@include spread-map-into-props($brightness, $prefix: brightness);
+	@include spread-map-into-props($saturation, $prefix: saturate);
 }

package/src/props/index.scss

@@ -1,12 +1,12 @@
-@use 'animation';
 @use 'background';
 @use 'borders';
 @use 'colors';
 @use 'effects';
 @use 'filters';
+@use 'input';
 @use 'layout';
 @use 'media';
+@use 'sizing';
 @use 'spacing';
+@use 'transitions';
 @use 'typography';
-@use 'sizing';
-@use 'input';

package/src/props/{animation.scss → transitions.scss}

@@ -1,11 +1,45 @@
 @use '../context' as *;
 
 :where(:host, :root, .theme) {
+	// animation
 	@media (prefers-reduced-motion: no-preference) {
-		@include spread-map-into-props($animate, $prefix: animate);
+		// transition-property
+		@include spread-map-into-props(
+			$transition-property,
+			$prefix: transition-property
+		);
+
+		// duration
+		@include spread-map-into-props(
+			$transition-duration-delay,
+			$prefix: duration
+		);
+
+		// ease
+		@include spread-map-into-props(
+			$transition-timing-function,
+			$prefix: ease
+		);
+
+		// animation
+		@include spread-map-into-props($animation, animation);
+
+		// transition
+		@each $property, $value in $transition-property {
+			@if $property != 'none' {
+				--transition-#{$property}: var(
+						--transition-property-#{$property}
+					)
+					var(--duration-300)
+					var(--ease-in-out);
+			} @else {
+				--transition-#{$property}: none;
+			}
+		}
 	}
 }
 
+// keyframes
 @keyframes indeterminate {
 	0% {
 		transform: scaleX(0);
@@ -89,3 +123,9 @@
 		opacity: 0;
 	}
 }
+
+@keyframes shine {
+	to {
+		background-position-x: -200%;
+	}
+}

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,19 +1,19 @@
 // utilities and custom props
-@forward 'animation';
+@forward 'colors';
+@forward 'background';
 @forward 'borders';
 @forward 'breakpoints';
-@forward 'colors';
-@forward 'layout';
+@forward 'effects';
 @forward 'filters';
 @forward 'flexbox';
 @forward 'grid';
+@forward 'input';
+@forward 'interactivity';
+@forward 'layout';
 @forward 'sizing';
 @forward 'spacing';
-@forward 'typography';
-@forward 'background';
-@forward 'effects';
-@forward 'input';
 @forward 'transitions';
+@forward 'typography';
 
 // components
 @forward 'components/vv-accordion';
@@ -34,6 +34,7 @@
 @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';

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

@@ -34,8 +34,11 @@ $transition-timing-function: (
 // animation
 $animation: (
 	none: none,
-	spin: spin 1s linear infinite,
+	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

@@ -35,7 +35,7 @@ $vv-accordion: (
 			line-height: var(--leading-normal),
 			color: var(--color-word-2),
 			will-change: background-color,
-			transition: background-color 0.3s ease-in-out,
+			transition: var(--transition-colors),
 			font-size: var(--text-sm),
 			border-radius: var(--rounded-lg),
 			-webkit-tap-highlight-color: transparent,
@@ -52,7 +52,7 @@ $vv-accordion: (
 					background-size: 1em,
 					background-repeat: no-repeat,
 					will-change: transform,
-					transition: transform 0.3s ease-in-out,
+					transition: var(--transition-transform),
 					transform: rotate(-90deg),
 				),
 				marker: (

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

@@ -15,7 +15,7 @@ $vv-button: (
 	padding-block: 0.75ch,
 	padding-inline: 1.75ch,
 	text-shadow: 0 1px 0 var(--color-gray-darken-5),
-	transition: all 0.3s ease-in-out,
+	transition: var(--transition-all),
 	will-change: all,
 	min-width: 0,
 	state: (

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

@@ -69,119 +69,95 @@ $vv-dialog: (
 			border-top: var(--border) solid var(--color-surface-4),
 		),
 	),
-	modifier: (
-		small: (
-			element: (
-				wrapper: (
-					width: clamp(10vw, 25rem, 90vw),
-				),
-			),
-		),
-		fullscreen: (
-			padding: 0,
-			element: (
-				wrapper: (
-					border-radius: var(--rounded-0),
-					max-width: auto,
-					max-height: auto,
-					width: 100%,
-					height: 100%,
-				),
-			),
-		),
-		fade-block-enter-active: (
-			transition: opacity 0.3s ease-in-out,
-			element: (
-				wrapper: (
-					transition: transform 0.3s ease-in-out,
-				),
-			),
-		),
-		fade-block-leave-active: (
-			transition: opacity 0.3s ease-in-out,
-			element: (
-				wrapper: (
-					transition: transform 0.3s ease-in-out,
-				),
-			),
-		),
-		fade-block-enter-from: (
-			opacity: 0,
-			element: (
-				wrapper: (
-					transform: translateY(100%),
+	transition: (
+		fade-block: (
+			active: (
+				transition: var(--transition-opacity),
+				element: (
+					wrapper: (
+						transition: var(--transition-transform),
+					),
 				),
 			),
-		),
-		fade-block-leave-to: (
-			opacity: 0,
-			element: (
-				wrapper: (
-					transform: translateY(-100%),
+			enter-from: (
+				opacity: 0,
+				element: (
+					wrapper: (
+						transform: translateY(100%),
+					),
 				),
 			),
-		),
-		fade-inline-enter-active: (
-			transition: opacity 0.3s ease-in-out,
-			element: (
-				wrapper: (
-					transition: transform 0.3s ease-in-out,
+			leave-to: (
+				opacity: 0,
+				element: (
+					wrapper: (
+						transform: translateY(-100%),
+					),
 				),
 			),
 		),
-		fade-inline-leave-active: (
-			transition: opacity 0.3s ease-in-out,
-			element: (
-				wrapper: (
-					transition: transform 0.3s ease-in-out,
+		fade-inline: (
+			active: (
+				transition: var(--transition-opacity),
+				element: (
+					wrapper: (
+						transition: var(--transition-transform),
+					),
 				),
 			),
-		),
-		fade-inline-enter-from: (
-			opacity: 0,
-			element: (
-				wrapper: (
-					transform: translateX(-100%),
+			enter-from: (
+				opacity: 0,
+				element: (
+					wrapper: (
+						transform: translateX(-100%),
+					),
 				),
 			),
-		),
-		fade-inline-leave-to: (
-			opacity: 0,
-			element: (
-				wrapper: (
-					transform: translateX(100%),
+			leave-to: (
+				opacity: 0,
+				element: (
+					wrapper: (
+						transform: translateX(100%),
+					),
 				),
 			),
 		),
-		scale-enter-active: (
-			transition: opacity 0.3s ease-in-out,
-			element: (
-				wrapper: (
-					transition: transform 0.3s ease-in-out,
+		scale: (
+			active: (
+				transition: var(--transition-opacity),
+				element: (
+					wrapper: (
+						transition: var(--transition-transform),
+					),
 				),
 			),
-		),
-		scale-leave-active: (
-			transition: opacity 0.3s ease-in-out,
-			element: (
-				wrapper: (
-					transition: transform 0.3s ease-in-out,
+			inert: (
+				opacity: 0,
+				element: (
+					wrapper: (
+						transform: scale(0%),
+					),
 				),
 			),
 		),
-		scale-enter-from: (
-			opacity: 0,
+	),
+	modifier: (
+		small: (
 			element: (
 				wrapper: (
-					transform: scale(0%),
+					width: clamp(10vw, 25rem, 90vw),
 				),
 			),
 		),
-		scale-leave-to: (
-			opacity: 0,
+		fullscreen: (
+			padding: 0,
 			element: (
 				wrapper: (
-					transform: scale(0%),
+					border-radius: var(--rounded-0),
+					max-width: auto,
+					max-height: auto,
+					width: 100%,
+					height: 100%,
 				),
 			),
 		),