Tokens
The SCSS abstracts that everything else in Bifrost composes from — colors, spacing, type, mixins, functions.
The token layer is the foundation. Every Bifrost component reaches up to sass/abstracts/ for its colours, spacing, radii, transitions, type scales, mixins, and helpers. Components never hardcode colours or pixel values — they reference tokens.
| Module | File | Contains |
|---|---|---|
| Colors | _colors.scss | Palette: yellow, pink, lavender, mauve, blue, cyan, teal, mint, green — each in shades 100–900. |
| Variables | _variables.scss | Spacing scale, border-radius scale, transitions, z-indices, font sizes, breakpoints, viewport. |
| Mixins | _mixins.scss | Reusable mixin set — visually-hidden, focus rings, glass surfaces, layout helpers. |
| Functions | _functions.scss | SCSS helper functions — rem(), color-mix() wrappers, palette accessors. |
The docs theme imports the Bifrost abstracts directly via @forward so the two sites stay in visual lockstep — change a Bifrost token, redeploy docs, and the docs UI tracks the change automatically.
- Colors The Bifrost palette — nine hues (yellow, pink, soft-pink, lavender, mauve, blue, cyan, teal, mint, green) each in shades 100–900, plus neutrals.
- Variables Spacing scale, border-radius scale, transitions, z-index layers, breakpoints, font sizes — the non-colour tokens.
- Mixins + functions The reusable SCSS mixins (focus rings, focus-visible) and functions (rem, themed-color, strip-unit) Bifrost exposes from abstracts/.