Skip to content

Commit

Permalink
Merge pull request #3569 from brave/native-button-styles
Browse files Browse the repository at this point in the history
Buttons get Brave style
  • Loading branch information
bsclifton authored Oct 15, 2019
2 parents c1dbff0 + 0401239 commit 22a8916
Show file tree
Hide file tree
Showing 8 changed files with 356 additions and 58 deletions.
23 changes: 23 additions & 0 deletions chromium_src/chrome/browser/ui/views/chrome_typography_provider.cc
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
// Copyright (c) 2019 The Brave Authors. All rights reserved.
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this file,
// you can obtain one at http://mozilla.org/MPL/2.0/.

#include "chrome/browser/ui/views/chrome_typography_provider.h"
#include "ui/gfx/color_palette.h"

namespace gfx {
const SkColor kBraveWhite = SkColorSetRGB(0xff, 0xff, 0xff);
const SkColor kBraveGrey800 = SkColorSetRGB(0x3b, 0x3e, 0x4f);
}

// Button text color
#define kGoogleGrey900 kBraveWhite
// Button text color (prominent, dark mode)
#define kGoogleBlue300 kBraveWhite
// // Button text color (prominent, light mode)
#define kGoogleBlue600 kBraveGrey800
#include "../../../../../chrome/browser/ui/views/chrome_typography_provider.cc"
#undef kGoogleGrey900
#undef kGoogleBlue300
#undef kGoogleBlue600
54 changes: 54 additions & 0 deletions chromium_src/ui/native_theme/common_theme.cc
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
// Copyright (c) 2019 The Brave Authors. All rights reserved.
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this file,
// you can obtain one at http://mozilla.org/MPL/2.0/.

#include "ui/native_theme/common_theme.h"

#define GetAuraColor GetAuraColor_ChromiumImpl
#include "../../../../ui/native_theme/common_theme.cc"
#undef GetAuraColor

namespace {
const SkColor kBraveBrandColor = SkColorSetRGB(0xff, 0x76, 0x54);
} // namespace


namespace ui {

SkColor GetAuraColor(NativeTheme::ColorId color_id,
const NativeTheme* base_theme,
NativeTheme::ColorScheme color_scheme) {
if (color_scheme == NativeTheme::ColorScheme::kDefault)
color_scheme = base_theme->GetSystemColorScheme();
const bool is_dark = (color_scheme == NativeTheme::ColorScheme::kDark);
switch (color_id) {
case NativeTheme::kColorId_ButtonEnabledColor:
return is_dark ? SK_ColorWHITE
: SkColorSetRGB(0x3b, 0x3e, 0x4f);
case NativeTheme::kColorId_ButtonHoverColor:
return kBraveBrandColor;
case NativeTheme::kColorId_ButtonPressedShade:
return SkColorSetA(kBraveBrandColor, is_dark ? 0x2b : 0x23);
case NativeTheme::kColorId_ProminentButtonColor:
case NativeTheme::kColorId_ProminentButtonFocusedColor:
return kBraveBrandColor;
case NativeTheme::kColorId_ProminentButtonDisabledColor:
return gfx::kGoogleGrey800;
case NativeTheme::kColorId_TextOnProminentButtonColor:
return SK_ColorWHITE;
case NativeTheme::kColorId_ButtonBorderColor:
return SkColorSetRGB(0xc2, 0xc4, 0xcf);
case NativeTheme::kColorId_LabelEnabledColor: {
SkColor button = GetAuraColor(NativeTheme::kColorId_ButtonEnabledColor,
base_theme);
return button;
}
default:
break;
}
return GetAuraColor_ChromiumImpl(color_id, base_theme, color_scheme);
}

} // namespace ui

19 changes: 13 additions & 6 deletions chromium_src/ui/native_theme/native_theme_mac.mm
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,20 @@

