Css variables overwrite

[shark0151]

Hi,
I see that a lot of elements use css variables such as --success,--info etc. And looking at Color.Info (or similar), it says that "This color is defined in the variables.css file....". But where is that? I have not seen anything about it in the docs. Looking at the page style, I can see the variables, but it says they are constructed. And I really don't want to use tokens to edit the color of every component that uses success/info/....
I am talking about these:

:root {
    --font-monospace: Consolas, "Courier New", "Liberation Mono", SFMono-Regular, Menlo, Monaco, monospace;
    --success: #0E700E;
    --warning: #E9835E;
    --error: #BC2F32;
    --info: #616161;
    --presence-available: #13a10e;
    --presence-away: #eaa300;
    --presence-busy: #d13438;
    --presence-dnd: #d13438;
    --presence-offline: #adadad;
    --presence-oof: #c239b3;
    --presence-unknown: #d13438;
    --highlight-bg: #fff3cd
    ;}

not the accent, or other computed variables.

[vnbaaij]

It used to be a separate file a long time ago. Now, it is part of the library's script file (Microsoft.FluentUI.AspNetCore.Components.lib.module.js) that gets loaded when Blazor starts.

It is added to the adoptedStylsheets (https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptedStyleSheets)