Radix Color Scale Mapper

theme.ts

import { createCss } from '@stitches/react';
import { mint } from '@radix-ui/colors';

type ScaleNum = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
type ScaleKey<Name extends string> = `${Name}${ScaleNum}`;
type ColorScale<Name extends string> = { [K in ScaleKey<Name>]: string };

function mapColorScale<FromName extends string, ToName extends string>(
  fromScale: ColorScale<FromName>,
  fromName: FromName,
  toName: ToName
): ColorScale<ToName> {
  const scale: Record<string, string> = {};
  for (let i = 1; i <= 12; i++) {
    scale[`${toName}${i}`] = fromScale[`${fromName}${i}` as ScaleKey<FromName>];
  }
  return scale as ColorScale<ToName>;
}

export const { styled, css, global, keyframes, getCssString, theme } =
  createCss({
    theme: {
      colors: {
        ...mapColorScale(mint, 'mint', 'brand')
      }
    }
  })