import {
  colorCard,
  colorCardDemo,
  colorCardDemoWhite,
  colorCardDemoDark,
  colorCardDemoPrimary,
  colorCardDemoSuccess,
  colorCardDemoWarning,
  colorCardDemoError,
  colorCardHex,
  colorCardVariable
} from './colors.styl'
import { Div, Span } from '@startupjs/ui'

# Colors

These are the color used in the Echo Design System.

## Neutrals

Content colors are semantically named for their hierarchical purpose and corresponding environment.

### White

Primary color for the branding. Mostly used for action buttons and hyperlinks.

<Div style={colorCard}>
  <Div style={[colorCardDemo, colorCardDemoWhite]}></Div>
  <Span style={colorCardVariable}>$UI.colors.white</Span>
  <Span style={colorCardHex}>#ffffff</Span>
</Div>

### Black

Color for the branding. Mostly used for action buttons.

<Div style={colorCard}>
  <Div style={[colorCardDemo, colorCardDemoDark]}></Div>
  <Span style={colorCardVariable}>$UI.colors.dark</Span>
  <Span style={colorCardVariable}>$UI.colors.mainText</Span>
  <Span style={colorCardVariable}>$UI.colors.secondary</Span>
  <Span style={colorCardHex}>#3E4657</Span>
</Div>

## Brand Colors

Brand colors represent the project identity and are used for Call-to-action buttons and hyperlinks.

### Primary

Primary color for the branding. Mostly used for action buttons and hyperlinks.

<Div style={colorCard}>
  <Div style={[colorCardDemo, colorCardDemoPrimary]}></Div>
  <Span style={colorCardVariable}>$UI.colors.primary</Span>
  <Span style={colorCardHex}>#2962FF</Span>
</Div>

### Secondary

Color for the branding. Mostly used for action buttons.

<Div style={colorCard}>
  <Div style={[colorCardDemo, colorCardDemoDark]}></Div>
  <Span style={colorCardVariable}>$UI.colors.secondary</Span>
  <Span style={colorCardHex}>#3E4657</Span>
</Div>

## Utility

Utility colors are used to emphasize and communicate feedback or meaning. Use each utility color only for its intended purpose, or they will lose the meaning.

### Success

<Div style={colorCard}>
  <Div style={[colorCardDemo, colorCardDemoSuccess]}></Div>
  <Span style={colorCardVariable}>$UI.colors.success</Span>
  <Span style={colorCardHex}>#24B47E</Span>
</Div>

### Warning

<Div style={colorCard}>
  <Div style={[colorCardDemo, colorCardDemoWarning]}></Div>
  <Span style={colorCardVariable}>$UI.colors.warning</Span>
  <Span style={colorCardHex}>#F5BE59</Span>
</Div>

### Error

<Div style={colorCard}>
  <Div style={[colorCardDemo, colorCardDemoError]}></Div>
  <Span style={colorCardVariable}>$UI.colors.error</Span>
  <Span style={colorCardHex}>#E25950</Span>
</Div>