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

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

CSS Custom Prop

Default Value

Effects

Provided By

Background Image

Page > Login> PDP

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
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 > Accounts > Hero > Background Image`	`--ads-page-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
Logo Image `Page > Accounts > Voucher > Logo Image`	`--ads-page-accounts-voucher-logo-image`	`--ads-page-accounts-logo-image`		Sets the Logo Sets the Logo Image on the Vouchers in Accounts	Theme Designer Base ThemePublic UI
Background ColorImage `Page > Checkout Accounts > Header > Background ColorImage`	`--ads-page-checkoutaccounts-headerbackground-backgroundcolor`	`--ads-brand-primary-color`	Sets the checkout page header background color	Theme Designer Base Theme	Text Color `Page > Checkout > Header > Text Colorimage`	`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-checkoutaccounts-header-text-color`	`#fff`	Sets the checkout page header default text color	Theme Designer Base Theme	Color `Page > Checkout > Header > Text > Active > Colorlogo-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-checkoutaccounts-headerlogo-textdesktop-active-color`	`--ads-brand-secondary-color`	Sets the checkout page header active text color	Theme Designer Base Theme	Background Color `Page > Checkout > Footer > Background Colorwidth`	`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-checkoutaccounts-logo-footermobile-backgroundcolorwidth`	`var(--ads-brandheader-primarylogo-colorwidth)`	Sets the checkout page footer background color	Theme Designer Base Theme	Background logo width for accounts pages on mobile. Logo Height is automatically set proportionally to width.	Public UI
Color `Page > Checkout Accounts > Footer Mask > Button > Background Color`	`--ads-page-checkoutaccounts-footermask-button-backgroundcolor`	`--ads-brand-secondary-color`	Sets the checkout page footer button background color	Theme Designer Base Theme	Text Color `Page > Checkout > Footer > Button > Text Colorcolor`	`#000`	Sets the mask overlay color for the accounts page image	Public UI
Opacity `Page > Accounts > Mask > Opacity`	`--ads-page-checkout-footeraccounts-mask-opacity`	`.6`	Sets the mask overlay opacity for the accounts page image	Public UI
Color `Page > Accounts > Button > Color`	`--ads-page-accounts-button-textcolorcolor`	`var(--ads-brand-primary-whitecolor)`	Sets the checkout page footer button textcolor	Theme Designer Base Theme	Logo Imageprimary button background color for the Accounts pages	Public UI
Color `Page > Checkout Accounts > Header Button > Logo ImageText Color`	`--ads-page-checkoutaccounts-headerbutton-logotext-imagecolor`	`url('https://awro-dev.aspenware.net/themes/PeakResort/content/images/logo.png')`	Sets the checkout page header logo image	Theme Designer Base Theme	Logo Height`var(--ads-brand-white, #fff)`	Sets the primary button text color for the Accounts pages	Public UI
Checkout
Background Color `Page > Checkout > Header > Logo heightBackground Color`	`--ads-page-checkout-header-logo-height`	`100px`	Sets `-backgroundcolor`	`--ads-brand-primary-color`	Sets the checkout page header logo heightbackground color	Theme Designer Base Theme
Background ImageText Color `Page > Checkout > Background Header > Background ImageText Color`	`--ads-page-checkout-backgroundheader-text-backgroundimageurl('../images/checkout-background.jpg')color`	`#fff`	Sets the checkout page background imageheader default text color	Theme Designer Base Theme
Background Color `Page > Checkout > PDP Header > Buttons Text > Radio Active > Background Color`	`--ads-page-pdpcheckout-header-buttonstext-radioactive-backgroundcolorcolor`	`--ads-buttonsbrand-primarysecondary-backgroundcolorcolor`	Sets the radio button active background checkout page header active text color	Theme Designer Base Theme
Font FamilyBackground Color `Page > PDP Checkout > Card > Title > Font FamilyFooter > Background Color`	`--ads-page-pdpcheckout-cardfooter-title-fontfamilybackgroundcolor`	`--ads-brand-primary-fontfamilycolor`	Sets the PDP page checkout card header font familycheckout page footer background color	Theme Designer Base Theme
Background Color `Page > Checkout > PDP Footer > Title Button > Background Color`	`--ads-page-pdpcheckout-footer-titlebutton-colorbackgroundcolor`	`--ads-brand-headingssecondary-color``	Sets the PDP checkout page title footer button background color.	Theme Designer Base Theme
Text Color `Page > PDP Checkout > Card Footer > Title Button > Text Color`	`--ads-page-pdpcheckout-optionsfooter-titlebutton-colortextcolor`	`--ads-brand-primary-colorwhite`	Sets the PDP page options title colorcheckout page footer button textcolor	Theme Designer Base Theme
Background ColorLogo Image `Page > PDP Checkout > Buttons > Checkout > Background ColorHeader > Logo Image`	`--ads-page-pdpcheckout-buttonsheader-checkoutlogo-backgroundcolor`	`--ads-buttons-primary-backgroundcolor`	Sets the PDP page checkout button background color`image`	`url('https://awro-dev.aspenware.net/themes/PeakResort/content/images/logo.png')`	Sets the checkout page header logo image	Theme Designer Base Theme
Display (Hero)Logo Height `Page > PDP Checkout > Hero > Dynamic > DisplayHeader > Logo height`	`--ads-page-pdpcheckout-heroheader-dynamiclogo-herodisplayheight`	`none100px`	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.checkout page header logo height	Theme Designer Base Theme
PLP
Background ColorImage `Page > PLP Checkout > Container Background > Background ColorImage`	`--ads-page-plpcheckout-containerbackground-backgroundcolorbackgroundimage` (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('../images/checkout-background.jpg')`	Sets the checkout page background image	Theme Designer Base ThemeText
PDP
Background Color `Page > PLP PDP > Cards Buttons > Button Radio > Text Background Color`	`--ads-page-plppdp-cardsbuttons-buttonradio-textcolorbackgroundcolor`	`--ads-brandbuttons-primary-whitebackgroundcolor`	Sets the PLP Page card button text radio button active background color	Theme Designer Base Theme
Text ColorFont Family `Page > PLP PDP > Cards Card > Price Title > Text ColorFont Family`	`--ads-page-plppdp-cardscard-pricetitle-textcolorfontfamily`	`--ads-brand-secondaryprimary-colorfontfamily`	Sets the PLP Page card price text colorPDP page checkout card header font family	Theme Designer Base Theme
Text Color `Page > PLP > Cards > Button > Hover > Text PDP > Title > Color`	`--ads-page-plppdp-cards-button-hover-textcolortitle-color`	`--ads-brandheadings-whitecolor``	Sets the PLP Page card button hover text colorPDP page title color.	Theme Designer Base Theme
Background Color `Page > PLP PDP > Cards Card > Button Title > Background Color`	`--ads-page-plppdp-cardsoptions-buttontitle-backgroundcolorcolor`	`--ads-brand-secondaryprimary-color`	Sets the PLP Page card button default background PDP page options title color	Theme Designer Base Theme
Background Color `Page > PLP PDP > Cards Buttons > Button > Hover Checkout > Background Color`	`--ads-page-plppdp-cardsbuttons-button-hovercheckout-backgroundcolor`	`--ads-brandbuttons-secondaryprimary-hover-colorbackgroundcolor`	Sets the PLP Page cards button hover PDP page checkout button background color	Theme Designer Base Theme
Font FamilyDisplay (Hero) `Page > PLP PDP > Cards Hero > Header Dynamic > Font FamilyDisplay`	`--ads-page-plppdp-cardshero-headerdynamic-fontfamily`	`--ads-headings-fontfamily`	Sets the PLP Page cards header 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 FamilyText Transform `Page > PLP PDP > Cards Product > Button Title > Font FamilyText Transform`	`--ads-page-plppdp-cardsproduct-buttontitle-fontfamily`	`--ads-brand-primary-fontfamily`	Sets the PLP Page cards button font family	Theme Designer Base Theme	Font Family `Page > PLP > Cards > Price > Font Familytexttransform`	`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-plppdp-cardsattribute-pricetitle-fontfamily`	`--ads-brand-secondary-fontfamily`	Sets the PLP Page cards price font family	Theme Designer Base Theme	Font Family`texttransform`	`none`	Sets the text transform variant for the PDP Attribute title in Public UI	Pubic UI
PLP
Background Color `Page > PLP > Cards > Body > Font FamilyContainer > Background Color`	`--ads-page-plp-cards-body-fontfamilycontainer-backgroundcolor` (the “p” on the end is intentional - it tells TD to render a Color Picker instead of the default Swatch Selector)	`--ads-brand-primary-fontfamilywhite`	Sets the PLP Page cards body copy font familycontainer background color	Theme Designer Base Theme
Text Color `Page > PLP > Cards > Header Button > Text Color`	`--ads-page-plp-cards-headerbutton-colortextcolor`	`--ads-headingsbrand-colorwhite`	Sets the PLP Page cards header card button text color	Theme Designer Base Theme
Text Color `Page > PLP > Cards > Button Price > Text Color`	`--ads-page-plp-cards-buttonprice-text'Shop Now'textcolor`	`--ads-brand-secondary-color`	Sets the PLP Page cards action button copycard price text color	Theme Designer Base Theme
Display (Hero)Text Color `Page > PLP > Hero Cards > Button > Dynamic Hover > DisplayText Color`	`--ads-page-plp-herocards-button-dynamichover-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 hover text color	Theme Designer Base Theme
Background ImageColor `Page > PLP > Hero Cards > Static Button > Background ImageColor`	`--ads-page-plp-herocards-staticbutton-backgroundimageurl('../images/default-category-hero.jpg')backgroundcolor`	`--ads-brand-secondary-color`	Sets the PLP and PDP Page static hero background imagePage card button default background color	Theme Designer Base Theme
HeightBackground Color `Page > PLP > Cards > Button > Hero Hover > Hero HeightBackground Color`	`--ads-page-plp-cards-button-herohover-heroheight`	`285px`	Sets the PLP page hero height with the following options: `['285px', '400px', '550px']` `'285px' = Short Hero` `'400px' = Medium Hero` `'550px' = Tall Herobackgroundcolor`	`--ads-brand-secondary-hover-color`	Sets the PLP Page cards button hover background color	Theme Designer Base Theme

