How I manage my coloring system in projects

#css #design #productivity #vscode

First I create a new SCSS partial named _theme_colors.scss,
then add the color codes as following:

$grays: (
  "50": #FAFBFC,
  "100": #DFE2E8,
  "200": #D0D4DB,
  "300": #A7B1BF,
  "400": #8591A2,
  "500": #6A7686,
  "600": #4D5866,
  "700": #3A434D,
  "800": #272D33,
  "900": #14171A
);

then I loop through them with scss @each function as following:

@each $key, $value in $grays {
  .text-gray-#{$key} {
    color: $value !important;
  }
  .bg-gray-#{$key} {
    background-color: $value;
  }
}

thus I can use them in my html as text-gray-100 up to text-gray-900 for text colors based on design system or bg-gray-100 up to bg-gray-900 for background colors.