Merge pull request #18577 from brave/brave_vpn_toolbar_button

Update vpn toolbar button

app/vector_icons/BUILD.gn

@@ -3,6 +3,7 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this file,
 # You can obtain one at https://mozilla.org/MPL/2.0/.
 
+import("//brave/components/brave_vpn/common/buildflags/buildflags.gni")
 import("//brave/components/speedreader/common/buildflags/buildflags.gni")
 import("//build/config/ui.gni")
 import("//components/vector_icons/vector_icons.gni")
@@ -25,7 +26,6 @@ aggregate_vector_icons("brave_vector_icons") {
     "open_in_tor.icon",
     "sidebar_toolbar_button.icon",
     "sidebar_toolbar_button_right.icon",
-    "vpn_indicator.icon",
     "web_discovery_infobar_close_button.icon",
   ]
 
@@ -72,6 +72,14 @@ aggregate_vector_icons("brave_vector_icons") {
     ]
   }
 
+  if (enable_brave_vpn_panel) {
+    sources += [
+      "vpn_indicator_error.icon",
+      "vpn_indicator_off.icon",
+      "vpn_indicator_on.icon",
+    ]
+  }
+
   if (enable_speedreader) {
     sources += [
       "brave_speedreader_graphic_book1.icon",

app/vector_icons/vpn_indicator_error.icon

@@ -0,0 +1,25 @@
+// Copyright (c) 2023 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 https://mozilla.org/MPL/2.0/.
+
+CANVAS_DIMENSIONS, 10,
+MOVE_TO, 6.25f, 0.93f,
+R_ARC_TO, 1.45f, 1.45f, 0, 0, 0, -2.51f, 0,
+LINE_TO, 0.2f, 7.09f,
+ARC_TO, 1.45f, 1.45f, 0, 0, 0, 1.45f, 9.26f,
+R_H_LINE_TO, 7.1f,
+R_ARC_TO, 1.45f, 1.45f, 0, 0, 0, 1.25f, -2.17f,
+LINE_TO, 6.25f, 0.93f,
+CLOSE,
+R_MOVE_TO, -1.31f, 0.87f,
+R_CUBIC_TO, 0.3f, 0, 0.54f, 0.24f, 0.54f, 0.54f,
+R_V_LINE_TO, 2.72f,
+R_ARC_TO, 0.54f, 0.54f, 0, 0, 1, -1.09f, 0,
+V_LINE_TO, 2.35f,
+R_CUBIC_TO, 0, -0.3f, 0.24f, -0.54f, 0.54f, -0.54f,
+CLOSE,
+R_MOVE_TO, 0.78f, 5.62f,
+R_ARC_TO, 0.78f, 0.78f, 0, 1, 1, -1.55f, 0,
+R_ARC_TO, 0.78f, 0.78f, 0, 0, 1, 1.55f, 0,
+CLOSE

app/vector_icons/vpn_indicator_off.icon

@@ -0,0 +1,16 @@
+// Copyright (c) 2023 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 https://mozilla.org/MPL/2.0/.
+
+CANVAS_DIMENSIONS, 10,
+MOVE_TO, 5, 10,
+ARC_TO, 5, 5, 0, 1, 0, 5, 0,
+R_ARC_TO, 5, 5, 0, 0, 0, 0, 10,
+CLOSE,
+MOVE_TO, 2.71f, 4.38f,
+R_ARC_TO, 0.63f, 0.63f, 0, 0, 0, 0, 1.25f,
+R_H_LINE_TO, 4.58f,
+R_ARC_TO, 0.63f, 0.63f, 0, 0, 0, 0, -1.25f,
+H_LINE_TO, 2.71f,
+CLOSE

app/vector_icons/vpn_indicator_on.icon

@@ -0,0 +1,21 @@
+// Copyright (c) 2023 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 https://mozilla.org/MPL/2.0/.
+
+CANVAS_DIMENSIONS, 10,
+MOVE_TO, 5, 0,
+R_ARC_TO, 5, 5, 0, 1, 0, 0, 10,
+ARC_TO, 5, 5, 0, 0, 0, 5, 0,
+CLOSE,
+R_MOVE_TO, 2.67f, 2.4f,
+R_CUBIC_TO, 0.26f, 0.19f, 0.32f, 0.57f, 0.14f, 0.84f,
+LINE_TO, 4.89f, 7.46f,
+R_ARC_TO, 0.57f, 0.57f, 0, 0, 1, -0.89f, 0.08f,
+R_LINE_TO, -1.75f, -1.8f,
+R_ARC_TO, 0.62f, 0.62f, 0, 0, 1, 0, -0.85f,
+R_ARC_TO, 0.57f, 0.57f, 0, 0, 1, 0.83f, 0,
+LINE_TO, 4.34f, 6.18f,
+LINE_TO, 6.86f, 2.54f,
+R_ARC_TO, 0.57f, 0.57f, 0, 0, 1, 0.81f, -0.14f,
+CLOSE

browser/ui/color/brave_color_id.h

@@ -65,9 +65,19 @@
 
 #if BUILDFLAG(ENABLE_BRAVE_VPN)
 #define BRAVE_VPN_COLOR_IDS                        \
-    E_CPONLY(kColorBraveVpnButtonBorder)           \
+    E_CPONLY(kColorBraveVpnButtonErrorBorder)      \
     E_CPONLY(kColorBraveVpnButtonTextConnected)    \
-    E_CPONLY(kColorBraveVpnButtonTextDisconnected)
+    E_CPONLY(kColorBraveVpnButtonTextDisconnected) \
+    E_CPONLY(kColorBraveVpnButtonTextError)    \
+    E_CPONLY(kColorBraveVpnButtonIconConnected)    \
+    E_CPONLY(kColorBraveVpnButtonIconDisconnected) \
+    E_CPONLY(kColorBraveVpnButtonIconError) \
+    E_CPONLY(kColorBraveVpnButtonBackgroundNormal) \
+    E_CPONLY(kColorBraveVpnButtonBackgroundHover)  \
+    E_CPONLY(kColorBraveVpnButtonErrorBackgroundNormal) \
+    E_CPONLY(kColorBraveVpnButtonErrorBackgroundHover)  \
+    E_CPONLY(kColorBraveVpnButtonIconInner) \
+    E_CPONLY(kColorBraveVpnButtonIconErrorInner)
 #else
 #define BRAVE_VPN_COLOR_IDS
 #endif

browser/ui/color/brave_color_mixer.cc

@@ -59,6 +59,62 @@ SkColor PickColorContrastingToToolbar(const ui::ColorProviderManager::Key& key,
   return color_utils::PickContrastingColor(color1, color2, toolbar_color);
 }
 
+#if BUILDFLAG(ENABLE_BRAVE_VPN)
+// If |exception_for_red| is true, pick contrast color for red toolbar color.
+SkColor PickSimilarColorToToolbar(const ui::ColorProviderManager::Key& key,
+                                  const ui::ColorMixer& mixer,
+                                  SkColor light_theme_color,
+                                  SkColor dark_theme_color) {
+  auto toolbar_color = mixer.GetResultColor(kColorToolbar);
+  SkColor custom_toolbar_color;
+  if (key.custom_theme &&
+      key.custom_theme->GetColor(ThemeProperties::COLOR_TOOLBAR,
+                                 &custom_toolbar_color)) {
+    toolbar_color = custom_toolbar_color;
+  }
+
+  // Give min constrast color.
+  return color_utils::IsDark(toolbar_color) ? dark_theme_color
+                                            : light_theme_color;
+}
+
+void AddBraveVpnColorMixer(ui::ColorProvider* provider,
+                           const ui::ColorProviderManager::Key& key) {
+  ui::ColorMixer& mixer = provider->AddMixer();
+
+  mixer[kColorBraveVpnButtonTextConnected] = {
+      PickColorContrastingToToolbar(key, mixer, SkColorSetRGB(0x1C, 0x1E, 0x26),
+                                    SkColorSetRGB(0xED, 0xEE, 0xF1))};
+  mixer[kColorBraveVpnButtonTextDisconnected] = {
+      PickColorContrastingToToolbar(key, mixer, SkColorSetRGB(0xDC, 0x1D, 0x3C),
+                                    SkColorSetRGB(0xEB, 0x63, 0x7A))};
+  mixer[kColorBraveVpnButtonTextError] = {kColorBraveVpnButtonTextDisconnected};
+  mixer[kColorBraveVpnButtonErrorBorder] = {
+      kColorBraveVpnButtonTextDisconnected};
+  mixer[kColorBraveVpnButtonIconDisconnected] = {
+      kColorBraveVpnButtonTextDisconnected};
+  mixer[kColorBraveVpnButtonIconError] = {kColorBraveVpnButtonIconDisconnected};
+  mixer[kColorBraveVpnButtonIconConnected] = {SkColorSetRGB(0x3F, 0xA4, 0x50)};
+
+  mixer[kColorBraveVpnButtonBackgroundNormal] = {PickSimilarColorToToolbar(
+      key, mixer, SkColorSetARGB(0x0D, 0x13, 0x16, 0x20),
+      SkColorSetARGB(0x59, 0x0A, 0x0B, 0x10))};
+  mixer[kColorBraveVpnButtonBackgroundHover] = {PickSimilarColorToToolbar(
+      key, mixer, SkColorSetARGB(0x14, 0x13, 0x16, 0x20),
+      SkColorSetARGB(0x80, 0x0A, 0x0B, 0x10))};
+  mixer[kColorBraveVpnButtonErrorBackgroundNormal] = {PickSimilarColorToToolbar(
+      key, mixer, SkColorSetARGB(0x31, 0xDC, 0x1D, 0x3C),
+      SkColorSetARGB(0x33, 0xEB, 0x63, 0x7A))};
+  mixer[kColorBraveVpnButtonErrorBackgroundHover] = {PickSimilarColorToToolbar(
+      key, mixer, SkColorSetARGB(0x40, 0xDC, 0x1D, 0x3C),
+      SkColorSetARGB(0x40, 0xEB, 0x63, 0x7A))};
+  mixer[kColorBraveVpnButtonIconInner] = {
+      PickSimilarColorToToolbar(key, mixer, SK_ColorWHITE, SK_ColorBLACK)};
+  mixer[kColorBraveVpnButtonIconErrorInner] = {PickSimilarColorToToolbar(
+      key, mixer, SK_ColorWHITE, SkColorSetRGB(0x0F, 0x17, 0x2A))};
+}
+#endif
+
 void AddChromeLightThemeColorMixer(ui::ColorProvider* provider,
                                    const ui::ColorProviderManager::Key& key) {
   ui::ColorMixer& mixer = provider->AddMixer();
@@ -269,15 +325,6 @@ void AddBraveLightThemeColorMixer(ui::ColorProvider* provider,
   mixer[kColorSpeedreaderToggleThumb] = {SkColorSetRGB(0x4C, 0x54, 0xD2)};
   mixer[kColorSpeedreaderToggleTrack] = {SkColorSetRGB(0xE1, 0xE2, 0xF6)};
 #endif
-#if BUILDFLAG(ENABLE_BRAVE_VPN)
-  mixer[kColorBraveVpnButtonBorder] = {SkColorSetRGB(0xD0, 0xD3, 0xD6)};
-  mixer[kColorBraveVpnButtonTextConnected] = {
-      PickColorContrastingToToolbar(key, mixer, SkColorSetRGB(0x21, 0x25, 0x29),
-                                    SkColorSetRGB(0xF0, 0xF2, 0xFF))};
-  mixer[kColorBraveVpnButtonTextDisconnected] = {
-      PickColorContrastingToToolbar(key, mixer, SkColorSetRGB(0x86, 0x8E, 0x96),
-                                    SkColorSetRGB(0xF0, 0xF2, 0xFF))};
-#endif
 
   mixer[kColorWebDiscoveryInfoBarBackground] = {
       SkColorSetRGB(0xFF, 0xFF, 0xFF)};
@@ -368,15 +415,6 @@ void AddBraveDarkThemeColorMixer(ui::ColorProvider* provider,
   mixer[kColorSpeedreaderToggleThumb] = {SkColorSetRGB(0x44, 0x36, 0xE1)};
   mixer[kColorSpeedreaderToggleTrack] = {SkColorSetRGB(0x76, 0x79, 0xB1)};
 #endif
-#if BUILDFLAG(ENABLE_BRAVE_VPN)
-  mixer[kColorBraveVpnButtonBorder] = {SkColorSetRGB(0x5E, 0x61, 0x75)};
-  mixer[kColorBraveVpnButtonTextConnected] = {
-      PickColorContrastingToToolbar(key, mixer, SkColorSetRGB(0x21, 0x25, 0x29),
-                                    SkColorSetRGB(0xF0, 0xF2, 0xFF))};
-  mixer[kColorBraveVpnButtonTextDisconnected] = {
-      PickColorContrastingToToolbar(key, mixer, SkColorSetRGB(0x86, 0x8E, 0x96),
-                                    SkColorSetRGB(0xF0, 0xF2, 0xFF))};
-#endif
 
   mixer[kColorWebDiscoveryInfoBarBackground] = {
       SkColorSetRGB(0x1A, 0x1C, 0x22)};
@@ -408,6 +446,9 @@ void AddBraveThemeColorMixer(ui::ColorProvider* provider,
   key.color_mode == ui::ColorProviderManager::ColorMode::kDark
       ? AddBraveDarkThemeColorMixer(provider, key)
       : AddBraveLightThemeColorMixer(provider, key);
+#if BUILDFLAG(ENABLE_BRAVE_VPN)
+  AddBraveVpnColorMixer(provider, key);
+#endif
 }
 
 void AddBravePrivateThemeColorMixer(ui::ColorProvider* provider,