Search
- IntroductionGetting StartedColorsForms
Components
Colors
DDS colors are based on a 1-12 scale from light to dark, taking large inspiration from Radix Colors
Color Property Names
A full list of DDS color property names can be found in our source here.
Using With 'styled'
If using styled to create CSS style objects, you can use either our shorthand or the theme object directly.
The shorthand is simply resolved via ${colorProperty}
For example, blue12 would be$blue12
Using with the theme object would look like this:
import { theme, styled } from '@driftt/dds'
const blue12Block = styled('div', {
backgroundColor: theme.colors.blue12
})
Using DDS Tokens you could also do this:
import { styled } from '@driftt/dds'
const blue12Block = styled('div', {
backgroundColor: '$blue12'
})
Resulting in:
Using With CSS Variables
If using CSS variables for colors, they will use the following pattern:
var(--drift-dds-colors-{colorKey}{colorValue})
For example, blue12 would be var(--drift-dds-colors-blue12)
Color Legend
Migration Guide
See Figma for full version: DDS Colors Figma