import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
import imgTheming from './images/theming.jpg'

<Meta title='1.Docs|12-Utilities/Color Helpers'/>

# Color Helpers

## Background Color

| Class        | Properties | Example
| ------------- |:-------------:|:-------------:
| `.u-background-color-primary` | background-color: #3a42f1 | <span style={{backgroundColor: '#3a42f1', width: '20px', height: '20px', display: 'block', borderRadius: '150px'}}></span>
| `.u-background-color-secondary` | background-color: #ffce18 | <span style={{backgroundColor: '#ffce18', width: '20px', height: '20px', display: 'block', borderRadius: '150px'}}></span>
| `.u-background-color-danger` | background-color: #e07676 | <span style={{backgroundColor: '#e07676', width: '20px', height: '20px', display: 'block', borderRadius: '150px'}}></span>
| `.u-background-color-success` | background-color: #98c674 | <span style={{backgroundColor: '#98c674', width: '20px', height: '20px', display: 'block', borderRadius: '150px'}}></span>
| `.u-background-color-dark` | background-color: #424f62 | <span style={{backgroundColor: '#424f62', width: '20px', height: '20px', display: 'block', borderRadius: '150px'}}></span>
| `.u-background-color-ghost` | background-color: #fff | <span style={{backgroundColor: '#fff', width: '20px', height: '20px', display: 'block', borderRadius: '150px'}}></span>

## Text Color

| Class        | Properties | Example
| ------------- |:-------------:|:-------------:
| `.u-text-color-primary` | color: #3a42f1 | <span style={{backgroundColor: '#3a42f1', width: '20px', height: '20px', display: 'block', borderRadius: '150px'}}></span>
| `.u-text-color-secondary` | color: #ffce18 | <span style={{backgroundColor: '#ffce18', width: '20px', height: '20px', display: 'block', borderRadius: '150px'}}></span>
| `.u-text-color-danger` | color: #e07676 | <span style={{backgroundColor: '#e07676', width: '20px', height: '20px', display: 'block', borderRadius: '150px'}}></span>
| `.u-text-color-success` | color: #98c674 | <span style={{backgroundColor: '#98c674', width: '20px', height: '20px', display: 'block', borderRadius: '150px'}}></span>
| `.u-text-color-ghost` | color: #fff | <span style={{backgroundColor: '#fff', width: '20px', height: '20px', display: 'block', borderRadius: '150px'}}></span>
| `.u-text-color-uniform` | color: #424f62 | <span style={{backgroundColor: '#424f62', width: '20px', height: '20px', display: 'block', borderRadius: '150px'}}></span>
| `.u-text-color-800` | color: #424f62 | <span style={{backgroundColor: '#424f62', width: '20px', height: '20px', display: 'block', borderRadius: '150px'}}></span>
| `.u-text-color-600` | color: #8c9bb0 | <span style={{backgroundColor: '#8c9bb0', width: '20px', height: '20px', display: 'block', borderRadius: '150px'}}></span>
| `.u-text-color-300` | color: #d8e0ec | <span style={{backgroundColor: '#d8e0ec', width: '20px', height: '20px', display: 'block', borderRadius: '150px'}}></span>
| `.u-text-color-200` | color: #f1f6fc | <span style={{backgroundColor: '#f1f6fc', width: '20px', height: '20px', display: 'block', borderRadius: '150px'}}></span>
| `.u-text-color-100` | color: #424f62 | <span style={{backgroundColor: '#424f62', width: '20px', height: '20px', display: 'block', borderRadius: '150px'}}></span>

## Border Color

| Class        | Properties | Example
| ------------- |:-------------:|:-------------:
| `.u-border-color-primary` | border-color: #3a42f1 | <span style={{border: '3px solid #3a42f1', width: '20px', height: '20px', display: 'block', borderRadius: '150px'}}></span>
| `.u-border-color-secondary` | border-color: #ffce18 | <span style={{border: '3px solid #ffce18', width: '20px', height: '20px', display: 'block', borderRadius: '150px'}}></span>
| `.u-border-color-danger` | border-color: #e07676 | <span style={{border: '3px solid #e07676', width: '20px', height: '20px', display: 'block', borderRadius: '150px'}}></span>
| `.u-border-color-success` | border-color: #98c674 | <span style={{border: '3px solid #98c674', width: '20px', height: '20px', display: 'block', borderRadius: '150px'}}></span>
| `.u-border-color-ghost` | border-color: #fff | <span style={{border: '3px solid #fff', width: '20px', height: '20px', display: 'block', borderRadius: '150px'}}></span>
| `.u-border-color-default` | border-color: #d8e0ec | <span style={{border: '3px solid #d8e0ec', width: '20px', height: '20px', display: 'block', borderRadius: '150px'}}></span>