Table of Contents

minLevel	1
maxLevel	6
outline	false
type	list
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-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

Background Image

Page > Login>

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

Logo Image

Page >

Checkout

Accounts >

Header

Voucher >

Background Color

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-`

checkout

accounts-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 > Text Color

Mask > 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-page-accounts-`

brand-white

mask-opacity

.6

Sets the mask overlay opacity for the

checkout

accounts page

footer button textcolor

Theme Designer Base Theme

Logo Image

image	Public UI
Color `Page >`

Checkout

Accounts >

Header

Button >

Logo Image

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 > Checkout >

PDP

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 >

Title

Footer > Background Color

--ads-page-

pdp

checkout-

title

footer-

color

backgroundcolor

--ads-brand-

headings

primary-color

`

Sets the

PDP

checkout page

title

footer background color

.

Theme Designer Base Theme

Background Color

Page >

PDP

Checkout >

Card

Footer >

Title

Button > Background Color

--ads-page-

pdp

checkout-

options

footer-

title

button-

color

backgroundcolor

--ads-brand-

primary

secondary-color

Sets the

PDP page options title

checkout page footer button background color

Theme Designer Base Theme

Background

Text Color

Page >

PDP

Checkout >

Buttons

Footer >

Checkout

Button >

Background

Text Color

--ads-page-

pdp

checkout-

buttons

footer-

checkout

button-

backgroundcolor

textcolor

--ads-

buttons

brand-

primary-backgroundcolor

white

Sets the

PDP

checkout page

checkout

footer button

background color

textcolor

Theme Designer Base Theme

Display (Hero)

Logo Image

Page >

PDP

Checkout >

Hero > Dynamic > Display

Header > Logo Image

--ads-page-

pdp

checkout-

hero

header-

dynamic

logo-

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.

image

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

Sets the checkout page header logo image

Theme Designer Base Theme

PLP

Background Color

Logo Height

Page >

PLP

Checkout >

Container

Header >

Background Color

Logo height

--ads-page-

plp

checkout-

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 container background color

header-logo-height

100px

Sets the checkout page header logo height

Theme Designer Base Theme

Text Color

Background Image

Page >

PLP

Checkout >

Cards > Button > Text Color

Background > Background Image

--ads-page-

plp

checkout-

cards

background-

button-textcolor

--ads-brand-white

Sets the PLP Page card button 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 >

Price

Radio >

Text

Background Color

--ads-page-

plp

pdp-

cards

buttons-

price

radio-

textcolor

backgroundcolor

--ads-

brand

buttons-

secondary

primary-

color

backgroundcolor

Sets the

PLP Page card price text

radio button active background color

Theme Designer Base Theme

Text Color

Font Family

Page >

PLP

PDP >

Cards

Card >

Button > Hover > Text Color

Title > Font Family

--ads-page-

plp

pdp-

cards

card-

button

title-

hover-textcolor

fontfamily

--ads-brand-

white

primary-fontfamily

Sets the

PLP Page card button hover text color

PDP page checkout card header font family

Theme Designer Base Theme

Background

Color

Page >

PLP

PDP >

Cards

Title >

Button > Background

Color

--ads-page-

plp

pdp-

cards

title-

button-backgroundcolor

color

--ads-

brand-secondary

headings-color`

Sets the

PLP Page card button default background color

PDP page title color.

Theme Designer Base Theme

Background

Color

Page >

PLP

PDP >

Cards

Card >

Button > Hover

Title >

Background

Color

--ads-page-

plp

pdp-

cards

options-

button

title-

hover-backgroundcolor

color

--ads-brand-

secondary-hover

primary-color

Sets the

PLP Page cards button hover background

PDP page options title color

Theme Designer Base Theme

Font Family

Background Color

Page >

PLP

PDP >

Cards

Buttons >

Header

Checkout >

Font Family

Background Color

--ads-page-

plp

pdp-

cards

