Color

Color is modeled based on why something should be a certain color, defined with semantic names that allow them to adjust based on context. This makes it trivial to re-use components in different environments without having to manually adjust foreground colors.

For example, let's assume we have the following piece of text:

<Text color="label" size="16pt" weight="bold">
  Lorem ipsum
</Text>

By default, this text will either be dark or light based on whether the app is in light mode or dark mode.

Now, imagine that this text was nested inside of a dark container across both light and dark modes:

<>
  <Box background="yellow" padding="20px">
    <Text size="20pt" weight="medium">
      Lorem ipsum
    </Text>
  </Box>
  <Box background="surfacePrimary" padding="20px">
    <Text size="20pt" weight="medium">
      Lorem ipsum
    </Text>
  </Box>
</>

Typically in this scenario we'd need to alter the text color so that it has sufficient contrast against the background. However, when setting a background with Box, the color mode is automatically configured for nested elements based on whether the background is dark or light, meaning that foreground colors usually won't need to be changed.