CSS 变量

现在所有现代浏览器都支持 CSS 变量。 在 React Suite 中，我们使用 CSS 变量来定义组件的样式， 你可以通过覆盖 CSS 变量来自定义组件的样式。

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