{"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"]}