Hex color

[rexkenley]

Console
Primary : ___1vvfegh_0000000 f16muhyy

How do I get the hex color code?

[layershifter]

TL;DR https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

FYI That's not related to Griffel as it's just emits CSS and provides classes to apply.

On Fluent side, it's expected to always use CSS variables i.e. tokens.SMTH.

[rexkenley]

Is there a way to get the hex color without the need of an element?

I originally put the theme in a context object to get the hex value. That theme is the same one that I provide to the FluentProvider. I was hoping to be able to get the hex value through child inheritance instead.

I need the hex value because I am using a mui component.
https://mui.com/material-ui/customization/theming/#themeprovider

[layershifter]

Not sure that I follow, do you mind to create an example on Stackblitz?

[rexkenley]

Here you go.
https://stackblitz.com/edit/jzxava-vz54gd

If you look at the console, the webLightTheme.colorBrandForeground1 returns #0f6cbd, which is what I need.

So in essence, how do I go from tokens.colorBrandForeground1 to the #0f6cbd value? I am supposed to be able to get that value somehow since the FluentProvider is the parent element, right?

[layershifter]

The proper solution would be to require something like BridgeProvider (example https://stackblitz.com/edit/jzxava-j8xopl) or create a custom React context and pass down theme through it.

We intentionally removed all ways to access exact values to ensure that they are never referenced in styles and won't break theming (#21257).

---

Technically, you can still do .getComputedStyle(), but it's fragile as it won't react on theme changes, https://stackblitz.com/edit/jzxava-wzh5gr.

[rexkenley]

Thanks @layershifter