Customizing Cancel Flow Styling

The cancel flow renders inside a shadow DOM host, so — like other Ordergroove web components — most of its styles are scoped and can only be customized through the CSS custom properties (variables) it exposes. Each variable has a built-in default, so setting none of them still renders a fully styled flow.

On Subscription Manager

If your cancel flow runs on a Subscription Manager page — that is, an <og-smi> element is present — you don’t need to do anything extra. Subscription Manager’s theme editor already sets --og-smi-* custom properties on <og-smi> for whatever you’ve configured as your theme’s Basic Mode colors and fonts, and the cancel flow picks those up automatically since it mounts inside <og-smi>.

On a headless or custom page

If you’re embedding the cancel flow outside of Subscription Manager, none of Subscription Manager’s theme settings apply, since there’s no <og-smi> element for them to be set on. The cancel flow instead falls back to its hardcoded default values unless you set the same custom properties yourself on #og-cancel-flow-container or an ancestor element.

Basic knobs

These variable names match the Basic Mode knobs available in Subscription Manager’s theme editor, so if you already know your theme’s colors, you can reuse the same values here:

1
#og-cancel-flow-container {
2
  --og-smi-font-family: 'DM Sans', sans-serif;
3
  --og-smi-font-color: #17132f;
4
  --og-smi-color-disabled: #46547c;
5
  --og-smi-color-button-primary-bg: #39355b;
6
  --og-smi-color-button-primary-font: #ffffff;
7
  --og-smi-color-button-secondary-bg: #eeeef0;
8
  --og-smi-color-button-secondary-font: #39355b;
9
  --og-smi-color-button-secondary-border: #39355b;
10
  --og-smi-button-secondary-border-width: 0px;
11
  --og-smi-color-button-tertiary-bg: transparent;
12
  --og-smi-color-button-tertiary-font: #17132f;
13
  --og-smi-color-button-tertiary-border: #39355b;
14
  --og-smi-button-tertiary-border-width: 0px;
15
}

Additional style variables

Beyond the basic knobs above, a few more variables cover the dialog container itself and its status colors:

1
#og-cancel-flow-container {
2
  --og-smi-container-background: #ffffff;
3
  --og-smi-dialog-max-width: 525px;
4
  --og-smi-border-radius-sm: 8px;
5
  --og-smi-border-radius-md: 20px;
6
  --og-smi-color-order-highlight: #f4f7fe;
7
  --og-smi-color-error: #d14343;
8
}