Colors

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

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

grays

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

const { colors, eachPalette, isLightColor, 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}
                        color={isLightColor(color) ? 'dark-8' : 'light-8'}
                      />
                    </Box>
                    <Text fontSize={4} color="grey-9">
                      {color}
                    </Text>
                  </StackView>
                </StackView>
              ))}
            </WrapView>
          </StackView>
        </StackView>
      )
    })}
  </StackView>
)

const { colors, eachPalette, isLightColor, 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}
                        color={isLightColor(color) ? 'dark-8' : 'light-8'}
                      />
                    </Box>
                    <Text fontSize={4} color="grey-9">
                      {color}
                    </Text>
                  </StackView>
                </StackView>
              ))}
            </WrapView>
          </StackView>
        </StackView>
      )
    })}
  </StackView>
)

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

Using Colors
Palette
Named scales
Numeric scales
Name

PreviousVariants NextBox