Adjust sidebar colors

[simonhong]

fix brave/brave-browser#21590

So far, sidebar can't aligned with custom theme
because sidebar only knows brave's dark/light theme color.

With below changes, sidebar colors are aligned well with custom theme also.

Used toolbar color as a sidebar background color.
Used toolbar button's hover color for sidebar item/arrow button hover color.
Picked proper color between light/dark color for builtin item icon color based on toolbar color.
Used toolbar area separator color(separator between toolbar and web contents) for sidebar border.

Resolves

Submitter Checklist:

• I confirm that no security/privacy review is needed, or that I have requested one
• 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, npm run lint, 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:

• The associated issue milestone is set to the smallest version that the
  changes has landed on
• All relevant documentation has been updated, for instance:
  • https://github.com/brave/brave-browser/wiki/Deviations-from-Chromium-(features-we-disable-or-remove)
  • https://github.com/brave/brave-browser/wiki/Proxy-redirected-URLs
  • https://github.com/brave/brave-browser/wiki/Fingerprinting-Protections
  • https://github.com/brave/brave-browser/wiki/Brave%E2%80%99s-Use-of-Referral-Codes
  • https://github.com/brave/brave-browser/wiki/Custom-Headers
  • https://github.com/brave/brave-browser/wiki/Web-Compatibility-Exceptions-in-Brave
  • https://github.com/brave/brave-browser/wiki/QA-Guide
  • https://github.com/brave/brave-browser/wiki/P3A

Test Plan:

1. Launch brave
2. Load brave://settings/manageProfile and try any theme color
3. Check sidebar colors are aligned with new them like above screenshot

[simonhong]

@bradleyrichter PTAL this color changes. I can't add you in the reviewer list.

[nullhook]

i see conflicts

[simonhong]

i see conflicts

Fixed!

[nullhook]

lgtm

[stephendonner]

Verified PASSED using

Brave	1.38.53 Chromium: 99.0.4844.74 (Official Build) nightly (64-bit)
Revision	fee9a47e86e981802390cb0d41c5ed7ea93c4f6f-refs/branch-heads/4844@{#1060}
OS	Windows 10 Version 21H2 (Build 19044.1586)

Confirmed creating a new, colored profile in both light and dark modes has a matching Sidebar
Confirmed favicons are appropriate for light and dark modes

example	example	example	example	example