Table of Contents

A. Colors

...

Property

...

CSS Custom Prop

...

Default Value

...

Effects

...

Provided By

...

Primary Color

...

--ads-brand-primary-color

...

#122549

...

All primary color applications

...

NOP CSS

...

Primary Color : Hover

...

--ads-brand-primary-hover-color

...

#0d1d3b

...

All primary color : hover applications

...

NOP CSS

...

Secondary Color

...

--ads-brand-secondary-color

...

#16a2e4

...

All secondary color applications

...

NOP CSS

...

Secondary Color : Hover

...

--ads-brand-secondary-hover-color

...

#1094d1

...

All secondary color : hover applications

...

NOP CSS

...

Tertiary Color

...

--ads-brand-tertiary-color

...

#7ab202

...

All tertiary color applications

...

NOP CSS

...

Tertiary Color : Hover

...

--ads-brand-tertiary-hover-color

...

#649102

...

All tertiary color : hover applications

...

Theme Designer Base Theme

...

Text Color

...

--ads-brand-text-color

...

#231f20

...

All body copy and headers unless set in another scope

...

NOP CSS

...

Black

...

--ads-brand-black

...

#000 (not user definable)

...

Populates the color swatch selector in Theme Designer App with a black color option

...

Theme Designer App

...

White

...

--ads-brand-white

...

#FFF (Not user definable)

...

Populates the color swatch selector in Theme Designer App with a white color option

...

Theme Designer App

...

Grey 10

...

--ads-brand-grey10

...

#f3f3f3 (Not user definable)

...

Populates the color swatch selector in Theme Designer App with a light grey color option

...

Theme Designer App

...

Grey 20

...

--ads-brand-grey20

...

#b4b4b4 (Not user definable)

...

Populates the color swatch selector in Theme Designer App with a medium grey color option

...

Theme Designer App

...

Grey 30

...

--ads-brand-grey30

...

#707070 (Not user definable)

...

Populates the color swatch selector in Theme Designer App with a dark grey color option

...

Theme Designer App

...

Link Color

...

--ads-brand-link-color

...

#1976d2

...

Populates the color swatch selector in Theme Designer App with a brand link color option

...

Theme Designer Base Theme

B. Header

...

Property

...

CSS Custom Prop

...

Default Value

...

Effects

...

Provided By

...

Font Family

...

--ads-header-fontfamily

...

--ads-brand-primary-fontfamily

...

All fonts in the Cloud Header and Simple Header

...

Theme Designer Base Theme

...

Background Color

...

--ads-header-backgroundcolor

...

--ads-color-white

...

Header background color

...

NOP CSS

...

Text Color

...

--ads-header-nav-item-text-color

...

#231f20

...

Header text color

...

NOP CSS

...

Background Color

...

--ads-header-nav-item-hover-backgroundcolor

...

--ads-color-grey15

...

Link item background hover color

...

NOP CSS

...

Background Color

...

--ads-header-nav-item-focus-backgroundcolor

...

--ads-color-grey15

...

Link item background focus color

...

NOP CSS

...

Text Color

...

--ads-header-nav-item-text-active-color

...

#231f20

...

Link item background active color

...

NOP CSS

...

Background Color

...

--ads-header-subcategory-drawer-backgroundcolor

...

--ads-color-white

...

Header drawer background color

...

NOP CSS

...

Background Color

...

--ads-header-subcategory-drawer-nav-item-hover-backgroundcolor

...

--ads-color-grey15

...

Header drawer background color item hover background color

...

NOP CSS

...

Background Color

...

--ads-header-subcategory-drawer-nav-item-focus-backgroundcolor

...

--ads-color-grey15

...

Header drawer background color item focus background color

...

NOP CSS

...

Text Color

...

--ads-header-subcategory-drawer-nav-item-text-color

...

#000

...

Header drawer background color item text color

...

NOP CSS

...

This is OLD. See This List Instead for NOP and Sep UI --ads props.

A. Product Page

Product Header

Property	CSS Custom Prop	Is a shared property?	Default
Font Size	`--ads-font-size--product-header`	no	`--ads-font-size--70`
Font Weight	`--ads-font-weight--product-header`	no	`--font-weight--bold`

...

Description

Property	CSS Custom Prop	Is a shared property?	Default
Font Size	`--ads-font-size--product-body`	no	`-ads-font-size--40`
Font Weight	`--ads-font-weight--product-body`	no	`--ads-font-size--book`

...

Hero/Cover Image

