Colors

colors.scss

// Dark solid setup
$dark-050: rgba(230, 235, 236, 1) !default;
$dark-100: rgba(205, 215, 216, 1) !default;
$dark-150: rgba(179, 195, 197, 1) !default;
$dark-200: rgba(154, 175, 177, 1) !default;
$dark-250: rgba(129, 155, 158, 1) !default;
$dark-300: rgba(104, 134, 139, 1) !default;
$dark-350: rgba(79, 114, 119, 1) !default;
$dark-400: rgba(53, 94, 100, 1) !default;
$dark-450: rgba(28, 74, 80, 1) !default;
$dark-550: rgba(3, 49, 55, 1) !default;
$dark-600: rgba(2, 43, 49, 1) !default;
$dark-650: rgba(2, 38, 43, 1) !default;
$dark-700: rgba(2, 32, 37, 1) !default;
$dark-750: rgba(1, 27, 30, 1) !default;
$dark-800: rgba(1, 22, 24, 1) !default;
$dark-860: rgba(1, 16, 18, 1) !default;
$dark-900: rgba(1, 11, 12, 1) !default;
$dark-950: rgba(0, 5, 6, 1) !default;

// Dark: default setup
$dark-d-050: tint-color($dark, 10%) !default;
$dark-d-100: tint-color($dark, 20%) !default;
$dark-d-150: tint-color($dark, 30%) !default;
$dark-d-200: tint-color($dark, 40%) !default;
$dark-d-250: tint-color($dark, 50%) !default;
$dark-d-300: tint-color($dark, 60%) !default;
$dark-d-350: tint-color($dark, 70%) !default;
$dark-d-400: tint-color($dark, 80%) !default;
$dark-d-450: tint-color($dark, 90%) !default;
$dark-d-550: shade-color($dark, 10%) !default;
$dark-d-600: shade-color($dark, 20%) !default;
$dark-d-650: shade-color($dark, 30%) !default;
$dark-d-700: shade-color($dark, 40%) !default;
$dark-d-750: shade-color($dark, 50%) !default;
$dark-d-800: shade-color($dark, 60%) !default;
$dark-d-860: shade-color($dark, 70%) !default;
$dark-d-900: shade-color($dark, 80%) !default;
$dark-d-950: shade-color($dark, 90%) !default;

// Dark: alpha setup
$dark-a-050: rgba($dark, .1) !default;
$dark-a-100: rgba($dark, .2) !default;
$dark-a-150: rgba($dark, .3) !default;
$dark-a-200: rgba($dark, .4) !default;
$dark-a-250: rgba($dark, .5) !default;
$dark-a-300: rgba($dark, .6) !default;
$dark-a-350: rgba($dark, .7) !default;
$dark-a-400: rgba($dark, .8) !default;
$dark-a-450: rgba($dark, .9) !default;

$dark-colors: (
	'dark-050': $dark-050,
	'dark-100': $dark-100,
	'dark-150': $dark-150,
	'dark-200': $dark-200,
	'dark-250': $dark-250,
	'dark-300': $dark-300,
	'dark-350': $dark-350,
	'dark-400': $dark-400,
	'dark-450': $dark-450,
	'dark-550': $dark-550,
	'dark-600': $dark-600,
	'dark-650': $dark-650,
	'dark-700': $dark-700,
	'dark-750': $dark-750,
	'dark-800': $dark-800,
	'dark-860': $dark-860,
	'dark-900': $dark-900,
	'dark-950': $dark-950,

	'dark-d-050': $dark-d-050,
	'dark-d-100': $dark-d-100,
	'dark-d-150': $dark-d-150,
	'dark-d-200': $dark-d-200,
	'dark-d-250': $dark-d-250,
	'dark-d-300': $dark-d-300,
	'dark-d-350': $dark-d-350,
	'dark-d-400': $dark-d-400,
	'dark-d-450': $dark-d-450,
	'dark-d-550': $dark-d-550,
	'dark-d-600': $dark-d-600,
	'dark-d-650': $dark-d-650,
	'dark-d-700': $dark-d-700,
	'dark-d-750': $dark-d-750,
	'dark-d-800': $dark-d-800,
	'dark-d-860': $dark-d-860,
	'dark-d-900': $dark-d-900,
	'dark-d-950': $dark-d-950,

	'dark-a-050': $dark-a-050,
	'dark-a-100': $dark-a-100,
	'dark-a-150': $dark-a-150,
	'dark-a-200': $dark-a-200,
	'dark-a-250': $dark-a-250,
	'dark-a-300': $dark-a-300,
	'dark-a-350': $dark-a-350,
	'dark-a-400': $dark-a-400,
	'dark-a-450': $dark-a-450,
);

// Merge all into one array
$theme-colors: map-merge($theme-colors, $custom-colors);
$theme-colors: map-merge($theme-colors, $dark-colors);
// 👇
// 👉 this creates CSS classes I can use in the code based on variable name like: 
// 👉 👉 .bg-dark-a-450, 
// 👉 👉 or .color-dark-d-950 
// 👉 👉 or .text-dark-050 (this is just an alias to .color-dark-050)
//
// Example: <h1 class="color-dark-050">10% transparent dark color</h1>