@devseed-ui/theme-provider/src/story-colors.js

devseed UI Kit Theme

import React from 'react';
import styled from 'styled-components';
import { Heading } from '@devseed-ui/typography';

import {
  ColorPalette,
  ColorWrapper,
  Swatch,
  SwatchColor,
  SwatchDetails
} from '../../../.storybook/story-utils';

const Inner = styled.div`
  display: grid;
  grid-gap: 2rem;
`;

const colorVars = [
  'base',
  'surface',
  'primary',
  'secondary',
  'danger',
  'warning',
  'success',
  'info'
];

const steps = [
  { name: '50', detail: 'Tint: 96%' },
  { name: '100', detail: 'Tint: 92%' },
  { name: '200', detail: 'Tint: 84%' },
  { name: '300', detail: 'Tint: 68%' },
  { name: '400', detail: 'Tint: 36%' },
  { name: '500', detail: 'Pure' },
  { name: '600', detail: 'Shade: 16%' },
  { name: '700', detail: 'Shade: 32%' },
  { name: '800', detail: 'Shade: 48%' },
  { name: '900', detail: 'Shade: 64%' },
  { name: '50a', detail: 'Opacity: 4%' },
  { name: '100a', detail: 'Opacity: 8%' },
  { name: '200a', detail: 'Opacity: 16%' },
  { name: '300a', detail: 'Opacity: 32%' },
  { name: '400a', detail: 'Opacity: 64%' }
];

export const Colors = () => (
  <Inner>
    {colorVars.map((name) => (
      <ColorWrapper key={name}>
        <Heading as='h2'>{name}-*</Heading>
        <ColorPalette>
          {steps.map((step) => (
            <Swatch key={step.name}>
              <SwatchColor swatch={`color.${name}-${step.name}`}>
                <span>{step.name}</span>
              </SwatchColor>
              <SwatchDetails>
                {step.name}
                <small>{step.detail}</small>
              </SwatchDetails>
            </Swatch>
          ))}
        </ColorPalette>
      </ColorWrapper>
    ))}
  </Inner>
);