Rework button colors for better dark mode appearance and accent control.

Review Request #13717 — Created April 9, 2024 and submitted

Information

Ink
master

Reviewers

In dark mode, Ink.Button now uses the accent color by default, instead
of a grey. This helps it stand out and fit in with other controls.
There's no visual distinction between primary and standard buttons in
this case at this time on dark mode.

On light mode, buttons appear the same as before.

The accent color for both primary and dark mode buttons can be
controlled by setting new CSS variables:

  • --rb-c-button-accented-bg
  • --rb-c-button-accented-active-bg
  • --rb-c-button-accented-hover-bg
  • --rb-c-button-accented-text-color

Made use of this in Review Board.

Verified appearance in Storybook.

Summary ID
Rework button colors for better dark mode appearance and accent control.
In dark mode, Ink.Button now uses the accent color by default, instead of a grey. This helps it stand out and fit in with other controls. There's no visual distinction between primary and standard buttons in this case at this time on dark mode. On light mode, buttons appear the same as before. The accent color for both primary and dark mode buttons can be controlled by setting new CSS variables: * `--rb-c-button-accented-bg` * `--rb-c-button-accented-active-bg` * `--rb-c-button-accented-hover-bg` * `--rb-c-button-accented-text-color`
c3910d5e9f44887bf902545581601273ecde1f38
Description From Last Updated

Screenshots?

daviddavid
david
  1. 
      
  2. Show all issues

    Screenshots?

    1. I can, but the only difference is that a standard button in dark mode now looks the same as a primary button in dark mode. The rest is just about giving consumers more control.

  3. 
      
david
  1. Ship It!
  2. 
      
maubin
  1. Ship It!
  2. 
      
chipx86
Review request changed
Status:
Completed
Change Summary:
Pushed to master (1f1fabd)