Question 190836 in CSS Question posted in
Some basic documentation can be found here.

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

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?

Tags:

2

Answers


  1. 0

    assuming colorNeutralBackground2 is a string you can try this:

    export const useStyles = makeStyles({
  backgroundColor: `rgba(${tokens.colorNeutralBackground2}, 0.5)`,
});
    Login or Signup to reply.
  2. 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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search