E. Headings

These properties apply to the H1 - H5 headings globally

Font Family

Page > PLP > Cards > Header > Font Family

--ads-

headings-

page-plp-cards-header-fontfamily

--ads-

brand

headings-

primary-

fontfamily

Sets the

global

PLP Page cards header font family

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

	Theme Designer Base Theme
Font Family

Font Color

Page > PLP > Cards > Button > Font Family

--ads

-headings-color

-page-plp-cards-button-fontfamily

--ads-brand-

text

primary-

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 button font family

Theme Designer Base Theme

F. Buttons

These properties apply to the default global button styles

Font Family

Page > PLP > Cards > Price > Font Family

--ads-page-plp-

buttons

cards-

primary

price-

textcolor#fff

fontfamily

--ads-brand-secondary-fontfamily

Sets the

global primary button text color

PLP Page cards price font family

Theme Designer Base Theme

Background Color

Font Family

Buttons

Page >

Primary > Background Color

PLP > Cards > Body > Font Family

--ads-page-plp-

buttons

cards-

primary

body-

backgroundcolor

fontfamily

--ads-brand-primary-

color

fontfamily

Sets the

global primary button background color

PLP Page cards body copy font family

Theme Designer Base Theme

Border

Color

Buttons > Primary > Border

Page > PLP > Cards > Header > Color

