Borders
Updated 2026-05-19
Border tokens for the Actian DS — radius, width, and composite border styles.
Radius
Section titled “Radius”| Token | Value | Usage | Status | |
|---|---|---|---|---|
| --zen-border-radius-2xs | 2px | 🟢 Shipped | ||
| --zen-border-radius-xs | 4px | 🟢 Shipped | ||
| --zen-border-radius-sm | 6px | *Default* | 🟢 Shipped | |
| --zen-border-radius-md | 8px | 🟢 Shipped | ||
| --zen-border-radius-lg | 10px | 🟢 Shipped | ||
| --zen-border-radius-xl | 12px | 🟢 Shipped | ||
| --zen-border-radius-full | 9999px | Buttons, avatars | 🟢 Shipped |
| Token | Value | Usage | Status | |
|---|---|---|---|---|
| --zen-border-width-md | 1px | Default | 🟢 Shipped | |
| --zen-border-width-lg | 2px | Focus rings, emphasis | 🟢 Shipped |
Border styles
Section titled “Border styles”Semantic border tokens combining width + color into named roles for surfaces, fields, and states.
| Token | Value | Usage | Status |
|---|---|---|---|
| --zen-border-default | 1px solid --zen-color-neutral-100 | Default border for containers | 🟢 Shipped |
| --zen-border-subtle | 1px solid --zen-color-neutral-50 | Separators | 🟢 Shipped |
| --zen-border-disabled | 1px solid --zen-color-neutral-100 | Disabled state of components | 🟢 Shipped |
| --zen-border-primary | 1px solid --zen-color-primary-500 | Interactive elements | 🟡 Proposed |
| --zen-border-selected | 2px solid --zen-color-primary-500 | Selected state of components | 🟡 Proposed |
| --zen-border-error | 1px solid --zen-color-error-600 | Error state inputs | 🟡 Proposed |
| --zen-border-warning | 1px solid --zen-color-warning-600 | Warning state | 🟡 Proposed |
| --zen-border-success | 1px solid --zen-color-success-600 | Success state | 🟡 Proposed |
| --zen-border-info | 1px solid --zen-color-primary-500 | Info state | 🟡 Proposed |
| --zen-border-strong | 1px solid --zen-color-neutral-800 | High emphasis borders | 🟡 Proposed |
| --zen-border-reverse | 1px solid --zen-color-white | Borders on dark or primary-colored backgrounds | 🟡 Proposed |