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

Font Family

--ads-headings-fontfamilyBackground Image

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 > Login> Background > 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 Image 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-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 Colordesktop-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-accounts-checkoutlogo-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-colorcolor`	`#000`	Sets the checkout page footer button background color	Theme Designer Base Theme	Text Colormask overlay color for the accounts page image	Public UI
Opacity `Page > Checkout Accounts > Footer > Button > Text ColorMask > Opacity`	`--ads-page-checkoutaccounts-footermask-button-textcoloropacity`	`.6`	Sets the mask overlay opacity for the accounts page image	Public UI
Color `Page > Accounts > Button > Color`	`--ads-page-accounts-button-color`	`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-height100px-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
PDP
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
Text TransformBackground Image `Page > PDP Checkout > Product > Title > Text TransformBackground > Background Image`	`--ads-page-pdpcheckout-product-title-texttransform`	`none`	Sets the text transform variant for the PDP Product title in Public UI	Public UI	Text Transform`background-backgroundimage`	`url('../images/checkout-background.jpg')`	Sets the checkout page background image	Theme Designer Base Theme
PDP
Background Color `Page > PDP > Attribute Buttons > Title Radio > Text TransformBackground Color`	`--ads-page-pdp-attributebuttons-titleradio-texttransform`	`none`	Sets the text transform variant for the PDP Attribute title in Public UI	Pubic UI
PLP
Background Color `Page > PLP > Container > Background Colorbackgroundcolor`	`--ads-buttons-primary-backgroundcolor`	Sets the radio button active background color	Theme Designer Base Theme
Font Family `Page > PDP > Card > Title > Font Family`	`--ads-page-plppdp-container-backgroundcolor`(the “p” on the end is intentional - it tells TD to render a Color Picker instead of the default Swatch Selector)`card-title-fontfamily`	`--ads-brand-whiteprimary-fontfamily`	Sets the PLP Page container background colorPDP page checkout card header font family	Theme Designer Base Theme
Text Color `Page > PLP PDP > Cards Title > Button > Text Color`	`--ads-page-plppdp-cardstitle-button-textcolorcolor`	`--ads-brandheadings-whitecolor``	Sets the PLP Page card button text colorPDP page title color.	Theme Designer Base Theme
Text Color `Page > PLP PDP > Cards Card > Price Title > Text Color`	`--ads-page-plppdp-cardsoptions-pricetitle-textcolorcolor`	`--ads-brand-secondaryprimary-color`	Sets the PLP Page card price text PDP page options title color	Theme Designer Base Theme
Text Background Color `Page > PLP PDP > Cards Buttons > Button Checkout > Hover > Text Background Color`	`--ads-page-plppdp-cardsbuttons-buttoncheckout-hover-textcolorbackgroundcolor`	`--ads-brandbuttons-primary-whitebackgroundcolor`	Sets the PLP Page card button hover text PDP page checkout button background color	Theme Designer Base Theme
Background ColorDisplay (Hero) `Page > PLP PDP > Cards Hero > Button Dynamic > Background ColorDisplay`	`--ads-page-plppdp-cardshero-buttondynamic-backgroundcolor`	`--ads-brand-secondary-color`	Sets the PLP Page card button default background color`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
Background ColorText Transform `Page > PLP PDP > Cards Product > Button > Hover > Background ColorTitle > Text Transform`	`--ads-page-plppdp-cardsproduct-buttontitle-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 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`	Font Family `--ads-page-plppdp-cardsattribute-headertitle-fontfamily`	`--ads-headings-fontfamily`	Sets the PLP Page cards header 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 > Button > Font FamilyContainer > Background Color`	`--ads-page-plp-cards-button-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 button font familycontainer background color	Theme Designer Base Theme
Font FamilyText Color `Page > PLP > Cards > Price Button > Font FamilyText Color`	`--ads-page-plp-cards-pricebutton-fontfamilytextcolor`	`--ads-brand-secondary-fontfamilywhite`	Sets the PLP Page cards price font familycard button text color	Theme Designer Base Theme
Font FamilyText Color `Page > PLP > Cards > Body Price > Font FamilyText Color`	`--ads-page-plp-cards-bodyprice-fontfamilytextcolor`	`--ads-brand-primarysecondary-fontfamilycolor`	Sets the PLP Page cards body copy font familycard price text color	Theme Designer Base Theme
Text Color `Page > PLP > Cards > Header Button > Hover > Text Color`	`--ads-page-plp-cards-headerbutton-hover-colortextcolor`	`--ads-headingsbrand-colorwhite`	Sets the PLP Page cards header card button hover text color	Theme Designer Base Theme
Background Color `Page > PLP > Cards > Button > TextBackground Color`	`--ads-page-plp-cards-button-text'Shop Now'backgroundcolor`	`--ads-brand-secondary-color`	Sets the PLP Page cards action button copycard button default background color	Theme Designer Base Theme
Display (Hero)Background Color `Page > PLP > Hero Cards > Button > Dynamic Hover > DisplayBackground 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.`backgroundcolor`	`--ads-brand-secondary-hover-color`	Sets the PLP Page cards button hover background color	Theme Designer Base Theme
Background ImageFont Family `Page > PLP > Hero Cards > Static Header > Background ImageFont Family`	`--ads-page-plp-herocards-staticheader-backgroundimageurl('../images/default-category-hero.jpg')fontfamily`	`--ads-headings-fontfamily`	Sets the PLP and PDP Page static hero background imagePage cards header font family	Theme Designer Base Theme
HeightFont Family `Page > PLP > Hero > Hero HeightCards > Button > Font Family`	`--ads-page-plp-herocards-button-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

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

fontfamily

color

Sets the global

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

primary button border color

Theme Designer Base Theme

Font

Text Color

Buttons > Secondary > Text Color

--ads-buttons-

headings

secondary-

color

textcolor

--ads-brand-

text

secondary-color

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

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 default global button stylespage loader

Property	CSS Custom Prop	Default Value	Effects	Provided By

Text

Background Color

Buttons > Primary > Text 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

-buttons-primary-textcolor

#fff

Sets the global primary button text color

-loader-image

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

Sets the global loader image

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

H. Plugins - NOP and Public UI

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-

buttons

plugins-voucher-

primary

toolbar-

bordercolor

backgroundcolor

--ads-brand-

primary-color

grey10

Sets the

global primary button border color

background color for the Voucher toolbar [plugin]

Theme Designer Base Theme

Text

Background Color

Buttons > Secondary > Text

Plugins > Voucher > Toolbar > Button > Background Color

--ads-plugins-voucher-

buttons

toolbar-

secondary

button-

textcolor

backgroundcolor

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

Background Color

Loader > Background

color

Sets the button background color for the Voucher toolbar [plugin]

Theme Designer Base Theme

G. Loader Spinner

These properties apply to the global page loader

Text Color

Plugins > Voucher > Toolbar > Label > Text 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

plugins-voucher-toolbar-label-textcolor

--ads-brand-text-color

Sets the label color for the Voucher toolbar [plugin]

Theme Designer Base Theme

Image

Loader > Image

Font Family

Plugins > Voucher > Toolbar > Font Family

--ads-

loader-image

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

Sets the global loader image

plugins-voucher-toolbar-fontfamily

--ads-brand-primary-fontfamily

Sets the font family for the Voucher toolbar [plugin]

Theme Designer Base Theme

H. Plugins

These properties apply to the various NOP Plugins

Loyalty FAB

Property	CSS Custom Prop	Default Value	Effects	Provided By
Voucher (Toolbar Loyalty (FAB)
Background Color `Plugins > Voucher Loyalty > FAB > Toolbar Toggle > Background Color`	`--ads-plugins-loyalty-voucherfab-toolbartoggle-backgroundcolor`	`--ads-brand-grey10secondary-color`	Sets the toggle background color for the Voucher toolbar Loyalty FAB [plugin]	Theme Designer Base Theme
Background Color `Plugins > Voucher Loyalty > Toolbar FAB > Button Footer > Background Color`	`--ads-plugins-voucherloyalty-toolbarfab-buttonfooter-backgroundcolor`	`--ads-brand-secondary-colorgrey10`	Sets the button footer background color for the Voucher toolbar Loyalty FAB [plugin]	Theme Designer Base Theme
Text Color `Plugins > Voucher Loyalty > FAB > Toolbar Footer > Label Link > Text Color`	`--ads-plugins-voucherloyalty-fab-toolbarfooter-labellink-textcolor`	`--ads-brand-textlink-color`	Sets the label footer link/text color for the Voucher toolbar Loyalty FAB [plugin]	Theme Designer Base Theme
Font FamilyText Color `Plugins > Loyalty > Voucher FAB > Toolbar Body > Font FamilyText Color`	`--ads-plugins-voucherloyalty-fab-toolbarbody-fontfamilytextcolor`	`--ads-brand-primary-fontfamilycolor`	Sets the font family body text color for the Voucher toolbar Loyalty FAB [plugin]	Theme Designer Base Theme
Top (	Position)	Background Color `Plugins > Loyalty > FAB > Toggle Position > Background ColorTop`	`--ads-plugins-loyalty-fab-toggleposition-backgroundcolor--ads-brand-secondary-colortop`	`20px`	Sets the toggle background color desktop “top” position for the Loyalty FAB [plugin]	Theme Designer Base Theme
Background ColorRight (Position) `Plugins > Loyalty > FAB > Footer Position > Background ColorRight`	`--ads-plugins-loyalty-fab-footerposition-backgroundcolor--ads-brand-grey10right`	`10px`	Sets the footer background color desktop “right” position for the Loyalty FAB [plugin]	Theme Designer Base Theme
Text ColorTop (Position) `Plugins > Loyalty > FAB > Footer Position > Link Mobile > Text ColorTop`	`--ads-plugins-loyalty-fab-footerposition-linkmobile-textcolor--ads-brand-link-colortop`	`20px`	Sets the footer link/text color mobile “top” position for the Loyalty FAB [plugin]	Theme Designer Base Theme
Text ColorRight (Position) `Plugins > Loyalty > FAB > Body > Text ColorPosition > Mobile > Right`	`--ads-plugins-loyalty-fab-bodyposition-mobile-textcolor--ads-brand-primary-colorright`	`10px`	Sets the body text color mobile “right” position for the Loyalty FAB [plugin]	Theme Designer Base Theme
Top (Position)Image `Plugins > Loyalty > FAB > Position Logo > TopImage`	`--ads-plugins-loyalty-fab-positionlogo-top20pximage`	`url('../images/rewards.svg')`	Sets the desktop “top” position logo image for the Loyalty FAB [plugin]	Theme Designer Base ThemeRight (Position)
Simple Footer
Background Color `Plugins > Loyalty > FAB > Position > RightSimple Footer > Background Color`	`--ads-plugins-loyalty-fab-position-right10pxsimplefooter-backgroundcolor`	`--ads-brand-primary-color`	Sets the desktop “right” position background color for the Loyalty FAB [pluginsimple footer [NOP Widget]	Theme Designer Base Theme
Top (Position)Text Color `Plugins > Loyalty > FAB > Position > Mobile > TopSimple Footer > Text Color`	`--ads-plugins-simplefooter-loyaltytextcolor`	`-fab-positionads-mobilebrand-topwhite`	`20px`	Sets the mobile “top” position text color for the Loyalty FAB [pluginsimple footer [NOP Widget]	Theme Designer Base Theme
Right Image (PositionLogo) `Plugins > Loyalty > FAB > Position > Mobile > RightSimple Footer > Logo Image`	`--ads-plugins-loyalty-fab-position-mobile-right`	`10px`	Sets the mobile “right” position for the Loyalty FAB [plugin`-simplefooter-logo-image`	`--ads-header-logo-image`	Sets the logo for the simple footer [NOP Widget]	Theme Designer Base ThemeImage
Brand Footer
Background Color `Plugins > Loyalty > FAB > Logo > ImageBrand Footer > Background Color`	`--ads-plugins-loyalty-fab-logo-imageurl('../images/rewards.svg')brandfooter-backgroundcolor`	`unset`	Sets the logo image background color for the Loyalty FAB [plugin]brand footer [NOP Widget] if implemented by a resort.	Theme Designer Base Theme
Simple Footer
Background Text Color `Plugins > Simple Brand Footer > Header > Background Text Color`	`--ads-plugins-brandfooter-simplefooterheader-backgroundcolor--ads-brand-primary-colortextcolor`	`unset`	Sets the background header text color for the simple brand footer [NOP Widget] if implemented by a resort.	Theme Designer Base Theme
Text Color `Plugins > Simple Brand Footer > Body > Text Color`	`--ads-plugins-simplefooterbrandfooter-body-textcolor--ads-brand-white`	`unset`	Sets the body text color for the simple brand footer [NOP Widget]] if implemented by a resort.	Theme Designer Base Theme
Image (Logo)Text Color `Plugins > Simple Brand Footer > Logo ImageLink > Text Color`	`--ads-plugins-simplefooterbrandfooter-logolink-image--ads-header-logo-imagetextcolor`	`unset`	Sets the logo link text color for the simple brand footer [NOP Widget] if implemented by a resort.	Theme Designer Base Theme
Brand Footer
Background Text Color `Plugins > Brand Footer > Background Link > Hover > Text Color`	`--ads-plugins-brandfooter-link-hover-backgroundcolortextcolor`	`unset`	Sets the background link hover color for the brand footer [NOP Widget] if implemented by a resort.	Theme Designer Base Theme
Text Colorimage (Logo) `Plugins > Brand Footer > Header Logo > Text ColorImage`	`--ads-plugins-brandfooter-logo-image`	`--ads-header-logo-textcolorimage`	`unset`	Sets the header text color logo image for the brand footer [NOP Widget] if implemented by a resort.	Theme Designer Base Theme Text Color `Plugins > Brand Footer > Body > Text Color`

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-

brandfooter

favicons-

body

ico-

textcolor

favicon

unset

Sets the

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

default .ico low resolution favicon path

Theme Designer Base Theme

Text Color

Favicon

Plugins >

Brand

Footer

>

Link

Favicons >

Text Color

16x16 Favicon

--ads-

plugins

brand-

brandfooter

favicons-

link

16x16-

textcolor

favicon

unset

Sets the

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

16 x 16 resolution favicon path

Theme Designer Base Theme

Text Color

Favicon

Plugins >

Brand

Footer

>

Link > Hover > Text Color

Favicons > 32x32 Favicon

--ads-

plugins

brand-

brandfooter

favicons-

link

32x32-

hover-textcolor

favicon

unset

Sets the link hover color for the brand footer [NOP Widget] if implemented by a resort.Plugins > Brand Footer > Logo > Image

Sets the 32 x 32 resolution favicon path

Theme Designer Base Theme

image (Logo)

Favicon

Brand > Favicons > 48x48 Favicon

--ads-

plugins

brand-

brandfooter

favicons-

logo

48x48-

image

--ads-header-logo-image

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

favicon

unset

Sets the 48 x 48 resolution favicon path

Theme Designer Base Theme

...

J. Tabs - NOP Only

These properties apply to the site Faviconstab properties on the PDP

Property

CSS Custom Prop

Default Value

Effects

Provided By

Background Color

Brand > Tabs >

Favicons

Active >

Ico Favicon

Background Color

--ads-

brand-favicons-ico-favicon

unset

Sets the default .ico low resolution favicon path

tabs-active-backgroundcolor

--ads-brand-white

Sets the tab active background color

Theme Designer Base Theme

Background Color
Brand >

Favicons > 16x16 Favicon

Tabs > Active > Background Color

--ads-tabs-bar-backgroundcolor

--ads-brand-

favicons

primary-

16x16-favicon

color

unset

Sets the

16 x 16 resolution favicon path

tab bar background color	Theme Designer Base Theme
Text Color `Brand > Tabs >`

Favicons > 32x32 Favicon

Text > Active > Text Color

--ads-

brand

tabs-

favicons

text-

32x32

active-

faviconunset

textcolor

--ads-brand-primary-color

Sets the

32 x 32 resolution favicon path

active tab text	Theme Designer Base Theme
Text Color `Brand > Tabs >`

Favicons

Text >

48x48 Favicon

Text Color

--ads

-brand-favicons-48x48-favicon

unset

Sets the 48 x 48 resolution favicon path

-tabs-text-textcolor

--ads-brand-white

Sets the default tab text color

Theme Designer Base Theme

J. Tabs

...

K. Calendar - Public UI Only

These properties apply to global Input variables

Property	CSS Custom Prop	Default Value	Effects	Provided By

Background Color



Text Transform

Brand

Calendar >

Tabs > Active > Background Color

Title > Text Transform

--ads-

tabs

calendar-

active-backgroundcolor

title-texttransform

capitalize

Sets the text transform variant for the Public UI Calendar Title

Public UI

Text Transform

Calendar > Title > Text Transform

--ads-calendar-

brand

month-

white

texttransform

capitalize

Sets

the tab active background color

Theme Designer Base Theme

Brand > Tabs > Active > Background Color

the text transform variant for the Public UI Calendar Month text

Public UI

Text Transform

Calendar > Title > Text Transform

--ads-

tabs

calendar-

bar

legend-

backgroundcolor

--ads-brand-primary-color

Sets the tab bar background color

Theme Designer Base Theme

Brand > Tabs > Text > Active > Text Color

texttransform

capitalize

Sets the text 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-

tabs

input-

text

attribute-

active

title-

textcolor--ads-brand-primary-color

texttransform

none

Sets the

active tab text

Theme Designer Base Theme

Brand > Tabs > Text > 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-

tabs

border-

text-textcolor

--ads-brand-white

Sets the default tab text color

Theme Designer Base Theme

...

borderradius

none

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

Public UI

These properties apply to global Input variables the breadcrumbs in Public UI

Property	CSS Custom Prop	Default Value	Effects	Provided By

Text Transform

Color

Calendar

Breadcrumbs >

Title > Text Transform

Active > Color

--ads-breadcrumbs-active-colorp

--

ads

adx-

calendar

color-

title

grey-

texttransform

900

capitalize

Sets the

text transform variant

active color for the breadcrumbs in Public UI

Calendar Title

Public UI

Calendar > Month > Text Transform

Color

Breadcrumbs > Active > Hover > Color

--ads-breadcrumbs-

calendar

active-

month

hover-

texttransformcapitalize

colorp

--adx-color-neutral-black-400

Sets the

text transform variant

active hover color for the breadcrumbs in Public UI

Calendar Month text

	Public UI
Color

Calendar

Breadcrumbs >

Legend > Text Transform

--ads-calendar-legend-texttransform

capitalize

Sets the text transform variant for the Public UI Calendar Legend text

Public UI

L. Public UI - Inputs

These properties apply to global Input variables

...

Property

...

CSS Custom Prop

...

Default Value

...

Effects

...

Provided By

...

Text Transform

Input > Attribute > Title > Text Transform

...

--ads-input-attribute-title-texttransform

...

none

...

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

...

Public UI

M. Public UI - Border

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-border-borderradius

none

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

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

Versions Compared

Old Version 21

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

PDP

PDP

PLP

PLP

E. Headings

E. Headings

F. Buttons - NOP and Public UI

G.

Loader Spinner

H. Plugins - NOP and Public UI

G. Loader Spinner

H. Plugins

Loyalty (FAB)

Simple Footer

Brand Footer

Simple Footer

Brand Footer

I. Favicons - NOP and Public UI

J. Tabs - NOP Only

J. Tabs

K. Calendar - Public UI Only

L. Inputs - Public UI Only

M. Border - Public UI Only

L. Public UI - Inputs

M. Public UI - Border

Page Comparison

Versions Compared

Old Version 21

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

PDP

PDP

PLP

PLP

E. Headings

E. Headings

F. Buttons - NOP and Public UI

G.

Loader Spinner

H. Plugins - NOP and Public UI

Voucher (Toolbar)

G. Loader Spinner

H. Plugins

Loyalty (FAB)

Simple Footer

Brand Footer

Simple Footer

Brand Footer

I. Favicons - NOP and Public UI

J. Tabs - NOP Only

J. Tabs

K. Calendar - Public UI Only

L. Inputs - Public UI Only

M. Border - Public UI Only

N. Breadcrumbs - Public UI Only

L. Public UI - Inputs

M. Public UI - Border