Question about possible theming using aliases
clepore opened this issue · comments
I am trying to figure out a good way to organize the tokens for a possible easy theming solution. My goal was to try to do the following:
With this hierarchy example:
project/
aliases/
color-palette.yml
theme-one-colors.yml
theme-two-colors.yml
theme-one.yml
theme-two.yml
I have an "all available colors" palette.
./aliases/color-palette.yml
---
aliases:
PALETTE_GREEN: "#80ce4d"
PALETTE_ORANGE: "#ff9426"
PALETTE_RED: "#e84f4f"
PALETTE_YELLOW: "#ffd726"
...
Then I have one theme using a few of those colors,
./aliases/theme-one-colors.yml
---
imports:
- "./color-palette.yml"
aliases:
COLOR_DEFAULT: "{!PALETTE_GREEN}"
COLOR_PRIMARY: "{!PALETTE_YELLOW}"
...
and a second theme using different colors.
./aliases/theme-two-colors.yml
---
imports:
- "./color-palette.yml"
aliases:
COLOR_DEFAULT: "{!PALETTE_RED}"
COLOR_PRIMARY: "{!PALETTE_ORANGE}"
...
I want to link to the same set of components, but import a different alias file to set their color values:
./theme-one.yml
---
imports:
- "./aliases/theme-one.yml"
- "./components/background-color.yml"
- "./components/font-color.yml"
- "./components/text-color.yml"
...
./theme-two.yml
---
imports:
- "./aliases/theme-two.yml"
- "./components/background-color.yml"
- "./components/font-color.yml"
- "./components/text-color.yml"
...
My goal is to keep the same list of tokens, but create themes simply by switching the imported alias file. Currently aliases are included on an individual file basis, but I'm trying to avoid maintaining separate sets of component/files with the same content and only a different import alias value.
Do you have any thoughts or suggestions?
To piggy back on this, I guess I was looking for more SASS-like compiling where all of your imports are in one file and the variables cascade down into the files, versus a direct "file to dependency".
I'm going to close this issue as it's not how Theo was built/designed to work.
If anyone following this issue is looking for something a little more cascading (as described above), I am now using https://github.com/amzn/style-dictionary.
Cheers!