Better input focus color for invalid inputs

lazaronixon · lazaronixon · commit 6cc0de1e26d5 · 2025-02-18T03:04:43.000-03:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## [Unreleased]
 - Small adjusts for menu components
+- Better input focus color for invalid inputs
 
 ## 1.1.3 - 2025-02-17
 - Remove --btn-text-align from .btn
diff --git a/lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css b/lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css
@@ -70,6 +70,10 @@
     outline: var(--input-outline-size, 2px) solid var(--color-selected-dark);
   }
 
+  &:focus-visible:user-invalid  {
+    outline: var(--input-outline-size, 2px) solid rgb(from var(--color-negative) r g b / .2);
+  }
+
   .field_with_errors & {
     border-color: var(--color-negative);
   }

Original file line number	Diff line number	Diff line change
`@@ -70,6 +70,10 @@`
`70`	`70`	`outline: var(--input-outline-size, 2px) solid var(--color-selected-dark);`
`71`	`71`	`}`
`72`	`72`
	`73`	`+ &:focus-visible:user-invalid {`
	`74`	`+ outline: var(--input-outline-size, 2px) solid rgb(from var(--color-negative) r g b / .2);`
	`75`	`+ }`
	`76`	`+`
`73`	`77`	`.field_with_errors & {`
`74`	`78`	`border-color: var(--color-negative);`
`75`	`79`	`}`