[BD-46] refactor: improve design tokens architecture #1874

PKulkoRaccoonGang · 2022-12-27T09:36:59Z

Description

Refactoring Button tokens
Check the usage of SCSS variables in src and add missing ones to tokens or remove unused ones
Refactor general tokens the same way as components tokens
In alias/size.json replace rem values with pixels
Replace null values with appropriate ones
Replace the background with bg in tokens names

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 add wittjeff and adamstankiewicz as reviewers on this PR.

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.

openedx-webhooks · 2022-12-27T09:37:04Z

Thanks for the pull request, @PKulkoRaccoonGang!

When this pull request is ready, tag your edX technical lead.

codecov · 2022-12-27T09:50:52Z

Codecov Report

Base: 90.41% // Head: 90.41% // No change to project coverage 👍

Coverage data is based on head (89d3350) compared to base (d35df96).
Patch has no changes to coverable lines.

Additional details and impacted files

@@           Coverage Diff           @@
##            alpha    #1874   +/-   ##
=======================================
  Coverage   90.41%   90.41%           
=======================================
  Files         192      192           
  Lines        3120     3120           
  Branches      746      746           
=======================================
  Hits         2821     2821           
  Misses        283      283           
  Partials       16       16

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

viktorrusakov · 2022-12-28T15:57:39Z

tokens/src/components/general/caret.json

