Merge branch 'master' into 1-api-sdk-migrate

.eslintrc

@@ -11,6 +11,12 @@
       "rules": {
         "@typescript-eslint/no-var-requires": "off"
       }
+    },
+    {
+      "files": "**/*.md",
+      "rules": {
+        "no-multiple-empty-lines": ["error", { "max": 2 }]
+      }
     }
   ],
   "extends": [

README.md

@@ -44,8 +44,23 @@ One thing that's not documented is how to properly do Markdown inside tabs. For
 ```
 
 ### Live Code Blocks
+
 Rather than implementing our own live code blocks, we use the [`remark-codesandbox`](https://github.com/kevin940726/remark-codesandbox/) Remark plugin. This allows us to define a code block that will be loaded live in a CodeSandbox iframe, by adding a meta to the codeblock, like ```javascript codesandbox=vanilla
 
 This allows us to keep our code blocks versioned and in our codebase, while giving us the full power of CodeSandbox to showcase any example we want, with any dependency we want.
 
-The plugin allows for simple codeblocks where the content of the block replaces the CodeSandbox entry point, or more complex examples that can be loaded directly from the filesystem, by using `codesandbox=file:./example-folder`, as detailed in the plugin's documentation.
+The plugin allows for simple codeblocks where the content of the block replaces the CodeSandbox entry point, or more complex examples that can be loaded directly from the filesystem, by using `codesandbox=file:./example-folder`, as detailed in the plugin's documentation.
+
+### Styling:
+
+In this repository, we use design tokens [implemented here](https://github.com/MetaMask/design-tokens). These design tokens are available as CSS variables, which makes it easy for developers to use them in their code.
+
+By using design tokens, we ensure consistency in the design of the Metamask user interface across different platforms and devices. To use the design tokens in your code, simply reference the CSS variables in your styles.
+
+For example, to use the primary color of the Metamask design, you would use the following CSS code:
+
+```css
+color: var(--color-text-default);
+```
+
+You can refer to all design tokens in the [design-tokens](https://github.com/MetaMask/design-tokens/blob/main/src/css/design-tokens.css) repository.

package.json

@@ -18,6 +18,7 @@
     "@docusaurus/core": "2.2.0",
     "@docusaurus/preset-classic": "2.2.0",
     "@mdx-js/react": "^1.6.22",
+    "@metamask/design-tokens": "^1.11.1",
     "clsx": "^1.2.1",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",

src/css/custom.css

@@ -1,30 +1,30 @@
+@import "../../node_modules/@metamask/design-tokens/src/css/design-tokens";
+
 /**
  * Any CSS included here will be global. The classic template
  * bundles Infima by default. Infima is a CSS framework designed to
  * work well for content-centric websites.
  */
-
 /* You can override the default Infima variables here. */
-:root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
-  --ifm-code-font-size: 95%;
+: root {
+  --ifm-color-primary: var(--brand-colors-blue-blue500);
+  --ifm-color-primary-dark: var(--brand-colors-blue-blue600);
+  --ifm-color-primary-darker: var(--brand-colors-blue-blue700);
+  --ifm-color-primary-darkest: var(--brand-colors-blue-blue800);
+  --ifm-color-primary-light: var(--brand-colors-blue-blue400);
+  --ifm-color-primary-lighter: var(--brand-colors-blue-blue300);
+  --ifm-color-primary-lightest: var(--brand-colors-blue-blue200);
+  --ifm-code-font-size: var(--font-size-3);
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
-[data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
+[data-theme="dark"] {
+  --ifm-color-primary: var(--brand-colors-blue-blue400);
+  --ifm-color-primary-dark: var(--brand-colors-blue-blue500);
+  --ifm-color-primary-darker: var(--brand-colors-blue-blue600);
+  --ifm-color-primary-darkest: var(--brand-colors-blue-blue700);
+  --ifm-color-primary-light: var(--brand-colors-blue-blue300);
+  --ifm-color-primary-lightest: var(--brand-colors-blue-blue200);
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }

yarn.lock

@@ -1753,6 +1753,11 @@
   resolved "https://registry.yarnpkg.com/@mdx-js/util/-/util-1.6.22.tgz#219dfd89ae5b97a8801f015323ffa4b62f45718b"
   integrity sha512-H1rQc1ZOHANWBvPcW+JpGwr+juXSxM8Q8YCkm3GhZd8REu1fHR3z99CErO1p9pkcfcxZnMdIZdIsXkOHY0NilA==
 
+"@metamask/design-tokens@^1.11.1":
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/@metamask/design-tokens/-/design-tokens-1.11.1.tgz#58cc57101e3f7024538b0bf4b56b8233008ff28d"
+  integrity sha512-N+exN94rudeeAqjq47/BEugOgkMP6te1Mak+6xujzuISBoFMi0VK3JvPivG8MYlFE33yz+75YL+kDqP9GrYfEQ==
+
 "@nodelib/[email protected]":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"