> ## Documentation Index
> Fetch the complete documentation index at: https://docs.axle.energy/llms.txt
> Use this file to discover all available pages before exploring further.

# Theming

> Apply per-partner branding to the smart charging experience using CSS variables.

The embed exposes a number of design tokens which we can customise to suit the branding needs of your application. Under the hood, these are set as CSS variables and piped into Tailwind CSS for use in our components.

<Note>
  To create or edit your theme, please reach out to an Axle representative. For new clients, we'll action this as part of your onboarding.
</Note>

## Design tokens

All tokens are optional. Unset tokens fall back to our default theme.

### Colour tokens

Colours are expressed as CSS colour strings. The codebase prefers [OKLCH](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) for perceptual uniformity, but hex and HSL are also supported.

Tokens are organised into base/foreground pairs. The base token (e.g. `--primary`) controls a surface colour, and its matching `-foreground` token (e.g. `--primary-foreground`) controls the text and icon colour that sits on that surface. Set them together so that content remains legible against each surface.

#### Brand

| CSS variable             | Purpose                                | Default            |                                                                                                                                                   |
| ------------------------ | -------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| `--primary`              | Main brand colour — buttons, key links | `oklch(0.205 0 0)` | <span style={{display:'inline-block',width:'1.5rem',height:'1.5rem',borderRadius:'4px',border:'1px solid #ccc',background:'oklch(0.205 0 0)'}} /> |
| `--primary-foreground`   | On primary surfaces                    | `oklch(0.985 0 0)` | <span style={{display:'inline-block',width:'1.5rem',height:'1.5rem',borderRadius:'4px',border:'1px solid #ccc',background:'oklch(0.985 0 0)'}} /> |
| `--secondary`            | Secondary brand colour                 | `#2e2f35`          | <span style={{display:'inline-block',width:'1.5rem',height:'1.5rem',borderRadius:'4px',border:'1px solid #ccc',background:'#2e2f35'}} />          |
| `--secondary-foreground` | On secondary surfaces                  | `#e5e5e7`          | <span style={{display:'inline-block',width:'1.5rem',height:'1.5rem',borderRadius:'4px',border:'1px solid #ccc',background:'#e5e5e7'}} />          |
| `--accent`               | Accent colour for emphasis             | `#2e2f35`          | <span style={{display:'inline-block',width:'1.5rem',height:'1.5rem',borderRadius:'4px',border:'1px solid #ccc',background:'#2e2f35'}} />          |

#### Surfaces

| CSS variable           | Purpose                                    | Default            |                                                                                                                                                   |
| ---------------------- | ------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| `--background`         | Page or view background                    | `oklch(1 0 0)`     | <span style={{display:'inline-block',width:'1.5rem',height:'1.5rem',borderRadius:'4px',border:'1px solid #ccc',background:'oklch(1 0 0)'}} />     |
| `--foreground`         | Default body text                          | `oklch(0.145 0 0)` | <span style={{display:'inline-block',width:'1.5rem',height:'1.5rem',borderRadius:'4px',border:'1px solid #ccc',background:'oklch(0.145 0 0)'}} /> |
| `--card`               | Card surfaces                              | `oklch(0.99 0 0)`  | <span style={{display:'inline-block',width:'1.5rem',height:'1.5rem',borderRadius:'4px',border:'1px solid #ccc',background:'oklch(0.99 0 0)'}} />  |
| `--popover`            | Popover / dropdown background              | `oklch(1 0 0)`     | <span style={{display:'inline-block',width:'1.5rem',height:'1.5rem',borderRadius:'4px',border:'1px solid #ccc',background:'oklch(1 0 0)'}} />     |
| `--popover-foreground` | On popover surfaces                        | `oklch(0.145 0 0)` | <span style={{display:'inline-block',width:'1.5rem',height:'1.5rem',borderRadius:'4px',border:'1px solid #ccc',background:'oklch(0.145 0 0)'}} /> |
| `--muted`              | Subdued backgrounds — inputs, badges       | `#f3f2f280`        | <span style={{display:'inline-block',width:'1.5rem',height:'1.5rem',borderRadius:'4px',border:'1px solid #ccc',background:'#f3f2f280'}} />        |
| `--muted-foreground`   | On muted surfaces                          | `oklch(0.556 0 0)` | <span style={{display:'inline-block',width:'1.5rem',height:'1.5rem',borderRadius:'4px',border:'1px solid #ccc',background:'oklch(0.556 0 0)'}} /> |
| `--scrim`              | Backdrop overlay behind sheets and dialogs | `oklch(0.975 0 0)` | <span style={{display:'inline-block',width:'1.5rem',height:'1.5rem',borderRadius:'4px',border:'1px solid #ccc',background:'oklch(0.975 0 0)'}} /> |
| `--pill`               | Pill / chip backgrounds                    | `oklch(1 0 0)`     | <span style={{display:'inline-block',width:'1.5rem',height:'1.5rem',borderRadius:'4px',border:'1px solid #ccc',background:'oklch(1 0 0)'}} />     |
| `--pill-foreground`    | On pill surfaces                           | `oklch(0.205 0 0)` | <span style={{display:'inline-block',width:'1.5rem',height:'1.5rem',borderRadius:'4px',border:'1px solid #ccc',background:'oklch(0.205 0 0)'}} /> |

