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.
| Table of Contents |
|---|
| minLevel | 1 |
|---|
| maxLevel | 6 |
|---|
| outline | false |
|---|
| type | list |
|---|
| printable | false |
|---|
|
| Info |
|---|
Theme Designer does NOT have access to --adx prefixed properties are for alignment with the Aspenware Design System and are only configurable by the engineering team. |
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-fontline-sizeheight-12
| 0.75rem
|
--adx-fontline-sizeheight-1419
| 01.875rem1875rem
|
--adx-fontline-sizeheight-1622
| 1rem1.375rem
|
--adx-fontline-sizeheight-1924
| 1.2rem5rem
|
E. Border Radius
Controls the border radius various components
CSS Custom Prop | Default |
|---|
--adx-input-border-radius
| 12px
|