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

georgewrmarshall · 2024-04-30T00:51:04Z

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.

Related issues

Fixes: #675

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

after720.mov

Updating package in portfolio works

after.portfolio720.mov

Updating package in extension works

after720.mov

Pre-merge author checklist

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

Pre-merge reviewer checklist

I've manually tested the PR (e.g., pull and build branch, review the minimized CSS in dist, test code being changed).
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 · 2024-04-30T00:51:33Z

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

Package	New capabilities	Transitives	Size	Publisher
npm/[email protected]	environment, filesystem	`0`	45.6 kB	jakub.pawlowicz
npm/[email protected]	environment, filesystem, network	`0`	493 kB	jakub.pawlowicz
npm/[email protected]	filesystem, shell	`0`	145 kB	abetomo

View full report↗︎

socket-security · 2024-04-30T00:51:36Z

👍 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/[email protected]

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/[email protected] or ignore all packages with @SocketSecurity ignore-all

georgewrmarshall · 2024-04-30T01:29:46Z

.storybook/preview.ts

@@ -1,7 +1,7 @@
 import type { Preview } from '@storybook/react';

 import '../docs/fonts/fonts.scss';
-import '../src/css/design-tokens.css';
+import '../src/css/index.css';


Updating paths in storybook, forgot to rename font.scss => font.css when we removed the sass dependency in #667

metamaskbot · 2024-04-30T01:31:29Z

Builds ready [54c9393]

Storybook: Storybook

georgewrmarshall · 2024-04-30T01:34:10Z

README.md

@@ -43,7 +43,7 @@ Currently the metamask design tokens repo supports 2 formats, CSS-in-JS and CSS
 > _Please note the file path will depend on where in your project you are importing it from._

 ```css
-@import '../../node_modules/@metamask/design-tokens/src/css/design-tokens';
+@import '@metamask/design-tokens/styles';


Updating docs to use new vanity import path

metamaskbot · 2024-04-30T01:34:25Z

Builds ready [ab93849]

Storybook: Storybook

georgewrmarshall · 2024-04-30T01:34:50Z

package.json

@@ -22,19 +22,19 @@
      "require": "./dist/index.js"
    },
    "./package.json": "./package.json",
-    "./design-tokens.css": "./src/css/design-tokens.css"
+    "./styles.css": "./dist/styles.css"


This is a breaking change and will constitute a major version update e.g. v3 if we don't want to release it as a major version we could keep the work around in the yarn workspace file and keep both. Thoughts?

georgewrmarshall · 2024-04-30T01:35:13Z

package.json

  ],
  "scripts": {
-    "build": "tsup --clean && yarn build:types",
+    "build": "tsup --clean && yarn build:types && yarn build:css",


Including the build css script using clean-css-cli

georgewrmarshall · 2024-04-30T01:36:27Z

src/css/brand-colors.css

+  --brand-colors-yellow-yellow400: #ffdf70;
+  --brand-colors-yellow-yellow500: #ffd33d;
+  --brand-colors-yellow-yellow600: #ffc70a;
+}


Separating brand colors out into a separate stylesheet. This will give us the oppurtunity to create a brand-colors-deprecated.css stylesheet in the next release of the design tokens where we can keep track of the 000 token names and any other deprecated tokens

georgewrmarshall · 2024-04-30T01:37:29Z

src/css/dark-theme-colors.css

@@ -0,0 +1,65 @@
+/**


Separating out dark theme variables

georgewrmarshall · 2024-04-30T01:37:52Z

src/css/index.css

+@import './light-theme-colors.css';
+@import './dark-theme-colors.css';
+@import './typography.css';
+@import './shadow.css';


Creating an index to store all of the separate stylesheets

georgewrmarshall · 2024-04-30T01:38:04Z

src/css/light-theme-colors.css

@@ -0,0 +1,81 @@
+/*


Light theme colors

georgewrmarshall · 2024-04-30T01:38:12Z

src/css/shadow.css

@@ -0,0 +1,10 @@
+/**


georgewrmarshall · 2024-04-30T01:41:35Z

yarn.config.cjs

@@ -275,7 +275,7 @@ module.exports = defineConfig({

    // The list of files included in the package must only include files
    // generated during the build process.
-    workspace.set('files', ['dist', 'src/css/design-tokens.css']); // TODO remove src/css/design-tokens.css and add to build script
+    workspace.set('files', ['dist']);


We can now align with the metamask-module-template workspace because everything is exported from dist

…ventions

metamaskbot · 2024-04-30T01:46:14Z

Builds ready [804a7a7]

Storybook: Storybook

metamaskbot · 2024-04-30T01:46:57Z

Builds ready [cbbee98]

Storybook: Storybook

metamaskbot · 2024-04-30T01:47:42Z

Builds ready [6958aca]

Storybook: Storybook

georgewrmarshall · 2024-04-30T20:48:41Z

@SocketSecurity ignore npm/[email protected]
We should be protected against supply chain risk by lavamoat

georgewrmarshall · 2024-05-02T21:26:30Z

MIGRATION.md

+import '../../node_modules/@metamask/design-tokens/dist/styles.css';
+```
+
+This new path points to the `dist` directory, ensuring that you're importing the most optimized and production-ready version of the stylesheet.


Adding migration guide on how to effectively update the design tokens in CSS

metamaskbot · 2024-05-02T21:27:48Z

Builds ready [6a60ad4]

Storybook: Storybook

