Button
-
button-border-width -
var(--button-border-width)
-
1px -
border-width-xs
-
button-color-background-borderless -
var(--button-color-background-borderless)
-
#ffffff00
-
button-color-background-primary-default -
var(--button-color-background-primary-default)
-
#4dacff -
color-background-interactive-default
-
button-color-background-primary-hover -
var(--button-color-background-primary-hover)
-
#92cbff -
color-background-interactive-hover
-
button-color-background-secondary -
var(--button-color-background-secondary)
-
#ffffff00
-
button-color-border-borderless -
var(--button-color-border-borderless)
-
#ffffff00 -
button-color-background-borderless
-
button-color-border-primary-default -
var(--button-color-border-primary-default)
-
#4dacff -
button-color-background-primary-default
-
button-color-border-primary-hover -
var(--button-color-border-primary-hover)
-
#92cbff -
button-color-background-primary-hover
-
button-color-border-secondary-default -
var(--button-color-border-secondary-default)
-
#4dacff -
color-border-interactive-default
-
button-color-border-secondary-hover -
var(--button-color-border-secondary-hover)
-
#92cbff -
color-border-interactive-hover
Aa
-
button-color-text-borderless-default -
var(--button-color-text-borderless-default)
-
#4dacff -
color-text-interactive-default
Aa
-
button-color-text-borderless-hover -
var(--button-color-text-borderless-hover)
-
#92cbff -
color-text-interactive-hover
Aa
-
button-color-text-primary -
var(--button-color-text-primary)
-
#080c11 -
color-text-inverse
Aa
-
button-color-text-secondary-default -
var(--button-color-text-secondary-default)
-
#4dacff -
color-text-interactive-default
Aa
-
button-color-text-secondary-hover -
var(--button-color-text-secondary-hover)
-
#92cbff -
color-text-interactive-hover
-
button-icon-color-fill-borderless-default -
var(--button-icon-color-fill-borderless-default)
-
#4dacff -
button-color-text-borderless-default
-
button-icon-color-fill-borderless-hover -
var(--button-icon-color-fill-borderless-hover)
-
#92cbff -
button-color-text-borderless-hover
-
button-icon-color-fill-primary -
var(--button-icon-color-fill-primary)
-
#080c11 -
button-color-text-primary
-
button-icon-color-fill-secondary-default -
var(--button-icon-color-fill-secondary-default)
-
#4dacff -
button-color-border-secondary-default
-
button-icon-color-fill-secondary-hover -
var(--button-icon-color-fill-secondary-hover)
-
#92cbff -
button-color-text-secondary-hover
-
button-icon-dimension -
var(--button-icon-dimension)
-
20px
-
button-icon-margin-right -
var(--button-icon-margin-right)
-
0.25rem -
spacing-1
-
button-padding-x-large -
var(--button-padding-x-large)
-
1rem -
spacing-4
-
button-padding-x-large-icon-only -
var(--button-padding-x-large-icon-only)
-
0.75rem -
spacing-3
-
button-padding-x-medium -
var(--button-padding-x-medium)
-
1rem -
spacing-4
-
button-padding-x-medium-icon-only -
var(--button-padding-x-medium-icon-only)
-
0.5rem -
spacing-2
-
button-padding-x-small -
var(--button-padding-x-small)
-
1rem -
spacing-4
-
button-padding-x-small-icon-only -
var(--button-padding-x-small-icon-only)
-
0.25rem -
spacing-1
-
button-padding-y-large -
var(--button-padding-y-large)
-
0.75rem -
spacing-3
-
button-padding-y-large-icon-only -
var(--button-padding-y-large-icon-only)
-
0.75rem -
spacing-3
-
button-padding-y-medium -
var(--button-padding-y-medium)
-
0.5rem -
spacing-2
-
button-padding-y-medium-icon-only -
var(--button-padding-y-medium-icon-only)
-
0.5rem -
spacing-2
-
button-padding-y-small -
var(--button-padding-y-small)
-
0.25rem -
spacing-1
-
button-padding-y-small-icon-only -
var(--button-padding-y-small-icon-only)
-
0.25rem -
spacing-1
-
button-radius -
var(--button-radius)
-
3px -
radius-base
Card
-
card-color-border -
var(--card-color-border)
-
#51555b -
color-palette-grey-700 -
Border color used for the Card component
-
card-color-background -
var(--card-color-background)
-
#101923 -
color-background-base-default
-
card-header-prefix-dimension -
var(--card-header-prefix-dimension)
-
24px
-
card-header-prefix-margin-right -
var(--card-header-prefix-margin-right)
-
0.5rem -
spacing-2
-
card-header-suffix-margin-left -
var(--card-header-suffix-margin-left)
-
0.5rem -
spacing-2
-
card-header-suffix-dimension -
var(--card-header-suffix-dimension)
-
24px
-
card-header-padding-x -
var(--card-header-padding-x)
-
0.5rem -
spacing-2
-
card-header-padding-y -
var(--card-header-padding-y)
-
0.625rem
-
card-border-width -
var(--card-border-width)
-
1px -
border-width-xs
-
card-shadow -
var(--card-shadow)
-
0px 4px 4px 1px rgba(0, 0, 0, 0.45) -
shadow-overlay
-
card-body-padding -
var(--card-body-padding)
-
0.5rem -
spacing-2
-
card-footer-padding -
var(--card-footer-padding)
-
0.5rem -
spacing-2
-
card-radius -
var(--card-radius)
-
3px -
radius-base
Checkbox
-
checkbox-radius -
var(--checkbox-radius)
-
2px -
[DEPRECATED] use checkbox-control-radius instead
-
checkbox-control-dimension -
var(--checkbox-control-dimension)
-
24px
-
checkbox-control-padding -
var(--checkbox-control-padding)
-
0.125rem -
spacing-050
-
checkbox-control-radius -
var(--checkbox-control-radius)
-
2px
-
checkbox-label-margin-left -
var(--checkbox-label-margin-left)
-
0.5rem -
spacing-2
Classification Banner
-
classification-banner-color-background-confidential -
var(--classification-banner-color-background-confidential)
-
#0033a0 -
color-classification-confidential -
Background color of the Confidential classification banner
-
classification-banner-color-background-cui -
var(--classification-banner-color-background-cui)
-
#502b85 -
color-classification-cui -
Background color of the CUI classification banner
-
classification-banner-color-background-secret -
var(--classification-banner-color-background-secret)
-
#c8102e -
color-classification-secret -
Background color of the Secret classification banner
-
classification-banner-color-background-topsecret -
var(--classification-banner-color-background-topsecret)
-
#ff8c00 -
color-classification-topsecret -
Background color of the Top Secret classification banner
-
classification-banner-color-background-topsecretsci -
var(--classification-banner-color-background-topsecretsci)
-
#fce83a -
color-classification-topsecretsci -
Background color of the Top Secret//SCI classification banner
-
classification-banner-color-background-unclassified -
var(--classification-banner-color-background-unclassified)
-
#007a33 -
color-classification-unclassified -
Background color of the Unclassified classification banner
Clock
-
clock-datetime-color-background -
var(--clock-datetime-color-background)
-
#101923 -
color-palette-brightblue-900
Container
-
container-color-border -
var(--container-color-border)
-
#000000 -
color-palette-neutral-1000 -
Border color used for the Container component
Global Status Bar
-
gsb-color-background -
var(--gsb-color-background)
-
#172635 -
color-palette-darkblue-900 -
Background color of the Global Status Bar component
Aa
-
gsb-color-text -
var(--gsb-color-text)
-
#ffffff -
color-palette-neutral-000 -
Primary text color used within the Global Status Bar
-
gsb-icon-color-fill-default -
var(--gsb-icon-color-fill-default)
-
#4dacff -
color-palette-brightblue-500 -
Primary color used for interactive elements in the Global Status Bar
-
gsb-icon-color-fill-hover -
var(--gsb-icon-color-fill-hover)
-
#92cbff -
color-palette-brightblue-400 -
Hover color used for interactive elements in the Global Status Bar
Indeterminate Progress
-
indeterminate-progress-radius-inner -
var(--indeterminate-progress-radius-inner)
-
23px -
Inside border radius
-
indeterminate-progress-radius-outer -
var(--indeterminate-progress-radius-outer)
-
30px -
Outside border radius
Input
-
input-border-width -
var(--input-border-width)
-
1px -
border-width-xs
-
input-color-background-default -
var(--input-color-background-default)
-
#101923 -
color-background-base-default
-
input-color-border-default -
var(--input-color-border-default)
-
#2b659b -
color-border-interactive-muted
-
input-color-border-hover -
var(--input-color-border-hover)
-
#92cbff -
color-border-interactive-hover
-
input-color-border-invalid -
var(--input-color-border-invalid)
-
#ff3838 -
color-border-error
Aa
-
input-color-text-default -
var(--input-color-text-default)
-
#ffffff -
color-text-primary
Aa
-
input-color-text-placeholder -
var(--input-color-text-placeholder)
-
#a4abb6 -
color-text-placeholder
-
input-icon-color-fill-default -
var(--input-icon-color-fill-default)
-
#4dacff -
color-background-interactive-default
-
input-icon-dimension -
var(--input-icon-dimension)
-
20px
-
input-padding-x-large -
var(--input-padding-x-large)
-
0.75rem -
spacing-3
-
input-padding-x-medium -
var(--input-padding-x-medium)
-
0.5rem -
spacing-2
-
input-padding-x-small -
var(--input-padding-x-small)
-
0.25rem -
spacing-1
-
input-padding-y-large -
var(--input-padding-y-large)
-
0.5rem -
spacing-2
-
input-padding-y-medium -
var(--input-padding-y-medium)
-
0.5rem -
spacing-2
-
input-padding-y-small -
var(--input-padding-y-small)
-
0.5rem -
spacing-2
-
input-prefix-margin-right -
var(--input-prefix-margin-right)
-
0.25rem -
spacing-1
-
input-radius -
var(--input-radius)
-
3px -
radius-base
-
input-suffix-margin-left -
var(--input-suffix-margin-left)
-
0.25rem -
spacing-1
Link
Aa
-
link-color-text-default -
var(--link-color-text-default)
-
#4dacff -
color-text-interactive-default -
Color used for links in default state
Aa
-
link-color-text-hover -
var(--link-color-text-hover)
-
#4dacff -
link-color-text-default -
Color used for links in hover state. Links do not change color on hover
Log
-
log-color-border -
var(--log-color-border)
-
#000000 -
color-palette-neutral-1000
Menu
-
menu-divider-color-fill -
var(--menu-divider-color-fill)
-
#51555b -
color-palette-grey-700 -
Fill color for menu dividers
Monitoring Icon
-
monitoring-icon-badge-color-background -
var(--monitoring-icon-badge-color-background)
-
#101923 -
color-palette-brightblue-900
Notification Banner
-
notification-banner-color-border-inner-caution -
var(--notification-banner-color-border-inner-caution)
-
#fce83a -
color-status-caution -
Fill color of the Caution Notification Banner background
-
notification-banner-color-border-inner-critical -
var(--notification-banner-color-border-inner-critical)
-
#ff3838 -
color-status-critical -
Fill color of the Critical Notification Banner background
-
notification-banner-color-border-inner-default -
var(--notification-banner-color-border-inner-default)
-
#4dacff -
color-border-interactive-default -
Fill color of the Default Notification Banner background
-
notification-banner-color-border-inner-normal -
var(--notification-banner-color-border-inner-normal)
-
#56f000 -
color-status-normal -
Fill color of the Normal Notification Banner background
-
notification-banner-color-border-inner-off -
var(--notification-banner-color-border-inner-off)
-
#a4abb6 -
color-status-off -
Fill color of the Off Notification Banner background
-
notification-banner-color-border-inner-serious -
var(--notification-banner-color-border-inner-serious)
-
#ffb302 -
color-status-serious -
Fill color of the Serious Notification Banner background
-
notification-banner-color-border-inner-standby -
var(--notification-banner-color-border-inner-standby)
-
#2dccff -
color-status-standby -
Fill color of the Standby Notification Banner background
-
notification-banner-color-border-outer-caution -
var(--notification-banner-color-border-outer-caution)
-
#fce83a -
color-status-caution -
Stroke color of the Caution Notification Banner
-
notification-banner-color-border-outer-critical -
var(--notification-banner-color-border-outer-critical)
-
#ff3838 -
color-status-critical -
Stroke color of the Critical Notification Banner
-
notification-banner-color-border-outer-default -
var(--notification-banner-color-border-outer-default)
-
#4dacff -
color-border-interactive-default -
Stroke color of the Default Notification Banner
-
notification-banner-color-border-outer-normal -
var(--notification-banner-color-border-outer-normal)
-
#56f000 -
color-status-normal -
Stroke color of the Normal Notification Banner
-
notification-banner-color-border-outer-off -
var(--notification-banner-color-border-outer-off)
-
#a4abb6 -
color-status-off -
Stroke color of the Off Notification Banner
-
notification-banner-color-border-outer-serious -
var(--notification-banner-color-border-outer-serious)
-
#ffb302 -
color-status-serious -
Stroke color of the Serious Notification Banner
-
notification-banner-color-border-outer-standby -
var(--notification-banner-color-border-outer-standby)
-
#2dccff -
color-status-standby -
Stroke color of the Standby Notification Banner
Aa
-
notification-banner-color-text -
var(--notification-banner-color-text)
-
#ffffff -
color-text-primary
-
notification-banner-color-background -
var(--notification-banner-color-background)
-
#101923 -
color-background-base-default
-
notification-banner-radius-inner -
var(--notification-banner-radius-inner)
-
2px -
Inner radius of Notification Banner outlines
-
notification-banner-radius-outer -
var(--notification-banner-radius-outer)
-
3px -
radius-base -
Outer radius of Notification Banner outlines
-
notification-banner-prefix-dimension -
var(--notification-banner-prefix-dimension)
-
32px
-
notification-banner-prefix-margin-right -
var(--notification-banner-prefix-margin-right)
-
1rem -
spacing-4
-
notification-banner-status-symbol-margin-right -
var(--notification-banner-status-symbol-margin-right)
-
0.75rem -
spacing-3
-
notification-banner-padding-left -
var(--notification-banner-padding-left)
-
1rem -
spacing-4
-
notification-banner-padding-right -
var(--notification-banner-padding-right)
-
0.5rem -
spacing-2
-
notification-banner-padding-y-large -
var(--notification-banner-padding-y-large)
-
1.5rem -
spacing-6
-
notification-banner-padding-y-small -
var(--notification-banner-padding-y-small)
-
0.875rem
Progress
-
progress-radius-inner -
var(--progress-radius-inner)
-
8px -
Inside border radius
-
progress-radius-outer -
var(--progress-radius-outer)
-
10px -
Outside border radius
-
progress-border-width -
var(--progress-border-width)
-
1px -
border-width-xs
-
progress-color-border -
var(--progress-color-border)
-
#4dacff -
color-border-interactive-default
-
progress-color-background -
var(--progress-color-background)
-
#1b2d3e -
color-background-surface-default
-
progress-inner-color-background -
var(--progress-inner-color-background)
-
#4dacff -
color-background-interactive-default
-
progress-padding -
var(--progress-padding)
-
0.0625rem
-
progress-label-margin-left -
var(--progress-label-margin-left)
-
0.5rem -
spacing-2
Radio
-
radio-check-radius -
var(--radio-check-radius)
-
50% -
radius-circle
-
radio-control-check-color-fill -
var(--radio-control-check-color-fill)
-
#4dacff -
color-background-interactive-default
-
radio-control-color-border-default -
var(--radio-control-color-border-default)
-
#2b659b -
color-border-interactive-muted
-
radio-control-color-border-hover -
var(--radio-control-color-border-hover)
-
#92cbff -
color-border-interactive-hover
-
radio-control-dimension -
var(--radio-control-dimension)
-
24px
-
radio-control-margin-right -
var(--radio-control-margin-right)
-
0.625rem
-
radio-control-padding -
var(--radio-control-padding)
-
0.125rem -
spacing-050
-
radio-control-radius -
var(--radio-control-radius)
-
50% -
radius-circle
-
radio-radius-inner -
var(--radio-radius-inner)
-
4px -
[DEPRECATED] use radio.check.radius instead
-
radio-radius-outer -
var(--radio-radius-outer)
-
9px -
[DEPRECATED] use radio.control.radius instead
Scrollbar
-
scrollbar-radius -
var(--scrollbar-radius)
-
4px -
Scrollbar's border radius
-
scrollbar-shadow-inner-horizontal -
var(--scrollbar-shadow-inner-horizontal)
-
inset 1px 3px 3px 0px rgba(0, 0, 0, 0.5) -
color-palette-neutral-1000 -
Inner shadow for horizontal scrollbars
-
scrollbar-shadow-inner-vertical -
var(--scrollbar-shadow-inner-vertical)
-
inset 3px 3px 3px 0px rgba(0, 0, 0, 0.5) -
color-palette-neutral-1000 -
Inner shadow for vertical scrollbars
Select
-
select-border-width -
var(--select-border-width)
-
1px -
border-width-xs
-
select-caret-color-fill -
var(--select-caret-color-fill)
-
#4dacff -
color-background-interactive-default
-
select-caret-dimension -
var(--select-caret-dimension)
-
30px
-
select-caret-selector-color-background -
var(--select-caret-selector-color-background)
-
#1c3f5e -
color-background-base-selected
-
select-caret-selector-width -
var(--select-caret-selector-width)
-
32px
-
select-color-background -
var(--select-color-background)
-
#101923 -
color-background-base-default
-
select-color-background-inline -
var(--select-color-background-inline)
-
#10192300 -
color-background-base-default
-
select-color-border-default -
var(--select-color-border-default)
-
#2b659b -
color-border-interactive-muted
-
select-color-border-inline-default -
var(--select-color-border-inline-default)
-
#2b659b00 -
color-border-interactive-muted
-
select-color-border-hover -
var(--select-color-border-hover)
-
#92cbff -
color-border-interactive-hover
-
select-color-border-invalid -
var(--select-color-border-invalid)
-
#ff3838 -
color-border-error
Aa
-
select-color-text -
var(--select-color-text)
-
#4dacff -
color-text-interactive-default
-
select-color-text-inline -
var(--select-color-text-inline)
-
#ffffff -
color-text-primary
-
select-padding-x-large -
var(--select-padding-x-large)
-
0.75rem -
spacing-3
-
select-padding-x-medium -
var(--select-padding-x-medium)
-
0.5rem -
spacing-2
-
select-padding-x-small -
var(--select-padding-x-small)
-
0.25rem -
spacing-1
-
select-padding-y-large -
var(--select-padding-y-large)
-
0.25rem -
spacing-1
-
select-padding-y-medium -
var(--select-padding-y-medium)
-
0.5rem -
spacing-2
-
select-padding-y-small -
var(--select-padding-y-small)
-
1rem -
spacing-4
-
select-radius -
var(--select-radius)
-
3px -
radius-base
Slider
Aa
-
slider-axis-label-color-text -
var(--slider-axis-label-color-text)
-
#ffffff -
color-text-primary
-
slider-radius-background-track -
var(--slider-radius-background-track)
-
1px -
[DEPRECATED] use slider-track-radius instead
-
slider-thumb-border-width -
var(--slider-thumb-border-width)
-
2px -
border-width-sm
-
slider-thumb-color-background -
var(--slider-thumb-color-background)
-
#101923 -
color-background-base-default
-
slider-thumb-color-border-default -
var(--slider-thumb-color-border-default)
-
#4dacff -
color-border-interactive-default
-
slider-thumb-color-border-hover -
var(--slider-thumb-color-border-hover)
-
#92cbff -
color-border-interactive-hover
-
slider-thumb-dimension -
var(--slider-thumb-dimension)
-
20px
-
slider-thumb-radius -
var(--slider-thumb-radius)
-
50% -
radius-circle
-
slider-tick-color-background -
var(--slider-tick-color-background)
-
#4dacff -
color-background-interactive-default
-
slider-tick-dimension -
var(--slider-tick-dimension)
-
4px
-
slider-tick-radius -
var(--slider-tick-radius)
-
50% -
radius-circle