+      "width": { "value": ".3em", "source": "$caret-width" }
+    }
+  },
+  "spacing": {


should there be a caret key after this?

Fixed, thanks

viktorrusakov · 2022-12-28T16:10:46Z

tokens/src/global/display.json

@@ -1,21 +1,25 @@
 {
-  "display": {
-    "size": {
+  "size": {


I think all of the tokens here should be in typography category because they are related to font styles. For example $display1-size represents font size and $display1-weight - font weight (it even inherits {typography.font.weight.bold} value)

Yes, you are right

viktorrusakov · 2022-12-29T08:45:58Z

tokens/src/components/Button/core.json

@@ -72,6 +72,6 @@
    }
  },
  "transition": {
-    "btn": { "value": "null", "source": "$btn-transition" }
+    "btn": { "value": "0", "source": "$btn-transition" }


I think we should use none here instead

0 is not a valid value

Corrected, thanks

openedx-webhooks · 2023-01-06T13:41:01Z

@PKulkoRaccoonGang 🎉 Your pull request was merged! Please take a moment to answer a two question survey so we can improve your experience in the future.

edx-semantic-release · 2023-01-07T13:42:09Z

🎉 This PR is included in version 21.0.0-alpha.7 🎉

The release is available on:

Your semantic-release bot 📦🚀

* refactor: update design tokens naming and add missing ones * feat: expose replace vars script to CLI Co-authored-by: Viktor Rusakov <vrusakov66@gmail.com>

* build: switch base to trying a rebase (#2047) * build: pull from alpha before rebase master (#2049) * build: git checkout instead of git switch (#2051) * build: set base branch to alpha (#2053) * feat: alpha release of design tokens (#1770) * build: add alpha/beta to release CI workflow * feat: design tokens with style-dictionary BREAKING CHANGE: Introduces design tokens. * [BD-46] resolve bootstrap conflicts with design tokens (#1800) * feat: resolve some Bootstrap conflicts with design tokens Co-authored-by: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com> * feat: add ability to generate CSS utility classes through design tokens * docs: added background-color for color HEX values on CSS utility classes page * fix: add missed border utilities * docs: add ability to view CSS variables on CSS Utility Classes page * chore: remove unused import * feat: remove deprecated components BREAKING CHANGE: all of the deprecated components were removed from Paragon, these include `CheckBoxGroup`, `Checkbox`, `Fieldset`, `Input`, `InputSelect`, `InputText`, `ListBox`, `Modal`, `RadioButtonGroup`, `StatusAlert`, `Table`, `TextArea`, `ValidationFormGroup`, `Button.Deprecated`, `Tabs.Deprecated`, `Dropdown.Deprecated`. * chore: update tokens for Modal components * docs: display computed CSS variables on components' pages * refactor: update design tokens structure * feat: add CLI interface for design tokens (#1846) * fix: install dependencies in tokens module after installing Paragon * fix: remove package.json files from tokens module * refactor: update design tokens structure * refactor: replace old tables with `DataTable` on documentation site (#1859) * [BD-46] refactor: improve design tokens architecture (#1874) * refactor: update design tokens naming and add missing ones * feat: expose replace vars script to CLI Co-authored-by: Viktor Rusakov <vrusakov66@gmail.com> * build: add workflow_dispatch to alpha branch to trigger release * fix: trigger release * fix: added custom title for CSS output files (#1985) * feat: deleted value in reference design tokens (#1989) * fix: ensure design tokens have a valid type attribute (#1992) Adds `type` attribute to all design tokens per W3C design tokens spec. * fix: add missing tokens for Button component (#1924) * feat: add new tokens and cleanup after rebase * feat: alpha release of design tokens (#1770) * feat: design tokens with style-dictionary BREAKING CHANGE: Introduces design tokens. * [BD-46] resolve bootstrap conflicts with design tokens (#1800) * feat: resolve some Bootstrap conflicts with design tokens Co-authored-by: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com> * feat: add ability to generate CSS utility classes through design tokens * docs: added background-color for color HEX values on CSS utility classes page * fix: add missed border utilities * docs: add ability to view CSS variables on CSS Utility Classes page * chore: remove unused import * feat: remove deprecated components BREAKING CHANGE: all of the deprecated components were removed from Paragon, these include `CheckBoxGroup`, `Checkbox`, `Fieldset`, `Input`, `InputSelect`, `InputText`, `ListBox`, `Modal`, `RadioButtonGroup`, `StatusAlert`, `Table`, `TextArea`, `ValidationFormGroup`, `Button.Deprecated`, `Tabs.Deprecated`, `Dropdown.Deprecated`. * chore: update tokens for Modal components * refactor: update design tokens structure * feat: add CLI interface for design tokens (#1846) * fix: install dependencies in tokens module after installing Paragon * fix: remove package.json files from tokens module * refactor: update design tokens structure * [BD-46] refactor: improve design tokens architecture (#1874) * refactor: update design tokens naming and add missing ones * feat: expose replace vars script to CLI Co-authored-by: Viktor Rusakov <vrusakov66@gmail.com> * fix: trigger release * feat: deleted value in reference design tokens (#1989) * fix: ensure design tokens have a valid type attribute (#1992) Adds `type` attribute to all design tokens per W3C design tokens spec. * fix: add missing tokens for Button component (#1924) * Revert "chore(release): sync from master to alpha (#2040)" This reverts commit 14ba07c. * feat: add new tokens and cleanup after rebase --------- Co-authored-by: Adam Stankiewicz <agstanki@gmail.com> Co-authored-by: Viktor Rusakov <52399399+viktorrusakov@users.noreply.github.com> Co-authored-by: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com> Co-authored-by: Viktor Rusakov <vrusakov66@gmail.com>

* refactor: update design tokens naming and add missing ones * feat: expose replace vars script to CLI Co-authored-by: Viktor Rusakov <vrusakov66@gmail.com>

openedx-webhooks added the blended PR is managed through 2U's blended developmnt program label Dec 27, 2022

PKulkoRaccoonGang changed the title ~~[BD-46] feat: check usage of SCSS variables in src and add missing ones to to…~~ [BD-46] feat: improve design tokens architecture Dec 27, 2022

PKulkoRaccoonGang requested a review from viktorrusakov December 27, 2022 09:58

PKulkoRaccoonGang force-pushed the Peter_Kulko/improve-design-tokens-architecture branch 3 times, most recently from 1837536 to 0196420 Compare December 28, 2022 15:53

viktorrusakov reviewed Dec 28, 2022

View reviewed changes

PKulkoRaccoonGang force-pushed the Peter_Kulko/improve-design-tokens-architecture branch from 1ae7f80 to e17a8f9 Compare December 28, 2022 19:26

PKulkoRaccoonGang changed the title ~~[BD-46] feat: improve design tokens architecture~~ [BD-46] refactor: improve design tokens architecture Dec 29, 2022

viktorrusakov reviewed Dec 29, 2022

View reviewed changes

PKulkoRaccoonGang force-pushed the Peter_Kulko/improve-design-tokens-architecture branch from 6ec66a5 to 296f0f0 Compare December 30, 2022 08:37

refactor: update design tokens naming and add missing ones

db822a6

viktorrusakov force-pushed the Peter_Kulko/improve-design-tokens-architecture branch from 296f0f0 to 8e930e7 Compare January 3, 2023 11:35

feat: expose replace vars script to CLI

89d3350

viktorrusakov force-pushed the Peter_Kulko/improve-design-tokens-architecture branch from 8e930e7 to 89d3350 Compare January 5, 2023 12:07

adamstankiewicz approved these changes Jan 6, 2023

View reviewed changes

adamstankiewicz merged commit 13ae39c into openedx:alpha Jan 6, 2023

edx-semantic-release added the released on @alpha label Jan 7, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[BD-46] refactor: improve design tokens architecture #1874

[BD-46] refactor: improve design tokens architecture #1874

PKulkoRaccoonGang commented Dec 27, 2022 •

edited

Loading

openedx-webhooks commented Dec 27, 2022

codecov bot commented Dec 27, 2022 •

edited

Loading

viktorrusakov Dec 28, 2022

PKulkoRaccoonGang Dec 28, 2022

viktorrusakov Dec 28, 2022

PKulkoRaccoonGang Dec 28, 2022

viktorrusakov Dec 29, 2022

PKulkoRaccoonGang Dec 29, 2022

openedx-webhooks commented Jan 6, 2023

edx-semantic-release commented Jan 7, 2023

[BD-46] refactor: improve design tokens architecture #1874

[BD-46] refactor: improve design tokens architecture #1874

Conversation

PKulkoRaccoonGang commented Dec 27, 2022 • edited Loading

Description

Merge Checklist

Post-merge Checklist

openedx-webhooks commented Dec 27, 2022

codecov bot commented Dec 27, 2022 • edited Loading

Codecov Report

viktorrusakov Dec 28, 2022

Choose a reason for hiding this comment

PKulkoRaccoonGang Dec 28, 2022

Choose a reason for hiding this comment

viktorrusakov Dec 28, 2022

Choose a reason for hiding this comment

PKulkoRaccoonGang Dec 28, 2022

Choose a reason for hiding this comment

viktorrusakov Dec 29, 2022

Choose a reason for hiding this comment

PKulkoRaccoonGang Dec 29, 2022

Choose a reason for hiding this comment

openedx-webhooks commented Jan 6, 2023

edx-semantic-release commented Jan 7, 2023

PKulkoRaccoonGang commented Dec 27, 2022 •

edited

Loading

codecov bot commented Dec 27, 2022 •

edited

Loading