Parsing Alias Error

[dim882]

I have some tokens exported from Figma using TokensBrücke that look like this:

 "typography": {
    "font": {
      "letter-spacing": {...},
      "font": {...}
},
"Typography": {
    "menu": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{typography.font.family.sans}",
        "fontWeight": 500,
        "fontSize": "{typography.font.size.sm}",
        "lineHeight": "{typography.font.line-height.xs}",
        "letterSpacing": "{typography.font.letter-spacing.xl}",
        "paragraphSpacing": "0",
        "paragraphIndent": "0",
        "textDecoration": "NONE",
        "textCase": "UPPER"
      },
      "$description": "",
      "$extensions": {
        "styleId": "S:56e40b117ae87568244e1bb5ab0a5d2d2d067d6d,"
      }
  }

When I run the CLI build I get this error:

✗  [parser:alias] Invalid alias: expected $type: fontFamily, received $type: string.

/Users/danimal/dev/self/imal.name/src/data/tokens.dtcg.json:890:23

  888 |       "$type": "typography",
  889 |       "$value": {
> 890 |         "fontFamily": "{typography.font.family.sans}",
      |                       ^
  891 |         "fontWeight": 500,
  892 |         "fontSize": "{typography.font.size.sm}",
  893 |         "lineHeight": "{typography.font.line-height.xs}",

Shouldn't terrazzo be able to parse that alias? Am I missing something about how to format the tokens? I don't see anything in the docs about aliases, but they are part of the DTCG spec, so I assume it should be able to work?

[drwpow-figma]

Could you post the full original JSON for typography? It’s not a parsing error; it’s telling you that it thinks typography.font.family.sans doesn’t have $type: "fontFamily". Could be a bug, but would have to see the full JSON to tell

[dim882]

Thanks @drwpow-figma for the quick response! That's the issue. typography.font.family.sans has $type: "string. Looks like I have to dig into TokensBruecke to see if it can export them correctly. Here's the full JSON anyway.

{
  "typography": {
    "font": {
      "letter-spacing": {
        "xs": {
          "$type": "dimension",
          "$value": "-2px",
          "$description": "",
          "scopes": ["LETTER_SPACING"],
          "$extensions": {
            "mode": {},
            "figma": {
              "codeSyntax": {},
              "variableId": "VariableID:4:54",
              "collection": {
                "id": "VariableCollectionId:1:29",
                "name": "typography",
                "defaultModeId": "1:0"
              }
            }
          }
        },
        "sm": {
          "$type": "dimension",
          "$value": "-1px",
          "$description": "",
          "scopes": ["LETTER_SPACING"],
          "$extensions": {
            "mode": {},
            "figma": {
              "codeSyntax": {},
              "variableId": "VariableID:4:55",
              "collection": {
                "id": "VariableCollectionId:1:29",
                "name": "typography",
                "defaultModeId": "1:0"
              }
            }
          }
        },
        "md": {
          "$type": "dimension",
          "$value": "0px",
          "$description": "",
          "scopes": ["LETTER_SPACING"],
          "$extensions": {
            "mode": {},
            "figma": {
              "codeSyntax": {},
              "variableId": "VariableID:4:56",
              "collection": {
                "id": "VariableCollectionId:1:29",
                "name": "typography",
                "defaultModeId": "1:0"
              }
            }
          }
        },
        "lg": {
          "$type": "dimension",
          "$value": "0.5px",
          "$description": "",
          "scopes": ["LETTER_SPACING"],
          "$extensions": {
            "mode": {},
            "figma": {
              "codeSyntax": {},
              "variableId": "VariableID:4:58",
              "collection": {
                "id": "VariableCollectionId:1:29",
                "name": "typography",
                "defaultModeId": "1:0"
              }
            }
          }
        },
        "xl": {
          "$type": "dimension",
          "$value": "1px",
          "$description": "",
          "scopes": ["LETTER_SPACING"],
          "$extensions": {
            "mode": {},
            "figma": {
              "codeSyntax": {},
              "variableId": "VariableID:4:59",
              "collection": {
                "id": "VariableCollectionId:1:29",
                "name": "typography",
                "defaultModeId": "1:0"
              }
            }
          }
        },
        "2xs": {
          "$type": "dimension",
          "$value": "-3px",
          "$description": "",
          "scopes": ["LETTER_SPACING"],
          "$extensions": {
            "mode": {},
            "figma": {
              "codeSyntax": {},
              "variableId": "VariableID:83:155",
              "collection": {
                "id": "VariableCollectionId:1:29",
                "name": "typography",
                "defaultModeId": "1:0"
              }
            }
          }
        }
      },
      "line-height": {
        "md": {
          "$type": "dimension",
          "$value": "40px",
          "$description": "",
          "scopes": ["LINE_HEIGHT"],
          "$extensions": {
            "mode": {},
            "figma": {
              "codeSyntax": {},
              "variableId": "VariableID:4:61",
              "collection": {
                "id": "VariableCollectionId:1:29",
                "name": "typography",
                "defaultModeId": "1:0"
              }
            }
          }
        },
        "lg": {
          "$type": "dimension",
          "$value": "48px",
          "$description": "",
          "scopes": ["LINE_HEIGHT"],
          "$extensions": {
            "mode": {},
            "figma": {
              "codeSyntax": {},
              "variableId": "VariableID:4:62",
              "collection": {
                "id": "VariableCollectionId:1:29",
                "name": "typography",
                "defaultModeId": "1:0"
              }
            }
          }
        },
        "xl": {
          "$type": "dimension",
          "$value": "64px",
          "$description": "",
          "scopes": ["LINE_HEIGHT"],
          "$extensions": {
            "mode": {},
            "figma": {
              "codeSyntax": {},
              "variableId": "VariableID:4:63",
              "collection": {
                "id": "VariableCollectionId:1:29",
                "name": "typography",
                "defaultModeId": "1:0"
              }
            }
          }
        },
        "2xl": {
          "$type": "dimension",
          "$value": "72px",
          "$description": "",
          "scopes": ["LINE_HEIGHT"],
          "$extensions": {
            "mode": {},
            "figma": {
              "codeSyntax": {},
              "variableId": "VariableID:4:64",
              "collection": {
                "id": "VariableCollectionId:1:29",
                "name": "typography",
                "defaultModeId": "1:0"
              }
            }
          }
        },
        "sm": {
          "$type": "dimension",
          "$value": "32px",
          "$description": "",
          "scopes": ["LINE_HEIGHT"],
          "$extensions": {
            "mode": {},
            "figma": {
              "codeSyntax": {},
              "variableId": "VariableID:15:317",
              "collection": {
                "id": "VariableCollectionId:1:29",
                "name": "typography",
                "defaultModeId": "1:0"
              }
            }
          }
        },
        "xs": {
          "$type": "dimension",
          "$value": "24px",
          "$description": "",
          "scopes": ["LINE_HEIGHT"],
          "$extensions": {
            "mode": {},
            "figma": {
              "codeSyntax": {},
              "variableId": "VariableID:16:75",
              "collection": {
                "id": "VariableCollectionId:1:29",
                "name": "typography",
                "defaultModeId": "1:0"
              }
            }
          }
        },
        "3xl": {
          "$type": "dimension",
          "$value": "88px",
          "$description": "",
          "scopes": ["LINE_HEIGHT"],
          "$extensions": {
            "mode": {},
            "figma": {
              "codeSyntax": {},
              "variableId": "VariableID:83:151",
              "collection": {
                "id": "VariableCollectionId:1:29",
                "name": "typography",
                "defaultModeId": "1:0"
              }
            }
          }
        },
        "4xl": {
          "$type": "dimension",
          "$value": "104px",
          "$description": "",
          "scopes": ["LINE_HEIGHT"],
          "$extensions": {
            "mode": {},
            "figma": {
              "codeSyntax": {},
              "variableId": "VariableID:316:567",
              "collection": {
                "id": "VariableCollectionId:1:29",
                "name": "typography",
                "defaultModeId": "1:0"
              }
            }
          }
        }
      },
      "family": {
        "sans": {
          "$type": "string",
          "$value": "Futura",
          "$description": "",
          "scopes": ["TEXT_CONTENT", "FONT_FAMILY"],
          "$extensions": {
            "mode": {},
            "figma": {
              "codeSyntax": {},
              "variableId": "VariableID:15:297",
              "collection": {
                "id": "VariableCollectionId:1:29",
                "name": "typography",
                "defaultModeId": "1:0"
              }
            }
          }
        },
        "serif": {
          "$type": "string",
          "$value": "Plantin MT Pro",
          "$description": "",
          "scopes": ["TEXT_CONTENT", "FONT_FAMILY"],
          "$extensions": {
            "mode": {},
            "figma": {
              "codeSyntax": {},
              "variableId": "VariableID:15:316",
              "collection": {
                "id": "VariableCollectionId:1:29",
                "name": "typography",
                "defaultModeId": "1:0"
              }
            }
          }
        }
      },
      "size": {
        "6xl": {
          "$type": "dimension",
          "$value": "96px",
          "$description": "",
          "scopes": ["FONT_SIZE"],
          "$extensions": {
            "mode": {},
            "figma": {
              "codeSyntax": {},
              "variableId": "VariableID:15:319",
              "collection": {
                "id": "VariableCollectionId:1:29",
                "name": "typography",
                "defaultModeId": "1:0"
              }
            }
          }
        },
        "xl": {
          "$type": "dimension",
          "$value": "32px",
          "$description": "",
          "scopes": ["FONT_SIZE"],
          "$extensions": {
            "mode": {},
            "figma": {
              "codeSyntax": {},
              "variableId": "VariableID:15:320",
              "collection": {
                "id": "VariableCollectionId:1:29",
                "name": "typography",
                "defaultModeId": "1:0"
              }
            }
          }
        },
        "lg": {
          "$type": "dimension",
          "$value": "24px",
          "$description": "",
          "scopes": ["FONT_SIZE"],
          "$extensions": {
            "mode": {},
            "figma": {
              "codeSyntax": {},
              "variableId": "VariableID:15:321",
              "collection": {
                "id": "VariableCollectionId:1:29",
                "name": "typography",
                "defaultModeId": "1:0"
              }
            }
          }
        },
        "md": {
          "$type": "dimension",
          "$value": "20px",
          "$description": "",
          "scopes": ["FONT_SIZE"],
          "$extensions": {
            "mode": {},
            "figma": {
              "codeSyntax": {},
              "variableId": "VariableID:15:322",
              "collection": {
                "id": "VariableCollectionId:1:29",
                "name": "typography",
                "defaultModeId": "1:0"
              }
            }
          }
        },
        "sm": {
          "$type": "dimension",
          "$value": "16px",
          "$description": "",
          "scopes": ["FONT_SIZE"],
          "$extensions": {
            "mode": {},
            "figma": {
              "codeSyntax": {},
              "variableId": "VariableID:15:323",
              "collection": {
                "id": "VariableCollectionId:1:29",
                "name": "typography",
                "defaultModeId": "1:0"
              }
            }
          }
        },
        "2xs": {
          "$type": "dimension",
          "$value": "14px",
          "$description": "",
          "scopes": ["FONT_SIZE"],
          "$extensions": {
            "mode": {},
            "figma": {
              "codeSyntax": {},
              "variableId": "VariableID:15:324",
              "collection": {
                "id": "VariableCollectionId:1:29",
                "name": "typography",
                "defaultModeId": "1:0"
              }
            }
          }
        },
        "2xl": {
          "$type": "dimension",
          "$value": "40px",
          "$description": "",
          "scopes": ["FONT_SIZE"],
          "$extensions": {
            "mode": {},
            "figma": {
              "codeSyntax": {},
              "variableId": "VariableID:83:145",
              "collection": {
                "id": "VariableCollectionId:1:29",
                "name": "typography",
                "defaultModeId": "1:0"
              }
            }
          }
        },
        "4xl": {
          "$type": "dimension",
          "$value": "64px",
          "$description": "",
          "scopes": ["FONT_SIZE"],
          "$extensions": {
            "mode": {},
            "figma": {
              "codeSyntax": {},
              "variableId": "VariableID:83:147",
              "collection": {
                "id": "VariableCollectionId:1:29",
                "name": "typography",
                "defaultModeId": "1:0"
              }
            }
          }
        },
        "3xl": {
          "$type": "dimension",
          "$value": "48px",
          "$description": "",
          "scopes": ["FONT_SIZE"],
          "$extensions": {
            "mode": {},
            "figma": {
              "codeSyntax": {},
              "variableId": "VariableID:83:148",
              "collection": {
                "id": "VariableCollectionId:1:29",
                "name": "typography",
                "defaultModeId": "1:0"
              }
            }
          }
        },
        "5xl": {
          "$type": "dimension",
          "$value": "80px",
          "$description": "",
          "scopes": ["FONT_SIZE"],
          "$extensions": {
            "mode": {},
            "figma": {
              "codeSyntax": {},
              "variableId": "VariableID:236:1322",
              "collection": {
                "id": "VariableCollectionId:1:29",
                "name": "typography",
                "defaultModeId": "1:0"
              }
            }
          }
        },
        "3xs": {
          "$type": "dimension",
          "$value": "12px",
          "$description": "",
          "scopes": ["FONT_SIZE"],
          "$extensions": {
            "mode": {},
            "figma": {
              "codeSyntax": {},
              "variableId": "VariableID:236:2518",
              "collection": {
                "id": "VariableCollectionId:1:29",
                "name": "typography",
                "defaultModeId": "1:0"
              }
            }
          }
        }
      },
      "paragraph": {
        "$type": "dimension",
        "$value": "36px",
        "$description": "",
        "scopes": ["PARAGRAPH_SPACING"],
        "$extensions": {
          "mode": {},
          "figma": {
            "codeSyntax": {},
            "variableId": "VariableID:35:49",
            "collection": {
              "id": "VariableCollectionId:1:29",
              "name": "typography",
              "defaultModeId": "1:0"
            }
          }
        }
      },
      "weight": {
        "regular": {
          "$type": "string",
          "$value": "Regular",
          "$description": "",
          "scopes": ["ALL_SCOPES"],
          "$extensions": {
            "mode": {},
            "figma": {
              "codeSyntax": {},
              "variableId": "VariableID:298:209",
              "collection": {
                "id": "VariableCollectionId:1:29",
                "name": "typography",
                "defaultModeId": "1:0"
              }
            }
          }
        },
        "italic": {
          "$type": "string",
          "$value": "Italic",
          "$description": "",
          "scopes": ["ALL_SCOPES"],
          "$extensions": {
            "mode": {},
            "figma": {
              "codeSyntax": {},
              "variableId": "VariableID:298:210",
              "collection": {
                "id": "VariableCollectionId:1:29",
                "name": "typography",
                "defaultModeId": "1:0"
              }
            }
          }
        },
        "semibold-italic": {
          "$type": "string",
          "$value": "Semibold Italic",
          "$description": "",
          "scopes": ["ALL_SCOPES"],
          "$extensions": {
            "mode": {},
            "figma": {
              "codeSyntax": {},
              "variableId": "VariableID:298:211",
              "collection": {
                "id": "VariableCollectionId:1:29",
                "name": "typography",
                "defaultModeId": "1:0"
              }
            }
          }
        },
        "medium": {
          "$type": "string",
          "$value": "Medium",
          "$description": "",
          "scopes": ["ALL_SCOPES"],
          "$extensions": {
            "mode": {},
            "figma": {
              "codeSyntax": {},
              "variableId": "VariableID:318:306",
              "collection": {
                "id": "VariableCollectionId:1:29",
                "name": "typography",
                "defaultModeId": "1:0"
              }
            }
          }
        }
      }
    }
  },
  "semantic": {
    "colors": {
      "peanut-butter": {
        "$type": "color",
        "$value": "hsla(30, 45%, 50%, 1)",
        "$description": "",
        "scopes": ["ALL_SCOPES"],
        "$extensions": {
          "mode": {},
          "figma": {
            "codeSyntax": {},
            "variableId": "VariableID:316:560",
            "collection": {
              "id": "VariableCollectionId:316:551",
              "name": "semantic",
              "defaultModeId": "316:1"
            }
          }
        }
      },
      "putty": {
        "$type": "color",
        "$value": "hsla(49, 15%, 50%, 1)",
        "$description": "",
        "scopes": ["ALL_SCOPES"],
        "$extensions": {
          "mode": {},
          "figma": {
            "codeSyntax": {},
            "variableId": "VariableID:316:561",
            "collection": {
              "id": "VariableCollectionId:316:551",
              "name": "semantic",
              "defaultModeId": "316:1"
            }
          }
        }
      },
      "tandoori": {
        "$type": "color",
        "$value": "hsla(5, 46%, 51%, 1)",
        "$description": "",
        "scopes": ["ALL_SCOPES"],
        "$extensions": {
          "mode": {},
          "figma": {
            "codeSyntax": {},
            "variableId": "VariableID:316:562",
            "collection": {
              "id": "VariableCollectionId:316:551",
              "name": "semantic",
              "defaultModeId": "316:1"
            }
          }
        }
      },
      "imal-white": {
        "$type": "color",
        "$value": "hsla(36, 45%, 98%, 1)",
        "$description": "",
        "scopes": ["ALL_SCOPES"],
        "$extensions": {
          "mode": {},
          "figma": {
            "codeSyntax": {},
            "variableId": "VariableID:316:563",
            "collection": {
              "id": "VariableCollectionId:316:551",
              "name": "semantic",
              "defaultModeId": "316:1"
            }
          }
        }
      },
      "slate": {
        "$type": "color",
        "$value": "hsla(200, 10%, 30%, 1)",
        "$description": "",
        "scopes": ["ALL_SCOPES"],
        "$extensions": {
          "mode": {},
          "figma": {
            "codeSyntax": {},
            "variableId": "VariableID:316:564",
            "collection": {
              "id": "VariableCollectionId:316:551",
              "name": "semantic",
              "defaultModeId": "316:1"
            }
          }
        }
      },
      "storm": {
        "$type": "color",
        "$value": "hsla(198, 10%, 45%, 1)",
        "$description": "",
        "scopes": ["ALL_SCOPES"],
        "$extensions": {
          "mode": {},
          "figma": {
            "codeSyntax": {},
            "variableId": "VariableID:316:565",
            "collection": {
              "id": "VariableCollectionId:316:551",
              "name": "semantic",
              "defaultModeId": "316:1"
            }
          }
        }
      },
      "imal-black": {
        "$type": "color",
        "$value": "hsla(198, 10%, 20%, 1)",
        "$description": "",
        "scopes": ["ALL_SCOPES"],
        "$extensions": {
          "mode": {},
          "figma": {
            "codeSyntax": {},
            "variableId": "VariableID:316:566",
            "collection": {
              "id": "VariableCollectionId:316:551",
              "name": "semantic",
              "defaultModeId": "316:1"
            }
          }
        }
      }
    },
    "spacing": {
      "sp1": {
        "$type": "dimension",
        "$value": "4px",
        "$description": "",
        "scopes": ["WIDTH_HEIGHT", "GAP"],
        "$extensions": {
          "mode": {},
          "figma": {
            "codeSyntax": {},
            "variableId": "VariableID:318:338",
            "collection": {
              "id": "VariableCollectionId:316:551",
              "name": "semantic",
              "defaultModeId": "316:1"
            }
          }
        }
      },
      "sp2": {
        "$type": "dimension",
        "$value": "8px",
        "$description": "",
        "scopes": ["WIDTH_HEIGHT", "GAP"],
        "$extensions": {
          "mode": {},
          "figma": {
            "codeSyntax": {},
            "variableId": "VariableID:318:344",
            "collection": {
              "id": "VariableCollectionId:316:551",
              "name": "semantic",
              "defaultModeId": "316:1"
            }
          }
        }
      },
      "sp3": {
        "$type": "dimension",
        "$value": "16px",
        "$description": "",
        "scopes": ["WIDTH_HEIGHT", "GAP"],
        "$extensions": {
          "mode": {},
          "figma": {
            "codeSyntax": {},
            "variableId": "VariableID:318:345",
            "collection": {
              "id": "VariableCollectionId:316:551",
              "name": "semantic",
              "defaultModeId": "316:1"
            }
          }
        }
      },
      "sp4": {
        "$type": "dimension",
        "$value": "32px",
        "$description": "",
        "scopes": ["WIDTH_HEIGHT", "GAP"],
        "$extensions": {
          "mode": {},
          "figma": {
            "codeSyntax": {},
            "variableId": "VariableID:318:346",
            "collection": {
              "id": "VariableCollectionId:316:551",
              "name": "semantic",
              "defaultModeId": "316:1"
            }
          }
        }
      },
      "sp5": {
        "$type": "dimension",
        "$value": "48px",
        "$description": "",
        "scopes": ["WIDTH_HEIGHT", "GAP"],
        "$extensions": {
          "mode": {},
          "figma": {
            "codeSyntax": {},
            "variableId": "VariableID:318:347",
            "collection": {
              "id": "VariableCollectionId:316:551",
              "name": "semantic",
              "defaultModeId": "316:1"
            }
          }
        }
      },
      "sp6": {
        "$type": "dimension",
        "$value": "64px",
        "$description": "",
        "scopes": ["WIDTH_HEIGHT", "GAP"],
        "$extensions": {
          "mode": {},
          "figma": {
            "codeSyntax": {},
            "variableId": "VariableID:318:348",
            "collection": {
              "id": "VariableCollectionId:316:551",
              "name": "semantic",
              "defaultModeId": "316:1"
            }
          }
        }
      },
      "sp7": {
        "$type": "dimension",
        "$value": "80px",
        "$description": "",
        "scopes": ["WIDTH_HEIGHT", "GAP"],
        "$extensions": {
          "mode": {},
          "figma": {
            "codeSyntax": {},
            "variableId": "VariableID:318:349",
            "collection": {
              "id": "VariableCollectionId:316:551",
              "name": "semantic",
              "defaultModeId": "316:1"
            }
          }
        }
      },
      "sp8": {
        "$type": "dimension",
        "$value": "104px",
        "$description": "",
        "scopes": ["WIDTH_HEIGHT", "GAP"],
        "$extensions": {
          "mode": {},
          "figma": {
            "codeSyntax": {},
            "variableId": "VariableID:318:350",
            "collection": {
              "id": "VariableCollectionId:316:551",
              "name": "semantic",
              "defaultModeId": "316:1"
            }
          }
        }
      },
      "sp0": {
        "$type": "dimension",
        "$value": "0px",
        "$description": "",
        "scopes": ["WIDTH_HEIGHT", "GAP"],
        "$extensions": {
          "mode": {},
          "figma": {
            "codeSyntax": {},
            "variableId": "VariableID:318:351",
            "collection": {
              "id": "VariableCollectionId:316:551",
              "name": "semantic",
              "defaultModeId": "316:1"
            }
          }
        }
      }
    }
  },
  "Typography": {
    "menu": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{typography.font.family.sans}",
        "fontWeight": 500,
        "fontSize": "{typography.font.size.sm}",
        "lineHeight": "{typography.font.line-height.xs}",
        "letterSpacing": "{typography.font.letter-spacing.xl}",
        "paragraphSpacing": "0",
        "paragraphIndent": "0",
        "textDecoration": "NONE",
        "textCase": "UPPER"
      },
      "$description": "",
      "$extensions": {
        "styleId": "S:56e40b117ae87568244e1bb5ab0a5d2d2d067d6d,"
      }
    },
    "title": {
      "hero": {
        "$type": "typography",
        "$value": {
          "fontFamily": "{typography.font.family.serif}",
          "fontWeight": 400,
          "fontSize": "{typography.font.size.6xl}",
          "lineHeight": "{typography.font.line-height.4xl}",
          "letterSpacing": "{typography.font.letter-spacing.xs}",
          "paragraphSpacing": "0",
          "paragraphIndent": "0",
          "textDecoration": "NONE",
          "textCase": "TITLE"
        },
        "$description": "page hero",
        "$extensions": {
          "styleId": "S:f61605f4b2d7f79dbe1a8ce254ff3c609c0cabcb,"
        }
      },
      "section": {
        "$type": "typography",
        "$value": {
          "fontFamily": "{typography.font.family.sans}",
          "fontWeight": 500,
          "fontSize": "{typography.font.size.lg}",
          "lineHeight": "{typography.font.line-height.md}",
          "letterSpacing": "{typography.font.letter-spacing.default}",
          "paragraphSpacing": "0",
          "paragraphIndent": "0",
          "textDecoration": "NONE",
          "textCase": "UPPER"
        },
        "$description": "",
        "$extensions": {
          "styleId": "S:49d3d17b3c672954e482806986ec6938005a329c,"
        }
      },
      "post-link": {
        "$type": "typography",
        "$value": {
          "fontFamily": "{typography.font.family.serif}",
          "fontWeight": 400,
          "fontSize": "{typography.font.size.xl}",
          "lineHeight": "{typography.font.line-height.md}",
          "letterSpacing": "{typography.font.letter-spacing.md}",
          "paragraphSpacing": "0",
          "paragraphIndent": "0",
          "textDecoration": "NONE",
          "textCase": "TITLE"
        },
        "$description": "",
        "$extensions": {
          "styleId": "S:4762f289b8f4fc51ff805242561de162f0595417,"
        }
      },
      "meta-label": {
        "$type": "typography",
        "$value": {
          "fontFamily": "{typography.font.family.sans}",
          "fontWeight": 500,
          "fontSize": "{typography.font.size.3xs}",
          "lineHeight": "{typography.font.line-height.md}",
          "letterSpacing": "{typography.font.letter-spacing.xl}",
          "paragraphSpacing": "0",
          "paragraphIndent": "0",
          "textDecoration": "NONE",
          "textCase": "UPPER"
        },
        "$description": "Date, author",
        "$extensions": {
          "styleId": "S:9668fcafbc4ada3846d46df02ae720567775ec8a,"
        }
      },
      "post-excerpt": {
        "$type": "typography",
        "$value": {
          "fontFamily": "{typography.font.family.serif}",
          "fontWeight": 400,
          "fontSize": "{typography.font.size.lg}",
          "lineHeight": "{typography.font.line-height.md}",
          "letterSpacing": "{typography.font.letter-spacing.md}",
          "paragraphSpacing": "440",
          "paragraphIndent": "0",
          "textDecoration": "NONE",
          "textCase": "ORIGINAL"
        },
        "$description": "",
        "$extensions": {
          "styleId": "S:e7121df812d3bbb572a318f7504e43d585a8082d,"
        }
      },
      "post": {
        "$type": "typography",
        "$value": {
          "fontFamily": "{typography.font.family.serif}",
          "fontWeight": 400,
          "fontSize": "{typography.font.size.4xl}",
          "lineHeight": "{typography.font.line-height.2xl}",
          "letterSpacing": "{typography.font.letter-spacing.xs}",
          "paragraphSpacing": "0",
          "paragraphIndent": "0",
          "textDecoration": "NONE",
          "textCase": "TITLE"
        },
        "$description": "",
        "$extensions": {
          "styleId": "S:5966d75ac9a539e4477408b19844406cf40018ad,"
        }
      }
    },
    "body": {
      "superscript": {
        "$type": "typography",
        "$value": {
          "fontFamily": "Plantin MT Pro",
          "fontWeight": 400,
          "fontSize": "20px",
          "lineHeight": "32px",
          "letterSpacing": "0px",
          "paragraphSpacing": "40",
          "paragraphIndent": "0",
          "textDecoration": "NONE",
          "textCase": "ORIGINAL"
        },
        "$description": "",
        "$extensions": {
          "styleId": "S:d17d98246260a4154cb17b1135e1c6a7511cad09,"
        }
      },
      "text": {
        "$type": "typography",
        "$value": {
          "fontFamily": "{typography.font.family.serif}",
          "fontWeight": 400,
          "fontSize": "{typography.font.size.md}",
          "lineHeight": "{typography.font.line-height.sm}",
          "letterSpacing": "{typography.font.letter-spacing.md}",
          "paragraphSpacing": "{typography.font.paragraph}",
          "paragraphIndent": "0",
          "textDecoration": "NONE",
          "textCase": "ORIGINAL"
        },
        "$description": "",
        "$extensions": {
          "styleId": "S:3b263a1c930aeacb206aea5507bc13fbd1bbe1a6,"
        }
      },
      "sidenote": {
        "$type": "typography",
        "$value": {
          "fontFamily": "{typography.font.family.serif}",
          "fontWeight": 400,
          "fontSize": "{typography.font.size.sm}",
          "lineHeight": "{typography.font.line-height.xs}",
          "letterSpacing": "{typography.font.letter-spacing.md}",
          "paragraphSpacing": "440",
          "paragraphIndent": "0",
          "textDecoration": "NONE",
          "textCase": "ORIGINAL"
        },
        "$description": "",
        "$extensions": {
          "styleId": "S:177f9f3f69da02f19dd74ae27b79e180b734fff0,"
        }
      }
    },
    "code": {
      "text": {
        "$type": "typography",
        "$value": {
          "fontFamily": "IBM Plex Mono",
          "fontWeight": 400,
          "fontSize": "{typography.font.size.sm}",
          "lineHeight": "{typography.font.line-height.xs}",
          "letterSpacing": "{typography.font.letter-spacing.md}",
          "paragraphSpacing": "0",
          "paragraphIndent": "0",
          "textDecoration": "NONE",
          "textCase": "ORIGINAL"
        },
        "$description": "",
        "$extensions": {
          "styleId": "S:e7706d6e0bed75c0541c821c32c94525ff01e5b6,"
        }
      }
    }
  },
  "$extensions": {
    "tokens-bruecke-meta": {
      "useDTCGKeys": true,
      "colorMode": "hsla-css",
      "variableCollections": ["typography", "semantic"],
      "createdAt": "2025-03-19T00:17:15.508Z"
    }
  }
}

