fix(button): enable separate color and opacity tokens

PiperOrigin-RevId: 518329426
material-components · Mar 21, 2023 · f90aab2 · f90aab2
1 parent 324e856
commit f90aab2
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 33 deletions.
diff --git a/button/lib/_elevated-button.scss b/button/lib/_elevated-button.scss
@@ -49,7 +49,6 @@ $_custom-property-prefix: 'elevated-button';
 }
 
 @function _resolve-tokens($tokens) {
-  $tokens: shared.flatten-disabled-colors($tokens);
   $tokens: shared.remove-unsupported-tokens($tokens);
   @return $tokens;
 }
diff --git a/button/lib/_filled-button.scss b/button/lib/_filled-button.scss
@@ -48,7 +48,6 @@ $_custom-property-prefix: 'filled-button';
 }
 
 @function _resolve-tokens($tokens) {
-  $tokens: shared.flatten-disabled-colors($tokens);
   $tokens: shared.remove-unsupported-tokens($tokens);
   @return $tokens;
 }
diff --git a/button/lib/_icon.scss b/button/lib/_icon.scss
@@ -36,6 +36,7 @@
 
     .md3-button:disabled & {
       color: var(--_with-icon-disabled-icon-color);
+      opacity: var(--_with-icon-disabled-icon-opacity);
     }
   }
 }
diff --git a/button/lib/_outlined-button.scss b/button/lib/_outlined-button.scss
@@ -66,6 +66,7 @@ $_custom-property-prefix: 'outlined-button';
 
     .md3-button:disabled & {
       border-color: var(--_disabled-outline-color);
+      opacity: var(--_disabled-outline-opacity);
     }
   }
 
@@ -83,7 +84,6 @@ $_custom-property-prefix: 'outlined-button';
 }
 
 @function _resolve-tokens($tokens) {
-  $tokens: shared.flatten-disabled-colors($tokens);
   $tokens: shared.remove-unsupported-tokens($tokens);
   @return $tokens;
 }
diff --git a/button/lib/_shared.scss b/button/lib/_shared.scss
@@ -12,7 +12,6 @@
 // go/keep-sorted start
 @use '../../focus/focus-ring';
 @use '../../ripple/ripple';
-@use '../../sass/color';
 @use '../../sass/dom';
 @use '../../sass/shape';
 // go/keep-sorted end
@@ -70,13 +69,21 @@
     z-index: 0; // Place content on top of elevation and ripple
     block-size: var(--_container-height);
     font: var(--_label-text-type);
-    background-color: var(--_container-color);
     color: var(--_label-text-color);
     // TODO(b/181413732): Verify token below are named correctly
     padding-inline-start: var(--_spacing-leading);
     padding-inline-end: var(--_spacing-trailing);
     gap: 8px;
 
+    &::before {
+      // Background color. Separate node for disabled opacity styles.
+      background-color: var(--_container-color);
+      border-radius: inherit;
+      content: '';
+      inset: 0;
+      position: absolute;
+    }
+
     &::-moz-focus-inner {
       padding: 0;
       border: 0;
@@ -96,9 +103,14 @@
       outline: none;
     }
 
-    &:disabled {
-      background-color: var(--_disabled-container-color);
+    &:disabled .md3-button__label {
       color: var(--_disabled-label-text-color);
+      opacity: var(--_disabled-label-text-opacity);
+    }
+
+    &:disabled::before {
+      background-color: var(--_disabled-container-color);
+      opacity: var(--_disabled-container-opacity);
     }
 
     @media (forced-colors: active) {
@@ -116,6 +128,8 @@
     border-end-end-radius: var(--_container-shape-end-end);
   }
 
+  .md3-button::after,
+  .md3-button::before,
   md-elevation,
   .md3-button__ripple {
     z-index: -1; // Place behind content
@@ -137,30 +151,6 @@
   }
 }
 
-@function flatten-disabled-colors($tokens) {
-  @return color.join-color-and-opacity-pairs(
-    $tokens,
-    (
-      (
-        color-key: 'disabled-container-color',
-        opacity-key: 'disabled-container-opacity'
-      ),
-      (
-        color-key: 'disabled-label-text-color',
-        opacity-key: 'disabled-label-text-opacity'
-      ),
-      (
-        color-key: 'with-icon-disabled-icon-color',
-        opacity-key: 'with-icon-disabled-icon-opacity'
-      ),
-      (
-        color-key: 'disabled-outline-color',
-        opacity-key: 'disabled-outline-opacity'
-      )
-    )
-  );
-}
-
 @function remove-unsupported-tokens($tokens) {
   // b/193825150: Text and Outlined Button don't have `container-shadow-color`,
   // leaving `container-elevation` useless.

diff --git a/button/lib/_text-button.scss b/button/lib/_text-button.scss
@@ -56,7 +56,6 @@ $_custom-property-prefix: 'text-button';
     'disabled-container-color',
     'disabled-container-opacity'
   );
-  $tokens: shared.flatten-disabled-colors($tokens);
   $tokens: shared.remove-unsupported-tokens($tokens);
   @return $tokens;
 }
diff --git a/button/lib/_tonal-button.scss b/button/lib/_tonal-button.scss
@@ -48,7 +48,6 @@ $_custom-property-prefix: 'tonal-button';
 }
 
 @function _resolve-tokens($tokens) {
-  $tokens: shared.flatten-disabled-colors($tokens);
   $tokens: shared.remove-unsupported-tokens($tokens);
   @return $tokens;
 }