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

# Styling

> Customising the appearance of the web components.

### Introduction

You can customise the appearance of the web components to match your branding in two ways:

1. **Dashboard settings** — Use the [Customisation page](/web-components/customisation) in Settings > Web Components to set colours, card styles, border radius, and more — no code required.
2. **CSS overrides** — For more control, add custom CSS to your website using CSS variables and CSS parts (described below).

<Tip>
  Most stores only need the dashboard settings. CSS overrides are optional and recommended only if you need fine-grained control that goes beyond what the dashboard offers. If you do use CSS, ask your web developer for help.
</Tip>

We use TailwindCSS to style the web components, which are isolated from your global CSS so that they do not affect the rest of your website.

There are two ways to customise the styling:

1. **CSS Variables** - For simple changes like colours, border radius, and font size. Override a few variables and all components update automatically. This is the quickest way to match your brand colours.

2. **CSS Parts** - For more in-depth control over individual elements within components. Use the `::part()` selector to target specific buttons, icons, text, and other elements with full CSS flexibility.

Most sites only need CSS variables. Use parts when you need fine-grained control over specific elements.

## CSS Variables

You can override the default colours, border radius, and font size used by all web components by setting CSS custom properties (variables) on your page. These variables are defined on the `:host` selector and can be overridden globally.

### Example

```css theme={null}
:root {
    --marzipan-color-primary: #8b5cf6;
    --marzipan-color-primary-hover: #a78bfa;
    --marzipan-radius: 0.5rem;
}
```

### Colour Variables - Primary

| Variable                         | Default   | Description                   |
| :------------------------------- | :-------- | :---------------------------- |
| `--marzipan-color-primary`       | `#3b82f6` | Primary brand colour          |
| `--marzipan-color-primary-hover` | `#60a5fa` | Primary colour on hover state |

### Colour Variables - Secondary

| Variable                           | Default   | Description                     |
| :--------------------------------- | :-------- | :------------------------------ |
| `--marzipan-color-secondary`       | `#e5e7eb` | Secondary background colour     |
| `--marzipan-color-secondary-hover` | `#d1d5db` | Secondary colour on hover state |

### Colour Variables - Button Borders

| Variable                                  | Default       | Description                                  |
| :---------------------------------------- | :------------ | :------------------------------------------- |
| `--marzipan-color-button-border`          | `transparent` | Border colour for primary buttons            |
| `--marzipan-color-button-border-hover`    | `transparent` | Border colour for primary buttons on hover   |
| `--marzipan-color-secondary-border`       | `transparent` | Border colour for secondary buttons          |
| `--marzipan-color-secondary-border-hover` | `transparent` | Border colour for secondary buttons on hover |

### Colour Variables - Text

| Variable                        | Default   | Description                              |
| :------------------------------ | :-------- | :--------------------------------------- |
| `--marzipan-color-text`         | `#111827` | Primary text colour                      |
| `--marzipan-color-text-muted`   | `#6b7280` | Muted/secondary text colour              |
| `--marzipan-color-text-inverse` | `#ffffff` | Inverse text colour for dark backgrounds |

### Colour Variables - Backgrounds

| Variable                      | Default                    | Description                          |
| :---------------------------- | :------------------------- | :----------------------------------- |
| `--marzipan-color-bg`         | `#ffffff`                  | Primary background colour            |
| `--marzipan-color-bg-muted`   | `#f9fafb`                  | Muted background colour              |
| `--marzipan-color-bg-overlay` | `rgba(107, 114, 128, 0.4)` | Overlay background with transparency |

### Colour Variables - Borders

| Variable                        | Default   | Description            |
| :------------------------------ | :-------- | :--------------------- |
| `--marzipan-color-border`       | `#d1d5db` | Standard border colour |
| `--marzipan-color-border-muted` | `#e5e7eb` | Muted border colour    |

### Colour Variables - Status

| Variable                      | Default   | Description               |
| :---------------------------- | :-------- | :------------------------ |
| `--marzipan-color-error`      | `#ef4444` | Error state colour        |
| `--marzipan-color-error-bg`   | `#fef2f2` | Error background colour   |
| `--marzipan-color-success`    | `#22c55e` | Success state colour      |
| `--marzipan-color-success-bg` | `#f0fdf4` | Success background colour |
| `--marzipan-color-warning`    | `#f59e0b` | Warning state colour      |
| `--marzipan-color-warning-bg` | `#fffbeb` | Warning background colour |

### Colour Variables - Badges

| Variable                      | Default   | Description             |
| :---------------------------- | :-------- | :---------------------- |
| `--marzipan-color-badge-bg`   | `#ffedd5` | Badge background colour |
| `--marzipan-color-badge-text` | `#9a3412` | Badge text colour       |

### Colour Variables - Inputs

| Variable                             | Default   | Description                      |
| :----------------------------------- | :-------- | :------------------------------- |
| `--marzipan-color-input-bg`          | `#ffffff` | Input field background colour    |
| `--marzipan-color-input-disabled-bg` | `#f9fafb` | Disabled input background colour |

### Border Radius Variables

| Variable               | Default    | Description            |
| :--------------------- | :--------- | :--------------------- |
| `--marzipan-radius`    | `0.375rem` | Standard border radius |
| `--marzipan-radius-lg` | `0.5rem`   | Larger border radius   |

### Font Size Variable

| Variable               | Default | Description                   |
| :--------------------- | :------ | :---------------------------- |
| `--marzipan-font-size` | `16px`  | Base font size for components |

## CSS Parts

We use the [**part**](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) attribute to style individual elements within the web components. The format is always `web-component::part(element-name)`.

### Examples

This CSS would target the button within the add to cart component, using Tailwind classes that exist with your own CSS styles.

```css theme={null}
marzipan-addtocart::part(--add-to-cart-button) {
    @apply text-white py-3 px-4 uppercase no-underline text-sm hover:bg-zinc-900;
}
```

And this CSS would target the cart icon of the cart icon component using traditional CSS.

```css theme={null}
marzipan-carticon::part(cart-icon) {
    color: #bebebe;
}
```

Because of how the web components are structured and how `part` works, we may use the same name for the same part in different components. For example, the `--marzipan-spinner` part is used in multiple components. However you must target each part separately:

```css theme={null}
marzipan-cart::part(--marzipan-spinner), marzipan-checkout::part(--marzipan-spinner) {
    color: #399383
}
```

### Available parts

Available parts are listed under each component's **Styling** section.