@volverjs/style 0.1.12-beta.2 → 0.1.12-beta.4

package/package.json

@@ -24,7 +24,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/style/issues"
   },
-  "version": "0.1.12-beta.2",
+  "version": "0.1.12-beta.4",
   "engines": {
     "node": ">= 12.x"
   },
@@ -41,16 +41,16 @@
     "@vitejs/plugin-vue": "^4.2.3",
     "@vueuse/core": "^10.1.2",
     "@vueuse/head": "^1.1.26",
-    "eslint": "^8.41.0",
+    "eslint": "^8.42.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-vue": "^9.14.1",
-    "glob": "^10.2.6",
+    "glob": "^10.2.7",
     "icss-utils": "^5.1.0",
     "markdown-it-anchor": "^8.6.7",
     "markdown-it-prism": "^2.3.0",
     "postcss": "^8.4.24",
     "postcss-html": "^1.5.0",
-    "postcss-preset-env": "^8.4.1",
+    "postcss-preset-env": "^8.4.2",
     "prism-themes": "^1.9.0",
     "prismjs": "^1.29.0",
     "remark": "^14.0.3",
@@ -58,25 +58,25 @@
     "remark-gfm": "^3.0.1",
     "remark-lint": "^9.1.2",
     "sass": "^1.62.1",
-    "stylelint": "^15.6.2",
+    "stylelint": "^15.7.0",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-recommended-scss": "^12.0.0",
     "stylelint-config-recommended-vue": "^1.4.0",
     "stylelint-config-standard-scss": "^9.0.0",
     "unplugin-auto-import": "^0.16.4",
-    "unplugin-vue-components": "^0.25.0",
+    "unplugin-vue-components": "^0.25.1",
     "vite": "^4.3.9",
     "vite-plugin-css-export": "^2.0.0",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-handlebars": "^1.6.0",
     "vite-plugin-markdown": "^2.1.0",
-    "vite-plugin-pages": "^0.30.1",
+    "vite-plugin-pages": "^0.31.0",
     "vite-plugin-stylelint": "^4.3.0",
     "vite-plugin-vue-layouts": "^0.8.0",
     "vite-ssg": "^0.22.2",
     "vite-ssg-sitemap": "^0.5.1",
     "vue": "^3.3.4",
-    "vue-live": "^2.5.3",
+    "vue-live": "^2.5.4",
     "vue-router": "^4.2.2"
   },
   "exports": {
@@ -114,8 +114,6 @@
     "./scss/utilities": "./src/utilities/index.scss",
     "./utilities/grid": "./dist/utilities/grid.css",
     "./scss/utilities/grid": "./src/utilities/grid.scss",
-    "./utilities/gradients": "./dist/utilities/gradients.css",
-    "./scss/utilities/gradients": "./src/utilities/gradients.scss",
     "./utilities/flexbox": "./dist/utilities/flexbox.css",
     "./scss/utilities/flexbox": "./src/utilities/flexbox.scss",
     "./utilities/filters": "./dist/utilities/filters.css",
@@ -144,8 +142,6 @@
     "./scss/props/input": "./src/props/input.scss",
     "./props": "./dist/props.css",
     "./scss/props": "./src/props/index.scss",
-    "./props/gradient": "./dist/props/gradient.css",
-    "./scss/props/gradient": "./src/props/gradient.scss",
     "./props/filters": "./dist/props/filters.css",
     "./scss/props/filters": "./src/props/filters.scss",
     "./props/effects": "./dist/props/effects.css",

package/src/export.scss

@@ -247,19 +247,6 @@
 
 	// #endregion
 
-	// #region GRADIENT
-	@each $size, $value in $gradient {
-		gradient__#{$size}: $value;
-	}
-	@each $size, $value in $noise {
-		noise__#{$size}: $value;
-	}
-	@each $size, $value in $noise-filter {
-		noise-filter__#{$size}: $value;
-	}
-
-	// #endregion
-
 	// ============================================================== */
 	// #region SPACING
 	// spacing & spacing-dynamic
@@ -458,6 +445,10 @@
 		#{'background-image__' + $key}: $value;
 	}
 
+	@each $key, $value in $gradient {
+		#{'gradient__' + $key}: $value;
+	}
+
 	// #endregion
 
 	// ============================================================== */
@@ -509,6 +500,11 @@
 		#{'brightness__' + $key}: $value;
 	}
 
