DRAFT: reordered design tokens structure #3285

PKulkoRaccoonGang · 2024-11-13T07:44:14Z

Description

This PR provides a draft version of the key sorter for Design tokens and adds a linter for JSON files.

added the key sorter for Design tokens

const DESIGN_TOKEN_KEY_ORDER = [
  '$type',
  '$value',
  '$description',
  'outputReferences',
  'modify',
  'source',
];

added linter for JSON files

Screen.Recording.2024-11-13.at.09.59.35.mov

Merge Checklist

If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Netlify deploy preview, if applicable.
Does your change adhere to the documented style conventions?
Do any prop types have missing descriptions in the Props API tables in the documentation site (check deploy preview)?
Were your changes tested using all available themes (see theme switcher in the header of the deploy preview, under the "Settings" icon)?
Were your changes tested in the example app?
Is there adequate test coverage for your changes?
Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please request an a11y review for the PR in the #wg-paragon Open edX Slack channel.

Post-merge Checklist

Verify your changes were released to NPM at the expected version.
If you'd like, share your contribution in #show-and-tell.
🎉 🙌 Celebrate! Thanks for your contribution.

…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.

…with a period

…efs warnings

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

openedx-webhooks · 2024-11-13T07:44:18Z

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 approval

If you haven't already, check this list to see if your contribution needs to go through the product review process.

If it does, you'll need to submit a product proposal for your contribution, and have it reviewed by the Product Working Group.
- This process (including the steps you'll need to take) is documented here.
If it doesn't, simply proceed with the next step.

🔘 Provide context

To 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:

Dependencies

This PR must be merged before / after / at the same time as ...
Blockers

This PR is waiting for OEP-1234 to be accepted.
Timeline information

This PR must be merged by XX date because ...
Partner information

This is for a course on edx.org.
Supporting documentation
Relevant Open edX discussion forum threads

🔘 Get a green build

If 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 PR

Your 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 @openedx/paragon-working-group. Tag them in a comment and let them know that your changes are ready for review.

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:

The size and impact of the changes that it introduces
The need for product review
Maintenance status of the parent repository

💡 As a result it may take up to several weeks or months to complete a review and merge your PR.

PKulkoRaccoonGang · 2024-11-13T07:46:03Z

designTokenKeySorter.js

@@ -0,0 +1,190 @@
+/* eslint-disable no-console */
+const fs = require('fs').promises;


[inform]: If we are satisfied with this functionality, it will be moved to Paragon CLI

PKulkoRaccoonGang · 2024-11-13T07:56:40Z

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 · 2024-11-13T07:59:34Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 93.76%. Comparing base (0e16dbb) to head (4b065a6).
Report is 170 commits behind head on alpha.

Additional details and impacted files

@@            Coverage Diff             @@
##            alpha    #3285      +/-   ##
==========================================
- Coverage   93.76%   93.76%   -0.01%     
==========================================
  Files         229      229              
  Lines        3787     3784       -3     
  Branches      908      879      -29     
==========================================
- Hits         3551     3548       -3     
- Misses        229      232       +3     
+ Partials        7        4       -3

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

PKulkoRaccoonGang · 2024-12-10T09:54:55Z

We decided to split the functionality from this PR into several:

PKulkoRaccoonGang and others added 16 commits August 20, 2024 17:59

feat: update style dictionary to v4

c4f5466

feat: converted utils and breakpoints

22041ec

feat: DTCG format

9c58f15

refactor: added dynamic imports

f29f538

refactor: code refactoring

bb70975

refactor: corrected header

0e1ef04

chore: corrected design tokens types

5843459

chore: the fractional value of the spacer has had its comma replaced …

1b83468

…with a period

refactor: corrected changed values of tokens and CSS variables

029325a

feat: added sd-transforms; refs in source-tokens-only output; fixed r…

a0baaa6

…efs warnings

fix: fixed typography, display and links sections

915d963

chore: renamed --output-token-references

036f28c

refactor: renamed hasSourceTokensOnly variable

b4d560b

chore: reordered design tokens structure

4b065a6

openedx-webhooks added the open-source-contribution PR author is not from Axim or 2U label Nov 13, 2024

PKulkoRaccoonGang commented Nov 13, 2024

View reviewed changes

PKulkoRaccoonGang marked this pull request as draft November 13, 2024 07:48

PKulkoRaccoonGang self-assigned this Nov 13, 2024

PKulkoRaccoonGang requested review from adamstankiewicz and brian-smith-tcril November 13, 2024 08:06

PKulkoRaccoonGang changed the title ~~chore: reordered design tokens structure~~ DRAFT: reordered design tokens structure Nov 13, 2024

PKulkoRaccoonGang mentioned this pull request Nov 13, 2024

feat: updating to Style Dictionary v4 #3186

Merged

10 tasks

Base automatically changed from Peter_Kulko/style-dictionary-v4 to alpha November 26, 2024 10:15

PKulkoRaccoonGang closed this Dec 10, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DRAFT: reordered design tokens structure #3285

DRAFT: reordered design tokens structure #3285

PKulkoRaccoonGang commented Nov 13, 2024 •

edited

Loading

openedx-webhooks commented Nov 13, 2024 •

edited

Loading

PKulkoRaccoonGang Nov 13, 2024

PKulkoRaccoonGang commented Nov 13, 2024

codecov bot commented Nov 13, 2024 •

edited

Loading

PKulkoRaccoonGang commented Dec 10, 2024 •

edited

Loading

		@@ -0,0 +1,190 @@
		/* eslint-disable no-console */
		const fs = require('fs').promises;

DRAFT: reordered design tokens structure #3285

DRAFT: reordered design tokens structure #3285

Conversation

PKulkoRaccoonGang commented Nov 13, 2024 • edited Loading

Description

Merge Checklist

Post-merge Checklist

openedx-webhooks commented Nov 13, 2024 • edited Loading

What's next?

🔘 Get product approval

🔘 Provide context

🔘 Get a green build

🔘 Update the status of your PR

🔘 Let us know that your PR is ready for review:

Who will review my changes?

Where can I find more information?

When can I expect my changes to be merged?

PKulkoRaccoonGang Nov 13, 2024

Choose a reason for hiding this comment

PKulkoRaccoonGang commented Nov 13, 2024

codecov bot commented Nov 13, 2024 • edited Loading

Codecov Report

PKulkoRaccoonGang commented Dec 10, 2024 • edited Loading

PKulkoRaccoonGang commented Nov 13, 2024 •

edited

Loading

openedx-webhooks commented Nov 13, 2024 •

edited

Loading

codecov bot commented Nov 13, 2024 •

edited

Loading

PKulkoRaccoonGang commented Dec 10, 2024 •

edited

Loading