@metamask/design-tokens - npm Package Compare versions

Comparing version 2.1.1 to 3.0.0

CHANGELOG.md

@@ -10,2 +10,32 @@ # Changelog
 
+## [3.0.0]
+
+### Added
+
+- Enabled MetaMask security code scanner ([#635](https://github.com/MetaMask/design-tokens/pull/635)).
+- Added initial JSON generated from Figma ([#665](https://github.com/MetaMask/design-tokens/pull/665)).
+
+### Changed
+
+- Refactored color swatch component and CSS stories to use CSS variables instead of hex values ([#696](https://github.com/MetaMask/design-tokens/pull/696)).
+- Upgraded Storybook to 8.1.2 ([#690](https://github.com/MetaMask/design-tokens/pull/690)).
+- Updated README to add tooling section that links to eslint-plugin ([#689](https://github.com/MetaMask/design-tokens/pull/689)).
+- Cleaned JSON token names ([#679](https://github.com/MetaMask/design-tokens/pull/679)).
+- Refactored CSS and improved build to adhere to workspace conventions ([#676](https://github.com/MetaMask/design-tokens/pull/676)).
+- Upgraded Storybook to version 8 ([#674](https://github.com/MetaMask/design-tokens/pull/674)).
+- Added initial JSON generated from Figma variables ([#673](https://github.com/MetaMask/design-tokens/pull/673)).
+- Upgraded LavaMoat ([#670](https://github.com/MetaMask/design-tokens/pull/670)).
+- Aligned release docs with the latest standards ([#634](https://github.com/MetaMask/design-tokens/pull/634)).
+
+### Fixed
+
+- Fixed CSS theme variables doc display ([#672](https://github.com/MetaMask/design-tokens/pull/672)).
+- Fixed build to align with module template ([#667](https://github.com/MetaMask/design-tokens/pull/667)).
+
+### Security
+
+- Bumped `webpack-dev-middleware` from 6.1.1 to 6.1.2 ([#636](https://github.com/MetaMask/design-tokens/pull/636)).
+- Bumped `express` from 4.18.2 to 4.19.2 ([#638](https://github.com/MetaMask/design-tokens/pull/638)).
+- Bumped `tar` from 6.2.0 to 6.2.1 ([#652](https://github.com/MetaMask/design-tokens/pull/652)).
+
 ## [2.1.1]
@@ -264,3 +294,4 @@
 
-[Unreleased]: https://github.com/MetaMask/design-tokens/compare/v2.1.1...HEAD
+[Unreleased]: https://github.com/MetaMask/design-tokens/compare/v3.0.0...HEAD
+[3.0.0]: https://github.com/MetaMask/design-tokens/compare/v2.1.1...v3.0.0
 [2.1.1]: https://github.com/MetaMask/design-tokens/compare/v2.1.0...v2.1.1
@@ -267,0 +298,0 @@ [2.1.0]: https://github.com/MetaMask/design-tokens/compare/v2.0.3...v2.1.0

package.json

 {
   "name": "@metamask/design-tokens",
-  "version": "2.1.1",
+  "version": "3.0.0",
   "description": "Design tokens to be used throughout MetaMask products",
@@ -20,8 +20,8 @@ "keywords": [
     ".": {
+      "types": "./dist/types/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./dist/types/index.d.ts"
+      "require": "./dist/index.js"
     },
     "./package.json": "./package.json",
-    "./design-tokens.css": "./src/css/design-tokens.css"
+    "./styles.css": "./dist/styles.css"
   },
@@ -32,9 +32,9 @@ "main": "./dist/index.js",
   "files": [
-    "dist",
-    "src/css/design-tokens.css"
+    "dist"
   ],
   "scripts": {
-    "build": "tsup --clean && yarn build:types",
+    "build": "tsup --clean && yarn build:types && yarn build:css",
     "build-storybook": "storybook build",
     "build:clean": "rimraf dist && yarn build",
+    "build:css": "cleancss -o dist/styles.css src/css/index.css",
     "build:types": "tsc --project tsconfig.build.json",
@@ -45,3 +45,3 @@ "lint": "yarn lint:eslint && yarn lint:constraints && yarn lint:misc --check && yarn lint:dependencies --check && yarn lint:changelog",
     "lint:dependencies": "depcheck && yarn dedupe",
-    "lint:eslint": "eslint . --cache --ext js,ts",
+    "lint:eslint": "eslint . --cache --ext js,cjs,ts",
     "lint:fix": "yarn lint:eslint --fix && yarn lint:constraints --fix && yarn lint:misc --write && yarn lint:dependencies && yarn lint:changelog",
@@ -56,9 +56,11 @@ "lint:misc": "prettier '**/*.json' '**/*.md' '**/*.yml' '!.yarnrc.yml' --ignore-path .gitignore --no-error-on-unmatched-pattern",
   },
+  "resolutions": {
+    "@storybook/node-logger": "7.6.16"
+  },
   "devDependencies": {
-    "@babel/core": "^7.17.0",
-    "@babel/preset-env": "^7.23.2",
-    "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.23.2",
-    "@lavamoat/allow-scripts": "^2.3.1",
-    "@lavamoat/preinstall-always-fail": "^1.0.0",
+    "@babel/core": "^7.24.4",
+    "@babel/preset-react": "^7.24.1",
+    "@chromatic-com/storybook": "^1.4.0",
+    "@lavamoat/allow-scripts": "^3.0.4",
+    "@lavamoat/preinstall-always-fail": "^2.0.0",
     "@metamask/auto-changelog": "^3.4.3",
@@ -69,18 +71,20 @@ "@metamask/eslint-config": "^12.2.0",
     "@metamask/eslint-config-typescript": "^12.1.0",
-    "@storybook/addon-a11y": "^7.6.10",
-    "@storybook/addon-actions": "^7.6.10",
-    "@storybook/addon-essentials": "^7.6.10",
-    "@storybook/addon-links": "^7.6.10",
-    "@storybook/addon-mdx-gfm": "^7.6.10",
-    "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^7.6.10",
-    "@storybook/react-webpack5": "^7.6.10",
+    "@storybook/addon-essentials": "^8.1.2",
+    "@storybook/addon-interactions": "^8.1.2",
+    "@storybook/addon-links": "^8.1.2",
+    "@storybook/blocks": "^8.1.2",
+    "@storybook/react": "^8.1.2",
+    "@storybook/react-vite": "^8.1.2",
+    "@storybook/test": "^8.1.2",
+    "@types/babel__core": "^7",
     "@types/jest": "^28.1.6",
-    "@types/node": "^16",
+    "@types/node": "^18",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
     "@typescript-eslint/eslint-plugin": "^5.43.0",
     "@typescript-eslint/parser": "^5.43.0",
-    "babel-loader": "^8.2.3",
-    "css-loader": "5.2.7",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@yarnpkg/types": "^4.0.0-rc.52",
+    "clean-css-cli": "^5.6.3",
     "depcheck": "^1.4.3",
-    "dependency-tree": "^8.1.2",
     "eslint": "^8.44.0",
@@ -92,6 +96,5 @@ "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-n": "^15.7.0",
-    "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.8.0",
     "jest": "^28.1.3",
@@ -102,9 +105,7 @@ "jest-it-up": "^2.0.2",
     "prettier-plugin-packagejson": "^2.3.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "rimraf": "^3.0.2",
-    "sass": "^1.54.3",
-    "sass-loader": "10.1.1",
-    "storybook": "^7.6.10",
-    "style-loader": "2.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "remark-gfm": "^4.0.0",
+    "sass": "^1.75.0",
+    "storybook": "^8.1.2",
     "ts-jest": "^28.0.7",
@@ -114,5 +115,5 @@ "ts-node": "^10.7.0",
     "typescript": "~4.8.4",
-    "webpack": "5"
+    "vite": "^5.2.10"
   },
-  "packageManager": "yarn@3.2.1",
+  "packageManager": "yarn@4.1.1",
   "engines": {
@@ -128,12 +129,6 @@ "node": "^18.18 || >=20"
       "@lavamoat/preinstall-always-fail": false,
-      "core-js": false,
-      "fsevents": false,
-      "core-js-pure": false,
-      "esbuild": false,
-      "@swc/core": false,
-      "@storybook/react-webpack5>@storybook/preset-react-webpack>@pmmmwh/react-refresh-webpack-plugin>core-js-pure": false,
-      "tsup>@swc/core": false,
-      "tsup>esbuild": false
+      "tsup>esbuild": true,
+      "vite>esbuild": false
     }
   }
 }

README.md

@@ -16,3 +16,4 @@ # MetaMask Design Tokens 🪙
   - [CSS Variables](#css-variables)
-  - [CSS-in-JS (React Native)](#css-in-js-react-native)
+  - [CSS-in-JS](#css-in-js-react-native)
+- [Tooling](#tooling)
 - [Contributing](#contributing)
@@ -32,18 +33,18 @@ - [Setup](#setup)
 
-Currently the metamask design tokens repo supports 2 formats. CSS-in-JS for React Native applications and CSS variables for web applications. These formats are based on its primary consumers [metamask-extension](https://github.com/MetaMask/metamask-extension) and [metamask-mobile](https://github.com/MetaMask/metamask-mobile).
+`yarn add @metamask/design-tokens`
 
-### CSS Variables
+or
 
-1. Install the package.
+`npm install @metamask/design-tokens`
 
-```sh
-yarn add @metamask/design-tokens
-```
+Currently the metamask design tokens repo supports 2 formats, CSS-in-JS and CSS variables. These formats are based on its primary consumers [metamask-mobile](https://github.com/MetaMask/metamask-mobile), [metamask-extension](https://github.com/MetaMask/metamask-extension) and [metamask-portfolio](https://github.com/consensys-vertical-apps/metamask-portfolio) .
 
-Import the design tokens stylesheet into your CSS or SCSS.
+### CSS Variables
 
-Please note the file path will depend on where in your project you are importing it from.
+1. Import the design tokens stylesheet into your CSS or SCSS.
 
+> _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';
 ```
@@ -53,5 +54,4 @@
 
-In CSS/SCSS:
-
 ```css
+/* In CSS/SCSS */
 .card {
@@ -68,22 +68,15 @@ --card-color-text: var(--color-text-default);
 
-They also work for inline styles in javascript
-
 ```js
+// They also work for inline styles in javascript
 <div style={{ color: 'var(--color-error-default)' }}>This was is an error</div>
 ```
 
-### CSS-in-JS (React Native)
+### CSS-in-JS
 
-1. Install the package.
+1. Use design tokens in code by importing from library:
 
-```sh
-yarn add @metamask/design-tokens
-```
-
-2. Use design tokens in code by importing from library:
-
 ```js
 import { lightTheme, darkTheme } from '@metamask/design-tokens';
 
-// Create provider that swaps theme (sudo code)
+// Create provider that swaps theme (pseudo code)
 <ThemeProvider theme={theme === 'default' ? lightTheme : darkTheme} />;
@@ -104,2 +97,37 @@
 
+## Tooling
+
+To prevent color tech debt and ensure themability, accessibility, and consistency of the MetaMask brand, we recommend using [@metamask/eslint-plugin-design-tokens](https://github.com/MetaMask/eslint-plugin-design-tokens). This ESLint plugin helps enforce the usage of design tokens in your codebase.
+
+You'll first need to install [ESLint](https://eslint.org):
+
+```shell
+$ npm install --save-dev eslint
+# or
+$ yarn add --dev eslint
+```
+
+Next, install `@metamask/eslint-plugin-design-tokens`:
+
+```shell
+$ npm install --save-dev @metamask/eslint-plugin-design-tokens
+# or
+$ yarn add --dev @metamask/eslint-plugin-design-tokens
+```
+
+### Configuration
+
+Add `eslint-plugin-design-tokens` to your ESLint configuration:
+
+```json
+{
+  "plugins": ["@metamask/design-tokens"],
+  "rules": {
+    "@metamask/design-tokens/color-no-hex": "warn"
+  }
+}
+```
+
+This configuration will enforce the usage of design tokens instead of static hex color values, helping to maintain a consistent design system. See more [supported rules](https://github.com/MetaMask/eslint-plugin-design-tokens?tab=readme-ov-file#supported-rules)
+
 ## Contributing
@@ -169,4 +197,4 @@
 
-   - Be very careful to use a clean local environment to publish the release, and follow exactly the same steps used during CI.
-   - Use `npm publish --dry-run` to examine the release contents to ensure the correct files are included. Compare to previous releases if necessary (e.g. using `https://unpkg.com/browse/[package name]@[package version]/`).
-   - Once you are confident the release contents are correct, publish the release using `npm publish`.
+   - Wait for the `publish-release` GitHub Action workflow to finish. This should trigger a second job (`publish-npm`), which will wait for a run approval by the [`npm publishers`](https://github.com/orgs/MetaMask/teams/npm-publishers) team.
+   - Approve the `publish-npm` job (or ask somebody on the npm publishers team to approve it for you).
+   - Once the `publish-npm` job has finished, check npm to verify that it has been published.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

200407

increased by0.22%

Dev dependency count

52

decreased by-3.7%

Number of lines in readme file

195

increased by16.77%

Worsened metrics

Lines of code

2673

decreased by-13.3%

No dependency changes