search

mikaelvesavuori / figmagic

Figmagic is the missing piece between DevOps and design: Generate design tokens, export graphics, and extract design token-driven React components from your Figma documents.
https://docs.figmagic.com
MIT License
807 stars 71 forks source link

Transparency on color tokens #198

Closed pedrorodrigopro closed 6 months ago

pedrorodrigopro commented 6 months ago

Hi! I'm struggling to get my whole set of color tokens because some of them use transparency. Figma API handles colors in rgba format, where "a" stands for two-digit decimal alpha code. Issue is Figmagic fetches only the "rgb" part and builds up a hex color with it.

With 8digits hex parsing we'd get transparency digits into hex code and this way support transparent colors. Besides it's widely supported by browsers (https://caniuse.com/css-rrggbbaa).

Thank you!

mikaelvesavuori commented 6 months ago

Hi @pedrorodrigopro!

Not sure I follow what the real problem is... Color values are by default returned as RGB(A) values using the rgba() (legacy) syntax; see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb.

EDIT: Hex color support is so old I forgot that Figmagic even has it! :) But, yeah, it's still opt-in: https://github.com/mikaelvesavuori/figmagic?tab=readme-ov-file#colors

I don't see a great use-case for transitioning to only hex colors or really updating them as RGBA is the better option.

Anyway, in closing, the transparency should already be available to you with RGBA.

mgolawski commented 6 months ago

I think the real issue is that figmagic allows us to set outputFormatColors as hex, but do not parse rgba values with alphas defined as 8 digits hex values. We loose that information for hex format

mikaelvesavuori commented 6 months ago

This is now added in https://github.com/mikaelvesavuori/figmagic/releases/tag/v4.5.13

mgolawski commented 6 months ago

Awesome, thank you for fast resolution 👏