Skip to content

Commit

Permalink
Switch to style dictionary v4 (#2353)
Browse files Browse the repository at this point in the history
# Pull Request

## 🤨 Rationale

This PR represents the minimal set of changes to get to style dictionary
v4. Perks of being on style dictionary v4 are:
- It was [co-maintained by the TokensStudio
folks](https://styledictionary.com/version-4/statement/), hopefully
leading towards better Figma integration via
[TokensStudio](https://tokens.studio/) (not tested yet)
- It [supports the DTCG token
format](https://styledictionary.com/info/dtcg/) recommended by the W3C
Design Tokens Community group (although future work would be to switch
to that format)
- Has a supported (instead of internal) [utils
api](https://styledictionary.com/reference/utils/references/) to
manipulate tokens programmatically (not used yet but expect to be useful
for generating the static CSS examples)

Fixes #2232

## 👩‍💻 Implementation

- Switched the package to `"type": "module"` which required updated
legacy cjs scripts
- [Could not change the syg-to-ts script to
cjs](nivekcode/svg-to-ts#213) so instead
switched it to a json configuration
- Tokens now use a `type` field instead of relying on the json hierarchy
for type information. Migrated just the tokens that needed an explicit
type to evaluate correctly (likely want to redo the structure after
experimenting with Figma output so did the bare minimum required
changes)
- Re-enabled renovate updates for style-dicitionary

## 🧪 Testing

- Validated manually that the generated output had no effective
difference (other than generated comments) compared to
[[email protected]](https://unpkg.com/browse/@ni/[email protected]/dist/styledictionary/)
- Triggered the storybook rebuild to validate no visual differences

## ✅ Checklist

- [x] I have updated the project documentation to reflect my changes or
determined no changes are needed.
  • Loading branch information
rajsite authored Aug 20, 2024
1 parent 6412958 commit b3e8a10
Show file tree
Hide file tree
Showing 17 changed files with 675 additions and 507 deletions.
1 change: 0 additions & 1 deletion .github/renovate.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@
"ng-packagr",
"playwright",
"remark-gfm",
"style-dictionary",
"typescript",
"zone.js"
],
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "Migrate to style dictionary v4",
"packageName": "@ni/nimble-tokens",
"email": "[email protected]",
"dependentChangeType": "patch"
}
Loading

0 comments on commit b3e8a10

Please sign in to comment.