How do I add an opacity to the background color css attribute using a fluent ui color?

Question

So I am trying to add an opacity to a background color but the specific background color I am using is coming from the fluent UI library, thus using Design Tokens.

I know normally, I can add opacity to a background color like this

background-color: "rgba(255, 255, 255, 0.5)"

But in my application the background color is set as follows

import tokens from "fluent ui library here"

export const useStyles = makeStyles({
backgroundColor: tokens.colorNeutralBackground2
)}

Does anyone know how I can add opacity to this attribute while using the design token?

when I console log tokens.colorNeutralBackground2, it logs this: var(--colorNeutralBackground2) — HackerMan33453, Jun 20 '23 at 23:00
What is import tokens from "fluent ui library here" ? Can you provide regular path ? — Marko Savic, Jun 22 '23 at 08:05

score 0 · Answer 1 · answered Jun 20 '23 at 21:32

0

assuming colorNeutralBackground2 is a string you can try this:

export const useStyles = makeStyles({
  backgroundColor: `rgba(${tokens.colorNeutralBackground2}, 0.5)`,
});

answered Jun 20 '23 at 21:32

Kruzt

51
1
6

hmm I already tried that, and didn't do anything. Also looks like the colorNeutralBackground2 is type "any" – HackerMan33453 Jun 20 '23 at 22:13

score 0 · Answer 2 · answered Jun 21 '23 at 01:08

0

I don't know does it works, but how about using

export const useStyles = makeStyles({
  backgroundColor: `${tokens.colorNeutralBackground2}${percent}`
});

like : #000000/00 <- transparent #000000/90 <-opacity 0.9

answered Jun 21 '23 at 01:08

Humanoid Mk.12

160
7

How do I add an opacity to the background color css attribute using a fluent ui color?

2 Answers2