The custom properties the widget computes from the cart settings and writes
on its container. A property whose setting is empty is not written, and the
widget falls back to the [base token](#base-tokens). To override them from
your own CSS, see
[Style the widget](/developer-resources/cart-widget/style-it).
From `accentColor`, else the shop's brand colour. Default `var(--black)`.
The accent at 10% opacity. Default `var(--black-alpha-01)`.
The accent at 80% opacity. Default `var(--black-alpha-08)`.
Text on the accent. The widget picks dark text on a light accent, white on
a dark one. Default `var(--white)`.
From `backgroundColor`. The screen behind the widget. Default
`var(--black-alpha-06)`.
From `widgetBackgroundColor`, and a gradient down to
`widgetBackgroundDarker` when that is set. Default `#EAEFF3`.
From `fontStyle`, in front of the system stack. Default the system stack.
From `fontColorPrimary`. Default `var(--black)`.
From `fontColorSecondary`. Default `var(--gray-600)`.
The secondary colour at 80% opacity. Default `#464646aa`.
The secondary colour at 10% opacity. Default `#4646461a`.
From `buttonStyle`, in pixels. Default `8px`.
From `cardBackgroundColor`. Default `var(--white)`.
From `cardBorderColor`. Default `#D3D9DE`.
From `cardStyle`, in pixels. Default `8px`.
From `cardDividerColor`. Default `#D6D1C2`.
No setting drives it. Default `14px`.
Computed from `cardBackgroundColor`: a shade darker on a light card,
brighter on a dark one. Default `var(--gray-125)`.
From `headerHeight`, in pixels. Default `52px`.
From `headerBackgroundColor`, else `widgetBackgroundColor`. Default
`var(--widget-bg)`.
From `headerFontColor`. Default `var(--font-color-primary)`.
From `footerBackground`, else `widgetBackgroundDarker`. Default
`var(--widget-bg)`.
From `footerFontColor`, else `fontColorPrimary`. Default
`var(--font-color-primary)`.
From `inputBackground`. Default `var(--white)`.
From `inputBorderColor`. Default `var(--gray-300)`.
From `inputFontColor`. Default `var(--black)`.
From `segmentControlBackground`. Default `var(--accent)`.
Text on the segmented control, computed from its background. Default
`var(--accent-font)`.
Icon on the floating cart button, computed from the accent. Default
`#F9FDFF`.
Written from `accentColor` and its computed text colour, but no stylesheet
reads them. The floating cart button paints its background with
`var(--accent)`. Override the accent to change it.
```css title="Override the accent"
#subbly-cart-widget {
--accent: #701eff !important;
--button-border-radius: 24px !important;
}
```
The palette the widget's own styles are built on. No setting changes these.
They are declared on the container class `.SubblyAppContainer`, so a rule on
`#subbly-cart-widget` overrides them without `!important`.
`#000` and `#fff`.
Black at five alpha steps: `#0001`, `#0002`, `#0004`, `#0006` and `#0008`,
which is about 7%, 13%, 27%, 40% and 53% opacity.
The grey ramp: `100`, `125`, `150`, `175`, `200`, `250`, `300`, `350`,
`375`, `400`, `450`, `500`, `600` and `800`, from `#F7F7F7` down to
`#1B1B1B`.
`#1624A4`.
The error colours: `#FCF0ED`, `#E49D92` and `#C92E2E`.
`#D35307`, for warnings.
The success colours: `#E8F2ED`, `#82CEA2` and `#16A480`.
`var(--green-700)`.
`var(--blue-700)`. The ring around a focused control.
```css title="Match the widget to your own palette"
#subbly-cart-widget {
--gray-100: #f5f3ef;
--focus-outline: #701eff;
}
```