Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clean up process to modify design tokens #1183

Merged
merged 12 commits into from
Apr 19, 2023

Conversation

jattasNI
Copy link
Contributor

@jattasNI jattasNI commented Apr 12, 2023

Pull Request

🤨 Rationale

This started as a joke to modify some token values but turned into refactoring how we source our design tokens when I wrapped my head around the problems with our current approach:

  1. our documentation describes importing tokens from Adobe XD and using the Design System Provider but those processes no longer work
  2. our Style Dictionary configuration and build scripts were in the dist directory when they should be source
  3. the process to generate Style Dictionary output (the platform specific token files) was manual and the build output was checked into source

The new approach is to remove DSP, make Style Dictionary JSON files in this repo our source of truth for design token values, and generate token output as part of the build.

The changes I'm making here should make #1175 easier too. (The Figma plugin linked in that issue can output Style Dictionary JSON files).

👩‍💻 Implementation

  1. Remove everything about storing tokens in XD and Design System Provider. The source of truth is now Style Dictionary JSON files.
  2. Move Style Dictionary build configuration to the source directory. This required some changes to get lint to pass since some of these files weren't previously linted. (See comments in PR)
  3. Generate Style Dictionary output as part of npm run build instead of checking it in to source
  4. Update CONTRIBUTING docs to describe the current process
  5. Pull token values for base tokens story from JS build output instead of JSON source. This changed the order of the tokens in the story.

🧪 Testing

Made token changes and verified that the built components uptake them.

✅ Checklist

  • I have updated the project documentation to reflect my changes or determined no changes are needed.

@jattasNI jattasNI marked this pull request as ready for review April 12, 2023 18:16
Copy link
Contributor

@fredvisser fredvisser left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The dev workflow for base tokens is much more straightforward, and worked well in my testing. I have no further feedback - 👍

@jattasNI jattasNI merged commit 203525b into main Apr 19, 2023
@jattasNI jattasNI deleted the exciting-news-about-the-future-of-ni branch April 19, 2023 17:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants