Problems with Untitled Figma File -> supernova -> untitled react project

[Mightyberg]

Description

I would like to know how i can deal with this mapping use case.

the figma file shows those following variables:

the react project stores all tailwind variables in the theme.css: https://github.com/untitleduico/react/blob/main/styles/theme.css

it shows for example the following:

   /* FONT SIZE */
    --text-xs: calc(var(--spacing) * 3);
    --text-xs--line-height: calc(var(--spacing) * 4.5);

    --text-sm: calc(var(--spacing) * 3.5);
    --text-sm--line-height: calc(var(--spacing) * 5);

    --text-md: calc(var(--spacing) * 4);
    --text-md--line-height: calc(var(--spacing) * 6);

    --text-lg: calc(var(--spacing) * 4.5);
    --text-lg--line-height: calc(var(--spacing) * 7);

    --text-xl: calc(var(--spacing) * 5);
    --text-xl--line-height: calc(var(--spacing) * 7.5);

    --text-display-xs: calc(var(--spacing) * 6);
    --text-display-xs--line-height: calc(var(--spacing) * 8);

    --text-display-sm: calc(var(--spacing) * 7.5);
    --text-display-sm--line-height: calc(var(--spacing) * 9.5);

    --text-display-md: calc(var(--spacing) * 9);
    --text-display-md--line-height: calc(var(--spacing) * 11);
    --text-display-md--letter-spacing: -0.72px;

and supernova has a tailwind 4 css exporter this grabs the variables of the figma file and can send a PR in case i change something on Figma throuth an automatic pipeline.

but here the problem starts.

the exporter of supernova shows this:

/* Dimension */
  --spacing-0-0px: 0px;
  --spacing-0-5-2px: 2px;
  --spacing-1-4px: 4px;
  --spacing-1-5-6px: 6px;
  --spacing-2-8px: 8px;
  --spacing-3-12px: 12px;
  --spacing-4-16px: 16px;
  --spacing-5-20px: 20px;
  --spacing-6-24px: 24px;
  --spacing-8-32px: 32px;
  --spacing-10-40px: 40px;
  --spacing-12-48px: 48px;
  --spacing-16-64px: 64px;
  --spacing-20-80px: 80px;
  --spacing-24-96px: 96px;
  --spacing-32-128px: 128px;
  etc.

Supernova doesnt understand the problem. I am facing to map the variables to have a propper workflow.

do I really to map everything manually? Does anyone have a good solution or another method to achive that?

Additional context

No response

[deebov]

Hey @Mightyberg, you don't have to map the spacing variables with Tailwind in Untitled UI.

[theChaosCoder]

It's not only the spacing variables but all the other token variables like color, line-height, ... as well. The goal is to change the color, styling of some components, etc. in the Figma file and then export the changes (via supernova) to a new tailwind compatible css file.

We feel like we're overlooking something obvious.