DisplayThemeScale

Use DisplayThemeScale to render a component for each value in a theme scale.

Example

Import dependancies in the markdown document and export a component to use the value from the scale of interest.

jsx

import { Box, Grid } from "theme-ui"

export function ExampleOpacities({ className, value }) {
  return (
    <Box
      className={className}
      sx={{
        display: "grid",
        gridTemplateColumns: "repeat(3, 1fr)",
        gridTemplateRows: "repeat(3, 1fr)",
        bg: "white",
      }}
    >
      <Box
        sx={{
          gridRowStart: 1,
          gridRowEnd: 3,
          gridColumnStart: 1,
          gridColumnEnd: 3,
          width: "50px",
          height: "50px",
          background: "secondary",
        }}
      ></Box>
      <Box
        sx={{
          gridRowStart: 2,
          gridRowEnd: 4,
          gridColumnStart: 2,
          gridColumnEnd: 4,
          width: "50px",
          height: "50px",
          background: "primary",
          opacity: value,
        }}
      />
    </Box>
  )
}

Pass the component and the theme key for the scale of interest to DisplayThemeScale

markdown

<DisplayThemeScale component={ExampleOpacities} themeKey="opacities" />

DisplayThemeScale

Example

0: 0

1: 0.1

2: 0.2

3: 0.3

4: 0.4

5: 0.5

6: 0.6

7: 0.7

8: 0.8

9: 0.9

10: normal