chore(autocomplete): merge static/theme-styles

PiperOrigin-RevId: 483688290

autocomplete/_filled-autocomplete.scss

@@ -3,5 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/filled-autocomplete-theme' show
-  theme;
+@forward './lib/filled-autocomplete' show theme;

autocomplete/_outlined-autocomplete.scss

@@ -3,5 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/outlined-autocomplete-theme' show
-  theme;
+@forward './lib/outlined-autocomplete' show theme;

autocomplete/filled-autocomplete.ts

@@ -18,6 +18,7 @@ import {styles as sharedStyles} from '../textfield/lib/shared-styles.css.js';
 
 import {Autocomplete} from './lib/autocomplete.js';
 import {styles as autocompleteStyles} from './lib/filled-styles.css.js';
+import {styles as sharedAutocompleteStyles} from './lib/shared-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -33,7 +34,8 @@ declare global {
 @customElement('md-filled-autocomplete')
 export class MdFilledAutocomplete extends Autocomplete {
   static override styles = [
-    sharedStyles, filledStyles, filledForcedColorsStyles, autocompleteStyles
+    sharedStyles, filledStyles, filledForcedColorsStyles,
+    sharedAutocompleteStyles, autocompleteStyles
   ];
 
   protected override readonly listTag = literal`md-autocomplete-list`;

autocomplete/lib/_autocomplete.scss

@@ -1,14 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
-@mixin static-styles() {
-  .md3-autocomplete {
-    display: inline-flex;
-    flex: 1;
-  }
-}

autocomplete/lib/_filled-autocomplete.scss

@@ -8,19 +8,16 @@
 
 @use 'sass:map';
 @use '../../elevation/lib/elevation-theme';
-@use '../../field/lib/filled-field-theme';
-@use '../../list/lib/listitem/list-item-theme';
+@use '../../field/filled-field';
 @use '../../list/list';
 @use '../../list/list-item';
 @use '../../menusurface/menu-surface';
-@use '../../sass/resolvers';
-@use '../../sass/shape';
 @use '../../sass/theme';
-@use '../../textfield/lib/filled-text-field-theme';
+@use '../../textfield/filled-text-field';
 @use '../../tokens';
+@use './shared';
 
 $custom-property-prefix: 'filled-autocomplete';
-$light-theme: tokens.md-comp-filled-autocomplete-values();
 $dark-theme: tokens.md-comp-filled-autocomplete-values(
   (
     md-sys-color: tokens.md-sys-color-values-dark-dynamic(),
@@ -28,27 +25,30 @@ $dark-theme: tokens.md-comp-filled-autocomplete-values(
   $exclude-hardcoded-values: true
 );
 
-@mixin theme($theme, $resolvers: resolvers.$material) {
-  $theme: theme.validate-theme($light-theme, $theme);
-  $theme: _resolve-theme($theme, $resolvers);
-  $theme: theme.create-theme-vars($theme, $custom-property-prefix);
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme(
+    tokens.md-comp-filled-autocomplete-values(),
+    $tokens
+  );
+  $tokens: shared.resolve-tokens($tokens);
+  $tokens: theme.create-theme-vars($tokens, $custom-property-prefix);
 
-  @include theme.emit-theme-vars($theme);
+  @include theme.emit-theme-vars($tokens);
 }
 
-@mixin theme-styles($theme, $resolvers: resolvers.$material) {
-  $theme: theme.validate-theme-styles($light-theme, $theme);
-  $theme: _resolve-theme($theme, $resolvers);
-  $theme: theme.create-theme-vars($theme, $custom-property-prefix);
+@mixin styles() {
+  $tokens: tokens.md-comp-filled-autocomplete-values();
+  $tokens: shared.resolve-tokens($tokens);
+  $tokens: theme.create-theme-vars($tokens, $custom-property-prefix);
 
-  & {
-    @each $token, $value in $theme {
+  * {
+    @each $token, $value in $tokens {
       --_#{$token}: #{$value};
     }
   }
 
-  .md3-text-field--filled {
-    @include filled-text-field-theme.theme(
+  .md3-text-field {
+    @include filled-text-field.theme(
       (
         active-indicator-color: var(--_text-field-active-indicator-color),
         active-indicator-height: var(--_text-field-active-indicator-height),
@@ -169,11 +169,10 @@ $dark-theme: tokens.md-comp-filled-autocomplete-values(
         supporting-text-weight: var(--_text-field-supporting-text-weight),
         trailing-icon-color: var(--_text-field-trailing-icon-color),
         trailing-icon-size: var(--_text-field-trailing-icon-size),
-      ),
-      $resolvers
+      )
     );
     // Textfield cannot resolve shape when created as vars.
-    @include filled-field-theme.theme(
+    @include filled-field.theme(
       (
         container-shape-start-start:
           var(--_text-field-container-shape-start-start),
@@ -189,8 +188,7 @@ $dark-theme: tokens.md-comp-filled-autocomplete-values(
       (
         container-elevation-shadow: var(--_menu-container-elevation-shadow),
         container-shape: var(--_menu-container-shape),
-      ),
-      $resolvers
+      )
     );
 
     @include list.theme(
@@ -220,28 +218,12 @@ $dark-theme: tokens.md-comp-filled-autocomplete-values(
     );
   }
 
-  ::slotted([data-aria-selected='true']) {
-    @include list-item-theme.theme(
+  .md3-autocomplete ::slotted([data-aria-selected='true']) {
+    @include list-item.theme(
       (
         list-item-container-color:
           var(--_menu-list-item-selected-container-color),
-      ),
-      $resolvers
+      )
     );
   }
 }
-
-@function _resolve-theme($theme, $resolvers) {
-  $theme: elevation-theme.resolve-theme(
-    $theme,
-    map.get($resolvers, 'elevation'),
-    $shadow-color-token: 'menu-container-shadow-color',
-    $elevation-tokens: (menu-container-elevation)
-  );
-  $theme: shape.resolve-theme(
-    $theme,
-    map.get($resolvers, shape),
-    text-field-container-shape
-  );
-  @return $theme;
-}

autocomplete/lib/_outlined-autocomplete.scss

@@ -7,20 +7,16 @@
 // Selector '.md3-*' should only be used in this project.
 
 @use 'sass:map';
-@use '../../elevation/lib/elevation-theme';
-@use '../../field/lib/outlined-field-theme';
-@use '../../list/lib/listitem/list-item-theme';
+@use '../../field/outlined-field';
 @use '../../list/list';
 @use '../../list/list-item';
 @use '../../menusurface/menu-surface';
-@use '../../sass/resolvers';
-@use '../../sass/shape';
 @use '../../sass/theme';
-@use '../../textfield/lib/outlined-text-field-theme';
+@use '../../textfield/outlined-text-field';
 @use '../../tokens';
+@use './shared';
 
 $custom-property-prefix: 'outlined-autocomplete';
-$light-theme: tokens.md-comp-outlined-autocomplete-values();
 $dark-theme: tokens.md-comp-outlined-autocomplete-values(
   (
     md-sys-color: tokens.md-sys-color-values-dark-dynamic(),
@@ -28,27 +24,38 @@ $dark-theme: tokens.md-comp-outlined-autocomplete-values(
   $exclude-hardcoded-values: true
 );
 
-@mixin theme($theme, $resolvers: resolvers.$material) {
-  $theme: theme.validate-theme($light-theme, $theme);
-  $theme: _resolve-theme($theme, $resolvers);
-  $theme: theme.create-theme-vars($theme, $custom-property-prefix);
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme(
+    tokens.md-comp-outlined-autocomplete-values(),
+    $theme
+  );
+  $tokens: shared.resolve-tokens($tokens);
+  $tokens: theme.create-theme-vars($tokens, $custom-property-prefix);
 
-  @include theme.emit-theme-vars($theme);
+  @include theme.emit-theme-vars($tokens);
 }
 
-@mixin theme-styles($theme, $resolvers: resolvers.$material) {
-  $theme: theme.validate-theme-styles($light-theme, $theme);
-  $theme: _resolve-theme($theme, $resolvers);
-  $theme: theme.create-theme-vars($theme, $custom-property-prefix);
+@mixin styles() {
+  $tokens: tokens.md-comp-outlined-autocomplete-values();
+  $tokens: shared.resolve-tokens($tokens);
+  // TODO(b/251183088): Clean up container-shape once token is correct.
+  $tokens: map.merge(
+    $tokens,
+    (
+      text-field-container-shape: 4px,
+    )
+  );
 
-  & {
-    @each $token, $value in $theme {
+  $tokens: theme.create-theme-vars($tokens, $custom-property-prefix);
+
+  * {
+    @each $token, $value in $tokens {
       --_#{$token}: #{$value};
     }
   }
 
-  .md3-text-field--outlined {
-    @include outlined-text-field-theme.theme(
+  .md3-text-field {
+    @include outlined-text-field.theme(
       (
         caret-color: var(--_text-field-caret-color),
         container-height: var(--_text-field-container-height),
@@ -149,12 +156,11 @@ $dark-theme: tokens.md-comp-outlined-autocomplete-values(
         supporting-text-weight: var(--_text-field-supporting-text-weight),
         trailing-icon-color: var(--_text-field-trailing-icon-color),
         trailing-icon-size: var(--_text-field-trailing-icon-size),
-      ),
-      $resolvers
+      )
     );
 
     // Textfield cannot resolve shape when created as vars.
-    @include outlined-field-theme.theme(
+    @include outlined-field.theme(
       (
         container-shape-start-start:
           var(--_text-field-container-shape-start-start),
@@ -170,8 +176,7 @@ $dark-theme: tokens.md-comp-outlined-autocomplete-values(
       (
         container-elevation-shadow: var(--_menu-container-elevation-shadow),
         container-shape: var(--_menu-container-shape),
-      ),
-      $resolvers
+      )
     );
 
     @include list.theme(
@@ -201,28 +206,12 @@ $dark-theme: tokens.md-comp-outlined-autocomplete-values(
     );
   }
 
-  ::slotted([data-aria-selected='true']) {
-    @include list-item-theme.theme(
+  .md3-autocomplete ::slotted([data-aria-selected='true']) {
+    @include list-item.theme(
       (
         list-item-container-color:
           var(--_menu-list-item-selected-container-color),
-      ),
-      $resolvers
+      )
     );
   }
 }
-
-@function _resolve-theme($theme, $resolvers) {
-  $theme: elevation-theme.resolve-theme(
-    $theme,
-    map.get($resolvers, 'elevation'),
-    $shadow-color-token: 'menu-container-shadow-color',
-    $elevation-tokens: (menu-container-elevation)
-  );
-  $theme: shape.resolve-theme(
-    $theme,
-    map.get($resolvers, shape),
-    text-field-container-shape
-  );
-  @return $theme;
-}

autocomplete/lib/_shared.scss

@@ -0,0 +1,34 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@use 'sass:map';
+@use '../../elevation/lib/elevation-theme';
+@use '../../sass/resolvers';
+@use '../../sass/shape';
+
+@mixin styles() {
+  .md3-autocomplete {
+    display: inline-flex;
+    flex: 1;
+  }
+}
+
+@function resolve-tokens($tokens) {
+  $tokens: elevation-theme.resolve-theme(
+    $tokens,
+    map.get(resolvers.$material, 'elevation'),
+    $shadow-color-token: 'menu-container-shadow-color',
+    $elevation-tokens: (menu-container-elevation)
+  );
+  $tokens: shape.resolve-theme(
+    $tokens,
+    map.get(resolvers.$material, shape),
+    text-field-container-shape
+  );
+  @return $tokens;
+}

autocomplete/lib/autocompletelist/_autocomplete-list.scss

@@ -6,7 +6,7 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
-@mixin static-styles() {
+@mixin styles() {
   .md3-autocomplete-list {
     min-width: unset;
   }

autocomplete/lib/autocompletelist/autocomplete-list-styles.scss

@@ -5,4 +5,4 @@
 
 @use './autocomplete-list';
 
-@include autocomplete-list.static-styles;
+@include autocomplete-list.styles;

autocomplete/lib/autocompletesurface/_autocomplete-surface.scss

@@ -6,7 +6,7 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
-@mixin static-styles() {
+@mixin styles() {
   .md3-autocomplete-surface {
     width: 100%;
   }

autocomplete/lib/autocompletesurface/autocomplete-surface-styles.scss

@@ -5,4 +5,4 @@
 
 @use './autocomplete-surface';
 
-@include autocomplete-surface.static-styles;
+@include autocomplete-surface.styles;

autocomplete/lib/filled-styles.scss

@@ -3,16 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
+@use './filled-autocomplete';
 
-@use './filled-autocomplete-theme';
-@use './autocomplete';
-
-@include autocomplete.static-styles;
-
-.md3-autocomplete--filled {
-  @include filled-autocomplete-theme.theme-styles(
-    filled-autocomplete-theme.$light-theme
-  );
-}
+@include filled-autocomplete.styles;

autocomplete/lib/outlined-styles.scss

@@ -3,18 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
+@use './outlined-autocomplete';
 
-@use 'sass:map';
-@use './outlined-autocomplete-theme';
-@use './autocomplete';
-
-@include autocomplete.static-styles;
-
-.md3-autocomplete--outlined {
-  // TODO(b/251183088): Clean up container-shape once token is correct.
-  @include outlined-autocomplete-theme.theme-styles(
-    map.merge(outlined-autocomplete-theme.$light-theme, (text-field-container-shape: 4px))
-  );
-}
+@include outlined-autocomplete.styles;

autocomplete/lib/shared-styles.scss

@@ -0,0 +1,8 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use './shared';
+
+@include shared.styles;

autocomplete/outlined-autocomplete.ts

@@ -18,6 +18,7 @@ import {styles as sharedStyles} from '../textfield/lib/shared-styles.css.js';
 
 import {Autocomplete} from './lib/autocomplete.js';
 import {styles as autocompleteStyles} from './lib/outlined-styles.css.js';
+import {styles as sharedAutocompleteStyles} from './lib/shared-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -33,7 +34,8 @@ declare global {
 @customElement('md-outlined-autocomplete')
 export class MdOutlinedAutocomplete extends Autocomplete {
   static override styles = [
-    sharedStyles, outlinedStyles, outlinedForcedColorsStyles, autocompleteStyles
+    sharedStyles, outlinedStyles, outlinedForcedColorsStyles,
+    sharedAutocompleteStyles, autocompleteStyles
   ];
 
   protected override readonly listTag = literal`md-autocomplete-list`;