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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volverjs/style",
-  "version": "0.1.2-beta.26",
+  "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",
@@ -157,21 +157,21 @@
   "devDependencies": {
     "@iconify/vue": "^4.0.2",
     "@vitejs/plugin-vue": "^4.0.0",
-    "@vueuse/core": "^9.6.0",
+    "@vueuse/core": "^9.8.2",
     "@vueuse/head": "^1.0.22",
-    "eslint": "^8.29.0",
+    "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.20",
     "postcss-html": "^1.5.0",
     "postcss-preset-env": "^7.8.3",
     "prism-themes": "^1.9.0",
     "prismjs": "1.29.0",
-    "sass": "^1.56.2",
+    "sass": "^1.57.1",
     "stylelint": "^14.16.0",
     "stylelint-config-prettier": "^9.0.4",
     "stylelint-config-recommended-scss": "^8.0.0",
@@ -179,7 +179,7 @@
     "stylelint-config-standard-scss": "^6.1.0",
     "unplugin-auto-import": "^0.12.1",
     "unplugin-vue-components": "^0.22.12",
-    "vite": "^4.0.1",
+    "vite": "^4.0.3",
     "vite-plugin-css-export": "^1.2.1",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-handlebars": "^1.6.0",

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

@@ -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/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/components/_vv-skeleton.scss

@@ -12,6 +12,7 @@ $vv-skeleton: (
 					var(--skeleton-shine-color) 18%,
 					var(--skeleton-background) 33%
 				),
+			[color]: transparent,
 			background-size: 200% 100%,
 			height: 1em,
 			border-radius: var(--rounded),

package/src/utilities/filters.scss

@@ -16,6 +16,14 @@
 	$zero-specificity: $zero-specificity-for-utilities
 );
 
+// saturation
+@include spread-map-into-utilities(
+	$map: $saturation,
+	$class: saturate,
+	$attribute: filter,
+	$zero-specificity: $zero-specificity-for-utilities
+);
+
 // backdrop blur
 @include spread-map-into-utilities(
 	$map: $blur,

package/src/utilities/transitions.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:string';
 @use '../context' as *;
 
 // transition property
@@ -29,14 +30,14 @@
 	$zero-specificity: $zero-specificity-for-utilities
 );
 
-@each $property in $transition-property {
+@each $property, $value in $transition-property {
 	@include wrap-with-where(
 		$selector: '.transition-#{$property}',
 		$enabled: $zero-specificity-for-utilities
 	) {
-		transition-property: $property;
+		transition-property: string.unquote($value);
 		@if $property != 'none' {
-			transition-duration: map.get($transition-duration-delay, '300');
+			transition-duration: map.get($transition-duration-delay, 300);
 			transition-timing-function: map.get(
 				$transition-timing-function,
 				'in-out'