@metamask/design-system-twrnc-preset 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.2.0]
+
+### Added
+
+- Added classnames for 5 new text styles: page heading, section heading, button labels, and amount display ([#777](https://github.com/MetaMask/metamask-design-system/pull/777))
+- Added functionality to improve developer experience with tailwind intellisense and linting for react native ([#783](https://github.com/MetaMask/metamask-design-system/pull/783))
+
 ## [0.1.0]
 
 ### Added
@@ -18,5 +25,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - MetaMask design token integration for React Native
 - TWRNC preset configuration with MetaMask styling utilities
 
-[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-twrnc-preset@0.1.0...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-twrnc-preset@0.2.0...HEAD
+[0.2.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-twrnc-preset@0.1.0...@metamask/design-system-twrnc-preset@0.2.0
 [0.1.0]: https://github.com/MetaMask/metamask-design-system/releases/tag/@metamask/design-system-twrnc-preset@0.1.0

package/README.md

@@ -26,6 +26,101 @@ or
 npm install react@^18.2.0 react-native@0.72.15 twrnc@^4.5.1
 ```
 
+## Usage
+
+### Using the Theme Provider
+
+```tsx
+import {
+  ThemeProvider,
+  Theme,
+  useTailwind,
+} from '@metamask/design-system-twrnc-preset';
+
+function App() {
+  return (
+    <ThemeProvider theme={Theme.Light}>
+      <MyComponent />
+    </ThemeProvider>
+  );
+}
+
+function MyComponent() {
+  const tw = useTailwind();
+
+  return (
+    <View style={tw`p-4 bg-background-default`}>
+      <Text style={tw`text-text-default text-heading-lg`}>
+        Hello MetaMask Design System!
+      </Text>
+    </View>
+  );
+}
+```
+
+### Tailwind Config for IntelliSense
+
+To get Tailwind IntelliSense and ESLint plugin support, use the config generator:
+
+**TypeScript:**
+
+```typescript
+// tailwind.config.ts
+import {
+  generateTailwindConfig,
+  Theme,
+} from '@metamask/design-system-twrnc-preset/tailwind.config';
+
+export default {
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+  ...generateTailwindConfig(Theme.Light),
+};
+```
+
+**JavaScript:**
+
+```javascript
+// tailwind.config.js
+const {
+  generateTailwindConfig,
+  Theme,
+} = require('@metamask/design-system-twrnc-preset/tailwind.config');
+
+module.exports = {
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+  ...generateTailwindConfig(Theme.Light),
+};
+```
+
+**Custom content paths:**
+
+```typescript
+// tailwind.config.ts
+import {
+  generateTailwindConfig,
+  Theme,
+} from '@metamask/design-system-twrnc-preset/tailwind.config';
+
+export default {
+  content: [
+    './src/**/*.{js,jsx,ts,tsx}',
+    './app/**/*.{js,jsx,ts,tsx}',
+    './components/**/*.{js,jsx,ts,tsx}',
+    './screens/**/*.{js,jsx,ts,tsx}',
+    './lib/**/*.{js,jsx,ts,tsx}',
+  ],
+  ...generateTailwindConfig(Theme.Light),
+};
+```
+
+This provides:
+
+- 🎨 **Full IntelliSense support** - Auto-completion for all design system classes
+- 🔍 **ESLint integration** - Works with `eslint-plugin-tailwindcss`
+- 🌙 **Theme agnostic** - Classnames work with both light and dark themes
+- 📝 **Type safety** - TypeScript definitions for all design tokens
+- ⚡ **Actual Design System Config** - Uses the same configuration as the TWRNC preset
+
 ## Contributing
 
 This package is part of a monorepo. Instructions for contributing can be found in the [monorepo README](https://github.com/MetaMask/metamask-design-system#readme).

package/dist/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTheme = exports.useTailwind = exports.Theme = exports.ThemeProvider = void 0;
+exports.generateTailwindConfig = exports.useTheme = exports.useTailwind = exports.Theme = exports.ThemeProvider = void 0;
 // Provider and type
 var ThemeProvider_1 = require("./ThemeProvider.cjs");
 Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return ThemeProvider_1.ThemeProvider; } });
@@ -10,4 +10,7 @@ Object.defineProperty(exports, "Theme", { enumerable: true, get: function () { r
 var hooks_1 = require("./hooks.cjs");
 Object.defineProperty(exports, "useTailwind", { enumerable: true, get: function () { return hooks_1.useTailwind; } });
 Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return hooks_1.useTheme; } });
+// Config generation
+var tailwind_config_1 = require("./tailwind.config.cjs");
+Object.defineProperty(exports, "generateTailwindConfig", { enumerable: true, get: function () { return tailwind_config_1.generateTailwindConfig; } });
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,oBAAoB;AACpB,qDAAgD;AAAvC,8GAAA,aAAa,OAAA;AACtB,iDAAsC;AAA7B,oGAAA,KAAK,OAAA;AAEd,QAAQ;AACR,qCAAgD;AAAvC,oGAAA,WAAW,OAAA;AAAE,iGAAA,QAAQ,OAAA","sourcesContent":["// Provider and type\nexport { ThemeProvider } from './ThemeProvider';\nexport { Theme } from './Theme.types';\n\n// Hooks\nexport { useTailwind, useTheme } from './hooks';\n"]}
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,oBAAoB;AACpB,qDAAgD;AAAvC,8GAAA,aAAa,OAAA;AACtB,iDAAsC;AAA7B,oGAAA,KAAK,OAAA;AAEd,QAAQ;AACR,qCAAgD;AAAvC,oGAAA,WAAW,OAAA;AAAE,iGAAA,QAAQ,OAAA;AAE9B,oBAAoB;AACpB,yDAA2D;AAAlD,yHAAA,sBAAsB,OAAA","sourcesContent":["// Provider and type\nexport { ThemeProvider } from './ThemeProvider';\nexport { Theme } from './Theme.types';\n\n// Hooks\nexport { useTailwind, useTheme } from './hooks';\n\n// Config generation\nexport { generateTailwindConfig } from './tailwind.config';\n"]}

package/dist/index.d.cts

@@ -1,4 +1,5 @@
 export { ThemeProvider } from "./ThemeProvider.cjs";
 export { Theme } from "./Theme.types.cjs";
 export { useTailwind, useTheme } from "./hooks.cjs";
+export { generateTailwindConfig } from "./tailwind.config.cjs";
 //# sourceMappingURL=index.d.cts.map

package/dist/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,4BAAwB;AAChD,OAAO,EAAE,KAAK,EAAE,0BAAsB;AAGtC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,oBAAgB"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,4BAAwB;AAChD,OAAO,EAAE,KAAK,EAAE,0BAAsB;AAGtC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,oBAAgB;AAGhD,OAAO,EAAE,sBAAsB,EAAE,8BAA0B"}

package/dist/index.d.mts

@@ -1,4 +1,5 @@
 export { ThemeProvider } from "./ThemeProvider.mjs";
 export { Theme } from "./Theme.types.mjs";
 export { useTailwind, useTheme } from "./hooks.mjs";
+export { generateTailwindConfig } from "./tailwind.config.mjs";
 //# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,4BAAwB;AAChD,OAAO,EAAE,KAAK,EAAE,0BAAsB;AAGtC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,oBAAgB"}
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,4BAAwB;AAChD,OAAO,EAAE,KAAK,EAAE,0BAAsB;AAGtC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,oBAAgB;AAGhD,OAAO,EAAE,sBAAsB,EAAE,8BAA0B"}

package/dist/index.mjs

@@ -3,4 +3,6 @@ export { ThemeProvider } from "./ThemeProvider.mjs";
 export { Theme } from "./Theme.types.mjs";
 // Hooks
 export { useTailwind, useTheme } from "./hooks.mjs";
+// Config generation
+export { generateTailwindConfig } from "./tailwind.config.mjs";
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,OAAO,EAAE,aAAa,EAAE,4BAAwB;AAChD,OAAO,EAAE,KAAK,EAAE,0BAAsB;AAEtC,QAAQ;AACR,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,oBAAgB","sourcesContent":["// Provider and type\nexport { ThemeProvider } from './ThemeProvider';\nexport { Theme } from './Theme.types';\n\n// Hooks\nexport { useTailwind, useTheme } from './hooks';\n"]}
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,OAAO,EAAE,aAAa,EAAE,4BAAwB;AAChD,OAAO,EAAE,KAAK,EAAE,0BAAsB;AAEtC,QAAQ;AACR,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,oBAAgB;AAEhD,oBAAoB;AACpB,OAAO,EAAE,sBAAsB,EAAE,8BAA0B","sourcesContent":["// Provider and type\nexport { ThemeProvider } from './ThemeProvider';\nexport { Theme } from './Theme.types';\n\n// Hooks\nexport { useTailwind, useTheme } from './hooks';\n\n// Config generation\nexport { generateTailwindConfig } from './tailwind.config';\n"]}

package/dist/tailwind.config.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateTailwindConfig = void 0;
+exports.Theme = exports.generateTailwindConfig = void 0;
+const design_tokens_1 = require("@metamask/design-tokens");
 const colors_1 = require("./colors.cjs");
 const typography_1 = require("./typography.cjs");
 /**
@@ -37,61 +38,65 @@ const extractColorsByPrefix = (colors, prefix) => {
  * @returns A Tailwind CSS configuration object with extended theme properties and plugins.
  */
 const generateTailwindConfig = (theme) => {
-    const colors = colors_1.themeColors[theme];
-    if (!colors) {
+    const designSystemColors = colors_1.themeColors[theme];
+    if (!designSystemColors) {
         console.error('Theme colors not found.');
         return {};
     }
+    // Essential colors that need to be available in all color properties
+    const essentialColors = {
+        inherit: 'inherit',
+        current: 'currentColor',
+        transparent: 'transparent',
+        black: design_tokens_1.brandColor.black,
+        white: design_tokens_1.brandColor.white,
+    };
+    // Combined colors object with essential colors and design system colors
+    const allColors = {
+        ...essentialColors,
+        ...designSystemColors,
+    };
     // Extract structured colors from the flattened colors
-    const backgroundColors = extractColorsByPrefix(colors, 'background');
-    const textColors = extractColorsByPrefix(colors, 'text');
-    const borderColors = extractColorsByPrefix(colors, 'border');
+    const backgroundColors = extractColorsByPrefix(designSystemColors, 'background');
+    const textColors = extractColorsByPrefix(designSystemColors, 'text');
+    const borderColors = extractColorsByPrefix(designSystemColors, 'border');
     const config = {
         theme: {
-            // Keep essential semantic colors, remove default palette colors to enforce use of design system components
-            colors: {
-                inherit: 'inherit',
-                current: 'currentColor',
-                transparent: 'transparent',
-                black: '#000000',
-                white: '#ffffff',
+            // Keep essential semantic colors, remove default palette colors.
+            // We want to rely on the colors provided by the design system preset
+            colors: allColors,
+            // This removes all default Tailwind font sizes and weights.
+            // We want to rely on the design system font sizes and enforce use of the Text component
+            textColor: {
+                ...allColors,
+                ...textColors, // e.g. text-default instead of text-text-default
+            },
+            backgroundColor: {
+                ...allColors,
+                ...backgroundColors, // e.g. bg-default instead of bg-background-default
+            },
+            borderColor: {
+                ...allColors,
+                ...borderColors, // e.g. border-default instead of border-border-default
             },
             fontSize: {
-            // Empty to remove default Tailwind font sizes (text-sm, text-lg, etc.)
-            // Design system font sizes added via extend
+                ...typography_1.typographyTailwindConfig.fontSize,
+            },
+            fontFamily: {
+                ...typography_1.typographyTailwindConfig.fontFamily,
+            },
+            letterSpacing: {
+                ...typography_1.typographyTailwindConfig.letterSpacing,
             },
-            extend: {
-                colors: {
-                    ...colors,
-                },
-                textColor: {
-                    ...colors,
-                    ...textColors, // e.g. text-default instead of text-text-default
-                },
-                backgroundColor: {
-                    ...colors,
-                    ...backgroundColors, // e.g. bg-default instead of bg-background-default
-                },
-                borderColor: {
-                    ...colors,
-                    ...borderColors, // e.g. border-default instead of border-border-default
-                },
-                fontSize: {
-                    ...typography_1.typographyTailwindConfig.fontSize,
-                },
-                fontFamily: {
-                    ...typography_1.typographyTailwindConfig.fontFamily,
-                },
-                letterSpacing: {
-                    ...typography_1.typographyTailwindConfig.letterSpacing,
-                },
-                lineHeight: {
-                    ...typography_1.typographyTailwindConfig.lineHeight,
-                },
+            lineHeight: {
+                ...typography_1.typographyTailwindConfig.lineHeight,
             },
         },
     };
     return config;
 };
 exports.generateTailwindConfig = generateTailwindConfig;
+// Export Theme enum for consumers
+var Theme_types_1 = require("./Theme.types.cjs");
+Object.defineProperty(exports, "Theme", { enumerable: true, get: function () { return Theme_types_1.Theme; } });
 //# sourceMappingURL=tailwind.config.cjs.map

package/dist/tailwind.config.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tailwind.config.cjs","sourceRoot":"","sources":["../src/tailwind.config.ts"],"names":[],"mappings":";;;AAEA,yCAAuC;AAEvC,iDAAwD;AAExD;;;;;;;;;;;;;GAaG;AACH,MAAM,qBAAqB,GAAG,CAC5B,MAA8B,EAC9B,MAAc,EACd,EAAE;IACF,MAAM,SAAS,GAA2B,EAAE,CAAC;IAC7C,MAAM,cAAc,GAAG,GAAG,MAAM,GAAG,CAAC;IAEpC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;QAC9C,IAAI,GAAG,CAAC,UAAU,CAAC,cAAc,CAAC,EAAE;YAClC,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;YAClD,SAAS,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC;SAC9B;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF;;;;;;;GAOG;AACI,MAAM,sBAAsB,GAAG,CAAC,KAAY,EAAY,EAAE;IAC/D,MAAM,MAAM,GAAG,oBAAW,CAAC,KAAK,CAAC,CAAC;IAElC,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,CAAC,KAAK,CAAC,yBAAyB,CAAC,CAAC;QACzC,OAAO,EAAE,CAAC;KACX;IAED,sDAAsD;IACtD,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IACrE,MAAM,UAAU,GAAG,qBAAqB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzD,MAAM,YAAY,GAAG,qBAAqB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAE7D,MAAM,MAAM,GAAG;QACb,KAAK,EAAE;YACL,2GAA2G;YAC3G,MAAM,EAAE;gBACN,OAAO,EAAE,SAAS;gBAClB,OAAO,EAAE,cAAc;gBACvB,WAAW,EAAE,aAAa;gBAC1B,KAAK,EAAE,SAAS;gBAChB,KAAK,EAAE,SAAS;aACjB;YACD,QAAQ,EAAE;YACR,uEAAuE;YACvE,4CAA4C;aAC7C;YACD,MAAM,EAAE;gBACN,MAAM,EAAE;oBACN,GAAG,MAAM;iBACV;gBACD,SAAS,EAAE;oBACT,GAAG,MAAM;oBACT,GAAG,UAAU,EAAE,iDAAiD;iBACjE;gBACD,eAAe,EAAE;oBACf,GAAG,MAAM;oBACT,GAAG,gBAAgB,EAAE,mDAAmD;iBACzE;gBACD,WAAW,EAAE;oBACX,GAAG,MAAM;oBACT,GAAG,YAAY,EAAE,uDAAuD;iBACzE;gBACD,QAAQ,EAAE;oBACR,GAAG,qCAAwB,CAAC,QAAQ;iBACrC;gBACD,UAAU,EAAE;oBACV,GAAG,qCAAwB,CAAC,UAAU;iBACvC;gBACD,aAAa,EAAE;oBACb,GAAG,qCAAwB,CAAC,aAAa;iBAC1C;gBACD,UAAU,EAAE;oBACV,GAAG,qCAAwB,CAAC,UAAU;iBACvC;aACF;SACF;KACF,CAAC;IAEF,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AA5DW,QAAA,sBAAsB,0BA4DjC","sourcesContent":["import type { TwConfig } from 'twrnc';\n\nimport { themeColors } from './colors';\nimport type { Theme } from './Theme.types';\nimport { typographyTailwindConfig } from './typography';\n\n/**\n * Extracts colors by prefix from the flattened colors object and removes the prefix from keys.\n * This creates structured color objects that enable shorter Tailwind class names by removing\n * redundant prefixes (e.g., \"background-default\" becomes \"default\" for backgroundColor).\n *\n * @param colors - The flattened colors object containing all theme colors with kebab-case keys.\n * @param prefix - The prefix to extract colors for (e.g., 'background', 'text', 'border').\n * @returns A new object containing only colors matching the prefix, with the prefix removed from keys.\n *\n * @example\n * const colors = { 'background-default': '#fff', 'background-muted': '#eee', 'text-default': '#000' };\n * extractColorsByPrefix(colors, 'background');\n * // Returns: { 'default': '#fff', 'muted': '#eee' }\n */\nconst extractColorsByPrefix = (\n  colors: Record<string, string>,\n  prefix: string,\n) => {\n  const extracted: Record<string, string> = {};\n  const prefixWithDash = `${prefix}-`;\n\n  Object.entries(colors).forEach(([key, value]) => {\n    if (key.startsWith(prefixWithDash)) {\n      const colorName = key.replace(prefixWithDash, '');\n      extracted[colorName] = value;\n    }\n  });\n\n  return extracted;\n};\n\n/**\n * Generates a Tailwind CSS configuration object based on the specified theme.\n * This configuration extends the base Tailwind settings with custom theme colors, typography settings,\n * and other style properties for use in React Native with `twrnc`.\n *\n * @param theme - The theme ('light' or 'dark'). Specifies whether to use light or dark mode styles.\n * @returns A Tailwind CSS configuration object with extended theme properties and plugins.\n */\nexport const generateTailwindConfig = (theme: Theme): TwConfig => {\n  const colors = themeColors[theme];\n\n  if (!colors) {\n    console.error('Theme colors not found.');\n    return {};\n  }\n\n  // Extract structured colors from the flattened colors\n  const backgroundColors = extractColorsByPrefix(colors, 'background');\n  const textColors = extractColorsByPrefix(colors, 'text');\n  const borderColors = extractColorsByPrefix(colors, 'border');\n\n  const config = {\n    theme: {\n      // Keep essential semantic colors, remove default palette colors to enforce use of design system components\n      colors: {\n        inherit: 'inherit',\n        current: 'currentColor',\n        transparent: 'transparent',\n        black: '#000000',\n        white: '#ffffff',\n      },\n      fontSize: {\n        // Empty to remove default Tailwind font sizes (text-sm, text-lg, etc.)\n        // Design system font sizes added via extend\n      },\n      extend: {\n        colors: {\n          ...colors,\n        },\n        textColor: {\n          ...colors,\n          ...textColors, // e.g. text-default instead of text-text-default\n        },\n        backgroundColor: {\n          ...colors, // Incorporate existing color utilities like bg-primary-default\n          ...backgroundColors, // e.g. bg-default instead of bg-background-default\n        },\n        borderColor: {\n          ...colors, // Incorporate existing color utilities like border-primary-default\n          ...borderColors, // e.g. border-default instead of border-border-default\n        },\n        fontSize: {\n          ...typographyTailwindConfig.fontSize,\n        },\n        fontFamily: {\n          ...typographyTailwindConfig.fontFamily,\n        },\n        letterSpacing: {\n          ...typographyTailwindConfig.letterSpacing,\n        },\n        lineHeight: {\n          ...typographyTailwindConfig.lineHeight,\n        },\n      },\n    },\n  };\n\n  return config;\n};\n"]}
+{"version":3,"file":"tailwind.config.cjs","sourceRoot":"","sources":["../src/tailwind.config.ts"],"names":[],"mappings":";;;AAAA,2DAAqD;AAGrD,yCAAuC;AAEvC,iDAAwD;AAExD;;;;;;;;;;;;;GAaG;AACH,MAAM,qBAAqB,GAAG,CAC5B,MAA8B,EAC9B,MAAc,EACd,EAAE;IACF,MAAM,SAAS,GAA2B,EAAE,CAAC;IAC7C,MAAM,cAAc,GAAG,GAAG,MAAM,GAAG,CAAC;IAEpC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;QAC9C,IAAI,GAAG,CAAC,UAAU,CAAC,cAAc,CAAC,EAAE;YAClC,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;YAClD,SAAS,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC;SAC9B;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF;;;;;;;GAOG;AACI,MAAM,sBAAsB,GAAG,CAAC,KAAY,EAAY,EAAE;IAC/D,MAAM,kBAAkB,GAAG,oBAAW,CAAC,KAAK,CAAC,CAAC;IAE9C,IAAI,CAAC,kBAAkB,EAAE;QACvB,OAAO,CAAC,KAAK,CAAC,yBAAyB,CAAC,CAAC;QACzC,OAAO,EAAE,CAAC;KACX;IAED,qEAAqE;IACrE,MAAM,eAAe,GAAG;QACtB,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,cAAc;QACvB,WAAW,EAAE,aAAa;QAC1B,KAAK,EAAE,0BAAU,CAAC,KAAK;QACvB,KAAK,EAAE,0BAAU,CAAC,KAAK;KACxB,CAAC;IAEF,wEAAwE;IACxE,MAAM,SAAS,GAAG;QAChB,GAAG,eAAe;QAClB,GAAG,kBAAkB;KACtB,CAAC;IAEF,sDAAsD;IACtD,MAAM,gBAAgB,GAAG,qBAAqB,CAC5C,kBAAkB,EAClB,YAAY,CACb,CAAC;IACF,MAAM,UAAU,GAAG,qBAAqB,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;IACrE,MAAM,YAAY,GAAG,qBAAqB,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;IAEzE,MAAM,MAAM,GAAG;QACb,KAAK,EAAE;YACL,iEAAiE;YACjE,qEAAqE;YACrE,MAAM,EAAE,SAAS;YACjB,4DAA4D;YAC5D,wFAAwF;YACxF,SAAS,EAAE;gBACT,GAAG,SAAS;gBACZ,GAAG,UAAU,EAAE,iDAAiD;aACjE;YACD,eAAe,EAAE;gBACf,GAAG,SAAS;gBACZ,GAAG,gBAAgB,EAAE,mDAAmD;aACzE;YACD,WAAW,EAAE;gBACX,GAAG,SAAS;gBACZ,GAAG,YAAY,EAAE,uDAAuD;aACzE;YACD,QAAQ,EAAE;gBACR,GAAG,qCAAwB,CAAC,QAAQ;aACrC;YACD,UAAU,EAAE;gBACV,GAAG,qCAAwB,CAAC,UAAU;aACvC;YACD,aAAa,EAAE;gBACb,GAAG,qCAAwB,CAAC,aAAa;aAC1C;YACD,UAAU,EAAE;gBACV,GAAG,qCAAwB,CAAC,UAAU;aACvC;SACF;KACF,CAAC;IAEF,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAlEW,QAAA,sBAAsB,0BAkEjC;AAEF,kCAAkC;AAClC,iDAAsC;AAA7B,oGAAA,KAAK,OAAA","sourcesContent":["import { brandColor } from '@metamask/design-tokens';\nimport type { TwConfig } from 'twrnc';\n\nimport { themeColors } from './colors';\nimport type { Theme } from './Theme.types';\nimport { typographyTailwindConfig } from './typography';\n\n/**\n * Extracts colors by prefix from the flattened colors object and removes the prefix from keys.\n * This creates structured color objects that enable shorter Tailwind class names by removing\n * redundant prefixes (e.g., \"background-default\" becomes \"default\" for backgroundColor).\n *\n * @param colors - The flattened colors object containing all theme colors with kebab-case keys.\n * @param prefix - The prefix to extract colors for (e.g., 'background', 'text', 'border').\n * @returns A new object containing only colors matching the prefix, with the prefix removed from keys.\n *\n * @example\n * const colors = { 'background-default': '#fff', 'background-muted': '#eee', 'text-default': '#000' };\n * extractColorsByPrefix(colors, 'background');\n * // Returns: { 'default': '#fff', 'muted': '#eee' }\n */\nconst extractColorsByPrefix = (\n  colors: Record<string, string>,\n  prefix: string,\n) => {\n  const extracted: Record<string, string> = {};\n  const prefixWithDash = `${prefix}-`;\n\n  Object.entries(colors).forEach(([key, value]) => {\n    if (key.startsWith(prefixWithDash)) {\n      const colorName = key.replace(prefixWithDash, '');\n      extracted[colorName] = value;\n    }\n  });\n\n  return extracted;\n};\n\n/**\n * Generates a Tailwind CSS configuration object based on the specified theme.\n * This configuration extends the base Tailwind settings with custom theme colors, typography settings,\n * and other style properties for use in React Native with `twrnc`.\n *\n * @param theme - The theme ('light' or 'dark'). Specifies whether to use light or dark mode styles.\n * @returns A Tailwind CSS configuration object with extended theme properties and plugins.\n */\nexport const generateTailwindConfig = (theme: Theme): TwConfig => {\n  const designSystemColors = themeColors[theme];\n\n  if (!designSystemColors) {\n    console.error('Theme colors not found.');\n    return {};\n  }\n\n  // Essential colors that need to be available in all color properties\n  const essentialColors = {\n    inherit: 'inherit',\n    current: 'currentColor',\n    transparent: 'transparent',\n    black: brandColor.black,\n    white: brandColor.white,\n  };\n\n  // Combined colors object with essential colors and design system colors\n  const allColors = {\n    ...essentialColors,\n    ...designSystemColors,\n  };\n\n  // Extract structured colors from the flattened colors\n  const backgroundColors = extractColorsByPrefix(\n    designSystemColors,\n    'background',\n  );\n  const textColors = extractColorsByPrefix(designSystemColors, 'text');\n  const borderColors = extractColorsByPrefix(designSystemColors, 'border');\n\n  const config = {\n    theme: {\n      // Keep essential semantic colors, remove default palette colors.\n      // We want to rely on the colors provided by the design system preset\n      colors: allColors,\n      // This removes all default Tailwind font sizes and weights.\n      // We want to rely on the design system font sizes and enforce use of the Text component\n      textColor: {\n        ...allColors,\n        ...textColors, // e.g. text-default instead of text-text-default\n      },\n      backgroundColor: {\n        ...allColors, // Incorporate essential colors + design system colors\n        ...backgroundColors, // e.g. bg-default instead of bg-background-default\n      },\n      borderColor: {\n        ...allColors, // Incorporate essential colors + design system colors\n        ...borderColors, // e.g. border-default instead of border-border-default\n      },\n      fontSize: {\n        ...typographyTailwindConfig.fontSize,\n      },\n      fontFamily: {\n        ...typographyTailwindConfig.fontFamily,\n      },\n      letterSpacing: {\n        ...typographyTailwindConfig.letterSpacing,\n      },\n      lineHeight: {\n        ...typographyTailwindConfig.lineHeight,\n      },\n    },\n  };\n\n  return config;\n};\n\n// Export Theme enum for consumers\nexport { Theme } from './Theme.types';\n"]}

package/dist/tailwind.config.d.cts

@@ -9,4 +9,5 @@ import type { Theme } from "./Theme.types.cjs";
  * @returns A Tailwind CSS configuration object with extended theme properties and plugins.
  */
 export declare const generateTailwindConfig: (theme: Theme) => TwConfig;
+export { Theme } from "./Theme.types.cjs";
 //# sourceMappingURL=tailwind.config.d.cts.map

package/dist/tailwind.config.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"tailwind.config.d.cts","sourceRoot":"","sources":["../src/tailwind.config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc;AAGtC,OAAO,KAAK,EAAE,KAAK,EAAE,0BAAsB;AAkC3C;;;;;;;GAOG;AACH,eAAO,MAAM,sBAAsB,UAAW,KAAK,KAAG,QA4DrD,CAAC"}
+{"version":3,"file":"tailwind.config.d.cts","sourceRoot":"","sources":["../src/tailwind.config.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc;AAGtC,OAAO,KAAK,EAAE,KAAK,EAAE,0BAAsB;AAkC3C;;;;;;;GAOG;AACH,eAAO,MAAM,sBAAsB,UAAW,KAAK,KAAG,QAkErD,CAAC;AAGF,OAAO,EAAE,KAAK,EAAE,0BAAsB"}

package/dist/tailwind.config.d.mts

@@ -9,4 +9,5 @@ import type { Theme } from "./Theme.types.mjs";
  * @returns A Tailwind CSS configuration object with extended theme properties and plugins.
  */
 export declare const generateTailwindConfig: (theme: Theme) => TwConfig;
+export { Theme } from "./Theme.types.mjs";
 //# sourceMappingURL=tailwind.config.d.mts.map

package/dist/tailwind.config.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"tailwind.config.d.mts","sourceRoot":"","sources":["../src/tailwind.config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc;AAGtC,OAAO,KAAK,EAAE,KAAK,EAAE,0BAAsB;AAkC3C;;;;;;;GAOG;AACH,eAAO,MAAM,sBAAsB,UAAW,KAAK,KAAG,QA4DrD,CAAC"}
+{"version":3,"file":"tailwind.config.d.mts","sourceRoot":"","sources":["../src/tailwind.config.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc;AAGtC,OAAO,KAAK,EAAE,KAAK,EAAE,0BAAsB;AAkC3C;;;;;;;GAOG;AACH,eAAO,MAAM,sBAAsB,UAAW,KAAK,KAAG,QAkErD,CAAC;AAGF,OAAO,EAAE,KAAK,EAAE,0BAAsB"}

package/dist/tailwind.config.mjs

@@ -1,3 +1,4 @@
+import { brandColor } from "@metamask/design-tokens";
 import { themeColors } from "./colors.mjs";
 import { typographyTailwindConfig } from "./typography.mjs";
 /**
@@ -34,60 +35,63 @@ const extractColorsByPrefix = (colors, prefix) => {
  * @returns A Tailwind CSS configuration object with extended theme properties and plugins.
  */
 export const generateTailwindConfig = (theme) => {
-    const colors = themeColors[theme];
-    if (!colors) {
+    const designSystemColors = themeColors[theme];
+    if (!designSystemColors) {
         console.error('Theme colors not found.');
         return {};
     }
+    // Essential colors that need to be available in all color properties
+    const essentialColors = {
+        inherit: 'inherit',
+        current: 'currentColor',
+        transparent: 'transparent',
+        black: brandColor.black,
+        white: brandColor.white,
+    };
+    // Combined colors object with essential colors and design system colors
+    const allColors = {
+        ...essentialColors,
+        ...designSystemColors,
+    };
     // Extract structured colors from the flattened colors
-    const backgroundColors = extractColorsByPrefix(colors, 'background');
-    const textColors = extractColorsByPrefix(colors, 'text');
-    const borderColors = extractColorsByPrefix(colors, 'border');
+    const backgroundColors = extractColorsByPrefix(designSystemColors, 'background');
+    const textColors = extractColorsByPrefix(designSystemColors, 'text');
+    const borderColors = extractColorsByPrefix(designSystemColors, 'border');
     const config = {
         theme: {
-            // Keep essential semantic colors, remove default palette colors to enforce use of design system components
-            colors: {
-                inherit: 'inherit',
-                current: 'currentColor',
-                transparent: 'transparent',
-                black: '#000000',
-                white: '#ffffff',
+            // Keep essential semantic colors, remove default palette colors.
+            // We want to rely on the colors provided by the design system preset
+            colors: allColors,
+            // This removes all default Tailwind font sizes and weights.
+            // We want to rely on the design system font sizes and enforce use of the Text component
+            textColor: {
+                ...allColors,
+                ...textColors, // e.g. text-default instead of text-text-default
+            },
+            backgroundColor: {
+                ...allColors,
+                ...backgroundColors, // e.g. bg-default instead of bg-background-default
+            },
+            borderColor: {
+                ...allColors,
+                ...borderColors, // e.g. border-default instead of border-border-default
             },
             fontSize: {
-            // Empty to remove default Tailwind font sizes (text-sm, text-lg, etc.)
-            // Design system font sizes added via extend
+                ...typographyTailwindConfig.fontSize,
+            },
+            fontFamily: {
+                ...typographyTailwindConfig.fontFamily,
+            },
+            letterSpacing: {
+                ...typographyTailwindConfig.letterSpacing,
             },
-            extend: {
-                colors: {
-                    ...colors,
-                },
-                textColor: {
-                    ...colors,
-                    ...textColors, // e.g. text-default instead of text-text-default
-                },
-                backgroundColor: {
-                    ...colors,
-                    ...backgroundColors, // e.g. bg-default instead of bg-background-default
-                },
-                borderColor: {
-                    ...colors,
-                    ...borderColors, // e.g. border-default instead of border-border-default
-                },
-                fontSize: {
-                    ...typographyTailwindConfig.fontSize,
-                },
-                fontFamily: {
-                    ...typographyTailwindConfig.fontFamily,
-                },
-                letterSpacing: {
-                    ...typographyTailwindConfig.letterSpacing,
-                },
-                lineHeight: {
-                    ...typographyTailwindConfig.lineHeight,
-                },
+            lineHeight: {
+                ...typographyTailwindConfig.lineHeight,
             },
         },
     };
     return config;
 };
+// Export Theme enum for consumers
+export { Theme } from "./Theme.types.mjs";
 //# sourceMappingURL=tailwind.config.mjs.map

package/dist/tailwind.config.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tailwind.config.mjs","sourceRoot":"","sources":["../src/tailwind.config.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,qBAAiB;AAEvC,OAAO,EAAE,wBAAwB,EAAE,yBAAqB;AAExD;;;;;;;;;;;;;GAaG;AACH,MAAM,qBAAqB,GAAG,CAC5B,MAA8B,EAC9B,MAAc,EACd,EAAE;IACF,MAAM,SAAS,GAA2B,EAAE,CAAC;IAC7C,MAAM,cAAc,GAAG,GAAG,MAAM,GAAG,CAAC;IAEpC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;QAC9C,IAAI,GAAG,CAAC,UAAU,CAAC,cAAc,CAAC,EAAE;YAClC,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;YAClD,SAAS,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC;SAC9B;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAY,EAAY,EAAE;IAC/D,MAAM,MAAM,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;IAElC,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,CAAC,KAAK,CAAC,yBAAyB,CAAC,CAAC;QACzC,OAAO,EAAE,CAAC;KACX;IAED,sDAAsD;IACtD,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IACrE,MAAM,UAAU,GAAG,qBAAqB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzD,MAAM,YAAY,GAAG,qBAAqB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAE7D,MAAM,MAAM,GAAG;QACb,KAAK,EAAE;YACL,2GAA2G;YAC3G,MAAM,EAAE;gBACN,OAAO,EAAE,SAAS;gBAClB,OAAO,EAAE,cAAc;gBACvB,WAAW,EAAE,aAAa;gBAC1B,KAAK,EAAE,SAAS;gBAChB,KAAK,EAAE,SAAS;aACjB;YACD,QAAQ,EAAE;YACR,uEAAuE;YACvE,4CAA4C;aAC7C;YACD,MAAM,EAAE;gBACN,MAAM,EAAE;oBACN,GAAG,MAAM;iBACV;gBACD,SAAS,EAAE;oBACT,GAAG,MAAM;oBACT,GAAG,UAAU,EAAE,iDAAiD;iBACjE;gBACD,eAAe,EAAE;oBACf,GAAG,MAAM;oBACT,GAAG,gBAAgB,EAAE,mDAAmD;iBACzE;gBACD,WAAW,EAAE;oBACX,GAAG,MAAM;oBACT,GAAG,YAAY,EAAE,uDAAuD;iBACzE;gBACD,QAAQ,EAAE;oBACR,GAAG,wBAAwB,CAAC,QAAQ;iBACrC;gBACD,UAAU,EAAE;oBACV,GAAG,wBAAwB,CAAC,UAAU;iBACvC;gBACD,aAAa,EAAE;oBACb,GAAG,wBAAwB,CAAC,aAAa;iBAC1C;gBACD,UAAU,EAAE;oBACV,GAAG,wBAAwB,CAAC,UAAU;iBACvC;aACF;SACF;KACF,CAAC;IAEF,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC","sourcesContent":["import type { TwConfig } from 'twrnc';\n\nimport { themeColors } from './colors';\nimport type { Theme } from './Theme.types';\nimport { typographyTailwindConfig } from './typography';\n\n/**\n * Extracts colors by prefix from the flattened colors object and removes the prefix from keys.\n * This creates structured color objects that enable shorter Tailwind class names by removing\n * redundant prefixes (e.g., \"background-default\" becomes \"default\" for backgroundColor).\n *\n * @param colors - The flattened colors object containing all theme colors with kebab-case keys.\n * @param prefix - The prefix to extract colors for (e.g., 'background', 'text', 'border').\n * @returns A new object containing only colors matching the prefix, with the prefix removed from keys.\n *\n * @example\n * const colors = { 'background-default': '#fff', 'background-muted': '#eee', 'text-default': '#000' };\n * extractColorsByPrefix(colors, 'background');\n * // Returns: { 'default': '#fff', 'muted': '#eee' }\n */\nconst extractColorsByPrefix = (\n  colors: Record<string, string>,\n  prefix: string,\n) => {\n  const extracted: Record<string, string> = {};\n  const prefixWithDash = `${prefix}-`;\n\n  Object.entries(colors).forEach(([key, value]) => {\n    if (key.startsWith(prefixWithDash)) {\n      const colorName = key.replace(prefixWithDash, '');\n      extracted[colorName] = value;\n    }\n  });\n\n  return extracted;\n};\n\n/**\n * Generates a Tailwind CSS configuration object based on the specified theme.\n * This configuration extends the base Tailwind settings with custom theme colors, typography settings,\n * and other style properties for use in React Native with `twrnc`.\n *\n * @param theme - The theme ('light' or 'dark'). Specifies whether to use light or dark mode styles.\n * @returns A Tailwind CSS configuration object with extended theme properties and plugins.\n */\nexport const generateTailwindConfig = (theme: Theme): TwConfig => {\n  const colors = themeColors[theme];\n\n  if (!colors) {\n    console.error('Theme colors not found.');\n    return {};\n  }\n\n  // Extract structured colors from the flattened colors\n  const backgroundColors = extractColorsByPrefix(colors, 'background');\n  const textColors = extractColorsByPrefix(colors, 'text');\n  const borderColors = extractColorsByPrefix(colors, 'border');\n\n  const config = {\n    theme: {\n      // Keep essential semantic colors, remove default palette colors to enforce use of design system components\n      colors: {\n        inherit: 'inherit',\n        current: 'currentColor',\n        transparent: 'transparent',\n        black: '#000000',\n        white: '#ffffff',\n      },\n      fontSize: {\n        // Empty to remove default Tailwind font sizes (text-sm, text-lg, etc.)\n        // Design system font sizes added via extend\n      },\n      extend: {\n        colors: {\n          ...colors,\n        },\n        textColor: {\n          ...colors,\n          ...textColors, // e.g. text-default instead of text-text-default\n        },\n        backgroundColor: {\n          ...colors, // Incorporate existing color utilities like bg-primary-default\n          ...backgroundColors, // e.g. bg-default instead of bg-background-default\n        },\n        borderColor: {\n          ...colors, // Incorporate existing color utilities like border-primary-default\n          ...borderColors, // e.g. border-default instead of border-border-default\n        },\n        fontSize: {\n          ...typographyTailwindConfig.fontSize,\n        },\n        fontFamily: {\n          ...typographyTailwindConfig.fontFamily,\n        },\n        letterSpacing: {\n          ...typographyTailwindConfig.letterSpacing,\n        },\n        lineHeight: {\n          ...typographyTailwindConfig.lineHeight,\n        },\n      },\n    },\n  };\n\n  return config;\n};\n"]}
+{"version":3,"file":"tailwind.config.mjs","sourceRoot":"","sources":["../src/tailwind.config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,gCAAgC;AAGrD,OAAO,EAAE,WAAW,EAAE,qBAAiB;AAEvC,OAAO,EAAE,wBAAwB,EAAE,yBAAqB;AAExD;;;;;;;;;;;;;GAaG;AACH,MAAM,qBAAqB,GAAG,CAC5B,MAA8B,EAC9B,MAAc,EACd,EAAE;IACF,MAAM,SAAS,GAA2B,EAAE,CAAC;IAC7C,MAAM,cAAc,GAAG,GAAG,MAAM,GAAG,CAAC;IAEpC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;QAC9C,IAAI,GAAG,CAAC,UAAU,CAAC,cAAc,CAAC,EAAE;YAClC,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;YAClD,SAAS,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC;SAC9B;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAY,EAAY,EAAE;IAC/D,MAAM,kBAAkB,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;IAE9C,IAAI,CAAC,kBAAkB,EAAE;QACvB,OAAO,CAAC,KAAK,CAAC,yBAAyB,CAAC,CAAC;QACzC,OAAO,EAAE,CAAC;KACX;IAED,qEAAqE;IACrE,MAAM,eAAe,GAAG;QACtB,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,cAAc;QACvB,WAAW,EAAE,aAAa;QAC1B,KAAK,EAAE,UAAU,CAAC,KAAK;QACvB,KAAK,EAAE,UAAU,CAAC,KAAK;KACxB,CAAC;IAEF,wEAAwE;IACxE,MAAM,SAAS,GAAG;QAChB,GAAG,eAAe;QAClB,GAAG,kBAAkB;KACtB,CAAC;IAEF,sDAAsD;IACtD,MAAM,gBAAgB,GAAG,qBAAqB,CAC5C,kBAAkB,EAClB,YAAY,CACb,CAAC;IACF,MAAM,UAAU,GAAG,qBAAqB,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;IACrE,MAAM,YAAY,GAAG,qBAAqB,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;IAEzE,MAAM,MAAM,GAAG;QACb,KAAK,EAAE;YACL,iEAAiE;YACjE,qEAAqE;YACrE,MAAM,EAAE,SAAS;YACjB,4DAA4D;YAC5D,wFAAwF;YACxF,SAAS,EAAE;gBACT,GAAG,SAAS;gBACZ,GAAG,UAAU,EAAE,iDAAiD;aACjE;YACD,eAAe,EAAE;gBACf,GAAG,SAAS;gBACZ,GAAG,gBAAgB,EAAE,mDAAmD;aACzE;YACD,WAAW,EAAE;gBACX,GAAG,SAAS;gBACZ,GAAG,YAAY,EAAE,uDAAuD;aACzE;YACD,QAAQ,EAAE;gBACR,GAAG,wBAAwB,CAAC,QAAQ;aACrC;YACD,UAAU,EAAE;gBACV,GAAG,wBAAwB,CAAC,UAAU;aACvC;YACD,aAAa,EAAE;gBACb,GAAG,wBAAwB,CAAC,aAAa;aAC1C;YACD,UAAU,EAAE;gBACV,GAAG,wBAAwB,CAAC,UAAU;aACvC;SACF;KACF,CAAC;IAEF,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF,kCAAkC;AAClC,OAAO,EAAE,KAAK,EAAE,0BAAsB","sourcesContent":["import { brandColor } from '@metamask/design-tokens';\nimport type { TwConfig } from 'twrnc';\n\nimport { themeColors } from './colors';\nimport type { Theme } from './Theme.types';\nimport { typographyTailwindConfig } from './typography';\n\n/**\n * Extracts colors by prefix from the flattened colors object and removes the prefix from keys.\n * This creates structured color objects that enable shorter Tailwind class names by removing\n * redundant prefixes (e.g., \"background-default\" becomes \"default\" for backgroundColor).\n *\n * @param colors - The flattened colors object containing all theme colors with kebab-case keys.\n * @param prefix - The prefix to extract colors for (e.g., 'background', 'text', 'border').\n * @returns A new object containing only colors matching the prefix, with the prefix removed from keys.\n *\n * @example\n * const colors = { 'background-default': '#fff', 'background-muted': '#eee', 'text-default': '#000' };\n * extractColorsByPrefix(colors, 'background');\n * // Returns: { 'default': '#fff', 'muted': '#eee' }\n */\nconst extractColorsByPrefix = (\n  colors: Record<string, string>,\n  prefix: string,\n) => {\n  const extracted: Record<string, string> = {};\n  const prefixWithDash = `${prefix}-`;\n\n  Object.entries(colors).forEach(([key, value]) => {\n    if (key.startsWith(prefixWithDash)) {\n      const colorName = key.replace(prefixWithDash, '');\n      extracted[colorName] = value;\n    }\n  });\n\n  return extracted;\n};\n\n/**\n * Generates a Tailwind CSS configuration object based on the specified theme.\n * This configuration extends the base Tailwind settings with custom theme colors, typography settings,\n * and other style properties for use in React Native with `twrnc`.\n *\n * @param theme - The theme ('light' or 'dark'). Specifies whether to use light or dark mode styles.\n * @returns A Tailwind CSS configuration object with extended theme properties and plugins.\n */\nexport const generateTailwindConfig = (theme: Theme): TwConfig => {\n  const designSystemColors = themeColors[theme];\n\n  if (!designSystemColors) {\n    console.error('Theme colors not found.');\n    return {};\n  }\n\n  // Essential colors that need to be available in all color properties\n  const essentialColors = {\n    inherit: 'inherit',\n    current: 'currentColor',\n    transparent: 'transparent',\n    black: brandColor.black,\n    white: brandColor.white,\n  };\n\n  // Combined colors object with essential colors and design system colors\n  const allColors = {\n    ...essentialColors,\n    ...designSystemColors,\n  };\n\n  // Extract structured colors from the flattened colors\n  const backgroundColors = extractColorsByPrefix(\n    designSystemColors,\n    'background',\n  );\n  const textColors = extractColorsByPrefix(designSystemColors, 'text');\n  const borderColors = extractColorsByPrefix(designSystemColors, 'border');\n\n  const config = {\n    theme: {\n      // Keep essential semantic colors, remove default palette colors.\n      // We want to rely on the colors provided by the design system preset\n      colors: allColors,\n      // This removes all default Tailwind font sizes and weights.\n      // We want to rely on the design system font sizes and enforce use of the Text component\n      textColor: {\n        ...allColors,\n        ...textColors, // e.g. text-default instead of text-text-default\n      },\n      backgroundColor: {\n        ...allColors, // Incorporate essential colors + design system colors\n        ...backgroundColors, // e.g. bg-default instead of bg-background-default\n      },\n      borderColor: {\n        ...allColors, // Incorporate essential colors + design system colors\n        ...borderColors, // e.g. border-default instead of border-border-default\n      },\n      fontSize: {\n        ...typographyTailwindConfig.fontSize,\n      },\n      fontFamily: {\n        ...typographyTailwindConfig.fontFamily,\n      },\n      letterSpacing: {\n        ...typographyTailwindConfig.letterSpacing,\n      },\n      lineHeight: {\n        ...typographyTailwindConfig.lineHeight,\n      },\n    },\n  };\n\n  return config;\n};\n\n// Export Theme enum for consumers\nexport { Theme } from './Theme.types';\n"]}

package/dist/typography.cjs

@@ -76,6 +76,46 @@ exports.typographyTailwindConfig = {
                 fontWeight: design_tokens_1.typography.sBodyXS.fontWeight,
             },
         ],
+        'page-heading': [
+            design_tokens_1.typography.sPageHeading.fontSize.toString(),
+            {
+                lineHeight: `${design_tokens_1.typography.sPageHeading.lineHeight}px`,
+                letterSpacing: `${design_tokens_1.typography.sPageHeading.letterSpacing}`,
+                fontWeight: design_tokens_1.typography.sPageHeading.fontWeight,
+            },
+        ],
+        'section-heading': [
+            design_tokens_1.typography.sSectionHeading.fontSize.toString(),
+            {
+                lineHeight: `${design_tokens_1.typography.sSectionHeading.lineHeight}px`,
+                letterSpacing: `${design_tokens_1.typography.sSectionHeading.letterSpacing}`,
+                fontWeight: design_tokens_1.typography.sSectionHeading.fontWeight,
+            },
+        ],
+        'button-label-md': [
+            design_tokens_1.typography.sButtonLabelMd.fontSize.toString(),
+            {
+                lineHeight: `${design_tokens_1.typography.sButtonLabelMd.lineHeight}px`,
+                letterSpacing: `${design_tokens_1.typography.sButtonLabelMd.letterSpacing}`,
+                fontWeight: design_tokens_1.typography.sButtonLabelMd.fontWeight,
+            },
+        ],
+        'button-label-lg': [
+            design_tokens_1.typography.sButtonLabelLg.fontSize.toString(),
+            {
+                lineHeight: `${design_tokens_1.typography.sButtonLabelLg.lineHeight}px`,
+                letterSpacing: `${design_tokens_1.typography.sButtonLabelLg.letterSpacing}`,
+                fontWeight: design_tokens_1.typography.sButtonLabelLg.fontWeight,
+            },
+        ],
+        'amount-display-lg': [
+            design_tokens_1.typography.sAmountDisplayLg.fontSize.toString(),
+            {
+                lineHeight: `${design_tokens_1.typography.sAmountDisplayLg.lineHeight}px`,
+                letterSpacing: `${design_tokens_1.typography.sAmountDisplayLg.letterSpacing}`,
+                fontWeight: design_tokens_1.typography.sAmountDisplayLg.fontWeight,
+            },
+        ],
     },
     fontFamily: {
         'default-regular': 'Geist-Regular',
@@ -99,6 +139,11 @@ exports.typographyTailwindConfig = {
         'body-md': `${design_tokens_1.typography.sBodyMD.letterSpacing}`,
         'body-sm': `${design_tokens_1.typography.sBodySM.letterSpacing}`,
         'body-xs': `${design_tokens_1.typography.sBodyXS.letterSpacing}`,
+        'page-heading': `${design_tokens_1.typography.sPageHeading.letterSpacing}`,
+        'section-heading': `${design_tokens_1.typography.sSectionHeading.letterSpacing}`,
+        'button-label-md': `${design_tokens_1.typography.sButtonLabelMd.letterSpacing}`,
+        'button-label-lg': `${design_tokens_1.typography.sButtonLabelLg.letterSpacing}`,
+        'amount-display-lg': `${design_tokens_1.typography.sAmountDisplayLg.letterSpacing}`,
     },
     lineHeight: {
         'display-lg': `${design_tokens_1.typography.sDisplayLG.lineHeight}px`,
@@ -110,6 +155,11 @@ exports.typographyTailwindConfig = {
         'body-md': `${design_tokens_1.typography.sBodyMD.lineHeight}px`,
         'body-sm': `${design_tokens_1.typography.sBodySM.lineHeight}px`,
         'body-xs': `${design_tokens_1.typography.sBodyXS.lineHeight}px`,
+        'page-heading': `${design_tokens_1.typography.sPageHeading.lineHeight}px`,
+        'section-heading': `${design_tokens_1.typography.sSectionHeading.lineHeight}px`,
+        'button-label-md': `${design_tokens_1.typography.sButtonLabelMd.lineHeight}px`,
+        'button-label-lg': `${design_tokens_1.typography.sButtonLabelLg.lineHeight}px`,
+        'amount-display-lg': `${design_tokens_1.typography.sAmountDisplayLg.lineHeight}px`,
     },
 };
 //# sourceMappingURL=typography.cjs.map

package/dist/typography.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"typography.cjs","sourceRoot":"","sources":["../src/typography.ts"],"names":[],"mappings":"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","sourcesContent":["import { typography } from '@metamask/design-tokens';\n\nimport type { TypographyTailwindConfigProps } from './typography.types';\n\nexport const typographyTailwindConfig: TypographyTailwindConfigProps = {\n  fontSize: {\n    'display-lg': [\n      typography.sDisplayLG.fontSize.toString(),\n      {\n        lineHeight: `${typography.sDisplayLG.lineHeight as number}px`,\n        letterSpacing: `${typography.sDisplayLG.letterSpacing as number}`,\n        fontWeight: typography.sDisplayLG.fontWeight,\n      },\n    ],\n    'display-md': [\n      typography.sDisplayMD.fontSize.toString(),\n      {\n        lineHeight: `${typography.sDisplayMD.lineHeight as number}px`,\n        letterSpacing: `${typography.sDisplayMD.letterSpacing as number}`,\n        fontWeight: typography.sDisplayMD.fontWeight,\n      },\n    ],\n    'heading-lg': [\n      typography.sHeadingLG.fontSize.toString(),\n      {\n        lineHeight: `${typography.sHeadingLG.lineHeight as number}px`,\n        letterSpacing: `${typography.sHeadingLG.letterSpacing as number}`,\n        fontWeight: typography.sHeadingLG.fontWeight,\n      },\n    ],\n    'heading-md': [\n      typography.sHeadingMD.fontSize.toString(),\n      {\n        lineHeight: `${typography.sHeadingMD.lineHeight as number}px`,\n        letterSpacing: `${typography.sHeadingMD.letterSpacing as number}`,\n        fontWeight: typography.sHeadingMD.fontWeight,\n      },\n    ],\n    'heading-sm': [\n      typography.sHeadingSM.fontSize.toString(),\n      {\n        lineHeight: `${typography.sHeadingSM.lineHeight as number}px`,\n        letterSpacing: `${typography.sHeadingSM.letterSpacing as number}`,\n        fontWeight: typography.sHeadingSM.fontWeight,\n      },\n    ],\n    'body-lg': [\n      typography.sBodyLGMedium.fontSize.toString(),\n      {\n        lineHeight: `${typography.sBodyLGMedium.lineHeight as number}px`,\n        letterSpacing: `${typography.sBodyLGMedium.letterSpacing as number}`,\n        fontWeight: typography.sBodyLGMedium.fontWeight,\n      },\n    ],\n    'body-md': [\n      typography.sBodyMD.fontSize.toString(),\n      {\n        lineHeight: `${typography.sBodyMD.lineHeight as number}px`,\n        letterSpacing: `${typography.sBodyMD.letterSpacing as number}`,\n        fontWeight: typography.sBodyMD.fontWeight,\n      },\n    ],\n    'body-sm': [\n      typography.sBodySM.fontSize.toString(),\n      {\n        lineHeight: `${typography.sBodySM.lineHeight as number}px`,\n        letterSpacing: `${typography.sBodySM.letterSpacing as number}`,\n        fontWeight: typography.sBodySM.fontWeight,\n      },\n    ],\n    'body-xs': [\n      typography.sBodyXS.fontSize.toString(),\n      {\n        lineHeight: `${typography.sBodyXS.lineHeight as number}px`,\n        letterSpacing: `${typography.sBodyXS.letterSpacing as number}`,\n        fontWeight: typography.sBodyXS.fontWeight,\n      },\n    ],\n  },\n  fontFamily: {\n    'default-regular': 'Geist-Regular',\n    'default-regular-italic': 'Geist-RegularItalic',\n    'default-medium': 'Geist-Medium',\n    'default-medium-italic': 'Geist-MediumItalic',\n    'default-bold': 'Geist-Bold',\n    'default-bold-italic': 'Geist-BoldItalic',\n    'accent-regular': 'MMSans-Regular',\n    'accent-medium': 'MMSans-Medium',\n    'accent-bold': 'MMSans-Bold',\n    'hero-regular': 'MMPoly-Regular',\n  },\n  letterSpacing: {\n    'display-lg': `${typography.sDisplayLG.letterSpacing as number}`,\n    'display-md': `${typography.sDisplayMD.letterSpacing as number}`,\n    'heading-lg': `${typography.sHeadingLG.letterSpacing as number}`,\n    'heading-md': `${typography.sHeadingMD.letterSpacing as number}`,\n    'heading-sm': `${typography.sHeadingSM.letterSpacing as number}`,\n    'body-lg': `${typography.sBodyLGMedium.letterSpacing as number}`,\n    'body-md': `${typography.sBodyMD.letterSpacing as number}`,\n    'body-sm': `${typography.sBodySM.letterSpacing as number}`,\n    'body-xs': `${typography.sBodyXS.letterSpacing as number}`,\n  },\n  lineHeight: {\n    'display-lg': `${typography.sDisplayLG.lineHeight as number}px`,\n    'display-md': `${typography.sDisplayMD.lineHeight as number}px`,\n    'heading-lg': `${typography.sHeadingLG.lineHeight as number}px`,\n    'heading-md': `${typography.sHeadingMD.lineHeight as number}px`,\n    'heading-sm': `${typography.sHeadingSM.lineHeight as number}px`,\n    'body-lg': `${typography.sBodyLGMedium.lineHeight as number}px`,\n    'body-md': `${typography.sBodyMD.lineHeight as number}px`,\n    'body-sm': `${typography.sBodySM.lineHeight as number}px`,\n    'body-xs': `${typography.sBodyXS.lineHeight as number}px`,\n  },\n};\n"]}
+{"version":3,"file":"typography.cjs","sourceRoot":"","sources":["../src/typography.ts"],"names":[],"mappings":"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","sourcesContent":["import { typography } from '@metamask/design-tokens';\n\nimport type { TypographyTailwindConfigProps } from './typography.types';\n\nexport const typographyTailwindConfig: TypographyTailwindConfigProps = {\n  fontSize: {\n    'display-lg': [\n      typography.sDisplayLG.fontSize.toString(),\n      {\n        lineHeight: `${typography.sDisplayLG.lineHeight as number}px`,\n        letterSpacing: `${typography.sDisplayLG.letterSpacing as number}`,\n        fontWeight: typography.sDisplayLG.fontWeight,\n      },\n    ],\n    'display-md': [\n      typography.sDisplayMD.fontSize.toString(),\n      {\n        lineHeight: `${typography.sDisplayMD.lineHeight as number}px`,\n        letterSpacing: `${typography.sDisplayMD.letterSpacing as number}`,\n        fontWeight: typography.sDisplayMD.fontWeight,\n      },\n    ],\n    'heading-lg': [\n      typography.sHeadingLG.fontSize.toString(),\n      {\n        lineHeight: `${typography.sHeadingLG.lineHeight as number}px`,\n        letterSpacing: `${typography.sHeadingLG.letterSpacing as number}`,\n        fontWeight: typography.sHeadingLG.fontWeight,\n      },\n    ],\n    'heading-md': [\n      typography.sHeadingMD.fontSize.toString(),\n      {\n        lineHeight: `${typography.sHeadingMD.lineHeight as number}px`,\n        letterSpacing: `${typography.sHeadingMD.letterSpacing as number}`,\n        fontWeight: typography.sHeadingMD.fontWeight,\n      },\n    ],\n    'heading-sm': [\n      typography.sHeadingSM.fontSize.toString(),\n      {\n        lineHeight: `${typography.sHeadingSM.lineHeight as number}px`,\n        letterSpacing: `${typography.sHeadingSM.letterSpacing as number}`,\n        fontWeight: typography.sHeadingSM.fontWeight,\n      },\n    ],\n    'body-lg': [\n      typography.sBodyLGMedium.fontSize.toString(),\n      {\n        lineHeight: `${typography.sBodyLGMedium.lineHeight as number}px`,\n        letterSpacing: `${typography.sBodyLGMedium.letterSpacing as number}`,\n        fontWeight: typography.sBodyLGMedium.fontWeight,\n      },\n    ],\n    'body-md': [\n      typography.sBodyMD.fontSize.toString(),\n      {\n        lineHeight: `${typography.sBodyMD.lineHeight as number}px`,\n        letterSpacing: `${typography.sBodyMD.letterSpacing as number}`,\n        fontWeight: typography.sBodyMD.fontWeight,\n      },\n    ],\n    'body-sm': [\n      typography.sBodySM.fontSize.toString(),\n      {\n        lineHeight: `${typography.sBodySM.lineHeight as number}px`,\n        letterSpacing: `${typography.sBodySM.letterSpacing as number}`,\n        fontWeight: typography.sBodySM.fontWeight,\n      },\n    ],\n    'body-xs': [\n      typography.sBodyXS.fontSize.toString(),\n      {\n        lineHeight: `${typography.sBodyXS.lineHeight as number}px`,\n        letterSpacing: `${typography.sBodyXS.letterSpacing as number}`,\n        fontWeight: typography.sBodyXS.fontWeight,\n      },\n    ],\n    'page-heading': [\n      typography.sPageHeading.fontSize.toString(),\n      {\n        lineHeight: `${typography.sPageHeading.lineHeight as number}px`,\n        letterSpacing: `${typography.sPageHeading.letterSpacing as number}`,\n        fontWeight: typography.sPageHeading.fontWeight,\n      },\n    ],\n    'section-heading': [\n      typography.sSectionHeading.fontSize.toString(),\n      {\n        lineHeight: `${typography.sSectionHeading.lineHeight as number}px`,\n        letterSpacing: `${typography.sSectionHeading.letterSpacing as number}`,\n        fontWeight: typography.sSectionHeading.fontWeight,\n      },\n    ],\n    'button-label-md': [\n      typography.sButtonLabelMd.fontSize.toString(),\n      {\n        lineHeight: `${typography.sButtonLabelMd.lineHeight as number}px`,\n        letterSpacing: `${typography.sButtonLabelMd.letterSpacing as number}`,\n        fontWeight: typography.sButtonLabelMd.fontWeight,\n      },\n    ],\n    'button-label-lg': [\n      typography.sButtonLabelLg.fontSize.toString(),\n      {\n        lineHeight: `${typography.sButtonLabelLg.lineHeight as number}px`,\n        letterSpacing: `${typography.sButtonLabelLg.letterSpacing as number}`,\n        fontWeight: typography.sButtonLabelLg.fontWeight,\n      },\n    ],\n    'amount-display-lg': [\n      typography.sAmountDisplayLg.fontSize.toString(),\n      {\n        lineHeight: `${typography.sAmountDisplayLg.lineHeight as number}px`,\n        letterSpacing: `${typography.sAmountDisplayLg.letterSpacing as number}`,\n        fontWeight: typography.sAmountDisplayLg.fontWeight,\n      },\n    ],\n  },\n  fontFamily: {\n    'default-regular': 'Geist-Regular',\n    'default-regular-italic': 'Geist-RegularItalic',\n    'default-medium': 'Geist-Medium',\n    'default-medium-italic': 'Geist-MediumItalic',\n    'default-bold': 'Geist-Bold',\n    'default-bold-italic': 'Geist-BoldItalic',\n    'accent-regular': 'MMSans-Regular',\n    'accent-medium': 'MMSans-Medium',\n    'accent-bold': 'MMSans-Bold',\n    'hero-regular': 'MMPoly-Regular',\n  },\n  letterSpacing: {\n    'display-lg': `${typography.sDisplayLG.letterSpacing as number}`,\n    'display-md': `${typography.sDisplayMD.letterSpacing as number}`,\n    'heading-lg': `${typography.sHeadingLG.letterSpacing as number}`,\n    'heading-md': `${typography.sHeadingMD.letterSpacing as number}`,\n    'heading-sm': `${typography.sHeadingSM.letterSpacing as number}`,\n    'body-lg': `${typography.sBodyLGMedium.letterSpacing as number}`,\n    'body-md': `${typography.sBodyMD.letterSpacing as number}`,\n    'body-sm': `${typography.sBodySM.letterSpacing as number}`,\n    'body-xs': `${typography.sBodyXS.letterSpacing as number}`,\n    'page-heading': `${typography.sPageHeading.letterSpacing as number}`,\n    'section-heading': `${typography.sSectionHeading.letterSpacing as number}`,\n    'button-label-md': `${typography.sButtonLabelMd.letterSpacing as number}`,\n    'button-label-lg': `${typography.sButtonLabelLg.letterSpacing as number}`,\n    'amount-display-lg': `${typography.sAmountDisplayLg.letterSpacing as number}`,\n  },\n  lineHeight: {\n    'display-lg': `${typography.sDisplayLG.lineHeight as number}px`,\n    'display-md': `${typography.sDisplayMD.lineHeight as number}px`,\n    'heading-lg': `${typography.sHeadingLG.lineHeight as number}px`,\n    'heading-md': `${typography.sHeadingMD.lineHeight as number}px`,\n    'heading-sm': `${typography.sHeadingSM.lineHeight as number}px`,\n    'body-lg': `${typography.sBodyLGMedium.lineHeight as number}px`,\n    'body-md': `${typography.sBodyMD.lineHeight as number}px`,\n    'body-sm': `${typography.sBodySM.lineHeight as number}px`,\n    'body-xs': `${typography.sBodyXS.lineHeight as number}px`,\n    'page-heading': `${typography.sPageHeading.lineHeight as number}px`,\n    'section-heading': `${typography.sSectionHeading.lineHeight as number}px`,\n    'button-label-md': `${typography.sButtonLabelMd.lineHeight as number}px`,\n    'button-label-lg': `${typography.sButtonLabelLg.lineHeight as number}px`,\n    'amount-display-lg': `${typography.sAmountDisplayLg.lineHeight as number}px`,\n  },\n};\n"]}

package/dist/typography.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"typography.d.cts","sourceRoot":"","sources":["../src/typography.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,6BAA6B,EAAE,+BAA2B;AAExE,eAAO,MAAM,wBAAwB,EAAE,6BA6GtC,CAAC"}
+{"version":3,"file":"typography.d.cts","sourceRoot":"","sources":["../src/typography.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,6BAA6B,EAAE,+BAA2B;AAExE,eAAO,MAAM,wBAAwB,EAAE,6BA+JtC,CAAC"}

package/dist/typography.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"typography.d.mts","sourceRoot":"","sources":["../src/typography.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,6BAA6B,EAAE,+BAA2B;AAExE,eAAO,MAAM,wBAAwB,EAAE,6BA6GtC,CAAC"}
+{"version":3,"file":"typography.d.mts","sourceRoot":"","sources":["../src/typography.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,6BAA6B,EAAE,+BAA2B;AAExE,eAAO,MAAM,wBAAwB,EAAE,6BA+JtC,CAAC"}

package/dist/typography.mjs

@@ -73,6 +73,46 @@ export const typographyTailwindConfig = {
                 fontWeight: typography.sBodyXS.fontWeight,
             },
         ],
+        'page-heading': [
+            typography.sPageHeading.fontSize.toString(),
+            {
+                lineHeight: `${typography.sPageHeading.lineHeight}px`,
+                letterSpacing: `${typography.sPageHeading.letterSpacing}`,
+                fontWeight: typography.sPageHeading.fontWeight,
+            },
+        ],
+        'section-heading': [
+            typography.sSectionHeading.fontSize.toString(),
+            {
+                lineHeight: `${typography.sSectionHeading.lineHeight}px`,
+                letterSpacing: `${typography.sSectionHeading.letterSpacing}`,
+                fontWeight: typography.sSectionHeading.fontWeight,
+            },
+        ],
+        'button-label-md': [
+            typography.sButtonLabelMd.fontSize.toString(),
+            {
+                lineHeight: `${typography.sButtonLabelMd.lineHeight}px`,
+                letterSpacing: `${typography.sButtonLabelMd.letterSpacing}`,
+                fontWeight: typography.sButtonLabelMd.fontWeight,
+            },
+        ],
+        'button-label-lg': [
+            typography.sButtonLabelLg.fontSize.toString(),
+            {
+                lineHeight: `${typography.sButtonLabelLg.lineHeight}px`,
+                letterSpacing: `${typography.sButtonLabelLg.letterSpacing}`,
+                fontWeight: typography.sButtonLabelLg.fontWeight,
+            },
+        ],
+        'amount-display-lg': [
+            typography.sAmountDisplayLg.fontSize.toString(),
+            {
+                lineHeight: `${typography.sAmountDisplayLg.lineHeight}px`,
+                letterSpacing: `${typography.sAmountDisplayLg.letterSpacing}`,
+                fontWeight: typography.sAmountDisplayLg.fontWeight,
+            },
+        ],
     },
     fontFamily: {
         'default-regular': 'Geist-Regular',
@@ -96,6 +136,11 @@ export const typographyTailwindConfig = {
         'body-md': `${typography.sBodyMD.letterSpacing}`,
         'body-sm': `${typography.sBodySM.letterSpacing}`,
         'body-xs': `${typography.sBodyXS.letterSpacing}`,
+        'page-heading': `${typography.sPageHeading.letterSpacing}`,
+        'section-heading': `${typography.sSectionHeading.letterSpacing}`,
+        'button-label-md': `${typography.sButtonLabelMd.letterSpacing}`,
+        'button-label-lg': `${typography.sButtonLabelLg.letterSpacing}`,
+        'amount-display-lg': `${typography.sAmountDisplayLg.letterSpacing}`,
     },
     lineHeight: {
         'display-lg': `${typography.sDisplayLG.lineHeight}px`,
@@ -107,6 +152,11 @@ export const typographyTailwindConfig = {
         'body-md': `${typography.sBodyMD.lineHeight}px`,
         'body-sm': `${typography.sBodySM.lineHeight}px`,
         'body-xs': `${typography.sBodyXS.lineHeight}px`,
+        'page-heading': `${typography.sPageHeading.lineHeight}px`,
+        'section-heading': `${typography.sSectionHeading.lineHeight}px`,
+        'button-label-md': `${typography.sButtonLabelMd.lineHeight}px`,
+        'button-label-lg': `${typography.sButtonLabelLg.lineHeight}px`,
+        'amount-display-lg': `${typography.sAmountDisplayLg.lineHeight}px`,
     },
 };
 //# sourceMappingURL=typography.mjs.map

package/dist/typography.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"typography.mjs","sourceRoot":"","sources":["../src/typography.ts"],"names":[],"mappings":"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","sourcesContent":["import { typography } from '@metamask/design-tokens';\n\nimport type { TypographyTailwindConfigProps } from './typography.types';\n\nexport const typographyTailwindConfig: TypographyTailwindConfigProps = {\n  fontSize: {\n    'display-lg': [\n      typography.sDisplayLG.fontSize.toString(),\n      {\n        lineHeight: `${typography.sDisplayLG.lineHeight as number}px`,\n        letterSpacing: `${typography.sDisplayLG.letterSpacing as number}`,\n        fontWeight: typography.sDisplayLG.fontWeight,\n      },\n    ],\n    'display-md': [\n      typography.sDisplayMD.fontSize.toString(),\n      {\n        lineHeight: `${typography.sDisplayMD.lineHeight as number}px`,\n        letterSpacing: `${typography.sDisplayMD.letterSpacing as number}`,\n        fontWeight: typography.sDisplayMD.fontWeight,\n      },\n    ],\n    'heading-lg': [\n      typography.sHeadingLG.fontSize.toString(),\n      {\n        lineHeight: `${typography.sHeadingLG.lineHeight as number}px`,\n        letterSpacing: `${typography.sHeadingLG.letterSpacing as number}`,\n        fontWeight: typography.sHeadingLG.fontWeight,\n      },\n    ],\n    'heading-md': [\n      typography.sHeadingMD.fontSize.toString(),\n      {\n        lineHeight: `${typography.sHeadingMD.lineHeight as number}px`,\n        letterSpacing: `${typography.sHeadingMD.letterSpacing as number}`,\n        fontWeight: typography.sHeadingMD.fontWeight,\n      },\n    ],\n    'heading-sm': [\n      typography.sHeadingSM.fontSize.toString(),\n      {\n        lineHeight: `${typography.sHeadingSM.lineHeight as number}px`,\n        letterSpacing: `${typography.sHeadingSM.letterSpacing as number}`,\n        fontWeight: typography.sHeadingSM.fontWeight,\n      },\n    ],\n    'body-lg': [\n      typography.sBodyLGMedium.fontSize.toString(),\n      {\n        lineHeight: `${typography.sBodyLGMedium.lineHeight as number}px`,\n        letterSpacing: `${typography.sBodyLGMedium.letterSpacing as number}`,\n        fontWeight: typography.sBodyLGMedium.fontWeight,\n      },\n    ],\n    'body-md': [\n      typography.sBodyMD.fontSize.toString(),\n      {\n        lineHeight: `${typography.sBodyMD.lineHeight as number}px`,\n        letterSpacing: `${typography.sBodyMD.letterSpacing as number}`,\n        fontWeight: typography.sBodyMD.fontWeight,\n      },\n    ],\n    'body-sm': [\n      typography.sBodySM.fontSize.toString(),\n      {\n        lineHeight: `${typography.sBodySM.lineHeight as number}px`,\n        letterSpacing: `${typography.sBodySM.letterSpacing as number}`,\n        fontWeight: typography.sBodySM.fontWeight,\n      },\n    ],\n    'body-xs': [\n      typography.sBodyXS.fontSize.toString(),\n      {\n        lineHeight: `${typography.sBodyXS.lineHeight as number}px`,\n        letterSpacing: `${typography.sBodyXS.letterSpacing as number}`,\n        fontWeight: typography.sBodyXS.fontWeight,\n      },\n    ],\n  },\n  fontFamily: {\n    'default-regular': 'Geist-Regular',\n    'default-regular-italic': 'Geist-RegularItalic',\n    'default-medium': 'Geist-Medium',\n    'default-medium-italic': 'Geist-MediumItalic',\n    'default-bold': 'Geist-Bold',\n    'default-bold-italic': 'Geist-BoldItalic',\n    'accent-regular': 'MMSans-Regular',\n    'accent-medium': 'MMSans-Medium',\n    'accent-bold': 'MMSans-Bold',\n    'hero-regular': 'MMPoly-Regular',\n  },\n  letterSpacing: {\n    'display-lg': `${typography.sDisplayLG.letterSpacing as number}`,\n    'display-md': `${typography.sDisplayMD.letterSpacing as number}`,\n    'heading-lg': `${typography.sHeadingLG.letterSpacing as number}`,\n    'heading-md': `${typography.sHeadingMD.letterSpacing as number}`,\n    'heading-sm': `${typography.sHeadingSM.letterSpacing as number}`,\n    'body-lg': `${typography.sBodyLGMedium.letterSpacing as number}`,\n    'body-md': `${typography.sBodyMD.letterSpacing as number}`,\n    'body-sm': `${typography.sBodySM.letterSpacing as number}`,\n    'body-xs': `${typography.sBodyXS.letterSpacing as number}`,\n  },\n  lineHeight: {\n    'display-lg': `${typography.sDisplayLG.lineHeight as number}px`,\n    'display-md': `${typography.sDisplayMD.lineHeight as number}px`,\n    'heading-lg': `${typography.sHeadingLG.lineHeight as number}px`,\n    'heading-md': `${typography.sHeadingMD.lineHeight as number}px`,\n    'heading-sm': `${typography.sHeadingSM.lineHeight as number}px`,\n    'body-lg': `${typography.sBodyLGMedium.lineHeight as number}px`,\n    'body-md': `${typography.sBodyMD.lineHeight as number}px`,\n    'body-sm': `${typography.sBodySM.lineHeight as number}px`,\n    'body-xs': `${typography.sBodyXS.lineHeight as number}px`,\n  },\n};\n"]}
+{"version":3,"file":"typography.mjs","sourceRoot":"","sources":["../src/typography.ts"],"names":[],"mappings":"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","sourcesContent":["import { typography } from '@metamask/design-tokens';\n\nimport type { TypographyTailwindConfigProps } from './typography.types';\n\nexport const typographyTailwindConfig: TypographyTailwindConfigProps = {\n  fontSize: {\n    'display-lg': [\n      typography.sDisplayLG.fontSize.toString(),\n      {\n        lineHeight: `${typography.sDisplayLG.lineHeight as number}px`,\n        letterSpacing: `${typography.sDisplayLG.letterSpacing as number}`,\n        fontWeight: typography.sDisplayLG.fontWeight,\n      },\n    ],\n    'display-md': [\n      typography.sDisplayMD.fontSize.toString(),\n      {\n        lineHeight: `${typography.sDisplayMD.lineHeight as number}px`,\n        letterSpacing: `${typography.sDisplayMD.letterSpacing as number}`,\n        fontWeight: typography.sDisplayMD.fontWeight,\n      },\n    ],\n    'heading-lg': [\n      typography.sHeadingLG.fontSize.toString(),\n      {\n        lineHeight: `${typography.sHeadingLG.lineHeight as number}px`,\n        letterSpacing: `${typography.sHeadingLG.letterSpacing as number}`,\n        fontWeight: typography.sHeadingLG.fontWeight,\n      },\n    ],\n    'heading-md': [\n      typography.sHeadingMD.fontSize.toString(),\n      {\n        lineHeight: `${typography.sHeadingMD.lineHeight as number}px`,\n        letterSpacing: `${typography.sHeadingMD.letterSpacing as number}`,\n        fontWeight: typography.sHeadingMD.fontWeight,\n      },\n    ],\n    'heading-sm': [\n      typography.sHeadingSM.fontSize.toString(),\n      {\n        lineHeight: `${typography.sHeadingSM.lineHeight as number}px`,\n        letterSpacing: `${typography.sHeadingSM.letterSpacing as number}`,\n        fontWeight: typography.sHeadingSM.fontWeight,\n      },\n    ],\n    'body-lg': [\n      typography.sBodyLGMedium.fontSize.toString(),\n      {\n        lineHeight: `${typography.sBodyLGMedium.lineHeight as number}px`,\n        letterSpacing: `${typography.sBodyLGMedium.letterSpacing as number}`,\n        fontWeight: typography.sBodyLGMedium.fontWeight,\n      },\n    ],\n    'body-md': [\n      typography.sBodyMD.fontSize.toString(),\n      {\n        lineHeight: `${typography.sBodyMD.lineHeight as number}px`,\n        letterSpacing: `${typography.sBodyMD.letterSpacing as number}`,\n        fontWeight: typography.sBodyMD.fontWeight,\n      },\n    ],\n    'body-sm': [\n      typography.sBodySM.fontSize.toString(),\n      {\n        lineHeight: `${typography.sBodySM.lineHeight as number}px`,\n        letterSpacing: `${typography.sBodySM.letterSpacing as number}`,\n        fontWeight: typography.sBodySM.fontWeight,\n      },\n    ],\n    'body-xs': [\n      typography.sBodyXS.fontSize.toString(),\n      {\n        lineHeight: `${typography.sBodyXS.lineHeight as number}px`,\n        letterSpacing: `${typography.sBodyXS.letterSpacing as number}`,\n        fontWeight: typography.sBodyXS.fontWeight,\n      },\n    ],\n    'page-heading': [\n      typography.sPageHeading.fontSize.toString(),\n      {\n        lineHeight: `${typography.sPageHeading.lineHeight as number}px`,\n        letterSpacing: `${typography.sPageHeading.letterSpacing as number}`,\n        fontWeight: typography.sPageHeading.fontWeight,\n      },\n    ],\n    'section-heading': [\n      typography.sSectionHeading.fontSize.toString(),\n      {\n        lineHeight: `${typography.sSectionHeading.lineHeight as number}px`,\n        letterSpacing: `${typography.sSectionHeading.letterSpacing as number}`,\n        fontWeight: typography.sSectionHeading.fontWeight,\n      },\n    ],\n    'button-label-md': [\n      typography.sButtonLabelMd.fontSize.toString(),\n      {\n        lineHeight: `${typography.sButtonLabelMd.lineHeight as number}px`,\n        letterSpacing: `${typography.sButtonLabelMd.letterSpacing as number}`,\n        fontWeight: typography.sButtonLabelMd.fontWeight,\n      },\n    ],\n    'button-label-lg': [\n      typography.sButtonLabelLg.fontSize.toString(),\n      {\n        lineHeight: `${typography.sButtonLabelLg.lineHeight as number}px`,\n        letterSpacing: `${typography.sButtonLabelLg.letterSpacing as number}`,\n        fontWeight: typography.sButtonLabelLg.fontWeight,\n      },\n    ],\n    'amount-display-lg': [\n      typography.sAmountDisplayLg.fontSize.toString(),\n      {\n        lineHeight: `${typography.sAmountDisplayLg.lineHeight as number}px`,\n        letterSpacing: `${typography.sAmountDisplayLg.letterSpacing as number}`,\n        fontWeight: typography.sAmountDisplayLg.fontWeight,\n      },\n    ],\n  },\n  fontFamily: {\n    'default-regular': 'Geist-Regular',\n    'default-regular-italic': 'Geist-RegularItalic',\n    'default-medium': 'Geist-Medium',\n    'default-medium-italic': 'Geist-MediumItalic',\n    'default-bold': 'Geist-Bold',\n    'default-bold-italic': 'Geist-BoldItalic',\n    'accent-regular': 'MMSans-Regular',\n    'accent-medium': 'MMSans-Medium',\n    'accent-bold': 'MMSans-Bold',\n    'hero-regular': 'MMPoly-Regular',\n  },\n  letterSpacing: {\n    'display-lg': `${typography.sDisplayLG.letterSpacing as number}`,\n    'display-md': `${typography.sDisplayMD.letterSpacing as number}`,\n    'heading-lg': `${typography.sHeadingLG.letterSpacing as number}`,\n    'heading-md': `${typography.sHeadingMD.letterSpacing as number}`,\n    'heading-sm': `${typography.sHeadingSM.letterSpacing as number}`,\n    'body-lg': `${typography.sBodyLGMedium.letterSpacing as number}`,\n    'body-md': `${typography.sBodyMD.letterSpacing as number}`,\n    'body-sm': `${typography.sBodySM.letterSpacing as number}`,\n    'body-xs': `${typography.sBodyXS.letterSpacing as number}`,\n    'page-heading': `${typography.sPageHeading.letterSpacing as number}`,\n    'section-heading': `${typography.sSectionHeading.letterSpacing as number}`,\n    'button-label-md': `${typography.sButtonLabelMd.letterSpacing as number}`,\n    'button-label-lg': `${typography.sButtonLabelLg.letterSpacing as number}`,\n    'amount-display-lg': `${typography.sAmountDisplayLg.letterSpacing as number}`,\n  },\n  lineHeight: {\n    'display-lg': `${typography.sDisplayLG.lineHeight as number}px`,\n    'display-md': `${typography.sDisplayMD.lineHeight as number}px`,\n    'heading-lg': `${typography.sHeadingLG.lineHeight as number}px`,\n    'heading-md': `${typography.sHeadingMD.lineHeight as number}px`,\n    'heading-sm': `${typography.sHeadingSM.lineHeight as number}px`,\n    'body-lg': `${typography.sBodyLGMedium.lineHeight as number}px`,\n    'body-md': `${typography.sBodyMD.lineHeight as number}px`,\n    'body-sm': `${typography.sBodySM.lineHeight as number}px`,\n    'body-xs': `${typography.sBodyXS.lineHeight as number}px`,\n    'page-heading': `${typography.sPageHeading.lineHeight as number}px`,\n    'section-heading': `${typography.sSectionHeading.lineHeight as number}px`,\n    'button-label-md': `${typography.sButtonLabelMd.lineHeight as number}px`,\n    'button-label-lg': `${typography.sButtonLabelLg.lineHeight as number}px`,\n    'amount-display-lg': `${typography.sAmountDisplayLg.lineHeight as number}px`,\n  },\n};\n"]}

package/dist/typography.types.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"typography.types.cjs","sourceRoot":"","sources":["../src/typography.types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Different Typography variants to be used as twrnc classNames\n */\nexport type TypographyVariant =\n  | 'display-lg'\n  | 'display-md'\n  | 'heading-lg'\n  | 'heading-md'\n  | 'heading-sm'\n  | 'body-lg'\n  | 'body-md'\n  | 'body-sm'\n  | 'body-xs';\n\n/**\n * Different FontWeight and FontStyle to be used to calculate the FontFamily\n * in getFontFamilyFromWeightAndStyle\n */\nexport type FontWeight =\n  | '100'\n  | '200'\n  | '300'\n  | '400'\n  | '500'\n  | '600'\n  | '700'\n  | '800'\n  | '900'\n  | 'normal'\n  | 'bold';\nexport type FontStyle = 'normal' | 'italic';\n\n/**\n * Props for TypographyTailwindConfig\n *\n * @example\n * {\n *   fontSize: {\n *     'display-md': {\n *       fontFamily: 'Geist-Bold',\n *       fontSize: '32',\n *       fontWeight: '700',\n *       letterSpacing: '0',\n *       lineHeight: '40px',\n *     },\n *   },\n *   fontFamily: {\n *     sans: [\n *       'Geist',\n *       'Helvetica Neue',\n *       'Helvetica',\n *       'Arial',\n *       'sans-serif',\n *     ],\n *     'display-md': 'Geist',\n *   },\n *   letterSpacing: {\n *     'display-md': '0',\n *   },\n *   fontWeight: {\n *     'display-md': '400',\n *   },\n *   lineHeight: {\n *     'display-md': '40px',\n *   },\n * }\n */\nexport type TypographyTailwindConfigProps = {\n  fontSize: Record<\n    TypographyVariant,\n    [\n      string,\n      {\n        lineHeight: string; // Make sure to include units - \"40px\" instead of \"40\"\n        letterSpacing: string;\n        fontWeight: string;\n      },\n    ]\n  >;\n  fontFamily: {\n    'default-regular': string;\n    'default-regular-italic': string;\n    'default-medium': string;\n    'default-medium-italic': string;\n    'default-bold': string;\n    'default-bold-italic': string;\n    'accent-regular': string;\n    'accent-medium': string;\n    'accent-bold': string;\n    'hero-regular': string;\n  };\n  letterSpacing: Record<TypographyVariant, string>;\n  lineHeight: Record<TypographyVariant, string>; // Make sure to include units - \"40px\" instead of \"40\"\n};\n"]}
+{"version":3,"file":"typography.types.cjs","sourceRoot":"","sources":["../src/typography.types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Different Typography variants to be used as twrnc classNames\n */\nexport type TypographyVariant =\n  | 'display-lg'\n  | 'display-md'\n  | 'heading-lg'\n  | 'heading-md'\n  | 'heading-sm'\n  | 'body-lg'\n  | 'body-md'\n  | 'body-sm'\n  | 'body-xs'\n  | 'page-heading'\n  | 'section-heading'\n  | 'button-label-md'\n  | 'button-label-lg'\n  | 'amount-display-lg';\n\n/**\n * Different FontWeight and FontStyle to be used to calculate the FontFamily\n * in getFontFamilyFromWeightAndStyle\n */\nexport type FontWeight =\n  | '100'\n  | '200'\n  | '300'\n  | '400'\n  | '500'\n  | '600'\n  | '700'\n  | '800'\n  | '900'\n  | 'normal'\n  | 'bold';\nexport type FontStyle = 'normal' | 'italic';\n\n/**\n * Props for TypographyTailwindConfig\n *\n * @example\n * {\n *   fontSize: {\n *     'display-md': {\n *       fontFamily: 'Geist-Bold',\n *       fontSize: '32',\n *       fontWeight: '700',\n *       letterSpacing: '0',\n *       lineHeight: '40px',\n *     },\n *   },\n *   fontFamily: {\n *     sans: [\n *       'Geist',\n *       'Helvetica Neue',\n *       'Helvetica',\n *       'Arial',\n *       'sans-serif',\n *     ],\n *     'display-md': 'Geist',\n *   },\n *   letterSpacing: {\n *     'display-md': '0',\n *   },\n *   fontWeight: {\n *     'display-md': '400',\n *   },\n *   lineHeight: {\n *     'display-md': '40px',\n *   },\n * }\n */\nexport type TypographyTailwindConfigProps = {\n  fontSize: Record<\n    TypographyVariant,\n    [\n      string,\n      {\n        lineHeight: string; // Make sure to include units - \"40px\" instead of \"40\"\n        letterSpacing: string;\n        fontWeight: string;\n      },\n    ]\n  >;\n  fontFamily: {\n    'default-regular': string;\n    'default-regular-italic': string;\n    'default-medium': string;\n    'default-medium-italic': string;\n    'default-bold': string;\n    'default-bold-italic': string;\n    'accent-regular': string;\n    'accent-medium': string;\n    'accent-bold': string;\n    'hero-regular': string;\n  };\n  letterSpacing: Record<TypographyVariant, string>;\n  lineHeight: Record<TypographyVariant, string>; // Make sure to include units - \"40px\" instead of \"40\"\n};\n"]}

package/dist/typography.types.d.cts

@@ -1,7 +1,7 @@
 /**
  * Different Typography variants to be used as twrnc classNames
  */
-export type TypographyVariant = 'display-lg' | 'display-md' | 'heading-lg' | 'heading-md' | 'heading-sm' | 'body-lg' | 'body-md' | 'body-sm' | 'body-xs';
+export type TypographyVariant = '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';
 /**
  * Different FontWeight and FontStyle to be used to calculate the FontFamily
  * in getFontFamilyFromWeightAndStyle

package/dist/typography.types.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"typography.types.d.cts","sourceRoot":"","sources":["../src/typography.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,MAAM,iBAAiB,GACzB,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,CAAC;AAEd;;;GAGG;AACH,MAAM,MAAM,UAAU,GAClB,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,QAAQ,GACR,MAAM,CAAC;AACX,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,MAAM,6BAA6B,GAAG;IAC1C,QAAQ,EAAE,MAAM,CACd,iBAAiB,EACjB;QACE,MAAM;QACN;YACE,UAAU,EAAE,MAAM,CAAC;YACnB,aAAa,EAAE,MAAM,CAAC;YACtB,UAAU,EAAE,MAAM,CAAC;SACpB;KACF,CACF,CAAC;IACF,UAAU,EAAE;QACV,iBAAiB,EAAE,MAAM,CAAC;QAC1B,wBAAwB,EAAE,MAAM,CAAC;QACjC,gBAAgB,EAAE,MAAM,CAAC;QACzB,uBAAuB,EAAE,MAAM,CAAC;QAChC,cAAc,EAAE,MAAM,CAAC;QACvB,qBAAqB,EAAE,MAAM,CAAC;QAC9B,gBAAgB,EAAE,MAAM,CAAC;QACzB,eAAe,EAAE,MAAM,CAAC;QACxB,aAAa,EAAE,MAAM,CAAC;QACtB,cAAc,EAAE,MAAM,CAAC;KACxB,CAAC;IACF,aAAa,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC;IACjD,UAAU,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC;CAC/C,CAAC"}
+{"version":3,"file":"typography.types.d.cts","sourceRoot":"","sources":["../src/typography.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,MAAM,iBAAiB,GACzB,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,cAAc,GACd,iBAAiB,GACjB,iBAAiB,GACjB,iBAAiB,GACjB,mBAAmB,CAAC;AAExB;;;GAGG;AACH,MAAM,MAAM,UAAU,GAClB,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,QAAQ,GACR,MAAM,CAAC;AACX,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,MAAM,6BAA6B,GAAG;IAC1C,QAAQ,EAAE,MAAM,CACd,iBAAiB,EACjB;QACE,MAAM;QACN;YACE,UAAU,EAAE,MAAM,CAAC;YACnB,aAAa,EAAE,MAAM,CAAC;YACtB,UAAU,EAAE,MAAM,CAAC;SACpB;KACF,CACF,CAAC;IACF,UAAU,EAAE;QACV,iBAAiB,EAAE,MAAM,CAAC;QAC1B,wBAAwB,EAAE,MAAM,CAAC;QACjC,gBAAgB,EAAE,MAAM,CAAC;QACzB,uBAAuB,EAAE,MAAM,CAAC;QAChC,cAAc,EAAE,MAAM,CAAC;QACvB,qBAAqB,EAAE,MAAM,CAAC;QAC9B,gBAAgB,EAAE,MAAM,CAAC;QACzB,eAAe,EAAE,MAAM,CAAC;QACxB,aAAa,EAAE,MAAM,CAAC;QACtB,cAAc,EAAE,MAAM,CAAC;KACxB,CAAC;IACF,aAAa,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC;IACjD,UAAU,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC;CAC/C,CAAC"}

package/dist/typography.types.d.mts

@@ -1,7 +1,7 @@
 /**
  * Different Typography variants to be used as twrnc classNames
  */
-export type TypographyVariant = 'display-lg' | 'display-md' | 'heading-lg' | 'heading-md' | 'heading-sm' | 'body-lg' | 'body-md' | 'body-sm' | 'body-xs';
+export type TypographyVariant = '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';
 /**
  * Different FontWeight and FontStyle to be used to calculate the FontFamily
  * in getFontFamilyFromWeightAndStyle

package/dist/typography.types.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"typography.types.d.mts","sourceRoot":"","sources":["../src/typography.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,MAAM,iBAAiB,GACzB,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,CAAC;AAEd;;;GAGG;AACH,MAAM,MAAM,UAAU,GAClB,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,QAAQ,GACR,MAAM,CAAC;AACX,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,MAAM,6BAA6B,GAAG;IAC1C,QAAQ,EAAE,MAAM,CACd,iBAAiB,EACjB;QACE,MAAM;QACN;YACE,UAAU,EAAE,MAAM,CAAC;YACnB,aAAa,EAAE,MAAM,CAAC;YACtB,UAAU,EAAE,MAAM,CAAC;SACpB;KACF,CACF,CAAC;IACF,UAAU,EAAE;QACV,iBAAiB,EAAE,MAAM,CAAC;QAC1B,wBAAwB,EAAE,MAAM,CAAC;QACjC,gBAAgB,EAAE,MAAM,CAAC;QACzB,uBAAuB,EAAE,MAAM,CAAC;QAChC,cAAc,EAAE,MAAM,CAAC;QACvB,qBAAqB,EAAE,MAAM,CAAC;QAC9B,gBAAgB,EAAE,MAAM,CAAC;QACzB,eAAe,EAAE,MAAM,CAAC;QACxB,aAAa,EAAE,MAAM,CAAC;QACtB,cAAc,EAAE,MAAM,CAAC;KACxB,CAAC;IACF,aAAa,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC;IACjD,UAAU,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC;CAC/C,CAAC"}
+{"version":3,"file":"typography.types.d.mts","sourceRoot":"","sources":["../src/typography.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,MAAM,iBAAiB,GACzB,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,cAAc,GACd,iBAAiB,GACjB,iBAAiB,GACjB,iBAAiB,GACjB,mBAAmB,CAAC;AAExB;;;GAGG;AACH,MAAM,MAAM,UAAU,GAClB,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,QAAQ,GACR,MAAM,CAAC;AACX,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,MAAM,6BAA6B,GAAG;IAC1C,QAAQ,EAAE,MAAM,CACd,iBAAiB,EACjB;QACE,MAAM;QACN;YACE,UAAU,EAAE,MAAM,CAAC;YACnB,aAAa,EAAE,MAAM,CAAC;YACtB,UAAU,EAAE,MAAM,CAAC;SACpB;KACF,CACF,CAAC;IACF,UAAU,EAAE;QACV,iBAAiB,EAAE,MAAM,CAAC;QAC1B,wBAAwB,EAAE,MAAM,CAAC;QACjC,gBAAgB,EAAE,MAAM,CAAC;QACzB,uBAAuB,EAAE,MAAM,CAAC;QAChC,cAAc,EAAE,MAAM,CAAC;QACvB,qBAAqB,EAAE,MAAM,CAAC;QAC9B,gBAAgB,EAAE,MAAM,CAAC;QACzB,eAAe,EAAE,MAAM,CAAC;QACxB,aAAa,EAAE,MAAM,CAAC;QACtB,cAAc,EAAE,MAAM,CAAC;KACxB,CAAC;IACF,aAAa,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC;IACjD,UAAU,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC;CAC/C,CAAC"}

package/dist/typography.types.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"typography.types.mjs","sourceRoot":"","sources":["../src/typography.types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Different Typography variants to be used as twrnc classNames\n */\nexport type TypographyVariant =\n  | 'display-lg'\n  | 'display-md'\n  | 'heading-lg'\n  | 'heading-md'\n  | 'heading-sm'\n  | 'body-lg'\n  | 'body-md'\n  | 'body-sm'\n  | 'body-xs';\n\n/**\n * Different FontWeight and FontStyle to be used to calculate the FontFamily\n * in getFontFamilyFromWeightAndStyle\n */\nexport type FontWeight =\n  | '100'\n  | '200'\n  | '300'\n  | '400'\n  | '500'\n  | '600'\n  | '700'\n  | '800'\n  | '900'\n  | 'normal'\n  | 'bold';\nexport type FontStyle = 'normal' | 'italic';\n\n/**\n * Props for TypographyTailwindConfig\n *\n * @example\n * {\n *   fontSize: {\n *     'display-md': {\n *       fontFamily: 'Geist-Bold',\n *       fontSize: '32',\n *       fontWeight: '700',\n *       letterSpacing: '0',\n *       lineHeight: '40px',\n *     },\n *   },\n *   fontFamily: {\n *     sans: [\n *       'Geist',\n *       'Helvetica Neue',\n *       'Helvetica',\n *       'Arial',\n *       'sans-serif',\n *     ],\n *     'display-md': 'Geist',\n *   },\n *   letterSpacing: {\n *     'display-md': '0',\n *   },\n *   fontWeight: {\n *     'display-md': '400',\n *   },\n *   lineHeight: {\n *     'display-md': '40px',\n *   },\n * }\n */\nexport type TypographyTailwindConfigProps = {\n  fontSize: Record<\n    TypographyVariant,\n    [\n      string,\n      {\n        lineHeight: string; // Make sure to include units - \"40px\" instead of \"40\"\n        letterSpacing: string;\n        fontWeight: string;\n      },\n    ]\n  >;\n  fontFamily: {\n    'default-regular': string;\n    'default-regular-italic': string;\n    'default-medium': string;\n    'default-medium-italic': string;\n    'default-bold': string;\n    'default-bold-italic': string;\n    'accent-regular': string;\n    'accent-medium': string;\n    'accent-bold': string;\n    'hero-regular': string;\n  };\n  letterSpacing: Record<TypographyVariant, string>;\n  lineHeight: Record<TypographyVariant, string>; // Make sure to include units - \"40px\" instead of \"40\"\n};\n"]}
+{"version":3,"file":"typography.types.mjs","sourceRoot":"","sources":["../src/typography.types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Different Typography variants to be used as twrnc classNames\n */\nexport type TypographyVariant =\n  | 'display-lg'\n  | 'display-md'\n  | 'heading-lg'\n  | 'heading-md'\n  | 'heading-sm'\n  | 'body-lg'\n  | 'body-md'\n  | 'body-sm'\n  | 'body-xs'\n  | 'page-heading'\n  | 'section-heading'\n  | 'button-label-md'\n  | 'button-label-lg'\n  | 'amount-display-lg';\n\n/**\n * Different FontWeight and FontStyle to be used to calculate the FontFamily\n * in getFontFamilyFromWeightAndStyle\n */\nexport type FontWeight =\n  | '100'\n  | '200'\n  | '300'\n  | '400'\n  | '500'\n  | '600'\n  | '700'\n  | '800'\n  | '900'\n  | 'normal'\n  | 'bold';\nexport type FontStyle = 'normal' | 'italic';\n\n/**\n * Props for TypographyTailwindConfig\n *\n * @example\n * {\n *   fontSize: {\n *     'display-md': {\n *       fontFamily: 'Geist-Bold',\n *       fontSize: '32',\n *       fontWeight: '700',\n *       letterSpacing: '0',\n *       lineHeight: '40px',\n *     },\n *   },\n *   fontFamily: {\n *     sans: [\n *       'Geist',\n *       'Helvetica Neue',\n *       'Helvetica',\n *       'Arial',\n *       'sans-serif',\n *     ],\n *     'display-md': 'Geist',\n *   },\n *   letterSpacing: {\n *     'display-md': '0',\n *   },\n *   fontWeight: {\n *     'display-md': '400',\n *   },\n *   lineHeight: {\n *     'display-md': '40px',\n *   },\n * }\n */\nexport type TypographyTailwindConfigProps = {\n  fontSize: Record<\n    TypographyVariant,\n    [\n      string,\n      {\n        lineHeight: string; // Make sure to include units - \"40px\" instead of \"40\"\n        letterSpacing: string;\n        fontWeight: string;\n      },\n    ]\n  >;\n  fontFamily: {\n    'default-regular': string;\n    'default-regular-italic': string;\n    'default-medium': string;\n    'default-medium-italic': string;\n    'default-bold': string;\n    'default-bold-italic': string;\n    'accent-regular': string;\n    'accent-medium': string;\n    'accent-bold': string;\n    'hero-regular': string;\n  };\n  letterSpacing: Record<TypographyVariant, string>;\n  lineHeight: Record<TypographyVariant, string>; // Make sure to include units - \"40px\" instead of \"40\"\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metamask/design-system-twrnc-preset",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Design System twrnc Preset",
   "keywords": [
     "MetaMask",
@@ -27,6 +27,16 @@
         "default": "./dist/index.cjs"
       }
     },
+    "./tailwind.config": {
+      "import": {
+        "types": "./dist/tailwind.config.d.mts",
+        "default": "./dist/tailwind.config.mjs"
+      },
+      "require": {
+        "types": "./dist/tailwind.config.d.cts",
+        "default": "./dist/tailwind.config.cjs"
+      }
+    },
     "./package.json": "./package.json"
   },
   "main": "./dist/index.cjs",
@@ -54,7 +64,7 @@
     "@babel/preset-react": "^7.25.9",
     "@babel/preset-typescript": "^7.23.3",
     "@metamask/auto-changelog": "^5.0.2",
-    "@metamask/design-tokens": "^8.0.0",
+    "@metamask/design-tokens": "^8.1.0",
     "@testing-library/react-native": "^12.8.1",
     "@ts-bridge/cli": "^0.6.3",
     "@types/babel__preset-env": "^7",