/
Aspenware Design System: "--adx" CSS Variables

Aspenware Design System: "--adx" CSS Variables

This pages documents a subset of the CSS variables that exist in the Aspenware systems that are not going to be user-configurable.

CSS variables that are not user-configurable are currently prefixed with --adx while those that are configurable are prefixed with --ads.

A. Global Colors

CSS Custom Prop

Default

CSS Custom Prop

Default

--adx-color-white

hsl(0deg 0% 100%);

--adx-color-black

hsl(0deg 0% 0%);

--adx-color-grey10

hsl(0deg 0% 13% / 4%)

--adx-color-grey15

hsl(0deg 0% 0% / 4%)

--adx-color-grey20

hsl(218deg 7% 24%)

--adx-color-grey25

hsl(0deg 0% 27%)

--adx-color-grey30

hsl(228deg 3% 37%)

--adx-color-grey35

hsl(0deg 0% 64%)

--adx-color-grey40

hsl(210deg 2% 64%)

--adx-color-grey45

hsl(0deg 0% 73%)

--adx-color-grey50

hsl(0deg 0% 40%)

--adx-color-grey60

hsl(180deg 4% 89%)

--adx-color-grey65

hsl(0deg 0% 93%)

--adx-color-grey70

hsl(0deg 0% 96%)

--adx-color-grey-900

#222

--adx-color-neutral-black-400

#717171

--adx-color-error

#e30000

--adx-color-error-backgroundcolor

#FFF2F4

--adx-color-input-border

#94A3B8

--adx-input-backgroundcolor

1000

--adx-input-bordercolor

#DDD

--adx-input-focus-bordercolor

#0072C4

--adx-input-defaultcolor

#BDC6D5

--adx-input-hovercolor

--adx-color-grey-900

--adx-input-labelcolor

--adx-color-grey-900


B. Elevation

These values are the z-index of various elements in the web application. Elements with higher values will appear above elements with lower values.

CSS Custom Prop

Default

CSS Custom Prop

Default

--adx-elevation-navigation

1000


C. Font Sizes

Determines how big or small the letters are. It defines the height of the text box so that all letters, including ascenders and descenders, can fit.

CSS Custom Prop

Default

CSS Custom Prop

Default

--adx-font-size-12

0.75rem

--adx-font-size-14

0.875rem

--adx-font-size-16

1rem

--adx-font-size-19

1.2rem


D. Line Heights

Controls the vertical space between the lines of text. It is the vertical distance between two lines of type, measured from the baseline of one line of type to the baseline of the next.

CSS Custom Prop

Default

CSS Custom Prop

Default

--adx-line-height-12

0.75rem

--adx-line-height-19

1.1875rem

--adx-line-height-22

1.375rem

--adx-line-height-24

1.5rem

E. Border Radius

Controls the border radius various components

CSS Custom Prop

Default

CSS Custom Prop

Default

--adx-input-border-radius

12px

 

Related content

Creating CSS Properties for Theme Designer V2
Creating CSS Properties for Theme Designer V2
More like this
Commerce CSS Property List [NOP & Public UI]
Commerce CSS Property List [NOP & Public UI]
More like this
Guidance for Resort Footer Development and Integration
Guidance for Resort Footer Development and Integration
Read with this
Resort OS Theme Setup Findings / Recommendations (Non- Final)
Resort OS Theme Setup Findings / Recommendations (Non- Final)
More like this
Theme Designer V2 (TD) User Guide
Theme Designer V2 (TD) User Guide
Read with this
Cloud UI Theming
Cloud UI Theming
More like this