@metamask/design-system-twrnc-preset 0.1.0

package/dist/hooks.d.mts

@@ -0,0 +1,35 @@
+import type { Theme } from "./Theme.types.mjs";
+/**
+ * Hook that provides access to the current theme.
+ * Use this when you need to conditionally render content based on theme.
+ *
+ * @returns The current theme ('light' or 'dark')
+ *
+ * @example
+ * const theme = useTheme();
+ * const inverseTheme = theme === Theme.Light ? Theme.Dark : Theme.Light;
+ * return (
+ *   <ThemeProvider theme={inverseTheme}>
+ *     <View style={tw`bg-default`}>
+ *       <Text style={tw`text-default`}>Toast message</Text>
+ *     </View>
+ *   </ThemeProvider>
+ * );
+ */
+export declare const useTheme: () => Theme;
+/**
+ * Hook that provides access to the tailwind utility function.
+ * Use this when you only need styling capabilities.
+ *
+ * @returns Tailwind utility function for styling
+ *
+ * @example
+ * const tw = useTailwind();
+ * return (
+ *   <View style={tw`p-4 bg-primary`}>
+ *     <Text>Styled content</Text>
+ *   </View>
+ * );
+ */
+export declare const useTailwind: () => import("twrnc").TailwindFn;
+//# sourceMappingURL=hooks.d.mts.map

package/dist/hooks.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.mts","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,0BAAsB;AAG3C;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,QAAQ,QAAO,KAG3B,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,WAAW,kCAGvB,CAAC"}

package/dist/hooks.mjs

@@ -0,0 +1,42 @@
+import { useContext } from "react";
+import { ThemeContext } from "./ThemeContext.mjs";
+/**
+ * Hook that provides access to the current theme.
+ * Use this when you need to conditionally render content based on theme.
+ *
+ * @returns The current theme ('light' or 'dark')
+ *
+ * @example
+ * const theme = useTheme();
+ * const inverseTheme = theme === Theme.Light ? Theme.Dark : Theme.Light;
+ * return (
+ *   <ThemeProvider theme={inverseTheme}>
+ *     <View style={tw`bg-default`}>
+ *       <Text style={tw`text-default`}>Toast message</Text>
+ *     </View>
+ *   </ThemeProvider>
+ * );
+ */
+export const useTheme = () => {
+    const { theme } = useContext(ThemeContext);
+    return theme;
+};
+/**
+ * Hook that provides access to the tailwind utility function.
+ * Use this when you only need styling capabilities.
+ *
+ * @returns Tailwind utility function for styling
+ *
+ * @example
+ * const tw = useTailwind();
+ * return (
+ *   <View style={tw`p-4 bg-primary`}>
+ *     <Text>Styled content</Text>
+ *   </View>
+ * );
+ */
+export const useTailwind = () => {
+    const { tw } = useContext(ThemeContext);
+    return tw;
+};
+//# sourceMappingURL=hooks.mjs.map

package/dist/hooks.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.mjs","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc;AAGnC,OAAO,EAAE,YAAY,EAAE,2BAAuB;AAE9C;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAU,EAAE;IAClC,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAC3C,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B,MAAM,EAAE,EAAE,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACxC,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC","sourcesContent":["import { useContext } from 'react';\n\nimport type { Theme } from './Theme.types';\nimport { ThemeContext } from './ThemeContext';\n\n/**\n * Hook that provides access to the current theme.\n * Use this when you need to conditionally render content based on theme.\n *\n * @returns The current theme ('light' or 'dark')\n *\n * @example\n * const theme = useTheme();\n * const inverseTheme = theme === Theme.Light ? Theme.Dark : Theme.Light;\n * return (\n *   <ThemeProvider theme={inverseTheme}>\n *     <View style={tw`bg-default`}>\n *       <Text style={tw`text-default`}>Toast message</Text>\n *     </View>\n *   </ThemeProvider>\n * );\n */\nexport const useTheme = (): Theme => {\n  const { theme } = useContext(ThemeContext);\n  return theme;\n};\n\n/**\n * Hook that provides access to the tailwind utility function.\n * Use this when you only need styling capabilities.\n *\n * @returns Tailwind utility function for styling\n *\n * @example\n * const tw = useTailwind();\n * return (\n *   <View style={tw`p-4 bg-primary`}>\n *     <Text>Styled content</Text>\n *   </View>\n * );\n */\nexport const useTailwind = () => {\n  const { tw } = useContext(ThemeContext);\n  return tw;\n};\n"]}

package/dist/index.cjs

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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; } });
+var Theme_types_1 = require("./Theme.types.cjs");
+Object.defineProperty(exports, "Theme", { enumerable: true, get: function () { return Theme_types_1.Theme; } });
+// Hooks
+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; } });
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +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"]}

