Border tokens
Width
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
1px |
1px border width; Example: Secondary CTA or Button |
|
|
|
|
2px |
2px border width: Example: Alert |
|
|
|
|
3px |
3px border width: Example: Expanded Accordion panel |
|
Radius
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
0.0px
|
Border radius reset |
|
|
|
|
3px
|
3px border radius; Example: Card |
|
|
|
|
64px
|
Pill border radius; Example: Label |
|
Color
Theme Tokens
Strong
Responsive border-strong color value. Typically read only - use a themable container e.g. <rh-surface> Resolves to --rh-color-border-strong-on-light on a themable container with a light color palette and --rh-color-border-strong-on-dark on a themable container with a dark color palette
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-border-strong-on-light, #151515), var(--rh-color-border-strong-on-dark, #ffffff))
|
Responsive |
|
|
|
|
#151515
|
Strong border color (light theme) |
|
|
|
|
#ffffff
|
Strong border color (dark theme) |
|
Subtle
Responsive border-subtle color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-border-subtle-on-light on a themable container with a light color palette and --rh-color-border-subtle-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-border-subtle-on-light, #c7c7c7), var(--rh-color-border-subtle-on-dark, #707070))
|
Responsive |
|
|
|
|
#c7c7c7
|
Subtle border color (light theme) |
|
|
|
|
#707070
|
Subtle border color (dark theme) |
|
Interactive
Responsive border-interactive color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-border-interactive-on-light on a themable container with a light color palette and --rh-color-border-interactive-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-border-interactive-on-light, #0066cc), var(--rh-color-border-interactive-on-dark, #92c5f9))
|
Responsive |
|
|
|
|
#0066cc
|
Interactive border color (light theme) |
|
|
|
|
#92c5f9
|
Interactive border color (dark theme) |
|
Destructive
Responsive border-destructive color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-border-destructive-on-light on a themable container with a light color palette and --rh-color-border-destructive-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-border-destructive-on-light, #b1380b), var(--rh-color-border-destructive-on-dark, #f0561d))
|
Responsive |
|
|
|
|
#b1380b
|
Destructive border color (light theme) |
|
|
|
|
#f0561d
|
Destructive border color (dark theme) |
|
Status
Danger
Responsive border-danger color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-border-danger-on-light on a themable container with a light color palette and --rh-color-border-danger-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-border-status-danger-on-light, #b1380b), var(--rh-color-border-status-danger-on-dark, #f0561d))
|
Responsive |
|
|
|
|
#b1380b
|
Danger border color (light theme) |
|
|
|
|
#f0561d
|
Danger border color (dark theme) |
|
Caution
Responsive border-caution color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-border-caution-on-light on a themable container with a light color palette and --rh-color-border-caution-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-border-status-caution-on-light, #ca6c0f), var(--rh-color-border-status-caution-on-dark, #f5921b))
|
Responsive |
|
|
|
|
#ca6c0f
|
Caution border color (light theme) |
|
|
|
|
#f5921b
|
Caution border color (dark theme) |
|
Warning
Responsive border-warning color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-border-warning-on-light on a themable container with a light color palette and --rh-color-border-warning-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-border-status-warning-on-light, #dca614), var(--rh-color-border-status-warning-on-dark, #ffcc17))
|
Responsive |
|
|
|
|
#dca614
|
Warning border color (light theme) |
|
|
|
|
#ffcc17
|
Warning border color (dark theme) |
|
Neutral
Responsive border-neutral color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-border-neutral-on-light on a themable container with a light color palette and --rh-color-border-neutral-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-border-status-neutral-on-light, #4d4d4d), var(--rh-color-border-status-neutral-on-dark, #c7c7c7))
|
Responsive |
|
|
|
|
#4d4d4d
|
Neutral border color (light theme) |
|
|
|
|
#c7c7c7
|
Neutral border color (dark theme) |
|
Info
Responsive border-info color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-border-info-on-light on a themable container with a light color palette and --rh-color-border-info-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-border-status-info-on-light, #5e40be), var(--rh-color-border-status-info-on-dark, #b6a6e9))
|
Responsive |
|
|
|
|
#5e40be
|
Info border color (light theme) |
|
|
|
|
#b6a6e9
|
Info border color (dark theme) |
|
Success
Responsive border-success color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-border-success-on-light on a themable container with a light color palette and --rh-color-border-success-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-border-status-success-on-light, #3d7317), var(--rh-color-border-status-success-on-dark, #87bb62))
|
Responsive |
|
|
|
|
#3d7317
|
Success border color (light theme) |
|
|
|
|
#87bb62
|
Success border color (dark theme) |
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
Other libraries
To learn more about our other libraries, visit the getting started page.
