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

# Advanced Styling

> Styling, CSS variables, and parts reference for the Bonsai Search Bar web component

<Callout color="#0A5B3B" icon="info">
  **Where styling lives as of SDK v3.2+.** Colors, borders, alignment, and width are driven by **CSS custom properties** — not by HTML attributes. These variables can be set two ways:

  1. **From the Settings API** (preferred) — theming is configured per-tenant in the Bonsai dashboard and injected into the component's shadow DOM automatically at load time.
  2. **From your page's CSS** — override any variable on the `<bonsai-searchbar>` host element (or its container) to customize per-embed. Page CSS wins over the Settings API because Settings-API variables are injected at `:host` low specificity.

  Legacy HTML attributes like `brand-color`, `text-color`, `input-bg`, `card-bg`, `results-columns`, `input-opacity`, etc. are no longer supported — use the variables below instead.
</Callout>

## CSS Variables

Set any of these on the `<bonsai-searchbar>` element (or an ancestor) to override the defaults or Settings-API values.

```html theme={null}
<style>
  bonsai-searchbar {
    --bonsai-brand-color: #0A5B3B;
    --bonsai-text-color: #303030;
    --bonsai-muted-color: #9CA3AF;
    --bonsai-input-bg: #f5f5f5;
    --bonsai-input-text-color: #303030;
    --bonsai-suggestions-text-color: #303030;
    --bonsai-suggestions-hover-bg: rgba(0, 0, 0, 0.04);
    --bonsai-surface-color: #ffffff;
    --bonsai-canvas-color: #fafafa;
    --bonsai-searchbar-align: center;
    --bonsai-searchbar-max-width: 42rem;
    --bonsai-searchbar-margin: 24px 0;
  }
</style>
```

### Reference Table

| Variable                          | Default                  | Purpose                                                                          |
| --------------------------------- | ------------------------ | -------------------------------------------------------------------------------- |
| `--bonsai-brand-color`            | `#0A5B3B`                | Accent color for focus, buttons, and highlights                                  |
| `--bonsai-text-color`             | `#303030`                | Primary text                                                                     |
| `--bonsai-suggestions-text-color` | `#303030`                | Suggestions text                                                                 |
| `--bonsai-input-text-color`       | `#303030`                | Input text + icon                                                                |
| `--bonsai-suggestions-hover-bg`   | `rgba(0, 0, 0, 0.04)`    | Suggestions hover background                                                     |
| `--bonsai-muted-color`            | `#9CA3AF`                | Secondary text                                                                   |
| `--bonsai-input-bg`               | `#f5f5f5`                | Input + dropdown background                                                      |
| `--bonsai-surface-color`          | `#ffffff`                | Surface background                                                               |
| `--bonsai-canvas-color`           | `#fafafa`                | Canvas background                                                                |
| `--bonsai-border-color`           | `rgba(0, 0, 0, 0.06)`    | Default border                                                                   |
| `--bonsai-border-color-hover`     | `rgba(0, 0, 0, 0.12)`    | Hover border                                                                     |
| `--bonsai-hover-bg`               | `rgba(0, 0, 0, 0.04)`    | Hover background                                                                 |
| `--bonsai-error-bg`               | `rgba(220, 53, 69, 0.1)` | Error background                                                                 |
| `--bonsai-error-color`            | `#c82333`                | Error text                                                                       |
| `--bonsai-searchbar-align`        | `center`                 | Horizontal alignment of the inner container (`flex-start`, `center`, `flex-end`) |
| `--bonsai-searchbar-max-width`    | `42rem`                  | Maximum width of the input                                                       |
| `--bonsai-searchbar-margin`       | `24px 0`                 | Vertical margin around the search bar                                            |

## Search Bar Parts

The search bar exposes `::part(...)` hooks for external styling.

```css theme={null}
bonsai-searchbar::part(searchbar) {
  border-radius: 12px;
}

bonsai-searchbar::part(searchbar-input) {
  font-size: 16px;
}
```

## Search Bar Parts Reference

| Group       | Part                         | Description           |
| ----------- | ---------------------------- | --------------------- |
| Base        | `searchbar-container`        | Outer container       |
| Base        | `searchbar-wrapper`          | Wrapper               |
| Base        | `searchbar`                  | Input container       |
| Base        | `searchbar-icon`             | Left icon             |
| Base        | `searchbar-input`            | Input field           |
| Base        | `searchbar-actions`          | Actions container     |
| Actions     | `searchbar-submit`           | Submit button         |
| Actions     | `searchbar-close`            | Close button          |
| Suggestions | `searchbar-suggestions`      | Suggestions container |
| Suggestions | `searchbar-suggestion`       | Suggestion row        |
| Suggestions | `searchbar-suggestion-text`  | Suggestion text       |
| Suggestions | `searchbar-suggestion-arrow` | Suggestion icon       |
| Footer      | `searchbar-powered`          | Powered by container  |
| Footer      | `searchbar-powered-link`     | Powered by link       |
| Footer      | `searchbar-powered-dot`      | Powered by dot        |