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 |
|---|
--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 |
|---|
--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 |
|---|
--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 |
|---|
--adx-line-height-12
| 0.75rem
|
--adx-line-height-19
| 1.1875rem
|
--adx-line-height-22
| 1.375rem
|
--adx-line-height-24
| 1.5rem
|