Custom CSS

Instructions and specific values to use or override.

Frends Business Automation Portal utilises shadowroot in its UI, requiring some small changes in how to override the styling with Custom CSS injection.

This article contains the instructions on how to target specific fields, as well as some of the variables and values that can be overridden. For your specific use-case, refer to the browser's developer tools to inspect the field you want to modify.

BAP version 1.0.6 included a fix in how the CSS was applied, and earlier versions may not apply updated CSS correctly.

How to Override Variables

Use the :root selector to override any CSS custom property:

Example 1: Restyle Buttons

:root {
    --frends-button--background-color: #1565c0;
    --frends-button--hover--background-color: #0d47a1;
    --frends-button--bordered--outline: 2px solid #1565c0;
}

Example 2: Custom Typography

:root {
    --header-1-font-size: 2.5rem;
}

Core Theme Variables

Typography

Variable	Default	Description
--header-1-font-size	2rem	<h1> font size
--header-2-font-size	1.5rem	<h2> font size
--header-3-font-size	1.25rem	<h3> font size
--font-regular	"Gilroy", "regular-fallback"	Body text font family
--font-medium	"Gilroy-Medium", "medium-fallback"	Bold/heading font family

Scrollbar

Variable	Default	Description
--scrollbar-thumb-background	#b3cbcb	Scrollbar thumb color
--scrollbar-thumb-background-hover	#58696c	Scrollbar thumb hover color

Component Variables

Not all CSS variables are listed here, you may also open the Developer Tools (F12) and inspect an elements CSS variables and overwrite it via the :root selector.

Button (frends-button)

Variable	Default	Description
--frends-button--background-color	var(--button-color)	Button fill color
--frends-button--hover--background-color	Derived from --button-color (10% darker via oklch)	Button hover fill
--frends-button--bordered--outline	0.125rem solid var(--button-color)	Bordered variant outline
--frends-button--bordered--background-color	—	Bordered variant background
--frends-button--bordered--hover--background-color	var(--button-color)	Bordered variant hover fill
--frends-button--padding	Component default	Button internal padding
--frends-button--margin	Component default	Button external margin
--frends-button--height	Component default	Button height
--frends-button--svg--fill	—	Button icon fill color
--frends-button--hover--svg--fill	—	Button icon hover fill color

Link (frends-link)

Variable	Default	Description
--frends-link--color	var(--accent-color)	Link text color
--frends-link--font-size	Component default	Link font size
--frends-link--margin	Component default	Link margin
--frends-link--width	Component default	Link width
--frends-link--text-decoration	Component default	Link text decoration (e.g., none)

Text (frends-text)

Variable	Default	Description
--frends-text--text-align	Component default	Text alignment
--frends-text--margin	Component default	Text margin
--frends-text--padding	Component default	Text padding
--frends-text--font-size	Component default	Text font size
--frends-text--text-overflow	Component default	Text overflow behavior (e.g., ellipsis)

Text Input (frends-text-input)

Variable	Default	Description
--frends-text-input--container--margin	Component default	Input container margin
--frends-text-input--container--width	Component default	Input container width
--frends-text-input--label--font-size	Component default	Input label font size
--frends-text-input--label--line-height	Component default	Input label line height
--frends-text-input--label--color	Component default	Input label color
--frends-text-input--gap	Component default	Gap between label and input

Dropdown (frends-dropdown)

Variable	Default	Description
--frends-dropdown--width	Component default	Dropdown width
--frends-dropdown--height	Component default	Dropdown height
--frends-dropdown--toggle--padding	Component default	Toggle button padding
--frends-dropdown--toggle--is-multi-value--padding	Component default	Multi-select toggle padding
--frends-dropdown--toggle--border	Component default	Toggle border
--frends-dropdown--toggle--border-radius	Component default	Toggle border radius
--frends-dropdown--toggle--background-color	Component default	Toggle background
--frends-dropdown--toggle--svg--fill	Component default	Toggle icon fill color
--frends-dropdown--toggle--position	Component default	Toggle CSS position
--frends-dropdown--toggle--right	Component default	Toggle right offset
--frends-dropdown--toggle--width	Component default	Toggle width
--frends-dropdown--toggle--focus--box-shadow	Component default	Toggle focus ring
--frends-dropdown--toggle--hover--box-shadow	Component default	Toggle hover ring
--frends-dropdown--list--item--selected--color	var(--accent-color)	Selected item text color
--frends-dropdown--list--item--selected--svg--fill	var(--accent-color)	Selected item icon color
--frends-dropdown--multi-value--color	var(--accent-color)	Multi-value chip text color
--frends-dropdown--multi-value--background-color	Derived from --accent-color (5% opacity)	Multi-value chip background

Dropdown Menu (frends-dropdown-menu)

Variable	Default	Description
--frends-dropdown-menu--min-width	14.6rem	Menu minimum width
--frends-dropdown-menu--list--item--selected--color	var(--accent-color)	Selected item color
--frends-dropdown-menu--list--category--width	Component default	Category section width

Tag (frends-tag)

Variable	Default	Description
--frends-tag--color	var(--accent-color)	Tag text color
--frends-tag--background-color	Derived from --accent-color (5% opacity)	Tag background color
--frends-tag--margin	Component default	Tag margin

Toggle (frends-toggle)

Variable	Default	Description
--frends-toggle--container--display	Component default	Container display type
--frends-toggle--container--flex-direction	Component default	Container flex direction
--frends-toggle--container--align-items	Component default	Container alignment
--frends-toggle--container--margin	Component default	Container margin
--frends-toggle--label--font-size	Component default	Toggle label font size
--frends-toggle--width	Component default	Toggle track width
--frends-toggle--height	Component default	Toggle track height
--frends-toggle--toggle-button--height	Component default	Toggle button diameter
--frends-toggle--toggle-button--width	Component default	Toggle button width
--frends-toggle--toggle-button--margin-left	Component default	Toggle button left offset
--frends-toggle--toggle-button--margin-bottom	Component default	Toggle button bottom offset
--frends-toggle--toggle-button--translateX	Component default	Toggle slide distance

Tabs (frends-tabs)

Variable	Default	Description
--frends-tabs--margin	Component default	Tabs container margin
--frends-tabs--border-bottom	Component default	Tabs bottom border

Accordion (frends-accordion)

Variable	Default	Description
--frends-accordion--expanded--background-color	#f5f5f5	Expanded section background

Menu Bar (<frends-menu-bar>)

Variable	Default	Description
--frends-menu-bar--padding	Responsive	Navigation bar horizontal padding

Divider (frends-divider)

Variable	Default	Description
--frends-divider--margin	Component default	Divider margin

Stepper (frends-stepper)

Variable	Default	Description
--frends-stepper--margin	Component default	Stepper margin

Tooltip (frends-tooltip)

Variable	Default	Description
--frends-tooltip--toggle-text--font-size	Component default	Tooltip text font size
--frends-tooltip--toggle-text--color	Component default	Tooltip text color

Table (frends-table)

Variable	Default	Description
--frends-table--border	Component default	Table border

Other Application Variables

Variable	Default	Description
--loading-spinner	var(--accent-color)	Loading spinner color
--status-fill-color	Context-dependent	Integration status indicator color

---