Variables to customize a theme for Desktop Assistant

  • 릴리스 버전: Australia
  • 업데이트 날짜 2026년 03월 12일
  • 소요 시간: 9분

    • You can modify specific CSS variables to customize themes for Desktop Assistant.

    표 1. Banner color
    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.
    표 2. Layout and typography variables
    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
    표 3. Color variables
    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
    표 4. Button and interactive element variables
    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
    표 5. Status and alert colors
    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
    표 6. Border and layout variables
    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
    표 7. Spacing variables
    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
    표 8. Font weight and shadow and effects variables
    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.