[colors] feat: add modern colors in preparation for v5.x

[johnly13]

Checklist

• Includes tests
• Update documentation

Changes proposed in this pull request:

• Adds new colors that have more accessible contrast ratios within Blueprint components.
• Once this is released and @blueprintjs/colors@5.x is published, I'll make follow-up PRs to:
  • Add these new colors into Blueprint core by upgrading the @blueprintjs/colors dependency and creating a new blueprint-modern-colors.scss, which contains the line @import "@blueprintjs/colors/lib/css/colors.css
  • Create new less/scss variable files in @blueprintjs/core that has the line @import "@blueprintjs/colors/lib/css/colors.css, along with the rest of the blueprint variables (will require an update to generate-css-variables.js to accept an output file name)
  • Add remaining color-related style changes to packages/colors/src/colors.scss

Reviewers should focus on:

Screenshot

[adidahiya]

let's add a legacyColors.ts file with the old colors...

// legacyColors.ts

export const LegacyColors = {
  // ...
};

and then core should re-export these colors to avoid a breaking change:

// core/src/common/index.ts

import { LegacyColors } from "@blueprintjs/colors";

export Colors = LegacyColors;

consumers who wish to use the new colors can just switch to the new package:

import { Colors } from "@blueprintjs/colors";

[adidahiya]

not sure why the CI workflow wasn't getting triggered before... but after pushing my commit merging develop it looks like it's running

[blueprint-bot]

Merge remote-tracking branch 'origin/develop' into johnlee/modern-colors

Previews: documentation | landing | table

[blueprint-bot]

dist:variables in colors package

Previews: documentation | landing | table

[adidahiya]

I added LegacyColors. Now there are a couple remaining issues with this PR, hoping you can address them @johnly13:

Cascading variable declarations

We are moving to an API where consumers wishing to use the new colors in 3.x (and the eventual stable API in 5.0) are recommended to import multiple Sass files if they use both colors and other BP variables (like grid size):

@import "~@blueprintjs/colors/lib/scss/colors";
@import "~@blueprintjs/core/lib/scss/variables";

The problem with this is that @blueprintjs/core/lib/scss/variables.scss doesn't include the ! default syntax in its variable declarations (the generate-css-variables script strips them out), so the color values here will override the new modernized colors. And we can't import @blueprintjs/colors/lib/scss/colors.scss after variables.scss because the latter includes color aliases which depend on the color hex values. (Note: we should write a stylelint rule which enforces import ordering to avoid this error, as well)

I recommend changing generate-css-variables.js to allow retaining the ! default syntax through a CLI option so that this API with multiple Sass imports can work.

Color variables file name

The packages/colors dist:variables script produces a lib/scss/variables.scss file, when we want a lib/scss/colors.scss file.

I recommend changing generate-css-variables.js to allow specifying output filename with a --outputFilename CLI option.

[adidahiya]

the behavior of the stylelint rule to avoid color literals has changed now. I think we should make it use LegacyColors to retain the old behavior. we can think about how to incorporate new Colors in 5.0

[blueprint-bot]

Merge remote-tracking branch 'origin' into johnlee/modern-colors

Previews: documentation | landing | table

[blueprint-bot]

Use LegacyColors instead of Colors in no-color-literal styelint rule

Previews: documentation | landing | table

[ptgamr]

Upgraded @blueprintjs/core yesterday and new colors look great!

However, I noticed the popover2 package is still using the old colors, is there plan to update this yet?

[adidahiya]

@ptgamr use popover2 v1.0.0-beta.x, the new colors are there