Colors

Moving to @planningcenter/tapestry

With the release of @planningcenter/tapestry version 2.3.0, color overrides should use the token function from the @planningcenter/tapestry package whenever possible. This change will help ensure consistent results, especially when used in dark mode. Learn more in the Dark Mode Implementation guide.

Please refer to the @planningcenter/tapestry package for the latest color tokens.

Using Colors

Colors are available to all components when using color specific properties. This includes backgroundColor, borderColor, borderBottomColor, borderLeftColor, borderRightColor,borderTopColor, color, fill, and stroke.

Apps

calendar

check-ins

giving

groups

home

music-stand

pco

people

planning-center

projector

registrations

services

Background

background

backgroundSecondary

backgroundTertiary

Static

staticDark

staticLight

Blue

blue-0

blue-1

blue-2

blue-3

blue-4

blue-5

blue-6

blue-7

blue-8

blue-9

Dark

dark-0

dark-1

dark-2

dark-3

dark-4

dark-5

dark-6

dark-7

dark-8

dark-9

Days

friday

monday

saturday

sunday

thursday

tuesday

wednesday

Error

error

error-dark

error-darker

error-light

error-lighter

error-lightest

Foreground

foreground

foregroundSecondary

foregroundTertiary

Green

green-0

green-1

green-2

green-3

green-4

green-5

green-6

green-7

green-8

green-9

Grey

grey-0

grey-1

grey-2

grey-3

grey-4

grey-5

grey-6

grey-7

grey-8

grey-9

Highlight

highlight

highlightSecondary

Interaction

interaction

interaction-dark

interaction-darker

interaction-darkest

interaction-light

interaction-lighter

interaction-lightest

Light

Light/Dark palettes only affect alpha channels and will absorb the color underneath it.

light-0

light-1

light-2

light-3

light-4

light-5

light-6

light-7

light-8

light-9

Link

linkBackground

linkForeground

Primary

primary

primary-dark

primary-darker

primary-darkest

primary-light

primary-lighter

primary-lightest

Red

red-0

red-1

red-2

red-3

red-4

red-5

red-6

red-7

red-8

red-9

Separator

separator

separatorFocus

separatorFocusSecondary

separatorHover

separatorSecondary

separatorTertiary

Success

success

success-dark

success-darker

success-light

success-lighter

success-lightest

Surface

surface

surfaceSecondary

surfaceTertiary

Tapestry

create

interaction66

Warning

warning

warning-dark

warning-darker

warning-light

warning-lighter

warning-lightest

Yellow

yellow-0

yellow-1

yellow-2

yellow-3

yellow-4

yellow-5

yellow-6

yellow-7

yellow-8

yellow-9

Palette

In Tapestry-React, colors are described as a palette. A palette is an object that contains all of the colors that you want to be available in the design system. By default Tapestry-React ships with a predefined set of colors that can be overridden where necessary.

We can categorize colors in three different ways:

  • Named Scales
  • Numeric Scales
  • Name

Named scales

Any color set that contains a base key will use the name of the color and append each variant to its name. The example below would produce a colors object that contained primary-lighter, primary-light, primary, primary-dark, and primary-darker. It is recommended to use this approach for semantic color names like primary, secondary, success, error, etc.

const primary = {
lighter: 'hsl(88, 32%, 72%)',
light: 'hsl(88, 40%, 54%)',
base: 'hsl(88, 44%, 40%)',
dark: 'hsl(88, 64%, 32%)',
darker: 'hsl(88, 72%, 20%)',
}
const palette = {
primary,
}

Numeric scales

Any color set that contains an array will be keyed by its name and index position in the array. The example below would produce a colors object that contained grey-0, grey-1, grey-2, etc. It is recommended to use this approach for literal color names like red, green, blue, etc.

const grey = [
'hsl(0,0%,98%)',
'hsl(0,0%,96%)',
'hsl(0,0%,94%)',
'hsl(0,0%,92%)',
'hsl(0,0%,90%)',
'hsl(0,0%,86%)',
'hsl(0,0%,72%)',
'hsl(0,0%,48%)',
'hsl(0,0%,36%)',
'hsl(0,0%,24%)',
]
const palette = {
primary,
grey,
}

Name

Color sets that use objects and do not contain a base key will be resolved by their individual key name. The example below would produce a colors object that contained sunday, monday, tuesday, wednesday, etc. Rather than specifying these directly in the palette, by using a key to group our colors we can provide extra information for documentation and tooling purposes.

const days = {
sunday: '#7DC156',
monday: '#789FF8',
tuesday: '#A193FD',
wednesday: '#D18CF6',
thursday: '#FA7EA4',
friday: '#F69688',
saturday: '#66BEEB',
}
const palette = {
primary,
grey,
days,
}