DEX Desktop Assistant reference › Reference › Digital End-User Experience › IT Service Management
Variables to customize a theme for Desktop Assistant
You can modify specific CSS variables to customize themes for Desktop Assistant.
| Variable | Description | Order |
|---|
| brand-primary-darkest | The darkest shade of the brand's primary color. | 1 |
| brand-primary-darker | Slightly lighter shade than the darkest shade of the brand's primary color. | 2 |
| brand-primary | Primary brand color used in the UI. | 3 |
| brand-primary-lighter | Lighter shade than the primary brand color. | 4 |
You can apply a gradient to the banner by using the specified colors in the specified order.
| Variable | Description | Default |
|---|
| background-secondary | Secondary background color used for UI elements that are not the main focus. | `#ffffff` |
| background-primary | Primary background color used for main focus areas on the UI. | `#f6f6f8` |
| font-size-base | Base font size used for UI text. | `16px` |
| font-weight-base | Base font weight used for UI body text. | `400` |
| font-family-sans-serif | Default sans serif font family used for UI text. | `Lato` |
| line-height-base | Default text line height for spacing and readability. | `1.4` |
| font-size-h5 | Font size for heading level 5. | `16px` or value of the *$font-size-base* variable. |
| font-size-h4 | Font size for heading level 4. | `18px`This value is calculated using the ceil \(\) function: `ceil(($font-size-base * 1.125))`. For example, if the *font-size-base* value is 16 px, the *font-size-h4* value is 18 px: `ceil((16px * 1.125))//18px`. |
| font-size-h3 | Font size for heading level 3. | `20px`This value is calculated using the ceil \(\) function: `ceil(($font-size-base * 1.25))`. |
| font-size-xl | Extra large font size typically used for titles or large labels. | `24px`This value is calculated using the ceil \(\) function: `ceil(($font-size-base * 1.5))`. |
| font-size-xs | Extra small font size typically used for minor labels or captions. | `12px`This value is calculated using the ceil \(\) function: `ceil(($font-size-base * 0.75))`. |
| font-size-small | Smaller font than the base font, used for secondary text. | `14px`This value is calculated using the ceil \(\) function: `ceil(($font-size-base * 0.875))`. |
| headings-font-family | Font family used for headings. | `Lato` |
| headings-font-weight | Font weight used for headings. | `600` |
| Variable | Description | Default |
|---|
| text-primary | Main color used for body text. | `#181A1F` |
| text-color | General text color for the UI, which is the same as *text-primary*.Set a value for this variable only if you have not already defined the value for *text-primary*. | `$text-primary!default`For example, `$text-primary: #000000 !default;` |
| text-secondary | Color used for less prominent UI text. | `#474D5A` |
| text-tertiary | Color for tertiary text such as help text and annotations. | `#656E81` |
| text-muted | Muted text color that is generally the same as *text-tertiary*.Set a value for this variable only if you have not already defined the value for *text-tertiary*. | `$text-tertiary!default`For example, `$text-tertiary: #999999 !default;` |
| color-grey | Neutral grey color used for elements such as borders and backgrounds. | `#C6CBCB` |
| link-color | Color for hyperlinks. | `#3c59e7` |
| Variable | Description | Default |
|---|
| btn-default-color | Default color for button text. | $brand-primary |
| btn-primary-color | Text color for primary buttons. | $text-white |
| btn-primary-bg | Background color for primary buttons. | $brand-primary |
| brand-primary | Primary brand color used across the UI. | #4f52bd!default; |
| brand-primary-darker | A darker shade of the primary brand color. | #333579 |
| brand-primary-darkest | Darkest shade of the primary brand color. | #1D1E46 |
| brand-primary-lighter | A lighter shade of the primary brand color. | #8789D2 |
| brand-primary-lightest | Lightest shade of the primary brand color. | #D1D2EE |
| Variable | Description | Default |
|---|
| brand-warning-darker | Darker shade of UI warning state color. | #AFA400 |
| brand-success-darker | Darker shade of color used for success states on the UI. | #3B7F00 |
| brand-danger-darker | Darker shade of color used for danger states on the UI. | #CC293C |
| alert-warning-bg | Background color used for alerts and warnings. | $state-warning-bg |
| badge-color | Text color for badges on the UI. | $text-white |
| Variable | Description | Default value |
|---|
| border-primary | Primary border color used for main UI elements. | #8790A1 |
| border-secondary | Secondary border color used for less prominent UI elements. | #ACB2BE |
| border-tertiary | Tertiary border color used for background borders. | #DADDE2 |
| border-width-xs | Extra-small border width used for UI elements like thin lines or light dividers. | 1px |
| border-style-solid | Sets the border style to solid. | solid |
| border-radius-base | Base border radius for rounding corners of UI elements. | 4px |
| input-border | Border style for input fields. | $border-primary |
| Variable | Description | Default value |
|---|
| sp-space--xxl | Extra-extra-large spacing for wide gaps or larger layouts. | 32px |
| sp-space--xl | Extra-large spacing for major sections. | 24px |
| sp-space--lg | Large spacing for padding or margins. | 16px |
| sp-space--md | Medium or standard spacing for most UI elements. | 12px |
| sp-space--sm | Small spacing for compact layouts. | 8px |
| sp-space--xs | Extra-small spacing for minimal gaps. | 4px |
| sp-space--xxs | Extra-extra-small spacing for minimal UI gaps. | 2px |
| panel-heading-padding | Padding applied to the heading section of a panel or card. | $sp-space--xl |
| Variable | Description | Default value |
|---|
| Font weight variable |
| font-weight-lg | Font weight used for large or bold text. | `600`This value is calculated using the ceil \(\) function: `ceil(($font-weight-base * 1.5))`. |
| Shadow and effects variables |
| sp-panel-box-shadow | Shadow styling for panel components. | `0 4px 8px 0 rgba(23, 40, 52, 0.08)` |
| sp-box-shadow--md | Medium box shadow effects for UI components. | `` |
Parent Topic:DEX Desktop Assistant reference