Sample override for Blueprint3 colors in Blueprint4?

[switz]

Environment

• Package version(s): ^4.0.0-beta.10
• Browser and OS versions: n/r

Feature request

I have a whole site built on Blueprint3 that I'm upgrading to v4, but since the dark colors changed a tad it's thrown my site out of whack. Are there any code samples for overriding the B4 colors with the B3 colors?

[switz]

Did make some progress, but that won't override the import { Colors } from @blueprintjs/core of course. Any thoughts there?

@import "~@blueprintjs/core/lib/scss/variables.scss";
@import "~@blueprintjs/icons/lib/css/blueprint-icons.css";

// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

/* stylelint-disable @blueprintjs/no-color-literal */

// Gray scale

$black: #10161a;

$dark-gray1: #182026;
$dark-gray2: #202b33;
$dark-gray3: #293742;
$dark-gray4: #30404d;
$dark-gray5: #394b59;

$gray1: #5c7080;
$gray2: #738694;
$gray3: #8a9ba8;
$gray4: #a7b6c2;
$gray5: #bfccd6;

$light-gray1: #ced9e0;
$light-gray2: #d8e1e8;
$light-gray3: #e1e8ed;
$light-gray4: #ebf1f5;
$light-gray5: #f5f8fa;

$white: #ffffff;

// Core colors

$blue1: #0e5a8a;
$blue2: #106ba3;
$blue3: #137cbd;
$blue4: #2b95d6;
$blue5: #48aff0;

$green1: #0a6640;
$green2: #0d8050;
$green3: #0f9960;
$green4: #15b371;
$green5: #3dcc91;

$orange1: #a66321;
$orange2: #bf7326;
$orange3: #d9822b;
$orange4: #f29d49;
$orange5: #ffb366;

$red1: #a82a2a;
$red2: #c23030;
$red3: #db3737;
$red4: #f55656;
$red5: #ff7373;

// Extended colors

$vermilion1: #9e2b0e;
$vermilion2: #b83211;
$vermilion3: #d13913;
$vermilion4: #eb532d;
$vermilion5: #ff6e4a;

$rose1: #a82255;
$rose2: #c22762;
$rose3: #db2c6f;
$rose4: #f5498b;
$rose5: #ff66a1;

$violet1: #5c255c;
$violet2: #752f75;
$violet3: #8f398f;
$violet4: #a854a8;
$violet5: #c274c2;

$indigo1: #5642a6;
$indigo2: #634dbf;
$indigo3: #7157d9;
$indigo4: #9179f2;
$indigo5: #ad99ff;

$cobalt1: #1f4b99;
$cobalt2: #2458b3;
$cobalt3: #2965cc;
$cobalt4: #4580e6;
$cobalt5: #669eff;

$turquoise1: #008075;
$turquoise2: #00998c;
$turquoise3: #00b3a4;
$turquoise4: #14ccbd;
$turquoise5: #2ee6d6;

$forest1: #1d7324;
$forest2: #238c2c;
$forest3: #29a634;
$forest4: #43bf4d;
$forest5: #62d96b;

$lime1: #728c23;
$lime2: #87a629;
$lime3: #9bbf30;
$lime4: #b6d94c;
$lime5: #d1f26d;

$gold1: #a67908;
$gold2: #bf8c0a;
$gold3: #d99e0b;
$gold4: #f2b824;
$gold5: #ffc940;

$sepia1: #63411e;
$sepia2: #7d5125;
$sepia3: #96622d;
$sepia4: #b07b46;
$sepia5: #c99765;

$dark-popover-background-color: var(--dark-gray2);

:root {
  --dark-gray1: #182026;
  --dark-gray2: #202B33;
  --dark-gray3: #293742;
  --dark-gray4: #30404D;
  --dark-gray5: #394B59;
}

@import "~@blueprintjs/core/src/blueprint.scss";

[adidahiya]

@switz Blueprint packages don't use the Colors variables internally to style anything; those are just provided for convenience for Blueprint consumers. Blueprint components are all styled with Sass/CSS, so changing the Sass color variables as you've done in that code snippet should be sufficient to get the old colors. Let me know if you run into more problems.