Pricing Blog

Color Variable Import – Best Practice?

  • obvijes-1395033333905489960

    Obvijes

    3 months ago

    Is there a fast and simple way to import color variables into Nordcraft?

    I have my color variables set up in Figma, using a custom set of Radix color scales, which are also linked to further aliases (like background-primary-default, etc., for theming and dark mode). How can I replicate this structure in Nordcraft?

    From what I see, Nordcraft only allows a single theme file. Also, I’d prefer to avoid manually entering 200 variables.

    What’s the best practice here?
  • lucasg-1395440552522154065

    Lucas G

    3 months ago

    Unfortunately, there isn't a way to import these things at the moment. Theme styles updates are on the roadmap but likely won't be happening soon
  • lucasg-1395440968655831154

    Lucas G

    3 months ago

    I haven't looked into doing it via the project's json (branch download), it might be possible there but not via the editor.
  • obvijes-1395461878469103717

    Obvijes

    3 months ago

    Thanks, that’s more or less what I expected. In the meantime, I manually imported the variables as CSS in a style tag, and they’re working surprisingly well (though without autocomplete) – but only within the main component and its slot children.

    When I try to edit or create additional components inside this main component, the variable styles aren’t inherited within the subcomponents. I tried handling this via context, but it feels quite inelegant to repeatedly inject the same formula and context code into every subcomponent just to get access to the same variables.

    Is there a cleaner solution to add global CSS rules or make variable inheritance work across nested components?
  • lucasg-1395463182700646501

    Lucas G

    3 months ago

    I believe you can add it at page level and it should work, I've heard of others importing utility classes that way. You could also add them as headers