wcheng81
/
jtBaseApp


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

<head>
  <meta charset="utf-8" />
  <meta content="IE=edge" http-equiv="X-UA-Compatible" />
  <meta name="viewport" content="width=device-width" />
  <title>Calcite Colors</title>
  <meta name="description" content="Color codes for the Calcite design system" />
  <link rel="stylesheet"
    href="https://s3-us-west-1.amazonaws.com/patterns.esri.com/files/calcite-web/1.1.0/css/calcite-web.min.css" />
  <style>
    .swatch {
      height: 8rem;
    }

    body {
      background-color: #f8f8f8;
    }

    header {
      background-color: #007ac2;
      color: #fff;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <!-- header -->
    <header role="banner">
      <div class="grid-container">
        <div class="column-24">
          <h1 class="sub-nav-title leader-3">Calcite Colors</h1>
        </div>
        <div class="column-24">
          <div class="column-12">
            <p class="trailer-half">
              Version <span class="js-version margin-right-2"></span>
              <a href="https://github.com/esri/calcite-colors/" class="link-white">View on GitHub
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="15"
                  class="margin-left-quarter">
                  <path d="M14 8h1v7H1V1h7v1H2v12h12zm-4-7v1h3.29L7.62 7.67l.71.71L14 2.71V6h1V1z" /></svg></a>
            </p>
          </div>
        </div>
      </div>
    </header>

    <div class="grid-container padding-trailer-4 padding-leader-2">
      <div class="column-24 leader-0">
        <div class="js-loader loader is-active padding-leader-6 leader-3 padding-trailer-3">
          <div class="loader-bars"></div>
          <div class="loader-text">Loading colors...</div>
        </div>
        <div class="js-colors hide">
          <h2 class="trailer-1">UI Colors</h2>
          <div class="ui- block-group block-group-3-up tablet-block-group-1-up trailer-2"></div>

          <h2 class="trailer-1">UI Dark Colors</h2>
          <div class="ui-dark block-group block-group-3-up tablet-block-group-1-up trailer-2"></div>

          <h2 class="trailer-1">Neutral</h2>
          <div class="blk- block-group block-group-5-up tablet-block-group-2-up trailer-2"></div>

          <h2 class="trailer-2">Low Saturation</h2>
          <h3>Red</h3>
          <div class="l-rr block-group block-group-5-up tablet-block-group-2-up trailer-2"></div>
          <h3>Red-orange</h3>
          <div class="l-ro block-group block-group-5-up tablet-block-group-2-up trailer-2"></div>
          <h3>Orange</h3>
          <div class="l-oo block-group block-group-5-up tablet-block-group-2-up trailer-2"></div>
          <h3>Orange-yellow</h3>
          <div class="l-oy block-group block-group-5-up tablet-block-group-2-up trailer-2"></div>
          <h3>Yellow</h3>
          <div class="l-yy block-group block-group-5-up tablet-block-group-2-up trailer-2"></div>
          <h3>Yellow-green</h3>
          <div class="l-yg block-group block-group-5-up tablet-block-group-2-up trailer-2"></div>
          <h3>Green</h3>
          <div class="l-gg block-group block-group-5-up tablet-block-group-2-up trailer-2"></div>
          <h3>Green-blue</h3>
          <div class="l-gb block-group block-group-5-up tablet-block-group-2-up trailer-2"></div>
          <h3>Blue</h3>
          <div class="l-bb block-group block-group-5-up tablet-block-group-2-up trailer-2"></div>

          <h2 class="trailer-2">Medium Saturation</h2>
          <h3>Red</h3>
          <div class="m-rr block-group block-group-5-up tablet-block-group-2-up trailer-2"></div>
          <h3>Red-orange</h3>
          <div class="m-ro block-group block-group-5-up tablet-block-group-2-up trailer-2"></div>
          <h3>Orange</h3>
          <div class="m-oo block-group block-group-5-up tablet-block-group-2-up trailer-2"></div>
          <h3>Orange-yellow</h3>
          <div class="m-oy block-group block-group-5-up tablet-block-group-2-up trailer-2"></div>
          <h3>Yellow</h3>
          <div class="m-yy block-group block-group-5-up tablet-block-group-2-up trailer-2"></div>
          <h3>Yellow-green</h3>
          <div class="m-yg block-group block-group-5-up tablet-block-group-2-up trailer-2"></div>
          <h3>Green</h3>
          <div class="m-gg block-group block-group-5-up tablet-block-group-2-up trailer-2"></div>
          <h3>Green-blue</h3>
          <div class="m-gb block-group block-group-5-up tablet-block-group-2-up trailer-2"></div>
          <h3>Blue</h3>
          <div class="m-bb block-group block-group-5-up tablet-block-group-2-up trailer-2"></div>

          <h2 class="trailer-2">High Saturation</h2>
          <h3>Red</h3>
          <div class="h-rr block-group block-group-5-up tablet-block-group-2-up trailer-2"></div>
          <h3>Red-orange</h3>
          <div class="h-ro block-group block-group-5-up tablet-block-group-2-up trailer-2"></div>
          <h3>Orange</h3>
          <div class="h-oo block-group block-group-5-up tablet-block-group-2-up trailer-2"></div>
          <h3>Orange-yellow</h3>
          <div class="h-oy block-group block-group-5-up tablet-block-group-2-up trailer-2"></div>
          <h3>Yellow</h3>
          <div class="h-yy block-group block-group-5-up tablet-block-group-2-up trailer-2"></div>
          <h3>Yellow-green</h3>
          <div class="h-yg block-group block-group-5-up tablet-block-group-2-up trailer-2"></div>
          <h3>Green</h3>
          <div class="h-gg block-group block-group-5-up tablet-block-group-2-up trailer-2"></div>
          <h3>Green-blue</h3>
          <div class="h-gb block-group block-group-5-up tablet-block-group-2-up trailer-2"></div>
          <h3>Blue</h3>
          <div class="h-bb block-group block-group-5-up tablet-block-group-2-up trailer-2"></div>

          <h2 class="trailer-2">Vibrant</h2>
          <h3>Red</h3>
          <div class="v-rr block-group block-group-6-up tablet-block-group-4-up trailer-2"></div>
          <h3>Red-orange</h3>
          <div class="v-ro block-group block-group-6-up tablet-block-group-4-up trailer-2"></div>
          <h3>Orange</h3>
          <div class="v-oo block-group block-group-6-up tablet-block-group-4-up trailer-2"></div>
          <h3>Orange-yellow</h3>
          <div class="v-oy block-group block-group-6-up tablet-block-group-4-up trailer-2"></div>
          <h3>Yellow</h3>
          <div class="v-yy block-group block-group-6-up tablet-block-group-4-up trailer-2"></div>
          <h3>Yellow-green</h3>
          <div class="v-yg block-group block-group-6-up tablet-block-group-4-up trailer-2"></div>
          <h3>Green</h3>
          <div class="v-gg block-group block-group-6-up tablet-block-group-4-up trailer-2"></div>
          <h3>Green-blue</h3>
          <div class="v-gb block-group block-group-6-up tablet-block-group-4-up trailer-2"></div>
          <h3>Blue</h3>
          <div class="v-bb block-group block-group-6-up tablet-block-group-4-up trailer-2"></div>
        </div>
      </div>
    </div>
  </div>
  <script type="module" src="dist/colors.modern.js"></script>
  <script type="module">
    import { colors } from "./dist/colors.modern.js";

    Object.keys(colors).forEach(function (name) {
      var section = document.querySelector(`.${name.substring(0, 4)}`);
      if (name.indexOf("ui-") > -1) {
        section = document.querySelector(".ui-");
        if (name.indexOf("-dark") > -1) {
          section = document.querySelector(".ui-dark");
        }
      }
      var hex = colors[name];
      var card = `
        <div class="block card trailer-1">
          <div class="card-image-wrap">
            <div class="swatch" style="background-color:${hex}"></div>
          </div>
          <div class="panel panel-white panel-no-border clearfix">
            <span class="left">$${name}</span> <span class="right code-face">${hex}</code>
          </div>
        </div>
      `;
      section && (section.innerHTML += card);
    });

    document.querySelector(".js-loader").classList.remove("is-active");
    document.querySelector(".js-colors").classList.remove("hide");

    fetch("./package.json")
      .then(function (response) {
        return response.json();
      })
      .then(function (pkg) {
        document.querySelector(".js-version").innerHTML = pkg.version;
      });
  </script>
</body>

</html>