fix(elevation): tidy up tokens and update roadmap

PiperOrigin-RevId: 523211633
material-components · Apr 10, 2023 · 301eb9a · 301eb9a
1 parent 8e507f8
commit 301eb9a
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 29 deletions.
diff --git a/README.md b/README.md
@@ -40,7 +40,7 @@ Checkbox                      | ✅     | ✅    | ❌
 Chips                         | 🟡     | ❌    | ❌
 Dialog                        | ✅     | ✅    | ❌
 Divider                       | ✅     | ✅    | 🟡
-Elevation                     | ✅     | ❌    | ❌
+Elevation                     | ✅     | ✅    | 🟡
 Focus ring                    | ✅     | ❌    | ❌
 Field                         | ✅     | ✅    | 🟡
 Icon                          | ✅     | ✅    | ❌

diff --git a/button/lib/_elevation.scss b/button/lib/_elevation.scss
@@ -6,18 +6,28 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
+// go/keep-sorted start
+@use 'sass:map';
+// go/keep-sorted end
 // go/keep-sorted start
 @use '../../elevation/elevation';
+@use '../../tokens';
 // go/keep-sorted end
 
+$_md-sys-motion: tokens.md-sys-motion-values();
+
 @mixin styles() {
+  md-elevation {
+    // TODO: replace duration with animation tokens
+    transition-duration: 280ms;
+    transition-timing-function: map.get($_md-sys-motion, 'emphasized-easing');
+  }
+
   .md3-button {
     @include elevation.theme(
       (
-        // TODO: replace duration with animation tokens
-        'duration': 280ms,
         'level': var(--_container-elevation),
-        'shadow-color': var(--_container-shadow-color)
+        'shadow-color': var(--_container-shadow-color),
       )
     );
 

diff --git a/elevation/lib/_elevation.scss b/elevation/lib/_elevation.scss
@@ -29,8 +29,6 @@
 
     display: flex;
     pointer-events: none;
-    transition-duration: var(--_duration);
-    transition-timing-function: var(--_easing);
   }
 
   :host,
@@ -40,17 +38,17 @@
     border-radius: inherit;
     inset: 0;
     position: absolute;
+    transition-duration: inherit;
+    transition-timing-function: inherit;
   }
 
   .shadow::before,
   .shadow::after {
     content: '';
-    transition-duration: inherit;
     transition-property: box-shadow, opacity;
-    transition-timing-function: inherit;
   }
 
-  // Key box shadows
+  // Key box shadow
   .shadow::before {
     // level0: box-shadow: 0px 0px 0px 0px;
     // level1: box-shadow: 0px 1px 2px 0px;
@@ -96,7 +94,7 @@
     opacity: 0.3;
   }
 
-  // Ambient box shadows
+  // Ambient box shadow
   .shadow::after {
     // level0: box-shadow: 0px 0px 0px 0px;
     // level1: box-shadow: 0px 1px 3px 1px;
@@ -161,7 +159,7 @@
     // Convert to px.
     $spread: calc(1px * ($level1to4-spread + $level5-spread));
 
-    opacity: 0.15;
     box-shadow: 0px $y $blur $spread var(--_shadow-color);
+    opacity: 0.15;
   }
 }
diff --git a/fab/lib/_shared.scss b/fab/lib/_shared.scss
@@ -17,8 +17,11 @@
 @use '../../sass/shape';
 @use '../../sass/theme';
 @use '../../sass/touch-target';
+@use '../../tokens';
 // go/keep-sorted end
 
