theme-ui: style-guide: ColorPalette doesn't show color labels

Describe the bug The ColorPalette component from the style-guide package is not showing labels for my colors like in the style-guide docs

To Reproduce Steps to reproduce the behavior:

Create a react project
Add theme-ui and create a theme
Make a page that uses the ColorPalette component
See the colors, but no labels below them. On hover, see the label undefined

Note: This might not be all the steps required to reproduce the issue. I will attempt to create a minimal reproduction of the issue and update the issue later.

Expected behavior I would expect to see the name of the colors (the key in the theme file) below the colored squares, as seen in the style-guide docs.

Screenshots Screenshot 2022-02-02 at 12 04 08 As we can see in the screenshots, there is space below the swatches where the label should be. I believe the label ends up being undefined for some reaason or other.

Additional context See the theme page where the issue is seen. See also the github repository with the source code.

Here’s the source code where the color palette is declared:

          <Card>
            <Heading>Colors</Heading>
            <ColorPalette
              omit={[
                'modes',
                'placeholder',
                'twitter',
                'instagram',
                'facebook',
              ]}
            />
          </Card>

I’ve tried playing around with the colors object in the theme file with no effect, so I don’t think it is relevant to the issue.

Are the docs using an unreleased version of the package, perhaps?

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 15 (15 by maintainers)

Most upvoted comments

@braaar TBH I’m not sure if it would build at all if you mean the deep import ../../color. I see no reason not to import { getColor } from '@theme-ui/color' though.

hasparus on Mar 17, 2022

I have still not managed to pinpoint why this goes wrong, but I have found a fix that works. If I use getColor from @theme-ui/color instead of get from theme-ui to get the colors inside the ColorSwatch component, the titles are defined correctly.

I made these changes in the javascript dist files in the bjerkio/brand project: node_modules/@theme-ui/style-guide/dist/theme-ui-style-guide.cjs.dev.js (and a couple of other similarly named files)

// add import
var themeUiColor = require('@theme-ui/color')

// the relevant part of the code I have modified
const ColorSwatch = ({
  color,
  name,
  size = 128,
  label = true,
  ...props
}) => {
  // this is how it was before
  // const {
  //   colors
  // } = useTheme();
  // const value = themeUi.get(colors, color);

  // here is my fix
  const theme = useTheme(); 
  const value = themeUiColor.getColor(theme, color);

  return themeUi.jsx("div", _extends({}, props, {
    title: `${toHex(value)}`
  }), themeUi.jsx("div", {
    sx: {
      width: size,
      height: size,
      bg: color
    }
  }), label && themeUi.jsx("div", {
    sx: {
      py: 2
    }
  }, name || color));
};

Here is what the changes would look like if added to the style-guide tsx source code:

packages/style-guide/src/ColorSwatch.tsx line 20, replace

  const { colors } = useTheme()!
  const value = get(colors!, color)

with:

  const theme = useTheme()!
  const value = getColor(theme, color)

(and add import { getColor } from '../../color/src')

I’m not sure of the implications of adding this dependency. Is this problematic?

Anyway, I hope this info could be useful in finding the bug, at least.

braaar on Feb 16, 2022

Interesting, thanks for the report! I suspect this is an issue with configuration & not with the library, as https://theme.hackclub.com/ & our site, which both use the published package versions, show the labels. I’ll need to spend some time looking into this.

lachlanjc on Feb 4, 2022