Make all inverted dark-mode CSS variables available within Storybook
Within GitLab, a bunch of variables are defined in dark mode with inverted values, e.g.
$white: $gray-50;
--white: #{$white};
This allows components to be themed in dark mode. However when running in Storybook, most of these variables are unavailable.
This means that our Storybook environment is different to our application environment, which can cause issues and means using CSS variables requires extra setup each time.
Proposal
We can use the CSS variables generated from design tokens within the Storybook preview frame. This will mean all CSS variables are available for use of component.
It also means these generated tokens are the SSOT and can be consumed within GitLab in the future so the environments will always match.
Edited by Elwyn Benson