georgewrmarshall self-assigned this Apr 30, 2024

georgewrmarshall added the team-design-system All issues relating to design system label Apr 30, 2024

georgewrmarshall changed the title ~~chore: refactoring css and improving build to adhere to workspace con…~~ chore: refactoring css and improving build to adhere to workspace conventions Apr 30, 2024

georgewrmarshall force-pushed the fix/css-architecture branch 2 times, most recently from da82d2b to 54c9393 Compare April 30, 2024 01:29

georgewrmarshall commented Apr 30, 2024

View reviewed changes

src/css/dark-theme-colors.css

@@ -0,0 +1,65 @@

/**

Copy link

Collaborator Author

georgewrmarshall Apr 30, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Separating out dark theme variables

georgewrmarshall commented Apr 30, 2024

View reviewed changes

src/css/light-theme-colors.css

@@ -0,0 +1,81 @@

/*

Copy link

Collaborator Author

georgewrmarshall Apr 30, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Light theme colors

georgewrmarshall commented Apr 30, 2024

View reviewed changes

src/css/shadow.css

@@ -0,0 +1,10 @@

/**

Copy link

Collaborator Author

georgewrmarshall Apr 30, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shadows

georgewrmarshall commented Apr 30, 2024

View reviewed changes

chore: refactoring css and improving build to adhere to workspace con…

804a7a7

…ventions

georgewrmarshall force-pushed the fix/css-architecture branch from ab93849 to 804a7a7 Compare April 30, 2024 01:44

georgewrmarshall added 2 commits April 29, 2024 18:45

chore: adding design-tokens.css

cbbee98

chore: removing design-tokens.css

6958aca

docs: adding migration guide from v2 to v3

6a60ad4

georgewrmarshall commented May 2, 2024

View reviewed changes

georgewrmarshall marked this pull request as ready for review May 2, 2024 21:28

georgewrmarshall requested a review from a team as a code owner May 2, 2024 21:28

georgewrmarshall requested a review from garrettbear May 2, 2024 22:34

garrettbear approved these changes May 3, 2024

View reviewed changes

georgewrmarshall merged commit 2f1c84b into main May 3, 2024
19 checks passed

georgewrmarshall deleted the fix/css-architecture branch May 3, 2024 04:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

georgewrmarshall commented Apr 30, 2024 •

edited

Loading

socket-security bot commented Apr 30, 2024 •

edited

Loading

socket-security bot commented Apr 30, 2024 •

edited

Loading

georgewrmarshall Apr 30, 2024 •

edited

Loading

metamaskbot commented Apr 30, 2024

georgewrmarshall Apr 30, 2024

metamaskbot commented Apr 30, 2024

georgewrmarshall Apr 30, 2024 •

edited

Loading

georgewrmarshall Apr 30, 2024 •

edited

Loading

georgewrmarshall Apr 30, 2024 •

edited

Loading

georgewrmarshall Apr 30, 2024

georgewrmarshall Apr 30, 2024

georgewrmarshall Apr 30, 2024

georgewrmarshall Apr 30, 2024

georgewrmarshall Apr 30, 2024

metamaskbot commented Apr 30, 2024

metamaskbot commented Apr 30, 2024

metamaskbot commented Apr 30, 2024

georgewrmarshall commented Apr 30, 2024

georgewrmarshall May 2, 2024

metamaskbot commented May 2, 2024

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

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

Conversation

georgewrmarshall commented Apr 30, 2024 • edited Loading

Description

Related issues

Manual testing steps

Screenshots/Recordings

After

Pre-merge author checklist

Pre-merge reviewer checklist

socket-security bot commented Apr 30, 2024 • edited Loading

socket-security bot commented Apr 30, 2024 • edited Loading

Next steps

georgewrmarshall Apr 30, 2024 • edited Loading

Choose a reason for hiding this comment

metamaskbot commented Apr 30, 2024

georgewrmarshall Apr 30, 2024

Choose a reason for hiding this comment

metamaskbot commented Apr 30, 2024

georgewrmarshall Apr 30, 2024 • edited Loading

Choose a reason for hiding this comment

georgewrmarshall Apr 30, 2024 • edited Loading

Choose a reason for hiding this comment

georgewrmarshall Apr 30, 2024 • edited Loading

Choose a reason for hiding this comment

georgewrmarshall Apr 30, 2024

Choose a reason for hiding this comment

georgewrmarshall Apr 30, 2024

Choose a reason for hiding this comment

georgewrmarshall Apr 30, 2024

Choose a reason for hiding this comment

georgewrmarshall Apr 30, 2024

Choose a reason for hiding this comment

georgewrmarshall Apr 30, 2024

Choose a reason for hiding this comment

metamaskbot commented Apr 30, 2024

metamaskbot commented Apr 30, 2024

metamaskbot commented Apr 30, 2024

georgewrmarshall commented Apr 30, 2024

georgewrmarshall May 2, 2024

Choose a reason for hiding this comment

metamaskbot commented May 2, 2024

georgewrmarshall commented Apr 30, 2024 •

edited

Loading

socket-security bot commented Apr 30, 2024 •

edited

Loading

socket-security bot commented Apr 30, 2024 •

edited

Loading

georgewrmarshall Apr 30, 2024 •

edited

Loading

georgewrmarshall Apr 30, 2024 •

edited

Loading

georgewrmarshall Apr 30, 2024 •

edited

Loading

georgewrmarshall Apr 30, 2024 •

edited

Loading