[drwpow]

Yup that’s it—it does need to be exported as fontFamily if it’s to be used in typography. So Terrazzo is throwing the correct validation error.

Technically, there is no $type: string in the design token specification. Figma Variables are “string” type because they were developed while the design token spec was still being worked on (technically it’s still not 100% stable yet—but close!).

Terrazzo allows $type: string just as a “bridge” but only when you are handling the token type with your own plugin (the default plugins may or may not ignore it). But when it comes to trying to plug $type: string into a valid design token type like $type: typography, it correctly throws an error. In other words, you can’t just plug $type: string in anywhere, because it may produce incorrect or unexpected results!

Hope this helps 🙂

[dim882]

It does. Thanks! Is there a way with Terrazzo to lint the whole file and find all the issues like this, without it bailing out on the first error? I'm finding other ones that are wrong, but since it errors out immediately, I can't tell what all the problems might be.

…

On Wed, Mar 19, 2025 at 12:37 PM, Drew Powers < ***@***.*** > wrote: Yup that’s it—it does need to be exported as fontFamily so it’s throwing the correct validation error. Technically, there is no $type: string in the design token specification ( https://www.w3.org/community/design-tokens/ ). Figma Variables are “string” type because they were developed while the design token spec was still being worked on (technically it’s still not 100% stable yet—but close!). Terrazzo allows $type: string just as a “bridge” but only when you are handling the token type with your own plugin (the default plugins may or may not ignore it). But when it comes to trying to plug $type: string into a valid design token type like $type: typography , it correctly throws an error. Hope this helps 🙂 — Reply to this email directly, view it on GitHub ( #451 (reply in thread) ) , or unsubscribe ( https://github.com/notifications/unsubscribe-auth/AAA7YYTQMTZAWUOCAOYRY332VGMNFAVCNFSM6AAAAABZLIMXW6VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTENJVGQ2TONY ). You are receiving this because you authored the thread. Message ID: <terrazzoapp/terrazzo/repo-discussions/451/comments/12554577 @ github. com>

[drwpow-figma]

Yup! terrazzo check