converColorsToCSSVars.js

const darkColors = {
  primary: {
    25: '#0B101F',
    50: '#101729',
    75: '#142251',
    100: '#182B6D',
    200: '#1F3581',
    300: '#284092',
    400: '#304CA8',
    500: '#3959C4',
    600: '#456EFF',
    700: '#3A60F0',
    800: '#8CB1FF',
    900: '#D2E1FF',
  },
  slate: {
    25: '#18181A',
    50: '#1B1B1F',
    75: '#27282D',
    100: '#2E3035',
    200: '#35373C',
    300: '#3C3F44',
    400: '#464B50',
    500: '#5A6165',
    600: '#696E77',
    700: '#787F85',
    800: '#ADB1B8',
    900: '#EDEEF0',
  },
  teal: {
    25: '#0D1514',
    50: '#111C1B',
    75: '#0D2D2A',
    100: '#023B37',
    200: '#084843',
    300: '#1C6961',
    400: '#1C6961',
    500: '#207E73',
    600: '#29A383',
    700: '#0EB39E',
    800: '#0BD8B6',
    900: '#ADF0DD',
  },
  amber: {
    25: '#1F1300',
    50: '#251804',
    75: '#30200B',
    100: '#39270F',
    200: '#432E12',
    300: '#533916',
    400: '#6F4D1D',
    500: '#A9762A',
    600: '#A9762A',
    700: '#FFCB47',
    800: '#FFCC4D',
    900: '#FFE7B3',
  },
  ruby: {
    25: '#191113',
    50: '#1E1517',
    75: '#3A141E',
    100: '#4E1325',
    200: '#5E1A2E',
    300: '#6F2539',
    400: '#883447',
    500: '#B3445A',
    600: '#E54666',
    700: '#EC5A72',
    800: '#FF949D',
    900: '#FED2E1',
  },
};


const colors = {
  primary: {
    25: '#FCFDFE',
    50: '#F6F9FF',
    75: '#ECF2FF',
    100: '#DEEAFF',
    200: '#CEDFFF',
    300: '#BAD1FF',
    400: '#A3BEFF',
    500: '#83A4FA',
    600: '#456EFF',
    700: '#395FF1',
    800: '#3558D9',
    900: '#1B2C63',
  },
  slate: {
    25: '#FCFCFD',
    50: '#F9F9FB',
    100: '#F2F2F5',
    200: '#EBEBEF',
    300: '#E4E4E9',
    400: '#DDDDE3',
    500: '#D3D4DB',
    600: '#B9BBC6',
    700: '#8B8D98',
    800: '#7E808A',
    900: '#60646C',
    950: '#1C2024',
  },
  teal: {
    25: '#FAFEFD',
    50: '#F3FBF9',
    100: '#E0F8F3',
    200: '#CCF3EA',
    300: '#B8EAE0',
    400: '#A1DED2',
    500: '#53B9AB',
    600: '#12A594',
    700: '#0D9B8A',
    800: '#008573',
    900: '#0D3D38',
  },
  amber: {
    25: '#FEFDFB',
    50: '#FFF9ED',
    100: '#FFF3D0',
    200: '#FFECB7',
    300: '#FFE0A1',
    400: '#F5D08C',
    500: '#E4BB78',
    600: '#D6A35C',
    700: '#D6A35C',
    800: '#FFBA1A',
    900: '#915930',
    950: '#4F3422',
  },
  ruby: {
    25: '#FFFCFD',
    50: '#FFF7F8',
    75: '#FEEAED',
    100: '#FFDCE1',
    200: '#FFCED6',
    300: '#F8BFC8',
    400: '#EFACB8',
    500: '#E592A3',
    600: '#E54666',
    700: '#DC3B5D',
    800: '#CA244D',
    900: '#64172B',
  },
};

function hex2rgb(hex_color) {
  hex_color = hex_color.replace("#", "")
  let r = parseInt(hex_color.substring(0, 2), 16)
  let g = parseInt(hex_color.substring(2, 4), 16)
  let b = parseInt(hex_color.substring(4, 6), 16);
  return `${r} ${g} ${b}`;
}

function printCSS(colorName, palette) {
  let cssVars = Object.keys(palette).map((shade) => {
    return `--color-${colorName}-${shade}: ${hex2rgb(palette[shade])};`;
  });

  console.log(cssVars.join('\n'));
}

Object.keys(darkColors).forEach((colorName) =>
  printCSS(colorName, darkColors[colorName])
);