NJ Web Design System (v2.1.0)

State color utils 

<div class="padding-2 maxw-desktop">

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                error-lighter
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-error-lighter util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                error-light
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-error-light util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                error
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-error util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                error-dark
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-error-dark util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                error-darker
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-error-darker util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                warning-lighter
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-warning-lighter util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                warning-light
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-warning-light util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                warning
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-warning util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                warning-dark
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-warning-dark util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                warning-darker
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-warning-darker util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                success-lighter
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-success-lighter util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                success-light
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-success-light util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                success
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-success util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                success-dark
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-success-dark util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                success-darker
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-success-darker util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                info-lighter
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-info-lighter util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                info-light
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-info-light util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                info
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-info util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                info-dark
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-info-dark util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                info-darker
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-info-darker util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                disabled-light
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-disabled-light util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                disabled
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-disabled util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                disabled-dark
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-disabled-dark util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                emergency
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-emergency util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                emergency-dark
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-emergency-dark util-test padding-205"></div>
        </div>
    </div>

</div>

No notes defined.

<div class="padding-2 maxw-desktop">
  {% for color in state_colors %}
    <div class="grid-row flex-align-center">
      <div class="tablet:grid-col-2">
        <div>
          {{ color }}
        </div>
      </div>
      <div class="tablet:grid-col-10">
        <div class="bg-{{ color }} util-test padding-205"></div>
      </div>
    </div>
  {% endfor %}
</div>
 
package:
  name: null
  version: 2.1.0
uswds:
  path: ../../dist
state_colors:
  - error-lighter
  - error-light
  - error
  - error-dark
  - error-darker
  - warning-lighter
  - warning-light
  - warning
  - warning-dark
  - warning-darker
  - success-lighter
  - success-light
  - success
  - success-dark
  - success-darker
  - info-lighter
  - info-light
  - info
  - info-dark
  - info-darker
  - disabled-light
  - disabled
  - disabled-dark
  - emergency
  - emergency-dark