@volverjs/style 0.1.19 → 0.1.21

package/package.json

@@ -24,7 +24,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/style/issues"
   },
-  "version": "0.1.19",
+  "version": "0.1.21",
   "engines": {
     "node": ">= 12.x"
   },
@@ -37,20 +37,20 @@
   ],
   "devDependencies": {
     "@iconify/vue": "^5.0.0",
-    "@vitejs/plugin-vue": "^5.2.4",
-    "@vueuse/core": "^13.2.0",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vueuse/core": "^13.6.0",
     "@vueuse/head": "^2.0.0",
-    "eslint-config-prettier": "^10.1.5",
-    "eslint-plugin-prettier": "^5.4.0",
-    "eslint-plugin-vue": "^10.1.0",
-    "glob": "^11.0.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.3",
+    "eslint-plugin-vue": "^10.3.0",
+    "glob": "^11.0.3",
     "icss-utils": "^5.1.0",
     "markdown-it-anchor": "^9.2.0",
     "markdown-it-prism": "^3.0.0",
-    "postcss": "^8.5.3",
+    "postcss": "^8.5.6",
     "postcss-html": "^1.8.0",
-    "postcss-preset-env": "^10.1.6",
-    "prettier": "^3.5.3",
+    "postcss-preset-env": "^10.2.4",
+    "prettier": "^3.6.2",
     "prism-themes": "^1.9.0",
     "prismjs": "^1.30.0",
     "reduce-css-calc": "^2.1.8",
@@ -58,24 +58,24 @@
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.1",
     "remark-lint": "^10.0.1",
-    "sass": "^1.89.0",
-    "stylelint": "^16.19.1",
+    "sass-embedded": "1.89.2",
+    "stylelint": "^16.22.0",
     "stylelint-config-recommended-scss": "^15.0.1",
-    "stylelint-config-recommended-vue": "^1.6.0",
+    "stylelint-config-recommended-vue": "^1.6.1",
     "stylelint-config-standard-scss": "^15.0.1",
-    "unplugin-auto-import": "^19.2.0",
-    "unplugin-vue-components": "^28.5.0",
-    "vite": "^6.3.5",
+    "unplugin-auto-import": "^19.3.0",
+    "unplugin-vue-components": "^28.8.0",
+    "vite": "^7.0.6",
     "vite-plugin-css-export": "^3.0.2",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-handlebars": "^2.0.0",
     "vite-plugin-markdown": "^2.2.0",
-    "vite-plugin-pages": "^0.33.0",
-    "vite-plugin-stylelint": "^6.0.0",
+    "vite-plugin-pages": "^0.33.1",
+    "vite-plugin-stylelint": "^6.0.2",
     "vite-plugin-vue-layouts": "^0.11.0",
-    "vite-ssg": "^27.0.1",
-    "vite-ssg-sitemap": "^0.9.0",
-    "vue": "^3.5.14",
+    "vite-ssg": "^28.0.0",
+    "vite-ssg-sitemap": "^0.10.0",
+    "vue": "^3.5.18",
     "vue-live": "^2.5.4",
     "vue-router": "^4.5.1"
   },

package/src/_context.scss

@@ -4,8 +4,9 @@
 // configuration
 @forward 'config';
 
+// settings
+@forward 'settings';
+
 // tools (mixins, functions, recipes)
 @forward 'tools';
 
-// settings
-@forward 'settings';

package/src/props/spacing.scss

@@ -19,7 +19,9 @@
 						$var: var(--spacing-#{$size});
 					}
 
-					--spacing-#{$name}: #{$var};
+					& {
+						--spacing-#{$name}: #{$var};
+					}
 				}
 			}
 		}

package/src/props/typography.scss

@@ -31,7 +31,9 @@
 						$var: var(--text-#{$size});
 					}
 
-					--text-#{$name}: #{$var};
+					& {
+						--text-#{$name}: #{$var};
+					}
 				}
 			}
 		}

package/src/settings/_breakpoints.scss

