CSS Variables

All modern browsers support CSS variables. In React Suite, we use CSS variables to define the styles of components, and you can customize the styles of components by overriding CSS variables.

Typography variables

Font Family

VariableValue
--rs-font-family-base-apple-system, BlinkMacSystemFont, Arial, Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', STXihei, sans-serif
--rs-font-family-monospaceSFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace

Font Size

VariableValue
--rs-font-size-4xs0.375rem
--rs-font-size-3xs0.5rem
--rs-font-size-2xs0.625rem
--rs-font-size-xs0.75rem
--rs-font-size-sm0.875rem
--rs-font-size-md1rem
--rs-font-size-lg1.125rem
--rs-font-size-xl1.25rem
--rs-font-size-2xl1.5rem
--rs-font-size-3xl1.875rem
--rs-font-size-4xl2.25rem
--rs-font-size-5xl3rem
--rs-font-size-6xl3.75rem
--rs-font-size-basevar(--rs-font-size-sm)

Line Height

VariableValue
--rs-line-height-base20px
--rs-line-height-plus22px
--rs-line-height-xscalc(20 / 12)
--rs-line-height-smcalc(20 / 12)
--rs-line-height-mdcalc(20 / 14)
--rs-line-height-lgcalc(22 / 16)
--rs-text-line-height-xscalc(1 / 0.75)
--rs-text-line-height-smcalc(1.25 / 0.875)
--rs-text-line-height-mdcalc(1.5 / 1)
--rs-text-line-height-lgcalc(1.75 / 1.125)
--rs-text-line-height-xlcalc(1.75 / 1.25)
--rs-text-line-height-2xlcalc(2 / 1.5)
--rs-text-line-height-3xlcalc(2.25 / 1.875)
--rs-text-line-height-4xlcalc(2.5 / 2.25)
--rs-text-line-height-5xl1
--rs-text-line-height-6xl1

Link

VariableValue
--rs-link-hover-decorationunderline
--rs-link-active-decorationunderline

Colors variables

Gray

VariableValue
--rs-gray-0
#{light.$B000}
--rs-gray-50
#{light.$B050}
--rs-gray-100
#{light.$B100}
--rs-gray-200
#{light.$B200}
--rs-gray-300
#{light.$B300}
--rs-gray-400
#{light.$B400}
--rs-gray-500
#{light.$B500}
--rs-gray-600
#{light.$B600}
--rs-gray-700
#{light.$B700}
--rs-gray-800
#{light.$B800}
--rs-gray-900
#{light.$B900}

Primary

VariableValue
--rs-primary-50
#{light.$H050}
--rs-primary-100
#{light.$H100}
--rs-primary-200
#{light.$H200}
--rs-primary-300
#{light.$H300}
--rs-primary-400
#{light.$H400}
--rs-primary-500
#{light.$H500}
--rs-primary-600
#{light.$H600}
--rs-primary-700
#{light.$H700}
--rs-primary-800
#{light.$H800}
--rs-primary-900
#{light.$H900}

Palette

VariableValue
--rs-color-red
#{colors.$red}
--rs-color-orange
#{colors.$orange}
--rs-color-yellow
#{colors.$yellow}
--rs-color-green
#{colors.$green}
--rs-color-cyan
#{colors.$cyan}
--rs-color-blue
#{colors.$blue}
--rs-color-violet
#{colors.$violet}

State

VariableValue
--rs-state-success
var(--rs-color-green)
--rs-state-info
var(--rs-color-blue)
--rs-state-warning
var(--rs-color-yellow)
--rs-state-error
var(--rs-color-red)
--rs-state-hover-bg
var(--rs-primary-50)
--rs-state-focus-shadow
0 0 0 2px rgb(from var(--rs-primary-500) r g b / 25%)
--rs-state-focus-outline
2px solid rgb(from var(--rs-primary-500) r g b / 25%)
--rs-state-error-outline
2px solid rgb(from var(--rs-color-red) r g b / 25%)

Misc

VariableValue
--rs-body
var(--rs-gray-0)
--rs-focus-ring-color
rgb(from var(--rs-primary-500) r g b / 25%)
--rs-kbd-bg
var(--rs-gray-50)
--rs-kbd-text
var(--rs-gray-800)
--rs-kbd-border
var(--rs-gray-200)
--rs-scrollbar-bg
transparent
--rs-scrollbar-thumb-bg
var(--rs-gray-500)
--rs-scrollbar-thumb-hover-bg
var(--rs-gray-400)

