[CrOS] Fix system label button ripple effect on login/lock screen

Bug: 1160190
Change-Id: Ib9d2e1ac936137be379e8aa08dd9ac4b34414186
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2601486Reviewed-by: Roman Aleksandrov <raleksandrov@google.com>
Commit-Queue: Thomas Tellier <tellier@google.com>
Cr-Commit-Position: refs/heads/master@{#842037}

ash/login/ui/system_label_button.cc

@@ -9,6 +9,7 @@
 #include "ash/style/ash_color_provider.h"
 #include "ui/gfx/canvas.h"
 #include "ui/gfx/color_palette.h"
+#include "ui/gfx/color_utils.h"
 #include "ui/gfx/paint_vector_icon.h"
 #include "ui/views/controls/highlight_path_generator.h"
 
@@ -28,6 +29,11 @@ constexpr int kSystemButtonMaxLabelWidthDp =
     kSystemButtonIconSize - kSystemButtonImageLabelSpacing -
     2 * kSystemButtonBorderRadius;
 
+// Default base layer used for the bubble background, above which the system
+// label button lives.
+constexpr const AshColorProvider::BaseLayerType kBubbleLayerType =
+    AshColorProvider::BaseLayerType::kTransparent80;
+
 SkPath GetSystemButtonHighlightPath(const views::View* view) {
   gfx::Rect rect(view->GetLocalBounds());
   return SkPath().addRoundRect(gfx::RectToSkRect(rect),
@@ -108,8 +114,15 @@ void SystemLabelButton::SetAlertMode(bool alert_mode) {
       alert_mode ? AshColorProvider::ContentLayerType::kButtonLabelColorPrimary
                  : AshColorProvider::ContentLayerType::kButtonLabelColor));
 
+  // In default mode, this won't be the exact resulting color of the button as
+  // neither |background_color_| nor the color bubble below are fully opaque.
+  // Nevertheless, the result is visually satisfying and better than without
+  // applying any background color.
+  SkColor effective_background_color = color_utils::GetResultingPaintColor(
+      background_color_,
+      AshColorProvider::Get()->GetBaseLayerColor(kBubbleLayerType));
   const AshColorProvider::RippleAttributes ripple_attributes =
-      AshColorProvider::Get()->GetRippleAttributes(background_color_);
+      AshColorProvider::Get()->GetRippleAttributes(effective_background_color);
   SetInkDropBaseColor(ripple_attributes.base_color);
   SetInkDropVisibleOpacity(ripple_attributes.inkdrop_opacity);
   SetInkDropHighlightOpacity(ripple_attributes.highlight_opacity);

ash/login/ui/system_label_button.h

@@ -11,6 +11,8 @@
 namespace ash {
 
 // SystemLabelButton provides styled buttons with label for the login screen.
+// It is assumed that it lives in a login bubble, with a defined background;
+// ripple effects may be inappropriate for a different usage.
 class ASH_EXPORT SystemLabelButton : public views::LabelButton {
  public:
   enum class DisplayType { DEFAULT, ALERT_NO_ICON, ALERT_WITH_ICON };