chore: update

apps/storybook-react/tailwind.css

@@ -1,19 +1,9 @@
 @import 'tailwindcss';
-@import '../../packages/design-tokens/src/css/index.css';
 @import '../../packages/design-system-tailwind-preset/src/theme.css';
 
 /* Scan the design system component library for utility classes */
 @source "../../packages/design-system-react";
 
-@theme {
-  --color-*: initial;
-  --color-inherit: inherit;
-  --color-current: currentColor;
-  --color-transparent: transparent;
-  --color-black: #000000;
-  --color-white: #ffffff;
-}
-
 /* Geist */
 @font-face {
   font-family: 'Geist';

packages/design-system-tailwind-preset/package.json

@@ -15,6 +15,7 @@
     "url": "https://github.com/MetaMask/metamask-design-system.git"
   },
   "license": "MIT",
+  "type": "module",
   "sideEffects": false,
   "exports": {
     ".": {

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

@@ -1,8 +1,8 @@
 import type { Config } from 'tailwindcss';
 
-import { colors } from './colors';
-import { shadows, shadowPlugin } from './shadows';
-import { typography } from './typography';
+import { colors } from './colors.js';
+import { shadows, shadowPlugin } from './shadows.js';
+import { typography } from './typography.js';
 
 const tailwindConfig: Config = {
   content: [],
@@ -34,4 +34,3 @@ const tailwindConfig: Config = {
 };
 
 export default tailwindConfig;
-module.exports = tailwindConfig;

packages/design-system-tailwind-preset/src/theme.css

@@ -1,6 +1,13 @@
 @import '../../design-tokens/src/css/index.css';
 
 @theme {
+  /* Essential Tailwind colors required for basic utilities */
+  --color-inherit: inherit;
+  --color-current: currentColor;
+  --color-transparent: transparent;
+  --color-black: #000000;
+  --color-white: #ffffff;
+
   /* Bridge mappings from Tailwind-expected --color-* to MetaMask --mm-color-* */
   /* Background colors */
   --color-background-default: var(--mm-color-background-default);
@@ -111,6 +118,9 @@
   --color-shadow-primary: var(--mm-color-shadow-primary);
   --color-shadow-error: var(--mm-color-shadow-error);
 
+  /* Shortcut color mappings for shorter class names */
+  /* Note: In v4, we need to define these as @utility declarations */
+
   /* Custom typography properties - these won't auto-generate, so we define them */
   /* Font Sizes - Small Screen Typography */
   --font-size-s-display-lg: var(--typography-s-display-lg-font-size);
@@ -252,13 +262,13 @@
 
   /* Box Shadows */
   --box-shadow-xs: var(--shadow-size-xs)
-    var(--shadow-color, var(--color-shadow-default));
+    var(--shadow-color, var(--mm-color-shadow-default));
   --box-shadow-sm: var(--shadow-size-sm)
-    var(--shadow-color, var(--color-shadow-default));
+    var(--shadow-color, var(--mm-color-shadow-default));
   --box-shadow-md: var(--shadow-size-md)
-    var(--shadow-color, var(--color-shadow-default));
+    var(--shadow-color, var(--mm-color-shadow-default));
   --box-shadow-lg: var(--shadow-size-lg)
-    var(--shadow-color, var(--color-shadow-default));
+    var(--shadow-color, var(--mm-color-shadow-default));
 }
 
 /* Custom Typography Utilities - These won't auto-generate from --font-size-s-* properties */
@@ -526,4 +536,65 @@
   letter-spacing: var(--letter-spacing-l-amount-display-lg);
 }
 
+/* Color Shortcut Utilities - Enable shorter class names */
+/* Text shortcuts: text-default instead of text-text-default */
+@utility text-default {
+  color: var(--mm-color-text-default);
+}
+@utility text-alternative {
+  color: var(--mm-color-text-alternative);
+}
+@utility text-muted {
+  color: var(--mm-color-text-muted);
+}
+
+/* Background shortcuts: bg-default instead of bg-background-default */
+@utility bg-default {
+  background-color: var(--mm-color-background-default);
+}
+@utility bg-default-hover {
+  background-color: var(--mm-color-background-default-hover);
+}
+@utility bg-default-pressed {
+  background-color: var(--mm-color-background-default-pressed);
+}
+@utility bg-alternative {
+  background-color: var(--mm-color-background-alternative);
+}
+@utility bg-alternative-hover {
+  background-color: var(--mm-color-background-alternative-hover);
+}
+@utility bg-alternative-pressed {
+  background-color: var(--mm-color-background-alternative-pressed);
+}
+@utility bg-section {
+  background-color: var(--mm-color-background-section);
+}
+@utility bg-subsection {
+  background-color: var(--mm-color-background-subsection);
+}
+@utility bg-muted {
+  background-color: var(--mm-color-background-muted);
+}
+@utility bg-muted-hover {
+  background-color: var(--mm-color-background-muted-hover);
+}
+@utility bg-muted-pressed {
+  background-color: var(--mm-color-background-muted-pressed);
+}
+@utility bg-hover {
+  background-color: var(--mm-color-background-hover);
+}
+@utility bg-pressed {
+  background-color: var(--mm-color-background-pressed);
+}
+
+/* Border shortcuts: border-default instead of border-border-default */
+@utility border-default {
+  border-color: var(--mm-color-border-default);
+}
+@utility border-muted {
+  border-color: var(--mm-color-border-muted);
+}
+
 /* Note: Shadow utilities with colors like shadow-primary, shadow-error will be auto-generated by Tailwind v4 */