DisplayCSSPropertyMatrix

Use DisplayCSSPropertyMatrix to render a component in all combinations of values for two CSS properties.

Use cases

Here are some examples where this might come in handy:

• For color modes, see all values of text against background to visually check for contrast.
• See all fontFamilies at all fontWeights.
• See all borders with all backgrounds.

When assigning values to Theme-ui scales these quick visual checks can help see where the values are sub-optimal.

When writing theme documentation, they can show theme users all possibilites of the combination of two css properties.

Example

The Text component in theme-ui may be rendered with an sx prop where the fontFamily css property takes values from the fonts node of the theme, and the fontWeight css propery takes values from the fontWeights node of the theme.

First, in your markdown document, export the example component you want to display.

export function DisplayTextByFontFamilyByFontWeight({
  className,
  fontFamily,
  fontWeight,
}) {
  return (
    <Text
      as="span"
      className={className}
      sx={{
        fontFamily: fontFamily,
        fontWeight: fontWeight,
        fontSize: 6,
      }}
    >
      {alphabet.toLowerCase()}
    </Text>
  )
}

Then render the DisplayCSSPropertyMatrix component.

<DisplayCSSPropertyMatrix
  component={DisplayTextByFontFamilyByFontWeight}
  cssPropertyOne="fontFamily"
  themeKeyOne="fonts"
  cssPropertyTwo="fontWeight"
  themeKeyTwo="fontWeights"
/>

which renders this matrix: