# Look

The widget has one look of its own, the **Plain** preset, in the rental's colours. Your site's CSS always wins over it. Or you leave it out and style every part yourself.

## Plain

The root, and a `<mellow-search>` that stands alone, load Plain unless they say `preset="none"`. Plain wears the colours and corners from the rental's **Settings · Customer pages** in Mellow, on solid cards with a thin line. It takes the site's own typeface.

Three rules keep the site in charge:

- Every rule of Plain is in `@layer mellow`. The script puts the stylesheet first in `<head>`, so this layer comes before every layer of the site. Any rule of the site wins, with no `!important`. A Tailwind utility class wins too.
- Every selector is in `:where()`, so it has no specificity.
- Plain styles element names, `part` names and `data-*` state only. It never styles a class.

On a wide screen the steps sit beside the summary. When both do not fit, the summary goes below. The insurance compare is a table when its step is at least 40rem wide, and stacked cards when it is narrower.

A site may link the stylesheet itself, such as to read it, at `https://mllw.is/widget/1/plain.css`.

## Tokens

Plain reads CSS custom properties on the root. Set one on the element, and it wins:

```css
mellow-booking,
mellow-search {
  --mellow-accent: #0a7c66;
  --mellow-radius: 0;
  --mellow-font: "Inter", sans-serif;
}
```

The script fills the first five from the rental's look in Mellow, once it starts. The rest have the defaults below. A default with `light-dark()` follows the site's `color-scheme`.

::::widget-tokens
- `--mellow-accent`: The brand colour: buttons, the picked days, the chosen card's ring and the progress dots. Mellow's neutral grey when the rental has no brand colour. From the rental's look.
- `--mellow-accent-text`: The text on the brand colour. From the rental's look.
- `--mellow-second`: The second colour: the "Our pick" badge, the test-mode note and the range between the picked days. From the rental's look.
- `--mellow-radius`: The corners of cards. From the rental's look: Sharp 4px, Soft 10px, Round 20px.
- `--mellow-radius-control`: The corners of boxes and buttons. From the rental's look: Sharp 2px, Soft 6px, Round 9999px.
- `--mellow-font`: The typeface. The site's own by default.
- `--mellow-surface`: The ground of cards and boxes.
- `--mellow-text`: The text.
- `--mellow-muted`: Quiet text, such as a hint.
- `--mellow-line`: Lines and borders.
- `--mellow-alert`: Errors.
- `--mellow-accent-ink`: The brand colour as text or as a ring, lighter in dark mode.
- `--mellow-soft`: A pale ground in the brand colour.
- `--mellow-second-soft`: A pale ground in the second colour.
- `--mellow-raised`: The ground of a list or a time picker that opens over the card. A step lighter in dark.
- `--mellow-hover`: The highlighted option of a list, a wash of the text colour.
- `--mellow-gap`: The space between parts.
- `--mellow-ground`: The ground under the whole widget. None by default: the site's page shows.
- `--mellow-ground-padding`: The space between the ground's edge and the widget.
::::

## Light and dark

Plain follows the site's own `color-scheme`. A light site thus never gets a dark widget. When the rental's Customer pages say **Always light** or **Always dark**, Plain takes that scheme instead, and lays its own ground under the widget with 20px around it, so its text never sits on the wrong page.

## Your own CSS

Style the widget as any part of your page. Use the element names, the `part` names and the `data-*` state, not classes: the widget sets no class.

```css
mellow-car-type[data-state="sold-out"] {
  opacity: 0.6;
}
mellow-car-type[data-kind="camper"] [part="price"] {
  font-size: 1.25rem;
}
mellow-day[data-state~="start"] button,
mellow-day[data-state~="end"] button {
  background: var(--brand);
}
mellow-option[data-recommended] {
  outline: 2px solid var(--brand);
}
```

The widget hides a part with the `hidden` attribute, and some elements also with `data-hidden`. A rule of yours that sets `display` must keep these hidden:

```css
mellow-step:not([hidden]) {
  display: grid;
}
```

[Elements](/widget/elements) lists the state and the parts of each element.

## No preset

`preset="none"` loads no CSS at all. Then every part has the browser's own look, and your CSS gives it all its style. A custom element is inline by default, so start with this:

```css
mellow-booking,
mellow-search {
  display: block;
}
```

## A theme that leaks in

Some themes style every `button`, `input` or `table` on the page, and the widget gets them too. When that does harm, `isolate` on `<mellow-booking>` draws the default flow into a shadow root. The page's CSS then does not reach it. Only the tokens and `::part()` style it:

```css
mellow-booking::part(main) {
  max-width: 48rem;
}
```

Under `isolate` your own child elements are left out, and the embedded Rapyd card form does not work yet.