Assign figma variables to default antora styles + theme switcher + new fonts #2
Conversation
| ]), | ||
| postcssVar({ preserve: preview }), | ||
| // NOTE because css vars are our theme switching mechanism we must preserve them with preserve: true | ||
| postcssVar({ preserve: true }), |
There was a problem hiding this comment.
The result of this is I think about 150 extra lines of css, nothing major. By preserving the css vars it leaves them as is instead of trying to resolve the values into plain css
There was a problem hiding this comment.
I created these classes for some utility later on. When we start styling the app more we can quickly use one of these classes to get the right font size and weight. The Figma files will be using these names and styles for all the text
There was a problem hiding this comment.
I took a quick stab at mimicking the code block component styles from Astra-UI. We use Prism there so these highlightjs styles won't match exactly. We can tune it more later once we have actual vector docs in place
There was a problem hiding this comment.
I re-mapped all the default css variables from antora with an appropriate new variable. For the default UI this gets dark mode working pretty well. We will probably replace/remove a lot these soon but it was easy enough to start using our new tokens
| </div> | ||
| <div class="navbar-item"> | ||
| <span class="control"> | ||
| <button class="button is-primary" id="theme-toggle"></button> |
There was a problem hiding this comment.
This is a placeholder button until we get our new nav structure in place, I just wanted to test the toggle mechanism
|
|
||
| var storedTheme = | ||
| localStorage.getItem('theme') || | ||
| (window.matchMedia('(prefers-color-scheme: dark)').matches |
There was a problem hiding this comment.
One problem I'm still looking into is the "flicker" that happens when your system/browser prefers dark mode. Light mode is the :root css default so the page flashes white initially before the JS code sees that it should be dark and switches
Figma Variables as CSS Variables
I exported our design tokens from Figma into CSS variables we can use for this project into
ds-tokens.css.In order for dark mode to work properly we need to use these global tokens everywhere we style a color.
Global tokens Figma
Open Question: Do we like the
ds-prefix for our CSS variables?I added this to make it clear they are custom variables for datastax, and to avoid potential collisions with existing classes.
I went ahead and replaced/reassigned the existing default antora css variables (
vars.css) with the appropriate global token. This way the UI keeps it's original class names and we are simply applying different colors.Theme Switcher
By using the
html[data-theme]attribute with the new css variables we can change the theme with a little js code. I've added a new script07-theme-toggle.jsalong with a new button in the top nav.Dark mode! ✨
New Fonts
Roboto Flexis now the default font applied to most text.I've also added the
Material Icons Outlinedand a bit of css so we can use Material Icons.To use them we can add the textual icon name into an element (ligatures) with a specific class name
Reference
Typography Helper Classes
I also added some helper classes in
ds-typography.cssso we can quickly use our typography specs