Skip to content

Conversation

@didoo
Copy link
Contributor

@didoo didoo commented Dec 19, 2025

📌 Summary

Important

This PR is the cleaned-up version of #3435.
For details look at the PR description, and the commits history.

🛠️ Detailed description

In this PR I have:

  • enabled logging for StyleDictionary (later we can decide to tweak it or disable it again)
  • abstracted the getSourceFromFileWithRootSelector method in its own file, so it could be reused
  • implemented custom “CSS variables” format for theme tokens, with logic to handle aliasing (outputReferences) and files splitting (“common” vs “themed”)
  • abstracted DocsJson custom format to its own file
  • removed the attributes/themeable custom transform (not needed anymore)
  • added validation for generated themed tokens (as SD custom action)
  • small tweakings, cleanups and fixes
  • added (and then removed) test tokens (so we can turn them on again in the future, if we want)

🔗 External links

Jira tickets:


👀 Component checklist

  • Percy was checked for any visual regression

💬 Please consider using conventional comments when reviewing this PR.

📋 PCI review checklist
  • If applicable, I've documented a plan to revert these changes if they require more than reverting the pull request.
  • If applicable, I've worked with GRC to document the impact of any changes to security controls.
    Examples of changes to controls include access controls, encryption, logging, etc.
  • If applicable, I've worked with GRC to ensure compliance due to a significant change to the in-scope PCI environment.
    Examples include changes to operating systems, ports, protocols, services, cryptography-related components, PII processing code, etc.

@didoo didoo requested a review from a team as a code owner December 19, 2025 16:43
@vercel
Copy link

vercel bot commented Dec 19, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
hds-showcase Ready Ready Preview Dec 19, 2025 4:54pm
hds-website Ready Ready Preview Dec 19, 2025 4:54pm

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

This PR refactors the token build system to properly handle themed tokens with improved aliasing (outputReferences) and theming capabilities. The main changes address custom CSS formatting for themed tokens, validation of generated CSS files, and better code organization through abstraction of reusable functions.

Key changes:

  • Implemented custom CSS format function with logic for handling aliasing and splitting tokens into "common" vs "themed" files
  • Added validation step to ensure generated themed CSS files are consistent and have no orphaned CSS variables
  • Abstracted reusable functions (getSourceFromFileWithRootSelector, customFormatDocsJson) into separate files for better maintainability

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 5 comments.

Show a summary per file
File Description
packages/tokens/scripts/build.ts Removed attributes/themeable transform; added custom format and validation action registrations; enabled StyleDictionary logging
packages/tokens/scripts/build-parts/validateThemingCssFiles.ts New validation action to check consistency of common/themed CSS files and detect orphaned CSS variables
packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts Updated to use custom formats; added validation action to build pipeline; enabled logging configuration
packages/tokens/scripts/build-parts/getSourceFromFileWithRootSelector.ts New utility function to read and strip headers from generated CSS files
packages/tokens/scripts/build-parts/generateThemingCssFiles.ts Refactored to use abstracted getSourceFromFileWithRootSelector function
packages/tokens/scripts/build-parts/customFormatDocsJson.ts Abstracted docs JSON formatting logic into its own file
packages/tokens/scripts/build-parts/customFormatCssThemedTokens.ts New custom format implementation with advanced aliasing and reference resolution logic

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants