amzn / style-dictionary

A build system for creating cross-platform styles.
https://styledictionary.com
Apache License 2.0
3.93k stars 557 forks source link

Problems with tokens value -color-text #898

Open istenrom opened 1 year ago

istenrom commented 1 year ago

Hi,

we have a lot of tokens starting with this structure in Figma tokens.

"color": { "text": { "badge": {

"color": { "text": { "button": {

etc.

when we export all .json the scss variable doesn't show the tokens and only shows this token

--bv-color-text: [object Object];

any ideas?

we have a the same structure for other tokens like this .json but the only problem is with the "text"

{
  "color": {
    "background": {
      "badge": {
        "active": {
          "value": "{color.info.500}",
          "type": "color"
        },
        "passive": {
          "value": "{color.passive.500}",
          "type": "color"
        },
        "pending": {
          "value": "{color.warning.500}",
          "type": "color"
        },
        "completed": {
          "value": "{color.success.500}",
          "type": "color"
        },
        "rejected": {
          "value": "{color.destructive.500}",
          "type": "color"
        }
      }
    },
    "text": {
      "badge": {
        "active": {
          "value": "{color.info.contrast}",
          "type": "color"
        },
        "passive": {
          "value": "{color.passive.contrast}",
          "type": "color"
        },
        "completed": {
          "value": "{color.success.contrast}",
          "type": "color"
        },
        "pending": {
          "value": "{color.warning.contrast}",
          "type": "color"
        },
        "rejected": {
          "value": "{color.destructive.contrast}",
          "type": "color"
        }
      }
    },
    "border": {
      "badge": {
        "active": {
          "value": "{color.surface.transparent}",
          "type": "color"
        },
        "passive": {
          "value": "{color.surface.transparent}",
          "type": "color"
        },
        "completed": {
          "value": "{color.surface.transparent}",
          "type": "color"
        },
        "pending": {
          "value": "{color.surface.transparent}",
          "type": "color"
        },
        "rejected": {
          "value": "{color.surface.transparent}",
          "type": "color"
        }
      }
    }
  },
  "size": {
    "space": {
      "bagde": {
        "horizontal": {
          "value": "{size.space.2xs}",
          "type": "spacing"
        },
        "vertical": {
          "value": "{size.space.none}",
          "type": "spacing"
        }
      }
    },
    "border-radius": {
      "badge": {
        "value": "{size.border-radius.tag}",
        "type": "borderRadius"
      }
    },
    "border-width": {
      "badge": {
        "value": "{size.border-width.none}",
        "type": "borderWidth"
      }
    }
  }
}

figma tokens

SarahFieldingSmith commented 1 year ago

We had a similar problem (with the background variable) and it turned out to be due to another file generating a token with the same name. The transformer is used to namespace them but in this case it seemed to just not add the token. It may be a similar issue?