@volverjs/style 0.1.3 → 0.1.5

package/package.json

@@ -1,18 +1,84 @@
 {
   "name": "@volverjs/style",
-  "version": "0.1.3",
-  "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.31.0",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-vue": "^9.8.0",
-    "glob": "^8.0.3",
-    "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.5",
-    "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/_spacing.scss

@@ -4,9 +4,13 @@ $spacing: (
 	px: 1px,
 	1: 0.0625rem,
 	2: 0.125rem,
+	3: 0.1875rem,
 	4: 0.25rem,
+	5: 0.3125rem,
 	6: 0.375rem,
+	7: 0.4375rem,
 	8: 0.5rem,
+	9: 0.5625rem,
 	10: 0.625rem,
 	12: 0.75rem,
 	14: 0.875rem,

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

@@ -5,15 +5,15 @@ $vv-button: (
 	[line-height]: var(--button-line-height),
 	position: relative,
 	background: var(--color-brand),
-	border-radius: 0.5ch,
+	border-radius: var(--rounded),
 	border-style: solid,
 	border-color: var(--color-brand),
 	color: var(--color-white),
 	font-family: var(--font-sans),
 	font-weight: var(--font-semibold),
 	gap: 1ch,
-	padding-block: 0.75ch,
-	padding-inline: 1.75ch,
+	padding-block: var(--spacing-7),
+	padding-inline: var(--spacing-16),
 	text-shadow: 0 1px 0 var(--color-gray-darken-5),
 	transition: var(--transition-all),
 	will-change: all,
@@ -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,
@@ -61,6 +62,13 @@ $vv-button: (
 		),
 	),
 	modifier: (
+		icon-only: (
+			element: (
+				icon: (
+					margin-inline: calc(var(--spacing-6) * -1),
+				),
+			),
+		),
 		primary: (
 			background: var(--color-gray-darken-3),
 			border-color: var(--color-gray-darken-3),
@@ -223,8 +231,8 @@ $vv-button: (
 			color: var(--color-word-1),
 			border-color: var(--color-word-5),
 			font-weight: var(--font-normal),
-			padding-inline: 0.75ch,
-			padding-block: 0.5ch,
+			padding-inline: var(--spacing-6),
+			padding-block: var(--spacing-4),
 			text-shadow: none,
 			state: (
 				focus-visible: (
@@ -258,8 +266,8 @@ $vv-button: (
 			color: var(--color-word-1),
 			border-color: transparent,
 			font-weight: var(--font-normal),
-			padding-inline: 0.75ch,
-			padding-block: 0.5ch,
+			padding-inline: var(--spacing-6),
+			padding-block: var(--spacing-4),
 			text-shadow: none,
 			state: (
 				focus-visible: (
@@ -290,11 +298,6 @@ $vv-button: (
 		),
 		rounded: (
 			border-radius: var(--rounded-full),
-			element: (
-				icon: (
-					margin: 0 -1ch,
-				),
-			),
 		),
 		block: (
 			display: block,
@@ -310,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),

package/src/utilities/tables.scss

@@ -4,12 +4,14 @@
 @include spread-map-into-utilities(
 	$map: $border-collapse,
 	$class: border,
-	$attribute: border-collapse
+	$attribute: border-collapse,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // table-layout
 @include spread-map-into-utilities(
 	$map: $table-layout,
 	$class: table,
-	$attribute: table-layout
+	$attribute: table-layout,
+	$zero-specificity: $zero-specificity-for-utilities
 );

package/src/utilities/transforms.scss

@@ -6,7 +6,7 @@
 		transform: scale(#{$value});
 	}
 	@include wrap-with-where(
-		$selector: 'scale-#{$size}',
+		$selector: '.scale-#{$size}',
 		$enabled: $zero-specificity-for-utilities
 	) {
 		@extend %scale-#{$size};
@@ -16,7 +16,7 @@
 		transform: scaleX(#{$value});
 	}
 	@include wrap-with-where(
-		$selector: 'scale-x-#{$size}',
+		$selector: '.scale-x-#{$size}',
 		$enabled: $zero-specificity-for-utilities
 	) {
 		@extend %scale-x-#{$size};
@@ -26,7 +26,7 @@
 		transform: scaleY(#{$value});
 	}
 	@include wrap-with-where(
-		$selector: 'scale-y-#{$size}',
+		$selector: '.scale-y-#{$size}',
 		$enabled: $zero-specificity-for-utilities
 	) {
 		@extend %scale-y-#{$size};
@@ -37,14 +37,16 @@
 @include spread-map-into-utilities(
 	$map: $rotate,
 	$class: rotate,
-	$attribute: transform
+	$attribute: transform,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // transform-origin
 @include spread-map-into-utilities(
 	$map: $transform-origin,
 	$class: origin,
-	$attribute: transform-origin
+	$attribute: transform-origin,
+	$zero-specificity: $zero-specificity-for-utilities
 );
 
 // translate
@@ -53,7 +55,7 @@
 		transform: translate(#{$value});
 	}
 	@include wrap-with-where(
-		$selector: 'translate-#{$size}',
+		$selector: '.translate-#{$size}',
 		$enabled: $zero-specificity-for-utilities
 	) {
 		@extend %translate-#{$size};
@@ -63,7 +65,7 @@
 		transform: translateX(#{$value});
 	}
 	@include wrap-with-where(
-		$selector: 'translate-x-#{$size}',
+		$selector: '.translate-x-#{$size}',
 		$enabled: $zero-specificity-for-utilities
 	) {
 		@extend %translate-x-#{$size};
@@ -73,7 +75,7 @@
 		transform: translateY(#{$value});
 	}
 	@include wrap-with-where(
-		$selector: 'translate-y-#{$size}',
+		$selector: '.translate-y-#{$size}',
 		$enabled: $zero-specificity-for-utilities
 	) {
 		@extend %translate-y-#{$size};
@@ -83,7 +85,7 @@
 		transform: translate(-#{$value});
 	}
 	@include wrap-with-where(
-		$selector: '-translate-#{$size}',
+		$selector: '.-translate-#{$size}',
 		$enabled: $zero-specificity-for-utilities
 	) {
 		@extend %-translate-#{$size};
@@ -93,7 +95,7 @@
 		transform: translateX(-#{$value});
 	}
 	@include wrap-with-where(
-		$selector: '-translate-x-#{$size}',
+		$selector: '.-translate-x-#{$size}',
 		$enabled: $zero-specificity-for-utilities
 	) {
 		@extend %-translate-x-#{$size};
@@ -103,7 +105,7 @@
 		transform: translateY(-#{$value});
 	}
 	@include wrap-with-where(
-		$selector: '-translate-y-#{$size}',
+		$selector: '.-translate-y-#{$size}',
 		$enabled: $zero-specificity-for-utilities
 	) {
 		@extend %-translate-y-#{$size};