Dynamically Injecting Color Palette

[scruz-dev-blossom]

Hi. I'm looking for a way to dynamically inject additional color configurations. Specifically, I need to incorporate a color palette received as JSON from my backend after the library's initial setup.

Essentially, I receive a JSON payload containing color definitions, and I want to extend the color palette with these values on the fly. Is there a direct method or a recommended approach to achieve this?

This is the backend data

{
  "name": "primaryColor",
  "colors": {
    "50": "#F8F0FB",
    "100": "#E8DBF2",
    "200": "#C5A3E0",
    "300": "#A26BCF",
    "400": "#7F33BD",
    "500": "#7F33BD",
    "600": "#6A4C93",
    "700": "#4B3366",
    "800": "#2C1A38",
    "900": "#0D010B",
  }
}

I've already attempted using a JavaScript Proxy to intercept and modify the configuration object, but I'm wondering if there's a cleaner, more supported way to handle this. Any insights or suggestions would be greatly appreciated!

/* src/utils/tailwind.ts */
const currentConfig = require('../../tailwind.config.js');
let tw2 = create(currentConfig);

const addTwColor = (name: string, colors: object): boolean => {
  const mergedConfig = {
    ...currentConfig,
    theme: {
      ...currentConfig.theme,
      extend: {
        ...currentConfig.theme.extend,
        colors: {
          ...currentConfig.theme.extend.colors,
          [name]: colors,
        },
      },
    },
  };
  tw2 = create(mergedConfig);
  return true;
};

const twProxy = new Proxy(tw2 {
  apply(_, thisArg, args) {
    return Reflect.apply(tw2, thisArg, args);
  },
  get(_, prop) {
    return Reflect.get(tw2, prop);
  },
});

export {twProxy as tw, addTwColor};

And then call addTwColor when i got the backend response and use the tw

import {addTwColor, tw} from '@utils/tailwind';

addTwColor(response.name, response.colors);

tw.style('bg-primaryColor-400')

Thank you!