Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Nala]: Remove redundant overrides, to improve theming support. #25337

Merged
merged 10 commits into from
Sep 5, 2024

Conversation

fallaciousreasoning
Copy link
Contributor

@fallaciousreasoning fallaciousreasoning commented Aug 27, 2024

Resolves brave/brave-browser#40689

Notes:

I'm not sure whether to merge this as three separate PRs

  1. Remove Chromium overrides
  2. Enable Tri-Color picker
  3. Change default theme

or as one. For now, the three commits are in one PR so @aguscruiz can more easily see how all the changes are going to work together.

Submitter Checklist:

  • I confirm that no security/privacy review is needed and no other type of reviews are needed, or that I have requested them
  • There is a ticket for my issue
  • Used Github auto-closing keywords in the PR description above
  • Wrote a good PR/commit description
  • Squashed any review feedback or "fixup" commits before merge, so that history is a record of what happened in the repo, not your PR
  • Added appropriate labels (QA/Yes or QA/No; release-notes/include or release-notes/exclude; OS/...) to the associated issue
  • Checked the PR locally:
    • npm run test -- brave_browser_tests, npm run test -- brave_unit_tests wiki
    • npm run presubmit wiki, npm run gn_check, npm run tslint
  • Ran git rebase master (if needed)

Reviewer Checklist:

  • A security review is not needed, or a link to one is included in the PR description
  • New files have MPL-2.0 license header
  • Adequate test coverage exists to prevent regressions
  • Major classes, functions and non-trivial code blocks are well-commented
  • Changes in component dependencies are properly reflected in gn
  • Code follows the style guide
  • Test plan is specified in PR before merging

After-merge Checklist:

Test Plan:

  1. If you select a dual color theme and then upgrade to this PR, the theme should still be active
  2. After this PR, only tri-color themes should be visible in brave://settings/manageProfile
  3. The new themes should have a light/dark mode (which are different, unlike the old dual color themes)
  4. The new light/dark theme should be largely similar to the existing light/dark theme
  5. Vertical tabs should look fine in light/dark mode
  6. Horizontal tabs should look fine in light/dark mode
  7. Omnibox should still have hover/selected state when open
  8. If you're editing text in the omnibox and close it, the omnibox should look the same as when its just showing the URL (unlike in Chromium)

@fallaciousreasoning
Copy link
Contributor Author

@simonhong mind taking a look at the color changes? I'll go over this with @aguscruiz tomorrow

@simonhong
Copy link
Member

simonhong commented Aug 27, 2024

This happened again :)
image

and different border color around side panel
image
and vertical tab also has border color.
image

Different icon color of activated toolbar(also active side panel item)
image

ui/color/brave_ref_color_mixer.cc Outdated Show resolved Hide resolved
chromium_src/ui/color/color_mixers.cc Outdated Show resolved Hide resolved
@aguscruiz
Copy link
Collaborator

aguscruiz commented Aug 27, 2024

For the Sidebar issue, having an outline, this is a place where we differ from chromium.
We don't have a divider between the content and the toolbar. We also don't have a divider between sidebar and content.

I need to see if we want to add an outline in the panel content's frame, to separate them from the chrome background (which is now gonna be the same color). But let me get back to you on that. In the meantime, we should remove those dividers. They won't work with our window padding

image

chromium_src/ui/color/ref_color_mixer.h Outdated Show resolved Hide resolved
chromium_src/ui/color/ui_color_mixer.cc Show resolved Hide resolved
chromium_src/ui/color/color_mixers.cc Outdated Show resolved Hide resolved
@fallaciousreasoning fallaciousreasoning requested a review from a team as a code owner August 28, 2024 23:40
@github-actions github-actions bot added the CI/storybook-url Deploy storybook and provide a unique URL for each build label Aug 28, 2024
@fallaciousreasoning
Copy link
Contributor Author

fallaciousreasoning commented Aug 29, 2024

@aguscruiz we have a separator between vertical tabs and the content area still - seems like we have this in release too but its a bit more subtle:
image

Fixed separator @simonhong
image

@aguscruiz I think I've improved the dark mode with a pretty minimal change, which hopefully @rebron will like:
image
image
image
image

Hover states are pretty subtle, unfortunately (see last screenshot)

The neutral colors have a slightly redder tint than our existing ones, but I can try and use our Nala ones, if you like @aguscruiz?

@simonhong
Copy link
Member

Seeing some regressions from side panel's header background color.
In private window with light mode,
image

In dark mode, header color & bg colors are different.
image

