CSS properties

Last modified by Lucas Charpentier on 2026/06/26 16:30

Manage
- Copy
Actions
- Export
- Print Preview
Viewers
- Source
- Children
- Attachments
- History
- Information
- Likes

As an implementation of the Abstract Design System, the CSS properties in Flamingo should include all the ones defined in the ADS.

Name: The name of the property. It can be used with the syntax var(--<name>)
Type: The property type, as defined in the CSS data types specifications. Other data types must be used carefully as values for this property.
Default value: The default value of this property on a XWiki Standard instance using the Iceberg colortheme.
Backwards compatibility: How the property maps onto the former customization mechanisms, shown as the colour-coded pills described below.
Example: When using this property, make sure it makes sense to use the same as this UI. When updating its value, it's the element you can check to figure out how your change impacts the default XWiki UI.

Each piece of backwards-compatibility information is shown as its own pill. The LESS pill is colour-coded by the level of support, and a separate pill is added for the legacy color theme mapping:

LESS there is a Flamingo LESS variable and it is editable in the Flamingo Theme Editor.
LESS there is a Bootstrap LESS variable: it can be overridden through LESS but is not exposed in the Theme Editor.
LESS there is no LESS equivalent — the property is CSS-only.
colorThemeField the property is mapped from a legacy Colibri color theme field (the pill shows the field name).
TODO the backwards-compatibility status still has to be documented.

All properties have been available as CSS variables since 17.3.0 unless a since note indicates otherwise.

Brand & Status Colors

Name	Type	Default value	Backwards compatibility	Description
--brand-primary	<color>	#2f70a7	LESSbuttonPrimaryBackgroundColor	Color of the success icon and progress-bar fill of the attachment upload widget.
--brand-success	<color>	#077537	LESSnotificationSuccessColor	Color of the "installed" extension status label in the Extension Manager.
--brand-info	<color>	#3bb2d0	LESSnotificationInfoColor	Border color of the checked option in the Required Rights dialog.
--brand-warning	<color>	#f0ad4e	LESSnotificationWarningColor	Color of the "available"/remote extension status label in the Extension Manager.
--brand-danger	<color>	#cc3333	LESSnotificationErrorColor	Color of the "invalid" extension status label and the comment delete icon.

Text & Typography

Name	Type	Default value	Backwards compatibility	Description
--text-color	<color>	#222222	LESStextColor	Color of the default body text (macro names, button-group menu items, Required Rights labels).
--text-muted	<color>	#555	TODO	Color of secondary, de-emphasized text such as comment headers, extension authors and the "supported by" labels.
--headings-color	<color>	inherit	LESStitleColor	Color of headings h1–h6.
--headings-font-weight	<number>	400	TODO	Font weight of headings h1–h6.
--link-color	<color>	#2f6faf	linkColor	Color of links such as the search-suggest "show all results" action.
--font-family-base	<string>	var(--font-family-sans-serif)	LESS	Font family used as the base for body text.
--font-family-sans-serif	<string>	"Helvetica Neue", Helvetica, Arial, sans-serif	LESS	Font stack of sans-serif fonts used as the base body font.
--font-family-serif	<string>	Georgia, "Times New Roman", Times, serif	LESS	Font stack of serif fonts available for serif text.
--font-family-monospace	<string>	Georgia, "Times New Roman", Times, serif	LESS	Font stack of monospace fonts used for code and pre blocks.
--font-size-base	<length>	1rem	LESS	Font size used as the base from which the other text and heading sizes are derived.
--font-size-small	<length>	.85rem	LESS	Font size for small/secondary text.
--font-weight-regular	<number>	400	LESS	Weight token for regular text, used for instance by form labels.
--font-weight-semibold	<number>	700	LESS	Weight of emphasized labels: comment author, file name, current pagination page and suggest source names.
--font-weight-bold	<number>	900	LESS	Weight token for bold text.

Fluid Heading Font Sizes

Font sizes for headings scale fluidly between --min-screen-size and --max-screen-size using a typographic scale. The intermediate min- and max- variables are unitless pixel values used in the calc() expressions.

