🧪 [Spike] Get theming “support” in the Showcase app - First scrappy iteration

[didoo]

🚨 DO NOT MERGE 🚨

📌 Summary

Branch used for exploring what needs to be done to have "support" for theming in the Showcase app.

• themes toggle/switcher (and logic associated)
• color palette for “dark” theme (shw-color)

In the process, we will use the Showcase app as proxy to a real “consumer” (Product) Ember app, to understand

• what a consumer would need from HDS to use the themes provided by the system (eg. should HDS provide a "toggle" or "switcher" for themes? should provide a service that returns the themes, sets the theme in the hosting app, saves the user preference in a local storage?)
• what format the Sass/CSS should have to be used in a “consumer” app (eg, single file vs split files, prefers-color-scheme vs class-name/data-attribute flag in the body)
  • this will be used in the following task, where we will need to change the tokens pipeline to generate files in output that contain the “information” about theming
• how can we have “nesting” of themes, or forced themes in the HDS components
  • eg. AppHeader, AppSidebar, AppFooter, CodeBlock/CodeEditor, etc

Later, the showcase will be used to test the HDS theming itself.

🔗 External links

Jira tickets:

• Epic: https://hashicorp.atlassian.net/browse/HDS-3595
• Task: https://hashicorp.atlassian.net/browse/HDS-4232
• SubTask: https://hashicorp.atlassian.net/browse/HDS-4268

[vercel]

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

Name	Status	Preview	Updated (UTC)
hds-showcase	✅ Ready (Inspect)	Visit Preview	Dec 5, 2024 11:26am
hds-website	✅ Ready (Inspect)	Visit Preview	Dec 5, 2024 11:26am

[didoo]

The first iteration (this one) is now outdated (we're working in the branch spike-tokens-aggregated-scrappy, so we can close it.

[aklkv]

in .gts files @action can be replaced with an arrow function