#### Feedback

| CSS variable           | Purpose                        | Default                     |                                                                                                                                                            |
| ---------------------- | ------------------------------ | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `--destructive`        | Error / destructive actions    | `oklch(0.577 0.245 27.325)` | <span style={{display:'inline-block',width:'1.5rem',height:'1.5rem',borderRadius:'4px',border:'1px solid #ccc',background:'oklch(0.577 0.245 27.325)'}} /> |
| `--warning`            | Warning alert background       | `rgba(254, 250, 231, 1)`    | <span style={{display:'inline-block',width:'1.5rem',height:'1.5rem',borderRadius:'4px',border:'1px solid #ccc',background:'rgba(254, 250, 231, 1)'}} />    |
| `--warning-foreground` | On warning surfaces            | `rgba(72, 61, 4, 1)`        | <span style={{display:'inline-block',width:'1.5rem',height:'1.5rem',borderRadius:'4px',border:'1px solid #ccc',background:'rgba(72, 61, 4, 1)'}} />        |
| `--info`               | Informational alert background | `rgba(235, 243, 250, 1)`    | <span style={{display:'inline-block',width:'1.5rem',height:'1.5rem',borderRadius:'4px',border:'1px solid #ccc',background:'rgba(235, 243, 250, 1)'}} />    |
| `--info-foreground`    | On info surfaces               | `rgba(27, 70, 101, 1)`      | <span style={{display:'inline-block',width:'1.5rem',height:'1.5rem',borderRadius:'4px',border:'1px solid #ccc',background:'rgba(27, 70, 101, 1)'}} />      |

#### Borders & focus

| CSS variable | Purpose         | Default            |                                                                                                                                                   |
| ------------ | --------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| `--border`   | Default borders | `oklch(0.922 0 0)` | <span style={{display:'inline-block',width:'1.5rem',height:'1.5rem',borderRadius:'4px',border:'1px solid #ccc',background:'oklch(0.922 0 0)'}} /> |
| `--ring`     | Focus ring      | `oklch(0.708 0 0)` | <span style={{display:'inline-block',width:'1.5rem',height:'1.5rem',borderRadius:'4px',border:'1px solid #ccc',background:'oklch(0.708 0 0)'}} /> |

### Radius

A single `--radius` value drives the entire corner-radius scale. The derived values `--radius-sm`, `--radius-md`, `--radius-lg`, `--radius-xl`, and `--radius-2xl` are all calculated from `--radius`, so components scale proportionally — set the base value and everything from inputs to cards to sheets stays in tune.

| CSS variable | Purpose            | Default  |
| ------------ | ------------------ | -------- |
| `--radius`   | Base corner radius | `1.2rem` |

### Typography

| CSS variable             | Purpose                                             | Default |
| ------------------------ | --------------------------------------------------- | ------- |
| *(inline `font-family`)* | Body text font stack, applied via an inline `style` | `Inter` |
| `--font-heading`         | Heading font stack, applied to `h1`–`h6`            | `Inter` |

## Font customisation

We support three font strategies.

### 1. External fonts

We support the use of [Google Fonts](https://fonts.google.com/) for externally hosted, publicly licensed fonts.

### 2. Local fonts

We support the use of custom fonts. You can provide us with font files, which we host alongside the embed.

Themes that rely on brand fonts typically use this path, with one or more weights defined and `preload` enabled for primary weights.

<Warning>
  When using custom fonts, please ensure you have the required licenses for use in the app.
</Warning>

### 3. System fonts

Themes may also choose not to ship any font files, instead using a system font stack.

## Copy and content configuration

Various parts of the onboarding flow are configurable per partner requirements. This is handled as part of dedicated engineering effort as we support your integration.

These theming options should cover the majority of needs for the majority of clients. If you have further requirements, please reach out to us via your customer support contact.