Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 27 Next »

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

0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12)

Header drawer drop shadow

NOP CSS

Text Transform

Header > Text > text Transform

--ads-header-text-texttransform

none

The font casing for the header (upper, lower, capital, none/inherit)

NOP CSS

Color

Header > Menu > Button > Color

--ads-header-menu-button-color

#231f20

Header menu button icon color

NOP CSS

Background Color

Header > Menu > Button > Hover > Background Color

--ads-header-menu-button-hover-backgroundcolor

--ads-color-grey15

Header menu button background hover color

NOP CSS

Background Color

Header > Menu > Button > Focus > Background Color

--ads-header-menu-button-focus-backgroundcolor

--ads-color-grey15

Header menu button background focus color

NOP CSS

Color

Header > Cart > Icon > Badge > Color

--ads-header-cart-icon-badge-color

hsl(216, 43%, 46%)

Header Cart icon badge color

NOP CSS

Color

Header > Cart > Icon > Color

--ads-header-cart-icon-color

--ads-header-menu-button-color/#231f20

Header Cart icon color

NOP CSS

Image

Header > Cart > Logo > Image

--ads-header-logo-image

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

Header Logo image

NOP CSS

Width

Header > Logo > Width

--ads-header-logo-width

180px

Header Logo width

NOP CSS

C. Sidebar - NOP and Public UI

Side props set the Cloud Header styles

Property

CSS Custom Prop

Default Value

Effects

Provided By

Background Color

Sidebar > Banner > Background Color

--ads-sidebar-banner-backgroundcolor

--ads-color-white

Cloud sidebar background color

NOP CSS

Color

Sidebar > Banner > Link > Color

--ads-sidebar-banner-link-color

#231f20

Cloud sidebar banner link color

NOP CSS

Background Color

Sidebar > Banner > Link > Hover > Background Color

--ads-sidebar-banner-link-hover-backgroundcolor

--ads-color-grey15

Cloud sidebar banner link hover color

NOP CSS

Text Transform

Sidebar > Banner > Text > Text Transform

--ads-sidebar-banner-text-texttransform

none

The font casing for the cloud sidebar banner text (upper, lower, capital, none/inherit)

NOP CSS

Text Color

Sidebar > Nav > Item > Text > Color

--ads-sidebar-nav-item-text-color

#231f20

Cloud sidebar item text color

NOP CSS

Text Transform

Sidebar > Nav > Item > Text > Transform

--ads-sidebar-nav-item-text-texttransform

none

The font casing for the cloud sidebar items (upper, lower, capital, none/inherit)

NOP CSS

Background Color

Sidebar > Nav > Item > Hover > Background Color

--ads-sidebar-nav-item-hover-backgroundcolor

--ads-color-grey15

Cloud sidebar items hover color

NOP CSS

Background Color

Sidebar > Nav > Item > Focus > Background Color

--ads-sidebar-nav-item-focus-backgroundcolor

--ads-color-grey15

Cloud sidebar items focus color

NOP CSS

Image

Sidebar > Banner > Logo > Image

--ads-sidebar-banner-logo-image

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

Cloud Sidebar header logo

NOP CSS

Width

Sidebar > Banner > Logo > Width

--ads-sidebar-banner-logo-width

3rem

Cloud Sidebar header logo width

NOP CSS

D. Page Properties - NOP and Public UI

Specific page level properties

Property / Path

CSS Custom Prop

Default Value

Effects

Provided By

Global

Box Shadow / Drop Shadow

Page > Dropshadow

--ads-page-boxshadow

0 0 7px rgba(42, 29, 19, 0.33)

Sets the drop-shadow on the page container. Can set to none to remove it for a “flat” page look

Theme Designer Base Theme

Background Color

Page > Background Color

--ads-page-backgroundcolor

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

#f3f2f1

Sets the global page background color

Theme Designer Base Theme

Login Page

Background Image

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

Sets the Logo Image on the Vouchers in Accounts