Background

VariableValue
--rs-bg-success
#edfae1
--rs-bg-info
#e9f5fe
--rs-bg-warning
#fff9e6
--rs-bg-error
#fde9ef
--rs-bg-card
var(--rs-gray-0)
--rs-bg-overlay
var(--rs-gray-0)
--rs-bg-well
var(--rs-gray-50)
--rs-bg-active
var(--rs-primary-500)
--rs-bg-backdrop
rgb(from var(--rs-gray-900) r g b / 30%)

Text

VariableValue
--rs-text-link
var(--rs-primary-700)
--rs-text-link-hover
var(--rs-primary-800)
--rs-text-link-active
var(--rs-primary-900)
--rs-text-primary
var(--rs-gray-800)
--rs-text-secondary
var(--rs-gray-600)
--rs-text-tertiary
var(--rs-gray-500)
--rs-text-heading
var(--rs-gray-900)
--rs-text-inverse
var(--rs-gray-50)
--rs-text-heading-inverse
var(--rs-gray-0)
--rs-text-active
var(--rs-primary-700)
--rs-text-disabled
var(--rs-gray-600)
--rs-text-error
var(--rs-color-red)
--rs-text-highlight-bg
#fff6c9

Border

VariableValue
--rs-border-primary
var(--rs-gray-200)
--rs-border-secondary
var(--rs-gray-100)

Spacing variables

VariableValue
--rs-spacing0.25rem
--rs-spacing-inline-xs8px
--rs-spacing-block-xs2px
--rs-spacing-inline-sm10px
--rs-spacing-block-sm5px
--rs-spacing-inline-lg16px
--rs-spacing-block-lg10px
--rs-padding-inline-md12px
--rs-padding-block-md8px

Radius variables

VariableValue
--rs-radius-none0
--rs-radius-xs0.125rem
--rs-radius-sm0.25rem
--rs-radius-md0.375rem
--rs-radius-lg0.5rem
--rs-radius-xl0.75rem
--rs-radius-2xl1rem
--rs-radius-3xl1.5rem
--rs-radius-4xl2rem
--rs-radius-full62.5rem

Shadow variables

Shadow Color

VariableValue
--rs-shadow-color
rgb(0 0 0 / 10%)
--rs-shadow-color-deep
rgb(0 0 0 / 25%)

Shadow

VariableValue
--rs-shadow-none
0 0 #0000
--rs-shadow-xs
0 1px 2px 0 var(--rs-shadow-color)
--rs-shadow-sm
0 1px 3px 0 var(--rs-shadow-color), 0 1px 2px 0 var(--rs-shadow-color)
--rs-shadow-md
0 4px 6px -1px var(--rs-shadow-color), 0 2px 4px 0 var(--rs-shadow-color)
--rs-shadow-lg
0 10px 15px -3px var(--rs-shadow-color), 0 4px 6px 0 var(--rs-shadow-color)
--rs-shadow-xl
0 20px 25px -5px var(--rs-shadow-color), 0 8px 10px 0 var(--rs-shadow-color)
--rs-shadow-2xl
0 25px 50px -12px var(--rs-shadow-color-deep)

Z Index variables

VariableValue
--rs-zindex-date-range-picker-calendar-dropdown1
--rs-zindex-date-range-picker-table-cell-content1
--rs-zindex-badge-content1
--rs-zindex-message-full3
--rs-zindex-dropdown5
--rs-zindex-picker-toggle5
--rs-zindex-picker-input6
--rs-zindex-picker-popup7
--rs-zindex-list-helper99
--rs-zindex-modal1050
--rs-zindex-drawer1050
--rs-zindex-popover1060
--rs-zindex-tooltip1070
--rs-zindex-notification1080
--rs-zindex-uploader-picture-preview1
--rs-zindex-uploader-picture-loading-wrapper2
--rs-zindex-uploader-picture-error-wrapper3
--rs-zindex-uploader-picture-remove-button4
--rs-zindex-form-error-message5
--rs-zindex-table-body-row-wrapper0
--rs-zindex-table-header-row-wrapper2
--rs-zindex-table-column-resize-spanner3
--rs-zindex-table-cell-group-fixed4
--rs-zindex-table-row-cell-group-shadow5
--rs-zindex-table-mouse-area6
--rs-zindex-rate-character-before1

