Skip to content

[CLOV-1412][bpk-stylesheets] Ship token CSS variables in base.css #4492

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
GC Zhu (gc-skyscanner) wants to merge 11 commits into
base: main
Choose a base branch
from
Open

[CLOV-1412][bpk-stylesheets] Ship token CSS variables in base.css #4492

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
3303c50
[CLOV-1412][bpk-stylesheets] Ship token CSS variables in base.css
gc-skyscanner May 18, 2026
4328a74
[CLOV-1412][bpk-stylesheets] Vendor token CSS at build time
gc-skyscanner May 18, 2026
32221da
[CLOV-1412][bpk-stylesheets] Match copy-normal_css invocation pattern
gc-skyscanner May 18, 2026
4efaacd
[CLOV-1412][bpk-stylesheets] Document standalone build prerequisites
gc-skyscanner May 18, 2026
9b1b33b
[CLOV-1412][bpk-stylesheets] Commit rebuilt base.css with token varia…
gc-skyscanner May 18, 2026
492fc58
[CLOV-1412][bpk-stylesheets] Move token CSS imports from SCSS to JS
gc-skyscanner May 19, 2026
ac5162e
[CLOV-1412][bpk-stylesheets] Replace postcss-discard-comments with in…
gc-skyscanner May 19, 2026
0d116b7
[CLOV-1412] Add dev-release workflow for consumer testing
gc-skyscanner May 19, 2026
c302e23
Merge remote-tracking branch 'origin/main' into gc-skyscanner/clov-1412
gc-skyscanner May 19, 2026
a8cf78b
[CLOV-1412][bpk-stylesheets] Add css-minimizer-webpack-plugin
gc-skyscanner May 19, 2026
5552934
[CLOV-1412] Tighten README docs around stylesheet rebuild
gc-skyscanner May 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 21 additions & 2 deletions packages/bpk-stylesheets/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,25 @@ For Editorial text, the Larken font will also need to be imported:
import '@skyscanner/backpack-web/bpk-stylesheets/larken.css';
```

## Design tokens (CSS variables)

`base.css` ships the design token CSS variables generated by [`token-sync`](../../token-sync/). They are emitted as:
Comment thread
gc-skyscanner marked this conversation as resolved.
Outdated

- `:root { … }` — Light theme semantic tokens + Spacing/Radius primitives (the default)
- `:root[data-theme="dark"] { … }` — Dark theme overrides

To enable dark mode, set `data-theme="dark"` on `<html>`:

```html
<html data-theme="dark">
```

### Internal use only — not a stable public API

The CSS variables shipped here (`--bpk-private-…`, plus the current spacing / radius / canvas / etc. variables) are for **Backpack-internal use**. They are not part of the stable public API: names, shapes, and values can change without a major version bump. **Do not reference or override them directly in product code.**

The consumer-facing token API is intentionally decoupled from these CSS variables — it runs through SCSS functions and a documented token subset. This separation keeps the loading mechanism (the CSS variables shipped in `base.css`) independent from the public contract: we can evolve the runtime variables freely (for theming, refactors, renames) without breaking what product code depends on, while a single import keeps the consumer experience simple.

### Font-related Repositories Overview

Font updates involve coordination between three repositories:
Expand Down Expand Up @@ -133,6 +152,6 @@ Defined in `font.scss`, `larken.scss`

## Contributing

Don't forget to rebuild and commit `base.js` after you make changes to this package.
Don't forget to rebuild and commit `base.css` after you make changes to this package.

To build the `base.js` file run `npm run build:stylesheets` in the root folder.
To build the `base.css` file run `npm run build:stylesheets` in the root folder.
Loading
Loading