Styleguide

Brand colors

Brand Primary

@theme__color__primary
Brand Secondary

@theme__color__secondary
Brand Tertiary

@theme__color__primary-alt

Text colors

Headlines Primary

@heading__color__base
Headlines Secondary

@od-heading__color--secondary
Paragraph Primary

@od-p__color--primary
Paragraph Secondary

@od-p__color--secondary
Link

@link__color
Text Field Active

@form-element-input__focus__color
Text Field Placeholder

@form-element-input-placeholder__color

System colors

Primary Button

@button-primary__background
Secondary Button

@button__background
Field Border Color

@form-element-input__border-color
Field Incactive Fill

@form-element-input__disabled__background

Background colors

Page Background

@page__background-color
Product Background

@od-product__background
Primary Background

@od-background__color--primary
Secondary Background

@od-background__color--secondary
Tertiary Background

@od-background__color--tertiary
Overlay Background

@od-overlay__background

State colors

Success

@message-success__color
Error

@error__color
Inactive

@od-state-inactive__color
Active

@od-state-active__color

Order-status colors

Processing/etc.

@od-processing__color
Pending/etc.

@od-pending__color
Complete

@od-complete__color
Canceled/closed/etc.

@od-canceled-closed__color

Other colors

Line Seperator

@od-line-separator
Discount

@od-discount__color