chore: refactoring css and improving build to adhere to workspace conventions

georgewrmarshall commented 2 months ago

Description

This PR undertakes a significant refactor of our CSS architecture within the design tokens system. By breaking up the design token categories into smaller, more manageable stylesheets and exporting them from a central design-token.css file, we aim to enhance the maintainability and scalability of our styling infrastructure. Additionally, this refactor includes improvements to our build pipeline, specifically optimizing the process to minimize our CSS output and aligning the export structure with the module template workspace conventions. This change not only streamlines our development workflow but also ensures our design tokens are efficiently integrated and utilized across projects, contributing to a more cohesive and consistent implementation of our design system.

Manual testing steps

To verify the successful refactor and integration of the design tokens:

Build the project using the updated build pipeline and observe the minimized CSS output in the dist directory.
Navigate to CSS page of storybook to make sure it's rendering correctly

Screenshots/Recordings

After

Storybook still works as expected

https://github.com/MetaMask/design-tokens/assets/8112138/3d90c3ad-5122-4ca2-a6fa-c4cc6b14b70c

Updating package in portfolio works

https://github.com/MetaMask/design-tokens/assets/8112138/8ef345b2-f6d5-48d6-af4c-ea3f39d846b2

Updating package in extension works

https://github.com/MetaMask/design-tokens/assets/8112138/91920f07-8001-44bd-8b53-70f440e61ab4

Pre-merge author checklist

[x] I’ve followed MetaMask Coding Standards.
[x] I've clearly explained what problem this PR is solving and how it is solved.
[x] I've linked related issues.
[x] I've included manual testing steps.
[x] I've included screenshots/recordings if applicable.
[x] I’ve included tests if applicable.
[x] I’ve documented my code using JSDoc format if applicable.
[x] I’ve applied the right labels on the PR.
[x] I’ve properly set the pull request status to "ready for review".

Pre-merge reviewer checklist

[x] I've manually tested the PR (e.g., pull and build branch, review the minimized CSS in dist, test code being changed).
[x] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as screenshots or recordings.

This PR represents a pivotal enhancement in our approach to managing and implementing design tokens, setting a foundation for more efficient, consistent, and scalable use of our design system across projects.

socket-security[bot] commented 2 months ago

New dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/clean-css-cli@5.6.3	environment, filesystem	`0`	45.6 kB	jakub.pawlowicz
npm/clean-css@5.3.3	environment, filesystem, network	`0`	493 kB	jakub.pawlowicz
npm/commander@7.2.0	filesystem, shell	`0`	145 kB	abetomo

View full report↗︎

socket-security[bot] commented 2 months ago

👍 Dependency issues cleared. Learn more about Socket for GitHub ↗︎

This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored.

Ignoring: npm/clean-css@5.3.3

View full report↗︎

Next steps

Take a deeper look at the dependency

Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev.

Remove the package

If you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency.

Mark a package as acceptable risk

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of ecosystem/package-name@version specifiers. e.g. @SocketSecurity ignore npm/foo@1.0.0 or ignore all packages with @SocketSecurity ignore-all