diff --git a/chromium_src/chrome/browser/ui/views/chrome_typography_provider.cc b/chromium_src/chrome/browser/ui/views/chrome_typography_provider.cc new file mode 100644 index 000000000000..45de20b5583e --- /dev/null +++ b/chromium_src/chrome/browser/ui/views/chrome_typography_provider.cc @@ -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 diff --git a/chromium_src/ui/native_theme/common_theme.cc b/chromium_src/ui/native_theme/common_theme.cc new file mode 100644 index 000000000000..1361a6665df4 --- /dev/null +++ b/chromium_src/ui/native_theme/common_theme.cc @@ -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 + diff --git a/chromium_src/ui/native_theme/native_theme_mac.mm b/chromium_src/ui/native_theme/native_theme_mac.mm index 10237783b08a..fcf888324eaf 100644 --- a/chromium_src/ui/native_theme/native_theme_mac.mm +++ b/chromium_src/ui/native_theme/native_theme_mac.mm @@ -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: diff --git a/chromium_src/ui/views/controls/button/md_text_button.cc b/chromium_src/ui/views/controls/button/md_text_button.cc new file mode 100644 index 000000000000..60c3568e0137 --- /dev/null +++ b/chromium_src/ui/views/controls/button/md_text_button.cc @@ -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 CreateInkDrop() override; + std::unique_ptr 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 MdTextButton::CreateSecondaryUiButton( + ButtonListener* listener, + const base::string16& text) { + return MdTextButton::Create(listener, text, style::CONTEXT_BUTTON_MD); +} + +// static +std::unique_ptr 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::Create(ButtonListener* listener, + const base::string16& text, + int button_context) { + auto button = base::WrapUnique( + 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 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 ink_drop = InkDropHostView::CreateInkDrop(); + ink_drop->SetShowHighlightOnFocus(true); + ink_drop->SetShowHighlightOnHover(false); + return ink_drop; +} + +std::unique_ptr + BraveTextButton::CreateInkDropHighlight() const { + // Blank ink drop highlight, not needed + const SkColor fill_color = SK_ColorTRANSPARENT; + gfx::RectF boundsF(GetLocalBounds()); + return std::make_unique( + 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(); + 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 diff --git a/chromium_src/ui/views/controls/button/md_text_button.h b/chromium_src/ui/views/controls/button/md_text_button.h new file mode 100644 index 000000000000..1a200fbbfc63 --- /dev/null +++ b/chromium_src/ui/views/controls/button/md_text_button.h @@ -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 CreateSecondaryUiButton +#define CreateSecondaryUiBlueButton CreateSecondaryUiBlueButton_ChromiumImpl( \ + ButtonListener* listener, \ + const base::string16& text); \ + static std::unique_ptr CreateSecondaryUiBlueButton +#define Create Create_ChromiumImpl( \ + ButtonListener* listener, \ + const base::string16& text, \ + int button_context = style::CONTEXT_BUTTON_MD); \ + static std::unique_ptr 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_ diff --git a/chromium_src/ui/views/controls/focus_ring.cc b/chromium_src/ui/views/controls/focus_ring.cc index 9002a9dcb0c0..6a4a35ace925 100644 --- a/chromium_src/ui/views/controls/focus_ring.cc +++ b/chromium_src/ui/views/controls/focus_ring.cc @@ -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" @@ -18,23 +19,23 @@ 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() { @@ -42,7 +43,7 @@ FocusRingTheme* GetFocusRingTheme() { return instance.get(); } -} +} // namespace #define GetNativeTheme GetFocusRingTheme #include "../../../../ui/views/controls/focus_ring.cc" diff --git a/patches/ui-views-controls-button-md_text_button.h.patch b/patches/ui-views-controls-button-md_text_button.h.patch new file mode 100644 index 000000000000..7d8c0d64109c --- /dev/null +++ b/patches/ui-views-controls-button-md_text_button.h.patch @@ -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.). diff --git a/ui/webui/resources/polymer_overriding.html b/ui/webui/resources/polymer_overriding.html index 4ed841bbc534..caacf5357009 100644 --- a/ui/webui/resources/polymer_overriding.html +++ b/ui/webui/resources/polymer_overriding.html @@ -18,53 +18,47 @@