chore(menu): merge HCM styles

PiperOrigin-RevId: 570482037
material-components · Oct 5, 2023 · fe17b21 · fe17b21
1 parent 8ae8c02
commit fe17b21
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 44 deletions.
diff --git a/menu/internal/_menu.scss b/menu/internal/_menu.scss
@@ -121,4 +121,12 @@
   ::slotted(:is(md-divider, [role='separator'])) {
     margin: 8px 0;
   }
+
+  @media (forced-colors: active) {
+    .menu {
+      border-style: solid;
+      border-color: CanvasText;
+      border-width: 1px;
+    }
+  }
 }
diff --git a/menu/internal/forced-colors-styles.scss b/menu/internal/forced-colors-styles.scss
diff --git a/menu/internal/menuitem/_menu-item.scss b/menu/internal/menuitem/_menu-item.scss
@@ -177,4 +177,26 @@
   .selected:not(.disabled) ::slotted(*) {
     color: map.get($tokens, 'selected-label-text-color');
   }
+
+  @media (forced-colors: active) {
+    :host([disabled]),
+    :host([disabled]) slot {
+      color: GrayText;
+      opacity: 1;
+    }
+
+    .list-item {
+      position: relative;
+    }
+
+    .list-item.selected::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      box-sizing: border-box;
+      border-radius: inherit;
+      pointer-events: none;
+      border: 3px double CanvasText;
+    }
+  }
 }
diff --git a/menu/internal/menuitem/forced-colors-styles.scss b/menu/internal/menuitem/forced-colors-styles.scss
diff --git a/menu/menu-item.ts b/menu/menu-item.ts
@@ -6,7 +6,6 @@
 
 import {customElement} from 'lit/decorators.js';
 
-import {styles as forcedColorsStyles} from './internal/menuitem/forced-colors-styles.css.js';
 import {MenuItemEl} from './internal/menuitem/menu-item.js';
 import {styles} from './internal/menuitem/menu-item-styles.css.js';
 
@@ -36,5 +35,5 @@ declare global {
  */
 @customElement('md-menu-item')
 export class MdMenuItem extends MenuItemEl {
-  static override styles = [styles, forcedColorsStyles];
+  static override styles = [styles];
 }
diff --git a/menu/menu.ts b/menu/menu.ts
@@ -6,7 +6,6 @@
 
 import {customElement} from 'lit/decorators.js';
 
-import {styles as forcedColors} from './internal/forced-colors-styles.css.js';
 import {Menu} from './internal/menu.js';
 import {styles} from './internal/menu-styles.css.js';
 
@@ -72,5 +71,5 @@ declare global {
  */
 @customElement('md-menu')
 export class MdMenu extends Menu {
-  static override styles = [styles, forcedColors];
+  static override styles = [styles];
 }
diff --git a/select/select-option.ts b/select/select-option.ts
@@ -6,7 +6,6 @@
 
 import {customElement} from 'lit/decorators.js';
 
-import {styles as forcedColorsStyles} from '../menu/internal/menuitem/forced-colors-styles.css.js';
 import {styles} from '../menu/internal/menuitem/menu-item-styles.css.js';
 
 // TODO(b/236285090): update with HCM best practices
@@ -50,5 +49,5 @@ declare global {
  */
 @customElement('md-select-option')
 export class MdSelectOption extends SelectOptionEl {
-  static override styles = [styles, forcedColorsStyles];
+  static override styles = [styles];
 }