Colors

Add a theme.colors object to provide colors for your project. By default these colors can be referenced by color, borderColor, and backgroundColor, fill, stroke, and styles.

We recommend adding a palette that go from 10 (lightest color) to 100 (darkest color). You can use a name (such as Red 10 or Red 70) to indicate that Red 10 is a light red color and Red 70 is a dark red color.

The color palette is defined for both Light Theme and Dark Theme where 10 - 50 means to pass AA contrast with black text and 60 - 100 means to pass AA contrast with white text.

export const colors = {
  transparent: 'transparent',
  current: 'currentColor',
  'red:100': '#6e0002',
  'red:90': '#9d0003',
  'red:80': '#b80003',
  'red:70': '#d71920',
  'red:60': '#e52630',
  'red:50': '#f24c4f',
  'red:40': '#f46f71',
  'red:30': '#fd999a',
  'red:20': '#fcc3c4',
  'red:10': '#fee1e2',
  'magenta:100': '#750037',
  'magenta:90': '#960043',
  'magenta:80': '#b3004c',
  'magenta:70': '#ca0455',
  'magenta:60': '#dc1d68',
  'magenta:50': '#e94181',
  'magenta:40': '#f36fa0',
  'magenta:30': '#f9a0c1',
  'magenta:20': '#fcc3d8',
  'magenta:10': '#fee1ec',
  'purple:100': '#460086',
  'purple:90': '#5300a5',
  'purple:80': '#6304ca',
  'purple:70': '#771ddc',
  'purple:60': '#8f41e9',
  'purple:50': '#ab6ff3',
  'purple:40': '#bb89f6',
  'purple:30': '#cca6f9',
  'purple:20': '#ddc3fc',
  'purple:10': '#eee1fe',
  'blue:100': '#002a7e',
  'blue:90': '#00349d',
  'blue:80': '#003db8',
  'blue:70': '#0547cd',
  'blue:60': '#1e5ede',
  'blue:50': '#578aef',
  'blue:40': '#6f9bf4',
  'blue:30': '#95b7fc',
  'blue:20': '#c3d6fc',
  'blue:10': '#e1ebfe',
  'green:100': '#003011',
  'green:90': '#00461a',
  'green:80': '#005c24',
  'green:70': '#00712e',
  'green:60': '#008539',
  'green:50': '#00a94f',
  'green:40': '#04c45a',
  'green:30': '#40e884',
  'green:20': '#89f6b2',
  'green:10': '#c3fcd8',
  'teal:100': '#004034',
  'teal:90': '#005242',
  'teal:80': '#006451',
  'teal:70': '#00755f',
  'teal:60': '#00866c',
  'teal:50': '#00a584',
  'teal:40': '#04caa1',
  'teal:30': '#41e9c5',
  'teal:20': '#89f6df',
  'teal:10': '#c3fcf0',
  'cyan:100': '#003664',
  'cyan:90': '#004575',
  'cyan:80': '#005486',
  'cyan:70': '#006496',
  'cyan:60': '#0075a5',
  'cyan:50': '#0095bf',
  'cyan:40': '#10b4d3',
  'cyan:30': '#41d8e9',
  'cyan:20': '#89f0f6',
  'cyan:10': '#c3f9fc',
  'gray:100': '#151515',
  'gray:90': '#212121',
  'gray:80': '#303030',
  'gray:70': '#424242',
  'gray:60': '#5e5e5e',
  'gray:50': '#8a8a8a',
  'gray:40': '#adadad',
  'gray:30': '#c9c9c9',
  'gray:20': '#e0e0e0',
  'gray:10': '#f2f2f2',
  'orange:50': '#ff7633',
  'yellow:50': '#faba2a',
  'white:emphasis': 'rgba(255, 255, 255, 1.0)',
  'white:primary': 'rgba(255, 255, 255, .92)',
  'white:secondary': 'rgba(255, 255, 255, .60)',
  'white:tertiary': 'rgba(255, 255, 255, .47)',
  'white:disabled': 'rgba(255, 255, 255, .28)',
  'black:emphasis': 'rgba(0, 0, 0, 1.0)',
  'black:primary': 'rgba(0, 0, 0, .92)',
  'black:secondary': 'rgba(0, 0, 0, .65)',
  'black:tertiary': 'rgba(0, 0, 0, .54)',
  'black:disabled': 'rgba(0, 0, 0, .30)'
}

