Custom themes and styles for Palantir's Blueprint js React component library
OTHER License
Create custom global styles for Blueprint js Components using css --custom-properties
Blueprint uses global css to style its react components, allowing the styles to be overridden or replaced entirely. This project overrides the default blueprint global css with a version that uses --custom-properties
(also referred to as 'Tokens').
There are two ways to create a custom theme:
npm install blueprint-styler
or yarn add blueprint-styler
./base/blueprint.css
and ./base/blueprint-tokens.css
./overrides/{style_name}/override.css
and ./overrides/{style_name}/override-tokens.css
:root{...}
selector in your css, override --custom-properties from blueprint-tokens.css
blueprint.css
for additional controlWhile more difficult, this has the advantage of being able to test all blueprint components in the demo react app while developing.
_example
folder in ./src/styles
. This must contain a few things:
index.scss
- this will compile into the overrides/example/override.css
file and overrides/example/override-tokens.css
files. This file must also set the $ns
(namespace) and !default
$root-selector
variables as follows:
$ns: "bp5";
$root-selector: ":root" !default;
styler-styles.scss
- this extends index.scss
to style the demo react app components. This file needs to reset the $root-selector
to scope the style to a app's theme switching method.
// The .bpx-name must match the one in style-manifest.ts
$root-selector: ":root.bpx-example";
@import './index';
// additional styler app styles can go here
src/styles/style-manifest.ts
file. Follow the pattern of the other themes in the file.#{$root-selector} {...}
block. This scopes it accordingly../src/styles/_blueprint/common/
and ./src/styles/_blueprint/components/
, and change the values to override them../src/styles/global/
.yarn start
, go to http://localhost:9000/, and select the theme from the style dropdown../src/styles/_flat/index.scss
for a relatively simple example./src/styles/_blueprint/@blueprintjs/
. This is copied directly from blueprint and modified slightly. See Updating Blueprint Source Files for more details@import '~normalize.css/normalize';
, NO:@import '~normalize.css/normalize.css';
--dark-circular-property: var(--circular-property);
circular-dependency-test.scss
shows examplessrc/components/allExamples.tsx
Blueprint scss is copied and minimally modified. New updates are merged in via a an intermediary 'copy' branch.
Modifications are intentionally kept as minimal as possible to make future merges easier.
Modification to the original @blueprint scss files:
.bpX-dark
theme declarations. Dark theme switching is handled by css custom properties now.src/styles/_blueprint/@blueprintjs/readme.md
Updating ./src/styles/_blueprint/@blueprintjs/
and ./src/examples
to the latest Blueprint involves an intermediary develop-copy-only
branch to merge.
develop-copy-only
branch manually copies blueprint css and the examples from docs into the ./src
locations via a yarn run copy
commanddevelop-copy-only
is merged into develop
so that changes to the modified @blueprintjs
can be tracked and any conflicts resolveddevelop
change are never meant to be merged back into develop-copy-only
develop-copy-only 0–––1–––––––4–––––––--->
\ \
develop 2–––3–––5–––6–--->
This is not a great solution; open to suggestions for improvements.
Major versions should be kept in sync with their blueprint counterpart. Minor versions are incremental updates to this project and exports
There are two exports from this project
./base
and ./overrides
are the css style libraries. These are published via npm.
yarn run build:libs
./build
is the a react app used to develop and demo the project
yarn run build:react
yarn run build
GOOD LUCK!