Components variables

Btn

VariableValue
--rs-btn-default-bg
var(--rs-gray-50)
--rs-btn-default-text
var(--rs-gray-800)
--rs-btn-default-border-color
var(--rs-gray-200)
--rs-btn-default-hover-bg
var(--rs-gray-200)
--rs-btn-default-active-bg
var(--rs-gray-300)
--rs-btn-default-active-text
var(--rs-gray-900)
--rs-btn-default-disabled-bg
var(--rs-gray-50)
--rs-btn-default-disabled-text
var(--rs-gray-600)
--rs-btn-primary-bg
var(--rs-primary-500)
--rs-btn-primary-text
var(--rs-gray-0)
--rs-btn-primary-border-color
var(--rs-primary-600)
--rs-btn-primary-hover-bg
var(--rs-primary-600)
--rs-btn-primary-active-bg
var(--rs-primary-700)
--rs-btn-subtle-text
var(--rs-gray-800)
--rs-btn-subtle-hover-bg
var(--rs-gray-200)
--rs-btn-subtle-hover-text
var(--rs-gray-800)
--rs-btn-subtle-active-bg
var(--rs-gray-200)
--rs-btn-subtle-active-text
var(--rs-gray-900)
--rs-btn-subtle-disabled-text
var(--rs-gray-400)
--rs-btn-ghost-border
var(--rs-primary-700)
--rs-btn-ghost-text
var(--rs-primary-700)
--rs-btn-ghost-hover-border
var(--rs-primary-800)
--rs-btn-ghost-hover-text
var(--rs-primary-800)
--rs-btn-ghost-active-border
var(--rs-primary-900)
--rs-btn-ghost-active-text
var(--rs-primary-900)
--rs-btn-link-text
var(--rs-primary-700)
--rs-btn-link-hover-text
var(--rs-primary-800)
--rs-btn-link-active-text
var(--rs-primary-900)

Iconbtn

VariableValue
--rs-iconbtn-addon
var(--rs-gray-100)
--rs-iconbtn-activated-addon
var(--rs-gray-300)
--rs-iconbtn-pressed-addon
var(--rs-gray-400)
--rs-iconbtn-primary-addon
var(--rs-primary-600)
--rs-iconbtn-primary-activated-addon
var(--rs-primary-700)
--rs-iconbtn-primary-pressed-addon
var(--rs-primary-800)

Divider

VariableValue
--rs-divider-border
var(--rs-gray-200)

Loader

VariableValue
--rs-loader-ring
rgb(from var(--rs-gray-50) r g b / 80%)
--rs-loader-rotor
var(--rs-gray-500)
--rs-loader-backdrop
rgb(from var(--rs-gray-0) r g b / 90%)
--rs-loader-ring-inverse
rgb(from var(--rs-gray-50) r g b / 30%)
--rs-loader-rotor-inverse
var(--rs-gray-0)
--rs-loader-backdrop-inverse
rgb(from var(--rs-gray-900) r g b / 83%)

Message

VariableValue
--rs-message-success-header
var(--rs-text-heading)
--rs-message-success-text
var(--rs-text-primary)
--rs-message-success-icon
var(--rs-color-green)
--rs-message-success-icon-border
var(--rs-green-200)
--rs-message-success-bg
rgb(from var(--rs-green-100) r g b / 60%)
--rs-message-success-border
var(--rs-color-green)
--rs-message-info-header
var(--rs-text-heading)
--rs-message-info-text
var(--rs-text-primary)
--rs-message-info-icon
var(--rs-color-blue)
--rs-message-info-icon-border
var(--rs-blue-200)
--rs-message-info-bg
rgb(from var(--rs-blue-100) r g b / 60%)
--rs-message-info-border
var(--rs-color-blue)
--rs-message-warning-header
var(--rs-text-heading)
--rs-message-warning-text
var(--rs-text-primary)
--rs-message-warning-icon
var(--rs-color-yellow)
--rs-message-warning-icon-border
var(--rs-yellow-200)
--rs-message-warning-bg
rgb(from var(--rs-yellow-100) r g b / 60%)
--rs-message-warning-border
var(--rs-color-yellow)
--rs-message-error-header
var(--rs-text-heading)
--rs-message-error-text
var(--rs-text-primary)
--rs-message-error-icon
var(--rs-color-red)
--rs-message-error-icon-border
var(--rs-red-200)
--rs-message-error-bg
rgb(from var(--rs-red-100) r g b / 60%)
--rs-message-error-border
var(--rs-color-red)

