@planningcenter/tapestry-design-tokens

Immutable, tokenized values defined in Figma by the Design Division, built with Style Dictionary.

• Primitives and alias tokens are managed by the UX team.
• Component-specific tokens are managed by the Design Engineering team.

Using Tokens

CSS Custom Properties:

Include this stylesheet in your CSS/SCSS manifest:

• @planningcenter/tapestry-design-tokens/dist/tokens.css

Adding New Tokens

1. Navigate to the appropriate Figma file for the tokens you need. UX is responsible for primitive and alias tokens while Design Engineering is responsible for component-specific tokens.

• Primitives: Tapestry Web Primitives
• Alias: Tapestry Web Component Library
• Components: Tapestry Component-Level Tokens

2. Export a JSON of Figma variables using the Planning Center Design Tokens plugin.

3. Download and save the file to the src/json directory of this Design Tokens repo.

4. Create a branch off main, commit the files, and open a PR.

Publishing

1. Open a PR with the JSON changes
2. Once merged, the PR tagged pco-release-pending will rebase/update to include the new changes

• Adjust the Github tags on that PR to reflect which version type (major, minor, patch) reflect the changes introduced

3. After that PR is merged, the automated workflow will handle building + publishing the package contents to NPM ✨

Documentation

• Documentation is available here and will be updated through the Github action when a new package version is released/deployed.
• The documentation site is available locally using yarn start