Colors

loonar-wp/assets/styles/config/

├── colors
│   └── _index.scss
├── layout
├── typography
└── z-index

In this phase you're going to set up all the colors used in the project. No matter if they are going to be used for typography or background colors, they all belong here.

Gather Colors

Use the design style provided by the UI team in order to extract all the colors used in the project.

Define Colors

Define a Sass variable for each color within te colors/_index.scss file.

Often the design style is missing a color. In this case - don't panic. You may always add a new color without affecting the entire project as you go throughout the devleopment.

_index.scss

$first: #000;
$second: #999;
$third: #d5d5d5;
$fourth: #f5f5f5;
$fifth: #fff;
$sixth: #f5f5f5;
$seventh: #f0f0f0;
$error: #ff0000