Component documentation

Components

Basics

Components

Objects

Utilities

Basics

Components

Objects

Utilities

Colors

Colors

#

Base

  • $color-white
    #FFFFFF
  • $color-gray-25
    #F9F9F9
  • $color-gray-50
    #F2F2F2
  • $color-gray-100
    #E5E5E5
  • $color-gray-150
    #D9D9D9
  • $color-gray-200
    #CCCCCC
  • $color-gray-300
    #B3B3B3
  • $color-gray-400
    #999999
  • $color-gray-500
    #808080
  • $color-gray-600
    #666666
  • $color-gray-650
    #595959
  • $color-gray-800
    #333333
  • $color-gray-900
    #1A1A1A
  • $color-black
    #000000

Reds

  • $color-red-50
    #FEE7E9
  • $color-red-150
    #FFB0B9
  • $color-red-300
    #FF8F9A
  • $color-red-400
    #FF6979
  • $color-red-600
    #FF4054
  • $color-red-700
    #B32D3B

Yellows

  • $color-yellow-50
    #FCF7E8
  • $color-yellow-150
    #FBE8B6
  • $color-yellow-300
    #F8DB94
  • $color-yellow-400
    #F7D682
  • $color-yellow-500
    #F4C95D
  • $color-yellow-600
    #FFBC1A
  • $color-yellow-650
    #E2A40C
  • $color-yellow-800
    #C28D0A
  • $color-yellow-900
    #6B4F0A

Greens

  • $color-green-50
    #ECF9F6
  • $color-green-200
    #ADDACF
  • $color-green-300
    #85C8B8
  • $color-green-400
    #33A388
  • $color-green-500
    #00A57D

Blues

  • $color-blue-25
    #F3F7FE
  • $color-blue-50
    #E7EFFE
  • $color-blue-150
    #CEE0FF
  • $color-blue-300
    #A7C8FF
  • $color-blue-400
    #8AB5FF
  • $color-blue-500
    #4085FB
  • $color-blue-600
    #1267FB
  • $color-blue-650
    #154EB1
  • $color-blue-700
    #154EB1

Beige

  • $color-beige-50
    #FDFAE8
  • $color-beige-500
    #D3C677
  • $color-beige-600
    #c4b554
  • $color-beige-700
    #af9d2d
  • $color-beige-800
    #524602
  • $color-beige-900
    #3a3200

Semantic colors

  • $color-semantic-primary
    #FF4054
  • $color-semantic-header-text
    #000000
  • $color-semantic-body-text
    $color-gray-800
  • $color-semantic-icon
    #595959
  • $color-semantic-muted-text
    #808080
  • $color-semantic-input-border
    #D4D4D4
  • $color-semantic-border
    #E5E5E5
  • $color-semantic-disabled
    #999999
  • $color-semantic-background
    #F2F2F2
  • $color-semantic-error
    #FF4054
  • $color-semantic-success
    #00A57D
  • $color-semantic-warning
    #F4C95D
  • $color-semantic-link
    $color-black
<h4>Base</h4>
<ul class="br-color-swatch-list">
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #FFFFFF"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-white</div>
            <div class="swatch-value">#FFFFFF</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #F9F9F9"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-gray-25</div>
            <div class="swatch-value">#F9F9F9</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #F2F2F2"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-gray-50</div>
            <div class="swatch-value">#F2F2F2</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #E5E5E5"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-gray-100</div>
            <div class="swatch-value">#E5E5E5</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #D9D9D9"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-gray-150</div>
            <div class="swatch-value">#D9D9D9</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #CCCCCC"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-gray-200</div>
            <div class="swatch-value">#CCCCCC</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #B3B3B3"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-gray-300</div>
            <div class="swatch-value">#B3B3B3</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #999999"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-gray-400</div>
            <div class="swatch-value">#999999</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #808080"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-gray-500</div>
            <div class="swatch-value">#808080</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #666666"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-gray-600</div>
            <div class="swatch-value">#666666</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #595959"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-gray-650</div>
            <div class="swatch-value">#595959</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #333333"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-gray-800</div>
            <div class="swatch-value">#333333</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #1A1A1A"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-gray-900</div>
            <div class="swatch-value">#1A1A1A</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #000000"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-black</div>
            <div class="swatch-value">#000000</div>
        </div>
    </li>
</ul>
<h4>Reds</h4>
<ul class="br-color-swatch-list">
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #FEE7E9"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-red-50</div>
            <div class="swatch-value">#FEE7E9</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #FFB0B9"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-red-150</div>
            <div class="swatch-value">#FFB0B9</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #FF8F9A"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-red-300</div>
            <div class="swatch-value">#FF8F9A</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #FF6979"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-red-400</div>
            <div class="swatch-value">#FF6979</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #FF4054"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-red-600</div>
            <div class="swatch-value">#FF4054</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #B32D3B"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-red-700</div>
            <div class="swatch-value">#B32D3B</div>
        </div>
    </li>
