Table of Contents

minLevel	1
maxLevel	6
outline	false
type	flatlist
separator	brackets
printable	false

THIS DOCUMENT IS NOT MAINTAINED.

This document was created for the MVP release of TD for auditing the theme properties. It is NOT maintained. There may be properties that have been added or removed from NOP and PUI since the time this document was created.

A. Colors - NOP and Public UI

Colors are global and can be applied to elements via the color swatch selector in Theme Designer. Brand colors should be the first thing you define when setting up a new theme so that they are available to apply to selected elements.

Property / `Path in TD`	CSS Custom Prop	Default Value	Effects	Provided By
Primary Color `Brand > Primary Color`	`--ads-brand-primary-color`	`#122549`	All primary color applications	NOP CSS
Primary Color : Hover `Brand > Primary Color Hover`	`--ads-brand-primary-hover-color`	`#0d1d3b`	All primary color : hover applications	NOP CSS
Secondary Color `Brand > Secondary Color`	`--ads-brand-secondary-color`	`#16a2e4`	All secondary color applications	NOP CSS
Secondary Color : Hover `Brand > Secondary Color Hover`	`--ads-brand-secondary-hover-color`	`#1094d1`	All secondary color : hover applications	NOP CSS
Tertiary Color `Brand > Tertiray Color`	`--ads-brand-tertiary-color`	`#7ab202`	All tertiary color applications	NOP CSS
Tertiary Color : Hover `Brand > Tertiary Color Hover`	`--ads-brand-tertiary-hover-color`	`#649102`	All tertiary color : hover applications	Theme Designer Base Theme
Text Color `Brand > Text Color`	`--ads-brand-text-color`	`#231f20`	All body copy and headers unless set in another scope	NOP CSS
Black `(not user definable)`	`--ads-brand-black`	`#000`	Populates the color swatch selector in Theme Designer App with a black color option	Theme Designer App
White `(not user definable)`	`--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 `(not user definable)`	`--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 `(not user definable)`	`--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 `(not user definable)`	`--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 `Brand > 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 - NOP and Public UI

Header props set both the Cloud Header styles and the Simple Header styles (where applicable)

Property / Path in TD

CSS Custom Prop

Default Value

Effects

Provided By

Font Family

Header > Font Family

--ads-header-fontfamily

--ads-brand-primary-fontfamily

All fonts in the Cloud Header and Simple Header

Theme Designer Base Theme

Background Color

Header > Background Color

--ads-header-backgroundcolor

--ads-color-white

Header background color

NOP CSS

Text Color

Header > Nav > Item > Text > Color

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

#231f20

Header text color

NOP CSS

Background Color

Header > Nav > Item > Hover > Backgroud Color

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

--ads-color-grey15

Link item background hover color

NOP CSS

Background Color

Header > Nav > Item > Focus > Background Color

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

--ads-color-grey15

Link item background focus color

NOP CSS

Text Color

Header > Nav > Item > Text > Active > Color

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

#231f20

Link item active text color

NOP CSS

Background Color

Header > Subcategory > Drawer > Background Color

--ads-header-subcategory-drawer-backgroundcolor

--ads-color-white

Header drawer background color

NOP CSS

Background Color

Header > Subcategory > Drawer > Nav > Item > Hover > Background Color

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

--ads-color-grey15

Header drawer item hover background color

NOP CSS

Background Color

Header > Subcategory > Drawer > Nav > Item > Focus > Background Color

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

--ads-color-grey15

Header drawer item focus background color

NOP CSS

Text Color

Header > Subcategory > Drawer > Nav > Item > Text > Color

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

#000

Header drawer color item text color

NOP CSS

Box Shadow / Drop Shadow

Header > Subcategory > Drawer > Drop Shadow

--ads-header-subcategory-drawer-boxshadow

Code Block
0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)

Header drawer drop shadow

NOP CSS

Text Transform

Header > Text > text Transform

--ads-header-text-texttransform

none

The font casing for the header (upper, lower, capital, none/inherit)

NOP CSS

Color

Header > Menu > Button > Color

--ads-header-menu-button-color

#231f20

Header menu button icon color

NOP CSS

Background Color

Header > Menu > Button > Hover > Background Color

--ads-header-menu-button-hover-backgroundcolor

--ads-color-grey15

Header menu button background hover color

NOP CSS

Background Color

Header > Menu > Button > Focus > Background Color

--ads-header-menu-button-focus-backgroundcolor

--ads-color-grey15

Header menu button background focus color

NOP CSS

Color

Header > Cart > Icon > Badge > Color

--ads-header-cart-icon-badge-color

hsl(216, 43%, 46%)

Header Cart icon badge color

NOP CSS

Color

Header > Cart > Icon > Color

--ads-header-cart-icon-color

--ads-header-menu-button-color/#231f20

Header Cart icon color

NOP CSS

Image

Header > Cart > Logo > Image

--ads-header-logo-image

url('https://awro-dev.aspenware.net/themes/PeakResort/content/images/logo.png');

Header Logo image

NOP CSS

Width

Header > Logo > Width

--ads-header-logo-width

180px

Header Logo width

NOP CSS

C. Sidebar - NOP and Public UI

Side props set the Cloud Header styles

Property	CSS Custom Prop	Default Value	Effects	Provided By
Background Color `Sidebar > Banner > Background Color`	`--ads-sidebar-banner-backgroundcolor`	`--ads-color-white`	Cloud sidebar background color	NOP CSS
Color `Sidebar > Banner > Link > Color`	`--ads-sidebar-banner-link-color`	`#231f20`	Cloud sidebar banner link color	NOP CSS
Background Color `Sidebar > Banner > Link > Hover > Background Color`	`--ads-sidebar-banner-link-hover-backgroundcolor`	`--ads-color-grey15`	Cloud sidebar banner link hover color	NOP CSS
Text Transform `Sidebar > Banner > Text > Text Transform`	`--ads-sidebar-banner-text-texttransform`	`none`	The font casing for the cloud sidebar banner text (upper, lower, capital, none/inherit)	NOP CSS
Text Color `Sidebar > Nav > Item > Text > Color`	`--ads-sidebar-nav-item-text-color`	`#231f20`	Cloud sidebar item text color	NOP CSS
Text Transform `Sidebar > Nav > Item > Text > Transform`	`--ads-sidebar-nav-item-text-texttransform`	`none`	The font casing for the cloud sidebar items (upper, lower, capital, none/inherit)	NOP CSS
Background Color `Sidebar > Nav > Item > Hover > Background Color`	`--ads-sidebar-nav-item-hover-backgroundcolor`	`--ads-color-grey15`	Cloud sidebar items hover color	NOP CSS
Background Color `Sidebar > Nav > Item > Focus > Background Color`	`--ads-sidebar-nav-item-focus-backgroundcolor`	`--ads-color-grey15`	Cloud sidebar items focus color	NOP CSS
Image `Sidebar > Banner > Logo > Image`	`--ads-sidebar-banner-logo-image`	`url('https://awro-dev.aspenware.net/themes/PeakResort/content/images/logo-sidenav.png');`	Cloud Sidebar header logo	NOP CSS
Width `Sidebar > Banner > Logo > Width`	`--ads-sidebar-banner-logo-width`	`3rem`	Cloud Sidebar header logo width	NOP CSS

D. Page Properties - NOP and Public UI

Specific page level properties

Property / Path

CSS Custom Prop

Default Value

Effects

Provided By

Global

Box Shadow / Drop Shadow

Page > Dropshadow

--ads-page-boxshadow

0 0 7px rgba(42, 29, 19, 0.33)

Sets the drop-shadow on the page container. Can set to none to remove it for a “flat” page look

Theme Designer Base Theme

Background Color

Page > Background Color

--ads-page-

backgroundcolorp

backgroundcolor

(the “p” on the end is intentional - it tells TD to render a Color Picker instead of the default Swatch Selector)

#f3f2f1

Sets the global page background color

Theme Designer Base Theme

Login Page

Minicart
`Page > Cart > Continueshopping > Text Transform`	`--ads-page-cart-continueshopping-texttransform`	`Uppercase`	Sets the text transform for the Continue Shopping Button in the Minicart	NOP CSS
Login Page
Background Image `Page > Login> Background Image`	`--ads-page-login-backgroundimage`	`--ads-page-checkout-backgroundimage`	Sets the Login Page Background Image (non-Identity)	Theme Designer Base Theme
Account Page (Auth0)
Background Image `Page >`

Account

Accounts > Hero > Background Image

--ads-page-

account

accounts-hero-backgroundimage

url('https://awaccountsdatashared.blob.core.windows.net/shared/bg--aspenware.jpg')url('../images/half-hero-default-1920.jpg')

Sets the Half Hero on the Account Pages

Theme Designer Base Theme

Checkout Page

Background Color

Page > Checkout > Header > Background Color

Logo Image

Page > Accounts > Voucher > Logo Image

--ads-page-

checkout

accounts-

header

voucher-

backgroundcolor

--ads-brand-primary-color

Sets the checkout page header background color

Theme Designer Base Theme

Text Color

Page > Checkout > Header > Text Color

`logo-image`		Sets the Logo Image on the Vouchers in Accounts	Public UI
Background Image `Page > Accounts > Background Image`	`--ads-page-`

checkout

accounts-

header

background-

text-color

#fff

Sets the checkout page header default text color

Theme Designer Base Theme

Color

Page > Checkout > Header > Text > Active > Color

`image`	`url('https://awaccountsdatashared.blob.core.windows.net/shared/bg--aspenware.jpg')`	Sets the background image for Accounts Pages	Public UI
Logo Image `Page > Accounts > Logo Image`	`--ads-page-`

checkout

accounts-

header-text-active-color

--ads-brand-secondary-color

Sets the checkout page header active text color

Theme Designer Base Theme

Background Color

Page > Checkout > Footer > Background Color

`logo-image`	`url('https://awaccountsdatashared.blob.core.windows.net/shared/logo-sidenav.png')`	Sets the Logo Image for Accounts Pages	Public UI
Width `Page > Accounts > Logo Image > Desktop > Width`	`--ads-page-accounts-`

checkout

logo-

footer

desktop-

backgroundcolor

--ads-brand-primary-color

Sets the checkout page footer background color

Theme Designer Base Theme

Background Color

Page > Checkout > Footer > Button > Background Color

`width`	`70%`	Sets the logo width for accounts pages on desktop. Logo Height is automatically set proportionally to width.	Public UI
Width `Page > Accounts > Logo Image > Mobile > Width`	`--ads-page-`

checkout

accounts-

footer

logo-

button

mobile-

backgroundcolor

width

var(--ads-

brand

header-

secondary

logo-

color

width)

Sets the

checkout page footer button background color

Theme Designer Base Theme

Text

logo width for accounts pages on mobile. Logo Height is automatically set proportionally to width.	Public UI
Color `Page >`