Tooltip

VariableValue
--rs-tooltip-bg
var(--rs-gray-900)
--rs-tooltip-text
var(--rs-gray-0)

Progress

VariableValue
--rs-progress-bg
var(--rs-gray-200)
--rs-progress-bar
var(--rs-primary-500)
--rs-progress-bar-success
var(--rs-color-green)
--rs-progress-bar-fail
var(--rs-color-red)

Placeholder

VariableValue
--rs-placeholder
var(--rs-gray-100)
--rs-placeholder-active
var(--rs-gray-200)

Breadcrumb

VariableValue
--rs-breadcrumb-item-active-text
var(--rs-gray-900)

Menuitem

VariableValue
--rs-menuitem-bg-active
var(--rs-primary-50)
--rs-menuitem-text-active
var(--rs-primary-700)
--rs-menuitem-active-bg
var(--rs-gray-100)
--rs-menuitem-active-text
var(--rs-text-primary)

Dropdown

VariableValue
--rs-dropdown-header-text
var(--rs-gray-500)

Steps

VariableValue
--rs-steps-border
var(--rs-gray-600)
--rs-steps-state-finish
var(--rs-primary-500)
--rs-steps-border-state-finish
var(--rs-primary-500)
--rs-steps-state-wait
var(--rs-gray-600)
--rs-steps-state-process
var(--rs-primary-500)
--rs-steps-state-error
var(--rs-color-red)
--rs-steps-border-state-error
var(--rs-color-red)
--rs-steps-icon-state-process
var(--rs-primary-500)
--rs-steps-icon-state-error
var(--rs-color-red)

Navs

VariableValue
--rs-navs-text
var(--rs-gray-800)
--rs-navs-text-hover
var(--rs-gray-800)
--rs-navs-bg-hover
var(--rs-gray-200)
--rs-navs-text-active
var(--rs-gray-900)
--rs-navs-bg-active
var(--rs-gray-200)
--rs-navs-tab-border
var(--rs-gray-300)
--rs-navs-subtle-border
var(--rs-gray-50)
--rs-navs-selected
var(--rs-primary-700)
--rs-navs-pills-bg
var(--rs-gray-100)
--rs-navs-pills-item-color
var(--rs-text-secondary)
--rs-navs-pills-item-active-bg
var(--rs-gray-0)
--rs-navs-pills-item-active-color
var(--rs-gray-900)
--rs-navs-pills-item-disabled-color
var(--rs-gray-400)

Navbar

VariableValue
--rs-navbar-default-bg
var(--rs-gray-50)
--rs-navbar-default-text
var(--rs-gray-800)
--rs-navbar-default-selected-text
var(--rs-primary-700)
--rs-navbar-default-hover-bg
var(--rs-gray-200)
--rs-navbar-default-hover-text
var(--rs-gray-800)
--rs-navbar-inverse-bg
var(--rs-primary-500)
--rs-navbar-inverse-text
#fff
--rs-navbar-inverse-selected-bg
var(--rs-primary-700)
--rs-navbar-inverse-hover-bg
var(--rs-primary-600)
--rs-navbar-inverse-hover-text
#fff
--rs-navbar-subtle-bg
#fff
--rs-navbar-subtle-text
var(--rs-gray-800)
--rs-navbar-subtle-selected-text
var(--rs-primary-700)
--rs-navbar-subtle-hover-bg
var(--rs-gray-50)
--rs-navbar-subtle-hover-text
var(--rs-gray-800)

Sidenav

