question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Text styles properties are not converted to individual token if using Standard Format

See original GitHub issue

I have this JSON structure automatically exported by Figma:


"font": {
    "textSmall": {
      "type": "custom-fontStyle",
      "value": {
        "fontSize": 16,
        "textDecoration": "none",
        "fontFamily": "Inter",
        "fontWeight": 400,
        "fontStyle": "normal",
        "fontStretch": "normal",
        "letterSpacing": 0,
        "lineHeight": 20,
        "paragraphIndent": 0,
        "paragraphSpacing": 0,
        "textCase": "none"
      }
   }

Then, I run the command style-dictionary build and this is the result in CSS and SCSS:

:root {
  --undefined-font-text-small: [object Object];
}
$undefined-font-text-small: [object Object];

Am I wrong or is it a bug?

Thanks!

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
lukasoppermanncommented, Nov 29, 2021

Hey @zetareticoli I just released the update, so now you can enable “typography” tokens in the standard format.

1reaction
lukasoppermanncommented, Nov 20, 2021

Hey @zetareticoli to get this you need to use the “original” token format in the settings.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Design Tokens Format Module
This document describes the technical specification for a file format to exchange design tokens between different tools.
Read more >
MText objects are not changed by Text Styles in AutoCAD
Solution: · Double-click on the Mtext and apply the correct formatting using the Text editor. · Manually remove formatting. Double-click on the ...
Read more >
design-tokens/README.md at main - GitHub
The plugin converts the styles you define in Figma into design tokens, this includes Text Styles , Color Styles , Grid Styles and...
Read more >
What Are Design Tokens? | CSS-Tricks
Design tokens are starting to gain a bit of momentum in the design systems community, but they're not an entirely new concept.
Read more >
CSS Fonts Module Level 3 - W3C
Abstract. This CSS3 module describes how font properties are specified and how font resources are loaded dynamically. The contents of this ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found