...

Specific page level properties

Property

CSS Custom Prop

Default Value

Effects

Provided By

Font Family

--ads-headings-fontfamily

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> Background Image`	`--ads-page-login-backgroundimage`	`--ads-page-checkout-backgroundimage`	Sets the Login Page Background Image (non-Identity)	Theme Designer Base Theme
Account Page (Auth 0)
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 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
`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
`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 Colorlogo width for accounts pages on mobile. Logo Height is automatically set proportionally to width.	Public UI
`Page > Checkout Accounts > Footer > Button Mask > Background Color`	`--ads-page-checkout-footer-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 Coloraccounts-mask-color`	`#000`	Sets the mask overlay color for the accounts page image	Public UI
`Page > Accounts > Mask > Opacity`	`--ads-page-checkoutaccounts-footermask-button-textcolor`	`--ads-brand-white`	Sets the checkout page footer button textcolor	Theme Designer Base Theme	Logo Image `Page > Checkout > Header > Logo Imageopacity`	`.6`	Sets the mask overlay opacity for the accounts page image	Public UI
`Page > Accounts > Button > Color`	`--ads-page-checkoutaccounts-headerbutton-logo-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 `Page > Checkout > Header > Logo heightvar(--ads-brand-primary-color)`	Sets the primary button background color for the Accounts pages	Public UI
`Page > Accounts > Button > Text Color`	`--ads-page-checkoutaccounts-headerbutton-logotext-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 ImageColor`	`--ads-page-checkout-backgroundheader-backgroundimageurl('../images/checkout-background.jpg')backgroundcolor`	`--ads-brand-primary-color`	Sets the checkout page header background imagecolor	Theme Designer Base Theme
PDP
Background Text Color `Page > PDP Checkout > Buttons Header > Radio > Background Text Color`	`--ads-page-pdpcheckout-buttonsheader-radiotext-backgroundcolor--ads-buttons-primary-backgroundcolorcolor`	`#fff`	Sets the radio button active background checkout page header default text color	Theme Designer Base Theme
Font FamilyColor `Page > PDP Checkout > Header > Card Text > Title Active > Font FamilyColor`	`--ads-page-pdpcheckout-header-cardtext-titleactive-fontfamilycolor`	`--ads-brand-primarysecondary-fontfamilycolor`	Sets the PDP checkout page checkout card header font familyheader active text color	Theme Designer Base Theme
Background Color `Page > PDP Checkout > Title Footer > Background Color`	`--ads-page-pdpcheckout-titlefooter-colorbackgroundcolor`	`--ads-headingsbrand-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-pdpcheckout-optionsfooter-titlebutton-colorbackgroundcolor`	`--ads-brand-primarysecondary-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-pdpcheckout-buttonsfooter-checkoutbutton-backgroundcolortextcolor`	`--ads-buttonsbrand-primary-backgroundcolorwhite`	Sets the PDP checkout page checkout footer button background colortextcolor	Theme Designer Base Theme
Display (Hero)Logo Image `Page > PDP Checkout > Hero > Dynamic > DisplayHeader > Logo Image`	`--ads-page-pdpcheckout-heroheader-dynamiclogo-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
Text TransformLogo Height `Page > PDP Checkout > Product > Title > Text TransformHeader > Logo height`	`--ads-page-pdpcheckout-productheader-titlelogo-texttransformheight`	`none100px`	Sets the text transform variant for the PDP Product title in Public UI	Public UI	Text Transformcheckout page header logo height	Theme Designer Base Theme
Background Image `Page > PDP Checkout > Attribute > Title > Text TransformBackground > Background Image`	`--ads-page-pdpcheckout-attribute-title-texttransform`	`none`	Sets the text transform variant for the PDP Attribute title in Public UI	Pubic UI
PLP
`background-backgroundimage`	`url('../images/checkout-background.jpg')`	Sets the checkout page background image	Theme Designer Base Theme
PDP
Background Color `Page > PLP PDP > Buttons > Container Radio > Background Color`	`--ads-page-plppdp-buttons-containerradio-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 `-ads-buttons-primary-backgroundcolor`	Sets the radio button active background color	Theme Designer Base Theme
Text ColorFont Family `Page > PLP PDP > Cards Card > Button Title > Text ColorFont Family`	`--ads-page-plppdp-cardscard-buttontitle-textcolorfontfamily`	`--ads-brand-primary-whitefontfamily`	Sets the PLP Page card button text colorPDP page checkout card header font family	Theme Designer Base Theme
Text Color `Page > PLP PDP > Cards Title > Price > Text Color`	`--ads-page-plppdp-cardstitle-price-textcolorcolor`	`--ads-brand-secondaryheadings-color``	Sets the PLP Page card price text colorPDP page title color.	Theme Designer Base Theme
Text Color `Page > PLP PDP > Cards Card > Button > Hover Title > Text Color`	`--ads-page-plppdp-cardsoptions-buttontitle-hover-textcolorcolor`	`--ads-brand-whiteprimary-color`	Sets the PLP Page card button hover text colorPDP page options title color	Theme Designer Base Theme
Background Color `Page > PLP PDP > Cards Buttons > Button Checkout > Background Color`	`--ads-page-plppdp-cardsbuttons-buttoncheckout-backgroundcolor`	`--ads-brandbuttons-secondaryprimary-colorbackgroundcolor`	Sets the PLP Page card button default PDP page checkout button background color	Theme Designer Base Theme
Background ColorDisplay (Hero) `Page > PLP PDP > Cards Hero > Button > Hover > Background ColorDynamic > Display`	`--ads-page-plppdp-cardshero-buttondynamic-hover-backgroundcolor`	`--ads-brand-secondary-hover-color`	Sets the PLP Page cards button hover 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
Font FamilyText Transform `Page > PLP PDP > Cards Product > Header Title > Font FamilyText Transform`	`--ads-page-plppdp-cardsproduct-headertitle-fontfamily`	`--ads-headings-fontfamily`	Sets the PLP Page cards header font family	Theme Designer Base Theme	Font Family `Page > PLP > Cards > Button > 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-buttontitle-fontfamily`	`--ads-brand-primary-fontfamily`	Sets the PLP Page cards button 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 > Price > Font FamilyContainer > Background Color`	`--ads-page-plp-cardscontainer-price-fontfamily--backgroundcolor` (the “p” on the end is intentional - it tells TD to render a Color Picker instead of the default Swatch Selector)	`--ads-brand-secondary-fontfamilywhite`	Sets the PLP Page cards price font familycontainer background color	Theme Designer Base Theme
Font FamilyText Color `Page > PLP > Cards > Body Button > Font FamilyText Color`	`--ads-page-plp-cards-bodybutton-fontfamilytextcolor`	`--ads-brand-primary-fontfamilywhite`	Sets the PLP Page cards body copy font familycard button text color	Theme Designer Base Theme
Text Color `Page > PLP > Cards > Header Price > Text Color`	`--ads-page-plp-cards-headerprice-colortextcolor`	`--ads-headingsbrand-secondary-color`	Sets the PLP Page cards header card price text color	Theme Designer Base Theme
Text Color `Page > PLP > Cards > Button > Hover > Text Color`	`--ads-page-plp-cards-button-hover-text'Shop Now'textcolor`	`--ads-brand-white`	Sets the PLP Page cards action button copycard button hover text color	Theme Designer Base Theme
Display (Hero)Background Color `Page > PLP > Hero Cards > Dynamic Button > DisplayBackground Color`	`--ads-page-plp-herocards-dynamicbutton-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`backgroundcolor`	`--ads-brand-secondary-color`	Sets the PLP Page card button default background color	Theme Designer Base Theme
Background Color `Page > PLP > Hero Cards > Button > Static Hover > Background ImageColor`	`--ads-page-plp-herocards-button-statichover-backgroundimageurl('../images/default-category-hero.jpg')backgroundcolor`	`--ads-brand-secondary-hover-color`	Sets the PLP and PDP Page static hero background imagePage cards button hover background color	Theme Designer Base Theme
HeightFont Family `Page > PLP > Cards > Hero Header > Hero HeightFont Family`	`--ads-page-plp-herocards-header-heroheight285pxfontfamily`	`--ads-headings-fontfamily`	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

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

E. Headings

These properties apply to the H1 - H5 headings globally

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

F. Buttons

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-

headings

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

Buttons > Primary > Text Color

--ads-buttons-primary-textcolor

#fff

Sets the global primary button text color

Theme Designer Base Theme

Prop	Default Value	Effects	Provided By
Background Color

Buttons

Loader >

Primary >

Background Color

--ads-

buttons-primarySets the global primary button background color

loader-backgroundcolor

--ads-brand-primary-color

(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

Border Color

Image

Buttons > Primary > Border Color

Loader > Image

--ads-

buttons

loader-

primary-bordercolor--ads-brand-primary-color

image

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

Sets the global

primary button border color

loader image

Theme Designer Base

Theme

Text Color

Buttons > Secondary > Text

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-

buttons

plugins-voucher-

secondary

toolbar-

textcolor

backgroundcolor

--ads-brand-

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

grey10

Sets the background color for the Voucher toolbar [plugin]

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

Plugins > Voucher > Toolbar > Button > Background Color

--ads

-loader

#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-button-backgroundcolor

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

Loader > Image

--ads-brand-secondary-color

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

Theme Designer Base Theme

Image

Text Color

Plugins > Voucher > Toolbar > Label > Text Color

--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
Voucher (Toolbar)
Background Color`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 > Background ColorFont Family`	`--ads-plugins-voucher-toolbar-backgroundcolorfontfamily`	`--ads-brand-grey10primary-fontfamily`	Sets the background color font family for the Voucher toolbar [plugin]	Theme Designer Base Theme
Loyalty (FAB)
Background Color `Plugins > Voucher Loyalty > Toolbar FAB > Button Toggle > Background Color`	`--ads-plugins-voucherloyalty-toolbarfab-buttontoggle-backgroundcolor`	`--ads-brand-secondary-color`	Sets the button toggle background color for the Voucher toolbar Loyalty FAB [plugin]	Theme Designer Base Theme
Text Background Color `Plugins > Voucher Loyalty > Toolbar FAB > Label Footer > Text Background Color`	`--ads-plugins-voucherloyalty-toolbarfab-labelfooter-textcolorbackgroundcolor`	`--ads-brand-text-colorgrey10`	Sets the label footer background color for the Voucher toolbar Loyalty FAB [plugin]	Theme Designer Base Theme
Font FamilyText Color `Plugins > Loyalty > Voucher FAB > Footer > Toolbar Link > Font FamilyText Color`	`--ads-plugins-voucher-toolbar-fontfamilyloyalty-fab-footer-link-textcolor`	`--ads-brand-primarylink-fontfamilycolor`	Sets the font family footer link/text color for the Voucher toolbar Loyalty FAB [plugin]	Theme Designer Base Theme
Loyalty (FAB)
Background Text Color `Plugins > Loyalty > FAB > Toggle Body > Background Text Color`	`--ads-plugins-loyalty-fab-togglebody-backgroundcolortextcolor`	`--ads-brand-secondaryprimary-color`	Sets the toggle background body text color for the Loyalty FAB [plugin]	Theme Designer Base Theme
Background ColorTop (Position) `Plugins > Loyalty > FAB > Footer Position > Background ColorTop`	`--ads-plugins-loyalty-fab-footerposition-backgroundcolor--ads-brand-grey10top`	`20px`	Sets the footer background color desktop “top” position for the Loyalty FAB [plugin]	Theme Designer Base Theme
Text ColorRight (Position) `Plugins > Loyalty > FAB > Footer > Link > Text ColorPosition > Right`	`--ads-plugins-loyalty-fab-footerposition-link-textcolor--ads-brand-link-colorright`	`10px`	Sets the footer link/text color desktop “right” position for the Loyalty FAB [plugin]	Theme Designer Base Theme
Text ColorTop (Position) `Plugins > Loyalty > FAB > Body > Text ColorPosition > Mobile > Top`	`--ads-plugins-loyalty-fab-position-bodymobile-textcolor--ads-brand-primary-colortop`	`20px`	Sets the body text color mobile “top” position for the Loyalty FAB [plugin]	Theme Designer Base Theme
Top Right (Position) `Plugins > Loyalty > FAB > Position > Mobile > TopRight`	`--ads-plugins-loyalty-fab-position-topmobile-right`	`20px10px`	Sets the desktop “top” mobile “right” position for the Loyalty FAB [plugin]	Theme Designer Base Theme
Right (Position)Image `Plugins > Loyalty > FAB > Position Logo > RightImage`	`--ads-plugins-loyalty-fab-positionlogo-right10pximage`	`url('../images/rewards.svg')`	Sets the desktop “right” position logo image for the Loyalty FAB [plugin]	Theme Designer Base ThemeTop (Position)
Simple Footer
Background Color `Plugins > Loyalty > FAB > Position > Mobile > TopSimple Footer > Background Color`	`--ads-plugins-simplefooter-loyaltybackgroundcolor`	`--fabads-positionbrand-mobileprimary-top20pxcolor`	Sets the mobile “top” position background color for the Loyalty FAB [pluginsimple footer [NOP Widget]	Theme Designer Base Theme
Right (Position)Text Color `Plugins > Loyalty > FAB > Position > Mobile > RightSimple Footer > Text Color`	`--ads-plugins-simplefooter-loyaltytextcolor`	`-fab-positionads-mobilebrand-rightwhite`	`10px`	Sets the mobile “right” position text color for the Loyalty FAB [pluginsimple footer [NOP Widget]	Theme Designer Base Theme
Image (Logo) `Plugins > Loyalty Simple Footer > FAB > Logo > Image`	`--ads-plugins-loyaltysimplefooter-fab-logo-image`	`url('../images/rewards.svg')--ads-header-logo-image`	Sets the logo image for the Loyalty FAB [pluginsimple footer [NOP Widget]	Theme Designer Base Theme
Simple Brand Footer
Background Color `Plugins > Simple Brand Footer > Background Color`	`--ads-plugins-simplefooterbrandfooter-backgroundcolor`	`unset`	Sets the background color for the brand footer [NOP Widget] if implemented by a resort.	Theme Designer Base Theme
Text Color `Plugins > Brand Footer > Header > Text Color`	`--ads-brandplugins-brandfooter-primaryheader-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-brandfooter-simplefooterbody-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 > Link > Logo ImageText 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 > Link > Background Hover > Text Color`	`--ads-plugins-pluginsbrandfooter-link-brandfooterhover-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-textcolorunsetlogo-image`	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

These properties apply to the site Favicons

Property

CSS Custom Prop

Default Value

Effects

Provided By

Background Color

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

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

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.

32 x 32 resolution favicon path

Theme Designer Base Theme

image (Logo)

Plugins >

Brand

Footer

>

Logo

Favicons >

Image

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

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

Brand > Tabs >

Favicons > 16x16 Favicon

Active > Background Color

--ads-tabs-bar-backgroundcolor

--ads-brand-

favicons-16x16-faviconunset

primary-color

Sets the

16 x 16 resolution favicon path

tab bar background color	Theme Designer Base Theme
`Brand >`

Favicons > 32x32 Favicon

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

Favicons > 48x48 Favicon

Tabs > Text > Text Color

--ads-tabs-text-textcolor

-

brand

-

favicons

ads-

48x48

brand-

faviconunset

white

Sets the

48 x 48 resolution favicon path

default tab text color

Theme Designer Base Theme

...

K. Public UI - Calendar

These properties apply to the site tab properties on the PDPglobal 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
`Calendar > Month > 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
`Calendar > Legend > 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. 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-

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

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

Breadccrumbs >

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

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

Breadccrumbs >

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

`Inactive > Color`	`--ads-breadcrumbs-inactive-colorp`	`--adx-color-neutral-black-400`	Sets the inactive color for the breadcrumbs in Public UI	Public UI
`Breadccrumbs > Font- Weight`	`--ads-breadcrumbs-font-weight`	`--ads-`

input

font-

attribute-title-texttransformnone

weight-normal

Sets the

input attribute title text transform variant for Checkbox Inputs

Property

CSS Custom Prop

Default Value

Effects

Provided By

Text Transform

Border > Border Radius

font weight for the breadcrumbs in Public UI

Public UI

M. Public UI - Border

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

Breadccrumbs > Text Transform

--ads-

border

breadcrumbs-

borderradius

texttransform

none

None

Sets the

global base border radius for elements that inherit from this variable

text transform variant for the breadcrumbs in Public UI

Public UI

Versions Compared

Old Version 21

New Version 22

Key

Global

Login Page

Account Page (Auth 0)

Checkout

PDP

PLP

PDP

PLP

E. Headings

E. Headings

F. Buttons

G.

Loader Spinner

H. Plugins

G. Loader Spinner

H. Plugins

Loyalty (FAB)

Loyalty (FAB)

Simple Footer

Brand Footer

Brand Footer

I. Favicons

J.

Tabs

K. Public UI - Calendar

L. Public UI - Inputs

M. Public UI - Border

L. Public UI - Inputs

M. Public UI - Border

Page Comparison

Versions Compared

Old Version 21

New Version 22

Key

Global

Login Page

Account Page (Auth 0)

Checkout

PDP

PLP

PDP

PLP

E. Headings

E. Headings

F. Buttons

G.

Loader Spinner

H. Plugins

Voucher (Toolbar)

G. Loader Spinner

H. Plugins

Voucher (Toolbar)

Loyalty (FAB)

Loyalty (FAB)

Simple Footer

Brand Footer

Brand Footer

I. Favicons

J.

Tabs

K. Public UI - Calendar

L. Public UI - Inputs

M. Public UI - Border

N. Public UI -

Breadcrumbs

L. Public UI - Inputs

M. Public UI - Border