react-howl/stories/theme/ThemeColors.jsx

A unified design system.

import React from 'react';
import { withStyles, withStylesPropTypes } from ':styles';
import liteOrDark from ':styles/theme/utils/liteOrDark';

const ThemeColors = ({ classNames, theme }) => {
  const { colors } = theme;

  return (
    <div className={classNames.colors}>
      {Object.keys(colors).map((colorName) => {
        const color = colors[colorName];
        const facets = Object.keys(color);

        return (
          <div key={colorName} className={classNames.color}>
            <div className={classNames.colorName}>
              {colorName.toUpperCase()}
            </div>
            <div className={classNames.facets}>
              {facets.map((facetType) => {
                const facetColor = color[facetType];

                return (
                  <div
                    key={`${colorName}-${facetType}`}
                    className={classNames.facet}
                    style={{
                      backgroundColor: facetColor,
                      color: liteOrDark(facetColor) ? 'black' : 'white',
                    }}
                  >
                    <div>{facetType.toUpperCase()}</div>
                    <div>{facetColor.toUpperCase()}</div>
                  </div>
                );
              })}
            </div>
          </div>
        );
      })}
    </div>
  );
};

ThemeColors.propTypes = {
  ...withStylesPropTypes,
};

export default withStyles(() => ({
  colors: {
    width: '100%',
    padding: 25,
  },

  color: {
    width: '100%',
    marginBottom: 25,
  },

  facets: {
    width: '100%',
    display: 'flex',
  },

  colorName: {
    fontSize: 20,
    fontWeight: 600,
    marginBottom: 10,
  },

  facet: {
    flex: 1,
    fontSize: 16,
    fontWeight: 600,
    padding: 25,
  },
}))(ThemeColors);