refactor(material/core): simplify structural styles (#29269)

Simplifies the structural styles of `mat-option` and `mat-optgroup` to make them easier to maintain.

Author: crisbeto

src/material/core/option/optgroup.scss

@@ -1,9 +1,5 @@
-@use 'sass:map';
-@use '@material/list/evolution-mixins' as mdc-list-mixins;
-@use '@material/list/evolution-variables' as mdc-list-variables;
 @use '../tokens/m2/mat/optgroup' as tokens-mat-optgroup;
 @use '../tokens/token-utils';
-@use '../mdc-helpers/mdc-helpers';
 
 .mat-mdc-optgroup {
   // These tokens are set on the root option group to make them easier to override.
@@ -19,20 +15,17 @@
 }
 
 .mat-mdc-optgroup-label {
-  @include mdc-list-mixins.item-base;
-  @include mdc-list-mixins.item-spacing(
-    mdc-list-variables.$side-padding, $query: mdc-helpers.$mdc-base-styles-query);
-
-  // Set the `min-height` here ourselves, instead of going through
-  // the `mdc-list-one-line-item-density` mixin, because it sets a `height`
-  // which doesn't work well with multi-line options.
-  $height-config: map.get(mdc-list-variables.$one-line-item-density-config, height);
-  min-height: map.get($height-config, default);
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: flex-start;
+  overflow: hidden;
+  min-height: 48px;
+  padding: 0 16px;
+  outline: none;
 
   &.mdc-list-item--disabled {
-    // This is the same as `mdc-list-mixins.list-disabled-opacity` which
-    // we can't use directly, because it comes with some selectors.
-    opacity: mdc-list-variables.$content-disabled-opacity;
+    opacity: 0.38;
   }
 
   // Needs to be overwritten explicitly, because the style can

src/material/core/option/option.scss

@@ -1,23 +1,23 @@
-@use 'sass:map';
 @use '@angular/cdk';
-@use '@material/list/evolution-mixins' as mdc-list-mixins;
-@use '@material/list/evolution-variables' as mdc-list-variables;
-@use '@material/typography/typography' as mdc-typography;
 
 @use '../tokens/m2/mat/option' as tokens-mat-option;
 @use '../tokens/m2/mdc/list' as tokens-mdc-list;
 @use '../tokens/token-utils';
-@use '../mdc-helpers/mdc-helpers';
 @use '../style/vendor-prefixes';
 @use '../style/layout-common';
 
+$_side-padding: 16px;
 
 .mat-mdc-option {
-  @include mdc-list-mixins.item-base;
-  @include mdc-list-mixins.item-spacing(
-    mdc-list-variables.$side-padding, $query: mdc-helpers.$mdc-base-styles-query);
   @include vendor-prefixes.user-select(none);
-  @include mdc-typography.smooth-font();
+  @include vendor-prefixes.smooth-font();
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: flex-start;
+  overflow: hidden;
+  min-height: 48px;
+  padding: 0 16px;
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
 
@@ -38,6 +38,7 @@
     &:focus.mdc-list-item,
     &.mat-mdc-option-active.mdc-list-item {
       @include token-utils.create-token-slot(background-color, focus-state-layer-color);
+      outline: 0;
     }
 
     &.mdc-list-item--selected:not(.mdc-list-item--disabled) {
@@ -65,12 +66,6 @@
     background: transparent;
   }
 
-  // Set the `min-height` here ourselves, instead of going through
-  // the `mdc-list-one-line-item-density` mixin, because it sets a `height`
-  // which doesn't work well with multi-line options.
-  $height-config: map.get(mdc-list-variables.$one-line-item-density-config, height);
-  min-height: map.get($height-config, default);
-
   &.mdc-list-item--disabled {
     // This is the same as `mdc-list-mixins.list-disabled-opacity` which
     // we can't use directly, because it comes with some selectors.
@@ -84,7 +79,7 @@
     // MatOption uses a child `<div>` element for its focus state to align with how ListItem does
     // its focus state.
     .mat-mdc-option-pseudo-checkbox, .mdc-list-item__primary-text, > mat-icon {
-      opacity: mdc-list-variables.$content-disabled-opacity;
+      opacity: 0.38;
     }
 
     // Prevent clicking on disabled options with mouse. Support focusing on disabled option using
@@ -96,31 +91,31 @@
   // Note that we bump the padding here, rather than padding inside the
   // group so that ripples still reach to the edges of the panel.
   .mat-mdc-optgroup &:not(.mat-mdc-option-multiple) {
-    padding-left: mdc-list-variables.$side-padding * 2;
+    padding-left: $_side-padding * 2;
 
     [dir='rtl'] & {
-      padding-left: mdc-list-variables.$side-padding;
-      padding-right: mdc-list-variables.$side-padding * 2;
+      padding-left: $_side-padding;
+      padding-right: $_side-padding * 2;
     }
   }
 
   .mat-icon,
   .mat-pseudo-checkbox-full {
-    margin-right: mdc-list-variables.$side-padding;
+    margin-right: $_side-padding;
     flex-shrink: 0;
 
     [dir='rtl'] & {
       margin-right: 0;
-      margin-left: mdc-list-variables.$side-padding;
+      margin-left: $_side-padding;
     }
   }
 
   .mat-pseudo-checkbox-minimal {
-    margin-left: mdc-list-variables.$side-padding;
+    margin-left: $_side-padding;
     flex-shrink: 0;
 
     [dir='rtl'] & {
-      margin-right: mdc-list-variables.$side-padding;
+      margin-right: $_side-padding;
       margin-left: 0;
     }
   }
@@ -169,7 +164,7 @@
       content: '';
       position: absolute;
       top: 50%;
-      right: mdc-list-variables.$side-padding;
+      right: $_side-padding;
       transform: translateY(-50%);
       width: $size;
       height: 0;
@@ -179,7 +174,7 @@
 
     [dir='rtl'] &.mdc-list-item--selected:not(.mat-mdc-option-multiple)::after {
       right: auto;
-      left: mdc-list-variables.$side-padding;
+      left: $_side-padding;
     }
   }
 }