fix: forced colors mode for button and text-field (#8927)

Author: jouni

packages/button/src/vaadin-button-base.js

@@ -81,7 +81,23 @@ export const buttonStyles = css`
 
     @media (forced-colors: active) {
       :host {
-        border: 1px solid;
+        --vaadin-button-border-width: 1px;
+        --vaadin-button-background: ButtonFace;
+        --vaadin-button-text-color: ButtonText;
+      }
+
+      :host([theme~='primary']) {
+        forced-color-adjust: none;
+        --vaadin-button-background: CanvasText;
+        --vaadin-button-text-color: Canvas;
+        --vaadin-icon-color: Canvas;
+      }
+
+      :host([disabled]) {
+        --vaadin-button-background: transparent !important;
+        --vaadin-button-border-color: GrayText !important;
+        --vaadin-button-text-color: GrayText !important;
+        opacity: 1;
       }
     }
   }

packages/component-base/src/style-props.js

@@ -43,6 +43,21 @@ addGlobalThemeStyles(
         --_vaadin-icon-cross: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>');
         --_vaadin-icon-warn: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" /></svg>');
       }
+
+      @media (forced-colors: active) {
+        html {
+          --_vaadin-background: Canvas;
+
+          --_vaadin-border-color: CanvasText;
+          --_vaadin-border-color-strong: CanvasText;
+
+          --_vaadin-color-subtle: CanvasText;
+          --_vaadin-color: CanvasText;
+          --_vaadin-color-strong: CanvasText;
+
+          --vaadin-icon-color: CanvasText;
+        }
+      }
     }
   `,
 );

packages/field-base/src/styles/field-shared-styles.js

@@ -80,4 +80,10 @@ export const fieldShared = css`
   :host([theme~='helper-above-field']) {
     --vaadin-input-field-helper-order: -1;
   }
+
+  @media (forced-colors: active) {
+    [part='error-message']::before {
+      background: CanvasText;
+    }
+  }
 `;

packages/input-container/src/vaadin-input-container-styles.js

@@ -100,4 +100,17 @@ export const inputContainerStyles = css`
     );
     --vaadin-input-field-border-color: transparent;
   }
+
+  @media (forced-colors: active) {
+    :host {
+      --vaadin-input-field-background: Field;
+      --vaadin-input-field-value-color: FieldText;
+      --vaadin-input-field-placeholder-color: GrayText;
+    }
+
+    :host([disabled]) {
+      --vaadin-input-field-value-color: GrayText;
+      --vaadin-icon-color: GrayText;
+    }
+  }
 `;