namespace ui {
bool ShouldOverride(NativeTheme::ColorId color_id) {
// This override only targets for old macOS like high sierra that doesn't
// support dark mode. We are using dark mode on old macOS but some below
// colors are fetched from system color and they are not dark mode aware.
// So, we should replace those colors with dark mode aware aura color.
if (@available(macOS 10.14, *))
// Always theme for these colors:
switch (color_id) {
case NativeTheme::kColorId_ButtonPressedShade:
return true;
default:
break;
}
// The rest of these overrides only targets for old macOS like high sierra
// that doesn't support dark mode. We are using dark mode on old macOS but
// some below colors are fetched from system color and they are not dark mode
// aware. So, we should replace those colors with dark mode aware aura color.
if (@available(macOS 10.14, *)) {
return false;

}
switch (color_id) {
case NativeTheme::kColorId_EnabledMenuItemForegroundColor:
case NativeTheme::kColorId_DisabledMenuItemForegroundColor:
Expand Down
170 changes: 170 additions & 0 deletions chromium_src/ui/views/controls/button/md_text_button.cc
Original file line number Diff line number Diff line change
@@ -0,0 +1,170 @@
// Copyright (c) 2019 The Brave Authors. All rights reserved.
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this file,
// you can obtain one at http://mozilla.org/MPL/2.0/.

#include "ui/views/controls/button/md_text_button.h"
#include "ui/views/view_class_properties.h"

// Override button creation to return BraveTextButton instances
#define Create Create_ChromiumImpl
#define CreateSecondaryUiBlueButton CreateSecondaryUiBlueButton_ChromiumImpl
#define CreateSecondaryUiButton CreateSecondaryUiButton_ChromiumImpl
#include "../../../../../ui/views/controls/button/md_text_button.cc"
#undef CreateSecondaryUiButton
#undef CreateSecondaryUiBlueButton
#undef Create

namespace {

constexpr SkColor kBraveBrandColor = SkColorSetRGB(0xff, 0x76, 0x54);

} // namespace

namespace views {

// Make visual changes to MdTextButton in line with Brave visual style:
// - More rounded rectangle (for regular border, focus ring and ink drop)
// - Different hover text and boder color for non-prominent button
// - Differenet hover bg color for prominent background
// - No shadow for prominent background
class BraveTextButton : public MdTextButton {
public:
using MdTextButton::MdTextButton;
// InkDrop
std::unique_ptr<InkDrop> CreateInkDrop() override;
std::unique_ptr<views::InkDropHighlight> CreateInkDropHighlight()
const override;

protected:
void OnPaintBackground(gfx::Canvas* canvas) override;
void OnBoundsChanged(const gfx::Rect& previous_bounds) override;

private:
void UpdateColors() override;
DISALLOW_COPY_AND_ASSIGN(BraveTextButton);
};

//
// These static CreateXYZ functions purely exist to make sure BraveTextButtons
// are created instead of MdTextButtons.
//

// static
std::unique_ptr<LabelButton> MdTextButton::CreateSecondaryUiButton(
ButtonListener* listener,
const base::string16& text) {
return MdTextButton::Create(listener, text, style::CONTEXT_BUTTON_MD);
}

// static
std::unique_ptr<LabelButton> MdTextButton::CreateSecondaryUiBlueButton(
ButtonListener* listener,
const base::string16& text) {
auto md_button =
MdTextButton::Create(listener, text, style::CONTEXT_BUTTON_MD);
md_button->SetProminent(true);
return md_button;
}

// static
std::unique_ptr<MdTextButton> MdTextButton::Create(ButtonListener* listener,
const base::string16& text,
int button_context) {
auto button = base::WrapUnique<BraveTextButton>(
new BraveTextButton(listener, button_context));
button->SetText(text);
button->SetCornerRadius(100);
button->SetFocusForPlatform();
return button;
}

void BraveTextButton::OnPaintBackground(gfx::Canvas* canvas) {
// Set brave-style hover colors
LabelButton::OnPaintBackground(canvas);
if (GetProminent() && (
hover_animation().is_animating() || state() == STATE_HOVERED)) {
constexpr SkColor normal_color = kBraveBrandColor;
constexpr SkColor hover_color = SkColorSetRGB(0xff, 0x97, 0x7d);
const SkAlpha alpha = hover_animation().CurrentValueBetween(0x00, 0xff);
const SkColor current_color = color_utils::AlphaBlend(
hover_color, normal_color, alpha);
cc::PaintFlags flags;
flags.setColor(current_color);
flags.setStyle(cc::PaintFlags::kFill_Style);
flags.setAntiAlias(true);
canvas->DrawRoundRect(gfx::RectF(GetLocalBounds()),
GetCornerRadius(), flags);
}
}

std::unique_ptr<InkDrop> BraveTextButton::CreateInkDrop() {
// We don't need a highlight on hover, the hover color
// is handled by the OnPaintBackground and brave-style doesn't
// have a shadow. Plus, it's very difficult (impossible?) to create
// a drop-shadow when clipping the ink drop to the rounded button.
std::unique_ptr<InkDrop> ink_drop = InkDropHostView::CreateInkDrop();
ink_drop->SetShowHighlightOnFocus(true);
ink_drop->SetShowHighlightOnHover(false);
return ink_drop;
}

std::unique_ptr<views::InkDropHighlight>
BraveTextButton::CreateInkDropHighlight() const {
// Blank ink drop highlight, not needed
const SkColor fill_color = SK_ColorTRANSPARENT;
gfx::RectF boundsF(GetLocalBounds());
return std::make_unique<InkDropHighlight>(
boundsF.size(),
GetCornerRadius(),
boundsF.CenterPoint(), fill_color);
}

void BraveTextButton::OnBoundsChanged(const gfx::Rect& previous_bounds) {
MdTextButton::OnBoundsChanged(previous_bounds);
// Provide a path for the focus border, and for clipping the inkdrop highlight
auto path = std::make_unique<SkPath>();
int radius = GetCornerRadius();
path->addRRect(SkRRect::MakeRectXY(RectToSkRect(GetLocalBounds()),
radius, radius));
SetProperty(kHighlightPathKey, path.release());
}

void BraveTextButton::UpdateColors() {
MdTextButton::UpdateColors();
if (GetProminent()) {
return;
}
// Override different text hover color
if (!color_utils::IsInvertedColorScheme()) {
SetTextColor(ButtonState::STATE_HOVERED, kBraveBrandColor);
SetTextColor(ButtonState::STATE_PRESSED, kBraveBrandColor);
}
// Override border color for hover on non-prominent
if (state() == ButtonState::STATE_PRESSED
|| state() == ButtonState::STATE_HOVERED) {
// First, get the same background fill color that MdTextButton does.
// It is undfortunate to copy these lines almost as-is. Consider otherwise
// patching it in via a #define.
const ui::NativeTheme* theme = GetNativeTheme();
SkColor bg_color =
theme->GetSystemColor(ui::NativeTheme::kColorId_DialogBackground);
if (GetBgColorOverride()) {
bg_color = *GetBgColorOverride();
}
if (state() == STATE_PRESSED) {
SkColor shade =
GetNativeTheme()->GetSystemColor(
ui::NativeTheme::kColorId_ButtonPressedShade);
bg_color = color_utils::GetResultingPaintColor(shade, bg_color);
}
// The only thing that differs for Brave is the stroke color
SkColor stroke_color = kBraveBrandColor;
SetBackground(
CreateBackgroundFromPainter(
Painter::CreateRoundRectWith1PxBorderPainter(
bg_color, stroke_color, GetCornerRadius())));
}
}

} // namespace views
35 changes: 35 additions & 0 deletions chromium_src/ui/views/controls/button/md_text_button.h
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
// Copyright (c) 2019 The Brave Authors. All rights reserved.
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this file,
// you can obtain one at http://mozilla.org/MPL/2.0/.

#ifndef BRAVE_CHROMIUM_SRC_UI_VIEWS_CONTROLS_BUTTON_MD_TEXT_BUTTON_H_
#define BRAVE_CHROMIUM_SRC_UI_VIEWS_CONTROLS_BUTTON_MD_TEXT_BUTTON_H_

#include "base/optional.h"
#include "ui/views/controls/button/label_button.h"
#include "ui/views/controls/focus_ring.h"
#include "ui/views/style/typography.h"

// Insert our own definition for `CreateXYZ`, and (in concert with the .cc)
// move chromium's definition to `CreateXYZ_ChromiumImpl`
#define CreateSecondaryUiButton CreateSecondaryUiButton_ChromiumImpl( \
ButtonListener* listener, \
const base::string16& text); \
static std::unique_ptr<LabelButton> CreateSecondaryUiButton
#define CreateSecondaryUiBlueButton CreateSecondaryUiBlueButton_ChromiumImpl( \
ButtonListener* listener, \
const base::string16& text); \
static std::unique_ptr<LabelButton> CreateSecondaryUiBlueButton
#define Create Create_ChromiumImpl( \
ButtonListener* listener, \
const base::string16& text, \
int button_context = style::CONTEXT_BUTTON_MD); \
static std::unique_ptr<MdTextButton> Create