Focal point:

Property	CSS Custom Prop	Is a shared property?	Default
Horizontal	`--ads-pdp-hero--horizontal-focalpoint`	no	`50%`
Vertical	`--ads-pdp-hero--vertical-focalpoint`	no	`50%`

Mobile hero

Property	CSS Custom Prop	Is a shared property?	Notes	Default
Text color (includes back button, product title and description, cart icon, cart count)	`--ads-color--white`	yes	changing this value may impact other elements	`--ads-color--white`

Mobile overscroll

Property	CSS Custom Prop	Is a shared property?	Default
Border Radius	`--ads-border-radius--card`	no	`1rem`

Mobile item summary

Date

Property	CSS Custom Prop	Is a shared property	Notes	Default
Border Color	`--ads-color--secondary`	yes	changing this value may impact other elements	`--ads-color--white`
Date Font Size	`--ads-font-size--40`	yes	changing this value may impact other elements	`--ads-font-size--40`

Price

Property	CSS Custom Prop	Is a shared property	Notes	Default
Color	`--ads-color--secondary`	yes	changing this value may impact other elements	`--ads-color--white`

Savings Text:

Property	CSS Custom Prop	Is a shared property	Default
Color	`--ads--add-to-cart--savings-text-color`	no	`--ads-color--green`

Add to cart area

Button

Property	CSS Custom Prop	Is a shared property		Default
Background color	`--ads--button--background-color`	yes		`--ads-color--primary20, --ads-color--blue20`
Text and icon color	`--ads--button--text-color`	yes		`--ads-color--white`
Border Radius	`--ads--button--radius`	yes		`-ads-border-radius--pill, 20px`
Add to Cart Price Color	`--ads--add-to-cart--price-color`	no	resorts can have their own font color applied to match the rest of the store	`--ads-color--grey20`

Buttons

Element	Recommended CSS Prop	Recommended Fallback
AW Primary Button Background Color	`--ads--button--background-color`	`--ads-color--primary20`
AW Primary Button Text Color	`--ads--button--text-color`	`--ads-color--white`
AW Primary Button Border Radius	`--ads--button--radius`	Add to Cart Button: `20px`, all others `0`
Ghost Button Border Color	`--ads--ghost-button--border-color`	`--ads-color--black`
Ghost Button Text	`--ads--ghost-button--text-color`	`--ads-color--black`

Attributes/Quantity Selection

Header

Property	CSS Custom Prop	Is a shared property	Notes	Default
Text	`--ads-color--primary20`	yes	changing this value may impact other elements	`--ads-color--blue20`

...

C. Both pages

Price tags

Property	CSS Custom Prop	Is a shared property	Notes	Default
Text Color	`--ads-color--secondary`	yes	changing this value may impact other elements	`--ads-color--white`

On the following PDP text all can be customizable to the resort’s font
- Product Title
- Price
- Add On “Amp up your experience” text
- The Month on the date picker
- Day Names on the date picker
- Day Numbers on the date picker
- Prices on the date picker

...

D. Misc Items

Checkboxes

Border

Property	CSS Custom Prop	Is a shared property	Notes	Default
Radius	`--ads-checkbox--border-radius`	no		`-ads-border-radius--card--dense`
Color	`--ads-color--primary20`	yes	changing this value may impact other elements	`--ads-color--blue20`
Active check color	`--ads-color--primary20`	yes	changing this value may impact other elements	`--ads-color--blue10`
Active price color	`--ads-color--primary10`	yes	changing this value may impact other elements	`--ads-color--blue10`

Price tag

Property	CSS Custom Prop	Is a shared property	Notes	Default
Selected Color	`--ads-color--primary10`	yes	unselected color not configurable	`--ads-color--blue10`

Radio button

Border

Property	CSS Custom Prop	Is a shared property	Notes	Default
Radius	`--ads-radio--border-radius`	no		`--ads-border-radius--card--dense`
Color	`--ads-color--primary20`	yes	changing this value may impact other elements	`--ads-color--blue20`
Active check color	`--ads-color--primary20`	yes	changing this value may impact other elements	`--ads-color--blue20`
Active price color	`--ads-color--primary10`	yes	changing this value may impact other elements	`--ads-color--blue10`

Radio group

Property	CSS Custom Prop	Is a shared property	Default
Label Color	`--ads-color--primary`	yes	`--ads-color--blue20`

Open Date Picker Button

