Colors

Color tokens definitions

<div class="u-bc-primary u-c-primary-max u-p-lg">
    primary<br>#38FFC9<br>var(--briks-color-primary)
</div>
<div class="u-bc-primary-alt u-c-primary-max u-p-lg">
    primary-alt<br>#e0b662<br>var(--briks-color-primary-alt)
</div>
<div class="u-bc-translucid-primary u-c-primary u-p-lg">
    translucid-primary<br>rgba(#BA9856, 0.3)<br>var(--briks-color-translucid-primary)
</div>
<div class="u-bc-primary-max u-c-primary u-p-lg">
    primary-max<br>#ffffff<br>var(--briks-color-primary-max)
</div>
<div class="u-bc-neutral-light-max u-c-neutral-dark-max u-p-lg">
    neutral-light-max<br>#FFFFFF<br>var(--briks-color-neutral-light-max)
</div>
<div class="u-bc-neutral-light-4 u-c-neutral-dark-max u-p-lg">
    neutral-light-4<br>#F7F7F7<br>var(--briks-color-neutral-light-4)
</div>
<div class="u-bc-neutral-light-3 u-c-neutral-dark-max u-p-lg">
    neutral-light-3<br>#F1F1F1<br>var(--briks-color-neutral-light-3)
</div>
<div class="u-bc-neutral-light-2 u-c-neutral-dark-max u-p-lg">
    neutral-light-2<br>#EAEAEA<br>var(--briks-color-neutral-light-2)
</div>
<div class="u-bc-neutral-light-1 u-c-neutral-dark-max u-p-lg">
    neutral-light-1<br>#999999<br>var(--briks-color-neutral-light-1)
</div>
<div class="u-bc-neutral u-c-neutral-dark-max u-p-lg">
    neutral<br>#6D6D6D<br>var(--briks-color-neutral)
</div>
<div class="u-bc-neutral-dark-1 u-c-neutral-light-max u-p-lg">
    neutral-dark-1<br>#4B4B4B<br>var(--briks-color-neutral-dark-1)
</div>
<div class="u-bc-neutral-dark-2 u-c-neutral-light-max u-p-lg">
    neutral-dark-2<br>#3C3A3D<br>var(--briks-color-neutral-dark-2)
</div>
<div class="u-bc-neutral-dark-3 u-c-neutral-light-max u-p-lg">
    neutral-dark-3<br>#232323<br>var(--briks-color-neutral-dark-3)
</div>
<div class="u-bc-neutral-dark-4 u-c-neutral-light-max u-p-lg">
    neutral-dark-4<br>#1F1F1F<br>var(--briks-color-neutral-dark-4)
</div>
<div class="u-bc-neutral-dark-max u-c-neutral-light-max u-p-lg">
    neutral-dark-max<br>#000000<br>var(--briks-color-neutral-dark-max)
</div>
<div class="u-bc-plain-1 u-c-neutral-light-max u-p-lg">
    plain-1<br>#9AB1B6<br>var(--briks-color-plain-1)
</div>
<div class="u-bc-plain-2 u-c-neutral-light-max u-p-lg">
    plain-2<br>#9B8B85<br>var(--briks-color-plain-2)
</div>
<div class="u-bc-plain-3 u-c-neutral-light-max u-p-lg">
    plain-3<br>#5E88A2<br>var(--briks-color-plain-3)
</div>
<div class="u-bc-translucid-dark-max u-c-neutral-dark-max u-p-lg">
    translucid-dark-max<br>rgba(0, 0, 0, 0.05)<br>var(--briks-color-translucid-dark-max)
</div>
<div class="u-bc-translucid-dark-4 u-c-neutral-dark-max u-p-lg">
    translucid-dark-4<br>rgba(0, 0, 0, 0.1)<br>var(--briks-color-translucid-dark-4)
</div>
<div class="u-bc-translucid-dark-3 u-c-neutral-dark-max u-p-lg">
    translucid-dark-3<br>rgba(0, 0, 0, 0.15)<br>var(--briks-color-translucid-dark-3)
</div>
<div class="u-bc-translucid-dark-2 u-c-neutral-dark-max u-p-lg">
    translucid-dark-2<br>rgba(0, 0, 0, 0.2)<br>var(--briks-color-translucid-dark-2)
</div>
<div class="u-bc-translucid-dark-1 u-c-neutral-dark-max u-p-lg">
    translucid-dark-1<br>rgba(0, 0, 0, 0.5)<br>var(--briks-color-translucid-dark-1)
</div>
<div class="u-bc-translucid-dark-min u-c-neutral-dark-max u-p-lg">
    translucid-dark-min<br>rgba(0, 0, 0, 0.75)<br>var(--briks-color-translucid-dark-min)
</div>
<div class="u-bc-translucid-mid-max u-c-neutral-dark-max u-p-lg">
    translucid-mid-max<br>rgba(150, 150, 150, 0.2)<br>var(--briks-color-translucid-mid-max)
</div>
<div class="u-bc-translucid-mid u-c-neutral-dark-max u-p-lg">
    translucid-mid<br>rgba(145, 145, 145, 0.4)<br>var(--briks-color-translucid-mid)
</div>
<div class="u-bc-translucid-mid-min u-c-neutral-dark-max u-p-lg">
    translucid-mid-min<br>rgba(220, 220, 220, 0.6)<br>var(--briks-color-translucid-mid-min)
</div>
<div class="u-bc-translucid-light-1 u-c-neutral-dark-max u-p-lg">
    translucid-light-1<br>rgba(255, 255, 255, 0.8)<br>var(--briks-color-translucid-light-1)
</div>
<div class="u-bc-translucid-light-max u-c-neutral-dark-max u-p-lg">
    translucid-light-max<br>rgba(255, 255, 255, 0.92)<br>var(--briks-color-translucid-light-max)
</div>
<div class="u-bc-support-success u-c-neutral-light-max u-p-lg">
    support-success<br>#1aab7f<br>var(--briks-color-support-success)
</div>
<div class="u-bc-support-warning u-c-neutral-light-max u-p-lg">
    support-warning<br>#d89210<br>var(--briks-color-support-warning)
</div>
<div class="u-bc-support-danger u-c-neutral-light-max u-p-lg">
    support-danger<br>#b4170c<br>var(--briks-color-support-danger)
</div>
<div class="u-bc-translucid-support-success u-c-support-success u-p-lg">
    translucid-support-success<br>rgba(#1aab7f, 0.3)<br>var(--briks-color-translucid-support-success)
</div>
<div class="u-bc-translucid-support-warning u-c-support-warning u-p-lg">
    translucid-support-warning<br>rgba(#d89210, 0.3)<br>var(--briks-color-translucid-support-warning)
</div>
<div class="u-bc-translucid-support-danger u-c-support-danger u-p-lg">
    translucid-support-danger<br>rgba(#b4170c, 0.3)<br>var(--briks-color-translucid-support-danger)
</div>
<div class="u-bc-transparent u-c-neutral-dark-max u-p-lg">
    transparent<br>transparent<br>var(--briks-color-transparent)
</div>