package/dist/index.d.cts

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

package/dist/index.d.cts.map

@@ -0,0 +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"}

package/dist/index.d.mts

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

package/dist/index.d.mts.map

@@ -0,0 +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"}

package/dist/index.mjs

@@ -0,0 +1,6 @@
+// Provider and type
+export { ThemeProvider } from "./ThemeProvider.mjs";
+export { Theme } from "./Theme.types.mjs";
+// Hooks
+export { useTailwind, useTheme } from "./hooks.mjs";
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +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"]}

package/dist/tailwind.config.cjs

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateTailwindConfig = void 0;
+const colors_1 = require("./colors.cjs");
+const typography_1 = require("./typography.cjs");
+/**
+ * Extracts colors by prefix from the flattened colors object and removes the prefix from keys.
+ * This creates structured color objects that enable shorter Tailwind class names by removing
+ * redundant prefixes (e.g., "background-default" becomes "default" for backgroundColor).
+ *
+ * @param colors - The flattened colors object containing all theme colors with kebab-case keys.
+ * @param prefix - The prefix to extract colors for (e.g., 'background', 'text', 'border').
+ * @returns A new object containing only colors matching the prefix, with the prefix removed from keys.
+ *
+ * @example
+ * const colors = { 'background-default': '#fff', 'background-muted': '#eee', 'text-default': '#000' };
+ * extractColorsByPrefix(colors, 'background');
+ * // Returns: { 'default': '#fff', 'muted': '#eee' }
+ */
+const extractColorsByPrefix = (colors, prefix) => {
+    const extracted = {};
+    const prefixWithDash = `${prefix}-`;
+    Object.entries(colors).forEach(([key, value]) => {
+        if (key.startsWith(prefixWithDash)) {
+            const colorName = key.replace(prefixWithDash, '');
+            extracted[colorName] = value;
+        }
+    });
+    return extracted;
+};
+/**
+ * Generates a Tailwind CSS configuration object based on the specified theme.
+ * This configuration extends the base Tailwind settings with custom theme colors, typography settings,
+ * and other style properties for use in React Native with `twrnc`.
+ *
+ * @param theme - The theme ('light' or 'dark'). Specifies whether to use light or dark mode styles.
+ * @returns A Tailwind CSS configuration object with extended theme properties and plugins.
+ */
+const generateTailwindConfig = (theme) => {
+    const colors = colors_1.themeColors[theme];
+    if (!colors) {
+        console.error('Theme colors not found.');
+        return {};
+    }
+    // Extract structured colors from the flattened colors
+    const backgroundColors = extractColorsByPrefix(colors, 'background');
+    const textColors = extractColorsByPrefix(colors, 'text');
+    const borderColors = extractColorsByPrefix(colors, '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',
+            },
+            fontSize: {
+            // Empty to remove default Tailwind font sizes (text-sm, text-lg, etc.)
+            // Design system font sizes added via extend
+            },
+            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,
+                },
+            },
+        },
+    };
+    return config;
+};
+exports.generateTailwindConfig = generateTailwindConfig;
+//# sourceMappingURL=tailwind.config.cjs.map

package/dist/tailwind.config.cjs.map

@@ -0,0 +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"]}

package/dist/tailwind.config.d.cts

@@ -0,0 +1,12 @@
+import type { TwConfig } from "twrnc";
+import type { Theme } from "./Theme.types.cjs";
+/**
+ * Generates a Tailwind CSS configuration object based on the specified theme.
+ * This configuration extends the base Tailwind settings with custom theme colors, typography settings,
+ * and other style properties for use in React Native with `twrnc`.
+ *
+ * @param theme - The theme ('light' or 'dark'). Specifies whether to use light or dark mode styles.
+ * @returns A Tailwind CSS configuration object with extended theme properties and plugins.
+ */
+export declare const generateTailwindConfig: (theme: Theme) => TwConfig;
+//# sourceMappingURL=tailwind.config.d.cts.map

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

@@ -0,0 +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"}

package/dist/tailwind.config.d.mts

@@ -0,0 +1,12 @@
+import type { TwConfig } from "twrnc";
+import type { Theme } from "./Theme.types.mjs";
+/**
+ * Generates a Tailwind CSS configuration object based on the specified theme.
+ * This configuration extends the base Tailwind settings with custom theme colors, typography settings,
+ * and other style properties for use in React Native with `twrnc`.
+ *
+ * @param theme - The theme ('light' or 'dark'). Specifies whether to use light or dark mode styles.
+ * @returns A Tailwind CSS configuration object with extended theme properties and plugins.
+ */
+export declare const generateTailwindConfig: (theme: Theme) => TwConfig;
+//# sourceMappingURL=tailwind.config.d.mts.map

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

@@ -0,0 +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"}

package/dist/tailwind.config.mjs

