colors.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DS in CSS - Colors</title>
  <link rel="shortcut icon" href="https://cdn.casebook.net/images/favicon.ico">
  <link rel="stylesheet" type="text/css" href="./css/styles.css">
</head>

<body class="cb-baseline">
  <main class="cb-main">
    <h1 class="cb-h4 cb-bolder"><a class="cb-link" href="./index.html">DS in CSS</a></h1>
    <h2 class="cb-h5 cb-margin-bottom-large">
      Colors
    </h2>

    <div id="root"></div>
    <script type="module">
      import { h, Component, render } from "https://unpkg.com/preact?module";
      import htm from "https://unpkg.com/htm?module";
      const html = htm.bind(h);

      const colors = ["framboise", "heather", "indigo", "matter", "millennial", "nightshade", "patina", "stratus"].sort();
      const tones = [25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900].sort((a, b) => b - a);
      function App(props) {
        return html`<div class="cb-flex cb-flex-direction-column justify-content-stretch">${colors.map(c =>
          html`<h3 id="${c}" class="cb-h6 cb-margin-bottom-large cb-margin-top-large">${c[0].toUpperCase()}${c.substring(1)}</h3><div class="cb-flex cb-flex-wrap-wrap cb-flex-direction-row cb-flex-grow">${tones.map(t => html`<div class="cb-pad-dense cb-column-4 cb-column-6-sm cb-column-12-xs"><div class="cb-border-color-${c}-${t} cb-border-width-default cb-border-style-solid cb-border-radius-big overflow-hidden"><div class="cb-background-color-white cb-border-radius-big cb-pad-dense">${c} ${t}<br/><code class="cb-monospace cb-caption cb-text-color-secondary">.cb-color-${c}-${t}</code><br/><code class="cb-monospace cb-caption cb-text-color-secondary">.cb-background-color-${c}-${t}</code></div><div class="cb-background-color-${c}-${t} cb-pad-large"></div></div></div>`)
            }</div>`
        )}</div>`
      }

      render(html`<${App} name="World" />`, document.getElementById("root"));
    </script>
  </main>
</body>

</html>