Combining base and palette

[perkrlsn]

Hello!

This might already be possible but I can't seem to get it to work. What it'd like to do is something like this.

{
  "color": {
    "black": {
      "value": "#000000",
      "100": { "value": "#1A1A1A" }
    }
  }
}

Which in turn I'd like to end up as (css variable example).

:root {
  --prefix-color-black: #000000;
  --prefix-color-black-100: #1A1A1A;
}

But what ends up happening is sd stripping out all my palette colors and only keeping the root black one e.g.

:root {
  --prefix-color-black: #000000;
}

What am I missing?

Thank you!

[perkrlsn]

Ignore me. I could just be but more verbose and do this.

"black": { "value": "#000000", "type": "color" },
"black-100": { "value": "#1A1A1A", "type": "color" },

[jorenbroekema]

Yeah the reason why SD was stripping out the nested tokens is because the parent one is considered a token already, and cannot simultaneously be a token group with nested tokens inside it. Indeed your workaround works, or:

{
  "color": {
    "black": {
      "_": { "value": "#000000" },
      "100": { "value": "#1A1A1A" }
    }
  }
}

Since special characters like _ are considered separator characters by the various name transforms like name/kebab or name/camel, so even though the path is ['color', 'black', '_'], the name will become colorBlack or color-black

[jorenbroekema]

Holy shit I just realized we can solve: tokens-studio/sd-transforms#128 in Style Dictionary using this trick 🤯