Name	Type	Default value	Backwards compatibility	Description
--font-size-headings-scale	<number>	1.190	TODO	Ratio of the typographic scale used to compute heading sizes at the largest screen width.
--font-size-headings-scale-min	<number>	1.125	TODO	Ratio of the typographic scale used to compute heading sizes at the smallest screen width.
--min-screen-size	<number>	768	TODO	Bound (px) for the lower screen width in the fluid heading-size interpolation.
--max-screen-size	<number>	1200	TODO	Bound (px) for the upper screen width in the fluid heading-size interpolation.
--min-document-title-font-size	<number>	calc(var(--font-size-base) * pow(var(--font-size-headings-scale-min), 5))	TODO	Value (small-screen minimum) used in the fluid document-title font-size calc.
--max-document-title-font-size	<number>	calc(var(--font-size-base) * pow(var(--font-size-headings-scale), 5))	TODO	Value (large-screen maximum) used in the fluid document-title font-size calc.
--font-size-document-title	<length>	See variablelist.vm	TODO	Font size of the page/document title.
--min-h1-font-size	<number>	calc(var(--font-size-base) * pow(var(--font-size-headings-scale-min), 4))	TODO	Value (small-screen minimum) used in the fluid h1 font-size calc.
--max-h1-font-size	<number>	calc(var(--font-size-base) * pow(var(--font-size-headings-scale), 4))	TODO	Value (large-screen maximum) used in the fluid h1 font-size calc.
--font-size-h1	<length>	See variablelist.vm	LESS	Font size of h1 headings, used e.g. for the macro wizard title.
--min-h2-font-size	<number>	calc(var(--font-size-base) * pow(var(--font-size-headings-scale-min), 3))	TODO	Value (small-screen minimum) used in the fluid h2 font-size calc.
--max-h2-font-size	<number>	calc(var(--font-size-base) * pow(var(--font-size-headings-scale), 3))	TODO	Value (large-screen maximum) used in the fluid h2 font-size calc.
--font-size-h2	<length>	See variablelist.vm	LESS	Font size of h2 headings.
--min-h3-font-size	<number>	calc(var(--font-size-base) * pow(var(--font-size-headings-scale-min), 2))	TODO	Value (small-screen minimum) used in the fluid h3 font-size calc.
--max-h3-font-size	<number>	calc(var(--font-size-base) * pow(var(--font-size-headings-scale), 2))	TODO	Value (large-screen maximum) used in the fluid h3 font-size calc.
--font-size-h3	<length>	See variablelist.vm	LESS	Font size of h3 headings.
--min-h4-font-size	<number>	calc(var(--font-size-base) * pow(var(--font-size-headings-scale-min), 1))	TODO	Value (small-screen minimum) used in the fluid h4 font-size calc.
--max-h4-font-size	<number>	calc(var(--font-size-base) * pow(var(--font-size-headings-scale), 1))	TODO	Value (large-screen maximum) used in the fluid h4 font-size calc.
--font-size-h4	<length>	See variablelist.vm	LESS	Font size of h4 headings.
--font-size-h5	<length>	var(--font-size-base)	LESS	Font size of h5 headings.
--min-h6-font-size	<number>	calc(var(--font-size-base) * pow(var(--font-size-headings-scale), -1))	TODO	Value (small-screen minimum) used in the fluid h6 font-size calc.
--max-h6-font-size	<number>	calc(var(--font-size-base) * pow(var(--font-size-headings-scale-min), -1))	TODO	Value (large-screen maximum) used in the fluid h6 font-size calc.
--font-size-h6	<length>	See variablelist.vm	LESS	Font size of h6 headings.

Page & Background

Name	Type	Default value	Backwards compatibility	Description
--body-bg	<color>	#fafafa	LESSpageBackgroundColor	Background color of the page body.
--xwiki-page-content-bg	<color>	#FFFFFF	LESSpageContentBackgroundColor	Background of the page content area, suggest dropdowns, the extension search input and button-group menus.
--xwiki-background-secondary-color	<color>	#fafafa	backgroundSecondaryColor	Background color (secondary) used for instance by the attachment upload status container.
--xwiki-border-color	<color>	#E8E8E8	borderColor	Border color of dropdowns, suggest result lists and the extension body container.
--xwiki-page-header-bg-color	<color>	#FFFFFF	pageHeaderBackgroundColor	Background color of the page header.
--xwiki-page-header-bg-image	<image>	""	headerBackgroundImage	Background image of the page header.
--xwiki-page-header-bg-position	<position>	""	headerBackgroundPosition	Background image position of the page header.

Buttons

Name	Type	Default value	Backwards compatibility	Description
--btn-font-weight	<number>	normal	LESS	Font weight of buttons (.btn).
--btn-default-color	<color>	#4d5860	LESSbuttonSecondaryTextColor	Text color of default buttons (.btn-default); also the active pagination button text.
--btn-default-bg	<color>	#f8f8f8	LESSbuttonSecondaryBackgroundColor	Background of default buttons (.btn-default); also the active pagination button.
--btn-default-border	<color>	#ccc	LESS	Border color of default buttons; e.g. the separator before a button-group dropdown toggle.
--btn-primary-color	<color>	#fff	LESSbuttonPrimaryTextColor	Text color of primary buttons (.btn-primary).
--btn-primary-bg	<color>	#386da7	LESSbuttonPrimaryBackgroundColor	Background of primary buttons (.btn-primary).
--btn-success-color	<color>	#fff	LESSmenuAddEntryLinkColor	Text color of success buttons (.btn-success).
--btn-success-bg	<color>	TODO	LESSmenuAddEntryBackgroundColor	Background of success buttons (.btn-success).
--btn-info-color	<color>	#fff	LESS	Text color of info buttons (.btn-info).
--btn-info-bg	<color>	var(--brand-info)	LESS	Background of info buttons (.btn-info).
--btn-warning-color	<color>	#000	LESS	Text color of warning buttons (.btn-warning).
--btn-warning-bg	<color>	var(--brand-warning)	LESS	Background of warning buttons (.btn-warning).
--btn-danger-color	<color>	#fff	LESS	Text color of danger buttons (.btn-danger).
--btn-danger-bg	<color>	#ca302c	LESS	Background of danger buttons (.btn-danger).
--button-spacing	<length>	2px	TODO	Spacing between adjacent buttons.
--button-border-width	<length>	1px	TODO	Border width of buttons.

Navigation & Menu

Name	Type	Default value	Backwards compatibility	Description
--navbar-height	<length>	50px	LESS	Height of the top navigation bar (.navbar).
--navbar-default-color	<color>	#727272	LESSmenuLinkColor	Text color of the top navigation bar (.navbar-default).
--navbar-default-bg	<color>	TODO	LESSmenuBackgroundColor	Background color of the top navigation bar (.navbar-default).
--navbar-default-link-color	<color>	#727272	LESSmenuLinkColor	Link color in the top navigation bar (.navbar-default).
--navbar-default-link-hover-color	<color>	TODO	LESSmenuLinkColor	Link hover color in the top navigation bar.
--navbar-default-link-hover-bg	<color>	TODO	LESSmenuBackgroundColor	Link hover background in the top navigation bar.
--navbar-default-link-active-color	<color>	TODO	LESSmenuLinkColor	Color of active links in the top navigation bar.
--navbar-default-link-active-bg	<color>	TODO	LESSmenuBackgroundColor	Background of active links in the top navigation bar.
--navbar-default-link-disabled-color	<color>	TODO	menuContentLinkColor	Color of disabled links in the top navigation bar.
--navbar-default-toggle-border-color	<color>	TODO	borderColor	Border color of the navbar collapse toggle (mobile menu button).
--menu-default-color	<color>	var(--navbar-default-color)	TODO	Text color of menus (derived from the navbar color).
--menu-default-link-color	<color>	var(--navbar-default-link-color)	TODO	Link color of menus.
--menu-default-link-hover-color	<color>	var(--navbar-default-link-hover-color)	TODO	Link hover color of menus.
--menu-default-link-hover-bg	<color>	var(--navbar-default-link-hover-bg)	TODO	Link hover background of menus.
--menu-default-link-active-color	<color>	var(--navbar-default-link-active-color)	TODO	Color of active menu links.
--menu-default-link-active-bg	<color>	var(--navbar-default-link-active-bg)	TODO	Background of active menu links.
--menu-height	<length>	1.5lh	TODO	Height of menu entries.
--menu-default-border	<color>	var(--navbar-default-border)	TODO	Border color of menus.

Dropdowns

Name	Type	Default value	Backwards compatibility	Description
--dropdown-bg	<color>	TODO	LESSpageContentBackgroundColor	Background of dropdown menus (.dropdown-menu).
--dropdown-border	<color>	rgba(0, 0, 0, .15)	LESS	Border color of dropdown menus (.dropdown-menu).
--dropdown-link-color	<color>	TODO	LESStextColor	Item text color in dropdown menus.
--dropdown-link-hover-color	<color>	TODO	LESStextColor	Item hover text color in dropdown menus.
--dropdown-link-hover-bg	<color>	TODO	LESSsubmenuContentBackgroundColor	Item hover background in dropdown menus.
--dropdown-divider-bg	<color>	#e5e5e5	LESS	Color of dropdown dividers; also the hover border of pagination buttons.

Inputs & Forms

Name	Type	Default value	Backwards compatibility	Description
--input-bg	<color>	#fff	LESS	Background of form inputs and TomSelect (selectize) controls.
--input-border	<color>	TODO	LESSborderColor	Border color of form inputs and TomSelect (selectize) controls.
--input-color	<color>	TODO	LESS	Text color of form inputs and TomSelect (selectize) controls.
--input-border-focus	<color>	#66afe9	LESS	Focus border color of form inputs and TomSelect (selectize) controls.
--input-color-placeholder	<color>	#727272	LESS	Placeholder text color of form inputs.
--legend-color	<color>	#333	LESS	Text color of form legend elements.
--legend-border-color	<color>	#e5e5e5	LESS	Border under form legend elements; also macro parameter group tab content in the macro wizard.

Panels

Name	Type	Default value	Backwards compatibility	Description
--panel-bg	<color>	TODO	LESSpanelBackgroundColor	Background of panels (.panel); e.g. the Required Rights dialog selection panel.
--panel-default-text	<color>	TODO	LESSpanelTextColor	Text color of panels; e.g. the Required Rights dialog selection panel.
--panel-header-bg	<color>	TODO	panelHeaderBackgroundColor	Background of panel headers.
--panel-header-text	<color>	TODO	LESSpanelHeaderTextColor	Text color of panel headers.

Breadcrumbs

Name	Type	Default value	Backwards compatibility	Description
--breadcrumb-bg	<color>	#f5f5f5	LESS	Background of breadcrumbs; also the Extension Manager search bar.
--breadcrumb-color	<color>	#707070	LESS	Text color of breadcrumbs.
--breadcrumb-link-color	<color>	var(--link-color)	LESS	Link color in breadcrumbs.
--breadcrumb-active-color	<color>	#707070	TODO	Color of the active (current page) breadcrumb item.
--breadcrumb-separator	<string>	/	LESS	Character used to separate breadcrumb items.

Tables

Name	Type	Default value	Backwards compatibility	Description
--table-bg	<color>	TODO	LESS	Background color of tables (.table).
--table-bg-hover	<color>	#f5f5f5	LESS	Row hover background color of tables (.table-hover).
--table-border-color	<color>	#ddd	LESS	Border color of tables (.table).

Navigation Tabs

Name	Type	Default value	Backwards compatibility	Description
--nav-tabs-border-color	<color>	TODO	borderColor	Border color of navigation tabs (.nav-tabs).
--nav-tabs-active-link-hover-bg	<color>	var(--xwiki-page-content-bg)	pageContentBackgroundColor	Background of the active navigation tab (.nav-tabs).
--nav-tabs-active-link-hover-border-color	<color>	TODO	borderColor	Border color of the active navigation tab.
--nav-link-hover-bg	<color>	TODO	highlightColor	Background of menu items on hover/active (button-group menus, extension menu tabs, macro list, tree nodes).

List Groups

Name	Type	Default value	Backwards compatibility	Description
--list-group-border	<color>	TODO	borderColor	Border color of list-group items (.list-group-item).
--list-group-hover-bg	<color>	#f5f5f5	LESS	Background of list-group items on hover.
--list-group-link-color	<color>	#555	LESS	Link text color in list-group items.
--list-group-link-hover-color	<color>	var(--list-group-link-color)	LESS	Link hover text color in list-group items.

Pagination

Name	Type	Default value	Backwards compatibility	Description
--pagination-border	<color>	TODO	borderColor	Border color of pagination links (.pagination).
--pagination-hover-border	<color>	TODO	borderColor	Border color of pagination links on hover.
--pagination-disabled-border	<color>	TODO	borderColor	Border color of disabled pagination links.

Alerts

Name	Type	Default value	Backwards compatibility	Description
--alert-success-bg	<color>	#e5f3df	TODO	Background of success alerts (.alert-success).
--alert-info-bg	<color>	#e1f1f9	TODO	Background of info alerts (.alert-info); also the in-progress upload bar and Required Rights dialog highlights.
--alert-danger-bg	<color>	#f8ecec	TODO	Background of danger alerts (.alert-danger); also the attachment upload error state.

