Release 1.35

We've got some exciting new features and improvements to share with you 🎉. Here's a rundown of what you can expect:

In this release we added the ability to add Color Modifiers (for Pro users) and we added support for custom rem configuration in the form of a base font size token. In addition we introduced a redesigned bottom area to clear confusion around that one and we added several quality of life improvements (such as seeing Styles in Inspect). The full list of released features and improvements can be found below.

This is our first release following semantic versioning, which means that you'll be able to differentiate major commits from minor / patch commits more easily. Going forward, we'll release hotfixes under the major/minor version number (e.g. 1.35.1, 1.35.2, etc). Keep in mind this means we are now starting to ignore the version Figma shows in their Community page of our plugin.

Color modifiers

If you're a Pro user, get ready to take your color game to the next level! We've added four color modifiers that allow you to make slight variations to a base color. With options like lighten, darken, mix, and alpha, you can dynamically change the value of a color in a snap. if for example you need to make a color slightly lighter, or if you wanted to mix it with a different color (similar to Figma's multiple fills). We're storing these modifiers in the $extensions key of a token, where you can place one modifier per token.

As your developers would also want to use these color modifiers in code, token-transformer has been updated to handle these out of the box. If you're not using token-transformer but use style dictionary directly, we provided our own transforms that you can use with them: https://www.npmjs.com/package/@tokens-studio/sd-transforms

More information on how to use Color modifiers can be found here.

Custom rem configuration support

You are now able to define your the default rem size. In Settings you’ll find a way to change the default rem size from 16px to any size you want - or a token that would change between themes! For example, if you'd set this to a token that has 16px in one set, and 20px in another, you're effectively changing all tokens that reference a rem unit dynamically.

See applied styles in Inspect

Instead of just showing you tokens, the Inspect tab now also shows you any applied styles. This should make it easier if you're working with a hybrid native style / tokens applied workflow. Note that you cannot remap styles using the Inspect tab.

Redesigned bottom area

We redesigned the bottom area of the plugin. The Apply settings and Update button are consolidated to optimise the way this works. 

Various other improvements

• Fixed an issue when referencing nested properties of tokens that are references themselves (e.g. referencing lineHeight of a typography token that was a reference itself)
• Added the ability to define line heights in rem units
• Fixed an issue trying to remove the license key of expired licenses
• Added a shortcut to edit tokens: Cmd+Click on Mac, WindowsKey + Click on Windows
• Added ability to right-click a token an select Copy token path (thanks fokkerone)
• Added a way to duplicate a token group to one or multiple other sets (right click to duplicate and then choose sets)
• Fixed the way we sort tokens in the token picker
• Fixed an issue with overlapping token pickers

Overall, this release brings a lot of great changes, and we're excited for you to try them out! Let us know of any issues you encounter and submit feature requests to improve those new features even further.

Release 134

• Fixes an issue with GitLab group credentials not being inherited. Thanks @robin-ambachtsheer
• Fixes an issue with renaming token groups where user choice was sometimes ignored and only applied on selection
• Fixes an issue with none value tokens sometimes causing tokens not being applied
• Adds support for the none keyword in token values
• Removed an older migration that should speed up performance by a bit

Release 133

• Decreases notification for missing font weight style from error to notify.
• Generic versioned storage: Changes auth header inputs to be cloaked. Fixes #1504
• Changes paragraphIndent imports to create tokens in the dimension category. Fixes #1517
• Adds a way to pick other border tokens when editing border tokens. Fixes #1523
• Fixes an issue with HSLA alpha values of 0. Fixes #1516
• Fixes Swap Styles not traversing through component sets or sections.
• Fixes border tokens not functioning properly in Composition tokens. Fixes #1507
• Fixes tooltip of border tokens in Composition tokens.
• Fixes border tokens not applying colors as color styles. Fixes #1522
• Fixes border tokens always applying color as a hex when they could be using a style. Fixes #1522

What's Changed

• Bump json5 from 2.2.1 to 2.2.2 by @dependabot in #1502
• Bump loader-utils from 1.4.1 to 1.4.2 by @dependabot in #1501
• Bump json5 from 2.2.1 to 2.2.2 in /token-transformer by @dependabot in #1500
• Release 132 by @six7 in #1510
• 1504 Sensitive header support by @SorsOps in #1512
• 1507-border-tokens-dont-work-in-composition-tokens by @swordEdge in #1519
• Programmatic support for token transformer by @SorsOps in #1514
• 1517-importing-paragraphindent-not-working-base-release-113 by @swordEdge in #1521
• 1523 border tokens do not offer a way to add alias tokens base 133 by @swordEdge in #1530
• 1522-when-applying-border-tokens-we-always-apply-color-as-a-hex-instead-of-style-when-available by @swordEdge in #1529
• 1522 when applying border tokens we always apply color as a hex instead of style when available by @swordEdge in #1531
• Release 133 by @six7 in #1513

Full Changelog: 0.131...0.133

Release 131

• Fixed an issue with (color) border tokens which weren't using borderWidth tokens causing those to use a 0 value.
• Fixed individual sides not being available for the new composite border token types

Release 130

• Fixed an issue that was introduced in 129 that caused font weight validation to trigger too soon
• Fixed an issue that casued the border / borderColor property migration not to be run

Release 129

We’ll end the year with a new release, and this one contains quite a few fixes, quality of life improvements, and new features. There’s new token types that get us closer to the design tokens format, new ways of working with native Figma Styles and a bunch of quality of life improvements. As always, thank you for your continued support and feedback you’re giving us on Slack and other channels, it helps us build this in the right way.

Read the full changelog (with some more details) over at the Changelog page: https://tokens.studio/changelog/release-129

• New token type: Dimension
• New token type: Border
• Swapping themes can now also work just with styles applied, not tokens (behind feature flag enabled for Pro users (will roll out gradually over time)
• When changing a group name, we now let you change the full path
• When two users work in the same document, we now keep state up-to-date
• Introduced None-value tokens to Inspect in so you can set values to none in instances
• New sync provider UI
• You can now detach styles in the Themes dialog
• Themes.json / $themes improvements: We no longer list disabled sets (this might require a push)
• New sync provider: Generic versioned storage (push/pull URL storage) - behind a feature flag for specific users, request an invite

Other notable changes

• Switching from URL to Local Storage does now make tokens writable #1279
• Plugin applied Box Shadow in wrong order #1427
• When editing an input with an alias, HOME and END didn’t work. #1304
• Duplicating a token set should set the new item’s position right after the original #1347
• Nested token sets don’t insert new children into the correct position #1370
• Shortcut cmd/ctrl + enter/return triggers loading modal in unexpected situations #1344
• Gradients can’t be used directly in compositions #1425
• When using JSONbin you sometimes got the message to recover local changes even though it was latest#1360
• Paragraph indent not working with the value ‘0’ #1388
• Gradient from Figma Tokens has different position of anchor points #1353
• Typography types consistency (expanded typography token types are singular whereas ‘standalone’ typography tokens are plural) #1417
• Inspect is now showing a sticky top bar to make it easier to bulk-remap (thank you @dermyhughes)
• Introduced in-product explainers
• Improved error messaging when a font family / weight combination couldn’t be applied
• Optimized the Preset that you can load to include some of the new tokens, also fixed typography tokens previously living in the global set

Release 128

This is an important update in our evolution, read more on it over in the blog post.

• Changed branding from Figma Tokens to Tokens Studio for Figma.

In addition the update contains only minor fixes:

• Fixed an issue with important typography styles which created paragraphIndent.0 references for a token which didn’t exist. It now adds it just with the value - we realize this isn’t ideal, but with the next major version we’re introducing a new token type which will hold this.
• Fixed an issue with JSONBin triggering Recover local changes when it didn’t need to.

Release 127

Fixed an issue that caused the plugin to crash when using '++' in token names
Fixed an issue with finding matching credentials which caused unnecessary 'Enter credentials' messages at start.

Release 126

Fixed an issue with Rename styles showing up even though there’s no Themes setup
Fixed an issue with Rename styles when used without Prefix styles with Theme name.

Release 125

Fixed an issue where the plugin sometimes would ask you to type in repository credentials even though you already had them setup. Fixes #356