grayscale.design css default scale for darkmode

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  /* Grayscale Design palette: https://grayscale.design/app?lums=93.87,82.28,68.67,49.10,40.20,32.78,13.29,9.31,6.30,2.62,1.30,0.52&palettes=%239c2733,%23b79de7,%2331c264,%236ab2d9,%23352220&filters=0%7C0,0%7C0,0%7C0,0%7C0,3.8%7C8.7&names=red,purple,green,blue,brown&labels=,,,, */
  :root {
    --grayscale-50: 248 248 248;
    --grayscale-100: 234 234 234;
    --grayscale-200: 216 216 216;
    --grayscale-300: 186 186 186;
    --grayscale-400: 170 170 170;
    --grayscale-500: 155 155 155;
    --grayscale-600: 102 102 102;
    --grayscale-700: 86 86 86;
    --grayscale-800: 71 71 71;
    --grayscale-900: 45 45 45;
    --grayscale-1000: 30 30 30;
    --grayscale-1100: 16 16 16;

    --gray-50: 250 248 248;
    --gray-100: 239 233 233;
    --gray-200: 226 215 214;
    --gray-300: 202 183 181;
    --gray-400: 189 165 163;
    --gray-500: 177 149 146;
    --gray-600: 129 96 93;
    --gray-700: 101 75 73;
    --gray-800: 79 59 57;
    --gray-900: 50 37 36;
    --gray-1000: 32 24 23;
    --gray-1100: 22 16 16;

    --red-50: 253 247 248;
    --red-100: 249 230 232;
    --red-200: 243 208 211;
    --red-300: 234 169 176;
    --red-400: 228 148 156;
    --red-500: 223 127 137;
    --red-600: 190 47 62;
    --red-700: 161 40 52;
    --red-800: 133 33 43;
    --red-900: 86 22 28;
    --red-1000: 59 15 19;
    --red-1100: 33 8 11;

    --purple-50: 249 247 253;
    --purple-100: 237 231 249;
    --purple-200: 223 211 244;
    --purple-300: 197 176 236;
    --purple-400: 183 158 231;
    --purple-500: 170 140 227;
    --purple-600: 120 72 210;
    --purple-700: 102 49 201;
    --purple-800: 85 41 167;
    --purple-900: 55 26 107;
    --purple-1000: 37 18 73;
    --purple-1100: 20 10 40;

    --green-50: 239 251 243;
    --green-100: 207 243 220;
    --green-200: 163 232 187;
    --green-300: 77 210 123;
    --green-400: 49 194 100;
    --green-500: 45 177 91;
    --green-600: 30 117 60;
    --green-700: 25 99 51;
    --green-800: 21 82 42;
    --green-900: 13 52 27;
    --green-1000: 9 35 18;
    --green-1100: 5 19 10;

    --blue-50: 243 249 252;
    --blue-100: 220 237 246;
    --blue-200: 189 221 238;
    --blue-300: 137 194 225;
    --blue-400: 107 179 217;
    --blue-500: 78 164 210;
    --blue-600: 37 108 146;
    --blue-700: 31 91 123;
    --blue-800: 26 76 103;
    --blue-900: 17 48 65;
    --blue-1000: 11 32 43;
    --blue-1100: 6 17 23;

    --brown-50: 255 247 231;
    --brown-100: 253 231 196;
    --brown-200: 248 210 165;
    --brown-300: 237 173 114;
    --brown-400: 226 154 102;
    --brown-500: 214 136 93;
    --brown-600: 157 82 51;
    --brown-700: 129 70 53;
    --brown-800: 103 60 51;
    --brown-900: 61 39 37;
    --brown-1000: 44 25 22;
    --brown-1100: 24 13 10;

    
    --black: 0 0 0;
    --white: 255 255 255;

    /* Set abstract colors */
    
    --dark: var(--black);
    --light: var(--white);

    --neutral-50: var(--gray-50);
    --neutral-100: var(--gray-100);
    --neutral-200: var(--gray-200);
    --neutral-300: var(--gray-300);
    --neutral-400: var(--gray-400);
    --neutral-500: var(--gray-500);
    --neutral-600: var(--gray-600);
    --neutral-700: var(--gray-700);
    --neutral-800: var(--gray-800);
    --neutral-900: var(--gray-900);
    --neutral-1000: var(--gray-1000);
    --neutral-1100: var(--gray-1100);

    --primary-50: var(--brown-50);
    --primary-100: var(--brown-100);
    --primary-200: var(--brown-200);
    --primary-300: var(--brown-300);
    --primary-400: var(--brown-400);
    --primary-500: var(--brown-500);
    --primary-600: var(--brown-600);
    --primary-700: var(--brown-700);
    --primary-800: var(--brown-800);
    --primary-900: var(--brown-900);
    --primary-1000: var(--brown-1000);
    --primary-1100: var(--brown-1100);

    --success-50: var(--green-50);
    --success-100: var(--green-100);
    --success-200: var(--green-200);
    --success-300: var(--green-300);
    --success-400: var(--green-400);
    --success-500: var(--green-500);
    --success-600: var(--green-600);
    --success-700: var(--green-700);
    --success-800: var(--green-800);
    --success-900: var(--green-900);
    --success-1000: var(--green-1000);
    --success-1100: var(--green-1100);

    --secondary-50: var(--blue-50);
    --secondary-100: var(--blue-100);
    --secondary-200: var(--blue-200);
    --secondary-300: var(--blue-300);
    --secondary-400: var(--blue-400);
    --secondary-500: var(--blue-500);
    --secondary-600: var(--blue-600);
    --secondary-700: var(--blue-700);
    --secondary-800: var(--blue-800);
    --secondary-900: var(--blue-900);
    --secondary-1000: var(--blue-1000);
    --secondary-1100: var(--blue-1100);

    --accent-50: var(--purple-50);
    --accent-100: var(--purple-100);
    --accent-200: var(--purple-200);
    --accent-300: var(--purple-300);
    --accent-400: var(--purple-400);
    --accent-500: var(--purple-500);
    --accent-600: var(--purple-600);
    --accent-700: var(--purple-700);
    --accent-800: var(--purple-800);
    --accent-900: var(--purple-900);
    --accent-1000: var(--purple-1000);
    --accent-1100: var(--purple-1100);

    --danger-50: var(--red-50);
    --danger-100: var(--red-100);
    --danger-200: var(--red-200);
    --danger-300: var(--red-300);
    --danger-400: var(--red-400);
    --danger-500: var(--red-500);
    --danger-600: var(--red-600);
    --danger-700: var(--red-700);
    --danger-800: var(--red-800);
    --danger-900: var(--red-900);
    --danger-1000: var(--red-1000);
    --danger-1100: var(--red-1100);
  }

  @media (prefers-color-scheme: dark) {
    /* Flip the values for dark mode */
    :root {
      --dark: var(--white);
      --light: var(--black);

      --neutral-50: var(--gray-1100);
      --neutral-100: var(--gray-1000);
      --neutral-200: var(--gray-900);
      --neutral-300: var(--gray-800);
      --neutral-400: var(--gray-700);
      --neutral-500: var(--gray-600);
      --neutral-600: var(--gray-500);
      --neutral-700: var(--gray-400);
      --neutral-800: var(--gray-300);
      --neutral-900: var(--gray-200);
      --neutral-1000: var(--gray-100);
      --neutral-1100: var(--gray-50);

      --primary-50: var(--brown-1100);
      --primary-100: var(--brown-1000);
      --primary-200: var(--brown-900);
      --primary-300: var(--brown-800);
      --primary-400: var(--brown-700);
      --primary-500: var(--brown-600);
      --primary-600: var(--brown-500);
      --primary-700: var(--brown-400);
      --primary-800: var(--brown-300);
      --primary-900: var(--brown-200);
      --primary-1000: var(--brown-100);
      --primary-1100: var(--brown-50);

      --success-50: var(--green-1100);
      --success-100: var(--green-1000);
      --success-200: var(--green-900);
      --success-300: var(--green-800);
      --success-400: var(--green-700);
      --success-500: var(--green-600);
      --success-600: var(--green-500);
      --success-700: var(--green-400);
      --success-800: var(--green-300);
      --success-900: var(--green-200);
      --success-1000: var(--green-100);
      --success-1100: var(--green-50);

      --secondary-50: var(--blue-1100);
      --secondary-100: var(--blue-1000);
      --secondary-200: var(--blue-900);
      --secondary-300: var(--blue-800);
      --secondary-400: var(--blue-700);
      --secondary-500: var(--blue-600);
      --secondary-600: var(--blue-500);
      --secondary-700: var(--blue-400);
      --secondary-800: var(--blue-300);
      --secondary-900: var(--blue-200);
      --secondary-1000: var(--blue-100);
      --secondary-1100: var(--blue-50);

      --accent-50: var(--purple-1100);
      --accent-100: var(--purple-1000);
      --accent-200: var(--purple-900);
      --accent-300: var(--purple-800);
      --accent-400: var(--purple-700);
      --accent-500: var(--purple-600);
      --accent-600: var(--purple-500);
      --accent-700: var(--purple-400);
      --accent-800: var(--purple-300);
      --accent-900: var(--purple-200);
      --accent-1000: var(--purple-100);
      --accent-1100: var(--purple-50);

      --danger-50: var(--red-1100);
      --danger-100: var(--red-1000);
      --danger-200: var(--red-900);
      --danger-300: var(--red-800);
      --danger-400: var(--red-700);
      --danger-500: var(--red-600);
      --danger-600: var(--red-500);
      --danger-700: var(--red-400);
      --danger-800: var(--red-300);
      --danger-900: var(--red-200);
      --danger-1000: var(--red-100);
      --danger-1100: var(--red-50);
      
      /* with this utility class you can do something like <div class="text-primary-400 dark:unset-dark-mode"> and it (and all it's child elements) will not automatically switch in darkmode. */
    .unset-dark-mode {
      --grayscale-50: var(--grayscale-50);
      --grayscale-100: var(--grayscale-100);
      --grayscale-200: var(--grayscale-200);
      --grayscale-300: var(--grayscale-300);
      --grayscale-400: var(--grayscale-400);
      --grayscale-500: var(--grayscale-500);
      --grayscale-600: var(--grayscale-600);
      --grayscale-700: var(--grayscale-700);
      --grayscale-800: var(--grayscale-800);
      --grayscale-900: var(--grayscale-900);
      --grayscale-1000: var(--grayscale-1000);
      --grayscale-1100: var(--grayscale-1100);

      --neutral-50: var(--gray-50);
      --neutral-100: var(--gray-100);
      --neutral-200: var(--gray-200);
      --neutral-300: var(--gray-300);
      --neutral-400: var(--gray-400);
      --neutral-500: var(--gray-500);
      --neutral-600: var(--gray-600);
      --neutral-700: var(--gray-700);
      --neutral-800: var(--gray-800);
      --neutral-900: var(--gray-900);
      --neutral-1000: var(--gray-1000);
      --neutral-1100: var(--gray-1100);

      --primary-50: var(--brown-50);
      --primary-100: var(--brown-100);
      --primary-200: var(--brown-200);
      --primary-300: var(--brown-300);
      --primary-400: var(--brown-400);
      --primary-500: var(--brown-500);
      --primary-600: var(--brown-600);
      --primary-700: var(--brown-700);
      --primary-800: var(--brown-800);
      --primary-900: var(--brown-900);
      --primary-1000: var(--brown-1000);
      --primary-1100: var(--brown-1100);

      --success-50: var(--green-50);
      --success-100: var(--green-100);
      --success-200: var(--green-200);
      --success-300: var(--green-300);
      --success-400: var(--green-400);
      --success-500: var(--green-500);
      --success-600: var(--green-600);
      --success-700: var(--green-700);
      --success-800: var(--green-800);
      --success-900: var(--green-900);
      --success-1000: var(--green-1000);
      --success-1100: var(--green-1100);

      --secondary-50: var(--blue-50);
      --secondary-100: var(--blue-100);
      --secondary-200: var(--blue-200);
      --secondary-300: var(--blue-300);
      --secondary-400: var(--blue-400);
      --secondary-500: var(--blue-500);
      --secondary-600: var(--blue-600);
      --secondary-700: var(--blue-700);
      --secondary-800: var(--blue-800);
      --secondary-900: var(--blue-900);
      --secondary-1000: var(--blue-1000);
      --secondary-1100: var(--blue-1100);

      --accent-50: var(--purple-50);
      --accent-100: var(--purple-100);
      --accent-200: var(--purple-200);
      --accent-300: var(--purple-300);
      --accent-400: var(--purple-400);
      --accent-500: var(--purple-500);
      --accent-600: var(--purple-600);
      --accent-700: var(--purple-700);
      --accent-800: var(--purple-800);
      --accent-900: var(--purple-900);
      --accent-1000: var(--purple-1000);
      --accent-1100: var(--purple-1100);

      --danger-50: var(--red-50);
      --danger-100: var(--red-100);
      --danger-200: var(--red-200);
      --danger-300: var(--red-300);
      --danger-400: var(--red-400);
      --danger-500: var(--red-500);
      --danger-600: var(--red-600);
      --danger-700: var(--red-700);
      --danger-800: var(--red-800);
      --danger-900: var(--red-900);
      --danger-1000: var(--red-1000);
      --danger-1100: var(--red-1100);
    }
  }
}

tailwind.config.js

function setAsCssVariable(colorName) {
  let augmentedPalette = {};
  const values = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100];
  values.forEach((value) => {
    augmentedPalette[value] = `rgb(var(--${colorName}-${value}) / <alpha-value>)`;
  });
  return augmentedPalette;
}

module.exports = {
  theme: {
    colors: {
      current: 'currentColor',
      transparent: 'transparent',
      black: 'rgb(var(--black) / <alpha-value>)',
      white: 'rgb(var(--white) / <alpha-value>)',
      light: 'rgb(var(--light) / <alpha-value>)',
      dark: 'rgb(var(--dark) / <alpha-value>)',
      grayscale: setAsCssVariable('grayscale'),
      neutral: setAsCssVariable('neutral'),
      gray: setAsCssVariable('gray'),
      primary: setAsCssVariable('primary'),
      brown: setAsCssVariable('brown'),
      secondary: setAsCssVariable('secondary'),
      blue: setAsCssVariable('blue'),
      accent: setAsCssVariable('accent'),
      purple: setAsCssVariable('purple'),
      success: setAsCssVariable('success'),
      green: setAsCssVariable('green'),
      danger: setAsCssVariable('danger'),
      red: setAsCssVariable('red'),
    },
  },
};