buttons-

header

checkout-

fontfamily

backgroundcolor

--ads-buttons-

headings

primary-

fontfamily

backgroundcolor

Sets the

PLP Page cards header font family

PDP page checkout button background color

Theme Designer Base Theme

Font Family

Display (Hero)

Page >

PLP

PDP >

Cards

Hero >

Button

Dynamic >

Font Family

Display

--ads-page-

plp

pdp-

cards

hero-

button

dynamic-

fontfamily

--ads-brand-primary-fontfamily

Sets the PLP Page cards button 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 >

Price

Title >

Font Family

Text Transform

--ads-page-

plp

pdp-

cards

product-

price

title-

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

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-

body

title-

fontfamily

--ads-brand-primary-fontfamily

Sets the PLP Page cards body copy font family

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

Container >

Header >

Background Color

--ads-page-plp-

cards-header-color

container-backgroundcolor

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

--ads-

headings

brand-

color

white

Sets the PLP Page

cards header

container background color

Theme Designer Base Theme

Text Color

Page > PLP > Cards > Button > Text Color

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

text'Shop Now'

textcolor

--ads-brand-white

Sets the PLP Page

cards action

card button

copy

text color

Theme Designer Base Theme

Display (Hero)

Text Color

Page > PLP >

Hero

Cards >

Dynamic

Price >

Display

Text Color

--ads-page-plp-

hero

cards-

dynamic

price-

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-secondary-color

Sets the PLP Page card price text color

Theme Designer Base Theme

Background Image

Text Color

Page > PLP >

Hero

Cards > Button >

Static

Hover >

Background Image

Text Color

--ads-page-plp-

hero

cards-button-

static

hover-

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

textcolor

--ads-brand-white

Sets the PLP

and PDP Page static hero background image

Page card button hover text color

Theme Designer Base Theme

Height

Background Color

Page > PLP > Cards >

Hero

Button >

Hero Height

Background Color

--ads-page-plp-

hero

cards-button-

heroheight285px

backgroundcolor

--ads-brand-secondary-color

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

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-

primary

hover-

fontfamily

color

Sets the

global font family to apply to the site headings [H1 - H5 unless overridden elsewhere]

PLP Page cards button hover background color	Theme Designer Base Theme
Font Family

Font Color

Page > PLP > Cards > Header > Font Family

--ads

-headings-color

-page-plp-cards-header-fontfamily

--ads-

brand

headings-

text-color

fontfamily

Sets the

global color to apply to the site headings [H1 - H5 unless overridden elsewhere]

Property

CSS Custom Prop

Default Value

Effects

Provided By

Text Color

Buttons > Primary > Text Color

PLP Page cards header font family

Theme Designer Base Theme

F. Buttons

These properties apply to the default global button styles

Font Family

Page > PLP > Cards > Button > Font Family

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

--ads-

buttons

brand-primary-

textcolor

fontfamily

#fff

Sets the

global primary button text color

PLP Page cards button font family

Theme Designer Base Theme

Background Color

Buttons > Primary > Background Color

Font Family

Page > PLP > Cards > Price > Font Family

--ads-page-

buttons

plp-cards-

primary

price-

backgroundcolor

fontfamily

--ads-brand-

primary

secondary-

color

fontfamily

Sets the

global primary button background colorButtons > Primary > Border Color

PLP Page cards price font family

Theme Designer Base Theme

Border Color

Font Family

Page > PLP > Cards > Body > Font Family

--ads-page-

buttons

plp-cards-

primary

body-

bordercolor

fontfamily

--ads-brand-primary-

color

fontfamily

Sets the

global primary button border color

PLP Page cards body copy font family

Theme Designer Base Theme

Text

Color

Buttons > Secondary > Text

Page > PLP > Cards > Header > Color

--ads-

buttons-secondary-textcolor

page-plp-cards-header-color

--ads-

brand

headings-

secondary-

color