Property	CSS Custom Prop	Is a shared property	Notes	Default
Background Default	`--ads-color--primary20`	yes	See Recommendation #3	`--ads-color--blue20`
Text	`--ads-color--white`	yes	See Recommendation #3	`inherit`
Border Radius	n/a	n/a	See Recommendations #2 and #4	`5px`

Add-on Boxes

Description

Property	CSS Custom Prop	Is a shared property	Notes	Default
Font Size	`--ads-font-size--20`	yes	changing this value may impact other elements	calculated
Line Height	`--ads-line-height--20`	yes	changing this value may impact other elements	calculated
Font Weight	`--ads-font-weight--book`	yes	changing this value may impact other elements	calculated

Title

Property	CSS Custom Prop	Is a shared property	Notes	Default
Font Size	`--ads-font-size--30`	yes	changing this value may impact other elements	calculated
Line Height	`--ads-line-height--30`	yes	changing this value may impact other elements	calculated
Font Weight	`--ads-font-weight--medium`	yes	changing this value may impact other elements	calculated
Text Color	`--ads-color--grey10`	yes	changing this value may impact other elements	calculated

Anchor Links

Property	CSS Custom Prop	Is a shared property	Notes	Default
Text Color	`#1976d2`	no	See Recommendation #7	none

...

E. Item Added Toast

Price Tag

Property	CSS Custom Prop	Is a shared property	Notes	Default
Price New	`--ads-color--primary10`	yes	changing this value may impact other elements	`--ads-color--blue10`
Price Old	`--ads-color--grey10`	yes	changing this value may impact other elements	none

Checkout Button

Property	CSS Custom Prop	Is a shared property	Notes	Default
Background Color	`--ads--button--background-color`	yes	changing this value may impact other elements	`--ads-color--primary20, --ads-color--blue20`
Text Color	`--ads--button--text-color`	yes	changing this value may impact other elements	`--ads-color--white`
Border Radius	`--ads--button--radius`	yes	changing this value will impact button radius for all buttons	`0`

View Cart Ghost Button

Property	CSS Custom Prop	Is a shared property	Notes	Default
Background Color	`--ads-color--white`	yes	changing this value may impact other elements	`#1976d2`
Text Color	`--ads--ghost-button--text-color`	yes	changing this value may impact other elements	`--ads-color--black`
Border Color	`--ads--ghost-button--border-color`	yes	changing this value may impact other elements	`--ads-color--black`
Border Radius	`--ads--button--radius`	yes	changing this value will impact button radius for all buttons	`0`

...

F. App Header

Property	CSS Custom Prop	Is a shared property	Default
Background Color (mobile)	`--ads-header-mobile--background-color`	no	`--ads-color--primary10, --ads-color--blue10`
Text (mobile)	`--ads-header-mobile--nav-item-color`	no	`--ads-color--white`
Text (desktop)	`--ads-header--nav-item-color`	no	`--ads-color--white`
Text Hover (desktop)	`--ads-header--nav-item-color--hover`	no	`--ads-color--primary20, --ads-color--blue20`
Text Scrolled (desktop)	`--ads-header--nav-item-color--scrolled`	no	`--ads-color--primary20, --ads-color--blue20`
Text Scrolled Hover (desktop)	`--ads-header--nav-item-color--scrolled--hover`	no	`--ads-color--grey6`

Property	CSS Custom Prop	Is a shared property	Default
Sidebar Banner Link Color	`--ads-nav-sidebar--banner--link-color`	no	`-ads-color--white`
Sidebar Banner Link Font Weight	`--ads-font-weight--book`	yes	`--ads-font-weight--book`
Sidebar Banner Link Font Size	`--ads-font-size--30`	yes	`--ads-color--white`
Sidebar Close Button	`--ads-nav-sidebar--banner--link-color`	yes	`--ads-nav-sidebar--banner--link-color`
Sidebar Main Link Color	`--ads-color--black`	yes	`--ads-color--black`
Sidebar Main Link Font Weight	`--ads-font-weight--medium`	yes	`--ads-font-weight--medium`
Sidebar Main Link Line Height	`--ads-line-height--40`	yes	`--ads-line-height--40`

F. Category page (Out of scope initially)

Category Header

Property	CSS Custom Prop	Is a shared property?	Default
Font Size	`--ads-font-size--category-header`	no	`--ads-font-size--70`
Font Weight	`--ads-font-weight--category-header`	no	`--ads-font-weight--extra-bold`

...

Product Card

Title

