APP-304: Add semantic design variables

[wgardiner]

Description

This PR adds custom Tailwind variables based on our new design system.

Each client has a tailwind.css (tailwind.css for Regen, and Terrasos.tailwind.css for Terrasos), which defines all the CSS variables, tailwind.common.js then references them and exposes them for useage in Tailwind generated class names. This allows for the same variable to be defined per client, and the appropriate version referenced in based on the active client.

Closes: APP-304

---

Author Checklist

All items are required. Please add a note to the item if the item is not applicable and
please add links to any relevant follow up issues.

I have...

• provided a link to the relevant issue or specification
• provided instructions on how to test
• reviewed "Files changed" and left comments if necessary
• confirmed all CI checks have passed

How to test

1. Review Extend Colors in Storybook

Reviewers Checklist

All items are required. Please add a note if the item is not applicable and please add
your handle next to the items reviewed if you only reviewed selected items.

I have...

• confirmed all author checklist items have been addressed
• reviewed code correctness and readability
• verified React components follow DRY principles
• reviewed documentation is accurate
• reviewed tests
• manually tested (if applicable)

[netlify]

✅ Deploy Preview for regen-website ready!

Name	Link
🔨 Latest commit	fc36eeb
🔍 Latest deploy log	https://app.netlify.com/sites/regen-website/deploys/670d2e5e21047200092e4eef
😎 Deploy Preview	https://deploy-preview-2499--regen-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[wgardiner]

The variables were generated by using the Design Tokens plugin for Figma. I also evaluated Token Studio. I found some issues with consistency in references and wrote a script to preprocess the output then run it through a custom Style Dictionary script. There was some manual work to map the generated CSS variables and structure to the app and Tailwind, but ideally we'd have a workflow that automates this process so that we can easily keep design and our app in sync. In the future we might consider having a source of truth that both Figma and our app read from, rather than having to export from Figma.

[wgardiner]

I prefixed base colors, alias colors, and semantics with bc, ac and s respectively, just to prevent collisions during initial implementation, but we can easily update these based on feedback.

[flagrede]

Nice work!

Should we commit the script that you used to build the CSS variables from the Figma export ?
Also I saw that MUI is not updated here, is this going to be handled in a follow-up PR?

[wgardiner]

I worked with Erika last week to get updated colors for Terrasos.muiTheme.js and Terrasos.tailwind.css. I also fixed and added scripts for generating theme file content from design tokens.

@flagrede are we already generating a storybook preview with the client .env variables set for Terrasos?

[flagrede]

@wgardiner I don't think so no.

[flagrede]

Looks good, nice work on this PR!