export const colors = {
  transparent: 'transparent',
  current: 'currentColor',
  'red:100': '#6e0002',
  'red:90': '#9d0003',
  'red:80': '#b80003',
  'red:70': '#d71920',
  'red:60': '#e52630',
  'red:50': '#f24c4f',
  'red:40': '#f46f71',
  'red:30': '#fd999a',
  'red:20': '#fcc3c4',
  'red:10': '#fee1e2',
  'magenta:100': '#750037',
  'magenta:90': '#960043',
  'magenta:80': '#b3004c',
  'magenta:70': '#ca0455',
  'magenta:60': '#dc1d68',
  'magenta:50': '#e94181',
  'magenta:40': '#f36fa0',
  'magenta:30': '#f9a0c1',
  'magenta:20': '#fcc3d8',
  'magenta:10': '#fee1ec',
  'purple:100': '#460086',
  'purple:90': '#5300a5',
  'purple:80': '#6304ca',
  'purple:70': '#771ddc',
  'purple:60': '#8f41e9',
  'purple:50': '#ab6ff3',
  'purple:40': '#bb89f6',
  'purple:30': '#cca6f9',
  'purple:20': '#ddc3fc',
  'purple:10': '#eee1fe',
  'blue:100': '#002a7e',
  'blue:90': '#00349d',
  'blue:80': '#003db8',
  'blue:70': '#0547cd',
  'blue:60': '#1e5ede',
  'blue:50': '#578aef',
  'blue:40': '#6f9bf4',
  'blue:30': '#95b7fc',
  'blue:20': '#c3d6fc',
  'blue:10': '#e1ebfe',
  'green:100': '#003011',
  'green:90': '#00461a',
  'green:80': '#005c24',
  'green:70': '#00712e',
  'green:60': '#008539',
  'green:50': '#00a94f',
  'green:40': '#04c45a',
  'green:30': '#40e884',
  'green:20': '#89f6b2',
  'green:10': '#c3fcd8',
  'teal:100': '#004034',
  'teal:90': '#005242',
  'teal:80': '#006451',
  'teal:70': '#00755f',
  'teal:60': '#00866c',
  'teal:50': '#00a584',
  'teal:40': '#04caa1',
  'teal:30': '#41e9c5',
  'teal:20': '#89f6df',
  'teal:10': '#c3fcf0',
  'cyan:100': '#003664',
  'cyan:90': '#004575',
  'cyan:80': '#005486',
  'cyan:70': '#006496',
  'cyan:60': '#0075a5',
  'cyan:50': '#0095bf',
  'cyan:40': '#10b4d3',
  'cyan:30': '#41d8e9',
  'cyan:20': '#89f0f6',
  'cyan:10': '#c3f9fc',
  'gray:100': '#151515',
  'gray:90': '#212121',
  'gray:80': '#303030',
  'gray:70': '#424242',
  'gray:60': '#5e5e5e',
  'gray:50': '#8a8a8a',
  'gray:40': '#adadad',
  'gray:30': '#c9c9c9',
  'gray:20': '#e0e0e0',
  'gray:10': '#f2f2f2',
  'orange:50': '#ff7633',
  'yellow:50': '#faba2a',
  'white:emphasis': 'rgba(255, 255, 255, 1.0)',
  'white:primary': 'rgba(255, 255, 255, .92)',
  'white:secondary': 'rgba(255, 255, 255, .60)',
  'white:tertiary': 'rgba(255, 255, 255, .47)',
  'white:disabled': 'rgba(255, 255, 255, .28)',
  'black:emphasis': 'rgba(0, 0, 0, 1.0)',
  'black:primary': 'rgba(0, 0, 0, .92)',
  'black:secondary': 'rgba(0, 0, 0, .65)',
  'black:tertiary': 'rgba(0, 0, 0, .54)',
  'black:disabled': 'rgba(0, 0, 0, .30)'
}

Color palette

Red 100

white

Red 90

white

Red 80

white

Red 70

white

Red 60

white

Red 50

black

Red 40

black

Red 30

black

Red 20

black

Red 10

black

Magenta 100

white

Magenta 90

white

Magenta 80

white

Magenta 70

white

Magenta 60

white

Magenta 50

black

Magenta 40

black

Magenta 30

black

Magenta 20

black

Magenta 10

black

Purple 100

white

Purple 90

white

Purple 80

white

Purple 70

white

Purple 60

white

Purple 50

black

Purple 40

black

Purple 30

black

Purple 20

black

Purple 10

black

Blue 100

white

Blue 90

white

Blue 80

white

Blue 70

white

Blue 60

white

Blue 50

black

Blue 40

black

Blue 30

black

Blue 20

black

Blue 10

black

Green 100

white

Green 90

white

Green 80

white

Green 70

white

Green 60

white

Green 50

black

Green 40

black

Green 30

black

Green 20

black

Green 10

black

Teal 100

white

Teal 90

white

Teal 80

white

Teal 70

white

Teal 60

white

Teal 50

black

Teal 40

black

Teal 30

black

Teal 20

black

Teal 10

black

Cyan 100

white

Cyan 90

white

Cyan 80

white

Cyan 70

white

Cyan 60

white

Cyan 50

black

Cyan 40

black

Cyan 30

black

Cyan 20

black

Cyan 10

black

Gray 100

white

Gray 90

white

Gray 80

white

Gray 70

white

Gray 60

white

Gray 50

black

Gray 40

black

Gray 30

black

Gray 20

black

Gray 10

black

Configuration Reference

Except for breakpoints, colors, and spacing, all keys in the theme object map to one of the core themes. All keys can be replaced or extended.

For more information, see the complete properties reference table.