Addofy CSS tokens

These custom properties are public and stable. They are set on body.adba and follow the theme (light, dark, auto) and the density. Use them for your own components and your UI follows the user's choices.

Colors

Token	Meaning
--adba-bg	Page background.
--adba-surface, --adba-surface-muted	Card background, subtle card background.
--adba-border	Borders and dividers.
--adba-text, --adba-text-muted	Body text, secondary text.
--adba-accent	Links, focus, active items.
--adba-accent-text	The accent as text (4.5:1).
--adba-accent-2, --adba-accent-2-text, --adba-on-accent-2	Second accent as a fill, as text, and text on it (since 2.12.0). Equals the accent in light.
--adba-hover, --adba-on-hover	Hover color of links, icon buttons and tabs, and text on a hover fill (since 2.12.0). Unset in the built-in palettes: use var(--adba-hover, your-own-hover).
--adba-primary, --adba-primary-text	Primary button background and text.
--adba-success, --adba-warning, --adba-danger, --adba-info	Status colors.

Shape, spacing and type

Token	Meaning
--adba-radius-sm, --adba-radius, --adba-radius-lg	Corner radius (6, 8, 12 px).
--adba-space-1 to --adba-space-6	Spacing scale (4, 8, 12, 16, 24, 32 px).
--adba-font, --adba-font-size	Font stack and base size.

Density tokens

The density tokens change with the user's density: comfortable, compact or dense. Automatic picks compact on lists. On touch screens (782px and below) controls and icon buttons stay 44px whatever the density.

Token	Meaning
--adba-row-height	List row height.
--adba-control-h, --adba-control-h-sm	Height of inputs and buttons.
--adba-line, --adba-title-page-fs	Line height and page title size.
--adba-pagebar-h, --adba-tab-h, --adba-palette-row	Page bar, tab and search result row height.
--adba-menu-item-h, --adba-menu-icon	Sidebar item height and icon size.
--adba-cell-pad-y, --adba-cell-pad-x, --adba-thumb	Table cell padding and list thumbnail size.
--adba-badge-fs, --adba-badge-pad, --adba-icon-btn	Badge text size and padding, icon button size.
--adba-box-head-h, --adba-box-pad, --adba-gap-section	Box header height, box padding and space between boxes.
--adba-field-row-pad, --adba-th-w	Settings table row padding and label column width.
--adba-card-min, --adba-card-pad	Settings card minimum width and padding.
--adba-feed-gap, --adba-dialog-pad	Space in notes and notices, padding of dialogs and panels.

What is not public

Everything else (--adba-gray-*, shadows, top bar and sidebar colors, component tokens) is internal and may change. You can still override some color tokens in a palette.

Example

body.adba .myplugin-card {
	padding: var(--adba-card-pad);
	border: 1px solid var(--adba-border);
	border-radius: var(--adba-radius);
	background: var(--adba-surface);
	color: var(--adba-text);
}

Related

• Dark mode and color palettes