@volverjs/style 0.1.30-beta.1 → 0.1.30

package/package.json

@@ -24,7 +24,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/style/issues"
   },
-  "version": "0.1.30-beta.1",
+  "version": "0.1.30",
   "engines": {
     "node": ">= 20.x"
   },
@@ -45,26 +45,26 @@
   ],
   "devDependencies": {
     "@eslint/js": "^10.0.1",
-    "@iconify/vue": "^5.0.1",
+    "@iconify/vue": "^5.0.3",
     "@nabla/vite-plugin-eslint": "^3.0.1",
-    "@types/node": "^26.4.1",
-    "@vitejs/plugin-vue": "^6.0.8",
-    "@vueuse/core": "^14.4.0",
+    "@types/node": "^26.6.4",
+    "@vitejs/plugin-vue": "^6.0.9",
+    "@vueuse/core": "^15.0.0",
     "@vueuse/head": "^2.0.0",
-    "eslint": "^10.10.0",
+    "eslint": "^10.12.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.6",
-    "eslint-plugin-vue": "^10.11.0",
+    "eslint-plugin-vue": "^10.11.1",
     "glob": "^13.0.6",
-    "globals": "^17.12.0",
+    "globals": "^17.13.0",
     "icss-utils": "^5.1.0",
-    "markdown-it": "^15.0.1",
+    "markdown-it": "^15.0.2",
     "markdown-it-anchor": "^10.0.0",
     "markdown-it-prism": "^4.0.0",
-    "postcss": "^8.5.28",
+    "postcss": "^8.5.29",
     "postcss-html": "^2.0.0",
-    "postcss-preset-env": "^11.5.2",
-    "prettier": "^3.9.6",
+    "postcss-preset-env": "^11.6.1",
+    "prettier": "^3.9.9",
     "prism-themes": "^1.9.0",
     "prismjs": "^1.30.0",
     "reduce-css-calc": "^2.1.8",
@@ -72,14 +72,14 @@
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.1",
     "remark-lint": "^10.0.1",
-    "sass-embedded": "^1.104.0",
-    "stylelint": "^17.15.0",
+    "sass-embedded": "^1.105.1",
+    "stylelint": "^17.16.0",
     "stylelint-config-recommended-scss": "^17.0.1",
     "stylelint-config-recommended-vue": "^2.0.0",
     "stylelint-config-standard-scss": "^17.0.0",
     "unplugin-auto-import": "^21.1.0",
     "unplugin-vue-components": "^32.1.0",
-    "vite": "^8.2.2",
+    "vite": "^8.3.3",
     "vite-plugin-css-export": "^3.1.0",
     "vite-plugin-handlebars": "^2.0.3",
     "vite-plugin-markdown": "^2.2.0",
@@ -88,7 +88,7 @@
     "vite-plugin-vue-layouts": "^0.11.0",
     "vite-ssg": "^28.3.0",
     "vite-ssg-sitemap": "^0.10.0",
-    "vue": "^3.5.42",
+    "vue": "^3.5.43",
     "vue-live": "^2.5.4",
     "vue-router": "^5.3.1"
   },

package/src/base.scss

