Define color palette using CSS variables

by Константин Дралюк

HTML

<div class="card">
  <div class="card__title">Unde nesciunt officia impedit pariatur</div>
  <div class="card__description">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil obcaecati maxime. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur perspiciatis nobis autem ut minus beatae, laudantium dicta fuga. Hic necessitatibus minima sit libero inventore, quisquam est officiis excepturi earum velit? </div>
  <div class="card__button">Action!</div>
</div>

SCSS

:root {
  background: var(--color-base-100);
  color-scheme: dark!important;
  // color-scheme: light!important;

  --color-neutral-50: light-dark(oklch(95.6% 0.004 286.62), oklch(23.33% 0.015 279.54));
  --color-neutral-100: light-dark(oklch(92.23% 0.005 275.1), oklch(26.78% 0.019 280.59));
  --color-neutral-200: light-dark(oklch(83.7% 0.013 276.12), oklch(35.47% 0.023 274.97));
  --color-neutral-300: light-dark(oklch(75.96% 0.019 279), oklch(43.14% 0.028 277.29));
  --color-neutral-400: light-dark(oklch(67.33% 0.027 278.17), oklch(51.8% 0.033 276.7));
  --color-neutral-500: light-dark(oklch(59.71% 0.032 276.88), oklch(59.71% 0.032 276.88));
  --color-neutral-600: light-dark(oklch(51.8% 0.033 276.7), oklch(67.33% 0.027 278.17));
  --color-neutral-700: light-dark(oklch(43.14% 0.028 277.29), oklch(75.96% 0.019 279));
  --color-neutral-800: light-dark(oklch(35.47% 0.023 274.97), oklch(83.7% 0.013 276.12));
  --color-neutral-900: light-dark(oklch(26.78% 0.019 280.59), oklch(92.23% 0.005 275.1));
  --color-neutral-950: light-dark(oklch(23.33% 0.015 279.54), oklch(95.6% 0.004 286.62));

  --color-base-50: light-dark(oklch(96.48% 0.015 257.2), oklch(19.67% 0.045 243.18));
  --color-base-100: light-dark(oklch(92.24% 0.036 255.95), oklch(24.77% 0.059 245.48));
  --color-base-200: light-dark(oklch(85.31% 0.071 253.79), oklch(36.92% 0.085 244.41));
  --color-base-300: light-dark(oklch(77.45% 0.114 249.86), oklch(48.18% 0.111 244.33));
  --color-base-400: light-dark(oklch(70.32% 0.16 244.87), oklch(55.83% 0.128 244.06));
  --color-base-500: light-dark(oklch(62.7% 0.145 244.47), oklch(62.7% 0.145 244.47));
  --color-base-600: light-dark(oklch(55.83% 0.128 244.06), oklch(70.32% 0.16 244.87));
  --color-base-700: light-dark(oklch(48.18% 0.111 244.33), oklch(77.45% 0.114 249.86));
  --color-base-800: light-dark(oklch(36.92% 0.085 244.41), oklch(85.31% 0.071 253.79));
  --color-base-900: light-dark(oklch(24.77% 0.059 245.48), oklch(92.24% 0.036...