> For the complete documentation index, see [llms.txt](https://docs.frends.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.frends.com/bap/general/look-and-feel/custom-css.md).

# Custom CSS

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.

{% hint style="info" %}
BAP version 1.0.6 included a fix in how the CSS was applied, and earlier versions may not apply updated CSS correctly.
{% endhint %}

## How to Override Variables <a href="#how-to-override-variables" id="how-to-override-variables"></a>

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

#### Example 1: Restyle Buttons <a href="#example-1-restyle-buttons" id="example-1-restyle-buttons"></a>

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

#### Example 2: Custom Typography <a href="#example-2-custom-typography" id="example-2-custom-typography"></a>

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

## Core Theme Variables <a href="#core-theme-variables" id="core-theme-variables"></a>

### Typography <a href="#typography" id="typography"></a>

| 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 <a href="#scrollbar" id="scrollbar"></a>

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

## Component Variables <a href="#component-variables" id="component-variables"></a>

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`) <a href="#button-frends-button" id="button-frends-button"></a>

| 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`) <a href="#link-frends-link" id="link-frends-link"></a>

| 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`) <a href="#text-frends-text" id="text-frends-text"></a>

| 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`) <a href="#text-input-frends-text-input" id="text-input-frends-text-input"></a>

| 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`) <a href="#dropdown-frends-dropdown" id="dropdown-frends-dropdown"></a>

| 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`) <a href="#dropdown-menu-frends-dropdown-menu" id="dropdown-menu-frends-dropdown-menu"></a>

| 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`) <a href="#tag-frends-tag" id="tag-frends-tag"></a>

| 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`) <a href="#toggle-frends-toggle" id="toggle-frends-toggle"></a>

| 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`) <a href="#tabs-frends-tabs" id="tabs-frends-tabs"></a>

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

### Accordion (`frends-accordion`) <a href="#accordion-frends-accordion" id="accordion-frends-accordion"></a>

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

### Menu Bar (`<frends-menu-bar>`) <a href="#menu-bar-frends-menu-bar" id="menu-bar-frends-menu-bar"></a>

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

### Divider (`frends-divider`) <a href="#divider-frends-divider" id="divider-frends-divider"></a>

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

### Stepper (`frends-stepper`) <a href="#stepper-frends-stepper" id="stepper-frends-stepper"></a>

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

### Tooltip (`frends-tooltip`) <a href="#tooltip-frends-tooltip" id="tooltip-frends-tooltip"></a>

| 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`) <a href="#table-frends-table" id="table-frends-table"></a>

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

## Other Application Variables <a href="#other-application-variables" id="other-application-variables"></a>

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

***


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.frends.com/bap/general/look-and-feel/custom-css.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.