+$_md-sys-motion: tokens.md-sys-motion-values();
+
 @mixin styles() {
   :host {
     display: inline-flex;
@@ -65,10 +68,8 @@
 
     @include elevation.theme(
       (
-        // TODO: replace duration with animation tokens
-        'duration': 280ms,
         'level': var(--_container-elevation),
-        'shadow-color': var(--_container-shadow-color)
+        'shadow-color': var(--_container-shadow-color),
       )
     );
 
@@ -136,6 +137,9 @@
   }
 
   md-elevation {
+    // TODO: replace duration with animation tokens
+    transition-duration: 280ms;
+    transition-timing-function: map.get($_md-sys-motion, 'emphasized-easing');
     z-index: -1; // Place behind content
   }
 

diff --git a/navigationbar/lib/_navigation-bar.scss b/navigationbar/lib/_navigation-bar.scss
@@ -6,12 +6,17 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
+// go/keep-sorted start
+@use 'sass:map';
+// go/keep-sorted end
 // go/keep-sorted start
 @use '../../elevation/elevation';
 @use '../../sass/theme';
 @use '../../tokens';
 // go/keep-sorted end
 
+$_md-sys-motion: tokens.md-sys-motion-values();
+
 @mixin theme($tokens) {
   $tokens: theme.validate-theme(
     tokens.md-comp-navigation-bar-values(),
@@ -33,7 +38,6 @@
 
     @include elevation.theme(
       (
-        'duration': 280ms,
         'level': var(--_container-elevation),
         'shadow-color': var(--_container-shadow-color),
       )
@@ -57,6 +61,8 @@
   }
 
   md-elevation {
+    transition-duration: 280ms;
+    transition-timing-function: map.get($_md-sys-motion, 'emphasized-easing');
     z-index: 0;
   }
 }
diff --git a/slider/lib/_slider.scss b/slider/lib/_slider.scss
@@ -3,8 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// PUBLIC PROPERTIES
-
 // go/keep-sorted start
 @use 'sass:map';
 // go/keep-sorted end
@@ -16,19 +14,22 @@
 @use '../../sass/shape';
 @use '../../sass/theme';
 @use '../../sass/var';
-@use './tokens';
+@use '../../tokens';
+@use './tokens' as slider-tokens;
 // go/keep-sorted end
 
+$_md-sys-motion: tokens.md-sys-motion-values();
+
 @mixin theme($tokens) {
-  $tokens: tokens.remove-unsupported-tokens($tokens);
-  $tokens: theme.validate-theme(tokens.md-comp-slider-values(), $tokens);
+  $tokens: slider-tokens.remove-unsupported-tokens($tokens);
+  $tokens: theme.validate-theme(slider-tokens.md-comp-slider-values(), $tokens);
   $tokens: theme.create-theme-vars($tokens, 'slider');
 
   @include theme.emit-theme-vars($tokens);
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-slider-values();
+  $tokens: slider-tokens.md-comp-slider-values();
   $tokens: theme.create-theme-vars($tokens, 'slider');
 
   :host {
@@ -43,14 +44,18 @@
 
     @include elevation.theme(
       (
-        // TODO: replace duration with animation tokens
-        duration: 280ms,
         level: var(--_handle-elevation),
-        shadow-color: var(--_handle-shadow-color)
+        shadow-color: var(--_handle-shadow-color),
       )
     );
   }
 
+  md-elevation {
+    // TODO: replace duration with animation tokens
+    transition-duration: 280ms;
+    transition-timing-function: map.get($_md-sys-motion, 'emphasized-easing');
+  }
+
   @media (prefers-reduced-motion) {
     :host {
       --_handle-motion-duration: 0;
@@ -470,7 +475,7 @@
     @include focus-ring.theme(
       (
         offset: -2px,
-        shape: map.get(tokens.md-sys-shape-values(), corner-full),
+        shape: map.get(slider-tokens.md-sys-shape-values(), corner-full),
       )
     );
   }

diff --git a/tokens/_md-comp-elevation.scss b/tokens/_md-comp-elevation.scss
@@ -9,19 +9,15 @@
 // go/keep-sorted start
 @use './md-sys-color';
 @use './md-sys-elevation';
-@use './md-sys-motion';
 // go/keep-sorted end
 
 $_default: (
   'md-sys-color': md-sys-color.values-light(),
   'md-sys-elevation': md-sys-elevation.values(),
-  'md-sys-motion': md-sys-motion.values(),
 );
 
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
   @return (
-    'duration': if($exclude-hardcoded-values, null, 0s),
-    'easing': map.get($deps, 'md-sys-motion', 'easing-emphasized'),
     'level': map.get($deps, 'md-sys-elevation', 'level0'),
     'shadow-color': map.get($deps, 'md-sys-color', 'shadow')
   );