Border tokens

  1. Width
  2. Radius
  3. Color
  1. Width
  2. Radius
  3. Color

Width

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

Radius

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

Color

Theme Tokens

--rh-color-border-strong --rh-color-border-subtle --rh-color-border-interactive --rh-color-border-destructive --rh-color-border-status-danger --rh-color-border-status-caution --rh-color-border-status-warning --rh-color-border-status-neutral --rh-color-border-status-info --rh-color-border-status-success

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
--rh-color-border-strong-on-light #151515

Strong border color (light theme)
--rh-color-border-strong-on-dark #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
--rh-color-border-subtle-on-light #c7c7c7

Subtle border color (light theme)
--rh-color-border-subtle-on-dark #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
--rh-color-border-interactive-on-light #0066cc

Interactive border color (light theme)
--rh-color-border-interactive-on-dark #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
--rh-color-border-destructive-on-light #b1380b

Destructive border color (light theme)
--rh-color-border-destructive-on-dark #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
--rh-color-border-status-danger-on-light #b1380b

Danger border color (light theme)
--rh-color-border-status-danger-on-dark #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
--rh-color-border-status-caution-on-light #ca6c0f

Caution border color (light theme)
--rh-color-border-status-caution-on-dark #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
--rh-color-border-status-warning-on-light #dca614

Warning border color (light theme)
--rh-color-border-status-warning-on-dark #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
--rh-color-border-status-neutral-on-light #4d4d4d

Neutral border color (light theme)
--rh-color-border-status-neutral-on-dark #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
--rh-color-border-status-info-on-light #5e40be

Info border color (light theme)
--rh-color-border-status-info-on-dark #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
--rh-color-border-status-success-on-light #3d7317

Success border color (light theme)
--rh-color-border-status-success-on-dark #87bb62

Success border color (dark theme)

Other libraries

To learn more about our other libraries, visit the getting started page.
Edit this page on GitHub