--ads-page-plp-

buttons

cards-

primary

header-

bordercolor

color

--ads-

brand-primary

headings-color

Sets the

global primary button border

PLP Page cards header color

Theme Designer Base Theme

Text

Color

Buttons > Secondary

Page > PLP > Cards > Button > Text

Color

--ads-

buttons

page-

secondary

plp-

textcolor

cards-

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

button-text

'Shop Now'

Sets the PLP Page cards action button copy

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


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
Image

Loader

Plugins > Loyalty > FAB > Logo > Image

--ads

-loader

-plugins-loyalty-fab-logo-image

url('../images/

logo-mark-spinner.png

rewards.svg')

Sets the

global loader image

logo image for the Loyalty FAB [plugin]

Theme Designer Base Theme

H. Plugins

These properties apply to the various NOP Plugins

Property	CSS Custom Prop	Default Value	Effects	Provided By
Voucher (Toolbar) Simple Footer
Background Color `Plugins > Voucher > Toolbar Simple Footer > Background Color`	`--ads-plugins-voucher-toolbarsimplefooter-backgroundcolor`	`--ads-brand-primary-grey10color`	Sets the background color for the Voucher toolbar [pluginsimple footer [NOP Widget]	Theme Designer Base Theme
Background Text Color `Plugins > Voucher > Toolbar > Button > Background Simple Footer > Text Color`	`--ads-plugins-voucher-toolbar-button-backgroundcolorsimplefooter-textcolor`	`--ads-brand-secondary-colorwhite`	Sets the button background text color for the Voucher toolbar [pluginsimple footer [NOP Widget]	Theme Designer Base Theme
Text ColorImage (Logo) `Plugins > Voucher > Toolbar > Label > Text ColorSimple Footer > Logo Image`	`--ads-plugins-vouchersimplefooter-toolbarlogo-label-textcolorimage`	`--ads-brandheader-textlogo-colorimage`	Sets the label color logo for the Voucher toolbar [pluginsimple footer [NOP Widget]	Theme Designer Base ThemeFont Family
Brand Footer
Background Color `Plugins > Voucher > Toolbar > Font FamilyBrand Footer > Background Color`	`--ads-plugins-voucherbrandfooter-toolbar-fontfamily--ads-brand-primary-fontfamilybackgroundcolor`	`unset`	Sets the font family background 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 Brand Footer > FAB Header > Toggle > Background Text Color`	`--ads-plugins-loyaltybrandfooter-fabheader-toggle-backgroundcolor--ads-brand-secondary-colortextcolor`	`unset`	Sets the toggle background header 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 Body > Footer > Background Text Color`	`--ads-plugins-loyaltybrandfooter-fabbody-footer-backgroundcolor--ads-brand-grey10textcolor`	`unset`	Sets the footer background body text 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 > Text Color`	`--ads-plugins-loyalty-fab-footerbrandfooter-link-textcolor--ads-brand-link-color`	`unset`	Sets the footer link / 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 Link > Body Hover > Text Color`	`--ads-plugins-loyaltybrandfooter-fablink-bodyhover-textcolor--ads-brand-primary-color`	`unset`	Sets the body text link hover color for the Loyalty FAB [plugin]brand footer [NOP Widget] if implemented by a resort.	Theme Designer Base Theme
Top image (PositionLogo) `Plugins > Loyalty Brand Footer > FAB Logo > Position > TopImage`	`--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-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

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-

position-right

favicon

10px

unset

Sets the

desktop “right” position for the Loyalty FAB [plugin]Plugins > Loyalty > FAB > Position > Mobile > Top

default .ico low resolution favicon path

Theme Designer Base Theme

Top (Position)

Favicon

Brand > Favicons > 16x16 Favicon

--ads-

plugins

brand-

loyalty-fab-position-mobile-top

20px

Sets the mobile “top” position for the Loyalty FAB [plugin]Plugins > Loyalty > FAB > Position > Mobile > Right

favicons-16x16-favicon

unset

Sets the 16 x 16 resolution favicon path

Theme Designer Base Theme

Right (Position)

Favicon

Brand > Favicons > 32x32 Favicon

--ads-

plugins

brand-

loyalty

favicons-

fab-position-mobile-right

10px

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

32x32-favicon

unset

Sets the 32 x 32 resolution favicon path

Theme Designer Base Theme

Image

Favicon

Plugins

Brand >

Loyalty > FAB > Logo > Image

Favicons > 48x48 Favicon

--ads-

plugins

brand-

loyalty

favicons-

fab

48x48-

logo-image

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

Sets the logo image for the Loyalty FAB [plugin]

favicon

unset

Sets the 48 x 48 resolution favicon path

Theme Designer Base Theme

Simple Footer

Background Color

Plugins > Simple Footer > Background Color

--ads-plugins-simplefooter-backgroundcolor

--ads-brand-primary-color

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

Theme Designer Base Theme

Text Color

Plugins > Simple Footer > Text

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-

textcolor

backgroundcolor

--ads-brand-white

Sets the

text color for the simple footer [NOP Widget]Plugins > Simple Footer > Logo Image

tab active background color

Theme Designer Base Theme

Image (Logo)

Background Color
Brand > Tabs > Active > Background Color

--ads-

plugins-simplefooter

tabs-

logo

bar-

image

backgroundcolor

--ads-

header

brand-

logo

primary-

image

color

Sets the

logo for the simple footer [NOP Widget]Background

tab bar background color

Theme Designer Base Theme

Brand Footer

Text Color

Plugins > Brand Footer > Background

Brand > Tabs > Text > Active > Text Color

--ads-tabs-

plugins

text-

brandfooter

active-

backgroundcolor

unset

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

`textcolor`	`--ads-brand-primary-color`	Sets the active tab text	Theme Designer Base Theme
Text Color

Plugins > Brand Footer > Header

Brand > Tabs > Text > Text Color

--ads-

plugins

tabs-

brandfooter-header

text-textcolor

unset

--ads-brand-white

Sets the

header

default tab 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

--ads-plugins-brandfooter-body-textcolor

unset

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

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

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

text transform variant for the Public UI Calendar Month text

Public UI

Text Transform

Calendar > Title > Text Transform

--ads-

plugins-brandfooter-logo-image--ads-header-logo-image

calendar-legend-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

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

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-active-backgroundcolor--ads-brand-white

-breadcrumbs-active-hover-colorp

--adx-color-neutral-black-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 color

Theme Designer Base Theme

K. Public UI - Calendar

...

text transform variant for the breadcrumbs in Public UI

Public UI

Versions Compared

Old Version 20

New Version Current

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

PLP

PDP

PLP

E. Headings

F. Buttons

G. Loader Spinner

E. Headings

F. Buttons - NOP and Public UI

G. Loader Spinner

H. Plugins - NOP and Public UI

Loyalty (FAB)

H. Plugins

Simple Footer

Brand Footer

Loyalty (FAB)

I. Favicons - NOP and Public UI

Simple Footer

J. Tabs - NOP Only

Brand Footer

K. Calendar - Public UI Only

L. Inputs - Public UI Only

M. Border - Public UI Only

K. Public UI - Calendar

Page Comparison

Versions Compared

Old Version 20

New Version Current

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

PLP

PDP

PLP

E. Headings

F. Buttons

G. Loader Spinner

E. Headings

F. Buttons - NOP and Public UI

G. Loader Spinner

H. Plugins - NOP and Public UI

Voucher (Toolbar)

Loyalty (FAB)

H. Plugins

Simple Footer

Brand Footer

Loyalty (FAB)

I. Favicons - NOP and Public UI

Simple Footer

J. Tabs - NOP Only

Brand Footer

K. Calendar - Public UI Only

L. Inputs - Public UI Only

M. Border - Public UI Only

N. Breadcrumbs - Public UI Only

K. Public UI - Calendar