Checkout

Accounts >

Footer > Button

Mask >

Text

Color

--ads-page-

checkout

accounts-

footer-button-textcolor

`mask-color`	`#000`	Sets the mask overlay color for the accounts page image	Public UI
Opacity `Page > Accounts > Mask > Opacity`	`--ads-`

brand-white

Sets the checkout page footer button textcolor

Theme Designer Base Theme

Logo Image

Page > Checkout > Header > Logo Image

`page-accounts-mask-opacity`	`.6`	Sets the mask overlay opacity for the accounts page image	Public UI
Color `Page > Accounts > Button > Color`	`--ads-page-`

checkout

accounts-

header

button-

logo-image

Logo Height

Page > Checkout > Header > Logo height

color

url('https://awro-dev.aspenware.net/themes/PeakResort/content/images/logo.png')

Sets the checkout page header logo image

Theme Designer Base Theme

`var(--ads-brand-primary-color)`	Sets the primary button background color for the Accounts pages	Public UI
Color `Page > Accounts > Button > Text Color`	`--ads-page-`

checkout

accounts-

header

button-

logo

text-

height

100px

Sets the checkout page header logo height

Theme Designer Base Theme

Background Image

color

var(--ads-brand-white, #fff)

Sets the primary button text color for the Accounts pages

Public UI

Checkout

Background Color

Page > Checkout >

Background

Header > Background

Image

Color

--ads-page-checkout-

background

header-

backgroundimageurl('../images/checkout-background.jpg')

backgroundcolor

--ads-brand-primary-color

Sets the checkout page header background

image

color

Theme Designer Base Theme

PDP

Background

Text Color

Page >

PDP

Checkout >

Buttons

Header >

Radio > Background

Text Color

--ads-page-

pdp

checkout-

buttons

header-

radio

text-

backgroundcolor--ads-buttons-primary-backgroundcolor

color

#fff

Sets the

radio button active background

checkout page header default text color

Theme Designer Base Theme

Font Family

Color

Page >

PDP

Checkout > Header >

Card

Text >

Title

Active >

Font Family

Color

--ads-page-checkout-

pdp

header-

card

text-

title

active-

fontfamily

color

--ads-brand-

primary

secondary-

fontfamily

color

Sets the

PDP

checkout page

checkout card header font family

header active text color

Theme Designer Base Theme

Background Color

Page >

PDP

Checkout >

Card

Footer >

Title >

Background Color

--ads-page-

pdp

checkout-

options

footer-

title-color

backgroundcolor

--ads-brand-primary-color

Sets the

PDP

checkout page

options title

footer background color

Theme Designer Base Theme

Background Color

Page >

PDP

Checkout >

Buttons

Footer >

Checkout

Button > Background Color

--ads-page-

pdp

checkout-

buttons

footer-

checkout

button-backgroundcolor

--ads-

buttons

brand-

primary

secondary-

backgroundcolor

color

Sets the

PDP

checkout page

checkout

footer button background color

Theme Designer Base Theme

Display (Hero)

Text Color

Page >

PDP

Checkout >

Hero

Footer >

Dynamic

Button >

Display

Text Color

--ads-page-

pdp

checkout-

hero

footer-

dynamic

button-

herodisplay

none

Sets the CSS display type [none, block] for the dynamic here on the PDP pages. Setting to block will display the dynamic hero and hide the static one.

Theme Designer Base Theme

PLP

Background Color

Page > PLP > Container > Background Color

textcolor

--ads-brand-white

Sets the checkout page footer button textcolor

Theme Designer Base Theme

Logo Image

Page > Checkout > Header > Logo Image

--ads-page-

plp

checkout-header-

container

logo-

backgroundcolorp

image

(the “p” on the end is intentional - it tells TD to render a Color Picker instead of the default Swatch Selector)

--ads-brand-white

Sets the PLP Page container background color

url('https://awro-dev.aspenware.net/themes/PeakResort/content/images/logo.png')

Sets the checkout page header logo image

Theme Designer Base Theme

Text Color

Logo Height

Page >

PLP

Checkout >

Cards > Button > Text Color

Header > Logo height

--ads-page-

plp

checkout-

cards

header-

button

logo-

textcolor--ads-brand-white

height

100px

Sets the

PLP Page card button text color

checkout page header logo height

Theme Designer Base Theme

Text Color

Background Image

Page >

PLP

Checkout >

Cards > Price > Text Color

Background > Background Image

--ads-page-

plp

checkout-

cards

background-

price-textcolor

--ads-brand-secondary-color

Sets the PLP Page card price text color

`backgroundimage`	`url('../images/checkout-background.jpg')`	Sets the checkout page background image	Theme Designer Base Theme
PDP

Text

Background Color

Page >

PLP

PDP >

Cards

Buttons >

Button

Radio >

Hover > Text

Background Color

--ads-page-

plp

pdp-

cards

buttons-

button

radio-

hover-textcolor

backgroundcolor

--ads-

brand

buttons-primary-

white

backgroundcolor

Sets the

PLP Page card button hover text

radio button active background color

Theme Designer Base Theme

Background Color

Font Family

Page >

PLP

PDP >

Cards

Card >

Button

Title >

Background Color

Font Family

--ads-page-

plp

pdp-

cards

card-

button

title-

backgroundcolor

fontfamily

--ads-brand-

secondary

primary-

color

fontfamily

Sets the

PLP Page card button default background color

PDP page checkout card header font family

Theme Designer Base Theme

Background

Color

Page >

PLP > Cards > Button > Hover > Background

PDP > Title > Color

--ads-page-

plp

pdp-

cards-button-hover-backgroundcolor

title-color

--ads-

brand

headings-

secondary-hover-

color`

Sets the

PLP Page cards button hover background color

PDP page title color.

Theme Designer Base Theme

Font Family

Color

Page >

PLP

PDP >

Cards

Card >

Header

Title >

Font Family

Color

--ads-page-

plp

pdp-

cards

options-

header

title-

fontfamily

color

--ads-brand-

headings

primary-

fontfamily

color

Sets the

PLP Page cards header font family

PDP page options title color

Theme Designer Base Theme

Font Family

Background Color

Page >

PLP

PDP >

Cards

Buttons >

Button

Checkout >

Font Family

Background Color

--ads-page-

plp

pdp-

cards

buttons-

button

checkout-

fontfamily

backgroundcolor

--ads-

brand

buttons-primary-

fontfamily

backgroundcolor

Sets the

PLP Page cards button font family

PDP page checkout button background color

Theme Designer Base Theme

Font Family

Display (Hero)

Page >

PLP

PDP >

Cards

Hero >

Price

Dynamic >

Font Family

Display

--ads-page-

plp

pdp-

cards

hero-

price

dynamic-

fontfamily

--ads-brand-secondary-fontfamily

Sets the PLP Page cards price font family

herodisplay

none

Sets the CSS display type [none, block] for the dynamic here on the PDP pages. Setting to block will display the dynamic hero and hide the static one.

Theme Designer Base Theme

Font Family

Text Transform

Page >

PLP

PDP >

Cards

Product >

Body

Title >

Font Family

Text Transform

--ads-page-

plp

pdp-

cards

product-

body

title-

fontfamily

--ads-brand-primary-fontfamily

Sets the PLP Page cards body copy font family

Theme Designer Base Theme

Color

Page > PLP > Cards > Header > Color

texttransform

none

Sets the text transform variant for the PDP Product title in Public UI

Public UI

Text Transform

Page > PDP > Attribute > Title > Text Transform

--ads-page-

plp

pdp-

cards

attribute-

header

title-

color

--ads-headings-color

Sets the PLP Page cards header color

Theme Designer Base Theme

texttransform

none

Sets the text transform variant for the PDP Attribute title in Public UI

Pubic UI

PLP

Background Color

Page > PLP >

Cards > Button > Text

Container > Background Color

--ads-page-plp-

cards-button-text'Shop Now'

container-backgroundcolor

(the “p” on the end is intentional - it tells TD to render a Color Picker instead of the default Swatch Selector)

--ads-brand-white

Sets the PLP Page

cards action button copy

container background color

Theme Designer Base Theme

Display (Hero)

Text Color

Page > PLP >

Hero

Cards >

Dynamic

Button >

Display

Text Color

--ads-page-plp-

hero

cards-

dynamic

button-

herodisplay

none

Sets the CSS display type [none, block] for the dynamic here on the PLP pages. Setting to block will display the dynamic hero and hide the static one.

textcolor

--ads-brand-white

Sets the PLP Page card button text color

Theme Designer Base Theme

Background Image

Text Color

Page > PLP >

Hero

Cards >

Static

Price >

Background Image

Text Color

--ads-page-plp-

hero

cards-

static

price-

backgroundimageurl('../images/default-category-hero.jpg')

textcolor

--ads-brand-secondary-color

Sets the PLP

and PDP Page static hero background image

Page card price text color

Theme Designer Base Theme

Height

Text Color

Page > PLP > Cards > Button >

Hero

Hover >

Hero Height

Text Color

--ads-page-plp-cards-button-

hero

hover-

heroheight

285px

Sets the PLP page hero height with the following options: ['285px', '400px', '550px']

'285px' = Short Hero

'400px' = Medium Hero

'550px' = Tall Hero

Theme Designer Base Theme

E. Headings

These properties apply to the H1 - H5 headings globally

Property

CSS Custom Prop

Default Value

Effects

Provided By

Font Family

--ads-headings-fontfamily

`textcolor`	`--ads-brand-white`	Sets the PLP Page card button hover text color	Theme Designer Base Theme
Background Color `Page > PLP > Cards > Button > Background Color`	`--ads-page-plp-cards-button-backgroundcolor`	`--ads-brand-secondary-color`	Sets the PLP Page card button default background color	Theme Designer Base Theme
Background Color `Page > PLP > Cards > Button > Hover > Background Color`	`--ads-page-plp-cards-button-hover-backgroundcolor`	`--ads-brand-secondary-hover-color`	Sets the PLP Page cards button hover background color	Theme Designer Base Theme
Font Family `Page > PLP > Cards > Header > Font Family`	`--ads-page-plp-cards-header-fontfamily`	`--ads-headings-fontfamily`	Sets the PLP Page cards header font family	Theme Designer Base Theme
Font Family `Page > PLP > Cards > Button > Font Family`	`--ads-page-plp-cards-button-fontfamily`	`--ads-brand-primary-fontfamily`	Sets the PLP Page cards button font family	Theme Designer Base Theme
Font Family `Page > PLP > Cards > Price > Font Family`	`--ads-page-plp-cards-price-fontfamily`	`--ads-brand-secondary-fontfamily`	Sets the PLP Page cards price font family	Theme Designer Base Theme
Font Family `Page > PLP > Cards > Body > Font Family`	`--ads-page-plp-cards-body-fontfamily`	`--ads-brand-primary-fontfamily`	Sets the PLP Page cards body copy font family	Theme Designer Base Theme
Color `Page > PLP > Cards > Header > Color`	`--ads-page-plp-cards-header-color`	`--ads-headings-color`	Sets the PLP Page cards header color	Theme Designer Base Theme
Color `Page > PLP > Cards > Button > Text`	`--ads-page-plp-cards-button-text`	`'Shop Now'`	Sets the PLP Page cards action button copy	Theme Designer Base Theme
Display (Hero) `Page > PLP > Hero > Dynamic > Display`	`--ads-page-plp-hero-dynamic-herodisplay`	`none`	Sets the CSS display type `[none, block]` for the dynamic here on the PLP pages. Setting to `block` will display the dynamic hero and hide the static one.	Theme Designer Base Theme
Background Image `Page > PLP > Hero > Static > Background Image`	`--ads-page-plp-hero-static-backgroundimage`	`url('../images/default-category-hero.jpg')`	Sets the PLP and PDP Page static hero background image	Theme Designer Base Theme
Height `Page > PLP > Hero > Hero Height`	`--ads-page-plp-hero-heroheight`	`285px`	Sets the PLP page hero height with the following options: `['285px', '400px', '550px']` `'285px' = Short Hero` `'400px' = Medium Hero` `'550px' = Tall Hero`	Theme Designer Base Theme

E. Headings

These properties apply to the H1 - H5 headings globally

Property	CSS Custom Prop	Default Value	Effects	Provided By
Font Family	`--ads-headings-fontfamily`	`--ads-brand-primary-fontfamily`	Sets the global font family to apply to the site headings [H1 - H5 unless overridden elsewhere]	Theme Designer Base Theme
Font Color	`--ads-headings-color`	`--ads-brand-text-color`	Sets the global color to apply to the site headings [H1 - H5 unless overridden elsewhere]	Theme Designer Base Theme

F. Buttons - NOP and Public UI

These properties apply to the default global button styles

Property	CSS Custom Prop	Default Value	Effects	Provided By
Text Color `Buttons > Primary > Text Color`	`--ads-buttons-primary-textcolor`	`#fff`	Sets the global primary button text color	Theme Designer Base Theme
Background Color `Buttons > Primary > Background Color`	`--ads-buttons-primary-backgroundcolor`	`--ads-brand-primary-color`	Sets the global primary button background color	Theme Designer Base Theme
Border Color `Buttons > Primary > Border Color`	`--ads-buttons-primary-bordercolor`	`--ads-brand-primary-color`	Sets the global primary button border color	Theme Designer Base Theme
Text Color `Buttons > Secondary > Text Color`	`--ads-buttons-secondary-textcolor`	`--ads-brand-secondary-color`	These preset as ghost buttons. The text color property sets both the text color and the border.	Theme Designer Base Theme

G. Loader Spinner

These properties apply to the global page loader

Property

CSS Custom Prop

Default Value

Effects

Provided By

Background Color

Loader > Background Color

--ads-loader-backgroundcolor

(the “p” on the end is intentional - it tells TD to render a Color Picker instead of the default Swatch Selector)

#fff

Sets the global loader background color

Only shows the color if the loader image has a transparent background – otherwise the image background is shown

Theme Designer Base Theme

Image

Loader > Image

--ads-loader-image

url('../images/logo-mark-spinner.png')

Sets the global loader image

Theme Designer Base Theme

H. Plugins - NOP and Public UI

These properties apply to the various NOP Plugins

Property	CSS Custom Prop	Default Value	Effects	Provided By
Voucher (Toolbar)
Background Color `Plugins > Voucher > Toolbar > Background Color`	`--ads-plugins-voucher-toolbar-backgroundcolor`	`--ads-brand-grey10`	Sets the background color for the Voucher toolbar [plugin]	Theme Designer Base Theme
Background Color `Plugins > Voucher > Toolbar > Button > Background Color`	`--ads-plugins-voucher-toolbar-button-backgroundcolor`	`--ads-brand-secondary-color`	Sets the button background color for the Voucher toolbar [plugin]	Theme Designer Base Theme
Text Color `Plugins > Voucher > Toolbar > Label > Text Color`	`--ads-plugins-voucher-toolbar-label-textcolor`	`--ads-brand-text-color`	Sets the label color for the Voucher toolbar [plugin]	Theme Designer Base Theme
Font Family `Plugins > Voucher > Toolbar > Font Family`	`--ads-plugins-voucher-toolbar-fontfamily`	`--ads-brand-primary-fontfamily`	Sets the font family for the Voucher toolbar [plugin]	Theme Designer Base Theme
Loyalty (FAB)
Background Color `Plugins > Loyalty > FAB > Toggle > Background Color`	`--ads-plugins-loyalty-fab-toggle-backgroundcolor`	`--ads-brand-secondary-color`	Sets the toggle background color for the Loyalty FAB [plugin]	Theme Designer Base Theme
Background Color `Plugins > Loyalty > FAB > Footer > Background Color`	`--ads-plugins-loyalty-fab-footer-backgroundcolor`	`--ads-brand-grey10`	Sets the footer background color for the Loyalty FAB [plugin]	Theme Designer Base Theme
Text Color `Plugins > Loyalty > FAB > Footer > Link > Text Color`	`--ads-plugins-loyalty-fab-footer-link-textcolor`	`--ads-brand-link-color`	Sets the footer link/text color for the Loyalty FAB [plugin]	Theme Designer Base Theme
Text Color `Plugins > Loyalty > FAB > Body > Text Color`	`--ads-plugins-loyalty-fab-body-textcolor`	`--ads-brand-primary-`

fontfamily

color

Sets the

global font family to apply to the site headings

body text color for the Loyalty FAB [plugin]

Theme Designer Base Theme

Font Color

Top (Position)

Plugins > Loyalty > FAB > Position > Top

--ads-

headings

plugins-

color

loyalty-fab-

ads-brand-text-color

position-top

20px

Sets the

global color to apply to the site headings

Property

CSS Custom Prop

Default Value

Effects

Provided By

Text Color

Buttons > Primary > Text Color

desktop “top” position for the Loyalty FAB [plugin]

Theme Designer Base Theme

F. Buttons

These properties apply to the default global button styles

Right (Position)

Plugins > Loyalty > FAB > Position > Right

--ads-plugins-loyalty-

buttons

fab-

primary

position-

textcolor

right

#fff

10px

Sets

the global primary button text color

the desktop “right” position for the Loyalty FAB [plugin]

Theme Designer Base Theme

Background Color

Buttons > Primary > Background Color

Top (Position)

Plugins > Loyalty > FAB > Position > Mobile > Top

--ads-

buttons

plugins-

primary

loyalty-

backgroundcolor

fab-position-

ads-brand-primary-colorSets the global primary button background color--ads-buttons-primary-bordercolor

mobile-top

20px

Sets the mobile “top” position for the Loyalty FAB [plugin]

Theme Designer Base Theme

Border Color

Buttons > Primary > Border Color

Right (Position)

Plugins > Loyalty > FAB > Position > Mobile > Right

--ads

-brand-primary-colorSets the global primary button border colorButtons > Secondary > Text Color

-plugins-loyalty-fab-position-mobile-right

10px

Sets the mobile “right” position for the Loyalty FAB [plugin]

Theme Designer Base Theme

Text Color

Image

Plugins > Loyalty > FAB > Logo > Image

--ads-

buttons

plugins-

secondary

loyalty-

textcolor

fab-

-ads-brand-secondary-colorThese preset as ghost buttons. The text color property sets both the text color and the border.

Property

CSS Custom Prop

Default Value

Effects

Provided By

logo-image

url('../images/rewards.svg')

Sets the logo image for the Loyalty FAB [plugin]

Theme Designer Base Theme

G. Loader Spinner

These properties apply to the global page loader

Simple Footer
Background Color

Loader

Plugins > Simple Footer > Background Color

--ads-

loader-backgroundcolorp

(the “p” on the end is intentional - it tells TD to render a Color Picker instead of the default Swatch Selector)

#fff

Sets the global loader background color

Only shows the color if the loader image has a transparent background – otherwise the image background is shownLoader > Image

plugins-simplefooter-backgroundcolor

--ads-brand-primary-color

Sets the background color for the simple footer [NOP Widget]

Theme Designer Base Theme

Image

Text Color

Plugins > Simple Footer > Text Color

--ads-plugins-

loader

simplefooter-

image

url('../images/logo-mark-spinner.png')

Sets the global loader image

Property

CSS Custom Prop

Default Value

Effects

Provided By

Background Color

Plugins > Voucher > Toolbar > Background Color

textcolor

--ads-brand-white

Sets the text color for the simple footer [NOP Widget]

Theme Designer Base Theme

H. Plugins

These properties apply to the various NOP Plugins

Image (Logo)

Plugins > Simple Footer > Logo Image

--ads-plugins-

voucher

simplefooter-

toolbar

logo-

backgroundcolor

image

--ads-header-

brand

logo-

grey10

image

Sets the

background color

logo for the

Voucher toolbar [plugin

simple footer [NOP Widget]

Theme Designer Base Theme

Brand Footer

Background Color

Plugins >

Voucher > Toolbar > Button

Brand Footer > Background Color

--ads-plugins-

voucher-toolbar-button

brandfooter-backgroundcolor

--ads-brand-secondary-color

unset

Sets the

button

background color for the

Voucher toolbar [plugin]

brand footer [NOP Widget] if implemented by a resort.

Theme Designer Base Theme

Text Color

Plugins >

Voucher

Brand Footer >

Toolbar

Header >

Label >

Text Color

--ads-plugins-

voucher

brandfooter-

toolbar

header-

label-

textcolor

--ads-brand-text-color

unset

Sets the

label

header text color for the

Voucher toolbar [plugin]

brand footer [NOP Widget] if implemented by a resort.

Theme Designer Base Theme

Font Family

Text Color

Plugins >

Voucher

Brand Footer >

Toolbar

Body >

Font Family

Text Color

--ads-plugins-

voucher

brandfooter-

toolbar

body-

fontfamily--ads-brand-primary-fontfamily

textcolor

unset

Sets the

font family

body text color for the

Voucher toolbar [plugin]

brand footer [NOP Widget] if implemented by a resort.

Theme Designer Base Theme

Loyalty (FAB)

Background

Text Color

Plugins >

Loyalty > FAB > Toggle > Background Color--ads-plugins-loyalty-fab-toggle-backgroundcolor

Brand Footer > Link > Text Color

--ads-

brand

plugins-brandfooter-

secondary

link-

color

textcolor

unset

Sets the

toggle background

link text color for the

Loyalty FAB [plugin]

brand footer [NOP Widget] if implemented by a resort.

Theme Designer Base Theme

Background

Text Color

Plugins >

Loyalty

Brand Footer >

FAB

Link >

Footer

Hover >

Background

Text Color

--ads-plugins-

loyalty

brandfooter-

fab

link-

footer

hover-

backgroundcolor--ads-brand-grey10

textcolor

unset

Sets the

footer background

link hover color for the

Loyalty FAB [plugin]

brand footer [NOP Widget] if implemented by a resort.

Theme Designer Base Theme

Text Color

image (Logo)

Plugins >

Loyalty > FAB >

Brand Footer >

Link

Logo >

Text Color

Image

--ads-plugins-

loyalty

brandfooter-

fab-footer-link-textcolor

logo-image

--ads-

brand

header-

link

logo-

color

image

Sets the logo image for the

footer link/text color for the Loyalty FAB [plugin]

Theme Designer Base Theme

Text Color

Plugins > Loyalty > FAB > Body > Text Color

brand footer [NOP Widget] if implemented by a resort.

Theme Designer Base Theme

I. Favicons - NOP and Public UI

These properties apply to the site Favicons

Property

CSS Custom Prop

Default Value

Effects

Provided By

Favicon

Brand > Favicons > Ico Favicon

--ads-

plugins

brand-

loyalty

favicons-

fab

ico-

body-textcolor

--ads-brand-primary-color

Sets the body text color for the Loyalty FAB [plugin]Plugins > Loyalty > FAB > Position > Top

favicon

unset

Sets the default .ico low resolution favicon path

Theme Designer Base Theme

Top (Position)

Favicon

Brand > Favicons > 16x16 Favicon

--ads-

plugins

brand-

loyalty

favicons-

fab

16x16-

position-top

favicon

20px

unset

Sets the

desktop “top” position for the Loyalty FAB [plugin]Plugins > Loyalty > FAB > Position > Right

16 x 16 resolution favicon path

Theme Designer Base Theme

Right (Position)

Favicon

Brand > Favicons > 32x32 Favicon

--ads-

plugins

brand-

loyalty

favicons-

fab

32x32-

position-right

favicon

10px

unset

Sets the

desktop “right” position for the Loyalty FAB [plugin]

32 x 32 resolution favicon path

Theme Designer Base Theme

Top (Position)

Plugins > Loyalty > FAB > Position > Mobile > Top

Favicon

Brand > Favicons > 48x48 Favicon

--ads-

plugins

brand-

loyalty

favicons-

fab-position-mobile-top

20px

Sets the mobile “top” position for the Loyalty FAB [plugin]

Theme Designer Base Theme

Right (Position)

Plugins > Loyalty > FAB > Position > Mobile > Right

--ads-plugins-loyalty-fab-position-mobile-right

10px

Sets the mobile “right” position for the Loyalty FAB [plugin]

48x48-favicon

unset

Sets the 48 x 48 resolution favicon path

Theme Designer Base Theme

J. Tabs - NOP Only

These properties apply to the site tab properties on the PDP

Property

CSS Custom Prop

Default Value

Effects

Provided By

Background Color

Brand > Tabs > Active > Background Color

--ads-tabs-active-backgroundcolor

--ads-brand-white

Sets the tab active background color

Theme Designer Base Theme

Image

Background Color

Plugins

Brand >

Loyalty

Tabs >

FAB > Logo > Image

Active > Background Color

--ads-tabs-bar-backgroundcolor

--ads-

plugins

brand-

loyalty-fab-logo-image

url('../images/rewards.svg')

Sets the logo image for the Loyalty FAB [plugin]Background

primary-color

Sets the tab bar background color

Theme Designer Base Theme

Simple Footer

Text Color

Plugins > Simple Footer > Background

Brand > Tabs > Text > Active > Text Color

--ads-

plugins

tabs-text-

simplefooter

active-

backgroundcolor

textcolor

--ads-brand-primary-color

Sets the

background color for the simple footer [NOP Widget]

active tab text	Theme Designer Base Theme
Text Color

Plugins > Simple Footer

Brand > Tabs > Text > Text Color

--ads-

plugins

tabs-

simplefooter

text-textcolor

--ads-brand-white

Sets the default tab text color

for the simple footer [NOP Widget]

Theme Designer Base Theme

Image (Logo)

Plugins > Simple Footer > Logo Image

K. Calendar - Public UI Only

These properties apply to global Input variables

Property

CSS Custom Prop

Default Value

Effects

Provided By

Text Transform

Calendar > Title > Text Transform

--ads-

plugins-simplefooter-logo-image--ads-header-logo-image

calendar-title-texttransform

capitalize

Sets the

logo

text transform variant for the

simple footer [NOP Widget]

Theme Designer Base Theme

Brand Footer

Background Color

Plugins > Brand Footer > Background Color

Public UI Calendar Title

Public UI

Text Transform

Calendar > Title > Text Transform

--ads-

plugins

calendar-

brandfooter

month-

backgroundcolor

texttransform

unset

capitalize

Sets the

background color for the brand footer [NOP Widget] if implemented by a resort.

Theme Designer Base Theme

Text Color

Plugins > Brand Footer > Header > Text Color

text transform variant for the Public UI Calendar Month text

Public UI

Text Transform

Calendar > Title > Text Transform

--ads-

plugins

calendar-

brandfooter

legend-

header-textcolor

texttransform

unset

capitalize

Sets the

header

text

color for the brand footer [NOP Widget] if implemented by a resort.

Theme Designer Base Theme

Text Color

Plugins > Brand Footer > Body > Text Color

transform variant for the Public UI Calendar Legend text

Public UI

L. Inputs - Public UI Only

These properties apply to global Input variables

Property

CSS Custom Prop

Default Value

Effects

Provided By

Text Transform

Input > Attribute > Title > Text Transform

--ads-

plugins

input-

brandfooter

attribute-

body

title-

textcolor

texttransform

unset

none

Sets the

body text color for the brand footer [NOP Widget] if implemented by a resort.

Theme Designer Base Theme

Text Color

Plugins > Brand Footer > Link > Text Color

input attribute title text transform variant for Checkbox Inputs in Public UI

Public UI

M. Border - Public UI Only

These properties apply to global border variables like radius, width, and color.

Property

CSS Custom Prop

Default Value

Effects

Provided By

Text Transform

Border > Border Radius

--ads-

plugins-brandfooter-link-textcolorunset

border-borderradius

none

Sets the

link text color for the brand footer [NOP Widget] if implemented by a resort.

Theme Designer Base Theme

Text Color

Plugins > Brand Footer > Link > Hover > Text

global base border radius for elements that inherit from this variable

Public UI

These properties apply to the breadcrumbs in Public UI

Property

CSS Custom Prop

Default Value

Effects

Provided By

Color

Breadcrumbs > Active > Color

--ads-breadcrumbs-active-colorp

-

plugins

-

brandfooter

adx-

link

color-

hover

grey-

textcolor

900

unset

Sets the

link hover

active color for the

brand footer [NOP Widget] if implemented by a resort.

Theme Designer Base Theme

image (Logo)

Plugins > Brand Footer > Logo > Image

breadcrumbs in Public UI

Public UI

Color

Breadcrumbs > Active > Hover > Color

--ads-

plugins

breadcrumbs-

brandfooter

active-

logo

hover-

image

colorp

--adx-

ads

color-

header

neutral-

logo

black-

image

400

Sets the

logo image for the brand footer [NOP Widget] if implemented by a resort.

Theme Designer Base Theme

I. Favicons

These properties apply to the site Favicons

Property

CSS Custom Prop

Default Value

Effects

Provided By

Background Color

Brand > Favicons > Ico Favicon

--ads-brand-favicons-ico-favicon

unset

Sets the default .ico low resolution favicon path

Theme Designer Base Theme

Brand > Favicons > 16x16 Favicon

--ads-brand-favicons-16x16-favicon

unset

Sets the 16 x 16 resolution favicon path

Theme Designer Base Theme

Brand > Favicons > 32x32 Favicon

--ads-brand-favicons-32x32-favicon

unset

Sets the 32 x 32 resolution favicon path

Theme Designer Base Theme

Brand > Favicons > 48x48 Favicon

--ads-brand-favicons-48x48-favicon

unset

Sets the 48 x 48 resolution favicon path

Theme Designer Base Theme

active hover color for the breadcrumbs in Public UI	Public UI
Color `Breadcrumbs > Inactive > Color`	`--ads-breadcrumbs-inactive-colorp`	`--adx-color-neutral-black-400`	Sets the inactive color for the breadcrumbs in Public UI	Public UI
Font Weight `Breadcrumbs > Font Weight`	`--ads-breadcrumbs-font-weight`	`--ads-font-weight-normal`	Sets the font weight for the breadcrumbs in Public UI	Public UI
Text Transform `Breadcrumbs > Text Transform`	`--ads-breadcrumbs-texttransform`	None	Sets the text transform variant for the breadcrumbs in Public UI	Public UI

Version	Old Version 12	New Version Current
Changes made by	Danny Gibas	Danny Gibas
Saved on	Aug 22, 2023	Jul 02, 2024

Versions Compared

Key

THIS DOCUMENT IS NOT MAINTAINED.

A. Colors - NOP and Public UI

B. Header - NOP and Public UI

C. Sidebar - NOP and Public UI

D. Page Properties - NOP and Public UI

Global

Login Page

Minicart

Login Page

Account Page (Auth0)

Checkout Page

Checkout

PDP

PLP

PDP

PLP

E. Headings

E. Headings

F. Buttons - NOP and Public UI

G. Loader Spinner

H. Plugins - NOP and Public UI

Loyalty (FAB)

F. Buttons

G. Loader Spinner

Simple Footer

H. Plugins

Brand Footer

Loyalty (FAB)

I. Favicons - NOP and Public UI

J. Tabs - NOP Only

Simple Footer

K. Calendar - Public UI Only

Brand Footer

L. Inputs - Public UI Only

M. Border - Public UI Only

I. Favicons

Page Comparison

Versions Compared

Key

THIS DOCUMENT IS NOT MAINTAINED.

A. Colors - NOP and Public UI

B. Header - NOP and Public UI

C. Sidebar - NOP and Public UI

D. Page Properties - NOP and Public UI

Global

Login Page

Minicart

Login Page

Account Page (Auth0)

Checkout Page

Checkout

PDP

PLP

PDP

PLP

E. Headings

E. Headings

F. Buttons - NOP and Public UI

G. Loader Spinner

H. Plugins - NOP and Public UI

Voucher (Toolbar)

Loyalty (FAB)

F. Buttons

G. Loader Spinner

Simple Footer

Voucher (Toolbar)

H. Plugins

Brand Footer

Loyalty (FAB)

I. Favicons - NOP and Public UI

J. Tabs - NOP Only

Simple Footer

K. Calendar - Public UI Only

Brand Footer

L. Inputs - Public UI Only

M. Border - Public UI Only

N. Breadcrumbs - Public UI Only

I. Favicons