#include "../../../../../ui/views/controls/button/md_text_button.h"
#undef CreateSecondaryUiButton
#undef CreateSecondaryUiBlueButton
#undef Create

#endif // BRAVE_CHROMIUM_SRC_UI_VIEWS_CONTROLS_BUTTON_MD_TEXT_BUTTON_H_
41 changes: 21 additions & 20 deletions chromium_src/ui/views/controls/focus_ring.cc
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at http://mozilla.org/MPL/2.0/. */
// Copyright (c) 2019 The Brave Authors. All rights reserved.
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this file,
// you can obtain one at http://mozilla.org/MPL/2.0/.

#include "base/no_destructor.h"
#include "ui/gfx/skia_util.h"
Expand All @@ -18,31 +19,31 @@
namespace {

class FocusRingTheme {
public:
SkColor GetSystemColor(int id) {
// At the time of implementation, only two Color IDs were possible.
// If this changes, consider overriding NativeTheme, or moving to
// ThemeProperties.
DCHECK(id == ui::NativeTheme::kColorId_FocusedBorderColor ||
id == ui::NativeTheme::kColorId_AlertSeverityHigh);
// Must be colors that are OK on dark or light bg since this is
// a very simplistic implementation.
switch (id) {
case ui::NativeTheme::kColorId_FocusedBorderColor:
return SkColorSetRGB(0xfb, 0x54, 0x2b);
case ui::NativeTheme::kColorId_AlertSeverityHigh:
return SkColorSetRGB(0xf4, 0x34, 0x05);
}
return gfx::kPlaceholderColor;
public:
SkColor GetSystemColor(int id) {
// At the time of implementation, only two Color IDs were possible.
// If this changes, consider overriding NativeTheme, or moving to
// ThemeProperties.
DCHECK(id == ui::NativeTheme::kColorId_FocusedBorderColor ||
id == ui::NativeTheme::kColorId_AlertSeverityHigh);
// Must be colors that are OK on dark or light bg since this is
// a very simplistic implementation.
switch (id) {
case ui::NativeTheme::kColorId_FocusedBorderColor:
return SkColorSetARGB(0x66, 0xfb, 0x54, 0x2b);
case ui::NativeTheme::kColorId_AlertSeverityHigh:
return SkColorSetRGB(0xf4, 0x34, 0x05);
}
return gfx::kPlaceholderColor;
}
};

FocusRingTheme* GetFocusRingTheme() {
static base::NoDestructor<FocusRingTheme> instance;
return instance.get();
}

}
} // namespace

#define GetNativeTheme GetFocusRingTheme
#include "../../../../ui/views/controls/focus_ring.cc"
Expand Down
14 changes: 14 additions & 0 deletions patches/ui-views-controls-button-md_text_button.h.patch
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
diff --git a/ui/views/controls/button/md_text_button.h b/ui/views/controls/button/md_text_button.h
index 02bb4d1677e79497e02eaa42a70fd3ece310f803..52e54a1ee6d5bbe1710a20ffde554ac82ff61db2 100644
--- a/ui/views/controls/button/md_text_button.h
+++ b/ui/views/controls/button/md_text_button.h
@@ -66,7 +66,9 @@ class VIEWS_EXPORT MdTextButton : public LabelButton {
MdTextButton(ButtonListener* listener, int button_context);

private:
+ friend class BraveTextButton;
void UpdatePadding();
+ virtual
void UpdateColors();

// True if this button uses prominent styling (blue fill, etc.).
Loading

0 comments on commit 22a8916

Please sign in to comment.