@@ -1,4 +1,4 @@
-@use '../tools/mixins' as *;
+@use '../tools/validators' as *;
 
 $breakpoints: (
 	xxs: 0,

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

@@ -157,7 +157,7 @@ $vv-alert: (
 			width: clamp(15dvw, 20rem, 80dvw),
 			border-color: var(--color-gray),
 			flex-direction: column,
-			align-items: none,
+			align-items: normal,
 			gap: var(--spacing-0),
 			element: (
 				header: (
@@ -253,7 +253,7 @@ $vv-alert: (
 			border-radius: var(--rounded-none),
 			border-width: 0 0 0 var(--spacing-4),
 			flex-direction: column,
-			align-items: none,
+			align-items: normal,
 			element: (
 				title: (
 					text-transform: uppercase,

package/src/themes/dark/settings/components/_vv-alert.scss

@@ -55,11 +55,7 @@ $dark-vv-alert: (
 			),
 		),
 		notification: (
-			element: (
-				header: (
-					background-color: var(--color-gray-darken-2),
-				),
-			),
+			border-color: var(--color-gray-lighten-3),
 			modifier: (
 				danger: (
 					border-color: var(--color-danger-lighten-3),

package/src/tools/_breakpoints.scss

@@ -1,5 +1,6 @@
-@use 'sass:map';
-@use 'sass:list';
+@use "sass:map";
+@use "sass:list";
+@use "../settings/breakpoints" as *;
 
 // Breakpoint viewport sizes and media queries.
 // Breakpoints are defined as a map of (name: minimum width), order from small to large:
@@ -13,18 +14,10 @@
 //    md
 //    >> breakpoint-next(sm, $bps-names: (xs sm md lg xl))
 //    md
-@function breakpoint-next(
-	$name,
-	$bps: $breakpoints,
-	$bps-names: map.keys($bps)
-) {
+@function breakpoint-next($name, $bps: $breakpoints, $bps-names: map.keys($bps)) {
 	$n: list.index($bps-names, $name);
 
-	@return if(
-		$n != null and $n < list.length($bps-names),
-		list.nth($bps-names, $n + 1),
-		null
-	);
+	@return if($n != null and $n < list.length($bps-names), list.nth($bps-names, $n + 1), null);
 }
 
 @function bp-next($name, $bps: $breakpoints, $bps-names: map.keys($bps)) {
@@ -69,7 +62,7 @@
 //    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    "-sm"
 @function breakpoint-infix($name, $bps: $breakpoints) {
-	@return if(breakpoint-min($name, $bps) == null, '', '-#{$name}');
+	@return if(breakpoint-min($name, $bps) == null, "", "-#{$name}");
 }
 
 @function bp-infix($name, $bps: $breakpoints) {
@@ -83,14 +76,10 @@
 
 	@if $min {
 		@media (min-width: $min) {
-			& {
-				@content;
-			}
-		}
-	} @else {
-		& {
 			@content;
 		}
+	} @else {
+		@content;
 	}
 }
 
@@ -107,14 +96,10 @@
 
 	@if $max {
 		@media (max-width: $max) {
-			& {
-				@content;
-			}
-		}
-	} @else {
-		& {
 			@content;
 		}
+	} @else {
+		@content;
 	}
 }
 

package/src/tools/_index.scss

@@ -1,3 +1,4 @@
 @forward 'functions';
 @forward 'mixins';
 @forward 'breakpoints';
+@forward 'validators';

package/src/tools/_mixins.scss

@@ -7,37 +7,6 @@
 @use 'functions' as *;
 @use 'breakpoints' as *;
 
-// Check ascending order
-// Used to ensure the breakpoints are ordered ascending.
-@mixin assert-ascending($map, $map-name) {
-	$prev-key: null;
-	$prev-num: null;
-
-	@each $key, $num in $map {
-		@if not $prev-num or math.unit($num) == '%' {
-			// Do nothing
-		} @else if not compatible($prev-num, $num) {
-			@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
-		} @else if $prev-num >= $num {
-			@warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
-		}
-
-		$prev-key: $key;
-		$prev-num: $num;
-	}
-}
-
-// Starts at zero
-// Used to ensure the min-width of the lowest breakpoint starts at 0.
-@mixin assert-starts-at-zero($map, $map-name: '$grid-breakpoints') {
-	$values: map.values($map);
-	$first-value: list.nth($values, 1);
-
-	@if $first-value != 0 {
-		@warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
-	}
-}
-
 // Transform a map into a list of custom props
 @mixin spread-map-into-props($map: (), $prefix: '', $old-key: '', $deep: true) {
 	@each $key, $value in $map {

package/src/tools/_validators.scss

@@ -0,0 +1,35 @@
+@use 'sass:map';
+@use 'sass:list';
+@use 'sass:math';
+@use 'functions' as *;
+
+// Check ascending order
+// Used to ensure the breakpoints are ordered ascending.
+@mixin assert-ascending($map, $map-name) {
+	$prev-key: null;
+	$prev-num: null;
+
+	@each $key, $num in $map {
+		@if not $prev-num or math.unit($num) == '%' {
+			// Do nothing
+		} @else if not compatible($prev-num, $num) {
+			@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+		} @else if $prev-num >= $num {
+			@warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+		}
+
+		$prev-key: $key;
+		$prev-num: $num;
+	}
+}
+
+// Starts at zero
+// Used to ensure the min-width of the lowest breakpoint starts at 0.
+@mixin assert-starts-at-zero($map, $map-name: '$grid-breakpoints') {
+	$values: map.values($map);
+	$first-value: list.nth($values, 1);
+
+	@if $first-value != 0 {
+		@warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
+	}
+}