# Sale price styling

> CSS custom properties, parts, states and data attributes for the AndOr sale price widget, with Dawn and Horizon examples.

Source: https://backtrackhq.com/docs/widgets/sale-price/styling/

This page is for theme developers. It lists every class, state and CSS
custom property of the sale price widget, `<andor-price
class="andor-price">`.

The widget comes from the **AndOr Sale price** block and the pasted
`<andor-price>` tag. It uses AndOr's widget styles.

## 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.
For every layout the block offers, see [Looks](https://backtrackhq.com/docs/widgets/sale-price/#looks).
(Diagram: The sale price with the struck original price and a Sale badge)
1. `--andor-sale-color`: the sale amount and the badge
2. `--andor-original-color`: the struck amount
3. `--andor-price-gap`: space between the parts
4. `--andor-price-badge-border-color`: the badge border
5. `--andor-price-badge-radius`: badge corners
6. `--andor-price-badge-background`: the badge fill

## How precedence works

Put your CSS in your theme's stylesheet or in the app embed's
**Custom CSS** box. To see which value wins, read
[Which value wins](https://backtrackhq.com/docs/developers/tokens/#which-value-wins).

What this means for the sale price:

- **No inline colors.** The color and size settings go into a
  block-scoped rule, and only when changed from the default.
- So an untouched block follows the app embed's colors and a `:root`
  rule.

## Parts

| Class | What it is |
|---|---|
| `.andor-price` | The whole price line (the `<andor-price>` host) |
| `.andor-price__original` | The struck original amount, an `<s>` |
| `.andor-price__sale` | The sale amount |
| `.andor-price__badge` | The optional badge after the amounts |
| `.andor-price__label` | A visually hidden label ("Regular price", "Sale price"). Do not restyle |

## States and data attributes

| Attribute | On | Value and meaning |
|---|---|---|
| `data-andor-state` | host | `active` or `hidden`. A styling hook |
| `data-andor-kind` | host | `percentage` or `amount_each`, the winning discount's kind |
| `data-andor-mode` | host | Always `price` |
| `data-andor-widget-id` | host | The block id |
| `data-andor-product-id` | host | The product id, when known |
| `data-andor-variant-id` | host | The variant the price is shown for |
| `hidden` | host | No sale for this variant now |
| `data-andor-original-amount` | original span | The node the script reads the money format from |
| `data-andor-sale-amount` | sale span | The only node the script rewrites |

The host also carries `data-descriptors`, `data-price`, `data-currency`
and `data-best-id`. They are frozen names that the price script reads.
Do not rename or remove them.

> **Caution:** A hidden widget has both `hidden` and an inline
> `display: none`. Never force it visible with a rule like
> `andor-price { display: block }`. That would bring back an ended
> sale. Style `andor-price[hidden]` or `[data-andor-state="hidden"]`
> instead.

## Custom properties

| Property | Default | What it does |
|---|---|---|
| `--andor-sale-color` | accent, then `#c0392b` | Sale amount and badge color |
| `--andor-original-color` | muted, then `#6d7175` | Struck amount color |
| `--andor-price-gap` | `--andor-space`, then `0.4em` | Space between the parts |
| `--andor-price-font-size` | `inherit` | Size of the whole line |
| `--andor-price-font-weight` | `600` | Sale amount weight |
| `--andor-price-space-block-start` | `0` | Margin above |
| `--andor-price-space-block-end` | `0` | Margin below |
| `--andor-price-badge-padding` | `0.1em 0.5em` | Badge padding |
| `--andor-price-badge-border-color` | `currentColor` | Badge border |
| `--andor-price-badge-radius` | `0.2em` | Badge corners |
| `--andor-price-badge-background` | `transparent` | Badge fill |
| `--andor-price-badge-font-size` | `0.85em` | Badge size |

"Accent" is `--andor-color-accent` and "muted" is
`--andor-color-muted`. Both are global tokens.

## Examples

Match Dawn's own sale price. Dawn's colors are RGB numbers, so wrap them
in `rgb()` or `rgba()`:

```css
andor-price {
  --andor-original-color: rgba(var(--color-foreground), 0.75);
  --andor-sale-color: rgb(var(--color-foreground));
  --andor-price-font-size: 1.6rem;
  --andor-price-badge-radius: var(--badge-corner-radius, 4rem);
}
```

Horizon uses full colors, so use them as they are:

```css
andor-price {
  --andor-original-color: var(--color-foreground-muted, #666);
  --andor-sale-color: var(--color-foreground);
  --andor-price-badge-radius: var(--style-border-radius-pills, 40px);
}
```

Check the theme variable names in the theme version you run.