Components

Name	Type	Default value	Backwards compatibility	Description
--component-active-color	<color>	#fff	LESS	Text color of active components, e.g. selected list or dropdown items.
--component-active-bg	<color>	var(--brand-primary)	LESS	Background of active components, e.g. selected list or dropdown items.

Borders & Border Radii

Name	Type	Default value	Backwards compatibility	Description
--border-width	<length>	1px	TODO	Border width (default); e.g. the separator before a button-group dropdown toggle.
--border-radius-base	<length>	7px	TODO	Corner rounding (default radius) of suggest/search dropdowns and the extension search bar.
--border-radius-large	<length>	10px	TODO	Corner rounding (large radius), e.g. the attachment upload status container.
--border-radius-small	<length>	5px	TODO	Corner rounding (small radius) of the global header search input and the upload progress bar.

Layout & Spacing

Name	Type	Default value	Backwards compatibility	Description
--grid-gutter-width	<length>	30px	LESS	Gutter spacing (horizontal) for the left/right panel columns.
--main-padding	<length>	calc(var(--grid-gutter-width) * 2)	TODO	Padding around the main page content area.
--padding-large-vertical	<length>	10px	LESS	Padding (vertical) of large buttons and inputs (.btn-lg, .input-lg).
--edit-section-relative-height	<number>	.7	TODO	Size of inline section-edit links relative to the heading.

Figures

Name	Type	Default value	Backwards compatibility	Description
--figure-caption-font-size	<percentage>	90%	TODO	Font size of figure captions (figcaption).
--figure-caption-color	<color>	var(--text-muted)	TODO	Text color of figure captions (figcaption).

Marks & Text Highlights

Name	Type	Default value	Backwards compatibility	Description
--mark-bg	<color>	color-mix(in srgb, var(--btn-warning-bg), white)	LESSsince 18.0.0	Background of highlighted text (mark).
--mark-updated-bg	<color>	color-mix(in srgb, color-mix(in srgb, var(--btn-warning-bg), var(--btn-danger-bg) 35%), white)	LESSsince 18.0.0	Background marking updated text in diffs.
--mark-altered-bg	<color>	color-mix(in srgb, var(--btn-danger-bg), white)	LESSsince 18.0.0	Background marking altered/removed text in diffs.
--mark-highlighted-bg	<color>	var(--btn-warning-bg)	LESSsince 18.0.0	Background of strongly highlighted text.

Accessibility

Name	Type	Default value	Backwards compatibility	Description
--target-size-minimum	<length>	24px	TODO	Touch-target size (WCAG minimum), e.g. the lightbox toggle button.
--target-size-recommended	<length>	44px	TODO	Touch-target size (WCAG recommended), e.g. the image toolbar buttons.

Miscellaneous

Name	Type	Default value	Backwards compatibility	Description
--state-danger-text	<color>	#a94442	LESS	Text color of the danger/error state, e.g. the attachment upload error message.
--thumbnail-border	<color>	TODO	borderColor	Border color of image thumbnails (.thumbnail).
--login-form-max-width	<length>	450px	LESSsince 17.9.0	Width (maximum) of the login form.

Internal / Computed

These variables are used internally by the responsive font-size system and should generally not be overridden.

Name	Type	Default value	Backwards compatibility	Description
--100vw	<length>	100vw	LESS	Viewport width (full) used by the responsive font-size system.
--int-viewport-width	<number>	calc(10000 * tan(atan2(var(--100vw), 10000px)))	LESS	Viewport width (integer, unitless) computed for the responsive font-size calculations.

CSS properties

Brand & Status Colors

Text & Typography

Fluid Heading Font Sizes

Page & Background

Buttons

Navigation & Menu

Dropdowns

Inputs & Forms

Panels

Breadcrumbs

Tables

Navigation Tabs

List Groups

Pagination

Alerts

Components

Borders & Border Radii

Layout & Spacing

Figures

Marks & Text Highlights

Accessibility

Miscellaneous

Internal / Computed

Documentation for Product:

Documentation for...

XWiki Standard for Developers

About

About

Support

Platform

User Guide

Admin Guide

Developer Guide

Projects

XWiki

Extensions

Other

Contribute

Status

Practices

Under the Hood

Get Involved

Get Connected