+	// contrast
+	@each $key, $value in $contrast {
+		#{'contrast__' + $key}: $value;
+	}
+
 	// saturation
 	@each $key, $value in $saturation {
 		#{'saturation__' + $key}: $value;

package/src/props/background.scss

@@ -2,4 +2,5 @@
 
 :where(:host, :root, .theme) {
 	@include spread-map-into-props($background-image, $prefix: bg);
+	@include spread-map-into-props($gradient, $prefix: gradient);
 }

package/src/props/index.scss

@@ -4,7 +4,6 @@
 @use 'colors';
 @use 'effects';
 @use 'filters';
-@use 'gradient';
 @use 'input';
 @use 'layout';
 @use 'media';

package/src/settings/_background.scss

@@ -58,4 +58,230 @@ $background-image: (
 		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"),
 	close:
 		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%3Cpath d='M20 20L4 4m16 0L4 20'/%3E%3C/svg%3E"),
+	noise-1:
+		url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
+	noise-2:
+		url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
+	noise-3:
+		url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.25' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
+	noise-4:
+		url("data:image/svg+xml,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
+	noise-5:
+		url("data:image/svg+xml,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
+) !default;
+
+// gradient
+$gradient: (
+	brand:
+		linear-gradient(
+			to bottom right,
+			var(--color-brand-darken-3),
+			var(--color-brand),
+			var(--color-brand-lighten-3)
+		),
+	accent:
+		linear-gradient(
+			to bottom right,
+			var(--color-accent-darken-3),
+			var(--color-accent),
+			var(--color-accent-lighten-3)
+		),
+	info:
+		linear-gradient(
+			to bottom right,
+			var(--color-info-darken-3),
+			var(--color-info),
+			var(--color-info-lighten-3)
+		),
+	success:
+		linear-gradient(
+			to bottom right,
+			var(--color-success-darken-3),
+			var(--color-success),
+			var(--color-success-lighten-3)
+		),
+	warning:
+		linear-gradient(
+			to bottom right,
+			var(--color-warning-darken-3),
+			var(--color-warning),
+			var(--color-warning-lighten-3)
+		),
+	danger:
+		linear-gradient(
+			to bottom right,
+			var(--color-danger-darken-3),
+			var(--color-danger),
+			var(--color-danger-lighten-3)
+		),
+	gray:
+		linear-gradient(
+			to bottom right,
+			var(--color-gray-darken-3),
+			var(--color-gray),
+			var(--color-gray-lighten-3)
+		),
+	1:
+		linear-gradient(
+			to bottom right,
+			#1f005c,
+			#5b0060,
+			#870160,
+			#ac255e,
+			#ca485c,
+			#e16b5c,
+			#f39060,
+			#ffb56b
+		),
+	2: linear-gradient(to bottom right, #48005c, #8300e2, #a269ff),
+	3: #{radial-gradient(
+			circle at top right,
+			hsl(180deg 100% 50%),
+			hsl(180deg 100% 50% / 0%)
+		),
+	radial-gradient(
+			circle at bottom left,
+			hsl(328deg 100% 54%),
+			hsl(328deg 100% 54% / 0%)
+		)},
+	4: linear-gradient(to bottom right, #00f5a0, #00d9f5),
+	5: conic-gradient(from -270deg at 75% 110%, fuchsia, floralwhite),
+	6: conic-gradient(from -90deg at top left, black, white),
+	7: linear-gradient(to bottom right, #72c6ef, #004e8f),
+	8: conic-gradient(from 90deg at 50% 0%, #111, 50%, #222, #111),
+	9: conic-gradient(from 0.5turn at bottom center, lightblue, white),
+	10:
+		conic-gradient(
+			from 90deg at 40% -25%,
+			#ffd700,
+			#f79d03,
+			#ee6907,
+			#e6390a,
+			#de0d0d,
+			#d61039,
+			#cf1261,
+			#c71585,
+			#cf1261,
+			#d61039,
+			#de0d0d,
+			#ee6907,
+			#f79d03,
+			#ffd700,
+			#ffd700,
+			#ffd700
+		),
+	11: conic-gradient(at bottom left, deeppink, cyan),
+	12:
+		conic-gradient(
+			from 90deg at 25% -10%,
+			#ff4500,
+			#d3f340,
+			#7bee85,
+			#afeeee,
+			#7bee85
+		),
+	13:
+		radial-gradient(
+			circle at 50% 200%,
+			#000142,
+			#3b0083,
+			#b300c3,
+			#ff059f,
+			#ff4661,
+			#ffad86,
+			#fff3c7
+		),
+	14: conic-gradient(at top right, lime, cyan),
+	15: linear-gradient(to bottom right, #c7d2fe, #fecaca, #fef3c7),
+	16: radial-gradient(circle at 50% -250%, #374151, #111827, #000),
+	17: conic-gradient(from -90deg at 50% -25%, blue, blueviolet),
+	18: #{linear-gradient(
+			0deg,
+			hsla(0deg 100% 50% / 80%),
+			hsla(0deg 100% 50% / 0%) 75%
+		),
+	linear-gradient(
+		60deg,
+		hsla(60deg 100% 50% / 80%),
+		hsla(60deg 100% 50% / 0%) 75%,
+	),
+	linear-gradient(
+		120deg,
+		hsla(120deg 100% 50% / 80%),
+		hsla(120deg 100% 50% / 0%) 75%,
+	),
+	linear-gradient(
+		180deg,
+		hsla(180deg 100% 50% / 80%),
+		hsla(180deg 100% 50% / 0%) 75%,
+	),
+	linear-gradient(
+		240deg,
+		hsla(240deg 100% 50% / 80%),
+		hsla(240deg 100% 50% / 0%) 75%,
+	),
+	linear-gradient(
+			300deg,
+			hsla(300deg 100% 50% / 80%),
+			hsla(300deg 100% 50% / 0%) 75%
+		)},
+	19: linear-gradient(to bottom right, #ffe259, #ffa751),
+	20:
+		conic-gradient(
+			from -135deg at -10% center,
+			#ffa500,
+			#ff7715,
+			#ff522a,
+			#ff3f47,
+			#ff5482,
+			#ff69b4
+		),
+	21:
+		conic-gradient(
+			from -90deg at 25% 115%,
+			#f00,
+			#f06,
+			#f0c,
+			#c0f,
+			#60f,
+			#00f,
+			#00f,
+			#00f,
+			#00f
+		),
+	22: linear-gradient(to bottom right, #acb6e5, #86fde8),
+	23: linear-gradient(to bottom right, #536976, #292e49),
+	24:
+		conic-gradient(
+			from 0.5turn at 0% 0%,
+			#00c476,
+			10%,
+			#82b0ff,
+			90%,
+			#00c476
+		),
+	25: conic-gradient(at 125% 50%, #b78cf7, #ff7c94, #ffcf0d, #ff7c94, #b78cf7),
+	26: linear-gradient(to bottom right, #9796f0, #fbc7d4),
+	27: conic-gradient(from 0.5turn at bottom left, deeppink, rebeccapurple),
+	28: conic-gradient(from -90deg at 50% 105%, white, orchid),
+	29: #{radial-gradient(
+			circle at top right,
+			hsl(250deg 100% 85%),
+			hsl(250deg 100% 85% / 0%)
+		),
+	radial-gradient(
+			circle at bottom left,
+			hsl(220deg 90% 75%),
+			hsl(220deg 90% 75% / 0%)
+		)},
+	30: #{radial-gradient(
+			circle at top right,
+			hsl(150deg 100% 50%),
+			hsl(150deg 100% 50% / 0%)
+		),
+	radial-gradient(
+			circle at bottom left,
+			hsl(150deg 100% 84%),
+			hsl(150deg 100% 84% / 0%)
+		)},
 ) !default;

package/src/settings/_filters.scss

@@ -23,6 +23,21 @@ $brightness: (
 	125: brightness(1.25),
 	150: brightness(1.5),
 	200: brightness(2),
+	250: brightness(2.5),
+	500: brightness(5),
+	1000: brightness(10),
+) !default;
+
+// contrast
+$contrast: (
+	0: contrast(0),
+	50: contrast(0.5),
+	75: contrast(0.75),
+	100: contrast(1),
+	125: contrast(1.25),
+	150: contrast(1.5),
+	200: brightness(2),
+	300: brightness(3),
 ) !default;
 
 // saturation

package/src/settings/_index.scss

@@ -6,7 +6,6 @@
 @forward 'effects';
 @forward 'filters';
 @forward 'flexbox';
-@forward 'gradient';
 @forward 'grid';
 @forward 'input';
 @forward 'interactivity';

package/src/settings/_input.scss

@@ -19,7 +19,7 @@ $input: (
 	label: (
 		color: var(--color-word-2),
 		display: inline,
-		font-size: var(--text-xs),
+		font-size: var(--text-14),
 		gap: var(--spacing-xs),
 		max-width: 100%,
 		overflow: hidden,

package/src/settings/_layout.scss

@@ -114,6 +114,7 @@ $visibility: (
 
 // z-index
 $z-index: (
+	1: 1,
 	dropdown: 1000,
 	sticky: 1010,
 	fixed: 1020,

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

@@ -1,10 +1,10 @@
 $vv-accordion: (
 	--accordion-marker-size:
 		calc(var(--spacing-sm) + var(--leading-normal) * 1em),
-	--accordion-padding-top: var(--spacing-xs),
-	--accordion-padding-right: var(--spacing-xs),
-	--accordion-padding-bottom: var(--spacing-xs),
-	--accordion-padding-left: var(--spacing-xs),
+	--accordion-padding-top: var(--spacing-14),
+	--accordion-padding-right: var(--spacing-14),
+	--accordion-padding-bottom: var(--spacing-14),
+	--accordion-padding-left: var(--spacing-14),
 	overflow: hidden,
 	state: (
 		open: (
@@ -46,7 +46,6 @@ $vv-accordion: (
 			color: var(--color-word-2),
 			will-change: background-color,
 			transition: var(--transition-colors),
-			font-size: var(--text-sm),
 			border-radius: var(--rounded-lg),
 			-webkit-tap-highlight-color: transparent,
 			outline: none,

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

@@ -12,7 +12,6 @@ $vv-alert: (
 	gap: var(--spacing-sm),
 	min-width: 0,
 	overflow: hidden,
-	font-size: var(--text-sm),
 	padding: var(--spacing-sm),
 	element: (
 		header: (
@@ -174,7 +173,7 @@ $vv-alert: (
 				),
 				content: (
 					padding: var(--spacing-sm),
-					font-size: var(--text-xs),
+					font-size: var(--text-14),
 				),
 				footer: (
 					padding: 0 var(--spacing-sm) var(--spacing-sm)

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

@@ -13,6 +13,21 @@ $vv-dropdown: (
 			[border-radius]: var(--dropdown-border-radius),
 			background-color: var(--color-surface-1),
 			overflow: auto,
+			pseudo: (
+				-webkit-scrollbar: (
+						width: var(--spacing-2),
+						height: var(--spacing-2),
+					),
+				-webkit-scrollbar-thumb: (
+						background-color: var(--color-brand-lighten-4),
+						border: var(--spacing-0) solid transparent,
+						background-clip: content-box,
+					),
+				-webkit-scrollbar-track: (
+						background-color: transparent,
+						padding: 0,
+					),
+			),
 		),
 		item: (
 			_alias: 'li',
@@ -37,9 +52,11 @@ $vv-dropdown: (
 			display: block,
 			min-width: 0,
 			align-items: center,
-			min-height: var(--spacing-50),
+			min-height: var(--input-min-height),
 			background-color: var(--color-surface-2),
-			padding: var(--spacing-sm),
+			padding: var(--input-spacing-top) var(--input-spacing-right)
+				var(--input-spacing-bottom) var(--input-spacing-left),
+			font-size: var(--input-font-size),
 			pseudo: (
 				search-cancel-button: (
 					-webkit-appearance: none,
@@ -159,6 +176,14 @@ $vv-dropdown: (
 						down-xs: (
 							z-index: var(--z-modal),
 							margin-bottom: auto,
+							[border-radius]: var(--dropdown-border-radius),
+						),
+					),
+				),
+				search: (
+					breakpoint: (
+						down-xs: (
+							[border-radius]: var(--dropdown-border-radius),
 						),
 					),
 				),
@@ -173,6 +198,9 @@ $vv-dropdown: (
 					list: (
 						transition: var(--transition-transform),
 					),
+					search: (
+						transition: var(--transition-transform),
+					),
 				),
 			),
 			enter-from: (
@@ -181,6 +209,9 @@ $vv-dropdown: (
 					list: (
 						translate: 0 100%,
 					),
+					search: (
+						translate: 0 -100%,
+					),
 				),
 			),
 			leave-to: (
@@ -189,6 +220,60 @@ $vv-dropdown: (
 					list: (
 						translate: 0 100%,
 					),
+					search: (
+						translate: 0 -100%,
+					),
+				),
+			),
+		),
+		mobile-fade-block: (
+			active: (
+				transition: var(--transition-opacity),
+				element: (
+					list: (
+						transition: var(--transition-transform),
+					),
+					search: (
+						transition: var(--transition-transform),
+					),
+				),
+			),
+			enter-from: (
+				opacity: var(--opacity-0),
+				element: (
+					list: (
+						breakpoint: (
+							down-xs: (
+								translate: 0 100%,
+							),
+						),
+					),
+					search: (
+						breakpoint: (
+							down-xs: (
+								translate: 0 -100%,
+							),
+						),
+					),
+				),
+			),
+			leave-to: (
+				opacity: var(--opacity-0),
+				element: (
+					list: (
+						breakpoint: (
+							down-xs: (
+								translate: 0 100%,
+							),
+						),
+					),
+					search: (
+						breakpoint: (
+							down-xs: (
+								translate: 0 -100%,
+							),
+						),
+					),
 				),
 			),
 		),

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

@@ -2,6 +2,7 @@ $vv-text: (
 	font-family: var(--font-sans),
 	font-weight: var(--font-normal),
 	line-height: var(--leading-normal),
+	text-wrap: balance,
 	modifier: (
 		headline: (
 			font-weight: var(--font-semibold),

package/src/tools/_mixins.scss

@@ -851,7 +851,9 @@
 										-moz-progress-value,
 										-moz-inner-element,
 										-webkit-details-marker,
-										-webkit-scrollbar
+										-webkit-scrollbar,
+										-webkit-scrollbar-track,
+										-webkit-scrollbar-thumb
 									),
 									$pseudo-element
 								)
@@ -1178,6 +1180,21 @@
 							$bps: $bps
 						);
 					}
+
+					// map breakpoints
+					@if map.get($value, 'breakpoint') {
+						@include spread-map-into-breakpoints(
+							$original: $map,
+							$map: $value,
+							$prefix: #{$prefix}-#{$key}-#{$transition}-#{$state},
+							$key: 'breakpoint',
+							$block: $block,
+							$modifier: $selector,
+							$props: $props,
+							$zero-specificity: $zero-specificity,
+							$bps: $bps
+						);
+					}
 				}
 			}
 		}

package/src/utilities/backgrounds.scss

@@ -3,7 +3,7 @@
 // background-attachment
 @include spread-map-into-utilities(
 	$map: $background-attachment,
-	$class: 'bg',
+	$class: bg,
 	$attribute: 'background-attachment',
 	$zero-specificity: $zero-specificity-for-utilities
 );
@@ -11,7 +11,7 @@
 // background-clip
 @include spread-map-into-utilities(
 	$map: $background-clip,
-	$class: 'bg-clip',
+	$class: bg-clip,
 	$attribute: 'background-clip',
 	$zero-specificity: $zero-specificity-for-utilities
 );
@@ -19,7 +19,7 @@
 // background-origin
 @include spread-map-into-utilities(
 	$map: $background-origin,
-	$class: 'bg-origin',
+	$class: bg-origin,
 	$attribute: 'background-origin',
 	$zero-specificity: $zero-specificity-for-utilities
 );
@@ -27,7 +27,7 @@
 // background-position
 @include spread-map-into-utilities(
 	$map: $background-position,
-	$class: 'bg',
+	$class: bg,
 	$attribute: 'background-position',
 	$zero-specificity: $zero-specificity-for-utilities
 );
@@ -55,3 +55,12 @@
 	$attribute: background-image,
 	$zero-specificity: $zero-specificity-for-utilities
 );
+
+// background gradients
+@include spread-map-into-utilities(
+	$map: $gradient,
+	$class: bg-gradient,
+	$attribute: background-image,
+	$prop: gradient,
+	$zero-specificity: $zero-specificity-for-utilities
+);

package/src/utilities/index.scss

@@ -4,7 +4,6 @@
 @forward 'effects';
 @forward 'filters';
 @forward 'flexbox';
-@forward 'gradients';
 @forward 'grid';
 @forward 'interactivity';
 @forward 'layout';