Update Design Tokens & Add New Text Variants (#19853)

* update button font weight to medium

* update design-tokens and add new Text medium

* undo button base weight change

* fix unused import

* update snapshot

* fix yarn dedupe

* update readme

.storybook/3.COLORS.stories.mdx

@@ -50,7 +50,13 @@ Theme colors are color agnostic, semantically neutral and theme compatible desig
 ```css
 /** Backgrounds */
 var(--color-background-default)
+var(--color-background-default-hover)
+var(--color-background-default-pressed)
 var(--color-background-alternative)
+var(--color-background-alternative-hover)
+var(--color-background-alternative-pressed)
+var(--color-background-hover)
+var(--color-background-pressed)
 
 /** Text */
 var(--color-text-default)

package.json

@@ -230,7 +230,7 @@
     "@metamask/browser-passworder": "^4.1.0",
     "@metamask/contract-metadata": "^2.3.1",
     "@metamask/controller-utils": "^4.0.1",
-    "@metamask/design-tokens": "^1.9.0",
+    "@metamask/design-tokens": "^1.12.0",
     "@metamask/desktop": "^0.3.0",
     "@metamask/eth-json-rpc-middleware": "^11.0.0",
     "@metamask/eth-keyring-controller": "^10.0.1",

ui/components/component-library/button-base/button-base.js

@@ -8,7 +8,7 @@ import { Text } from '../text';
 
 import {
   AlignItems,
-  DISPLAY,
+  Display,
   JustifyContent,
   TextColor,
   TextVariant,
@@ -65,7 +65,7 @@ export const ButtonBase = ({
         className,
       )}
       disabled={disabled}
-      display={DISPLAY.INLINE_FLEX}
+      display={Display.InlineFlex}
       justifyContent={JustifyContent.center}
       alignItems={AlignItems.center}
       borderRadius={BorderRadius.pill}

ui/components/component-library/text/README.mdx

@@ -31,9 +31,12 @@ Use the `variant` prop and the `TextVariant` enum from `./ui/helpers/constants/d
 - TextVariant.bodyLgMedium (default renders as `p` tag)
 - TextVariant.bodyMd (default renders as `p` tag)
 - TextVariant.bodyMdBold (default renders as `p` tag)
+- TextVariant.bodyMdMedium (default renders as `p` tag)
 - TextVariant.bodySm (default renders as `p` tag)
+- TextVariant.bodySmMedium (default renders as `p` tag)
 - TextVariant.bodySmBold (default renders as `p` tag)
 - TextVariant.bodyXs (default renders as `p` tag)
+- TextVariant.bodyXsMedium (default renders as `p` tag)
 - TextVariant.inherit (default renders as `span` tag)
 
 <Canvas>
@@ -51,9 +54,12 @@ import { TextVariant } from '../../../helpers/constants/design-system';
 <Text variant={TextVariant.bodyLgMedium}>body-lg-medium</Text>
 <Text variant={TextVariant.bodyMd}>body-md</Text>
 <Text variant={TextVariant.bodyMdBold}>body-md-bold</Text>
+<Text variant={TextVariant.bodyMdMedium}>body-md-medium</Text>
 <Text variant={TextVariant.bodySm}>body-sm</Text>
+<Text variant={TextVariant.bodySmMedium}>body-sm-medium</Text>
 <Text variant={TextVariant.bodySmBold}>body-sm-bold</Text>
 <Text variant={TextVariant.bodyXs}>body-xs</Text>
+<Text variant={TextVariant.bodyXsMedium}>body-xs-medium</Text>
 <Text variant={TextVariant.inherit}>inherit</Text>
 ```
 

ui/components/component-library/text/__snapshots__/text.test.tsx.snap

@@ -32,6 +32,11 @@ exports[`Text should render the Text with proper variant class name 1`] = `
   >
     body-md
   </p>
+  <p
+    class="box mm-text mm-text--body-md-medium box--flex-direction-row box--color-text-default"
+  >
+    body-md-medium
+  </p>
   <p
     class="box mm-text mm-text--body-md-bold box--flex-direction-row box--color-text-default"
   >
@@ -42,6 +47,11 @@ exports[`Text should render the Text with proper variant class name 1`] = `
   >
     body-sm
   </p>
+  <p
+    class="box mm-text mm-text--body-sm-medium box--flex-direction-row box--color-text-default"
+  >
+    body-sm-medium
+  </p>
   <p
     class="box mm-text mm-text--body-sm-bold box--flex-direction-row box--color-text-default"
   >
@@ -52,5 +62,10 @@ exports[`Text should render the Text with proper variant class name 1`] = `
   >
     body-xs
   </p>
+  <p
+    class="box mm-text mm-text--body-xs-medium box--flex-direction-row box--color-text-default"
+  >
+    body-xs-medium
+  </p>
 </div>
 `;

ui/components/component-library/text/text.scss

@@ -4,7 +4,7 @@
 $text-variants: (
   display: ("md"),
   heading: ( "sm", "md", "lg"),
-  body: ("xs", "sm", "sm-bold", "md", "md-bold", "lg-medium"),
+  body: ("xs", "xs-medium", "sm", "sm-medium", "sm-bold", "md", "md-medium", "md-bold", "lg-medium"),
 );
 
 // Variable output mixin

ui/components/component-library/text/text.test.tsx

@@ -76,10 +76,13 @@ describe('Text', () => {
         <Text variant={TextVariant.headingSm}>heading-sm</Text>
         <Text variant={TextVariant.bodyLgMedium}>body-lg-medium</Text>
         <Text variant={TextVariant.bodyMd}>body-md</Text>
+        <Text variant={TextVariant.bodyMdMedium}>body-md-medium</Text>
         <Text variant={TextVariant.bodyMdBold}>body-md-bold</Text>
         <Text variant={TextVariant.bodySm}>body-sm</Text>
+        <Text variant={TextVariant.bodySmMedium}>body-sm-medium</Text>
         <Text variant={TextVariant.bodySmBold}>body-sm-bold</Text>
         <Text variant={TextVariant.bodyXs}>body-xs</Text>
+        <Text variant={TextVariant.bodyXsMedium}>body-xs-medium</Text>
       </>,
     );
 
@@ -89,10 +92,13 @@ describe('Text', () => {
     expect(getByText('heading-sm')).toHaveClass('mm-text--heading-sm');
     expect(getByText('body-lg-medium')).toHaveClass('mm-text--body-lg-medium');
     expect(getByText('body-md')).toHaveClass('mm-text--body-md');
+    expect(getByText('body-md-medium')).toHaveClass('mm-text--body-md-medium');
     expect(getByText('body-md-bold')).toHaveClass('mm-text--body-md-bold');
     expect(getByText('body-sm')).toHaveClass('mm-text--body-sm');
+    expect(getByText('body-sm-medium')).toHaveClass('mm-text--body-sm-medium');
     expect(getByText('body-sm-bold')).toHaveClass('mm-text--body-sm-bold');
     expect(getByText('body-xs')).toHaveClass('mm-text--body-xs');
+    expect(getByText('body-xs-medium')).toHaveClass('mm-text--body-xs-medium');
     expect(container).toMatchSnapshot();
   });
 

ui/components/component-library/text/text.types.ts

@@ -86,9 +86,12 @@ export interface TextProps extends BoxProps {
    * `headingSm` large screen: 18px / small screen: 16px,
    * `bodyLgMedium` large screen: 18px / small screen: 16px,
    * `bodyMd` large screen: 16px / small screen: 14px,
+   * `bodyMdMedium` large screen: 16px / small screen: 14px,
    * `bodyMdBold` large screen: 16px / small screen: 14px,
    * `bodySm` large screen: 14px / small screen: 12px,
+   * `bodySmMedium` large screen: 14px / small screen: 12px,
    * `bodySmBold` large screen: 14px / small screen: 12px,
+   * `bodyXsMedium` large screen: 12px / small screen: 10px,
    * `bodyXs` large screen: 12px / small screen: 10px,
    * `inherit`
    */

ui/helpers/constants/design-system.ts

@@ -187,10 +187,13 @@ export enum TextVariant {
   headingSm = 'heading-sm',
   bodyLgMedium = 'body-lg-medium',
   bodyMd = 'body-md',
+  bodyMdMedium = 'body-md-medium',
   bodyMdBold = 'body-md-bold',
   bodySm = 'body-sm',
+  bodySmMedium = 'body-sm-medium',
   bodySmBold = 'body-sm-bold',
   bodyXs = 'body-xs',
+  bodyXsMedium = 'body-xs-medium',
   inherit = 'inherit',
 }
 

yarn.lock

@@ -4024,10 +4024,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask/design-tokens@npm:^1.6.0, @metamask/design-tokens@npm:^1.9.0":
+"@metamask/design-tokens@npm:^1.12.0, @metamask/design-tokens@npm:^1.6.0":
-  version: 1.11.1
+  version: 1.12.0
-  resolution: "@metamask/design-tokens@npm:1.11.1"
+  resolution: "@metamask/design-tokens@npm:1.12.0"
-  checksum: 38677f66167861826c35f7b0e6efc3c69269178e3dad5de41a9c9a7925dfb1f560f673e02a51acd7f7983762546130132f83dcaefe8ab47e16301775cff0b968
+  checksum: 9b6c5485c846171aa7fcef03cbe93b4d94ffaa76faf953aa27a689fd3d494438cd657de6ea1aa5a40cc2af15dcf10f8dd860fd3d90f5e9806807e37020bdccd9
   languageName: node
   linkType: hard
 
@@ -24489,7 +24489,7 @@ __metadata:
     "@metamask/browser-passworder": ^4.1.0
     "@metamask/contract-metadata": ^2.3.1
     "@metamask/controller-utils": ^4.0.1
-    "@metamask/design-tokens": ^1.9.0
+    "@metamask/design-tokens": ^1.12.0
     "@metamask/desktop": ^0.3.0
     "@metamask/eslint-config": ^9.0.0
     "@metamask/eslint-config-jest": ^9.0.0