@volverjs/style 0.1.4 → 0.1.5

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.5",
   "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/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/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

@@ -27,7 +27,7 @@ $vv-input-text: (
 			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,
@@ -280,8 +280,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,

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

@@ -79,7 +79,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,
@@ -201,6 +201,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),

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

@@ -34,7 +34,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,
@@ -210,6 +210,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),