feat(menusurface): Add menu surface theming API.

PiperOrigin-RevId: 468496264

menusurface/_menu-surface.scss

@@ -0,0 +1,7 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './lib/menu-surface-theme' show
+  theme;

menusurface/lib/_menu-surface-theme.scss

@@ -0,0 +1,58 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use 'sass:map';
+
+@use '@material/web/elevation/lib/elevation-theme';
+@use '@material/web/sass/resolvers';
+@use '@material/web/sass/theme';
+@use '@material/web/tokens';
+
+$_custom-property-prefix: 'menu-surface';
+
+@function _resolve-elevation-theme($theme, $resolvers) {
+  $theme: elevation-theme.resolve-theme(
+    $theme,
+    map.get($resolvers, 'elevation'),
+    $shadow-color-token: 'container-shadow-color',
+    $elevation-tokens: (container-elevation)
+  );
+  @return $theme;
+}
+
+// Use menu tokens for default menu surface values.
+$_theme: _resolve-elevation-theme(
+  tokens.md-comp-menu-values(),
+  resolvers.$material
+);
+// Note that we don't use tokens here because menu surface does not have
+// tokens. Components that use menu surface are expected to pass through
+// their own tokens.
+$light-theme: (
+  // This should be the result of resolving the `container-elevation` and
+  // `container-shadow-color` keys (via `elevation-theme.resolve-theme()`).
+  container-elevation-shadow: map.get($_theme, 'container-elevation-shadow'),
+  container-shape: map.get($_theme, 'container-shape')
+);
+
+@mixin theme($theme, $resolvers: resolvers.$material) {
+  $theme: theme.validate-theme($light-theme, $theme);
+  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
+
+  @include theme.emit-theme-vars($theme);
+}
+
+@mixin theme-styles($theme, $resolvers: resolvers.$material) {
+  $theme: theme.validate-theme-styles($light-theme, $theme);
+  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
+
+  @include elevation-theme.theme-styles(
+    (
+      shadow: map.get($theme, 'container-elevation-shadow'),
+    )
+  );
+
+  border-radius: map.get($theme, 'container-shape');
+}

menusurface/lib/_menu-surface.scss

@@ -0,0 +1,85 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+$_fade-in-duration: 0.03s;
+$_fade-out-duration: 0.075s;
+$_scale-duration: 0.12s;
+$_min-distance-from-edge: 32px;
+$_max-width: calc(100vw - #{$_min-distance-from-edge});
+$_max-height: calc(100vh - #{$_min-distance-from-edge});
+$_z-index: 8; // One above md3-dialog
+$_deceleration-curve-timing-function: cubic-bezier(0, 0, 0.2, 1) !default;
+
+@mixin static-styles() {
+  .md3-menu-surface {
+    box-sizing: border-box;
+    display: none;
+    opacity: 0;
+    overflow: auto;
+    margin: 0;
+    max-height: $_max-height;
+    max-width: $_max-width;
+    padding: 0;
+    position: absolute;
+    transform: scale(1);
+    transform-origin: top left;
+    transition: opacity $_fade-in-duration linear,
+      transform $_scale-duration $_deceleration-curve-timing-function,
+      height 250ms $_deceleration-curve-timing-function;
+    will-change: transform, opacity;
+    z-index: $_z-index;
+
+    .md3-elevation-overlay {
+      z-index: 0;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &--animating-open {
+      display: inline-block;
+      opacity: 0;
+      transform: scale(0.8);
+    }
+
+    // Render this after `--animating-open` to override `opacity` & `transform`
+    // CSS properties.
+    &--open {
+      display: inline-block;
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    &--animating-closed {
+      display: inline-block;
+      opacity: 0;
+      transition: opacity $_fade-out-duration linear;
+    }
+  }
+
+  .md3-menu-surface--anchor {
+    overflow: visible;
+    position: relative;
+  }
+
+  .md3-menu-surface--fixed {
+    position: fixed;
+  }
+
+  .md3-menu-surface--fullwidth {
+    width: 100%;
+  }
+
+  // Used by filled variants of GM components to conditionally flatten the top
+  // corners of the menu.
+  .md3-menu-surface--is-open-below {
+    border-top-left-radius: 0px;
+    border-top-right-radius: 0px;
+  }
+}

menusurface/lib/menu-surface-styles.scss

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