Update to sidebar header styles for upcoming wallet as sidepanel

browser/ui/color/brave_color_id.h

@@ -63,8 +63,6 @@
     E_CPONLY(kColorSidebarButtonPressed)                      \
     E_CPONLY(kColorSidebarItemDragIndicator)                  \
     E_CPONLY(kColorSidebarSeparator)                          \
-    E_CPONLY(kColorSidebarPanelHeaderSeparator)               \
-    E_CPONLY(kColorSidebarPanelHeaderBackground)              \
     E_CPONLY(kColorSidebarPanelHeaderTitle)                   \
     E_CPONLY(kColorSidebarPanelHeaderButton)                  \
     E_CPONLY(kColorSidebarPanelHeaderButtonHovered)

browser/ui/color/brave_color_mixer.cc

@@ -581,9 +581,7 @@ void AddBraveThemeColorMixer(ui::ColorProvider* provider,
   mixer[kColorIconBase] = {nala::kColorIconDefault};
   mixer[kColorBookmarkBarInstructionsLink] = {nala::kColorTextInteractive};
   mixer[kColorSearchConversionBannerTypeBackground] = {nala::kColorBlue10};
-  mixer[kColorSidebarPanelHeaderSeparator] = {nala::kColorDividerSubtle};
   mixer[kColorSearchConversionCloseButton] = {nala::kColorIconDefault};
-  mixer[kColorSidebarPanelHeaderBackground] = {nala::kColorContainerBackground};
   mixer[kColorSidebarPanelHeaderTitle] = {nala::kColorTextPrimary};
   mixer[kColorSidebarPanelHeaderButton] = {nala::kColorIconDefault};
   mixer[kColorSidebarPanelHeaderButtonHovered] = {nala::kColorNeutral60};
@@ -620,8 +618,6 @@ void AddBravePrivateThemeColorMixer(ui::ColorProvider* provider,
   mixer[kColorToolbarButtonActivated] = {nala::kColorPrimitivePrivateWindow80};
   mixer[kColorSidebarButtonPressed] = {kColorToolbarButtonActivated};
 
-  mixer[kColorSidebarPanelHeaderSeparator] = {nala::kColorPrimitiveNeutral20};
-  mixer[kColorSidebarPanelHeaderBackground] = {nala::kColorPrimitiveNeutral5};
   mixer[kColorSidebarPanelHeaderTitle] = {nala::kColorPrimitiveNeutral90};
   mixer[kColorSidebarPanelHeaderButton] = {nala::kColorPrimitiveNeutral90};
   mixer[kColorSidebarPanelHeaderButtonHovered] = {

browser/ui/color/brave_material_side_panel_color_mixer.cc

@@ -5,6 +5,7 @@
 
 #include "brave/browser/ui/color/brave_material_side_panel_color_mixer.h"
 
+#include "brave/ui/color/nala/nala_color_id.h"
 #include "chrome/browser/ui/color/chrome_color_id.h"
 #include "ui/color/color_provider.h"
 #include "ui/color/color_recipe.h"
@@ -25,6 +26,5 @@ void AddBraveMaterialSidePanelColorMixer(ui::ColorProvider* provider,
   mixer[kColorSidePanelScrollbarThumb] = {
       is_dark ? SkColorSetRGB(0x58, 0x58, 0x58)
               : SkColorSetRGB(0xB4, 0xB4, 0xB4)};
-  mixer[kColorSidePanelContentBackground] = {is_dark ? gfx::kGoogleGrey900
-                                                     : SK_ColorWHITE};
+  mixer[kColorSidePanelContentBackground] = {nala::kColorContainerBackground};
 }

browser/ui/views/side_panel/brave_bookmarks_side_panel_view.cc

@@ -10,9 +10,9 @@
 #include "base/check_op.h"
 #include "base/memory/raw_ref.h"
 #include "brave/browser/ui/color/brave_color_id.h"
+#include "brave/ui/color/nala/nala_color_id.h"
 #include "brave/components/vector_icons/vector_icons.h"
 #include "brave/grit/brave_generated_resources.h"
-#include "brave/grit/brave_theme_resources.h"
 #include "chrome/browser/profiles/profile.h"
 #include "chrome/browser/ui/browser_window/public/browser_window_features.h"
 #include "chrome/browser/ui/browser_window/public/browser_window_interface.h"
@@ -29,12 +29,10 @@
 #include "ui/base/metadata/metadata_header_macros.h"
 #include "ui/base/metadata/metadata_impl_macros.h"
 #include "ui/base/models/image_model.h"
-#include "ui/base/resource/resource_bundle.h"
 #include "ui/gfx/font_list.h"
 #include "ui/gfx/geometry/insets.h"
 #include "ui/views/background.h"
 #include "ui/views/controls/button/image_button.h"
-#include "ui/views/controls/image_view.h"
 #include "ui/views/controls/label.h"
 #include "ui/views/controls/separator.h"
 #include "ui/views/layout/flex_layout.h"
@@ -49,28 +47,22 @@ class BookmarksSidePanelHeaderView : public views::View {
  public:
   explicit BookmarksSidePanelHeaderView(SidePanelEntryScope& scope) {
     constexpr int kHeaderInteriorMargin = 16;
+    SetBackground(
+        views::CreateSolidBackground(nala::kColorPageBackground));
     SetLayoutManager(std::make_unique<views::FlexLayout>())
         ->SetOrientation(views::LayoutOrientation::kHorizontal)
         .SetInteriorMargin(gfx::Insets(kHeaderInteriorMargin))
         .SetMainAxisAlignment(views::LayoutAlignment::kStart)
         .SetCrossAxisAlignment(views::LayoutAlignment::kCenter);
 
-    ui::ResourceBundle& rb = ui::ResourceBundle::GetSharedInstance();
-    auto* header_image = AddChildView(
-        std::make_unique<views::ImageView>(ui::ImageModel::FromImageSkia(
-            *rb.GetImageSkiaNamed(IDR_SIDEBAR_BOOKMARKS_PANEL_HEADER))));
-    constexpr int kSpacingBetweenHeaderImageAndLabel = 8;
-    header_image->SetProperty(
-        views::kMarginsKey,
-        gfx::Insets::TLBR(0, 0, 0, kSpacingBetweenHeaderImageAndLabel));
-    header_image->SetProperty(
-        views::kFlexBehaviorKey,
-        views::FlexSpecification(views::MinimumFlexSizeRule::kPreferred,
-                                 views::MaximumFlexSizeRule::kPreferred));
-
     auto* header_label = AddChildView(std::make_unique<views::Label>(
         l10n_util::GetStringUTF16(IDS_BOOKMARK_MANAGER_TITLE)));
-    header_label->SetFontList(gfx::FontList("Poppins, Semi-Bold 16px"));
+    const int size_delta =
+        16 - views::Label::GetDefaultFontList().GetFontSize();
+    header_label->SetFontList(
+        views::Label::GetDefaultFontList()
+            .DeriveWithSizeDelta(size_delta)
+            .DeriveWithWeight(gfx::Font::Weight::SEMIBOLD));
     header_label->SetEnabledColor(kColorSidebarPanelHeaderTitle);
     header_label->SetAutoColorReadabilityEnabled(false);
     auto* spacer = AddChildView(std::make_unique<views::View>());
@@ -100,7 +92,7 @@ class BookmarksSidePanelHeaderView : public views::View {
                                        kHeaderButtonSize));
 
     auto* separator = AddChildView(std::make_unique<views::Separator>());
-    separator->SetColorId(kColorSidebarPanelHeaderSeparator);
+    separator->SetColorId(nala::kColorDividerSubtle);
     separator->SetPreferredLength(kHeaderButtonSize);
     constexpr int kSeparatorHorizontalSpacing = 12;
     separator->SetProperty(views::kMarginsKey,
@@ -154,8 +146,6 @@ BraveBookmarksSidePanelView::BraveBookmarksSidePanelView(
   SetLayoutManager(std::make_unique<views::FlexLayout>())
       ->SetOrientation(views::LayoutOrientation::kVertical);
   AddChildView(std::make_unique<BookmarksSidePanelHeaderView>(scope));
-  AddChildView(std::make_unique<views::Separator>())
-      ->SetColorId(kColorSidebarPanelHeaderSeparator);
 
   // Reuse upstream's bookmarks panel webui.
   auto* web_view = AddChildView(scope.GetBrowserWindowInterface()

browser/ui/views/side_panel/brave_read_later_side_panel_view.cc

@@ -9,9 +9,9 @@
 
 #include "base/functional/bind.h"
 #include "brave/browser/ui/color/brave_color_id.h"
+#include "brave/ui/color/nala/nala_color_id.h"
 #include "brave/components/vector_icons/vector_icons.h"
 #include "brave/grit/brave_generated_resources.h"
-#include "brave/grit/brave_theme_resources.h"
 #include "chrome/browser/ui/browser_window/public/browser_window_features.h"
 #include "chrome/browser/ui/browser_window/public/browser_window_interface.h"
 #include "chrome/browser/ui/tabs/tab_strip_model.h"
@@ -21,14 +21,11 @@
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/base/metadata/metadata_header_macros.h"
 #include "ui/base/metadata/metadata_impl_macros.h"
-#include "ui/base/resource/resource_bundle.h"
 #include "ui/gfx/font_list.h"
 #include "ui/gfx/geometry/insets.h"
 #include "ui/views/background.h"
 #include "ui/views/controls/button/image_button.h"
-#include "ui/views/controls/image_view.h"
 #include "ui/views/controls/label.h"
-#include "ui/views/controls/separator.h"
 #include "ui/views/layout/flex_layout.h"
 #include "ui/views/layout/layout_types.h"
 
@@ -41,29 +38,23 @@ class ReadLaterSidePanelHeaderView : public views::View {
  public:
   explicit ReadLaterSidePanelHeaderView(SidePanelEntryScope& scope) {
     constexpr int kHeaderInteriorMargin = 16;
+    SetBackground(
+        views::CreateSolidBackground(nala::kColorPageBackground));
     SetLayoutManager(std::make_unique<views::FlexLayout>())
         ->SetOrientation(views::LayoutOrientation::kHorizontal)
         .SetInteriorMargin(gfx::Insets(kHeaderInteriorMargin))
         .SetMainAxisAlignment(views::LayoutAlignment::kStart)
         .SetCrossAxisAlignment(views::LayoutAlignment::kCenter);
 
-    ui::ResourceBundle& rb = ui::ResourceBundle::GetSharedInstance();
-    auto* header_image = AddChildView(
-        std::make_unique<views::ImageView>(ui::ImageModel::FromImageSkia(
-            *rb.GetImageSkiaNamed(IDR_SIDEBAR_READING_LIST_PANEL_HEADER))));
-    constexpr int kSpacingBetweenHeaderImageAndLabel = 8;
-    header_image->SetProperty(
-        views::kMarginsKey,
-        gfx::Insets::TLBR(0, 0, 0, kSpacingBetweenHeaderImageAndLabel));
-    header_image->SetProperty(
-        views::kFlexBehaviorKey,
-        views::FlexSpecification(views::MinimumFlexSizeRule::kPreferred,
-                                 views::MaximumFlexSizeRule::kPreferred));
-
     auto* header_label =
         AddChildView(std::make_unique<views::Label>(l10n_util::GetStringUTF16(
             IDS_SIDEBAR_READING_LIST_PANEL_HEADER_TITLE)));
-    header_label->SetFontList(gfx::FontList("Poppins, Semi-Bold 16px"));
+    const int size_delta =
+        16 - views::Label::GetDefaultFontList().GetFontSize();
+    header_label->SetFontList(
+        views::Label::GetDefaultFontList()
+            .DeriveWithSizeDelta(size_delta)
+            .DeriveWithWeight(gfx::Font::Weight::SEMIBOLD));
     header_label->SetEnabledColor(kColorSidebarPanelHeaderTitle);
     header_label->SetAutoColorReadabilityEnabled(false);
 
@@ -125,8 +116,6 @@ BraveReadLaterSidePanelView::BraveReadLaterSidePanelView(
   SetLayoutManager(std::make_unique<views::FlexLayout>())
       ->SetOrientation(views::LayoutOrientation::kVertical);
   AddChildView(std::make_unique<ReadLaterSidePanelHeaderView>(scope));
-  AddChildView(std::make_unique<views::Separator>())
-      ->SetColorId(kColorSidebarPanelHeaderSeparator);
   auto* web_view = AddChildView(std::make_unique<ReadLaterSidePanelWebView>(
       profile, tab_strip_model, scope, std::move(close_cb)));
   web_view->SetProperty(

browser/ui/views/side_panel/brave_side_panel_view_base.cc

@@ -5,7 +5,7 @@
 
 #include "brave/browser/ui/views/side_panel/brave_side_panel_view_base.h"
 
-#include "brave/browser/ui/color/brave_color_id.h"
+#include "brave/ui/color/nala/nala_color_id.h"
 #include "chrome/browser/ui/views/side_panel/side_panel_content_proxy.h"
 #include "chrome/browser/ui/views/side_panel/side_panel_util.h"
 #include "ui/base/metadata/metadata_impl_macros.h"
@@ -23,8 +23,7 @@ BraveSidePanelViewBase::BraveSidePanelViewBase() {
   // NOTE: If we use our own reading list page and it has loading spinner, maybe
   // we can set `true` here.
   SidePanelUtil::GetSidePanelContentProxy(this)->SetAvailable(false);
-  SetBackground(
-      views::CreateSolidBackground(kColorSidebarPanelHeaderBackground));
+  SetBackground(views::CreateSolidBackground(nala::kColorContainerBackground));
 }
 
 BraveSidePanelViewBase::~BraveSidePanelViewBase() = default;

browser/ui/views/side_panel/side_panel.cc

@@ -13,7 +13,7 @@
 #include "base/check_op.h"
 #include "base/functional/bind.h"
 #include "base/i18n/rtl.h"
-#include "brave/browser/ui/color/brave_color_id.h"
+#include "brave/ui/color/nala/nala_color_id.h"
 #include "brave/browser/ui/views/frame/brave_browser_view.h"
 #include "brave/browser/ui/views/frame/brave_contents_view_util.h"
 #include "brave/browser/ui/views/side_panel/side_panel_resize_widget.h"
@@ -149,7 +149,7 @@ void SidePanel::UpdateBorder() {
 
     shadow_ = BraveContentsViewUtil::CreateShadow(this);
     SetBackground(
-        views::CreateSolidBackground(kColorSidebarPanelHeaderBackground));
+        views::CreateSolidBackground(nala::kColorPageBackground));
 
     return;
   }

chromium_src/chrome/browser/resources/side_panel/customize_chrome/app.css

@@ -53,6 +53,17 @@ sp-heading h2[slot='heading'] {
   line-height: var(--leo-typography-line-height-button-small);
 }
 
+.sp-card,
+customize-chrome-appearance,
+customize-chrome-shortcuts,
+customize-chrome-cards,
+customize-chrome-categories,
+customize-chrome-themes,
+customize-chrome-wallpaper-search,
+customize-chrome-toolbar {
+  max-width: none;
+}
+
 #shortcuts {
   display: none;
 }

chromium_src/chrome/browser/resources/side_panel/customize_chrome/customize_toolbar/toolbar.css

@@ -10,6 +10,14 @@
  * #include=toolbar-chromium
  * #css_wrapper_metadata_end */
 
+.sp-card {
+  max-width: none;
+}
+
+#pinningSelectionCard {
+  max-width: none;
+}
+
 #heading {
   height: 60px;
 }

chromium_src/ui/webui/resources/cr_components/theme_color_picker/theme_color_picker.css

@@ -10,6 +10,17 @@
  * #include=theme-color-picker-chromium
  * #css_wrapper_metadata_end */
 
+cr-grid {
+  --cr-grid-columns: auto-fill !important;
+  --cr-column-width: minmax(75px, 80px);
+  --cr-grid-width: 100%;
+  --cr-grid-justify-content: center;
+}
+
+cr-theme-color {
+  max-width: 75px;
+}
+
 /* when we remove the element entirely, we'll get regression from it.
   so Instead of removing the element, just hides it. */
 #defaultColor {

chromium_src/ui/webui/resources/cr_elements/cr_grid/cr_grid.css

@@ -0,0 +1,21 @@
+/* Copyright (c) 2025 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/. */
+
+/* This override adds a CSS custom property for grid justify-content to allow
+   centering grid tracks from parent components.
+
+   The 'revert' fallback ensures that when the custom property is not set,
+   justify-content reverts to the browser default (start). */
+
+/* #css_wrapper_metadata_start
+ * #type=style-lit
+ * #import=./cr_grid-chromium.css.js
+ * #scheme=relative
+ * #include=cr-grid-chromium
+ * #css_wrapper_metadata_end */
+
+#grid {
+  justify-content: var(--cr-grid-justify-content, revert);
+}

components/ai_chat/resources/page/ai_chat_ui.html

@@ -23,7 +23,7 @@
     <style>
       @media (prefers-color-scheme: dark) {
         body {
-          background-color: #111114; /* --leo-color-container-background optimization */
+          background-color: var(--leo-color-container-background);
         }
       }
       #mountPoint {

components/ai_chat/resources/page/components/header/index.tsx

@@ -22,7 +22,6 @@ import {
 
 const Logo = ({ isPremium }: { isPremium: boolean }) => (
   <div className={styles.logo}>
-    <Icon name='product-brave-leo' />
     <div className={styles.logoTitle}>Leo AI</div>
     {isPremium && <div className={styles.badgePremium}>PREMIUM</div>}
   </div>

components/ai_chat/resources/page/components/header/style.module.scss

@@ -5,7 +5,7 @@
 
 .header {
   padding: var(--leo-spacing-m) var(--leo-spacing-xl);
-  border-bottom: 1px solid var(--leo-color-divider-subtle);
+  background-color: var(--leo-color-page-background);
   display: flex;
   align-items: center;
   justify-content: start;
@@ -28,14 +28,6 @@
 }
 
 .logo {
-  --leo-icon-size: 20px;
-  --leo-icon-color: linear-gradient(
-    314.42deg,
-    #fa7250 8.49%,
-    #ff1893 43.72%,
-    #a78aff 99.51%
-  );
-
   display: flex;
   align-items: center;
   gap: var(--leo-spacing-m);
@@ -46,8 +38,6 @@
 .logoTitle {
   font: var(--leo-font-heading-h4);
   color: var(--leo-color-text-primary);
-  font-size: 19px;
-  line-height: 1;
 }
 
 .badgePremium {

components/playlist/content/browser/resources/components/app.v1.tsx

@@ -26,7 +26,7 @@ import { color, spacing } from '@brave/leo/tokens/css/variables'
 
 const AppContainer = styled.div<{ isPlaylistPlayerPage: boolean }>`
   --header-height: ${({ isPlaylistPlayerPage }) =>
-    isPlaylistPlayerPage ? '74px' : '56px'};
+    isPlaylistPlayerPage ? '74px' : '60px'};
 `
 
 const StickyArea = styled.div<{ position: 'top' | 'bottom' }>`