Tokens
Overview
Dopt React components ship with default theme tokens that can be fully customized or extended.
You can find the default theme token definitions in src/tokens.ts in the @dopt/core-theme package.
Colors
| Name | CSS variable | Value |
|---|---|---|
| black | --dopt-colors-black | #000 |
| white | --dopt-colors-white | #fff |
| primary | --dopt-colors-primary | #5c7cfa |
| primaryLight | --dopt-colors-primaryLight | #dbe4ff |
| primaryDark | --dopt-colors-primaryDark | #3b5bdb |
| secondary | --dopt-colors-secondary | #868e96 |
| secondaryLight | --dopt-colors-secondaryLight | #dee2e6 |
| secondaryDark | --dopt-colors-secondaryDark | #343a40 |
| content | --dopt-colors-content | #212529 |
| contentLight | --dopt-colors-contentLight | #adb5bd |
| contentContrast | --dopt-colors-contentContrast | #fff |
| border | --dopt-colors-border | #dee2e6 |
| overlay | --dopt-colors-overlay | rgba(0, 0, 0, 0.4) |
| background | --dopt-colors-background | #fff |
Space
| Name | CSS variable | Value | |
|---|---|---|---|
| 1 | --dopt-space-1 | 4px | |
| 2 | --dopt-space-2 | 8px | |
| 3 | --dopt-space-3 | 8px | |
| 4 | --dopt-space-4 | 16px | |
| 5 | --dopt-space-5 | 16px | |
| 6 | --dopt-space-6 | 24px | |
| 7 | --dopt-space-7 | 28px | |
| 8 | --dopt-space-8 | 32px | |
| 9 | --dopt-space-9 | 36px | |
| 10 | --dopt-space-10 | 40px | |
| 12 | --dopt-space-12 | 48px | |
| 16 | --dopt-space-16 | 64px |
Sizes
| Name | CSS variable | Value | |
|---|---|---|---|
| 1 | --dopt-space-1 | 4px | |
| 2 | --dopt-space-2 | 8px | |
| 3 | --dopt-space-3 | 8px | |
| 4 | --dopt-space-4 | 16px | |
| 5 | --dopt-space-5 | 16px | |
| 6 | --dopt-space-6 | 24px | |
| 7 | --dopt-space-7 | 28px | |
| 8 | --dopt-space-8 | 32px | |
| 9 | --dopt-space-9 | 36px | |
| 10 | --dopt-space-10 | 40px | |
| 12 | --dopt-space-12 | 48px | |
| 16 | --dopt-space-16 | 64px |
Radii
| Name | CSS variable | Value |
|---|---|---|
| 1 | --dopt-radii-1 | 4px |
| 2 | --dopt-radii-2 | 8px |
Shadows
| Name | CSS variable | Value |
|---|---|---|
| 1 | --dopt-shadows-1 | rgba(0, 0, 0, 0.10) 0 4px 8px |
| 2 | --dopt-shadows-2 | rgba(0, 0, 0, 0.10) 0 4px 8px, rgba(0, 0, 0, 0.05) 0 8px 16px |
Fonts
| Name | CSS variable | Value |
|---|---|---|
| sans | --dopt-fonts-sans | -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif |
| mono | --dopt-fonts-mono | Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace |
Font sizes
| Name | CSS variable | Value |
|---|---|---|
| base | --dopt-fontSizes-base | 16px |
| sm | --dopt-fontSizes-sm | 14px |
| md | --dopt-fontSizes-md | 18px |
| lg | --dopt-fontSizes-lg | 24px |
Font weights
| Name | CSS variable | Value |
|---|---|---|
| normal | --dopt-fontWeights-normal | 400 |
| medium | --dopt-fontWeights-medium | 500 |
| bold | --dopt-fontWeights-bold | 700 |
Line heights
| Name | CSS variable | Value |
|---|---|---|
| base | --dopt-lineHeights-base | 1.5em |
| sm | --dopt-lineHeights-sm | 1.25em |
| md | --dopt-lineHeights-md | 1.75em |
| lg | --dopt-lineHeights-lg | 2em |
Border widths
| Name | CSS variable | Value |
|---|---|---|
| 1 | --dopt-borderWidths-1 | 1px |
| 2 | --dopt-borderWidths-2 | 2px |
Transitions
| Name | CSS variable | Value |
|---|---|---|
| ease | --dopt-transitions-ease | 200ms ease |