Public UI

Background Image
Page > Accounts > Background Image

--ads-page-accounts-background-image

url('https://awaccountsdatashared.blob.core.windows.net/shared/bg--aspenware.jpg')

Sets the background image for Accounts Pages

Public UI

Logo Image
Page > Accounts > Logo Image

--ads-page-accounts-logo-image

url('https://awaccountsdatashared.blob.core.windows.net/shared/logo-sidenav.png')

Sets the Logo Image for Accounts Pages

Public UI

Width
Page > Accounts > Logo Image > Desktop > Width

--ads-page-accounts-logo-desktop-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-logo-mobile-width

var(--ads-header-logo-width)

Sets the logo width for accounts pages on mobile. Logo Height is automatically set proportionally to width.

Public UI

Color
Page > Accounts > Mask > Color

--ads-page-accounts-mask-color

#000

Sets the mask overlay color for the accounts page image

Public UI

Opacity
Page > Accounts > Mask > Opacity

--ads-page-accounts-mask-opacity

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

Sets the primary button background color for the Accounts pages

Public UI

Color
Page > Accounts > Button > Text Color

--ads-page-accounts-button-text-color

var(--ads-brand-white, #fff)

Sets the primary button text color for the Accounts pages

Public UI

Checkout

Background Color

Page > Checkout > Header > Background Color

--ads-page-checkout-header-backgroundcolor

--ads-brand-primary-color

Sets the checkout page header background color

Theme Designer Base Theme

Text Color

Page > Checkout > Header > Text Color

--ads-page-checkout-header-text-color

#fff

Sets the checkout page header default text color

Theme Designer Base Theme

Color

Page > Checkout > Header > Text > Active > Color

--ads-page-checkout-header-text-active-color

--ads-brand-secondary-color

Sets the checkout page header active text color

Theme Designer Base Theme

Background Color

Page > Checkout > Footer > Background Color

--ads-page-checkout-footer-backgroundcolor

--ads-brand-primary-color

Sets the checkout page footer background color

Theme Designer Base Theme

Background Color

Page > Checkout > Footer > Button > 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 Color

--ads-page-checkout-footer-button-textcolor

--ads-brand-white

Sets the checkout page footer button textcolor

Theme Designer Base Theme

Logo Image

Page > Checkout > Header > Logo Image

--ads-page-checkout-header-logo-image

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 height

--ads-page-checkout-header-logo-height

100px

Sets the checkout page header logo height

Theme Designer Base Theme

Background Image

Page > Checkout > Background > Background Image

--ads-page-checkout-background-backgroundimage

url('../images/checkout-background.jpg')

Sets the checkout page background image

Theme Designer Base Theme

PDP

Background Color

Page > PDP > Buttons > Radio > Background Color

--ads-page-pdp-buttons-radio-backgroundcolor

--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-pdp-card-title-fontfamily

--ads-brand-primary-fontfamily

Sets the PDP page checkout card header font family

Theme Designer Base Theme

Color

Page > PDP > Title > Color

--ads-page-pdp-title-color

--ads-headings-color`

Sets the PDP page title color.

Theme Designer Base Theme

Color

Page > PDP > Card > Title > Color

--ads-page-pdp-options-title-color

--ads-brand-primary-color

Sets the PDP page options title color

Theme Designer Base Theme

Background Color

Page > PDP > Buttons > Checkout > Background Color

--ads-page-pdp-buttons-checkout-backgroundcolor

--ads-buttons-primary-backgroundcolor

Sets the PDP page checkout button background color

Theme Designer Base Theme

Display (Hero)

Page > PDP > Hero > Dynamic > Display

--ads-page-pdp-hero-dynamic-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

Text Transform

Page > PDP > Product > Title > Text Transform

--ads-page-pdp-product-title-texttransform

none

Sets the text transform variant for the PDP Product title in Public UI

Public UI

Text Transform

Page > PDP > Attribute > Title > Text Transform

--ads-page-pdp-attribute-title-texttransform

none

Sets the text transform variant for the PDP Attribute title in Public UI

Pubic UI

PLP

Background Color

Page > PLP > Container > Background Color

--ads-page-plp-container-backgroundcolor

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

--ads-brand-white

Sets the PLP Page container background color

Theme Designer Base Theme

Text Color

Page > PLP > Cards > Button > Text Color

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

--ads-brand-white

Sets the PLP Page card button text color

Theme Designer Base Theme

Text Color

Page > PLP > Cards > Price > Text Color

--ads-page-plp-cards-price-textcolor

--ads-brand-secondary-color

Sets the PLP Page card price text color

Theme Designer Base Theme

Text Color

Page > PLP > Cards > Button > Hover > Text Color

--ads-page-plp-cards-button-hover-textcolor

--ads-brand-white

Sets the PLP Page card button hover text color

Theme Designer Base Theme

Background Color

Page > PLP > Cards > Button > Background Color

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

--ads-brand-secondary-color

Sets the PLP Page card button default background color

Theme Designer Base Theme

Background Color

Page > PLP > Cards > Button > Hover > Background Color

--ads-page-plp-cards-button-hover-backgroundcolor

--ads-brand-secondary-hover-color

Sets the PLP Page cards button hover background color

Theme Designer Base Theme

Font Family

Page > PLP > Cards > Header > Font Family

--ads-page-plp-cards-header-fontfamily

--ads-headings-fontfamily

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

Plugins > Loyalty > FAB > Logo > Image

--ads-plugins-loyalty-fab-logo-image

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

Sets the logo image for the Loyalty FAB [plugin]

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 Color

--ads-plugins-simplefooter-textcolor

--ads-brand-white

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

Theme Designer Base Theme

Image (Logo)

Plugins > Simple Footer > Logo Image

--ads-plugins-simplefooter-logo-image

--ads-header-logo-image

Sets the logo for the simple footer [NOP Widget]

Theme Designer Base Theme

Brand Footer

Background Color

Plugins > Brand Footer > Background Color

--ads-plugins-brandfooter-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-plugins-brandfooter-header-textcolor

unset

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

--ads-plugins-brandfooter-link-textcolor

unset

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

--ads-plugins-brandfooter-link-hover-textcolor

unset

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

Theme Designer Base Theme

image (Logo)

Plugins > Brand Footer > Logo > Image

--ads-plugins-brandfooter-logo-image

--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-brand-favicons-ico-favicon

unset

Sets the default .ico low resolution favicon path

Theme Designer Base Theme

Favicon

Brand > Favicons > 16x16 Favicon

--ads-brand-favicons-16x16-favicon

unset

Sets the 16 x 16 resolution favicon path

Theme Designer Base Theme

Favicon

Brand > Favicons > 32x32 Favicon

--ads-brand-favicons-32x32-favicon

unset

Sets the 32 x 32 resolution favicon path

Theme Designer Base Theme

Favicon

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

Background Color
Brand > Tabs > Active > Background Color

--ads-tabs-bar-backgroundcolor

--ads-brand-primary-color

Sets the tab bar background color

Theme Designer Base Theme

Text Color
Brand > Tabs > Text > Active > Text Color

--ads-tabs-text-active-textcolor

--ads-brand-primary-color

Sets the active tab text

Theme Designer Base Theme

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

N. Breadcrumbs - Public UI Only

These properties apply to the breadcrumbs in Public UI

Property

CSS Custom Prop

Default Value

Effects

Provided By

Color

Breadcrumbs > Active > Color

--ads-breadcrumbs-active-colorp

--adx-color-grey-900

Sets the active color for the breadcrumbs in Public UI

Public UI

Color

Breadcrumbs > Active > Hover > Color

--ads-breadcrumbs-active-hover-colorp

--adx-color-neutral-black-400

Sets the active hover color for the breadcrumbs in Public UI

Public UI

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

  • No labels