@volverjs/style 0.1.11 → 0.1.12-beta.2

package/package.json

@@ -24,7 +24,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/style/issues"
   },
-  "version": "0.1.11",
+  "version": "0.1.12-beta.2",
   "engines": {
     "node": ">= 12.x"
   },
@@ -43,12 +43,12 @@
     "@vueuse/head": "^1.1.26",
     "eslint": "^8.41.0",
     "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-vue": "^9.14.0",
+    "eslint-plugin-vue": "^9.14.1",
     "glob": "^10.2.6",
     "icss-utils": "^5.1.0",
     "markdown-it-anchor": "^8.6.7",
     "markdown-it-prism": "^2.3.0",
-    "postcss": "^8.4.23",
+    "postcss": "^8.4.24",
     "postcss-html": "^1.5.0",
     "postcss-preset-env": "^8.4.1",
     "prism-themes": "^1.9.0",
@@ -63,9 +63,9 @@
     "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.2",
-    "unplugin-vue-components": "^0.24.1",
-    "vite": "^4.3.8",
+    "unplugin-auto-import": "^0.16.4",
+    "unplugin-vue-components": "^0.25.0",
+    "vite": "^4.3.9",
     "vite-plugin-css-export": "^2.0.0",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-handlebars": "^1.6.0",
@@ -77,7 +77,7 @@
     "vite-ssg-sitemap": "^0.5.1",
     "vue": "^3.3.4",
     "vue-live": "^2.5.3",
-    "vue-router": "^4.2.1"
+    "vue-router": "^4.2.2"
   },
   "exports": {
     ".": "./dist/volver.css",
@@ -114,6 +114,8 @@
     "./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",
@@ -142,6 +144,8 @@
     "./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,6 +247,19 @@
 
 	// #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

package/src/props/gradient.scss

@@ -0,0 +1,7 @@
+@use '../context' as *;
+
+:where(:host, :root, .theme) {
+	@include spread-map-into-props($gradient, $prefix: gradient);
+	@include spread-map-into-props($noise, $prefix: noise);
+	@include spread-map-into-props($noise-filter, $prefix: noise-filter);
+}

package/src/props/index.scss

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

package/src/props/transitions.scss

@@ -48,39 +48,39 @@
 // keyframes
 @keyframes indeterminate {
 	0% {
-		transform: scaleX(0);
+		scale: 0 1;
 	}
 
 	50% {
-		transform: scaleX(1);
+		scale: 1;
 		transform-origin: left;
 	}
 
 	51% {
-		transform: scaleX(1);
+		scale: 1;
 		transform-origin: center right;
 	}
 
 	100% {
-		transform: scaleX(0);
+		scale: 0 1;
 		transform-origin: center right;
 	}
 }
 
 @keyframes spin {
 	from {
-		transform: rotate(0deg);
+		rotate: 0deg;
 	}
 
 	to {
-		transform: rotate(360deg);
+		rotate: 360deg;
 	}
 }
 
 @keyframes ping {
 	75%,
 	100% {
-		transform: scale(2);
+		scale: 2;
 		opacity: 0;
 	}
 }
@@ -99,12 +99,12 @@
 @keyframes bounce {
 	0%,
 	100% {
-		transform: translateY(-25%);
+		translate: 0 -25%;
 		animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
 	}
 
 	50% {
-		transform: translateY(0);
+		translate: 0;
 		animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
 	}
 }

package/src/settings/_gradient.scss

@@ -0,0 +1,201 @@
+// Noise
+$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"),
+	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"),
+	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"),
+	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"),
+	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;
+
+// Noise filter
+$noise-filter: (
+	1: contrast(300%) brightness(100%),
+	2: contrast(200%) brightness(150%),
+	3: contrast(200%) brightness(250%),
+	4: contrast(200%) brightness(500%),
+	5: contrast(200%) brightness(1000%),
+) !default;
+$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)
+		),
+	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/_index.scss

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

package/src/settings/_input.scss

@@ -55,7 +55,7 @@ $input: (
 		padding-bottom: calc(var(--input-spacing-bottom) - 0.55em),
 		label: (
 			font-size: var(--text-12),
-			transform: translateY(-0.8em),
+			translate: 0 -0.8em,
 		),
 	),
 ) !default;

package/src/settings/_transitions.scss

@@ -6,7 +6,7 @@ $transition-property: (
 		'color, background-color, border-color, text-decoration-color, fill, stroke',
 	opacity: opacity,
 	shadow: box-shadow,
-	transform: transform,
+	transform: 'transform, scale, rotate, translate, skew',
 ) !default;
 
 // transition duration and transition delay

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

@@ -13,7 +13,7 @@ $vv-accordion: (
 					background-color: var(--color-surface-2),
 					pseudo: (
 						before: (
-							transform: rotate(0),
+							rotate: 0,
 						),
 					),
 				),
@@ -34,6 +34,7 @@ $vv-accordion: (
 			_alias: '> summary',
 			position: relative,
 			cursor: pointer,
+			user-select: none,
 			[padding-top]: var(--accordion-padding-top),
 			[padding-right]: var(--accordion-padding-right),
 			[padding-bottom]: var(--accordion-padding-bottom),
@@ -61,9 +62,9 @@ $vv-accordion: (
 					background-position: center,
 					background-size: 1em,
 					background-repeat: no-repeat,
-					will-change: transform,
+					will-change: rotate,
 					transition: var(--transition-transform),
-					transform: rotate(-90deg),
+					rotate: -90deg,
 				),
 				marker: (
 					display: none,
@@ -102,7 +103,7 @@ $vv-accordion: (
 						before: (
 							left: auto,
 							[right]: var(--accordion-padding-right),
-							transform: rotate(0def),
+							rotate: 0,
 						),
 					),
 				),
@@ -113,7 +114,7 @@ $vv-accordion: (
 						summary: (
 							pseudo: (
 								before: (
-									transform: rotate(-180deg),
+									rotate: -180deg,
 								),
 							),
 						),

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

@@ -72,7 +72,7 @@ $vv-alert-group: (
 		top-middle: (
 			inset-block: 0 auto,
 			inset-inline: 50% auto,
-			transform: translateX(-50%),
+			translate: -50%,
 		),
 		top-end: (
 			inset-block: 0 auto,
@@ -80,18 +80,18 @@ $vv-alert-group: (
 		),
 		center-start: (
 			inset-block: 50% auto,
-			transform: translateY(-50%),
+			translate: 0 -50%,
 			inset-inline: 0 auto,
 		),
 		center-middle: (
 			inset-block: 50% auto,
 			inset-inline: 50% auto,
-			transform: translate(-50%, -50%),
+			translate: -50% -50%,
 		),
 		center-end: (
 			inset-block: 50% auto,
 			inset-inline: auto 0,
-			transform: translateY(-50%),
+			translate: 0 -50%,
 		),
 		bottom-start: (
 			inset-block: auto 0,
@@ -100,7 +100,7 @@ $vv-alert-group: (
 		bottom-middle: (
 			inset-block: auto 0,
 			inset-inline: 50% auto,
-			transform: translateX(-50%),
+			translate: -50%,
 		),
 		bottom-end: (
 			inset-block: auto 0,
@@ -119,9 +119,8 @@ $vv-alert-group: (
 					z-index: var(--z-notification-alert),
 				),
 				not-first: (
-					[transform]:
-						translateY(calc(-100% * (var(--alert-counter, 1) - 1)))
-						scale(calc(1 - 0.05 * (var(--alert-counter, 1) - 1))),
+					[translate]: 0 calc(-100% * (var(--alert-counter, 1) - 1)),
+					[scale]: calc(1 - 0.05 * (var(--alert-counter, 1) - 1)),
 					[z-index]:
 						calc(
 							var(--z-notification-alert) -
@@ -137,7 +136,8 @@ $vv-alert-group: (
 				hover: (
 					element: (
 						not-first: (
-							transform: none,
+							translate: 0,
+							scale: 1,
 							filter: none,
 						),
 					),
@@ -147,22 +147,18 @@ $vv-alert-group: (
 				reverse: (
 					element: (
 						not-first: (
-							[transform]:
-								translateY(
-									calc(100% * (var(--alert-counter, 1) - 1))
-								)
-								scale(
-									calc(
-										1 - 0.05 * (var(--alert-counter, 1) - 1)
-									)
-								),
+							[translate]: 0
+								calc(100% * (var(--alert-counter, 1) - 1)),
+							[scale]:
+								calc(1 - 0.05 * (var(--alert-counter, 1) - 1)),
 						),
 					),
 					state: (
 						hover: (
 							element: (
 								not-first: (
-									transform: none,
+									translate: 0,
+									scale: 1,
 								),
 							),
 						),