Colors

Color names should be generated using (Name That Color and added to variables/_colors.scss. Do not use relative palette names like "gray-lighter," "gray-dark," "gray-darker," "gray-darkest." This is both unhelpful and extremely limited. There will always be a darker gray.

// DON'T name like this:

$gray-lighter: #f8f9fa;
$gray: #cccccc;
$gray-dark: #666666;
$gray-darker: #494949;
$gray-darkest: #212529;

// DO name like this:

$athens: #f8f9fa;
$silver: #cccccc;
$dove: #666666;
$tundora: #494949;
$shark: #212529;

To add a new color, you should generate the color variable following the name convention, then generate the theme value and the three variants. At the end you should add it to project-colors sass map to let convert the color to css variable.

// DO Theme like this:
// 1 - Generate the color
$mariner: #212529;
...

// 2 - Add the color to the theme colors
$primary: $mariner;
...

// 3 - Generate theme variants (you can modify the percentage as you need)
$primary-dark: darken($primary, 30%);
$primary-light: lighten($primary, 30%);
$primary-accent: saturate($primary, 30%);
...

// 4 - Add the colors to project colors map
$project-colors: (
  'primary': $primary,
  'primary-dark': $primary-dark,
  'primary-light': $primary-light,
  'primary-accent': $primary-accent,
  ...
);

IMPORTANT: To allow changing the theme dynamically in client side, we should use the css variables instead of the scss ones. Those are converted automatically so just use it in the right way.

// DON'T use theme colors like this:

.my-awesome-component {
  color: $primary;
}

// DO use theme colors like this:

.my-awesome-component {
  color: var(--primary);
}

// INFO: Do we include this??? vvv

Dynamic light and Dark Theme

If you need it you can set dark-theme and light-theme variables to true in ~styles/variables/_colors.scss and it's going to generate the css variables automatically to those theme (This variables can be customized if it's needed in your project).

To use any of this theme, you just need to add to the body the class dark or light;

// DO use theme colors like this:
if (isInDarkMode) {
  document.body.classList.add('dark');
  document.body.classList.remove('light');
} else {
  document.body.classList.add('light');
  document.body.classList.remove('dark');
}