sentry/docs-ui/components/colors.stories.js

import React from 'react';
import {storiesOf} from '@storybook/react';
import {withInfo} from '@storybook/addon-info';
import styled from '@emotion/styled';

import theme from 'app/utils/theme';

storiesOf('Style|Colors', module).add(
  'default',
  withInfo('Top level colors')(() => {
    const colorsToDisplay = Object.entries(theme).filter(([_name, val]) => {
      return typeof val === 'string' && val.match(/^\#[0-9a-fA-F]{6}$/);
    });

    return (
      <Swatches>
        {colorsToDisplay.map(([name, color]) => (
          <Swatch key={name} color={color}>
            {name}
          </Swatch>
        ))}
      </Swatches>
    );
  })
);

const Swatches = styled('div')`
  display: grid;
  grid-template-columns: repeat(auto-fill, 80px);
  grid-gap: 16px;
`;

const Swatch = styled('div')`
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: ${p => p.color};
  color: ${p => (p.color[1].match(/[0-8]{1}/) ? p.theme.offWhite : p.theme.gray5)};
  font-size: ${p => p.theme.fontSizeSmall};
  height: 80px;
  text-align: center;
  word-break: break-all;
  line-height: 1.4em;
`;