CBP UI Library

Palette 

<h1>Neutrals</h1>
  <div class="row">
      <div class="swatch" style="--color:#f5f5f5">
          <span class="swatch__name">neutral--ultraLight</span>
          <span class="swatch__hex">#f5f5f5</span>
      </div>
      <div class="swatch" style="--color:#ebebeb">
          <span class="swatch__name">neutral--light</span>
          <span class="swatch__hex">#ebebeb</span>
      </div>
      <div class="swatch" style="--color:#cccccc">
          <span class="swatch__name">neutral</span>
          <span class="swatch__hex">#cccccc</span>
      </div>
      <div class="swatch" style="--color:#c2c2c2">
          <span class="swatch__name">neutral--dark</span>
          <span class="swatch__hex">#c2c2c2</span>
      </div>
      <div class="swatch" style="--color:#474747">
          <span class="swatch__name">neutral--darker</span>
          <span class="swatch__hex">#474747</span>
      </div>
      <div class="swatch" style="--color:#292929">
          <span class="swatch__name">neutral--ultraDark</span>
          <span class="swatch__hex">#292929</span>
      </div>
  </div>
  <h1>Blue</h1>
  <div class="row">
      <div class="swatch" style="--color:#c9e8f5">
          <span class="swatch__name">blue--ultraLight</span>
          <span class="swatch__hex">#c9e8f5</span>
      </div>
      <div class="swatch" style="--color:#1ac2ff">
          <span class="swatch__name">blue--bright</span>
          <span class="swatch__hex">#1ac2ff</span>
      </div>
      <div class="swatch" style="--color:#255e98">
          <span class="swatch__name">blue</span>
          <span class="swatch__hex">#255e98</span>
      </div>
      <div class="swatch" style="--color:#183d63">
          <span class="swatch__name">blue--dark</span>
          <span class="swatch__hex">#183d63</span>
      </div>
      <div class="swatch" style="--color:#112C45">
          <span class="swatch__name">blue--ultraDark</span>
          <span class="swatch__hex">#112C45</span>
      </div>
  </div>
  <h1>Accent</h1>
  <div class="row">
      <div class="swatch" style="--color:#ffe698">
          <span class="swatch__name">accent--ultraLight</span>
          <span class="swatch__hex">#ffe698</span>
      </div>
      <div class="swatch" style="--color:#ffcd32">
          <span class="swatch__name">accent</span>
          <span class="swatch__hex">#ffcd32</span>
      </div>
  </div>
  <h1>Indicators</h1>
  <div class="row">
      <div class="swatch" style="--color:#a5d673">
          <span class="swatch__name">success</span>
          <span class="swatch__hex">#a5d673</span>
      </div>
      <div class="swatch" style="--color:#f57f7f">
          <span class="swatch__name">alertBg</span>
          <span class="swatch__hex">#f57f7f</span>
      </div>
      <div class="swatch" style="--color:#c90808">
          <span class="swatch__name">alertText</span>
          <span class="swatch__hex">#c90808</span>
      </div>
  </div>

  <link media="all" rel="stylesheet" href="/palette/palette.css" />
  <script src="/palette/palette.js"></script>
 
{% for colorGroup in colors %}
  <h1>{{colorGroup.colorFamily}}</h1>
  <div class="row">
    {% for name, hex in colorGroup.swatches %}
      <div class="swatch" style="--color:{{hex}}">
        <span class="swatch__name">{{name}}</span>
        <span class="swatch__hex">{{hex}}</span>
      </div>
    {% endfor %}
  </div>
{% endfor %}

{% import "_macros.twig" as h %}
{{ h.componentAssets('palette') }}
 
{
  "colors": [
    {
      "colorFamily": "Neutrals",
      "swatches": {
        "neutral--ultraLight": "#f5f5f5",
        "neutral--light": "#ebebeb",
        "neutral": "#cccccc",
        "neutral--dark": "#c2c2c2",
        "neutral--darker": "#474747",
        "neutral--ultraDark": "#292929"
      }
    },
    {
      "colorFamily": "Blue",
      "swatches": {
        "blue--ultraLight": "#c9e8f5",
        "blue--bright": "#1ac2ff",
        "blue": "#255e98",
        "blue--dark": "#183d63",
        "blue--ultraDark": "#112C45"
      }
    },
    {
      "colorFamily": "Accent",
      "swatches": {
        "accent--ultraLight": "#ffe698",
        "accent": "#ffcd32"
      }
    },
    {
      "colorFamily": "Indicators",
      "swatches": {
        "success": "#a5d673",
        "alertBg": "#f57f7f",
        "alertText": "#c90808"
      }
    }
  ]
}
  • Content: 
    .row {
  display: flex;
  gap: 1em;
  margin-block: 1em;
}
.swatch {
  flex: 0 1 200px;
  &:before {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    padding-block-start: 50%;
    background: var(--color);
  }
}
.swatch__name,
.swatch__hex {
  font-size: var(--step--1);
  display: block;
}
.swatch__hex {
  text-transform: uppercase;
  color: var(--neutral--darker);
}
  • URL: /components/raw/palette/palette.scss
  • Filesystem Path: src/components/palette/palette.scss
  • Size: 394 Bytes

No notes defined.