DRAFT: reordered design tokens structure #3285
Conversation
…s format (#3203) * feat: --output-references CLI arg for build-tokens, registers filters, and updates CSS vars format * Exposes `--output-references` CLI argument for `build-tokens` command. Defaults to `true`. Ensures brand package output with the CLI includes references in build output out-of-the-box. * Registers filter(s) `isThemeVariant.{'light'}`, handling future theme variants when implemented (e.g., `isThemeVariant.dark`). * Migrates `createCustomCSSVariables` to use `formattedVariables` to rely on out-of-the-box CSS variable formatting. The formatter still supports token-specific overrides of `outputReferences`. If a token has modifications via `modify`, the modified base reference is not included in the output. * Updates custom fileHeader implementation, including a relative path to design tokens documentation. * Fixes bug with line-height tokens, switching their `$type` from `dimension` to `number` to resolve typography style regressions. * Updates typography tokens related to font size, font weight, and line-height for more consistent naming structure when taking into account mobile. * Updates `@mobile-type` SCSS mixin to support level-specific customization of mobile typography styles for display 1-4. * Renames `"description"` field in tokens to `"$description""` per the DTCG format. * Ensures the "Typography" foundations page properly previews the correct font size for regular "Body" text and includes the missing "HEADING LABEL" example. * Updates to "Colors" page in docs site: * Displays token name instead of CSS variable in the color swatch previews (see screenshot below). * Include `accent-a` and `accent-b` alongside other color names, rather than manually rendering `Swatch` for the accents. * Modifies the grid styles for color swatch preview to be more responsive. * Resolves `NaNpx` bug in `MeasuredItem` component on docs site, while computing the measurements to display for an element (e.g., font size). Instead, it renders an empty block while measurements are resolved. * Updates `CodeBlock` styles on docs site to add its border and background color only to the `LivePreview`, not the entire `CodeBlock` example. * Reduces whitespace on docs site homepage. * Simplifies columns on docs site header, ensuring `SiteTitle` is horizontally aligned in the center.
refactor: corrected expanded tokens refactor: code refactoring refactor: created an abstracted CSS variables refactor: added missing expanded tokens refactor: added missing expanded tokens refactor: small refactoring after review refactor: corrected imports for CSS files feat: expanded --pgn-transition-carousel-base token, some refactoring fix: corrected --pgn-transition-base-timing-function value refactor: some refactoring and updates refactor: corrected progress-bar and typography tokens
|
Thanks for the pull request, @PKulkoRaccoonGang! What's next?Please work through the following steps to get your changes ready for engineering review: 🔘 Get product approvalIf you haven't already, check this list to see if your contribution needs to go through the product review process.
🔘 Provide contextTo help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:
🔘 Get a green buildIf one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green. 🔘 Update the status of your PRYour PR is currently marked as a draft. After completing the steps above, update its status by clicking "Ready for Review", or removing "WIP" from the title, as appropriate. 🔘 Let us know that your PR is ready for review:Who will review my changes?This repository is currently maintained by Where can I find more information?If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources:
When can I expect my changes to be merged?Our goal is to get community contributions seen and reviewed as efficiently as possible. However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:
💡 As a result it may take up to several weeks or months to complete a review and merge your PR. |
openedx-webhooks
added
the
open-source-contribution
| @@ -0,0 +1,190 @@ | |||
| /* eslint-disable no-console */ | |||
| const fs = require('fs').promises; | |||
There was a problem hiding this comment.
[inform]: If we are satisfied with this functionality, it will be moved to Paragon CLI
|
I researched popular tools for linting JSON files, including: Currently, eslint-plugin-jsonc is used for formatting and syntax checking. For custom sorting of key order in design tokens, a custom Node.js script is utilized, as these tools only support alphabetical sorting or shallow sorting that doesn’t account for deep nesting. |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## Peter_Kulko/style-dictionary-v4 #3285 +/- ##
================================================================
Coverage 93.76% 93.76%
================================================================
Files 229 229
Lines 3784 3784
Branches 906 879 -27
================================================================
Hits 3548 3548
Misses 232 232
Partials 4 4 ☔ View full report in Codecov by Sentry. |
PKulkoRaccoonGang
requested review from
adamstankiewicz and
brian-smith-tcril
PKulkoRaccoonGang
changed the title
Description
This PR provides a draft version of the key sorter for Design tokens and adds a linter for JSON files.
Screen.Recording.2024-11-13.at.09.59.35.mov
Merge Checklist
exampleapp?Post-merge Checklist