@volverjs/style 0.1.12-beta.20 → 0.1.12-beta.21

package/package.json

@@ -24,7 +24,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/style/issues"
   },
-  "version": "0.1.12-beta.20",
+  "version": "0.1.12-beta.21",
   "engines": {
     "node": ">= 12.x"
   },
@@ -37,18 +37,18 @@
   ],
   "devDependencies": {
     "@iconify/vue": "^4.1.2",
-    "@vitejs/plugin-vue": "^5.1.3",
-    "@vueuse/core": "^11.0.3",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "@vueuse/core": "^11.1.0",
     "@vueuse/head": "^2.0.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-vue": "^9.27.0",
+    "eslint-plugin-vue": "^9.28.0",
     "glob": "^11.0.0",
     "icss-utils": "^5.1.0",
-    "markdown-it-anchor": "^9.1.0",
+    "markdown-it-anchor": "^9.2.0",
     "markdown-it-prism": "^2.3.0",
-    "postcss": "^8.4.41",
+    "postcss": "^8.4.47",
     "postcss-html": "^1.7.0",
-    "postcss-preset-env": "^10.0.2",
+    "postcss-preset-env": "^10.0.5",
     "prettier": "^3.3.3",
     "prism-themes": "^1.9.0",
     "prismjs": "^1.29.0",
@@ -57,14 +57,14 @@
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.0",
     "remark-lint": "^10.0.0",
-    "sass": "^1.77.8",
+    "sass": "^1.79.4",
     "stylelint": "^16.9.0",
     "stylelint-config-recommended-scss": "^14.1.0",
     "stylelint-config-recommended-vue": "^1.5.0",
     "stylelint-config-standard-scss": "^13.1.0",
-    "unplugin-auto-import": "^0.18.2",
+    "unplugin-auto-import": "^0.18.3",
     "unplugin-vue-components": "^0.27.4",
-    "vite": "^5.4.2",
+    "vite": "^5.4.8",
     "vite-plugin-css-export": "^3.0.0",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-handlebars": "^2.0.0",
@@ -74,9 +74,9 @@
     "vite-plugin-vue-layouts": "^0.11.0",
     "vite-ssg": "^0.23.8",
     "vite-ssg-sitemap": "^0.8.1",
-    "vue": "^3.4.38",
+    "vue": "^3.5.11",
     "vue-live": "^2.5.4",
-    "vue-router": "^4.4.3"
+    "vue-router": "^4.4.5"
   },
   "exports": {
     ".": "./dist/volver.css",

package/src/settings/_colors.scss

@@ -13,9 +13,9 @@ $color-success: #178230 !default;
 $color-danger: #af2323 !default;
 $color-info: #31ccec !default;
 $color-warning: #e7b735 !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% 100%) !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% 100%) !default;
 $color-surface-palette: (
 	brand: hsl(var(--color-brand-hue) var(--color-brand-saturation) 90%),
 	accent: hsl(var(--color-accent-hue) var(--color-accent-saturation) 90%),
@@ -25,15 +25,15 @@ $color-surface-palette: (
 	warning: hsl(var(--color-warning-hue) var(--color-warning-saturation) 90%),
 ) !default;
 $color-surface-palette-no-vars: (
-	brand: hsl(color.hue($color-brand) color.saturation($color-brand) 90%),
-	accent: hsl(color.hue($color-accent) color.saturation($color-accent) 90%),
-	success: hsl(color.hue($color-success) color.saturation($color-success) 90%),
-	danger: hsl(color.hue($color-danger) color.saturation($color-danger) 90%),
-	info: hsl(color.hue($color-info) color.saturation($color-info) 90%),
-	warning: hsl(color.hue($color-warning) color.saturation($color-warning) 90%),
+	brand: hsl(color-hue($color-brand) color-saturation($color-brand) 90%),
+	accent: hsl(color-hue($color-accent) color-saturation($color-accent) 90%),
+	success: hsl(color-hue($color-success) color-saturation($color-success) 90%),
+	danger: hsl(color-hue($color-danger) color-saturation($color-danger) 90%),
+	info: hsl(color-hue($color-info) color-saturation($color-info) 90%),
+	warning: hsl(color-hue($color-warning) color-saturation($color-warning) 90%),
 ) !default;
-$color-shadow: hsl(color.hue($color-brand) 50% 20%) !default;
-$color-backdrop: hsla(color.hue($color-brand) 50% 20% / 20%) !default;
+$color-shadow: hsl(color-hue($color-brand) 50% 20%) !default;
+$color-backdrop: hsla(color-hue($color-brand) 50% 20% / 20%) !default;
 $color-alpha: hsl(0deg 0% 0% / 0%) !default;
 
 // colors map

package/src/settings/_effects.scss

@@ -22,9 +22,9 @@ $box-shadow: (
 ) !default;
 
 // box-shadow without css vars
-$color-shadow-hue: color.hue(colors.$color-shadow);
-$color-shadow-saturation: color.saturation(colors.$color-shadow);
-$color-shadow-lightness: color.lightness(colors.$color-shadow);
+$color-shadow-hue: color-hue(colors.$color-shadow);
+$color-shadow-saturation: color-saturation(colors.$color-shadow);
+$color-shadow-lightness: color-lightness(colors.$color-shadow);
 
 // opacity
 $opacity: (

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

@@ -13,6 +13,11 @@ $vv-checkbox: (
 		disabled: (
 			opacity: var(--opacity-30),
 			cursor: not-allowed,
+			element: (
+				input: (
+					cursor: not-allowed,
+				),
+			),
 		),
 	),
 	element: (

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

@@ -4,8 +4,8 @@
 @use '../../../settings/colors' as *;
 
 $dark-color-scheme: dark !default;
-$dark-color-word: hsl(color.hue($color-brand) 15% 85%) !default;
-$dark-color-surface: hsl(color.hue($color-brand) 10% 5%) !default;
+$dark-color-word: hsl(color-hue($color-brand) 15% 85%) !default;
+$dark-color-surface: hsl(color-hue($color-brand) 10% 5%) !default;
 $dark-color-surface-palette: (
 	brand: hsl(var(--color-brand-hue) var(--color-brand-saturation) 10%),
 	accent: hsl(var(--color-accent-hue) var(--color-accent-saturation) 10%),
@@ -15,12 +15,12 @@ $dark-color-surface-palette: (
 	warning: hsl(var(--color-warning-hue) var(--color-warning-saturation) 10%),
 ) !default;
 $dark-color-surface-palette-no-vars: (
-	brand: hsl(color.hue($color-brand) color.saturation($color-brand) 10%),
-	accent: hsl(color.hue($color-accent) color.saturation($color-accent) 10%),
-	success: hsl(color.hue($color-success) color.saturation($color-success) 10%),
-	danger: hsl(color.hue($color-danger) color.saturation($color-danger) 10%),
-	info: hsl(color.hue($color-info) color.saturation($color-info) 10%),
-	warning: hsl(color.hue($color-warning) color.saturation($color-warning) 10%),
+	brand: hsl(color-hue($color-brand) color-saturation($color-brand) 10%),
+	accent: hsl(color-hue($color-accent) color-saturation($color-accent) 10%),
+	success: hsl(color-hue($color-success) color-saturation($color-success) 10%),
+	danger: hsl(color-hue($color-danger) color-saturation($color-danger) 10%),
+	info: hsl(color-hue($color-info) color-saturation($color-info) 10%),
+	warning: hsl(color-hue($color-warning) color-saturation($color-warning) 10%),
 ) !default;
 
 // color map

package/src/tools/_functions.scss

@@ -5,17 +5,55 @@
 @use 'sass:list';
 @use 'sass:math';
 
+@function color-hue($color) {
+	@return color.channel($color, 'hue', $space: hsl);
+}
+
+@function color-saturation($color) {
+	@return color.channel($color, 'saturation', $space: hsl);
+}
+
+@function color-lightness($color) {
+	@return color.channel($color, 'lightness', $space: hsl);
+}
+
+@function color-alpha($color) {
+	@return color.channel($color, 'alpha');
+}
+
+@function color-hsla($color) {
+	@return hsla(
+		color-hue($color),
+		color.channel($color, 'saturation', $space: hsl),
+		color.channel($color, 'lightness', $space: hsl),
+		color.channel($color, 'alpha')
+	);
+}
+
+@function color-red($color) {
+	@return color.channel($color, 'red', $space: rgb);
+}
+
+@function color-green($color) {
+	@return color.channel($color, 'green', $space: rgb);
+}
+
+@function color-blue($color) {
+	@return color.channel($color, 'blue', $space: rgb);
+}
+
 @function hsla-map($color, $name, $noVarExport: false) {
 	@if $noVarExport {
 		@return (
-			#{$name}: hsla(color.hue($color), color.saturation($color), color.lightness($color), color.alpha($color))
+			#{$name}: hsla(color-hue($color), color.channel($color, 'saturation', $space:
+							hsl), color.channel($color, 'lightness', $space: hsl), color.channel($color, 'alpha'))
 		);
 	} @else {
 		@return (
-			hue: color.hue($color),
-			saturation: color.saturation($color),
-			lightness: color.lightness($color),
-			#{$name}: hsla(var(--color-#{$name}-hue), var(--color-#{$name}-saturation), var(--color-#{$name}-lightness), color.alpha($color))
+			hue: color-hue($color),
+			saturation: color.channel($color, 'saturation', $space: hsl),
+			lightness: color.channel($color, 'lightness', $space: hsl),
+			#{$name}: hsla(var(--color-#{$name}-hue), var(--color-#{$name}-saturation), var(--color-#{$name}-lightness), color.channel($color, 'alpha'))
 		);
 	}
 }
@@ -24,9 +62,9 @@
 	@if $noVarExport {
 		@return (
 			hsla(
-				color.hue($color),
-				color.saturation($color),
-				color.lightness($color),
+				color-hue($color),
+				color.channel($color, 'saturation', $space: hsl),
+				color.channel($color, 'lightness', $space: hsl),
 				$alpha
 			)
 		);
@@ -41,7 +79,9 @@
 }
 
 @function hex-to-rgb($hex) {
-	@return red($hex), green($hex), blue($hex);
+	@return color.channel($hex, 'red', $space: rgb),
+		color.channel($hex, 'green', $space: rgb),
+		color.channel($hex, 'blue', $space: rgb);
 }
 
 @function color-alpha-map(
@@ -52,6 +92,7 @@
 	$noVarExport: false
 ) {
 	$result: hsla-map($color, $name, $noVarExport);
+
 	@for $index from 1 to ($steps + 1) {
 		$result: map.merge(
 			$result,
@@ -61,6 +102,7 @@
 			)
 		);
 	}
+
 	@return $result;
 }
 
@@ -96,6 +138,7 @@
 			$noVarExport
 		)
 	);
