Palette

<div>
    <div class="styleguide__palette__section">
        <div class="styleguide__palette__block">
            <h2 class="styleguide__palette__name">white</h2>
            <div class="styleguide__palette__color styleguide__palette__color--white" style="background:#ffffff"></div><span class="styleguide__palette__hex">Hex: <code class="styleguide__palette__code">#ffffff</code></span>
        </div>
        <div class="styleguide__palette__block">
            <h2 class="styleguide__palette__name">black</h2>
            <div class="styleguide__palette__color styleguide__palette__color--black" style="background:#010101"></div><span class="styleguide__palette__hex">Hex: <code class="styleguide__palette__code">#010101</code></span>
        </div>
        <div class="styleguide__palette__block">
            <h2 class="styleguide__palette__name">purple</h2>
            <div class="styleguide__palette__color styleguide__palette__color--purple" style="background:#944aa0"></div><span class="styleguide__palette__hex">Hex: <code class="styleguide__palette__code">#944aa0</code></span>
        </div>
        <div class="styleguide__palette__block">
            <h2 class="styleguide__palette__name">teal</h2>
            <div class="styleguide__palette__color styleguide__palette__color--teal" style="background:#006272"></div><span class="styleguide__palette__hex">Hex: <code class="styleguide__palette__code">#006272</code></span>
        </div>
        <div class="styleguide__palette__block">
            <h2 class="styleguide__palette__name">cyan</h2>
            <div class="styleguide__palette__color styleguide__palette__color--cyan" style="background:#298187"></div><span class="styleguide__palette__hex">Hex: <code class="styleguide__palette__code">#298187</code></span>
        </div>
        <div class="styleguide__palette__block">
            <h2 class="styleguide__palette__name">turquoise</h2>
            <div class="styleguide__palette__color styleguide__palette__color--turquoise" style="background:#5cb8bf"></div><span class="styleguide__palette__hex">Hex: <code class="styleguide__palette__code">#5cb8bf</code></span>
        </div>
        <div class="styleguide__palette__block">
            <h2 class="styleguide__palette__name">red</h2>
            <div class="styleguide__palette__color styleguide__palette__color--red" style="background:#e01b2f"></div><span class="styleguide__palette__hex">Hex: <code class="styleguide__palette__code">#e01b2f</code></span>
        </div>
        <div class="styleguide__palette__block">
            <h2 class="styleguide__palette__name">orange</h2>
            <div class="styleguide__palette__color styleguide__palette__color--orange" style="background:#e87500"></div><span class="styleguide__palette__hex">Hex: <code class="styleguide__palette__code">#e87500</code></span>
        </div>
        <div class="styleguide__palette__block">
            <h2 class="styleguide__palette__name">yellow</h2>
            <div class="styleguide__palette__color styleguide__palette__color--yellow" style="background:#ffce3c"></div><span class="styleguide__palette__hex">Hex: <code class="styleguide__palette__code">#ffce3c</code></span>
        </div>
        <div class="styleguide__palette__block">
            <h2 class="styleguide__palette__name">brown</h2>
            <div class="styleguide__palette__color styleguide__palette__color--brown" style="background:#815e48"></div><span class="styleguide__palette__hex">Hex: <code class="styleguide__palette__code">#815e48</code></span>
        </div>
        <div class="styleguide__palette__block">
            <h2 class="styleguide__palette__name">cream</h2>
            <div class="styleguide__palette__color styleguide__palette__color--cream" style="background:#f0ede3"></div><span class="styleguide__palette__hex">Hex: <code class="styleguide__palette__code">#f0ede3</code></span>
        </div>
        <div class="styleguide__palette__block">
            <h2 class="styleguide__palette__name">green</h2>
            <div class="styleguide__palette__color styleguide__palette__color--green" style="background:#088574"></div><span class="styleguide__palette__hex">Hex: <code class="styleguide__palette__code">#088574</code></span>
        </div>
        <div class="styleguide__palette__block">
            <h2 class="styleguide__palette__name">charcoal</h2>
            <div class="styleguide__palette__color styleguide__palette__color--charcoal" style="background:#323232"></div><span class="styleguide__palette__hex">Hex: <code class="styleguide__palette__code">#323232</code></span>
        </div>
        <div class="styleguide__palette__block">
            <h2 class="styleguide__palette__name">pewter</h2>
            <div class="styleguide__palette__color styleguide__palette__color--pewter" style="background:#717171"></div><span class="styleguide__palette__hex">Hex: <code class="styleguide__palette__code">#717171</code></span>
        </div>
        <div class="styleguide__palette__block">
            <h2 class="styleguide__palette__name">silver</h2>
            <div class="styleguide__palette__color styleguide__palette__color--silver" style="background:#8f8f8f"></div><span class="styleguide__palette__hex">Hex: <code class="styleguide__palette__code">#8f8f8f</code></span>
        </div>
        <div class="styleguide__palette__block">
            <h2 class="styleguide__palette__name">marble</h2>
            <div class="styleguide__palette__color styleguide__palette__color--marble" style="background:#bcbab5"></div><span class="styleguide__palette__hex">Hex: <code class="styleguide__palette__code">#bcbab5</code></span>
        </div>
        <div class="styleguide__palette__block">
            <h2 class="styleguide__palette__name">pumice</h2>
            <div class="styleguide__palette__color styleguide__palette__color--pumice" style="background:#d9d6ce"></div><span class="styleguide__palette__hex">Hex: <code class="styleguide__palette__code">#d9d6ce</code></span>
        </div>
        <div class="styleguide__palette__block">
            <h2 class="styleguide__palette__name">smoke</h2>
            <div class="styleguide__palette__color styleguide__palette__color--smoke" style="background:#e8e8e8"></div><span class="styleguide__palette__hex">Hex: <code class="styleguide__palette__code">#e8e8e8</code></span>
        </div>
    </div>
</div>
// @flow

type Props = {|
  colorsArray: Array<{|name: string, hex: string|}>
|}

function colorBlock(name, hex) {
  if (hex.indexOf('#') !== 0) return; // Don't display e.g. 'currentColor' or 'transparent'

  return (
    <div key={name} className='styleguide__palette__block'>
      <h2 className='styleguide__palette__name'>{name}</h2>
      <div className={`styleguide__palette__color styleguide__palette__color--${name}`} style={{background: hex}}></div>
      <span className='styleguide__palette__hex'>Hex: <code className='styleguide__palette__code'>{hex}</code></span>
    </div>
  );
}

const Palette = ({colorsArray}: Props) => (
  <div>
    <div className='styleguide__palette__section'>
      {colorsArray.map(color => colorBlock(color.name, color.hex))}
    </div>
  </div>
);

export default Palette;
{
  "colorsArray": [
    {
      "name": "white",
      "hex": "#ffffff"
    },
    {
      "name": "black",
      "hex": "#010101"
    },
    {
      "name": "purple",
      "hex": "#944aa0"
    },
    {
      "name": "teal",
      "hex": "#006272"
    },
    {
      "name": "cyan",
      "hex": "#298187"
    },
    {
      "name": "turquoise",
      "hex": "#5cb8bf"
    },
    {
      "name": "red",
      "hex": "#e01b2f"
    },
    {
      "name": "orange",
      "hex": "#e87500"
    },
    {
      "name": "yellow",
      "hex": "#ffce3c"
    },
    {
      "name": "brown",
      "hex": "#815e48"
    },
    {
      "name": "cream",
      "hex": "#f0ede3"
    },
    {
      "name": "green",
      "hex": "#088574"
    },
    {
      "name": "charcoal",
      "hex": "#323232"
    },
    {
      "name": "pewter",
      "hex": "#717171"
    },
    {
      "name": "silver",
      "hex": "#8f8f8f"
    },
    {
      "name": "marble",
      "hex": "#bcbab5"
    },
    {
      "name": "pumice",
      "hex": "#d9d6ce"
    },
    {
      "name": "smoke",
      "hex": "#e8e8e8"
    },
    {
      "name": "transparent",
      "hex": "transparent"
    },
    {
      "name": "transparent-black",
      "hex": "rgba(29, 29, 29, 0.61)"
    },
    {
      "name": "inherit",
      "hex": "inherit"
    },
    {
      "name": "currentColor",
      "hex": "currentColor"
    }
  ]
}

There are no notes for this item.