VariableValue
--rs-sidenav-default-bg
var(--rs-gray-50)
--rs-sidenav-default-text
var(--rs-gray-800)
--rs-sidenav-default-selected-text
var(--rs-primary-700)
--rs-sidenav-default-selected-bg
var(--rs-gray-200)
--rs-sidenav-default-hover-bg
var(--rs-gray-200)
--rs-sidenav-default-hover-text
var(--rs-gray-900)
--rs-sidenav-default-footer-border
var(--rs-gray-200)
--rs-sidenav-default-subnav-border-color
var(--rs-gray-200)
--rs-sidenav-inverse-bg
var(--rs-primary-500)
--rs-sidenav-inverse-text
#fff
--rs-sidenav-inverse-selected-bg
var(--rs-primary-700)
--rs-sidenav-inverse-hover-bg
var(--rs-primary-600)
--rs-sidenav-inverse-footer-border
var(--rs-primary-600)
--rs-sidenav-inverse-subnav-border-color
var(--rs-primary-600)
--rs-sidenav-subtle-bg
#fff
--rs-sidenav-subtle-text
var(--rs-gray-800)
--rs-sidenav-subtle-selected-text
var(--rs-primary-700)
--rs-sidenav-subtle-selected-bg
var(--rs-gray-50)
--rs-sidenav-subtle-hover-bg
var(--rs-gray-50)
--rs-sidenav-subtle-hover-text
var(--rs-gray-800)
--rs-sidenav-subtle-footer-border
var(--rs-gray-200)
--rs-sidenav-subtle-subnav-border-color
var(--rs-gray-200)

Input

VariableValue
--rs-input-bg
var(--rs-gray-0)
--rs-input-focus-border
var(--rs-primary-500)
--rs-input-disabled-bg
var(--rs-gray-50)

Inline

VariableValue
--rs-inline-edit-hover-bg
var(--rs-gray-200)

Listbox

VariableValue
--rs-listbox-option-group-bg
var(--rs-gray-0)
--rs-listbox-option-hover-bg
rgb(from var(--rs-primary-100) r g b / 50%)
--rs-listbox-option-hover-text
var(--rs-primary-700)
--rs-listbox-option-selected-text
var(--rs-primary-700)
--rs-listbox-option-selected-bg
var(--rs-primary-50)
--rs-listbox-option-disabled-text
var(--rs-gray-400)
--rs-listbox-option-disabled-selected-text
var(--rs-primary-200)

Checkbox

VariableValue
--rs-checkbox-icon
#fff
--rs-checkbox-border
var(--rs-gray-300)
--rs-checkbox-checked-bg
var(--rs-primary-500)
--rs-checkbox-disabled-bg
var(--rs-gray-50)

Radio

VariableValue
--rs-radio-marker
#fff
--rs-radio-border
var(--rs-gray-300)
--rs-radio-checked-bg
var(--rs-primary-500)
--rs-radio-disabled-bg
var(--rs-gray-50)
--rs-radio-tile-border
var(--rs-gray-300)
--rs-radio-tile-bg
var(--rs-gray-0)
--rs-radio-tile-checked-color
var(--rs-primary-500)
--rs-radio-tile-checked-mark-color
#fff
--rs-radio-tile-checked-disabled-color
var(--rs-primary-200)
--rs-radio-tile-icon-size32px

Rate

VariableValue
--rs-rate-symbol
var(--rs-gray-600)
--rs-rate-color
var(--rs-blue-500)

Segmented

VariableValue
--rs-segmented-control-bg
var(--rs-gray-100)
--rs-segmented-control-border-color
var(--rs-border-primary)
--rs-segmented-control-item-active-color
var(--rs-text-primary)
--rs-segmented-control-item-color
var(--rs-text-secondary)
--rs-segmented-control-item-disabled-color
var(--rs-gray-400)
--rs-segmented-control-pill-indicator-bg
var(--rs-gray-0)
--rs-segmented-control-underline-color
var(--rs-primary-500)

Slider

VariableValue
--rs-slider-bar
var(--rs-gray-100)
--rs-slider-hover-bar
var(--rs-gray-200)
--rs-slider-thumb-border
var(--rs-primary-500)
--rs-slider-thumb-bg
#fff
--rs-slider-thumb-hover-shadow
0 0 0 8px rgb(from var(--rs-gray-500) r g b / 25%)
--rs-slider-progress
var(--rs-primary-500)

Toggle

VariableValue
--rs-toggle-bg
var(--rs-gray-500)
--rs-toggle-thumb
#fff
--rs-toggle-loader-ring
rgb(from var(--rs-gray-50) r g b / 30%)
--rs-toggle-loader-rotor
var(--rs-gray-0)
--rs-toggle-hover-bg
var(--rs-gray-500)
--rs-toggle-disabled-bg
var(--rs-gray-200)
--rs-toggle-disabled-thumb
#fff
--rs-toggle-checked-bg
var(--rs-primary-500)
--rs-toggle-checked-thumb
#fff
--rs-toggle-checked-hover-bg
var(--rs-primary-600)
--rs-toggle-checked-disabled-bg
var(--rs-primary-200)
--rs-toggle-checked-disabled-thumb
#fff

