Use Tailwind CSS theme variables for color schemes (#3559743) · Issues · project / mercury

Use Tailwind CSS theme variables for color schemes

>>> [!note] Migrated issue   Reported by: [balintbrews](https://www.drupal.org/user/613760) Related to !143 >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> The color schemes are currently set up using the <a href="https://nerdy.dev/custom-prop-categories#3.-adaptive-props">adaptive props pattern</a>, which is neat, because all the work is done in <code>src/schemes.css</code>, and all the individual components need to do is reference CSS variables that are consistent across all color schemes. For example, let's take this simplified version of <code>src/schemes.css</code>: <pre>.mercury-scheme--vanilla-light {   --hg-color-body-bg: var(--hg-color-white);   --hg-color-body-text: var(--hg-color-black); } .mercury-scheme--vanilla-dark {   --hg-color-body-bg: var(--hg-color-black);   --hg-color-body-text: var(--hg-color-white); } .mercury-scheme--byte-light {   --hg-color-body-bg: #ffffff;   --hg-color-body-text: #1f2937; } .mercury-scheme--byte-dark {   --hg-color-body-bg: #1d283d;   --hg-color-body-text: var(--hg-color-white); }</pre>Components that want to use the defined background and text colors can do the following, and thanks to the color scheme's class applied on the <code><html></code> tag, the right values will be used: <pre>.selector {   background-color: var(--hg-color-body-bg);   color: var(--hg-color-body-text); }</pre>This is vanilla CSS, whereas Mercury uses Tailwind CSS for its styling. We should stay consistent to that decision, and allow developers to use unified tooling. <h3 id="summary-proposed-resolution">Proposed resolution</h3> We could achieve the same styling as the CSS snippet above by applying the following utility classes using <a href="https://tailwindcss.com/docs/adding-custom-styles#arbitrary-properties">Tailwind's custom property syntax for arbitrary values</a>: <code>bg-(--hg-color-body-bg) text-(--hg-color-body-text)</code>. However, this technique is designed for one-off styling. What we should do instead is <a href="https://tailwindcss.com/docs/theme#referencing-other-variables">defining Tailwind CSS theme variables</a> referencing the custom CSS variables from <code>src/schemes.css</code>. Here is how we can do that: Given the simplified <code>src/schemes.css</code> above, we can define: <pre>@theme inline {   --color-body-bg: var(--hg-color-body-bg);   --color-body-text: var(--hg-color-body-text); }</pre>This generates the following utility classes: <pre>bg-body-bg text-body-text</pre><code>src/main.css</code> already uses the <code>@theme</code> directive, so that part should be familiar. We can extend the available colors and other tokens known to Tailwind to generate styling, and using the inline keyword makes it possible to reference other CSS variables. See <a href="https://tailwindcss.com/docs/theme">Tailwind's documentation on theme variables</a>. You can also use my <code>canvas-cc-starter</code> kit's CSS as an example where I use this technique to set up a light and a dark color scheme: <a href="https://github.com/balintbrews/canvas-cc-starter/blob/main/src/components/global.css">https://github.com/balintbrews/canvas-cc-starter/blob/main/src/components/global.css</a>. This is the same technique as <code>shadcn/ui</code> uses for themes: <a href="https://ui.shadcn.com/themes">https://ui.shadcn.com/themes</a>. <h3 id="summary-remaining-tasks">Remaining tasks</h3> <ol> <li>I think we should start by making the color schemes fully consistent. As I was writing my examples, I noticed, e.g., that <code>--hgc-menu-link-color</code> and <code>--hgc-menu-link-color-hover</code> are missing from Vanilla Dark, and Byte Dark defines them twice. Maybe there are other issues, so we should review. The goal would be to have the exact same set of variables for each color scheme.</li> <li>The naming could be improved. For example, the word color is sometimes used as a prefix, sometimes as a suffix, and other times it's not included in the names. I also don't understand when to use <code>hgc</code> vs. <code>hg</code> as the prefixes.</li> <li>Once we have four consistent sets of carefully named variables, we can easily introduce them to Tailwind CSS the way I suggested above.</li> <li>All individual components need to be updated to use the new utility classes.</li> </ol> <h3 id="summary-ui-changes">User interface changes</h3> n/a <h3 id="summary-api-changes">API changes</h3> SDC authors can use Tailwind CSS for their entire styling.

issue