Text Decoration - Token Type

Text Decoration Tokens define the position of an optional line as an individual property to be composed within a Typography Token. It is not intended to be applied to text elements directly.

Design decisions

Text Decoration defines an optional line as a part of font styling properties, typically used to communicate the visual emphasis of text.

In CSS, this property is also called text-decoration.

When we apply a Typography Composite Token to a text layer in Figma, these Text Decoration values will change the text:

• By default - no lines are added to the text - null

  • The text appears as typed with no decoration added.

• A line below the text - underline

  • It commonly indicates interactive text elements, like links.

• A line in the middle of the text - strike-through

  • It commonly indicates information that is no longer accurate, like a to-do item that has been completed.

Possible values

The syntax used to write string values for Design Tokens is important, so be sure to write your Text Decoration Token value with all lowercase letters and ensure there are no spaces.

Hard-coded values

The Text Decoration Token has a few specific values depending on your needs.

null

Most of the time, text will appear as typed; the Text Decoration Value will be:

null

underline

To create a line at the bottom of the text, enter the Text Decoration Value as:

underline

strike-through

To create a line through the centre of the text, enter the Text Decoration Value as:

strike-through

Not supported by Figma

There are additional text-decoration properties commonly used in CSS that are not supported in Figma.

• Overline

• Line-above

Using the Tokens Studio plugin, you can still create a Text Decoration Token with these values.

When you apply them to design elements in Figma, the Token will be present and visible to engineers inspecting the design element in Figma, but the Token won't interact with the Text decoration property in Figma's UI.

Values that reference another Token

When trying to reference another Token as the Value for a Text Decoration Token, you will see Tokens in the dropdown list that are:

• Living in Token Sets that are currently active.

  • In the left menu on the plugin's Tokens page, a checkmark is visible next to the Token Set name.

• Token Type is compatible:

  • The same = textDecoration

However, like all Token Types, you can "force" a reference by manually entering the Token Name between curly brackets.

For example {token.name.here}

Jump to the guide on Token Values with References by selecting the card below to learn more.

W3C DTCG Token Format

Text Decoration is not yet an official Token type in the W3C Design Token Community Group specifications.

Tokens Studio has added Text Decoration as an uofficial Token type in anticipation it will be added to the W3C specs in the near future.

Transforming Tokens

Engineers typically transform Tokens used in code with Style Dictionary, which is tool-agnostic. Tokens coming from Tokens Studio require an additional step: @Tokens-studio/sd-transforms, an npm package that prepares Tokens for Style Dictionary.

This property in Figma matches CSS, so there is no specific transform for Text Decoration.

Running the SD-Transforms pre-processor as part of the generic package will prep your Text Decoration Tokens for Style Dictionary.

→ SD-Transforms Read-Me Doc, Using the preprocessor

However, Text Decoration, as part of Typography Composite Tokens, requires the SD-Transforms option to expand composite Tokens into multiple Tokens.

Make sure you look at the generic SD-Transforms package to include this option, which allows you to further customize this transformation further using Style Dictionary.

→ SD-Transforms Read-Me Doc, Using Expand

Resources

Mentioned in this doc:

• SD-Transforms - Read Me

• Style Dictionary - https://styledictionary.com/

• Design Tokens Community Group - W3C Draft

• Design Tokens Community Group - 9.7 Typography

Figma resources:

• Design in Figma - Explore Text Properties, Decoration

CSS resources:

• MDN Web Docs - Text Decoration

Community resources:

• None yet!

💡 Something to share? Submit it here!

Known issues and bugs

Tokens Studio Plugin GitHub - Open issues for Token Type Text Decoration

• None yet

🐞 If you are experiencing an issue not listed here, please reach out to us on the Troubleshooting channel of our community Slack, submit it on our feedback tool, or send us an email [email protected]

Requests, roadmap and changelog

• None

💌 Visit https://feedback.tokens.studio/ to contribute or subscribe to updates.