[core] feat: darken dark theme colors

[adidahiya]

Supersedes #6708 and #6707

Checklist

• Includes tests
• Update documentation

Changes proposed in this pull request:

Update dark theme background colors to be one shade darker for many components based on the following proposal:

Reviewers should focus on:

Screenshot

[adidahiya]

[core] feat: darken dark theme colors

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

[adidahiya]

adjust more component colors

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

[adidahiya]

some components which probably need to be updated for the new colors (or at least their docs examples):

PanelStack

ProgressBar

Spinner

Navbar

Switch

Table2

[adidahiya]

notes from sync with @jessperrin:

• many components deserve to be wrapped in a card ("elevated background color") in the docs example so they're not presented on $black ("secondary background color")
  • however, some should have "primary background color" (not elevated) since they'll likely be used in a sidebar panel (like Tree)
• let's incorporate the default tag background color change in this PR
• let's add a border to inline <code> elements (same as I just added for code blocks)
• consider adding documentation around app layout and which colors (app background, secondary, elevated) apply to which UI elements - possibly fix Doc Suggestion: Move Dark Theme from Typography to Colors, Classes, or Variables #4750
• open questions / specific components to pay attention to
  • editable table with empty space:

[adidahiya]

I incorporated most of the suggestions from my last comment.

Not done yet:

• I didn't update table colors - I think that will require a closer look / more involved change (since it might prompt us to use light borders on tables).
• I did not move the "Dark theme" docs section yet.
• I did not update default tag colors yet.

[adidahiya]

improve appearance and layout of many examples

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

[adidahiya]

update tag & compound tag colors

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

[adidahiya]

I updated tag colors. any more feedback @jessperrin @CPerinet ?

[adidahiya]

render dark background for segmented controls in docs

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

[adidahiya]

fix panel stack tests

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

[adidahiya]

Discussed with @ericjeney and we're going to hold off on this PR until the current set of unreleased changes is released as a minor version.

These visual changes will need to be carefully landed in our internal monorepos, since we imagine that there will be many instances of dark theme color variables which may need to be updated to deal with the darker shades in this change.

In the meantime, we should introduce new color aliases to promote a smoother migration from current colors to new ones:

$pt-app-secondary-background-color: $white !default;
$pt-dark-app-secondary-background-color: $dark-gray1 !default; // changing to $black in this PR

$pt-app-elevated-background-color: $light-gray4 !default;
$pt-dark-app-elevated-background-color: $dark-gray3 !default; // changing to $dark-gray2 in this PR

^ these color aliases should be available in some version of Blueprint before the one with this PR.

[adidahiya]

@ericjeney I think we're ready to merge this now, could you give a +1 and merge it at some point this week?

[ericjeney]

I think we should hold off on this one until we have a crisper plan for rollout and have a better sense how many hard-coded colors this will affect.