🧪 [Spike] Theming “support” in HDS and Showcase - Designers' playground

[didoo]

🚨 DO NOT MERGE 🚨

📌 Summary

Branch used as playground for the HDS designers so they can play with the design tokens for the HDS Components and the themed variables for the Showcase app.

🧑‍💻 What can be tested/experimented

• You can change the values of the package/tokens/src/ JSON files, to match the values in Figma, and see them applied to the HDS components in the showcase
  • in particular, have a look at the packages/tokens/src/global/themed/[light|dark]/color/*.json files, which contain the low-level tokens, then aliased to semantic and component-level tokens
• You can change the values of the themed colors used in the showcase, to see how they should work in conjunction with the themed HDS components
  • in particular, have a look at the showcase/app/styles/showcase-theming/[light|dark].scss files, where you can find the few color tokens used in the showcase (they're declared in a Sass mixin)

🚧 How to run the code locally

To make the changes to the HDS source tokens and see them reflected in the showcase pages, you need three active CLI tabs:

Initial setup

In a CLI:

cd [path/to/local/repo]
yarn install

First tab → compilation of the source tokens

In a CLI:

cd packages/tokens
yarn build:watch

this will automatically compile the design tokens from the src folder to the dist folder, whenever a JSON file in src is changed.

Second tab → compilation of the HDS components CSS file

In a CLI:

cd packages/components
yarn build:watch

this will automatically re-generate the CSS for the components, consumed in the showcase app

Third tab → compilation of the showcase

In a CLI:

cd showcase
yarn start

this will automatically re-compile the showcase app, with the new design tokens, and automatically refresh the open window (at http://localhost:4200 if you're using the standard port, otherwise you can use the --port argument in the command, and this will use the specified port).

🔗 External links

Jira tickets:

• Epic: https://hashicorp.atlassian.net/browse/HDS-3595
• Task n. 1: https://hashicorp.atlassian.net/browse/HDS-4232
• Task n. 2: https://hashicorp.atlassian.net/browse/HDS-4234

[vercel]

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

Name	Status	Preview	Updated (UTC)
hds-showcase	❌ Failed (Inspect)		Dec 20, 2024 4:23pm
hds-website	❌ Failed (Inspect)		Dec 20, 2024 4:23pm