Uploader

VariableValue
--rs-uploader-item-bg
var(--rs-gray-300)
--rs-uploader-item-hover-bg
var(--rs-gray-50)
--rs-uploader-overlay-bg
rgb(from #fff r g b / 80%)
--rs-uploader-dnd-bg
var(--rs-gray-0)
--rs-uploader-dnd-border
var(--rs-gray-200)
--rs-uploader-dnd-hover-border
var(--rs-primary-500)

Avatar

VariableValue
--rs-avatar-bg
var(--rs-gray-300)
--rs-avatar-text
var(--rs-gray-0)
--rs-avatar-offset-color
var(--rs-gray-0)
--rs-avatar-ring-color
var(--rs-avatar-bg)

Badge

VariableValue
--rs-badge-bg
var(--rs-color-red)
--rs-badge-text
var(--rs-gray-0)
--rs-badge-border
var(--rs-gray-0)

Tag

VariableValue
--rs-tag-bg
var(--rs-gray-50)

Card

VariableValue
--rs-card-bg
var(--rs-gray-0)

Carousel

VariableValue
--rs-carousel-bg
var(--rs-gray-600)
--rs-carousel-indicator
rgb(from var(--rs-gray-0) r g b / 40%)
--rs-carousel-indicator-hover
var(--rs-gray-0)
--rs-carousel-indicator-active
var(--rs-primary-500)

List

VariableValue
--rs-list-bg
var(--rs-gray-0)
--rs-list-border
var(--rs-gray-200)
--rs-list-hover-bg
var(--rs-primary-50)
--rs-list-placeholder-bg
rgb(from var(--rs-primary-50) r g b / 50%)
--rs-list-placeholder-border
var(--rs-primary-500)

Timeline

VariableValue
--rs-timeline-indicator-bg
var(--rs-gray-300)
--rs-timeline-indicator-active-bg
var(--rs-primary-500)

Table

VariableValue
--rs-table-border-color
var(--rs-border-secondary)
--rs-table-shadow
rgba(9, 9, 9, 0.08)
--rs-table-sort
var(--rs-primary-500)
--rs-table-resize
var(--rs-primary-500)
--rs-table-scrollbar-track
var(--rs-gray-200)
--rs-table-scrollbar-thumb
var(--rs-gray-800)
--rs-table-scrollbar-thumb-active
var(--rs-gray-900)
--rs-table-scrollbar-vertical-track
rgb(from var(--rs-gray-200) r g b / 40%)

Form

VariableValue
--rs-form-errormessage-text
var(--rs-color-red)
--rs-form-errormessage-bg
#fff
--rs-form-errormessage-border
var(--rs-gray-200)

Picker

VariableValue
--rs-picker-value
var(--rs-primary-700)
--rs-picker-count-bg
var(--rs-primary-500)
--rs-picker-count-text
#fff
--rs-picker-state-error
var(--rs-state-error)
--rs-picker-state-error-outline
var(--rs-state-error-outline)

Calendar

VariableValue
--rs-calendar-today-bg
var(--rs-primary-500)
--rs-calendar-today-text
#fff
--rs-calendar-range-bg
rgb(from var(--rs-primary-100) r g b / 50%)
--rs-calendar-time-unit-bg
var(--rs-gray-50)
--rs-calendar-date-selected-text
#fff
--rs-calendar-cell-selected-hover-bg
var(--rs-primary-700)

Popover

VariableValue
--rs-popover-shadow
0 1px 8px rgba(0, 0, 0, 0.12)

Tree

VariableValue
--rs-tree-indent-line-color
rgba(0, 0, 0, 0.1)

Scroll

VariableValue
--rs-scroll-view-shadow-color
rgba(9, 9, 9, 0.2)

Stat

VariableValue
--rs-stat-body-bg
var(--rs-gray-0)

Misc variables

VariableValue
--rs-scale1
--rs-cursor-disablednot-allowed
--rs-ripple-bg
rgb(0 0 0 / 20%)
--rs-loader-default-size1.125rem