Property	CSS Custom Prop	Is a shared property?	Default
Color	`--ads-product-card--title-text-color`	no	`--ads-color--primary`, `--ads-color--black)`

Text

Property	CSS Custom Prop	Is a shared property?	Default
Color	`--ads-product-card--text-color`	no	`--ads-color--secondary`, `--ads-color--grey30`

Title + Text

Padding

Property	CSS Custom Prop	Is a shared property?	Default
Vertical	`--ads-product-card-text--vertical-padding`	no	`0.5rem`
Horizontal	`--ads-product-card-text--horizontal-padding`	no	`1rem`

Margin

Property	CSS Custom Prop	Is a shared property?	Default
Vertical	`--ads-product-card-text--vertical-margin`	no	`0rem`
Horizontal	`--ads-product-card-text--horizontal-margin`	no	`0rem`

Actions

Property	CSS Custom Prop	Is a shared property?	Default
Justification	`--ads-product-card-actions--justify-content`	no	`end`
Text Color	`--ads-product-card-actions--text-color`	no	`-ads-color--primary`, `--ads-color--black`

Margin

Property	CSS Custom Prop	Is a shared property?	Default
Vertical	`--ads-product-card-actions--vertical-margin`	no	`0`
Horizontal	`--ads-product-card-actions--horizontal-margin`	no	`0`

Divider

Property	CSS Custom Prop	Is a shared property?	Notes	Default
Is Visible	n/a	n/a	See Recommendation #1	n/a
Color	`--ads-product-card-divider--color`	no		`--ads-color--secondary`, `--ads-color--blue20`
Height	`--ads-product-card-divider--size`	no		`1px`
Width	`--ads-product-card-divider--width`	no		`100%`

Margin

Property	CSS Custom Prop	Is a shared property?	Default
Vertical	`--ads-product-card--vertical-margin`	no	`1rem`
Horizontal	`--ads-product-card--horizontal-margin`	no	`1rem`
Width/max-width	`--ads-product-card--width`	no	`20rem`
Padding	`--ads-product-card--padding`	no	`0rem`

Border

Property	CSS Custom Prop	Is a shared property?	Default
Width	`--ads-product-card--border-size`	no	`0px`
Color	`--ads-product-card--border-color`	no	`-ads-color--secondary`, `--ads-color--black`
Border Style	`--ads-product-card--border-style`	no	`none`
Rounding	`--ads-product-card--border-radius`	no	`0`

Tag

Property	CSS Custom Prop	Is a shared property?	Default
Background Color	`--ads-product-tag--background-color`	no	`#f1ff67`
Text Color	`--ads-product-tag--text-color`	no	`--ads-color--black`

Price

Property	CSS Custom Prop	Is a shared property?	Notes	Default
Is Visible	n/a	n/a	See Recommendation #1	n/a
Elevation/drop shadow	n/a	n/a	See Recommendation #1	n/a
Background-color	`--ads-product-card--background-color`	no		`--ads-color--grey70`

...

G. Reference

What are shared properties?

These are CSS custom properties that are not unique to the element. Changing the value of the property will change it for any other elements that inherit that style.

What is a CSS Custom Prop(erty)?

Property names that are prefixed with --, like --example-name, represent custom properties that contain a value that can be used in other declarations using the var() function. Custom properties can implement other custom properties. CSS Custom properties can be any string value, and can be read into JavaScript with the getComputedStyle() method.

What is a Default Value?

This is a fallback value that will be used whenever a CSS Property is not otherwise populated. A default can be a hard coded value or reference another CSS Custom Property.

Page Comparison

Versions Compared

Old Version 25

New Version Current

Key

A. Colors

B. Header

A. Product Page

Product Header

Description

Hero/Cover Image

Focal point:

Mobile hero

Mobile overscroll

Mobile item summary

Date

Price

Savings Text:

Add to cart area

Button

Buttons

Attributes/Quantity Selection

Header

C. Both pages

Price tags

D. Misc Items

Checkboxes

Border

Price tag

Radio button

Border

Radio group

Open Date Picker Button

Add-on Boxes

Description

Title

Anchor Links

E. Item Added Toast

Price Tag

Checkout Button

View Cart Ghost Button

F. App Header

Navigation

SideBar

F. Category page (Out of scope initially)

Category Header

Product Card

Title

Text

Title + Text

Padding

Margin

Actions

Margin

Divider

Margin

Border

Tag

Price

G. Reference

What are shared properties?

What is a CSS Custom Prop(erty)?

What is a Default Value?