Ant Design 5: Issues with Referencing Custom Colors from stylex Configuration

[ebitogu]

I'm utilizing Ant Design 5 as the design system for my application while also incorporating custom styles using stylex. To centralize my color definitions, I've established the following variables in my globalTokens.stylex file:

export const colors = stylex.defineVars({
    primaryColor: "#1F62FF",
    // ... other color definitions ...
    modalBgColorMask: "#000000c0"
});

Ant Design 5 requires me to configure primary colors within its own configuration flow. To avoid redundancy and repetition, I'm attempting to reference the values from globalTokens.colors in the Ant Design 5 configuration, as illustrated below:

<ConfigProvider
    theme={{
        token: {
            colorPrimary: colors.primaryColor,
            fontFamily: fonts.appFont,
            colorBgContainer: colors.background
        },
    }}
/>

However, despite this approach, the colorPrimary consistently resolves to black on all Ant Design 5 buttons. It appears that the call to colors.primaryColor within Ant Design 5 is unresolvable. How can I successfully retrieve the value of primaryColor from the defined vars in globalTokens to ensure Ant Design 5 recognizes and utilizes it properly?

[necolas]

StyleX is a build-time solution, so the values specified in defineVars are compiled away. You cannot use the return value of defineVars in runtime code like a config provider used by a component library.

[ebitogu]

StyleX is a build-time solution, so the values specified in defineVars are compiled away. You cannot use the return value of defineVars in runtime code like a config provider used by a component library.

@necolas Thank you for your response but I don't think your answer is entirely true, because colors.modalBgColorMask is reflecting on my modals when applied on the config provider. So, it's weird that primary color is not reflecting

[nmn]

@ebitogu If you're seeing some colors, but not others that is likely an issue with the build set up. Would need more information about your set up to help. The bundler and plugin being used. The way the variables are being used within stylex.create. etc.

[shawngustaw]

This is kind of hacky but we have some client side only JS components that don't support styling via CSS, so the way I've got around this is something like this:

const regex = /var\((--[a-zA-Z0-9-]+)\)/;
export const getColor = (cssVar: string) => {
  const match = cssVar.match(regex);

  if (!match || !match[1]) {
    return '#000000';
  }

  return getComputedStyle(document.documentElement).getPropertyValue(match[1]);
};

getColor(colors.background);

Keep in mind this won't work for components rendered on the server.