# Gift chooser styling

> Class names, state attributes and CSS custom properties for the gift chooser dialog, with Dawn and Horizon examples.

Source: https://backtrackhq.com/docs/widgets/gift-chooser/styling/

This page is for theme developers. It lists the classes, states and CSS
custom properties of the gift chooser, an `<andor-quickview>` dialog.

The chooser has no block. The cart gift slot opens it, and JavaScript
builds it. Every class is `andor-qv__<part>`, stable across releases.
AndOr adds its styles the first time the chooser is needed, so a cart
that never shows a chooser loads none of them.

## What each token changes

The numbers on the diagram match the table. The diagram is a simplified drawing. The full list of tokens is below.
(Diagram: The gift chooser window with two gifts and option pills, one picked)
1. `--andor-qv-bg`: the window background
2. `--andor-qv-radius`: window corners
3. `--andor-qv-sale`: the "Free" price
4. `--andor-qv-pill-border`: an option pill's border
5. `--andor-qv-pill-selected-bg`: the picked pill's fill
6. `--andor-qv-button-bg`: the main button's fill
7. `--andor-qv-backdrop`: the dimmed page behind the window

## How precedence works

The chooser has no block settings and no inline styles. Its colors fall
back to the global AndOr tokens, so a store that sets nothing still gets
a styled dialog. Set custom properties on `.andor-qv` or any ancestor,
or on `:root` to cover the whole store. Put your CSS in your theme's
stylesheet or in the app embed's **Custom CSS** box. Full details:
[Styling tokens](https://backtrackhq.com/docs/developers/tokens/).

## Parts

| Class | What it is |
|---|---|
| `.andor-qv` | the dialog |
| `.andor-qv__panel` | its one child, a flex column |
| `.andor-qv__grab` | the phone's grab bar |
| `.andor-qv__head`, `.andor-qv__titles`, `.andor-qv__title`, `.andor-qv__step` | the header |
| `.andor-qv__back`, `.andor-qv__close` | the header's icon buttons |
| `.andor-qv__tray`, `.andor-qv__slot` | the slot tray, for two gifts or more |
| `.andor-qv__slot-img`, `.andor-qv__slot-text`, `.andor-qv__slot-name`, `.andor-qv__slot-pick`, `.andor-qv__slot-clear` | parts of one tray slot |
| `.andor-qv__body` | the scrolling middle |
| `.andor-qv__grid`, `.andor-qv__cell`, `.andor-qv__card` | step 1: the card grid |
| `.andor-qv__card-img`, `.andor-qv__card-name`, `.andor-qv__card-action` | parts of one card |
| `.andor-qv__price` | a struck price and "Free" |
| `.andor-qv__detail`, `.andor-qv__media`, `.andor-qv__info`, `.andor-qv__name`, `.andor-qv__price-line` | step 2 |
| `.andor-qv__option`, `.andor-qv__legend`, `.andor-qv__legend-name`, `.andor-qv__legend-value`, `.andor-qv__values` | an option group |
| `.andor-qv__value` with `.andor-qv__value--pill` or `.andor-qv__value--swatch` | one value |
| `.andor-qv__radio`, `.andor-qv__swatch`, `.andor-qv__value-text` | inside a value |
| `.andor-qv__error` | the failed add line (`role="alert"`) |
| `.andor-qv__foot`, `.andor-qv__count`, `.andor-qv__add` | the footer and its one button |

## States and data attributes

| Attribute | On | Values |
|---|---|---|
| `data-step` | `.andor-qv` | `products` (step 1) or `options` (step 2) |
| `data-busy` | `.andor-qv` | present while the add runs |
| `data-kind` | `.andor-qv__option` | `swatch` or `pill` |
| `data-state` | `.andor-qv__value` | `on` (chosen), `off` (not chosen), or `out` (sold out or not free) |
| `data-state` | `.andor-qv__slot` | `filled`, `active` or `empty` |
| `data-variants` | `.andor-qv__card` | the number of available variants |

The Add button also gets your theme's checkout button classes
(`[name="checkout"]`) when the page has one.

## Custom properties

Each falls back to the global AndOr token, then to a literal.

| Property | Default |
|---|---|
| `--andor-qv-bg` | `--andor-color-bg`, `#ffffff` |
| `--andor-qv-text` | `--andor-color-text`, `#121212` |
| `--andor-qv-muted` | `--andor-color-muted`, `#6d7175` |
| `--andor-qv-border` | `--andor-color-border`, 14% ink |
| `--andor-qv-accent` | the slot accent, `--andor-color-accent` |
| `--andor-qv-sale` | `--andor-color-sale`, `#c0392b` ("Free") |
| `--andor-qv-radius` | twice `--andor-radius` |
| `--andor-qv-gap` | `12px` |
| `--andor-qv-pad` | `20px` |
| `--andor-qv-width` | `640px` (desktop) |
| `--andor-qv-swatch-size` | `32px` |
| `--andor-qv-pill-radius` | `999px` |
| `--andor-qv-pill-border` | the border color |
| `--andor-qv-pill-selected-bg` | the text color |
| `--andor-qv-pill-selected-text` | the background color |
| `--andor-qv-button-bg` | the accent |
| `--andor-qv-button-text` | `--andor-color-on-accent`, `#ffffff` |
| `--andor-qv-backdrop` | 45% ink |

"Ink" means black at that opacity.

## Phone layout

Below 750px the dialog is a bottom sheet: full width, at most 85% of the
screen tall, rounded top, a grab bar, one card per row, and a footer
padded for the phone's safe area. It slides up in 200ms, and not at all
when the shopper prefers reduced motion.

## Examples

Square swatches, like a theme's own swatch picker:

```css
.andor-qv__swatch,
.andor-qv__value--swatch {
  border-radius: 4px;
}
```

Dawn reads its color scheme from the drawer, so the chooser can use it:

<p class="docs-code-file">assets/base.css</p>

```css
.andor-qv {
  --andor-qv-bg: rgb(var(--color-background));
  --andor-qv-text: rgb(var(--color-foreground));
  --andor-qv-border: rgba(var(--color-foreground), 0.12);
  --andor-qv-radius: var(--popup-corner-radius, 0);
  --andor-qv-pill-radius: var(--variant-pills-radius, 40px);
  --andor-qv-pill-border: rgba(var(--color-foreground), 0.55);
}
```

Horizon:

<p class="docs-code-file">assets/base.css</p>

```css
.andor-qv {
  --andor-qv-bg: var(--color-background);
  --andor-qv-text: var(--color-foreground);
  --andor-qv-border: var(--color-border);
  --andor-qv-radius: var(--style-border-radius-popover, 12px);
  --andor-qv-pill-radius: var(--style-border-radius-pills, 40px);
  --andor-qv-swatch-size: var(--variant-picker-swatch-width, 32px);
}
```

> **Note:** The theme variable names were checked against Dawn 16.0.0 and
> Horizon 4.2.0. Check the names in the version you run.