@@ -7,7 +7,7 @@
 :where(:host, :root, .theme) {
 	accent-color: var(--color-brand);
 	background: var(--color-surface);
-	caret-color: var(--color-brand);
+	caret-color: var(--color-brand-graphic);
 	color-scheme: var(--color-scheme);
 	color: var(--color-word);
 	scrollbar-color: var(--color-brand);

package/src/components/vv-calendar.scss

@@ -18,7 +18,7 @@ $component-selector: '.#{ $component-name}';
 // `tabindex="-1"`, and a grid moved across with a roving tabindex gives it to
 // every day but one, so the ring is written here, on the pseudo-class alone.
 @include wrap-with-where($selector: '#{$component-selector}__day:focus-visible', $enabled: $zero-specificity-for-components) {
-	outline: var(--spacing-px) solid var(--color-brand);
+	outline: var(--spacing-px) solid var(--color-brand-graphic);
 	outline-offset: var(--spacing-2);
 }
 

package/src/presets/_outlined-fields.scss

@@ -32,7 +32,7 @@ ctx.$input: map.deep-merge(
 		border-color-hover: var(--color-surface-5),
 		border-radius: var(--rounded-lg),
 		// The ring is the only focus indication and has to hold on its own
-		focus-color: var(--color-brand),
+		focus-color: var(--color-brand-graphic),
 		focus-ring: 0 0 0 var(--spacing-3)
 			color-mix(in srgb, var(--input-focus-color) 16%, transparent),
 		invalid-ring: 0 0 0 var(--spacing-3)

package/src/settings/_input.scss

@@ -48,16 +48,16 @@ $input: (
 	placeholder: (
 		color: var(--color-word-4),
 	),
-	// The color of a valid or invalid field paints its bar and its border;
-	// its hint and its label take text-color, the readable role of the same
-	// palette color, which follows the theme. An override of the color needs
-	// one of the text as well.
+	// The color of a valid or invalid field paints its bar and its border, in
+	// the graphic role of its palette color; its hint and its label take
+	// text-color, the readable role of the same color. Both follow the theme,
+	// and an override of the color needs one of the text as well.
 	valid: (
-		color: var(--color-success),
+		color: var(--color-success-graphic),
 		text-color: var(--color-success-readable),
 	),
 	invalid: (
-		color: var(--color-danger),
+		color: var(--color-danger-graphic),
 		text-color: var(--color-danger-readable),
 	),
 	floating: (

package/src/settings/components/_choice.scss

@@ -59,7 +59,7 @@ $choice-segment: (
 			box-shadow: var(--shadow-sm),
 		),
 		focus-visible-within: (
-			outline: var(--spacing-px) solid var(--color-brand),
+			outline: var(--spacing-px) solid var(--color-brand-graphic),
 			outline-offset: var(--spacing-2),
 		),
 	),

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

@@ -88,7 +88,7 @@ $vv-attachment: (
 					background-color: var(--color-surface-2),
 				),
 				focus-visible: (
-					outline: var(--spacing-px) solid var(--color-brand),
+					outline: var(--spacing-px) solid var(--color-brand-graphic),
 					outline-offset: var(--spacing-2),
 				),
 			),

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

@@ -17,8 +17,8 @@ $vv-avatar: (
 	flex-shrink: 0,
 	state: (
 		focus-visible: (
-			outline: var(--spacing-px) solid var(--color-brand),
-			outline-offset: var(--spacing-0),
+			outline: var(--spacing-px) solid var(--color-brand-graphic),
+			outline-offset: var(--spacing-2),
 		),
 	),
 	element: (

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

@@ -34,7 +34,7 @@ $vv-badge: (
 		),
 		focus-within: (
 			outline-offset: var(--spacing-4),
-			outline: var(--spacing-px) solid currentcolor,
+			outline: var(--spacing-px) solid var(--color-brand-graphic),
 		),
 	),
 	element: (
@@ -97,24 +97,49 @@ $vv-badge: (
 		danger: (
 			background-color: var(--color-danger),
 			color: var(--color-danger-contrast),
+			state: (
+				focus-within: (
+					outline-color: var(--color-danger-graphic),
+				),
+			),
 		),
 		success: (
 			background-color: var(--color-success),
 			color: var(--color-success-contrast),
+			state: (
+				focus-within: (
+					outline-color: var(--color-success-graphic),
+				),
+			),
 		),
 		// Filled with the darkest shade, so the text is the contrast of that
 		// shade and not of the base color
 		warning: (
 			background-color: var(--color-warning-darken-5),
 			color: var(--color-warning-darken-5-contrast),
+			state: (
+				focus-within: (
+					outline-color: var(--color-warning-graphic),
+				),
+			),
 		),
 		info: (
 			background-color: var(--color-info-darken-5),
 			color: var(--color-info-darken-5-contrast),
+			state: (
+				focus-within: (
+					outline-color: var(--color-info-graphic),
+				),
+			),
 		),
 		accent: (
 			background-color: var(--color-accent),
 			color: var(--color-accent-contrast),
+			state: (
+				focus-within: (
+					outline-color: var(--color-accent-graphic),
+				),
+			),
 		),
 		gray: (
 			background-color: var(--color-gray-darken-1),

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

@@ -30,7 +30,7 @@ $vv-button: (
 	state: (
 		focus-visible: (
 			outline-offset: var(--spacing-4),
-			outline: var(--spacing-px) solid var(--color-brand),
+			outline: var(--spacing-px) solid var(--color-brand-graphic),
 		),
 		hover: (
 			background: var(--color-brand-darken-1),
@@ -127,7 +127,7 @@ $vv-button: (
 			text-shadow: 0 1px 0 var(--color-gray-lighten-5),
 			state: (
 				focus-visible: (
-					outline: var(--spacing-px) solid var(--color-gray-lighten-4),
+					outline: var(--spacing-px) solid var(--color-gray),
 				),
 				hover: (
 					background: var(--color-gray-lighten-4),
@@ -150,7 +150,7 @@ $vv-button: (
 			),
 			state: (
 				focus-visible: (
-					outline: var(--spacing-px) solid var(--color-danger),
+					outline: var(--spacing-px) solid var(--color-danger-graphic),
 				),
 				hover: (
 					background: var(--color-danger-darken-1),
@@ -188,7 +188,7 @@ $vv-button: (
 			text-shadow: 0 1px 0 var(--color-gray-lighten-5),
 			state: (
 				focus-visible: (
-					outline: var(--spacing-px) solid var(--color-gray-lighten-4),
+					outline: var(--spacing-px) solid var(--color-gray),
 					outline-offset: var(--spacing-0),
 				),
 				hover: (
@@ -214,8 +214,7 @@ $vv-button: (
 			text-shadow: none,
 			state: (
 				focus-visible: (
-					outline: var(--spacing-px) solid
-						var(--color-brand-lighten-4),
+					outline: var(--spacing-px) solid var(--color-brand-graphic),
 					outline-offset: var(--spacing-4),
 				),
 				hover: (
@@ -291,7 +290,7 @@ $vv-button: (
 			text-shadow: none,
 			state: (
 				focus-visible: (
-					outline: var(--spacing-px) solid var(--color-gray-lighten-4),
+					outline: var(--spacing-px) solid var(--color-gray),
 				),
 				hover: (
 					background: var(--color-surface-2),
@@ -327,7 +326,7 @@ $vv-button: (
 			text-shadow: none,
 			state: (
 				focus-visible: (
-					outline: var(--spacing-px) solid var(--color-gray-lighten-4),
+					outline: var(--spacing-px) solid var(--color-gray),
 					outline-offset: var(--spacing-0),
 				),
 				hover: (

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

@@ -41,7 +41,7 @@ $vv-calendar: (
 					color: var(--color-word),
 				),
 				focus-visible: (
-					outline: var(--spacing-px) solid var(--color-brand),
+					outline: var(--spacing-px) solid var(--color-brand-graphic),
 					outline-offset: var(--spacing-2),
 				),
 			),

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

@@ -51,7 +51,7 @@ $vv-checkbox: (
 					background-image: var(--bg-minus),
 				),
 				focus-visible: (
-					outline: var(--spacing-px) solid var(--color-brand),
+					outline: var(--spacing-px) solid var(--color-brand-graphic),
 					outline-offset: var(--spacing-2),
 				),
 			),

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

@@ -27,7 +27,7 @@ $vv-command: (
 			// the focus colour, like the search of a dropdown
 			state: (
 				focus-within: (
-					border-bottom-color: var(--color-brand),
+					border-bottom-color: var(--color-brand-graphic),
 				),
 			),
 		),

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

@@ -17,7 +17,7 @@ $vv-dropdown-action: (
 			color: var(--color-surface-brand-readable),
 		),
 		focus-visible: (
-			outline: var(--spacing-px) solid var(--color-brand),
+			outline: var(--spacing-px) solid var(--color-brand-graphic),
 			outline-offset: calc(var(--spacing-px) * -1),
 		),
 		pressed: (

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

@@ -40,7 +40,7 @@ $vv-input-file: (
 					position: absolute,
 					height: var(--spacing-2),
 					inset: auto 0 0 0,
-					background: var(--color-brand),
+					background: var(--color-brand-graphic),
 					scale: 0 1,
 					transform-origin: left,
 					will-change: transform,
@@ -287,7 +287,7 @@ $vv-input-file: (
 					background-color: var(--color-surface-5),
 				),
 				focus-visible: (
-					outline: var(--spacing-px) solid var(--color-gray-lighten-4),
+					outline: var(--spacing-px) solid var(--color-gray),
 				),
 				disabled: (
 					cursor: not-allowed,

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

@@ -22,15 +22,15 @@ $vv-input-otp: (
 			font-size: var(--text-20),
 			font-variant-numeric: tabular-nums,
 			text-align: center,
-			caret-color: var(--color-brand),
+			caret-color: var(--color-brand-graphic),
 			transition: border-color var(--duration-150) var(--ease-out),
 			state: (
 				hover: (
 					border-color: var(--color-surface-5),
 				),
 				focus-visible: (
-					border-color: var(--color-brand),
-					outline: var(--spacing-px) solid var(--color-brand),
+					border-color: var(--color-brand-graphic),
+					outline: var(--spacing-px) solid var(--color-brand-graphic),
 					outline-offset: 0,
 				),
 				disabled: (

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

@@ -109,7 +109,7 @@ $vv-input-range: (
 						var(--input-range-thumb-shadow-hover),
 				),
 				focus-visible: (
-					outline: var(--border-2) solid var(--color-brand),
+					outline: var(--border-2) solid var(--color-brand-graphic),
 					outline-offset: var(--spacing-2),
 				),
 				disabled: (

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

@@ -43,7 +43,7 @@ $vv-input-text: (
 					position: absolute,
 					height: var(--spacing-2),
 					inset: auto 0 0 0,
-					background: var(--color-brand),
+					background: var(--color-brand-graphic),
 					scale: 0 1,
 					transform-origin: left,
 					will-change: transform,

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

@@ -48,7 +48,7 @@ $vv-item: (
 			state: (
 				// Inset, so the scrolling list around the row does not clip it
 				focus-visible: (
-					outline: var(--spacing-2) solid var(--color-brand),
+					outline: var(--spacing-2) solid var(--color-brand-graphic),
 					outline-offset: calc(var(--spacing-2) * -1),
 				),
 				disabled: (
@@ -128,7 +128,7 @@ $vv-item: (
 					color: var(--color-word-1),
 				),
 				focus-visible: (
-					outline: var(--spacing-2) solid var(--color-brand),
+					outline: var(--spacing-2) solid var(--color-brand-graphic),
 					outline-offset: calc(var(--spacing-2) * -1),
 				),
 			),

package/src/settings/components/_vv-message-scroller.scss

@@ -39,7 +39,7 @@ $vv-message-scroller: (
 					background-color: var(--color-surface-2),
 				),
 				focus-visible: (
-					outline: var(--spacing-px) solid var(--color-brand),
+					outline: var(--spacing-px) solid var(--color-brand-graphic),
 					outline-offset: var(--spacing-2),
 				),
 			),

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

@@ -47,7 +47,7 @@ $vv-pagination: (
 					color: var(--color-word),
 				),
 				focus-visible: (
-					outline: var(--spacing-px) solid var(--color-brand),
+					outline: var(--spacing-px) solid var(--color-brand-graphic),
 					outline-offset: var(--spacing-2),
 				),
 				current-page: (

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

@@ -74,7 +74,7 @@ $vv-prose: (
 					text-decoration-thickness: 2px,
 				),
 				focus-visible: (
-					outline: var(--spacing-px) solid var(--color-brand),
+					outline: var(--spacing-px) solid var(--color-brand-graphic),
 					outline-offset: var(--spacing-2),
 				),
 			),

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

@@ -96,7 +96,7 @@ $vv-radio: (
 					),
 				),
 				focus-visible: (
-					outline: var(--spacing-px) solid var(--color-brand),
+					outline: var(--spacing-px) solid var(--color-brand-graphic),
 					outline-offset: var(--spacing-2),
 				),
 			),

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

@@ -45,7 +45,7 @@ $vv-select: (
 					position: absolute,
 					height: var(--spacing-2),
 					inset: auto 0 0 0,
-					background: var(--color-brand),
+					background: var(--color-brand-graphic),
 					scale: 0 1,
 					transform-origin: left,
 					will-change: transform,

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

@@ -99,7 +99,7 @@ $vv-table: (
 			cursor: pointer,
 			state: (
 				focus-visible: (
-					outline: var(--spacing-px) solid var(--color-brand),
+					outline: var(--spacing-px) solid var(--color-brand-graphic),
 					outline-offset: var(--spacing-2),
 				),
 			),

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

@@ -18,7 +18,7 @@ $vv-text: (
 			color: var(--color-brand-readable),
 			state: (
 				focus-visible: (
-					outline: var(--spacing-px) solid var(--color-brand),
+					outline: var(--spacing-px) solid var(--color-brand-graphic),
 					outline-offset: var(--spacing-4),
 				),
 				hover: (

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

@@ -53,7 +53,7 @@ $vv-textarea: (
 					position: absolute,
 					height: var(--spacing-2),
 					inset: auto 0 0 0,
-					background: var(--color-brand),
+					background: var(--color-brand-graphic),
 					scale: 0 1,
 					transform-origin: left,
 					will-change: transform,

package/src/themes/dark/settings/_input.scss

@@ -1,8 +1,4 @@
-$dark-input: (
-	invalid: (
-		color: var(--color-danger-lighten-2),
-	),
-	valid: (
-		color: var(--color-success-lighten-2),
-	),
-) !default;
+// The bars and the borders of a valid or invalid field read the graphic roles
+// of success and danger, which the dark theme redeclares, so the fields
+// follow it with nothing here
+$dark-input: () !default;

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

@@ -21,9 +21,6 @@ $dark-vv-button: (
 			border-color: var(--color-gray-darken-1),
 			text-shadow: 0 1px 0 var(--color-gray-darken-5),
 			state: (
-				focus-visible: (
-					outline: var(--spacing-px) solid var(--color-gray),
-				),
 				hover: (
 					background: var(--color-gray-darken-4),
 				),
@@ -38,10 +35,6 @@ $dark-vv-button: (
 			color: var(--color-gray-lighten-2),
 			text-shadow: 0 1px 0 var(--color-gray-darken-4),
 			state: (
-				focus-visible: (
-					outline: var(--spacing-px) solid var(--color-gray),
-					outline-offset: var(--spacing-0),
-				),
 				hover: (
 					background: var(--color-gray-darken-4),
 				),