Button
-
button-border-width -
var(--button-border-width)
-
1px -
border-width-xs
-
button-color-background-borderless -
var(--button-color-background-borderless)
-
#00000000 -
color-background-transparent
-
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)
-
#00000000 -
color-background-transparent
-
button-color-border-borderless -
var(--button-color-border-borderless)
-
#00000000 -
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)
-
#7b8089 -
color-palette-grey-600 -
Color for container border
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.5rem -
spacing-2
-
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.25rem -
spacing-1
-
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)
-
#7b8089 -
color-palette-grey-600 -
Color for log border
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)
-
#fad800 -
color-status-caution -
Fill color of the Caution Notification Banner background
-
notification-banner-color-border-inner-critical -
var(--notification-banner-color-border-inner-critical)
-
#ff2a04 -
color-status-critical -
Fill color of the Critical Notification Banner background
-
notification-banner-color-border-inner-default -
var(--notification-banner-color-border-inner-default)
-
#005a8f -
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)
-
#00e200 -
color-status-normal -
Fill color of the Normal Notification Banner background
-
notification-banner-color-border-inner-off -
var(--notification-banner-color-border-inner-off)
-
#7b8089 -
color-status-off -
Fill color of the Off Notification Banner background
-
notification-banner-color-border-inner-serious -
var(--notification-banner-color-border-inner-serious)
-
#ffaf3d -
color-status-serious -
Fill color of the Serious Notification Banner background
-
notification-banner-color-border-inner-standby -
var(--notification-banner-color-border-inner-standby)
-
#64d9ff -
color-status-standby -
Fill color of the Standby Notification Banner background
-
notification-banner-color-border-outer-caution -
var(--notification-banner-color-border-outer-caution)
-
#645600 -
status-symbol-color-border-caution -
Stroke color of the Caution Notification Banner
-
notification-banner-color-border-outer-critical -
var(--notification-banner-color-border-outer-critical)
-
#661102 -
status-symbol-color-border-critical -
Stroke color of the Critical Notification Banner
-
notification-banner-color-border-outer-default -
var(--notification-banner-color-border-outer-default)
-
#005a8f -
color-border-interactive-default -
Stroke color of the Default Notification Banner
-
notification-banner-color-border-outer-normal -
var(--notification-banner-color-border-outer-normal)
-
#005a00 -
status-symbol-color-border-normal -
Stroke color of the Normal Notification Banner
-
notification-banner-color-border-outer-off -
var(--notification-banner-color-border-outer-off)
-
#3c3e42 -
status-symbol-color-border-off -
Stroke color of the Off Notification Banner
-
notification-banner-color-border-outer-serious -
var(--notification-banner-color-border-outer-serious)
-
#664618 -
status-symbol-color-border-serious -
Stroke color of the Serious Notification Banner
-
notification-banner-color-border-outer-standby -
var(--notification-banner-color-border-outer-standby)
-
#285766 -
status-symbol-color-border-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
Push Button
Aa
-
push-button-color-text-unselected-default -
var(--push-button-color-text-unselected-default)
-
#4dacff -
color-text-interactive-default
Aa
-
push-button-color-text-unselected-hover -
var(--push-button-color-text-unselected-hover)
-
#92cbff -
color-text-interactive-hover
Aa
-
push-button-color-text-selected -
var(--push-button-color-text-selected)
-
#000000 -
color-text-black
-
push-button-color-border-unselected-default -
var(--push-button-color-border-unselected-default)
-
#4dacff -
color-border-interactive-default
-
push-button-color-border-unselected-hover -
var(--push-button-color-border-unselected-hover)
-
#92cbff -
color-border-interactive-hover
-
push-button-color-border-selected-default -
var(--push-button-color-border-selected-default)
-
#56f000 -
color-palette-green-500
-
push-button-color-border-selected-hover -
var(--push-button-color-border-selected-hover)
-
#99f666 -
color-palette-green-400
-
push-button-color-background-selected-default -
var(--push-button-color-background-selected-default)
-
#56f000 -
color-palette-green-500
-
push-button-color-background-selected-hover -
var(--push-button-color-background-selected-hover)
-
#99f666 -
color-palette-green-400
-
push-button-color-background-unselected-default -
var(--push-button-color-background-unselected-default)
-
#00000000 -
color-background-transparent
-
push-button-color-background-unselected-hover -
var(--push-button-color-background-unselected-hover)
-
#00000000 -
color-background-transparent
-
push-button-padding-x-medium -
var(--push-button-padding-x-medium)
-
1rem -
spacing-4
-
push-button-padding-x-medium-icon-only -
var(--push-button-padding-x-medium-icon-only)
-
0.5rem -
spacing-2
-
push-button-padding-x-small -
var(--push-button-padding-x-small)
-
1rem -
spacing-4
-
push-button-padding-x-small-icon-only -
var(--push-button-padding-x-small-icon-only)
-
0.25rem -
spacing-1
-
push-button-padding-x-large -
var(--push-button-padding-x-large)
-
1rem -
spacing-4
-
push-button-padding-x-large-icon-only -
var(--push-button-padding-x-large-icon-only)
-
0.75rem -
spacing-3
-
push-button-padding-y-medium -
var(--push-button-padding-y-medium)
-
0.5rem -
spacing-2
-
push-button-padding-y-medium-icon-only -
var(--push-button-padding-y-medium-icon-only)
-
0.5rem -
spacing-2
-
push-button-padding-y-small -
var(--push-button-padding-y-small)
-
1rem -
spacing-4
-
push-button-padding-y-small-icon-only -
var(--push-button-padding-y-small-icon-only)
-
0.25rem -
spacing-1
-
push-button-padding-y-large-icon-only -
var(--push-button-padding-y-large-icon-only)
-
0.75rem -
spacing-3
-
push-button-padding-y-large -
var(--push-button-padding-y-large)
-
0.75rem -
spacing-3
-
push-button-radius -
var(--push-button-radius)
-
3px -
radius-base
-
push-button-prefix-color-fill-unselected-default -
var(--push-button-prefix-color-fill-unselected-default)
-
#4dacff -
color-background-interactive-default
-
push-button-prefix-color-fill-unselected-hover -
var(--push-button-prefix-color-fill-unselected-hover)
-
#92cbff -
color-background-interactive-hover
-
push-button-prefix-color-fill-selected -
var(--push-button-prefix-color-fill-selected)
-
#000000 -
color-text-black
-
push-button-prefix-dimension -
var(--push-button-prefix-dimension)
-
20px
-
push-button-prefix-margin-right -
var(--push-button-prefix-margin-right)
-
0.25rem -
spacing-1
-
push-button-border-width -
var(--push-button-border-width)
-
1px -
border-width-xs
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.25) -
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)
-
#00000000 -
color-background-transparent
-
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)
-
#00000000 -
color-background-transparent
-
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
-
slider-track-height-active -
var(--slider-track-height-active)
-
4px
-
slider-track-height-inactive -
var(--slider-track-height-inactive)
-
1px
-
slider-track-radius -
var(--slider-track-radius)
-
3px -
radius-base
Status Symbol
-
status-symbol-border-width-on-dark -
var(--status-symbol-border-width-on-dark)
-
border-width-none -
Border width for status symbols on a dark background
-
status-symbol-border-width-on-light -
var(--status-symbol-border-width-on-light)
-
1px -
border-width-xs -
Border width for status symbols on a light background
-
status-symbol-color-border-caution -
var(--status-symbol-color-border-caution)
-
#645600 -
color-palette-yellow-900 -
Border color of the Caution status symbol on light backgrounds
-
status-symbol-color-border-critical -
var(--status-symbol-color-border-critical)
-
#661102 -
color-palette-red-900 -
Border color of the Critical status symbol on light backgrounds
-
status-symbol-color-border-normal -
var(--status-symbol-color-border-normal)
-
#005a00 -
color-palette-green-900 -
Border color of the Normal status symbol on light backgrounds
-
status-symbol-color-border-off -
var(--status-symbol-color-border-off)
-
#3c3e42 -
color-palette-grey-800 -
Border color of the Off status symbol on light backgrounds
-
status-symbol-color-border-serious -
var(--status-symbol-color-border-serious)
-
#664618 -
color-palette-orange-900 -
Border color of the Serious status symbol on light backgrounds
-
status-symbol-color-border-standby -
var(--status-symbol-color-border-standby)
-
#285766 -
color-palette-cyan-900 -
Border color of the Standby status symbol on light backgrounds
-
status-symbol-color-fill-caution-on-dark -
var(--status-symbol-color-fill-caution-on-dark)
-
#fce83a -
color-palette-yellow-500 -
Fill color of the Caution status symbol on a dark background
-
status-symbol-color-fill-caution-on-light -
var(--status-symbol-color-fill-caution-on-light)
-
#fad800 -
color-palette-yellow-600 -
Fill color of the Caution status symbol on a light background
-
status-symbol-color-fill-critical-on-dark -
var(--status-symbol-color-fill-critical-on-dark)
-
#ff3838 -
color-palette-red-500 -
Fill color of the Critical status symbol on a dark background
-
status-symbol-color-fill-critical-on-light -
var(--status-symbol-color-fill-critical-on-light)
-
#ff2a04 -
color-palette-red-600 -
Fill color of the Critical status symbol on a light background
-
status-symbol-color-fill-normal-on-dark -
var(--status-symbol-color-fill-normal-on-dark)
-
#56f000 -
color-palette-green-500 -
Fill color of the Normal status symbol on a dark background
-
status-symbol-color-fill-normal-on-light -
var(--status-symbol-color-fill-normal-on-light)
-
#00e200 -
color-palette-green-600 -
Fill color of the Normal status symbol on a light background
-
status-symbol-color-fill-off-on-dark -
var(--status-symbol-color-fill-off-on-dark)
-
#a4abb6 -
color-palette-grey-500 -
Fill color of the Off status symbol on a dark background
-
status-symbol-color-fill-off-on-light -
var(--status-symbol-color-fill-off-on-light)
-
#7b8089 -
color-palette-grey-600 -
Fill color of the Off status symbol on a light background
-
status-symbol-color-fill-serious-on-dark -
var(--status-symbol-color-fill-serious-on-dark)
-
#ffb302 -
color-palette-orange-500 -
Fill color of the Serious status symbol on a dark background
-
status-symbol-color-fill-serious-on-light -
var(--status-symbol-color-fill-serious-on-light)
-
#ffaf3d -
color-palette-orange-600 -
Fill color of the Serious status symbol on a light background
-
status-symbol-color-fill-standby-on-dark -
var(--status-symbol-color-fill-standby-on-dark)
-
#2dccff -
color-palette-cyan-600 -
Fill color of the Standby status symbol on a dark background
-
status-symbol-color-fill-standby-on-light -
var(--status-symbol-color-fill-standby-on-light)
-
#64d9ff -
color-palette-cyan-500 -
Fill color of the Standby status symbol on a light background
Switch
-
switch-radius-track -
var(--switch-radius-track)
-
10px -
Switch track's border radius
Tab
-
tab-padding-x-large -
var(--tab-padding-x-large)
-
0.75rem -
spacing-3
-
tab-padding-x-small -
var(--tab-padding-x-small)
-
0.75rem -
spacing-3
-
tab-padding-top-large -
var(--tab-padding-top-large)
-
1.5rem -
spacing-6
-
tab-padding-top-small -
var(--tab-padding-top-small)
-
1rem -
spacing-4
-
tab-padding-bottom-large -
var(--tab-padding-bottom-large)
-
1.75rem
-
tab-padding-bottom-small -
var(--tab-padding-bottom-small)
-
1.25rem
-
tab-border-width-bottom -
var(--tab-border-width-bottom)
-
4px -
border-width-lg
Aa
-
tab-color-text-default -
var(--tab-color-text-default)
-
#4dacff -
color-text-interactive-default
Aa
-
tab-color-text-hover -
var(--tab-color-text-hover)
-
#92cbff -
color-text-interactive-hover
Aa
-
tab-color-text-selected -
var(--tab-color-text-selected)
-
#ffffff -
color-text-primary
-
tab-color-border-bottom-selected -
var(--tab-color-border-bottom-selected)
-
#4dacff -
color-border-interactive-default
Table
-
table-header-color-background -
var(--table-header-color-background)
-
#172635 -
color-background-surface-header
-
table-header-cell-padding -
var(--table-header-cell-padding)
-
0.5rem -
spacing-2
-
table-header-shadow -
var(--table-header-shadow)
-
0px 4px 8px 0px rgba(0, 0, 0, 0.45)
-
table-row-color-background-default -
var(--table-row-color-background-default)
-
#1b2d3e -
color-background-surface-default
-
table-row-color-background-selected -
var(--table-row-color-background-selected)
-
#1c3f5e -
color-background-surface-selected
-
table-row-color-background-hover -
var(--table-row-color-background-hover)
-
#1c3851 -
color-background-surface-hover
Aa
-
table-row-color-text -
var(--table-row-color-text)
-
#ffffff -
color-text-primary
-
table-row-color-border -
var(--table-row-color-border)
-
#101923 -
color-background-base-default
-
table-row-border-width -
var(--table-row-border-width)
-
1px -
border-width-xs
-
table-body-cell-padding-y -
var(--table-body-cell-padding-y)
-
0.25rem -
spacing-1 -
Body cell padding (top and bottom)
-
table-body-cell-padding-x -
var(--table-body-cell-padding-x)
-
0.5rem -
spacing-2 -
Body cell padding (left and right)
Tag
-
tag-shadow-inner-fail -
var(--tag-shadow-inner-fail)
-
inset 0px 0px 5px 0px rgb(255, 42, 4) -
status-symbol-color-fill-critical-on-light -
Inner shadow for Fail status Tags
-
tag-shadow-inner-pass -
var(--tag-shadow-inner-pass)
-
inset 0px 0px 5px 0px rgb(0, 226, 0) -
status-symbol-color-fill-normal-on-light -
Inner shadow for Pass status Tags
-
tag-shadow-inner-unknown -
var(--tag-shadow-inner-unknown)
-
inset 0px 0px 5px 0px rgb(123, 128, 137) -
status-symbol-color-fill-off-on-light -
Inner shadow for Unknown status Tags
-
tag-color-border-unknown -
var(--tag-color-border-unknown)
-
#292a2d -
color-palette-grey-900
-
tag-color-border-fail -
var(--tag-color-border-fail)
-
#8b1703 -
color-palette-red-800
-
tag-color-border-pass -
var(--tag-color-border-pass)
-
#007a33 -
color-palette-green-800
Aa
-
tag-color-text -
var(--tag-color-text)
-
#ffffff -
color-text-white
-
tag-color-background-pass -
var(--tag-color-background-pass)
-
#005a00 -
color-palette-green-900
-
tag-color-background-fail -
var(--tag-color-background-fail)
-
#661102 -
color-palette-red-900
-
tag-color-background-unknown -
var(--tag-color-background-unknown)
-
#292a2d -
color-palette-grey-900
-
tag-radius -
var(--tag-radius)
-
4px
-
tag-padding-x -
var(--tag-padding-x)
-
0.75rem -
spacing-3
-
tag-padding-y -
var(--tag-padding-y)
-
0.25rem -
spacing-1
Textarea
-
textarea-border-width -
var(--textarea-border-width)
-
1px -
border-width-xs
-
textarea-color-border-default -
var(--textarea-color-border-default)
-
#2b659b -
color-border-interactive-muted
-
textarea-color-border-hover -
var(--textarea-color-border-hover)
-
#92cbff -
color-border-interactive-hover
-
textarea-color-border-invalid -
var(--textarea-color-border-invalid)
-
#ff3838 -
color-border-error
Aa
-
textarea-color-text-default -
var(--textarea-color-text-default)
-
#ffffff -
color-text-primary
Aa
-
textarea-color-text-placeholder -
var(--textarea-color-text-placeholder)
-
#a4abb6 -
color-text-placeholder
-
textarea-color-background-default -
var(--textarea-color-background-default)
-
#101923 -
color-background-base-default
-
textarea-padding-x-large -
var(--textarea-padding-x-large)
-
0.75rem -
spacing-3
-
textarea-padding-x-medium -
var(--textarea-padding-x-medium)
-
0.5rem -
spacing-2
-
textarea-padding-x-small -
var(--textarea-padding-x-small)
-
0.25rem -
spacing-1
-
textarea-padding-y-large -
var(--textarea-padding-y-large)
-
0.5rem -
spacing-2
-
textarea-padding-y-medium -
var(--textarea-padding-y-medium)
-
0.5rem -
spacing-2
-
textarea-padding-y-small -
var(--textarea-padding-y-small)
-
0.5rem -
spacing-2
-
textarea-radius -
var(--textarea-radius)
-
3px -
radius-base
Timeline
-
timeline-cell-color-background -
var(--timeline-cell-color-background)
-
#cbdee9 -
color-palette-darkblue-100 -
Color for timeline cell
-
timeline-header-color-background -
var(--timeline-header-color-background)
-
#f5f6f9 -
color-background-surface-header -
Color for timeline header
Tooltip
-
tooltip-color-background -
var(--tooltip-color-background)
-
#bbc1c9 -
color-palette-grey-400 -
Background color for Tooltips
Aa
-
tooltip-color-text -
var(--tooltip-color-text)
-
#000000 -
color-text-black -
Text color for Tooltips
-
tooltip-radius -
var(--tooltip-radius)
-
1px -
Tooltip border radius