Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Not transforming nested levels if parent level contains values #797

Open
marius-eichenberg opened this issue Mar 20, 2022 · 1 comment
Open

Comments

@marius-eichenberg
Copy link

Hi,
I'm having issues to get lower levels, e.g. of a color parsed and transformed.
I couldn't find any doc of a configuration to switch this behaviour on/off.

Here is an example: There is parent purple color value (+ a light and dark subcolor). For comparison, blue does not have a color on parent level, but only light and dark subcolors.

tokens.json

{
  "color": {
    "purple": {
      "type": "color",
      "value": "#8b00b8ff",
      
      "light": {
        "type": "color",
        "value": "#ecd6f4ff"
      },
      "dark": {
        "type": "color",
        "value": "#75009bff"
      }
    },

    "blue": {
      "light": {
        "type": "color",
        "value": "#e2f6fdff"
      },
      "dark": {
        "type": "color",
        "value": "#23a096ff"
      }
    }
  }
}

My export is the following:
color.scss

$color-purple: #8b00b8;
$color-blue-light: #e2f6fd;
$color-blue-dark: #23a096;

Purple as parent color is exported, but not the subcolors. Whereas, blue has the subcolors (as there was no parent color present).

Expected bahavior from my end would be to have purple parent color and purple subcolors.

I was using style dictionary via CLI version 3.7.0
The tokens.json is originally a figma export (https://github.com/lukasoppermann/design-tokens) but I don't expect the .json file to be the issue as even the super simplified example version doesn't produce expected results.

For completeness, config was super simple:

{
  "source": ["tokens/**/*.json"],
  "platforms": {
    "scss-separate-files": {
      "transformGroup": "scss",
      "buildPath": "./",
      "files": [{
        "destination": "color.scss",
        "format": "scss/variables"
      }]
    }
  }
}

Any help how to circumvent or configure properly this would be appreciated.
Thanks a lot :)

@JodiWarren
Copy link

@marius-eichenberg I found a solution here: #716 (comment)

wmfgerrit pushed a commit to wikimedia/design-codex that referenced this issue Jun 3, 2024
In the option tokens (wikimedia-ui.json), font-family.sans is an object
containing several tokens. But in the decision tokens
(application.json), font-family.sans is a single token. When these two
are merged together, it triggers a bug in Style Dictionary where keys
that have both a value and subkeys are not handled correctly, see
amzn/style-dictionary#797 .

To work around this bug, un-nest the font-family.sans object, renaming
the nested tokens from font-family-sans.NNN to font-family.sans-NNN. Do
the same with font-family.serif and font-family.monospace.

Change-Id: I1de831d97a3733fa30b30f69c3b85ccee21a856b
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants