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.

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

const { colors, eachPalette, palette } = designSystem
render(
  <StackView grow={1} shrink={1} spacing={6}>
    {eachPalette(palette, ({ colors, name }) => {
      const lightOrDark = ['Light', 'Dark'].indexOf(name) > -1
      return (
        <StackView key={name} grow={1} spacing={1}>
          <StackView axis="horizontal" alignment="center" spacing={2}>
            <Heading level={3}>{name}</Heading>
            {name === 'Light' && (
              <Text fontSize={4} color="grey-8">
                Light/Dark palettes only affect alpha channels and will absorb
                the color underneath it.
              </Text>
            )}
          </StackView>
          <StackView>
            <WrapView grow={1} marginHorizontal={-0.5}>
              {Object.keys(colors).map((color, index) => (
                <StackView key={color} width="20%">
                  <StackView padding={0.5} spacing={0.5}>
                    <Box
                      radius={2}
                      backgroundColor={lightOrDark ? 'coral' : undefined}
                    >
                      <Box
                        width="100%"
                        height={5}
                        radius={2}
                        backgroundColor={color}
                      />
                    </Box>
                    <Text fontSize={4} color="grey-9">
                      {color}
                    </Text>
                  </StackView>
                </StackView>
              ))}
            </WrapView>
          </StackView>
        </StackView>
      )
    })}
  </StackView>
)

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

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,
}

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,
}

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,
}