ROS Prop List [OLD]

Owned by Danny Gibas
Last updated: Dec 13, 2023
6 min read

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Navigation

Property

CSS Custom Prop

Is a shared property

Default

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

SideBar

Property

CSS Custom Prop

Is a shared property

Default

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

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

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

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

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

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

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

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

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

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

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

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

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.