refactor: update readonly and disabled input field surface color (#10373)

jouni · web-flow · commit 8d46800e1cc5 · 2025-10-24T13:27:16.000+03:00
diff --git a/packages/aura/src/components/input-container.css b/packages/aura/src/components/input-container.css
@@ -19,9 +19,12 @@ vaadin-message-input:not([readonly], [disabled]) {
   box-shadow: 0 2px 1px -1px hsla(0, 0%, 0%, 0.04);
 }
 
+[readonly]::part(input-field) {
+  --aura-surface-opacity: 0;
+}
+
 [disabled]::part(input-field) {
-  --aura-surface-opacity: 0.5;
-  --aura-surface-level: 1;
+  --vaadin-input-field-background: var(--vaadin-background-container);
 }
 
 ::part(field-button) {

Original file line number	Diff line number	Diff line change
`@@ -19,9 +19,12 @@ vaadin-message-input:not([readonly], [disabled]) {`
`19`	`19`	`box-shadow: 0 2px 1px -1px hsla(0, 0%, 0%, 0.04);`
`20`	`20`	`}`
`21`	`21`
	`22`	`+[readonly]::part(input-field) {`
	`23`	`+ --aura-surface-opacity: 0;`
	`24`	`+}`
	`25`	`+`
`22`	`26`	`[disabled]::part(input-field) {`
`23`		`- --aura-surface-opacity: 0.5;`
`24`		`- --aura-surface-level: 1;`
	`27`	`+ --vaadin-input-field-background: var(--vaadin-background-container);`
`25`	`28`	`}`
`26`	`29`
`27`	`30`	`::part(field-button) {`