All configurable values in browserux.css are exposed as CSS custom properties prefixed with --bux-.
In v5, tokens are organized by role:
- palette tokens name raw colors
- semantic tokens name intent
- component tokens name customizable browser-UI behavior
Modern color features are progressively enhanced behind @supports. Browsers that do not support oklch(), light-dark(), or color-mix() keep the hex fallback values.
To override tokens, see the Customization guide.
Raw palette tokens are implementation values. Prefer semantic tokens in application code.
| Variable | Role | Fallback value |
|---|---|---|
--bux-orange-600 |
Accent palette color | #e8540e |
--bux-blue-500 |
Secondary accent palette color | #2b7ce8 |
--bux-green-600 |
Valid/success palette color | #1c7f44 |
--bux-red-600 |
Invalid/error palette color | #c42b2b |
In browsers with OKLCH support, these are upgraded to perceptually uniform OKLCH values.
These are the main public color tokens to override in projects.
| Variable | Role | Fallback value |
|---|---|---|
--bux-color-bg |
Page/background surface | #eaeaea |
--bux-color-text |
Main text color | #121212 |
--bux-color-muted |
Secondary text and subtle UI | #555555 |
--bux-color-border |
Default border color | #cccccc |
--bux-color-accent |
Primary accent color | #e8540e |
--bux-color-accent-2 |
Secondary accent color | #2b7ce8 |
--bux-color-valid |
Valid field state | #1c7f44 |
--bux-color-invalid |
Invalid field state | #c42b2b |
--bux-progress-track |
<progress> track |
#efefef |
In browsers with light-dark() support, these tokens adapt automatically to the active color scheme.
Derived tokens are precomputed as hex fallbacks, then upgraded with color-mix() when supported.
| Variable | Role | Fallback value |
|---|---|---|
--bux-color-accent-hover |
Accent hover state | #c94a0c |
--bux-color-accent-soft |
Soft accent surface | #f5ddd2 |
--bux-color-valid-surface |
Valid field background | #dff0e7 |
--bux-color-invalid-surface |
Invalid field background | #f5dede |
--bux-focus-color |
Focus outline color | #f3a47a |
--bux-selection-bg |
Text selection background | #f8c9b0 |
--bux-selection-color |
Text selection color | #121212 |
--bux-search-text-bg |
Find-in-page match background | #f5ddd2 |
--bux-search-text-color |
Find-in-page match text | #121212 |
--bux-search-text-current-bg |
Current find-in-page match background | #e8540e |
--bux-search-text-current-color |
Current find-in-page match text | #121212 |
--bux-scrollbar-thumb |
Scrollbar thumb color | #aaaaaa |
--bux-scrollbar-thumb-hover |
Scrollbar thumb hover color | #e8540e |
| Variable | Role | Default value |
|---|---|---|
--bux-focus-width |
Focus outline width | 3px |
--bux-focus-offset |
Focus outline offset | 2px |
prefers-contrast: more increases --bux-focus-width to 4px.
| Variable | Role | Default value |
|---|---|---|
--bux-scrollbar-bg |
WebKit scrollbar container background | transparent |
--bux-scrollbar-track |
Scrollbar track color | transparent |
--bux-scrollbar-width |
Vertical scrollbar width | 10px |
--bux-scrollbar-height |
Horizontal scrollbar height | 10px |
--bux-scrollbar-thumb |
Scrollbar thumb color | see derived colors |
--bux-scrollbar-thumb-hover |
Scrollbar thumb hover color | see derived colors |
| Variable | Role | Default value |
|---|---|---|
--bux-dialog-backdrop-bg |
Native <dialog> backdrop |
rgba(0, 0, 0, 0.5) |
prefers-reduced-transparency: reduce changes this token to rgba(0, 0, 0, 0.9).
| Variable | Role | Default value |
|---|---|---|
--bux-duration-fast |
Short UI transition duration | 140ms |
--bux-duration-base |
Standard UI transition duration | 220ms |
--bux-easing |
Standard UI easing | cubic-bezier(0.2, 0, 0, 1) |
prefers-reduced-motion: reduce sets both duration tokens to 1ms.
| Variable | Role | Default value |
|---|---|---|
--bux-font-body |
Main document font | System font stack |
--bux-font-mono |
Monospace font | Standard monospace stack |
--bux-font-size |
Base text size | 1.6rem |
--bux-line-height |
Base line height | 1.6 |
1.6rem equals 16px with the font-size: 62.5% base set on html.
| Variable | Role | Default value |
|---|---|---|
--bux-progress-fill |
Filled portion of <progress> |
var(--bux-color-valid) |
--bux-placeholder-color |
Placeholder text color | var(--bux-color-muted) |
Common token renames:
| v4 | v5 |
|---|---|
--bux-page-bg |
--bux-color-bg |
--bux-page-color |
--bux-color-text |
--bux-color-primary |
--bux-color-accent |
--bux-color-secondary |
--bux-color-accent-2 |
--bux-valid-border-color |
--bux-color-valid |
--bux-valid-bg-color |
--bux-color-valid-surface |
--bux-invalid-border-color |
--bux-color-invalid |
--bux-invalid-bg-color |
--bux-color-invalid-surface |
--bux-progress-bar-bg |
--bux-progress-track |
--bux-progress-value-bg |
--bux-progress-fill |
--bux-typo-font-family |
--bux-font-body |
--bux-typo-font-family-mono |
--bux-font-mono |
--bux-typo-font-size |
--bux-font-size |
--bux-typo-line-height |
--bux-line-height |
--bux-scrollbar-vertical-width |
--bux-scrollbar-width |
--bux-scrollbar-horizontal-height |
--bux-scrollbar-height |