refactor: add forced colors mode adjustments to base styles (#10084)

Author: web-padawan

packages/app-layout/src/styles/vaadin-app-layout-base-styles.js

@@ -128,6 +128,7 @@ export const appLayoutStyles = css`
 
   [part='backdrop'] {
     background: var(--vaadin-overlay-backdrop-background, rgba(0, 0, 0, 0.2));
+    forced-color-adjust: none;
   }
 
   :host(:not([drawer-opened])) [part='backdrop'] {

packages/avatar/src/styles/vaadin-avatar-base-styles.js

@@ -80,4 +80,14 @@ export const avatarStyles = css`
     outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
     outline-offset: calc((var(--vaadin-focus-ring-width)) * -1);
   }
+
+  @media (forced-colors: active) {
+    :host {
+      border-color: Canvas !important;
+    }
+
+    [part='icon'] {
+      background: CanvasText !important;
+    }
+  }
 `;

packages/item/src/styles/vaadin-item-base-styles.js

@@ -54,4 +54,10 @@ export const itemStyles = css`
   [part='content'] {
     flex: 1;
   }
+
+  @media (forced-colors: active) {
+    [part='checkmark']::before {
+      background: CanvasText;
+    }
+  }
 `;

packages/master-detail-layout/src/styles/vaadin-master-detail-layout-base-styles.js

@@ -140,6 +140,7 @@ export const masterDetailLayoutStyles = css`
 
   [part='backdrop'] {
     background: var(--vaadin-overlay-backdrop-background, rgba(0, 0, 0, 0.2));
+    forced-color-adjust: none;
   }
 
   :host(:is([drawer], [stack])) [part='detail'] {
@@ -159,7 +160,11 @@ export const masterDetailLayoutStyles = css`
 
   @media (forced-colors: active) {
     :host(:is([drawer], [stack])) [part='detail'] {
-      outline: 3px solid;
+      outline: 3px solid !important;
+    }
+
+    [part='detail'] {
+      background: Canvas !important;
     }
   }
 `;