{"id":15066613,"url":"https://github.com/pnnl/blueprint-styler","last_synced_at":"2025-10-09T06:17:05.288Z","repository":{"id":37271711,"uuid":"439106187","full_name":"pnnl/blueprint-styler","owner":"pnnl","description":"Custom themes and styles for Palantir's Blueprint js React component library","archived":false,"fork":false,"pushed_at":"2024-07-10T17:58:10.000Z","size":37024,"stargazers_count":24,"open_issues_count":1,"forks_count":5,"subscribers_count":4,"default_branch":"develop","last_synced_at":"2025-09-12T04:42:27.240Z","etag":null,"topics":["blueprintjs","css","palantir","pnnl","scss"],"latest_commit_sha":null,"homepage":"https://pnnl.github.io/blueprint-styler/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pnnl.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-12-16T19:34:43.000Z","updated_at":"2025-08-14T00:37:30.000Z","dependencies_parsed_at":"2023-02-15T11:16:07.321Z","dependency_job_id":"fd86eb82-f33a-40d9-9f3f-4c1a772239c3","html_url":"https://github.com/pnnl/blueprint-styler","commit_stats":{"total_commits":622,"total_committers":3,"mean_commits":"207.33333333333334","dds":0.003215434083601254,"last_synced_commit":"1fd4697706abcb45a32497ef0c014316a584bfd5"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/pnnl/blueprint-styler","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pnnl%2Fblueprint-styler","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pnnl%2Fblueprint-styler/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pnnl%2Fblueprint-styler/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pnnl%2Fblueprint-styler/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pnnl","download_url":"https://codeload.github.com/pnnl/blueprint-styler/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pnnl%2Fblueprint-styler/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279000850,"owners_count":26082950,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-09T02:00:07.460Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blueprintjs","css","palantir","pnnl","scss"],"created_at":"2024-09-25T01:09:52.816Z","updated_at":"2025-10-09T06:17:05.273Z","avatar_url":"https://github.com/pnnl.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg alt=\"blueprint-styler logo\" src=\"./src/assets/logo.svg\" width=\"200px\"/\u003e\n\n# Blueprint Styler\n\nCreate custom global styles for [Blueprint js Components](https://blueprintjs.com/docs/) using css [`--custom-properties`](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)\n\n[Live Demo](https://pnnl.github.io/blueprint-styler)\n\n# Create A New Theme\nBlueprint 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`](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) (also referred to as  _'[Tokens](https://css-tricks.com/what-are-design-tokens/)'_).\n\nThere are two ways to create a custom theme:\n\n## Theme Blueprint In Your Project _(easiest)_\n- Install this project via npm: `npm install blueprint-styler` or `yarn add blueprint-styler`\n- Import the blueprint base styles from `./base/blueprint.css` and `./base/blueprint-tokens.css`\n- (optionally) Import an existing style override to start from: `./overrides/{style_name}/override.css` and `./overrides/{style_name}/override-tokens.css`\n- In a `:root{...}` selector in your css, override --custom-properties from `blueprint-tokens.css`\n- If necessary, override global css in `blueprint.css` for additional control\n\n## Create A Blueprint Theme In This Project\nWhile more difficult, this has the advantage of being able to test all blueprint components in the demo react app while developing.\n- Create a new `_example` folder in `./src/styles`. This must contain a few things:\n  - a root scss file named `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:\n    ```scss\n    $ns: \"bp5\";\n    $root-selector: \":root\" !default;\n    ```\n  - a secondary root file named `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.\n    ```scss\n    // The .bpx-name must match the one in style-manifest.ts\n    $root-selector: \":root.bpx-example\";\n    @import './index';\n    // additional styler app styles can go here\n    ```\n- Add your theme to the [`src/styles/style-manifest.ts`](./src/styles/style-manifest.ts) file. Follow the pattern of the other themes in the file.\n- override styles\n  - everything exported must be wrapped in a `#{$root-selector} {...}` block. This scopes it accordingly.\n  - override vars and styles - copy-paste vars from files in `./src/styles/_blueprint/common/` and `./src/styles/_blueprint/components/`, and change the values to override them.\n  - There are several utility scss files located in `./src/styles/global/`.\n- Test your theme - Run the demo app with `yarn start`, go to http://localhost:9000/, and select the theme from the style dropdown.\n\n### Tips\n- Take a look at [`./src/styles/_flat/index.scss`](./src/styles/_flat/index.scss) for a relatively simple example\n- Take a look at the source: The original, non-customized version of blueprint is contained within `./src/styles/_blueprint/@blueprintjs/`. This is copied directly from blueprint and modified slightly. See [Updating Blueprint Source Files](#) for more details\n- Refresh the build app often. The hot-reloading css files will get out of sync sometimes.\n\n### Gotchas\n- Importing a css file in scss with the .css suffix will break the style because it adds a css partial\n  - example - YES:`@import '~normalize.css/normalize';`,  NO:`@import '~normalize.css/normalize.css';`\n- A dark color cannot link to its light counterpart or there will be a circular dependency\n  - example - NO: `--dark-circular-property: var(--circular-property);`\n  - [`circular-dependency-test.scss`](./src/styles/global/circular-dependency-test.scss) shows examples\n  - The vars compiler will sometimes give a warning about this\n- Dark vars are used in dev only and stripped out in build\n\n### Test A Custom Set Of Blueprint Components\n- Edit the [src/examples/custom-examples/customWorkingExample.tsx](./src/examples/custom-examples/customWorkingExample.tsx) or add a new example to this directory.\n- Uncomment/add that custom example at the top of [`src/components/allExamples.tsx`](./src/components/allExamples.tsx)\n\n\n\n# How Blueprint Styler Works\nBlueprint scss is copied and minimally modified. New updates are merged in via a an intermediary 'copy' branch.\n\nModifications are intentionally kept as minimal as possible to make future merges easier.\n\nModification to the original @blueprint scss files:\n- commenting out all `.bpX-dark` theme declarations. Dark theme switching is handled by css custom properties now.\n- many colors and functions are edited to resolve scss color functions issues\n- several more updates documented in [`src/styles/_blueprint/@blueprintjs/readme.md`](./src/styles/_blueprint/@blueprintjs/readme.md)\n\n## Updating Blueprint Source Files\nUpdating `./src/styles/_blueprint/@blueprintjs/` and `./src/examples` to the latest Blueprint involves an intermediary `develop-copy-only` branch to merge.\n\n- The `develop-copy-only` branch manually copies blueprint css and the examples from docs into the `./src` locations via a `yarn run copy` command\n- Then `develop-copy-only` is merged into `develop` so that changes to the modified `@blueprintjs` can be tracked and any conflicts resolved\n- `develop` change are never meant to be merged back into `develop-copy-only`\n\n```\ndevelop-copy-only    0–––1–––––––4–––––––---\u003e\n                          \\       \\\ndevelop                    2–––3–––5–––6–---\u003e\n```\n\nThis is not a great solution; open to suggestions for improvements.\n\n## Versioning\nMajor versions should be kept in sync with their blueprint counterpart. Minor versions are incremental updates to this project and exports\n\n## Build\nThere are two exports from this project\n\n1. `./base` and `./overrides` are the css style libraries. These are published via npm.\n   - Compile this with `yarn run build:libs`\n2. `./build` is the a react app used to develop and demo the project\n   - Compile this with `yarn run build:react`\n- Compile both with `yarn run build`\n\n# Contributions Welcome\n[`TODOs.md`](./TODOs.md)\n\n__GOOD LUCK!__\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpnnl%2Fblueprint-styler","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpnnl%2Fblueprint-styler","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpnnl%2Fblueprint-styler/lists"}