Joran design system

Color 

<div class="u-color--primary-100">
    u-color--primary-100
</div>

<div class="u-color--primary-200">
    u-color--primary-200
</div>

<div class="u-color--primary-400">
    u-color--primary-400
</div>

<div class="u-color--primary-600">
    u-color--primary-600
</div>

<div class="u-color--primary-800">
    u-color--primary-800
</div>

<div class="u-color--primary-900">
    u-color--primary-900
</div>

<div class="u-color--primary-cta">
    u-color--primary-cta
</div>

<div class="u-color--white">
    u-color--white
</div>
 
<div class="u-color--primary-100">
    u-color--primary-100
</div>

<div class="u-color--primary-200">
    u-color--primary-200
</div>

<div class="u-color--primary-400">
    u-color--primary-400
</div>

<div class="u-color--primary-600">
    u-color--primary-600
</div>

<div class="u-color--primary-800">
    u-color--primary-800
</div>

<div class="u-color--primary-900">
    u-color--primary-900
</div>

<div class="u-color--primary-cta">
    u-color--primary-cta
</div>

<div class="u-color--white">
    u-color--white
</div>
 
/* No context defined. */
  • Content: 
    /* ======================================================================
   # _color.utilities.css
   ====================================================================== */

.u-color--primary-100 {
  color: var(--color__primary--100);
}

.u-color--primary-200 {
  color: var(--color__primary--200);
}

.u-color--primary-400 {
  color: var(--color__primary--400);
}

.u-color--primary-600 {
  color: var(--color__primary--600);
}

.u-color--primary-800 {
  color: var(--color__primary--800);
}

.u-color--primary-900 {
  color: var(--color__primary--900);
}

.u-color--primary-cta {
  color: var(--color__primary--cta);
}

.u-color--white {
  @apply
    text-white
  ;
}
  • URL: /components/raw/color/_utilities.color.css
  • Filesystem Path: src/components/02-Utilities/color/_utilities.color.css
  • Size: 674 Bytes

No notes defined.