I think we need to set bg color explicitely to ReadLaterSidePanelHeaderView and BookmarksSidePanelHeaderView.

and playlist bg color is different with above others. Not sure which color should be used in the panel.
image

@fallaciousreasoning
Copy link
Contributor Author

fallaciousreasoning commented Aug 29, 2024

@simonhong I'm going to fix those in a separate PR, because I think that will need to be uplifted to 1.70.x
brave/brave-browser#40749

just checked, it's not in 1.70.x but it is in current Nightly

@simonhong
Copy link
Member

@simonhong I'm going to fix those in a separate PR, because I think that will need to be uplifted to 1.70.x brave/brave-browser#40749

just checked, it's not in 1.70.x but it is in current Nightly

Oops, thanks for checking. I thought it happens with this PR.

@fallaciousreasoning fallaciousreasoning force-pushed the remove-colors branch 2 times, most recently from 8aef13e to 812afd4 Compare August 29, 2024 22:43
@brave-builds
Copy link
Collaborator

A Storybook has been deployed to preview UI for the latest push

@brave-builds
Copy link
Collaborator

A Storybook has been deployed to preview UI for the latest push

@brave-builds
Copy link
Collaborator

A Storybook has been deployed to preview UI for the latest push

@fallaciousreasoning fallaciousreasoning force-pushed the remove-colors branch 3 times, most recently from 627b6b1 to fb089ae Compare August 30, 2024 02:56
Copy link
Member

@simonhong simonhong left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

++

browser/themes/brave_theme_service.cc Outdated Show resolved Hide resolved
Copy link
Member

@goodov goodov left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm with few things to cleanup. nice work!

chromium_src/ui/color/BUILD.gn Outdated Show resolved Hide resolved
chromium_src/ui/color/sys_color_mixer.cc Outdated Show resolved Hide resolved
ui/color/brave_sys_color_mixer.h Show resolved Hide resolved
@fallaciousreasoning
Copy link
Contributor Author

Thanks for all your help @simonhong & @goodov 😄 @aguscruiz could you take another look at the PR and see if the SplitView changes look good?

@fallaciousreasoning fallaciousreasoning added the CI/run-macos-x64 Run CI builds for macOS x64 label Sep 4, 2024
@aguscruiz
Copy link
Collaborator

Just checked on Windows, all colors are looking great, seal of approval on my end to test this out on nightly and see how it feels :D

Copy link
Contributor

github-actions bot commented Sep 5, 2024

[puLL-Merge] - brave/brave-core@25337

Here's a description of the main changes in this PR:

Description

This PR adjusts the color system in Brave to align more closely with Material Design principles while maintaining some Brave-specific customizations. It updates the theme color picker, modifies various UI element colors, and refines how colors are applied in different theme modes (light, dark, private).

Changes

Changes

  1. browser/resources/settings/brave_overrides/theme_color_picker.ts:

    • Added a new file to customize the theme color picker behavior.
  2. browser/themes/brave_theme_service.cc and .h:

    • Modified GetIsGrayscale() to treat the baseline theme as grayscale.
  3. browser/ui/color/brave_color_mixer.cc:

    • Significantly refactored color definitions and mixers.
    • Removed many Brave-specific color overrides.
    • Aligned more colors with Material Design standards.
  4. browser/ui/views/frame/vertical_tab_strip_region_view.cc:

    • Updated color references for vertical tab strip.
  5. browser/ui/views/tabs/brave_tab_container.cc:

    • Simplified color logic for tab containers.
  6. chromium_src/chrome/browser/ui/color/tab_strip_color_mixer.cc:

    • Simplified tab strip color mixer logic.
  7. chromium_src/chrome/browser/ui/views/location_bar/location_bar_view.cc:

    • Modified omnibox background color behavior.
  8. chromium_src/ui/color/sys_color_mixer.cc:

    • Added Brave-specific system color mixer.
  9. ui/color/brave_sys_color_mixer.cc and .h:

    • Added new files for Brave-specific system color mixing.
  10. ui/color/brave_sys_color_mixer_unittest.cc:

    • Added unit tests for the new Brave system color mixer.

Possible Issues

  • The changes to color schemes may affect the visual consistency of the browser across different themes and modes.
  • Some Brave-specific color customizations have been removed, which might impact the unique look of Brave.

Security Hotspots

No significant security issues are apparent in this change.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CI/run-macos-x64 Run CI builds for macOS x64 CI/storybook-url Deploy storybook and provide a unique URL for each build puLL-Merge
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Nala]: Remove Chromium color overrides
5 participants