Design Tokens and Color Mode

Design tokens are reusable values that define the visual style of a product, such as colors, typography, spacing, border, and shadows. Instead of hard-coding these values throughout a design and codebase, tokens provide a shared source of truth.

Spor provides design tokens for colors, rounding, typography, spacing, outlines, breakpoints, animation and z-index. An overview of all design tokens can be found here⁠Ekstern lenke.

Read more about the structure behind the tokens in the guide on Design Tokens⁠Ekstern lenke.

Try it yourself: Background and Text Tokens

Change the code in the codeblock in the following ways and take a look at how it affects the Box.

1. Change the backgroundColor to be “surface.critical“, and the color to be “text.critical“ (these are color tokens)
2. Change the padding to be 6 (this is a spacing token)
3. Change the borderRadius to be “md“ or “lg“ (these are rounding tokens)

<Box backgroundColor="surface.brand" padding={4} borderRadius="sm">
  <Text color="text.brand">
    Some text
  </Text>
</Box>

To manage color mode in your app, Spor exports Chakra UI’s useColorMode and useColorModeValue hooks.

Use useColorMode to retrieve the current color mode and toggle between modes.

() => {
  const { colorMode, toggleColorMode } = useColorMode()
  return (
    <Box>
      <Button onClick={toggleColorMode}>
        Change to {colorMode === 'light' ? 'dark' : 'light'}
      </Button>
    </Box>
  )
}

useColorModeValue returns different values based on the active color mode. However, you should primarily use design tokens instead of useColorModeValue.

Use useColorModeValue only if there is no available design token for the color you need.

import { useColorModeValue } from "@vygruppen/spor-react";

const colorValues = useColorModeValue(lightValue, darkValue);

Example: When to Use useColorModeValue

If there’s no specific token for a color (e.g., a custom alias), you can use useColorModeValue:

() => {
  const { toggleColorMode } = useColorMode()
  const bg = useColorModeValue('darkTeal', 'mint')
  const color = useColorModeValue('white', 'darkTeal')
  return (
    <>
      <Box marginBottom={4} padding={3} borderRadius="md" bg={bg} color={color}>
        This Box and text will change style based on the color mode.
      </Box>
      <Box>
        <Button onClick={toggleColorMode}>
          Toggle Color Mode
        </Button>
      </Box>
    </>
  )
}

In some cases, you may want a component to always stay in light or dark mode, regardless of the app’s color mode. Use className light or dark to accomplish this. Use this approach sparingly - only when you need a component to be color mode-independent.

<Stack gap={3}>
  <Box className="light">
    <Button variant="primary">This is always light mode</Button>
  </Box>
  <Box className="dark">
    <Button variant="primary">This is always dark mode</Button>
  </Box>
</Stack>

Design tokens can be used to override a component’s global styling or tailor an individual instance to a specific context.