Design tokens

[arbrandes]

Description

An epic to group all the work being done for the adoption of Design Tokens.

Related issues and PRs

Paragon

Beta Give feedback

1. Categorize Paragon's SCSS variables into design token types paragon#1542
   raccoon-gang +1
2. Configure initial style-dictionary paragon#1543
   raccoon-gang +1
3. Investigate whether components should use CSS variables instead of SCSS paragon#1544
   raccoon-gang +1
4. Refactor styles to use CSS variables paragon#1545
   raccoon-gang +1
5. Design tokens documentation paragon#1546
   engineering epic raccoon-gang +3
   
6. Investigate UI for updating design tokens paragon#1548
   engineering +1
7. Start deprecation of SCSS variables paragon#1549
   raccoon-gang +1
8. Monitor upstream issue for style-dictionary paragon#1938
   engineering +1
   
9. Ensure design tokens have a valid type attribute paragon#1947
   engineering raccoon-gang +2
   
10. Ensure core design tokens are documented with a description attribute as an example paragon#1948
    engineering raccoon-gang +2
    
11. Ensure reference design tokens don't include .value paragon#1968
    engineering raccoon-gang +2
    
12. Ensure output files from style-dictionary and build-tokens contain "Do not edit" messaging paragon#1969
    engineering raccoon-gang +2
    
13. Update OEP-48 ("Brand Customization") as it relates to changes to theming in Paragon with design tokens paragon#1778
    engineering +1
    
14. Ensure core Paragon theme CSS is built and published independently of consuming applications paragon#2014
    engineering raccoon-gang +2
    
15. [discovery] CSS @media query definitions can't be used with CSS variables paragon#2015
    engineering epic raccoon-gang +3
    
16. [discovery] Ensure generated CSS utility classes from style-dictionary use CSS variables instead of resolved values paragon#2016
    engineering raccoon-gang +2
17. Refactor tokens file/folder structure to support additional theme variants paragon#2017
    engineering raccoon-gang +2
    
18. [discovery] Remove SCSS variable usages in components and other custom styles paragon#2018
    raccoon-gang +1
    
19. [discovery] Implement composite design tokens paragon#2025
    engineering raccoon-gang +2
    
20. Ensure @edx/brand-edx.org has alpha release for design tokens paragon#2026
    engineering +1
    
21. Design tokens README usage instructions lead to "Missing script" errors paragon#2086
    +0
22. Dynamically darken the default yiq-text-dark HEX value if it does not pass a11y contrast ratio requirements paragon#2089
    0 of 2
    raccoon-gang +1
    
23. Resolve conflict between master and alpha paragon#2170
    1 of 1
    raccoon-gang +1
    
24. [design tokens] Release @edx/frontend-platform as alpha version paragon#2269
    0 of 4
    engineering +1
    

MFEs

Beta Give feedback

1. Upgrade to Paragon design tokens and CSS variables frontend-app-profile#770
   blocked by other work +1