From 7f50847bbd5ab64af2a5add15bacf0dbafad6d12 Mon Sep 17 00:00:00 2001
From: Elizabeth Mitchell <lizmitchell@google.com>
Date: Thu, 20 Oct 2022 11:33:51 -0700
Subject: [PATCH] chore(ripple): merge static/theme-styles

PiperOrigin-RevId: 482549484
---
 ripple/_ripple-theme.scss       | 13 ++++-
 ripple/lib/_md-comp-ripple.scss | 29 ++++++++++
 ripple/lib/_ripple-theme.scss   | 95 ---------------------------------
 ripple/lib/_ripple.scss         | 66 +++++++++++++++++++----
 ripple/lib/ripple-styles.scss   | 10 +---
 5 files changed, 98 insertions(+), 115 deletions(-)
 create mode 100644 ripple/lib/_md-comp-ripple.scss
 delete mode 100644 ripple/lib/_ripple-theme.scss

diff --git a/ripple/_ripple-theme.scss b/ripple/_ripple-theme.scss
index ba7bd954d..a504766f6 100644
--- a/ripple/_ripple-theme.scss
+++ b/ripple/_ripple-theme.scss
@@ -1,6 +1,15 @@
 //
-// Copyright 2021 Google LLC
+// Copyright 2022 Google LLC
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/ripple-theme' show values, theme;
+@use 'sass:map';
+@use '../sass/theme';
+@use './lib/md-comp-ripple';
+
+@mixin theme($theme) {
+  $theme: theme.validate-theme(md-comp-ripple.values(), $theme);
+  $theme: theme.create-theme-vars($theme, ripple);
+
+  @include theme.emit-theme-vars($theme);
+}
diff --git a/ripple/lib/_md-comp-ripple.scss b/ripple/lib/_md-comp-ripple.scss
new file mode 100644
index 000000000..9dde5779d
--- /dev/null
+++ b/ripple/lib/_md-comp-ripple.scss
@@ -0,0 +1,29 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use 'sass:map';
+@use '../../tokens';
+
+@function values($exclude-hardcoded-values: false) {
+  $state-values: tokens.md-sys-state-values($exclude-hardcoded-values);
+  $default-shape: map.get(
+    tokens.md-sys-shape-values($exclude-hardcoded-values),
+    corner-none
+  );
+  $default-color: if($exclude-hardcoded-values, null, black);
+  // add missing tokens
+  $values: map.merge(
+    $state-values,
+    (
+      state-layer-shape: $default-shape,
+      focus-state-layer-color: $default-color,
+      hover-state-layer-color: $default-color,
+      pressed-state-layer-color: $default-color,
+      dragged-state-layer-color: $default-color,
+    )
+  );
+
+  @return $values;
+}
diff --git a/ripple/lib/_ripple-theme.scss b/ripple/lib/_ripple-theme.scss
deleted file mode 100644
index d076454f8..000000000
--- a/ripple/lib/_ripple-theme.scss
+++ /dev/null
@@ -1,95 +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.
-
-@use 'sass:map';
-@use '../../sass/theme';
-@use '../../tokens';
-
-@function values($exclude-hardcoded-values: false) {
-  $state-values: tokens.md-sys-state-values($exclude-hardcoded-values);
-  $default-shape: map.get(
-    tokens.md-sys-shape-values($exclude-hardcoded-values),
-    corner-none
-  );
-  $default-color: if($exclude-hardcoded-values, null, black);
-  // add missing tokens
-  $values: map.merge(
-    $state-values,
-    (
-      state-layer-shape: $default-shape,
-      focus-state-layer-color: $default-color,
-      hover-state-layer-color: $default-color,
-      pressed-state-layer-color: $default-color,
-      dragged-state-layer-color: $default-color,
-    )
-  );
-
-  @return $values;
-}
-
-@mixin theme($theme) {
-  $theme: theme.validate-theme(values(), $theme);
-  $theme: theme.create-theme-vars($theme, ripple);
-
-  @include theme.emit-theme-vars($theme);
-}
-
-@mixin theme-styles($theme) {
-  $theme: theme.validate-theme-styles(values(), $theme);
-  $theme: theme.create-theme-vars($theme, ripple);
-
-  & {
-    @each $token, $value in $theme {
-      --_#{$token}: #{$value};
-    }
-  }
-
-  &.md3-ripple--unbounded {
-    $unbounded: (
-      state-layer-shape: map.get(tokens.md-sys-shape-values(), 'corner-full'),
-    );
-    $unbounded: theme.create-theme-vars($unbounded, ripple);
-
-    --_state-layer-shape: #{map.get($unbounded, 'state-layer-shape')};
-  }
-
-  & {
-    border-radius: var(--_state-layer-shape);
-  }
-
-  &::before {
-    background-color: var(--_hover-state-layer-color);
-  }
-
-  &::after {
-    background: radial-gradient(
-      closest-side,
-      #{var(--_pressed-state-layer-color)} max(calc(100% - 70px), 65%),
-      transparent 100%
-    );
-  }
-
-  &.md3-ripple--hovered::before {
-    background-color: var(--_hover-state-layer-color);
-    opacity: var(--_hover-state-layer-opacity);
-  }
-
-  &.md3-ripple--focused::before {
-    background-color: var(--_focus-state-layer-color);
-    opacity: var(--_focus-state-layer-opacity);
-  }
-
-  &.md3-ripple--pressed::after {
-    opacity: var(--_pressed-state-layer-opacity);
-  }
-
-  // TODO(b/230630968): create a forced-colors-mode mixin
-  @media screen and (forced-colors: active) {
-    display: none;
-  }
-}
diff --git a/ripple/lib/_ripple.scss b/ripple/lib/_ripple.scss
index 633b9d4e5..ab48bd17e 100644
--- a/ripple/lib/_ripple.scss
+++ b/ripple/lib/_ripple.scss
@@ -6,7 +6,28 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
-@mixin static-styles() {
+@use 'sass:map';
+@use '../../sass/theme';
+@use '../../tokens';
+@use './md-comp-ripple';
+
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme(md-comp-ripple.values(), $tokens);
+  $tokens: theme.create-theme-vars($tokens, ripple);
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+@mixin styles() {
+  $tokens: md-comp-ripple.values();
+  $tokens: theme.create-theme-vars($tokens, ripple);
+
+  * {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+
   :host {
     display: flex;
   }
@@ -24,6 +45,7 @@
   }
 
   .md3-ripple-surface {
+    border-radius: var(--_state-layer-shape);
     outline: none;
     -webkit-tap-highlight-color: transparent;
 
@@ -37,27 +59,53 @@
     }
 
     &::before {
+      background-color: var(--_hover-state-layer-color);
       transition: opacity 15ms linear, background-color 15ms linear;
       inset: 0;
     }
 
     &::after {
       // press ripple fade-out
+      background: radial-gradient(
+        closest-side,
+        var(--_pressed-state-layer-color) max(calc(100% - 70px), 65%),
+        transparent 100%
+      );
       transition: opacity 375ms linear;
       transform-origin: center center;
     }
   }
 
-  .md3-ripple--focused {
-    &::before {
-      transition-duration: 75ms;
-    }
+  .md3-ripple--hovered::before {
+    background-color: var(--_hover-state-layer-color);
+    opacity: var(--_hover-state-layer-opacity);
   }
 
-  .md3-ripple--pressed {
-    &::after {
-      // press ripple fade-in
-      transition-duration: 105ms;
+  .md3-ripple--focused::before {
+    background-color: var(--_focus-state-layer-color);
+    opacity: var(--_focus-state-layer-opacity);
+    transition-duration: 75ms;
+  }
+
+  .md3-ripple--pressed::after {
+    // press ripple fade-in
+    opacity: var(--_pressed-state-layer-opacity);
+    transition-duration: 105ms;
+  }
+
+  .md3-ripple--unbounded {
+    $unbounded: (
+      state-layer-shape: map.get(tokens.md-sys-shape-values(), 'corner-full'),
+    );
+    $unbounded: theme.create-theme-vars($unbounded, ripple);
+
+    --_state-layer-shape: #{map.get($unbounded, 'state-layer-shape')};
+  }
+
+  // TODO(b/230630968): create a forced-colors-mode mixin
+  @media screen and (forced-colors: active) {
+    :host {
+      display: none;
     }
   }
 }
diff --git a/ripple/lib/ripple-styles.scss b/ripple/lib/ripple-styles.scss
index 243fac99a..63e2235a4 100644
--- a/ripple/lib/ripple-styles.scss
+++ b/ripple/lib/ripple-styles.scss
@@ -3,14 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 @use './ripple';
-@use './ripple-theme';
 
-@include ripple.static-styles();
-
-.md3-ripple-surface {
-  @include ripple-theme.theme-styles(ripple-theme.values());
-}
+@include ripple.styles;