color_variables.css:
[data-theme='default'] {
--avatar_bg: #000;
--avatar_text: #fff;
--avatar_border: red;
--button_bg: blue;
--button_text: #fff;
--button_border: darkblue;
--modal_widget_bg: orange;
--footer_bg: yellow;
--footer_text: #000;
}
avatar.css:
.avatar {
background-color: var(--avatar_bg);
color: var(--avatar_text);
border: 1px solid var(--avatar_border);
}
button.css:
.button {
background-color: var(--button_bg);
color: var(--button_text);
border: 1px solid var(--button_border);
}
I've implemented a centralized color_variables.css file for all components such as avatar, button, footer, tab, and more. For instance, if a page only displays the avatar component, it will load the avatar.js and avatar.module.css files, excluding unnecessary components.
My query pertains to extracting specific variables from the color_variables.css file. In the scenario where only the avatar component is being rendered on a page, I aim to retrieve the values of --avatar_bg, --avatar_text, and --avatar_border without including irrelevant variables like those related to buttons. Is there a method to selectively obtain required color variables without segmenting the global variable file?