Index

B. Both Pages (Category and PDP)

F. ~~Category Page~~ ~~(out of scope initially)~~

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

B. 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 23

New Version 24

Key

Index

A. Colors

B. 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?