Table of Contents

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

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

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
Background Color `Brand > Favicons > Ico Favicon`	`--ads-brand-favicons-ico-favicon`	`unset`	Sets the default .ico low resolution favicon path	Theme Designer Base Theme
`Brand > Favicons > 16x16 Favicon`	`--ads-brand-favicons-16x16-favicon`	`unset`	Sets the 16 x 16 resolution favicon path	Theme Designer Base Theme
`Brand > Favicons > 32x32 Favicon`	`--ads-brand-favicons-32x32-favicon`	`unset`	Sets the 32 x 32 resolution favicon path	Theme Designer Base Theme
`Brand > Favicons > 48x48 Favicon`	`--ads-brand-favicons-48x48-favicon`	`unset`	Sets the 48 x 48 resolution favicon path	Theme Designer Base Theme

J. Tabs - NOP Only

These properties apply to the site tab properties on the PDP

Property	CSS Custom Prop	Default Value	Effects	Provided By
Background Color `Brand > Tabs > Active > Background Color`	`--ads-tabs-active-backgroundcolor`	`--ads-brand-white`	Sets the tab active background color	Theme Designer Base Theme
`Brand > Tabs > Active > Background Color`	`--ads-tabs-bar-backgroundcolor`	`--ads-brand-primary-color`	Sets the tab bar background color	Theme Designer Base Theme
`Brand > Tabs > Text > Active > Text Color`	`--ads-tabs-text-active-textcolor`	`--ads-brand-primary-color`	Sets the active tab text	Theme Designer Base Theme
`Brand > Tabs > Text > Text Color`	`--ads-tabs-text-textcolor`	`--ads-brand-white`	Sets the default tab text color	Theme Designer Base Theme

K. Calendar - Public UI

...

Only

These properties apply to global Input variables

Property	CSS Custom Prop	Default Value	Effects	Provided By


Text Transform `Calendar > Title > Text Transform`	`--ads-calendar-title-texttransform`	`capitalize`	Sets the text transform variant for the Public UI Calendar Title	Public UI
Text Transform `Calendar > Month Title > Text Transform`	`--ads-calendar-month-texttransform`	`capitalize`	Sets the text transform variant for the Public UI Calendar Month text	Public UI
Text Transform `Calendar > Legend Title > Text Transform`	`--ads-calendar-legend-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-input-attribute-title-texttransform

none

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

none

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

Public UI

...

These properties apply to the breadcrumbs in Public UI

...

Versions Compared

Old Version 24

New Version 25

Key

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

F. Buttons - NOP and Public UI

H. Plugins - NOP and Public UI

J. Tabs - NOP Only

K. Calendar - Public UI

Only

L. Inputs - Public UI

Only

M. Border - Public UI

Only

Page Comparison

Versions Compared

Old Version 24

New Version 25

Key

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

F. Buttons - NOP and Public UI

H. Plugins - NOP and Public UI

J. Tabs - NOP Only

K. Calendar - Public UI

Only

L. Inputs - Public UI

Only

M. Border - Public UI

Only

N. Breadcrumbs - Public UI

Only