+
 	@return $result;
 }
 
@@ -110,29 +153,38 @@
 	$inverted: true
 ) {
 	$result: hsla-map($color, $name, $noVarExport);
+
 	@for $counter from 1 to ($steps + 1) {
 		$index: $counter;
+
 		@if $inverted {
 			$index: $steps + 1 - $counter;
 		}
 
 		$key: $index;
+
 		@if $prefix != '' {
 			$key: $prefix + '-' + $index;
 		}
 
 		@if $fixed {
 			$increment: $scale * $index;
+
 			@if $noVarExport {
-				$alpha: color.lightness($color) + $increment;
+				$alpha: color.channel($color, 'lightness', $space: hsl) +
+					$increment;
 				$result: map.merge(
 					$result,
 					(
 						#{$key}:
 							hsla(
-								color.hue($color),
-								color.saturation($color),
-								color.lightness($color),
+								color-hue($color),
+								color.channel(
+									$color,
+									'saturation',
+									$space: hsl
+								),
+								color.channel($color, 'lightness', $space: hsl),
 								$alpha
 							)
 					)
@@ -157,16 +209,22 @@
 			$increment: math.div($scale * $index, 100);
 			$increment: math.div($increment, ($increment * 0 + 1));
 			$increment: $increment + 1;
+
 			@if $noVarExport {
-				$alpha: color.lightness($color) * $increment;
+				$alpha: color.channel($color, 'lightness', $space: hsl) *
+					$increment;
 				$result: map.merge(
 					$result,
 					(
 						#{$key}:
 							hsla(
-								color.hue($color),
-								color.saturation($color),
-								color.lightness($color),
+								color-hue($color),
+								color.channel(
+									$color,
+									'saturation',
+									$space: hsl
+								),
+								color.channel($color, 'lightness', $space: hsl),
 								$alpha
 							)
 					)
@@ -189,6 +247,7 @@
 			}
 		}
 	}
+
 	@return $result;
 }
 
@@ -206,27 +265,35 @@
 
 	@for $counter from 1 to ($steps + 1) {
 		$index: $counter;
+
 		@if $inverted {
 			$index: $steps + 1 - $counter;
 		}
 
 		$key: $index;
+
 		@if $prefix != '' {
 			$key: $prefix + '-' + $index;
 		}
 
 		@if $fixed {
 			$decrement: $scale * $index;
+
 			@if $noVarExport {
-				$alpha: color.lightness($color) - $decrement;
+				$alpha: color.channel($color, 'lightness', $space: hsl) -
+					$decrement;
 				$result: map.merge(
 					$result,
 					(
 						#{$key}:
 							hsla(
-								color.hue($color),
-								color.saturation($color),
-								color.lightness($color),
+								color-hue($color),
+								color.channel(
+									$color,
+									'saturation',
+									$space: hsl
+								),
+								color.channel($color, 'lightness', $space: hsl),
 								$alpha
 							)
 					)
@@ -251,16 +318,22 @@
 			$decrement: math.div($scale * $index, 100);
 			$decrement: math.div($decrement, ($decrement * 0 + 1));
 			$decrement: 1 - $decrement;
+
 			@if $noVarExport {
-				$alpha: color.lightness($color) * $decrement;
+				$alpha: color.channel($color, 'lightness', $space: hsl) *
+					$decrement;
 				$result: map.merge(
 					$result,
 					(
 						#{$key}:
 							hsla(
-								color.hue($color),
-								color.saturation($color),
-								color.lightness($color),
+								color-hue($color),
+								color.channel(
+									$color,
+									'saturation',
+									$space: hsl
+								),
+								color.channel($color, 'lightness', $space: hsl),
 								$alpha
 							)
 					)
@@ -283,6 +356,7 @@
 			}
 		}
 	}
+
 	@return $result;
 }
 
@@ -320,7 +394,7 @@
 @function list-to-string($list, $glue: ', ') {
 	$result: null;
 
-	@for $i from 1 through length($list) {
+	@for $i from 1 through list.length($list) {
 		$e: list.nth($list, $i);
 
 		@if $result and $e {