chore: update

packages/design-system-react/src/components/Text/Text.constants.ts

@@ -1,34 +1,20 @@
 import { TextVariant } from '../../types';
 
 export const CLASSMAP_TEXT_VARIANT_FONTSTYLE: Record<TextVariant, string> = {
-  [TextVariant.DisplayLg]:
-    'text-s-display-lg leading-s-display-lg tracking-s-display-lg md:text-l-display-lg md:leading-l-display-lg md:tracking-l-display-lg',
-  [TextVariant.DisplayMd]:
-    'text-s-display-md leading-s-display-md tracking-s-display-md md:text-l-display-md md:leading-l-display-md md:tracking-l-display-md',
-  [TextVariant.HeadingLg]:
-    'text-s-heading-lg leading-s-heading-lg tracking-s-heading-lg md:text-l-heading-lg md:leading-l-heading-lg md:tracking-l-heading-lg',
-  [TextVariant.HeadingMd]:
-    'text-s-heading-md leading-s-heading-md tracking-s-heading-md md:text-l-heading-md md:leading-l-heading-md md:tracking-l-heading-md',
-  [TextVariant.HeadingSm]:
-    'text-s-heading-sm leading-s-heading-sm tracking-s-heading-sm md:text-l-heading-sm md:leading-l-heading-sm md:tracking-l-heading-sm',
-  [TextVariant.BodyLg]:
-    'text-s-body-lg leading-s-body-lg tracking-s-body-lg md:text-l-body-lg md:leading-l-body-lg md:tracking-l-body-lg',
-  [TextVariant.BodyMd]:
-    'text-s-body-md leading-s-body-md tracking-s-body-md md:text-l-body-md md:leading-l-body-md md:tracking-l-body-md',
-  [TextVariant.BodySm]:
-    'text-s-body-sm leading-s-body-sm tracking-s-body-sm md:text-l-body-sm md:leading-l-body-sm md:tracking-l-body-sm',
-  [TextVariant.BodyXs]:
-    'text-s-body-xs leading-s-body-xs tracking-s-body-xs md:text-l-body-xs md:leading-l-body-xs md:tracking-l-body-xs',
-  [TextVariant.PageHeading]:
-    'text-s-page-heading leading-s-page-heading tracking-s-page-heading md:text-l-page-heading md:leading-l-page-heading md:tracking-l-page-heading',
-  [TextVariant.SectionHeading]:
-    'text-s-section-heading leading-s-section-heading tracking-s-section-heading md:text-l-section-heading md:leading-l-section-heading md:tracking-l-section-heading',
-  [TextVariant.ButtonLabelMd]:
-    'text-s-button-label-md leading-s-button-label-md tracking-s-button-label-md md:text-l-button-label-md md:leading-l-button-label-md md:tracking-l-button-label-md',
-  [TextVariant.ButtonLabelLg]:
-    'text-s-button-label-lg leading-s-button-label-lg tracking-s-button-label-lg md:text-l-button-label-lg md:leading-l-button-label-lg md:tracking-l-button-label-lg',
-  [TextVariant.AmountDisplayLg]:
-    'text-s-amount-display-lg leading-s-amount-display-lg tracking-s-amount-display-lg md:text-l-amount-display-lg md:leading-l-amount-display-lg md:tracking-l-amount-display-lg',
+  [TextVariant.DisplayLg]: 'text-display-lg',
+  [TextVariant.DisplayMd]: 'text-display-md',
+  [TextVariant.HeadingLg]: 'text-heading-lg',
+  [TextVariant.HeadingMd]: 'text-heading-md',
+  [TextVariant.HeadingSm]: 'text-heading-sm',
+  [TextVariant.BodyLg]: 'text-body-lg',
+  [TextVariant.BodyMd]: 'text-body-md',
+  [TextVariant.BodySm]: 'text-body-sm',
+  [TextVariant.BodyXs]: 'text-body-xs',
+  [TextVariant.PageHeading]: 'text-page-heading',
+  [TextVariant.SectionHeading]: 'text-section-heading',
+  [TextVariant.ButtonLabelMd]: 'text-button-label-md',
+  [TextVariant.ButtonLabelLg]: 'text-button-label-lg',
+  [TextVariant.AmountDisplayLg]: 'text-amount-display-lg',
 };
 
 export const CLASSMAP_TEXT_VARIANT_FONTWEIGHT: Record<TextVariant, string> = {

packages/design-system-react/src/utils/tw-merge.ts

@@ -1,34 +1,20 @@
 import { extendTailwindMerge } from 'tailwind-merge';
 
 const variantClassGroups = [
-  's-display-lg',
-  's-display-md',
-  's-heading-lg',
-  's-heading-md',
-  's-heading-sm',
-  's-body-lg',
-  's-body-md',
-  's-body-sm',
-  's-body-xs',
-  'l-display-lg',
-  'l-display-md',
-  'l-heading-lg',
-  'l-heading-md',
-  'l-heading-sm',
-  'l-body-lg',
-  'l-body-md',
-  'l-body-sm',
-  'l-body-xs',
-  's-page-heading',
-  's-section-heading',
-  's-button-label-md',
-  's-button-label-lg',
-  's-amount-display-lg',
-  'l-page-heading',
-  'l-section-heading',
-  'l-button-label-md',
-  'l-button-label-lg',
-  'l-amount-display-lg',
+  'display-lg',
+  'display-md',
+  'heading-lg',
+  'heading-md',
+  'heading-sm',
+  'body-lg',
+  'body-md',
+  'body-sm',
+  'body-xs',
+  'page-heading',
+  'section-heading',
+  'button-label-md',
+  'button-label-lg',
+  'amount-display-lg',
 ];
 
 /**

packages/design-system-tailwind-preset/jest.config.js

@@ -3,13 +3,15 @@
  * https://jestjs.io/docs/configuration
  */
 
-const path = require('path');
+import path from 'path';
+import { createRequire } from 'module';
 
+const require = createRequire(import.meta.url);
 const baseConfig = require('../../jest.config.packages');
 
-const displayName = path.basename(__dirname);
+const displayName = path.basename(new URL('.', import.meta.url).pathname);
 
-module.exports = {
+export default {
   // Spread the base configuration to inherit all default settings
   ...baseConfig,
 

packages/design-system-tailwind-preset/scripts/testUtils.ts

@@ -11,7 +11,7 @@ import { parse } from 'postcss';
  * parses its content using PostCSS, and collects all CSS variables that match any of the specified prefixes.
  *
  * @param prefixes - (Optional) An array of prefixes to filter CSS variables. Defaults to ['--'].
- * For example, ['--color'] will only collect variables that start with '--color'.
+ * For example, ['--mm-color'] will only collect variables that start with '--mm-color'.
  * @returns A Promise that resolves to a Set containing the filtered CSS variable names.
  */
 export const getDesignTokenVariables = async (

packages/design-system-tailwind-preset/src/colors.test.ts

@@ -11,20 +11,20 @@ describe('Color Preset', () => {
 
   // Define CSS variables to ignore in the unused variables check
   const ignoreList: string[] = [
-    '--color-shadow-default', // used in shadow.ts
-    '--color-shadow-primary', // used in shadow.ts
-    '--color-shadow-error', // used in shadow.ts
-    '--color-flask-default', // not needed for tailwind
-    '--color-flask-inverse', // not needed for tailwind
+    '--mm-color-shadow-default', // used in shadow.ts
+    '--mm-color-shadow-primary', // used in shadow.ts
+    '--mm-color-shadow-error', // used in shadow.ts
+    '--mm-color-flask-default', // not needed for tailwind
+    '--mm-color-flask-inverse', // not needed for tailwind
   ];
 
   /**
    * Test to ensure that all CSS variables used in the 'colors' object
    * are defined in the @metamask/design-tokens package.
    */
   it('should use only CSS variables that exist in @metamask/design-tokens', async () => {
-    // Retrieve all design token variables that start with '--color'
-    const designTokens = await getDesignTokenVariables(['--color']);
+    // Retrieve all design token variables that start with '--mm-color'
+    const designTokens = await getDesignTokenVariables(['--mm-color']);
 
     // Identify any used variables that are missing from the design tokens
     const missingVariables = usedVariables.filter(
@@ -41,8 +41,8 @@ describe('Color Preset', () => {
    * excluding those in the ignore list.
    */
   it('should not have unused CSS variables in @metamask/design-tokens', async () => {
-    // Retrieve all design token variables that start with '--color'
-    const designTokens = await getDesignTokenVariables(['--color']);
+    // Retrieve all design token variables that start with '--mm-color'
+    const designTokens = await getDesignTokenVariables(['--mm-color']);
 
     // Create sets for used variables and ignored variables for efficient lookup
     const usedSet = new Set(usedVariables);

packages/design-system-tailwind-preset/src/shadows.test.ts

@@ -22,9 +22,9 @@ describe('Shadows', () => {
    * are defined in the @metamask/design-tokens package.
    */
   it('should use only shadow color and size CSS variables that exist in @metamask/design-tokens', async () => {
-    // Retrieve all design token variables that start with '--color-shadow' and '--shadow-size'
+    // Retrieve all design token variables that start with '--mm-color-shadow' and '--shadow-size'
     const designTokens = await getDesignTokenVariables([
-      '--color-shadow',
+      '--mm-color-shadow',
       '--shadow-size',
     ]);
 
@@ -42,9 +42,9 @@ describe('Shadows', () => {
    * design-tokens package that are not used in the 'shadows' object.
    */
   it('should not have unused shadow color and size CSS variables in @metamask/design-tokens', async () => {
-    // Retrieve all design token variables that start with '--color-shadow' and '--shadow-size'
+    // Retrieve all design token variables that start with '--mm-color-shadow' and '--shadow-size'
     const designTokens = await getDesignTokenVariables([
-      '--color-shadow',
+      '--mm-color-shadow',
       '--shadow-size',
     ]);
 

packages/design-system-tailwind-preset/src/shadows.ts

@@ -4,7 +4,7 @@ const plugin = require('tailwindcss/plugin');
 
 /**
  * We want to allow for the combination of shadow size and color utilities.
- * Shadow size should default to --color-shadow-default.
+ * Shadow size should default to --shadow-md.
  * e.g. className="shadow-md" (size medium / color default)
  * We also want to allow for the combination of shadow size and color utilities.
  * e.g. className="shadow-md shadow-primary" (size medium / color primary)