question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

style-guide: ColorPalette doesn't show color labels

See original GitHub issue

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:

  1. Create a react project
  2. Add theme-ui and create a theme
  3. Make a page that uses the ColorPalette component
  4. 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?

Issue Analytics

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

github_iconTop GitHub Comments

1reaction
hasparuscommented, Mar 17, 2022

@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.

1reaction
braaarcommented, Feb 16, 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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

A detailed guide to colors in data vis style guides
How to create a color palette for the data visualizations in your organization. (You won't find a more extensive guide on this topic.)...
Read more >
Color - Foundations - Human Interface Guidelines - Design
iOS and macOS also define sets of dynamic system colors that match the color schemes of standard UI components and automatically adapt to...
Read more >
Branding Colors: Everything You Need to Choose Your ...
Branding colors: everything you need to choose your brand's color palette ... view brands that use blue as more eco-friendly than other colors,...
Read more >
A quick guide to Brand Color Palette with examples | Academy
Once you ideate and decide your brand color palette, you have to use those colors in several places so that your customers can...
Read more >
Color Theory 101: A Complete Guide to Color Wheels & Color ...
Trying to find out how to pick better color schemes for your next ... color and work from there to see if this...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found