@@ -0,0 +1,93 @@
+import { themeColors } from "./colors.mjs";
+import { typographyTailwindConfig } from "./typography.mjs";
+/**
+ * Extracts colors by prefix from the flattened colors object and removes the prefix from keys.
+ * This creates structured color objects that enable shorter Tailwind class names by removing
+ * redundant prefixes (e.g., "background-default" becomes "default" for backgroundColor).
+ *
+ * @param colors - The flattened colors object containing all theme colors with kebab-case keys.
+ * @param prefix - The prefix to extract colors for (e.g., 'background', 'text', 'border').
+ * @returns A new object containing only colors matching the prefix, with the prefix removed from keys.
+ *
+ * @example
+ * const colors = { 'background-default': '#fff', 'background-muted': '#eee', 'text-default': '#000' };
+ * extractColorsByPrefix(colors, 'background');
+ * // Returns: { 'default': '#fff', 'muted': '#eee' }
+ */
+const extractColorsByPrefix = (colors, prefix) => {
+    const extracted = {};
+    const prefixWithDash = `${prefix}-`;
+    Object.entries(colors).forEach(([key, value]) => {
+        if (key.startsWith(prefixWithDash)) {
+            const colorName = key.replace(prefixWithDash, '');
+            extracted[colorName] = value;
+        }
+    });
+    return extracted;
+};
+/**
+ * Generates a Tailwind CSS configuration object based on the specified theme.
+ * This configuration extends the base Tailwind settings with custom theme colors, typography settings,
+ * and other style properties for use in React Native with `twrnc`.
+ *
+ * @param theme - The theme ('light' or 'dark'). Specifies whether to use light or dark mode styles.
+ * @returns A Tailwind CSS configuration object with extended theme properties and plugins.
+ */
+export const generateTailwindConfig = (theme) => {
+    const colors = themeColors[theme];
+    if (!colors) {
+        console.error('Theme colors not found.');
+        return {};
+    }
+    // Extract structured colors from the flattened colors
+    const backgroundColors = extractColorsByPrefix(colors, 'background');
+    const textColors = extractColorsByPrefix(colors, 'text');
+    const borderColors = extractColorsByPrefix(colors, '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',
+            },
+            fontSize: {
+            // Empty to remove default Tailwind font sizes (text-sm, text-lg, etc.)
+            // Design system font sizes added via extend
+            },
+            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,
+                },
+            },
+        },
+    };
+    return config;
+};
+//# sourceMappingURL=tailwind.config.mjs.map

package/dist/tailwind.config.mjs.map

@@ -0,0 +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"]}

package/dist/typography.cjs

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.typographyTailwindConfig = void 0;
+const design_tokens_1 = require("@metamask/design-tokens");
+exports.typographyTailwindConfig = {
+    fontSize: {
+        'display-lg': [
+            design_tokens_1.typography.sDisplayLG.fontSize.toString(),
+            {
+                lineHeight: `${design_tokens_1.typography.sDisplayLG.lineHeight}px`,
+                letterSpacing: `${design_tokens_1.typography.sDisplayLG.letterSpacing}`,
+                fontWeight: design_tokens_1.typography.sDisplayLG.fontWeight,
+            },
+        ],
+        'display-md': [
+            design_tokens_1.typography.sDisplayMD.fontSize.toString(),
+            {
+                lineHeight: `${design_tokens_1.typography.sDisplayMD.lineHeight}px`,
+                letterSpacing: `${design_tokens_1.typography.sDisplayMD.letterSpacing}`,
+                fontWeight: design_tokens_1.typography.sDisplayMD.fontWeight,
+            },
+        ],
+        'heading-lg': [
+            design_tokens_1.typography.sHeadingLG.fontSize.toString(),
+            {
+                lineHeight: `${design_tokens_1.typography.sHeadingLG.lineHeight}px`,
+                letterSpacing: `${design_tokens_1.typography.sHeadingLG.letterSpacing}`,
+                fontWeight: design_tokens_1.typography.sHeadingLG.fontWeight,
+            },
+        ],
+        'heading-md': [
+            design_tokens_1.typography.sHeadingMD.fontSize.toString(),
+            {
+                lineHeight: `${design_tokens_1.typography.sHeadingMD.lineHeight}px`,
+                letterSpacing: `${design_tokens_1.typography.sHeadingMD.letterSpacing}`,
+                fontWeight: design_tokens_1.typography.sHeadingMD.fontWeight,
+            },
+        ],
+        'heading-sm': [
+            design_tokens_1.typography.sHeadingSM.fontSize.toString(),
+            {
+                lineHeight: `${design_tokens_1.typography.sHeadingSM.lineHeight}px`,
+                letterSpacing: `${design_tokens_1.typography.sHeadingSM.letterSpacing}`,
+                fontWeight: design_tokens_1.typography.sHeadingSM.fontWeight,
+            },
+        ],
+        'body-lg': [
+            design_tokens_1.typography.sBodyLGMedium.fontSize.toString(),
+            {
+                lineHeight: `${design_tokens_1.typography.sBodyLGMedium.lineHeight}px`,
+                letterSpacing: `${design_tokens_1.typography.sBodyLGMedium.letterSpacing}`,
+                fontWeight: design_tokens_1.typography.sBodyLGMedium.fontWeight,
+            },
+        ],
+        'body-md': [
+            design_tokens_1.typography.sBodyMD.fontSize.toString(),
+            {
+                lineHeight: `${design_tokens_1.typography.sBodyMD.lineHeight}px`,
+                letterSpacing: `${design_tokens_1.typography.sBodyMD.letterSpacing}`,
+                fontWeight: design_tokens_1.typography.sBodyMD.fontWeight,
+            },
+        ],
+        'body-sm': [
+            design_tokens_1.typography.sBodySM.fontSize.toString(),
+            {
+                lineHeight: `${design_tokens_1.typography.sBodySM.lineHeight}px`,
+                letterSpacing: `${design_tokens_1.typography.sBodySM.letterSpacing}`,
+                fontWeight: design_tokens_1.typography.sBodySM.fontWeight,
+            },
+        ],
+        'body-xs': [
+            design_tokens_1.typography.sBodyXS.fontSize.toString(),
+            {
+                lineHeight: `${design_tokens_1.typography.sBodyXS.lineHeight}px`,
+                letterSpacing: `${design_tokens_1.typography.sBodyXS.letterSpacing}`,
+                fontWeight: design_tokens_1.typography.sBodyXS.fontWeight,
+            },
+        ],
+    },
+    fontFamily: {
+        'default-regular': 'Geist-Regular',
+        'default-regular-italic': 'Geist-RegularItalic',
+        'default-medium': 'Geist-Medium',
+        'default-medium-italic': 'Geist-MediumItalic',
+        'default-bold': 'Geist-Bold',
+        'default-bold-italic': 'Geist-BoldItalic',
+        'accent-regular': 'MMSans-Regular',
+        'accent-medium': 'MMSans-Medium',
+        'accent-bold': 'MMSans-Bold',
+        'hero-regular': 'MMPoly-Regular',
+    },
+    letterSpacing: {
+        'display-lg': `${design_tokens_1.typography.sDisplayLG.letterSpacing}`,
+        'display-md': `${design_tokens_1.typography.sDisplayMD.letterSpacing}`,
+        'heading-lg': `${design_tokens_1.typography.sHeadingLG.letterSpacing}`,
+        'heading-md': `${design_tokens_1.typography.sHeadingMD.letterSpacing}`,
+        'heading-sm': `${design_tokens_1.typography.sHeadingSM.letterSpacing}`,
+        'body-lg': `${design_tokens_1.typography.sBodyLGMedium.letterSpacing}`,
+        'body-md': `${design_tokens_1.typography.sBodyMD.letterSpacing}`,
+        'body-sm': `${design_tokens_1.typography.sBodySM.letterSpacing}`,
+        'body-xs': `${design_tokens_1.typography.sBodyXS.letterSpacing}`,
+    },
+    lineHeight: {
+        'display-lg': `${design_tokens_1.typography.sDisplayLG.lineHeight}px`,
+        'display-md': `${design_tokens_1.typography.sDisplayMD.lineHeight}px`,
+        'heading-lg': `${design_tokens_1.typography.sHeadingLG.lineHeight}px`,
+        'heading-md': `${design_tokens_1.typography.sHeadingMD.lineHeight}px`,
+        'heading-sm': `${design_tokens_1.typography.sHeadingSM.lineHeight}px`,
+        'body-lg': `${design_tokens_1.typography.sBodyLGMedium.lineHeight}px`,
+        '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`,
+    },
+};
+//# sourceMappingURL=typography.cjs.map

package/dist/typography.cjs.map

@@ -0,0 +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"]}

package/dist/typography.d.cts

@@ -0,0 +1,3 @@
+import type { TypographyTailwindConfigProps } from "./typography.types.cjs";
+export declare const typographyTailwindConfig: TypographyTailwindConfigProps;
+//# sourceMappingURL=typography.d.cts.map

package/dist/typography.d.cts.map

@@ -0,0 +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"}

package/dist/typography.d.mts

@@ -0,0 +1,3 @@
+import type { TypographyTailwindConfigProps } from "./typography.types.mjs";
+export declare const typographyTailwindConfig: TypographyTailwindConfigProps;
+//# sourceMappingURL=typography.d.mts.map

package/dist/typography.d.mts.map

@@ -0,0 +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"}