feat: replace hard-coded color values with (hardcoded) CSS variables from site theme

[karrui]

A little complex, see if it makes sense.
the main thing is isomer-components export a tailwind plugin that basically takes in a json object of colors to inject into :root. But only template needs it. The rest will inject css vars with their various implementation.

• for studio, the css variables injected into iframe using chakra
• for component’s storybook, css variable injected with global stylesheet (eventually using theme manager i’d expectd)

TL;DR

Migrated brand colors to CSS variables and introduced a new isomerSiteTheme plugin for (future) dynamic theme injection.

What changed?

• Updated colors.ts to use CSS variables for brand colors.
• Introduced isomerSiteTheme in site-theme.ts to dynamically inject CSS variables.
• Removed the old MOH theme from index.ts and integrated the new isomerSiteTheme plugin.

How to test?

Should have no changes for components that were already using the previously (more) hardcoded tokens.

Why make this change?

This change is motivated by the need for better theme management and dynamic theming capabilities using CSS variables.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
isomer-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 31, 2024 9:44am

[linear]

ISOM-1287 Themed semantic colour tokens

[karrui]

• feat: replace hard-coded color values with (hardcoded) CSS variables from site theme #404 👈
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @karrui and the rest of your teammates on Graphite