It seems that all components in Design system, like button, fab have a default background color to blue:
--calcite-ui-background #F8F8F8
How can we overwrite the default theme to change the background color to transparent?
For example to change the background color of this fab
<calcite-dropdown width="m" scale="l" label="Info Widgets" id="info_widgets">
<calcite-fab slot="trigger" scale="l" icon="information" id="info" appearance="solid">
</calcite-fab>
-----
----- by using this that I saw in another posting as a solution but didn't work.
(async () => {
await customElements.whenDefined("calcite-dropdown");
await document.querySelectorAll("calcite-fab").forEach((node) => {
node.style.setProperty("background-color", "rgb(0, 128, 0)");
});
})();