@volverjs/style 0.1.4 → 0.1.6

package/package.json

@@ -1,18 +1,84 @@
 {
   "name": "@volverjs/style",
-  "version": "0.1.4",
-  "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",
-  "type": "module",
+  "description": "@volverjs/style is a lightweight responsive CSS utility library to accompany @volverjs/ui-* and static webpages as well.",
+  "author": "24/Consulting",
+  "license": "MIT",
+  "keywords": [
+    "css",
+    "scss",
+    "design-system",
+    "volver",
+    "volverjs",
+    "css custom properties",
+    "css variables",
+    "utility classes",
+    "design tokens",
+    "responsive",
+    "components library"
+  ],
+  "homepage": "https://volverjs.github.io/style",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/volverjs/style"
+  },
+  "bugs": {
+    "url": "https://github.com/volverjs/style/issues"
+  },
+  "version": "0.1.6",
   "engines": {
     "node": ">= 12.x"
   },
   "packageManager": "pnpm@7.8.0",
+  "type": "module",
+  "main": "dist/style.css",
+  "style": "dist/style.css",
   "files": [
     "src/*",
     "dist/*"
   ],
+  "devDependencies": {
+    "@iconify/vue": "^4.0.2",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vueuse/core": "^9.11.0",
+    "@vueuse/head": "^1.0.22",
+    "eslint": "^8.32.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-vue": "^9.9.0",
+    "glob": "^8.1.0",
+    "icss-utils": "^5.1.0",
+    "markdown-it-anchor": "^8.6.6",
+    "markdown-it-prism": "^2.3.0",
+    "postcss": "^8.4.21",
+    "postcss-html": "^1.5.0",
+    "postcss-preset-env": "^7.8.3",
+    "prism-themes": "^1.9.0",
+    "prismjs": "1.29.0",
+    "remark": "^14.0.2",
+    "remark-frontmatter": "^4.0.1",
+    "remark-gfm": "^3.0.1",
+    "remark-lint": "^9.1.1",
+    "sass": "^1.57.1",
+    "stylelint": "^14.16.1",
+    "stylelint-config-prettier": "^9.0.4",
+    "stylelint-config-recommended-scss": "^8.0.0",
+    "stylelint-config-recommended-vue": "^1.4.0",
+    "stylelint-config-standard-scss": "^6.1.0",
+    "unplugin-auto-import": "^0.12.1",
+    "unplugin-vue-components": "^0.22.12",
+    "vite": "^4.0.4",
+    "vite-plugin-css-export": "^1.2.1",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-handlebars": "^1.6.0",
+    "vite-plugin-markdown": "^2.1.0",
+    "vite-plugin-pages": "^0.28.0",
+    "vite-plugin-stylelint": "^4.1.6",
+    "vite-plugin-vue-layouts": "^0.7.0",
+    "vite-ssg": "^0.22.1",
+    "vite-ssg-sitemap": "^0.4.3",
+    "vue": "^3.2.45",
+    "vue-live": "2.3.2",
+    "vue-router": "^4.1.6"
+  },
   "exports": {
     ".": "./dist/volver.css",
     "./scss/context": "./src/_context.scss",
@@ -147,64 +213,6 @@
     "./scss/utilities/typography": "./src/utilities/typography.scss",
     "./scss": "./src/volver.scss"
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/volverjs/style"
-  },
-  "keywords": [
-    "css",
-    "design-system",
-    "volverjs"
-  ],
-  "author": "24/Consulting",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/volverjs/style/issues"
-  },
-  "homepage": "https://github.com/volverjs/style#readme",
-  "devDependencies": {
-    "@iconify/vue": "^4.0.2",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "@vueuse/core": "^9.10.0",
-    "@vueuse/head": "^1.0.22",
-    "eslint": "^8.32.0",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-vue": "^9.9.0",
-    "glob": "^8.1.0",
-    "icss-utils": "^5.1.0",
-    "markdown-it-anchor": "^8.6.6",
-    "markdown-it-prism": "^2.3.0",
-    "postcss": "^8.4.21",
-    "postcss-html": "^1.5.0",
-    "postcss-preset-env": "^7.8.3",
-    "prism-themes": "^1.9.0",
-    "prismjs": "1.29.0",
-    "remark": "^14.0.2",
-    "remark-frontmatter": "^4.0.1",
-    "remark-gfm": "^3.0.1",
-    "remark-lint": "^9.1.1",
-    "sass": "^1.57.1",
-    "stylelint": "^14.16.1",
-    "stylelint-config-prettier": "^9.0.4",
-    "stylelint-config-recommended-scss": "^8.0.0",
-    "stylelint-config-recommended-vue": "^1.4.0",
-    "stylelint-config-standard-scss": "^6.1.0",
-    "unplugin-auto-import": "^0.12.1",
-    "unplugin-vue-components": "^0.22.12",
-    "vite": "^4.0.4",
-    "vite-plugin-css-export": "^1.2.1",
-    "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-handlebars": "^1.6.0",
-    "vite-plugin-markdown": "^2.1.0",
-    "vite-plugin-pages": "^0.28.0",
-    "vite-plugin-stylelint": "^4.1.6",
-    "vite-plugin-vue-layouts": "^0.7.0",
-    "vite-ssg": "^0.22.1",
-    "vite-ssg-sitemap": "^0.4.3",
-    "vue": "^3.2.45",
-    "vue-live": "2.3.2",
-    "vue-router": "^4.1.6"
-  },
   "scripts": {
     "dev": "vite --port 3000 --open",
     "build": "node ./scripts/build.js",

package/src/_preflight.scss

@@ -365,6 +365,7 @@
 			@extend %vv-select !optional;
 			@extend %vv-select__wrapper !optional;
 			@extend %vv-select__input !optional;
+			@extend %vv-select-modifier-dirty__input !optional;
 
 			&:disabled {
 				@extend %vv-select--disabled !optional;

package/src/components/vv-button.scss

@@ -36,7 +36,13 @@ $component-selector: '.#{ $component-name}';
 		$selector: $component-selector,
 		$enabled: $zero-specificity-for-components
 	) {
-		&:where(a[href], button, input[type='button'], input[type='submit'], input[type='reset']),
+		&:where(
+				a[href],
+				button,
+				input[type='button'],
+				input[type='submit'],
+				input[type='reset']
+			),
 		&::file-selector-button {
 			@extend %#{$component-name};
 		}

package/src/reset.scss

@@ -2,8 +2,20 @@
     Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
     - The "symbol *" part is to solve Firefox SVG sprite bug
  */
-*:where(:not(html, iframe, canvas, img, svg, video, details, summary, svg
-			*, symbol *)) {
+*:where(
+		:not(
+				html,
+				iframe,
+				canvas,
+				img,
+				svg,
+				video,
+				details,
+				summary,
+				svg *,
+				symbol *
+			)
+	) {
 	all: unset;
 	display: revert;
 }

package/src/settings/_input.scss

@@ -15,7 +15,8 @@ $input: (
 	min-width: 0,
 	label: (
 		color: var(--color-word-2),
-		display: block,
+		display: flex,
+		align-items: center,
 		font-size: var(--text-xs),
 		gap: var(--spacing-xs),
 		white-space: nowrap,
@@ -50,4 +51,12 @@ $input: (
 	invalid: (
 		color: var(--color-danger),
 	),
+	floating: (
+		padding-top: calc(var(--input-spacing-top) + 0.55em),
+		padding-bottom: calc(var(--input-spacing-bottom) - 0.55em),
+		label: (
+			font-size: var(--text-12),
+			transform: translateY(-0.8em),
+		),
+	),
 ) !default;

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

@@ -52,6 +52,7 @@ $vv-button: (
 			flex-shrink: 0,
 			stroke-linecap: round,
 			stroke-linejoin: round,
+			[min-height]: calc(1em * var(--button-line-height)),
 		),
 		label: (
 			white-space: nowrap,
@@ -64,7 +65,7 @@ $vv-button: (
 		icon-only: (
 			element: (
 				icon: (
-					margin-inline: calc(var(--spacing-9) * -1),
+					margin-inline: calc(var(--spacing-6) * -1),
 				),
 			),
 		),
@@ -312,7 +313,7 @@ $vv-button: (
 		),
 		column: (
 			flex-direction: column,
-			gap: 0.2em,
+			gap: var(--spacing-2),
 		),
 		full-bleed: (
 			min-width: 20ch,

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

@@ -10,6 +10,7 @@ $vv-input-text: (
 		label: (
 			_alias: '> label',
 			display: var(--input-label-display),
+			align-items: var(--input-label-align-items),
 			font-size: var(--input-label-font-size),
 			color: var(--input-label-color),
 			margin: 0 0 var(--input-label-gap) 0,
@@ -27,7 +28,6 @@ $vv-input-text: (
 			background-color: var(--input-background-color),
 			will-change: background-color,
 			transition: var(--transition-colors),
-			min-height: var(--spacing-50),
 			pseudo: (
 				before: (
 					position: absolute,
@@ -65,14 +65,17 @@ $vv-input-text: (
 			display: block,
 			flex: 1,
 			color: var(--input-color),
-			[margin-block]: var(--input-spacing-top) var(--input-spacing-bottom),
+			line-height: var(--leading-none),
+			[padding-block]: var(--input-spacing-top)
+				var(--input-spacing-bottom),
 			[padding-inline]: var(--input-spacing-left)
 				var(--input-spacing-right),
 			min-width: 0,
-			block-size: calc(var(--input-line-height) * var(--input-font-size)),
+			min-height: var(--input-min-height),
 			pseudo: (
 				placeholder: (
 					color: var(--input-placeholder-color),
+					text-overlow: ellipsis,
 				),
 				calendar-picker-indicator: (
 					position: absolute,
@@ -280,8 +283,6 @@ $vv-input-text: (
 				label: (
 					position: absolute,
 					z-index: 1,
-					display: flex,
-					align-items: center,
 					min-height: var(--input-min-height),
 					pointer-events: none,
 					font-size: inherit,
@@ -308,11 +309,13 @@ $vv-input-text: (
 				focus-within: (
 					element: (
 						label: (
-							transform: translateY(-0.8em),
-							font-size: var(--text-12),
+							transform: var(--input-floating-label-transform),
+							font-size: var(--input-floating-label-font-size),
 						),
 						input: (
-							transform: translateY(0.55em),
+							[padding-top]: var(--input-floating-padding-top),
+							[padding-bottom]:
+								var(--input-floating-padding-bottom),
 							pseudo: (
 								placeholder: (
 									opacity: var(--opacity-100),
@@ -324,11 +327,13 @@ $vv-input-text: (
 				dirty: (
 					element: (
 						label: (
-							transform: translateY(-0.8em),
-							font-size: var(--text-12),
+							transform: var(--input-floating-label-transform),
+							font-size: var(--input-floating-label-font-size),
 						),
 						input: (
-							transform: translateY(0.55em),
+							[padding-top]: var(--input-floating-padding-top),
+							[padding-bottom]:
+								var(--input-floating-padding-bottom),
 							pseudo: (
 								placeholder: (
 									opacity: var(--opacity-100),

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

@@ -11,6 +11,7 @@ $vv-select: (
 		label: (
 			_alias: '> label',
 			display: var(--input-label-display),
+			align-items: var(--input-label-align-items),
 			font-size: var(--input-label-font-size),
 			color: var(--input-label-color),
 			margin: 0 0 var(--input-label-gap) 0,
@@ -79,7 +80,7 @@ $vv-select: (
 			background-repeat: no-repeat,
 			[background-position]: right var(--input-spacing-right) center,
 			background-size: 1em,
-			min-height: var(--spacing-50),
+			min-height: var(--input-min-height),
 			state: (
 				disabled: (
 					cursor: not-allowed,
@@ -94,6 +95,9 @@ $vv-select: (
 					),
 			),
 		),
+		option: (
+			_alias: 'select > option',
+		),
 		icon: (
 			_alias: ':where(svg, [data-icon])',
 			margin: var(--input-spacing-top) var(--input-spacing-right)
@@ -129,6 +133,36 @@ $vv-select: (
 				),
 			),
 		),
+		multiple: (
+			element: (
+				wrapper: (
+					align-items: flex-start,
+				),
+				input: (
+					overflow: auto,
+					background-image: none,
+					padding: 0,
+				),
+				option: (
+					[padding]: var(--input-spacing-top)
+						var(--input-spacing-right) var(--input-spacing-bottom)
+						var(--input-spacing-left),
+					min-height: var(--input-min-height),
+					display: flex,
+					align-items: center,
+					color: var(--input-color),
+					state: (
+						checked: (
+							color: var(--color-brand),
+							background-color: var(--color-surface-brand),
+						),
+						disabled: (
+							color: var(--input-placeholder-color),
+						),
+					),
+				),
+			),
+		),
 		icon-left: (
 			--input-spacing-left: calc(var(--spacing-sm) * 2 + 1em),
 		),
@@ -201,6 +235,7 @@ $vv-select: (
 				label: (
 					position: absolute,
 					z-index: 1,
+					min-height: var(--input-min-height),
 					pointer-events: none,
 					font-size: inherit,
 					[padding-top]: var(--input-spacing-top),
@@ -212,30 +247,37 @@ $vv-select: (
 					transition: var(--transition-all),
 				),
 				input: (
-					pseudo: (
-						placeholder: (
-							opacity: var(--opacity-0),
+					opacity: var(--opacity-0),
+				),
+			),
+			state: (
+				focus-within: (
+					element: (
+						label: (
+							transform: var(--input-floating-label-transform),
+							font-size: var(--input-floating-label-font-size),
+						),
+						input: (
+							[padding-top]: var(--input-floating-padding-top),
+							[padding-bottom]:
+								var(--input-floating-padding-bottom),
+							opacity: var(--opacity-100),
 						),
 					),
 				),
 			),
-			state: (
+			modifier: (
 				dirty: (
 					element: (
 						label: (
-							transform: translateY(-0.8em),
-							font-size: var(--text-12),
+							transform: var(--input-floating-label-transform),
+							font-size: var(--input-floating-label-font-size),
 						),
 						input: (
-							[padding-top]:
-								calc(var(--input-spacing-top) + 0.55em),
+							[padding-top]: var(--input-floating-padding-top),
 							[padding-bottom]:
-								calc(var(--input-spacing-bottom) - 0.55em),
-							pseudo: (
-								placeholder: (
-									opacity: var(--opacity-100),
-								),
-							),
+								var(--input-floating-padding-bottom),
+							opacity: var(--opacity-100),
 						),
 					),
 				),

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

@@ -10,6 +10,7 @@ $vv-textarea: (
 		label: (
 			_alias: '> label',
 			display: var(--input-label-display),
+			align-items: var(--input-label-align-items),
 			font-size: var(--input-label-font-size),
 			color: var(--input-label-color),
 			margin: 0 0 var(--input-label-gap) 0,
@@ -34,7 +35,7 @@ $vv-textarea: (
 			background-color: var(--input-background-color),
 			will-change: background-color,
 			transition: var(--transition-colors),
-			min-height: var(--spacing-50),
+			min-height: var(--input-min-height),
 			pseudo: (
 				before: (
 					position: absolute,
@@ -78,6 +79,7 @@ $vv-textarea: (
 			pseudo: (
 				placeholder: (
 					color: var(--input-placeholder-color),
+					text-overlow: ellipsis,
 				),
 			),
 			state: (
@@ -210,6 +212,7 @@ $vv-textarea: (
 				label: (
 					position: absolute,
 					z-index: 1,
+					min-height: var(--input-min-height),
 					pointer-events: none,
 					font-size: inherit,
 					[padding-top]: var(--input-spacing-top),
@@ -235,11 +238,13 @@ $vv-textarea: (
 				focus-within: (
 					element: (
 						label: (
-							transform: translateY(-0.8em),
-							font-size: var(--text-12),
+							transform: var(--input-floating-label-transform),
+							font-size: var(--input-floating-label-font-size),
 						),
 						input: (
-							transform: translateY(0.55em),
+							[padding-top]: var(--input-floating-padding-top),
+							[padding-bottom]:
+								var(--input-floating-padding-bottom),
 							pseudo: (
 								placeholder: (
 									opacity: var(--opacity-100),
@@ -251,11 +256,13 @@ $vv-textarea: (
 				dirty: (
 					element: (
 						label: (
-							transform: translateY(-0.8em),
-							font-size: var(--text-12),
+							transform: var(--input-floating-label-transform),
+							font-size: var(--input-floating-label-font-size),
 						),
 						input: (
-							transform: translateY(0.55em),
+							[padding-top]: var(--input-floating-padding-top),
+							[padding-bottom]:
+								var(--input-floating-padding-bottom),
 							pseudo: (
 								placeholder: (
 									opacity: var(--opacity-100),

package/src/tools/_mixins.scss

@@ -173,34 +173,40 @@
 
 // Transform a map into a list of modifiers
 @mixin spread-map-into-modifiers(
+	$original: null,
 	$map: (),
 	$prefix: '',
 	$key: 'modifier',
 	$block: null,
+	$modifier: '',
 	$props: true,
 	$zero-specificity: true,
 	$bps: (
 		xxs: 0,
 	)
 ) {
+	@if not $original {
+		$original: $map;
+	}
 	@if not $block {
 		$block: &;
 	}
 	@if type-of(map.get($map, $key)) == 'map' {
-		@each $modifier, $value in map.get($map, $key) {
-			$selector: $block + '--' + $modifier;
+		@each $item, $value in map.get($map, $key) {
+			$selector: $block + '--' + $item;
 
-			%#{$prefix + '--' + $modifier} {
+			%#{$prefix + '--' + $item} {
 				@include spread-map-into-attrs(
-					$original: $map,
+					$original: $original,
 					$map: $value,
 					$prefix: $prefix,
-					$variant: #{$key}-#{$modifier},
+					$variant: #{$key}-#{$item},
 					$deep: true,
 					$ignore: (
 						'state',
 						'breakpoint',
 						'element',
+						'modifier',
 					),
 					$props: $props
 				);
@@ -208,21 +214,21 @@
 
 			// map props and attributes
 			@include wrap-with-where(
-				$selector: $selector + $block,
+				$selector: $modifier + $selector + $block,
 				$enabled: $zero-specificity
 			) {
-				@extend %#{$prefix + '--' + $modifier};
+				@extend %#{$prefix + '--' + $item};
 			}
 
 			// map elements
 			@if map.get($value, 'element') {
 				@include spread-map-into-elements(
-					$original: $map,
+					$original: $original,
 					$map: $value,
-					$prefix: #{$prefix}-#{$key}-#{$modifier},
+					$prefix: #{$prefix}-#{$key}-#{$item},
 					$key: 'element',
 					$block: $block,
-					$modifier: $selector,
+					$modifier: $modifier + $selector,
 					$props: $props,
 					$zero-specificity: $zero-specificity
 				);
@@ -231,12 +237,12 @@
 			// map states
 			@if map.get($value, 'state') {
 				@include spread-map-into-states(
-					$original: $map,
+					$original: $original,
 					$map: $value,
-					$prefix: #{$prefix}-#{$key}-#{$modifier},
+					$prefix: #{$prefix}-#{$key}-#{$item},
 					$key: 'state',
 					$block: $block,
-					$modifier: $selector,
+					$modifier: $modifier + $selector,
 					$props: $props,
 					$zero-specificity: $zero-specificity
 				);
@@ -246,13 +252,28 @@
 			@if map.get($value, 'breakpoint') {
 				@include spread-map-into-breakpoints(
 					$map: $value,
-					$prefix: #{$prefix}-#{$key}-#{$modifier},
+					$prefix: #{$prefix}-#{$key}-#{$item},
 					$key: 'breakpoint',
 					$block: $selector,
 					$props: $props,
 					$zero-specificity: $zero-specificity
 				);
 			}
+
+			// map modifiers
+			@if map.get($value, 'modifier') {
+				@include spread-map-into-modifiers(
+					$original: $original,
+					$map: $value,
+					$prefix: #{$prefix}-#{$key}-#{$item},
+					$key: 'modifier',
+					$block: $block,
+					$modifier: $modifier + $selector,
+					$props: $props,
+					$zero-specificity: $zero-specificity,
+					$bps: $bps
+				);
+			}
 		}
 	}
 }