</ul>
<h4>Yellows</h4>
<ul class="br-color-swatch-list">
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #FCF7E8"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-yellow-50</div>
            <div class="swatch-value">#FCF7E8</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #FBE8B6"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-yellow-150</div>
            <div class="swatch-value">#FBE8B6</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #F8DB94"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-yellow-300</div>
            <div class="swatch-value">#F8DB94</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #F7D682"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-yellow-400</div>
            <div class="swatch-value">#F7D682</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #F4C95D"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-yellow-500</div>
            <div class="swatch-value">#F4C95D</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #FFBC1A"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-yellow-600</div>
            <div class="swatch-value">#FFBC1A</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #E2A40C"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-yellow-650</div>
            <div class="swatch-value">#E2A40C</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #C28D0A"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-yellow-800</div>
            <div class="swatch-value">#C28D0A</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #6B4F0A"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-yellow-900</div>
            <div class="swatch-value">#6B4F0A</div>
        </div>
    </li>
</ul>
<h4>Greens</h4>
<ul class="br-color-swatch-list">
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #ECF9F6"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-green-50</div>
            <div class="swatch-value">#ECF9F6</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #ADDACF"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-green-200</div>
            <div class="swatch-value">#ADDACF</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #85C8B8"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-green-300</div>
            <div class="swatch-value">#85C8B8</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #33A388"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-green-400</div>
            <div class="swatch-value">#33A388</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #00A57D"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-green-500</div>
            <div class="swatch-value">#00A57D</div>
        </div>
    </li>
</ul>
<h4>Blues</h4>
<ul class="br-color-swatch-list">
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #F3F7FE"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-blue-25</div>
            <div class="swatch-value">#F3F7FE</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #E7EFFE"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-blue-50</div>
            <div class="swatch-value">#E7EFFE</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #CEE0FF"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-blue-150</div>
            <div class="swatch-value">#CEE0FF</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #A7C8FF"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-blue-300</div>
            <div class="swatch-value">#A7C8FF</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #8AB5FF"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-blue-400</div>
            <div class="swatch-value">#8AB5FF</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #4085FB"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-blue-500</div>
            <div class="swatch-value">#4085FB</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #1267FB"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-blue-600</div>
            <div class="swatch-value">#1267FB</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #154EB1"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-blue-650</div>
            <div class="swatch-value">#154EB1</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #154EB1"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-blue-700</div>
            <div class="swatch-value">#154EB1</div>
        </div>
    </li>
</ul>
<h4>Beige</h4>
<ul class="br-color-swatch-list">
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #FDFAE8"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-beige-50</div>
            <div class="swatch-value">#FDFAE8</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #D3C677"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-beige-500</div>
            <div class="swatch-value">#D3C677</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #c4b554"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-beige-600</div>
            <div class="swatch-value">#c4b554</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #af9d2d"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-beige-700</div>
            <div class="swatch-value">#af9d2d</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #524602"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-beige-800</div>
            <div class="swatch-value">#524602</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #3a3200"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-beige-900</div>
            <div class="swatch-value">#3a3200</div>
        </div>
    </li>
</ul>
<h4>Semantic colors</h4>
<ul class="br-color-swatch-list">
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #FF4054"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-semantic-primary</div>
            <div class="swatch-value">#FF4054</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #000000"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-semantic-header-text</div>
            <div class="swatch-value">#000000</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: $color-gray-800"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-semantic-body-text</div>
            <div class="swatch-value">$color-gray-800</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #595959"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-semantic-icon</div>
            <div class="swatch-value">#595959</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #808080"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-semantic-muted-text</div>
            <div class="swatch-value">#808080</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #D4D4D4"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-semantic-input-border</div>
            <div class="swatch-value">#D4D4D4</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #E5E5E5"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-semantic-border</div>
            <div class="swatch-value">#E5E5E5</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #999999"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-semantic-disabled</div>
            <div class="swatch-value">#999999</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #F2F2F2"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-semantic-background</div>
            <div class="swatch-value">#F2F2F2</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #FF4054"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-semantic-error</div>
            <div class="swatch-value">#FF4054</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #00A57D"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-semantic-success</div>
            <div class="swatch-value">#00A57D</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: #F4C95D"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-semantic-warning</div>
            <div class="swatch-value">#F4C95D</div>
        </div>
    </li>
    <li class="br-color-swatch-item">
        <div class="br-color-swatch-preview" style="background-color: $color-black"></div>
        <div class="br-color-swatch-data">
            <div class="swatch-name">$color-semantic-link</div>
            <div class="swatch-value">$color-black</div>
        </div>
    </li>
</ul>
each category in colorCategories
    h4= category.name
    ul.br-color-swatch-list
        each color in category.colors
            li.br-color-swatch-item
                .br-color-swatch-preview(style=`background-color: ${color.value}`)
                .br-color-swatch-data
                    .swatch-name= color.name
                    .swatch-value= color.value