From 5e7011559ac376616f18589faa64df8e42bd8c8b Mon Sep 17 00:00:00 2001
From: Joy Zhong <joyzhong@google.com>
Date: Thu, 18 Aug 2022 10:47:56 -0700
Subject: [PATCH] feat(menusurface): Add menu surface theming API.

PiperOrigin-RevId: 468496264
---
 menusurface/_menu-surface.scss           |   7 ++
 menusurface/lib/_menu-surface-theme.scss |  58 +++++++++++
 menusurface/lib/_menu-surface.scss       |  85 ++++++++++++++++
 menusurface/lib/_mixins.scss             | 119 -----------------------
 menusurface/lib/menu-surface-styles.scss |  12 ++-
 5 files changed, 160 insertions(+), 121 deletions(-)
 create mode 100644 menusurface/_menu-surface.scss
 create mode 100644 menusurface/lib/_menu-surface-theme.scss
 create mode 100644 menusurface/lib/_menu-surface.scss
 delete mode 100644 menusurface/lib/_mixins.scss

diff --git a/menusurface/_menu-surface.scss b/menusurface/_menu-surface.scss
new file mode 100644
index 0000000000..bea94384be
--- /dev/null
+++ b/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;
diff --git a/menusurface/lib/_menu-surface-theme.scss b/menusurface/lib/_menu-surface-theme.scss
new file mode 100644
index 0000000000..9028defbdc
--- /dev/null
+++ b/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');
+}
diff --git a/menusurface/lib/_menu-surface.scss b/menusurface/lib/_menu-surface.scss
new file mode 100644
index 0000000000..8b43856148
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/menusurface/lib/_mixins.scss b/menusurface/lib/_mixins.scss
deleted file mode 100644
index 0f78037f10..0000000000
--- a/menusurface/lib/_mixins.scss
+++ /dev/null
@@ -1,119 +0,0 @@
-/**
- * @license
- * 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 !default;
-$fade-out-duration: 0.075s !default;
-$scale-duration: 0.12s !default;
-$min-distance-from-edge: 32px !default;
-$z-index: 8 !default; // One above mdc-dialog
-$shape-radius: medium !default;
-$deceleration-curve-timing-function: cubic-bezier(0, 0, 0.2, 1) !default;
-
-@mixin core-styles() {
-  // postcss-bem-linter: define menu-surface
-  .md3-menu-surface {
-    @include base_();
-    // TODO(b/239422022): Remove in favor of theming API.
-    // @include elevation-mixins.elevation($z-value: 8);
-    @include fill-color(surface);
-    @include ink-color(on-surface);
-    @include shape-radius($shape-radius);
-
-    // TODO(b/239421773): Fix this for RTL.
-    transform-origin: top left;
-  }
-
-  .md3-menu-surface--anchor {
-    position: relative;
-    overflow: visible;
-  }
-
-  .md3-menu-surface--fixed {
-    position: fixed;
-  }
-
-  .md3-menu-surface--fullwidth {
-    width: 100%;
-  }
-  // postcss-bem-linter: end
-}
-
-@mixin ink-color($color) {
-  color: $color;
-}
-
-@mixin fill-color($color) {
-  background-color: $color;
-}
-
-@mixin shape-radius($radius) {
-  border-radius: $radius;
-}
-
-// Used by filled variants of GM components to conditionally flatten the top
-// corners of the menu.
-@mixin flatten-top-when-opened-below() {
-  .md3-menu-surface--is-open-below {
-    border-top-left-radius: 0px;
-    border-top-right-radius: 0px;
-  }
-}
-
-//
-// Private
-//
-
-@mixin base_() {
-  display: none;
-  position: absolute;
-  box-sizing: border-box;
-
-  $max-width: calc(100vw - #{$min-distance-from-edge});
-  $max-height: calc(100vh - #{$min-distance-from-edge});
-
-  max-width: $max-width;
-  max-height: $max-height;
-  margin: 0;
-  padding: 0;
-  transform: scale(1);
-  transform-origin: top left;
-  opacity: 0;
-  overflow: auto;
-  will-change: transform, opacity;
-  z-index: $z-index;
-
-  transition: opacity $fade-in-duration linear,
-    transform $scale-duration $deceleration-curve-timing-function,
-    height 250ms $deceleration-curve-timing-function;
-
-  &:focus {
-    outline: none;
-  }
-
-  &--animating-open {
-    display: inline-block;
-    transform: scale(0.8);
-    opacity: 0;
-  }
-
-  // Render this after `--animating-open` to override `opacity` & `transform`
-  // CSS properties.
-  &--open {
-    display: inline-block;
-    transform: scale(1);
-    opacity: 1;
-  }
-
-  &--animating-closed {
-    display: inline-block;
-    opacity: 0;
-
-    transition: opacity $fade-out-duration linear;
-  }
-}
diff --git a/menusurface/lib/menu-surface-styles.scss b/menusurface/lib/menu-surface-styles.scss
index 761b5bcd49..75c1b73ac3 100644
--- a/menusurface/lib/menu-surface-styles.scss
+++ b/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);
+}