salesforce-ux / theo

Theo is a an abstraction for transforming and formatting Design Tokens

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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!