variables.md

CSS Variables

All configurable values in browserux.css are centralized in the :root selector as CSS custom properties, prefixed with --bux-.

To override them, see the Customization guide.

---

Global colors

Base theme colors: page background, main text, primary and secondary colors.

Variable	Role	Default value
--bux-page-bg	Main background color	#eaeaea
--bux-page-color	Main text color	#121212
--bux-color-primary	Primary color (accent, CTA)	#f05e0e
--bux-color-secondary	Secondary color (links, components)	#0e93f0
--bux-transparent	Universal transparent value	transparent

These variables are automatically replaced in dark mode via @media (prefers-color-scheme: dark). See User Preferences.

---

Form validation

Colors used for valid and invalid field states.

Variable	Usage	Default value
--bux-valid-border-color	Border of valid fields	#29b94c
--bux-valid-bg-color	Background of valid fields	#f0fff5
--bux-invalid-border-color	Border of invalid fields	#dc303e
--bux-invalid-bg-color	Background of invalid fields	#fff0f0
--bux-placeholder-color	Default placeholder color	#aaa
--bux-invalid-placeholder-color	Placeholder color in invalid state	#dc303e

Background values (--bux-valid-bg-color, --bux-invalid-bg-color) are automatically adjusted for dark mode.

---

Progress bar

Customizes the native <progress> element.

Variable	Description	Default value
--bux-progress-bar-bg	Background (track) of the <progress> bar	#efefef
--bux-progress-value-bg	Filled portion of <progress>	#29b94c

---

Text selection

Controls the appearance of text selected by the user (::selection).

Variable	Description	Default value
--bux-selection-bg	Selection background color	var(--bux-page-color)
--bux-selection-color	Selected text color	var(--bux-page-bg)
--bux-selection-text-shadow	Shadow on selected text	none

---

Scrollbar

Customizes scrollbars for WebKit/Blink browsers (Chrome, Edge, Safari).

Variable	Role	Default value
--bux-scrollbar	Global scrollbar background	var(--bux-page-bg)
--bux-scrollbar-track	Track color	#ddecf6
--bux-scrollbar-thumb	Thumb color	var(--bux-color-secondary)
--bux-scrollbar-thumb-hover	Thumb color on hover	var(--bux-color-primary)
--bux-scrollbar-vertical-width	Vertical scrollbar width	10px
--bux-scrollbar-horizontal-height	Horizontal scrollbar height	10px

--bux-scrollbar-track is automatically adjusted in dark mode (#1a2535).

---

Typography

Base variables for font family, size, and line height.

Variable	Role	Default value
--bux-typo-font-family	Main document font	System font stack
--bux-typo-font-family-mono	Monospace font (code, pre…)	Standard monospace stack
--bux-typo-font-size	Base text size	1.6rem
--bux-typo-line-height	Global line height	1.6

System stack (sans-serif):

system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji'

Monospace stack:

ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace

1.6rem equals 16px with the font-size: 62.5% base set on html. See HTML root element.