These preset as ghost buttons. The text color property sets both the text color and the border.

Sets the PLP Page cards header color

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

Page > PLP > Cards > Button > Text

--ads-page-

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

These properties apply to the various NOP Plugins

Property

CSS Custom Prop

Default Value

Effects

Provided By

Background Color

Plugins > Voucher > Toolbar > Background Color

--ads-plugins-voucher-toolbar-backgroundcolor

--ads-brand-grey10

Sets the background color for the Voucher toolbar

`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-color`	Sets the body text color for the Loyalty FAB [plugin]	Theme Designer Base Theme
Top (Position) `Plugins > Loyalty > FAB > Position > Top`	`--ads-plugins-loyalty-fab-position-top`	`20px`	Sets the desktop “top” position for the Loyalty FAB [plugin]	Theme Designer Base Theme
Right (Position) `Plugins > Loyalty > FAB > Position > Right`	`--ads-plugins-loyalty-fab-position-right`	`10px`	Sets the desktop “right” position for the Loyalty FAB [plugin]	Theme Designer Base Theme
Top (Position) `Plugins > Loyalty > FAB > Position > Mobile > Top`	`--ads-plugins-loyalty-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]	Theme Designer Base Theme

Background Color

Image

Plugins >

Voucher

Loyalty >

Toolbar

FAB >

Button

Logo >

Background Color

Image

--ads-plugins-

voucher

loyalty-

toolbar

fab-

button

logo-

backgroundcolor

--ads-brand-secondary-color

Sets the button background color for the Voucher toolbar

`image`	`url('../images/rewards.svg')`	Sets the logo image for the Loyalty FAB [plugin]	Theme Designer Base Theme
Simple Footer

Text

Background Color

Plugins

> Voucher > Toolbar > Label > Text

> Simple Footer > Background Color

--ads-plugins-

voucher-toolbar-label-textcolor

simplefooter-backgroundcolor

--ads-brand-

text

primary-color

Sets the

label

background color for the

Voucher toolbar [plugin

simple footer [NOP Widget]

Theme Designer Base Theme

Font Family

Text Color

Plugins >

Voucher > Toolbar > Font Family

Simple Footer > Text Color

--ads-plugins-

voucher

simplefooter-

toolbar-fontfamily

textcolor

--ads-brand-

primary-fontfamily

white

Sets the

font family

text color for the

Voucher toolbar [plugin

simple footer [NOP Widget]

Theme Designer Base Theme

Loyalty

Image (

FAB

Logo)

Background Color

Plugins >

Loyalty > FAB > Toggle > Background Color

Simple Footer > Logo Image

--ads-plugins-

loyalty-fab

simplefooter-

toggle

logo-

backgroundcolor

image

--ads-

brand

header-

secondary

logo-

color

image

Sets the

toggle background color

logo for the

Loyalty FAB [plugin

simple footer [NOP Widget]

Theme Designer Base Theme

Brand Footer

Background Color

Plugins >

Loyalty > FAB >

Brand Footer > Background Color

--ads-plugins-

loyalty-fab-footer

brandfooter-backgroundcolor

--ads-brand-grey10

unset

Sets the

footer

background color for the

Loyalty FAB [plugin]

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

Theme Designer Base Theme

Text Color

Plugins >

Loyalty > FAB >

Brand Footer >

Link

Header > Text Color

--ads-plugins-

loyalty-fab-footer-link-textcolor--ads-brand-link-color

brandfooter-header-textcolor

unset

Sets the

footer link/

header text color for the

Loyalty FAB [plugin]

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

Theme Designer Base Theme

Text Color

Plugins >

Loyalty

Brand Footer >

FAB >

Body > Text Color

--ads-plugins-

loyalty

brandfooter-

fab-

body-textcolor

--ads-brand-primary-color

unset

Sets the body text color for the

Loyalty FAB [plugin]

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

Theme Designer Base Theme

Top (Position)

Text Color

Plugins >

Loyalty

Brand Footer >

FAB > Position > Top

Link > Text Color

--ads-plugins-

loyalty

brandfooter-

fab

link-

position-top

textcolor

20px

unset

Sets the

desktop “top” position

link text color for the

Loyalty FAB [plugin]

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

Theme Designer Base Theme

Right (Position)

Text Color

Plugins >

Loyalty

Brand Footer >

FAB

Link >

Position

Hover >

Right

Text Color

--ads-plugins-

loyalty

brandfooter-

fab

link-

position

hover-

right

textcolor

10px

unset

Sets the

desktop “right” position

link hover color for the

Loyalty FAB [plugin]

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

Theme Designer Base Theme

Top

image (

Position

Logo)

Plugins >

Loyalty

Brand Footer >

FAB > Position > Mobile > Top

Logo > Image

--ads-plugins

-loyalty-fab-position-mobile-top

20px

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

-brandfooter-logo-image

--ads-header-logo-image

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

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]

Theme Designer Base Theme

Image

Plugins > Loyalty > FAB > Logo > Image

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-

logo-image

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

Sets the logo image for the Loyalty FAB [plugin]

favicon

unset

Sets the default .ico low resolution favicon path

Theme Designer Base Theme

Simple Footer

Background Color

Plugins > Simple Footer > Background Color

Favicon

Brand > Favicons > 16x16 Favicon

--ads-

plugins

brand-favicons-

simplefooter-backgroundcolor

16x16-favicon

unset

Sets the 16 x 16 resolution favicon path

Theme Designer Base Theme

Favicon

Brand > Favicons > 32x32 Favicon

--ads-brand-favicons-

primary

32x32-

color

favicon

unset

Sets the

background color for the simple footer [NOP Widget]

32 x 32 resolution favicon path

Theme Designer Base Theme

Text Color

Favicon

Plugins

Brand >

Simple Footer > Text Color

Favicons > 48x48 Favicon

--ads-

plugins

brand-favicons-

simplefooter

48x48-

textcolor

--ads-brand-white

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

favicon

unset

Sets the 48 x 48 resolution favicon path

Theme Designer Base Theme

Image (Logo)

Plugins > Simple Footer > Logo Image

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-

plugins

tabs-

simplefooter

active-

logo-image

backgroundcolor

--ads-

header

brand-

logo-image

white

Sets the

logo for the simple footer [NOP Widget]

tab active background color

Theme Designer Base Theme

Brand Footer

Background Color

Plugins > Brand Footer

Brand > Tabs > Active > Background Color

--ads-

plugins

tabs-

brandfooter

bar-backgroundcolor

unset

--ads-brand-primary-color

Sets the tab bar background color

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

	Theme Designer Base Theme
Text Color

Plugins > Brand Footer > Header

Brand > Tabs > Text > Active > Text Color

--ads-

plugins

tabs-

brandfooter

text-

header

active-textcolor

unset

--ads-brand-primary-color

Sets the

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

active tab text	Theme Designer Base Theme
Text Color

Plugins

Brand >

Brand Footer

Tabs >

Body

Text > Text Color

--ads-

plugins

tabs-

brandfooter-body

text-textcolor

unset

--ads-brand-white

Sets the

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

default tab text color

Theme Designer Base Theme

K. Calendar - Public UI Only

These properties apply to global Input variables

Property	CSS Custom Prop	Default Value	Effects	Provided By


Text

Color

Transform

Plugins

Calendar >

Brand Footer

Title >

Link >

Text

Color

Transform

--ads-

plugins

calendar-

brandfooter

title-

link-textcolor

texttransform

unset

capitalize

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 Color

transform variant for the Public UI Calendar Title

Public UI

Text Transform

Calendar > Title > Text Transform

--ads-

plugins

calendar-

brandfooter-link-hover-textcolorunset

month-texttransform

capitalize

Sets the

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

Theme Designer Base Theme

image (Logo)

Plugins > Brand Footer > Logo > Image

--ads-plugins-brandfooter-logo-image

text transform variant for the Public UI Calendar Month text

Public UI

Text Transform

Calendar > Title > Text Transform

--ads-

header

calendar-

logo

legend-

image

texttransform

capitalize

Sets the

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

Theme Designer Base Theme

...

text transform variant for the Public UI Calendar Legend text

Public UI

L. Inputs - Public UI Only

These properties apply to the site Faviconsglobal Input variables

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

Default Value

Effects

Provided By

Text Transform

Input > Attribute > Title > Text Transform

--ads-

brand

input-

favicons

attribute-

16x16

title-

favicon

texttransform

unset

none

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

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-

brand-favicons-48x48-favicon

unset

Sets the 48 x 48 resolution favicon path

Theme Designer Base Theme

...

border-borderradius

none

Sets the global base border radius for elements that inherit from this variable

Public UI

These properties apply to the site tab properties on the PDPbreadcrumbs in Public UI

Property	CSS Custom Prop	Default Value	Effects	Provided By

Background Color

Brand > Tabs > Active > Background

Color

Breadcrumbs > Active > Color

--ads-breadcrumbs-active-colorp

--adx-color-grey-900

Sets the active color for the breadcrumbs in Public UI

Public UI

Color

Breadcrumbs > Active > Hover > Color

--ads-

tabs

breadcrumbs-active-hover-

backgroundcolor

colorp

--adx-color-

ads

neutral-

brand

black-

white

400

Sets the

tab

active

background color

Theme Designer Base Theme

Brand > Tabs > Active > Background

hover color for the breadcrumbs in Public UI	Public UI
Color `Breadcrumbs > Inactive > Color`	`--ads-`

tabs

breadcrumbs-

bar

inactive-

backgroundcolor

colorp

--adx-

ads

color-

brand

neutral-

primary

black-

color

400

Sets the

tab bar background color

Theme Designer Base Theme

Brand > Tabs > Text > Active > Text Color

inactive color for the breadcrumbs in Public UI	Public UI
Font Weight `Breadcrumbs > Font Weight`	`--ads-`

tabs

breadcrumbs-

text

font-

active-textcolor

weight

--ads-

brand

font-

primary

weight-

color

normal

Sets

the active tab text

Theme Designer Base Theme

Brand > Tabs > Text > Text Color

the font weight for the breadcrumbs in Public UI

Public UI

Text Transform

Breadcrumbs > Text Transform

--ads-

tabs

breadcrumbs-

text-textcolor--ads-brand-white

texttransform

None

Sets the

default tab text colorTheme Designer Base Theme

text transform variant for the breadcrumbs in Public UI

Public UI

Version	Old Version 17	New Version Current
Changes made by	Danny Gibas	Danny Gibas
Saved on	Aug 31, 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

F. Buttons

G. Loader Spinner

H. Plugins

E. Headings

F. Buttons - NOP and Public UI

G. Loader Spinner

H. Plugins - NOP and Public UI

Loyalty (FAB)

Simple Footer

Brand Footer

I. Favicons - NOP and Public UI

Simple Footer

J. Tabs - NOP Only

K. Calendar - Public UI Only

L. Inputs - Public UI Only

M. Border - Public UI Only

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

F. Buttons

G. Loader Spinner

H. Plugins

Voucher (Toolbar)

E. Headings

F. Buttons - NOP and Public UI

G. Loader Spinner

H. Plugins - NOP and Public UI

Voucher (Toolbar)

Loyalty (FAB)

Simple Footer

Brand Footer

I. Favicons - NOP and Public UI

Simple Footer

J. Tabs - NOP Only

K. Calendar - Public UI Only

L. Inputs - Public UI Only

M. Border - Public UI Only

N. Breadcrumbs - Public UI Only