| Ex. |
Token name |
Value |
Use case |
|
|
|
--rh-border-width-sm
|
1px
|
1px border width; Example: Secondary CTA or Button |
|
|
|
--rh-border-width-md
|
2px
|
2px border width: Example: Alert |
|
|
|
--rh-border-width-lg
|
3px
|
3px border width: Example: Expanded Accordion panel |
|
| Ex. |
Token name |
Value |
Use case |
|
|
|
--rh-border-radius-sharp
|
0.0px
|
Border radius reset |
|
|
|
--rh-border-radius-default
|
3px
|
3px border radius; Example: Card |
|
|
|
--rh-border-radius-pill
|
64px
|
Pill border radius; Example: Label |
|
| Ex. |
Token name |
Value |
Use case |
|
|
|
--rh-color-border-strong-on-light
|
#151515
|
Strong border color (light theme) |
|
|
|
--rh-color-border-strong-on-dark
|
#ffffff
|
Strong border color (dark theme) |
|
| Ex. |
Token name |
Value |
Use case |
|
|
|
--rh-color-border-subtle-on-light
|
#c7c7c7
|
Subtle border color (light theme) |
|
|
|
--rh-color-border-subtle-on-dark
|
#707070
|
Subtle border color (dark theme) |
|
| Ex. |
Token name |
Value |
Use case |
|
|
|
--rh-color-border-interactive-on-light
|
#0066cc
|
Interactive border color (light theme) |
|
|
|
--rh-color-border-interactive-on-dark
|
#92c5f9
|
Interactive border color (dark theme) |
|
Other libraries
To learn more about our other libraries, visit the getting started page.
