@metamask/design-system-twrnc-preset
Version:
1 lines • 4.43 kB
Source Map (JSON)
{"version":3,"file":"colors.mjs","sourceRoot":"","sources":["../src/colors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,gCAAgC;AAEhE,OAAO,EAAE,KAAK,EAAE,0BAAsB;AAEtC;;;;;;;;;;;;;GAaG;AACH,MAAM,OAAO,GAAG,CAAC,GAAW,EAAU,EAAE,CACtC,GAAG;IACD,wDAAwD;KACvD,OAAO,CAAC,qBAAqB,EAAE,OAAO,CAAC;IACxC,yEAAyE;KACxE,OAAO,CAAC,uBAAuB,EAAE,OAAO,CAAC;KACzC,WAAW,EAAE,CAAC;AAEnB;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,aAAa,GAAG,CACpB,GAA4B,EAC5B,MAAM,GAAG,EAAE,EACa,EAAE;IAC1B,MAAM,MAAM,GAA2B,EAAE,CAAC;IAE1C,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;QAC9C,MAAM,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;QAEnE,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC7B,MAAM,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC;SACxB;aAAM,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,EAAE;YACtD,MAAM,CAAC,MAAM,CACX,MAAM,EACN,aAAa,CAAC,KAAgC,EAAE,MAAM,CAAC,CACxD,CAAC;SACH;KACF;IAED,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAA0C;IAChE,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,MAAM,CAAC;IAC/C,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,MAAM,CAAC;CAC9C,CAAC;AAEF,wFAAwF;AACxF,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;AAE5D;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,KAAY,EACZ,YAAY,GAAG,KAAK,EACI,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC","sourcesContent":["import { darkTheme, lightTheme } from '@metamask/design-tokens';\n\nimport { Theme } from './Theme.types';\n\n/**\n * Helper function to convert a camelCase / PascalCase string to kebab-case.\n *\n * It inserts a hyphen (\"-\") before every capital letter (while also handling\n * consecutive capitals), then lower-cases the entire result.\n *\n * @param str - The original camelCase or PascalCase string.\n * @returns The kebab-case representation of the input.\n *\n * @example\n * toKebab('defaultHover'); // → 'default-hover'\n * toKebab('elevated1'); // → 'elevated1' (digits stay attached, like accent01)\n * toKebab('RGBValue'); // → 'r-g-b-value'\n */\nconst toKebab = (str: string): string =>\n str\n // place a dash between lower/number → upper transitions\n .replace(/([a-z0-9])([A-Z])/gu, '$1-$2')\n // place a dash between upper → upper+lower transitions (e.g. \"RGBValue\")\n .replace(/([A-Z])([A-Z][a-z])/gu, '$1-$2')\n .toLowerCase();\n\n/**\n * Recursively flattens a nested object of colors into a flat object with kebab-case keys.\n *\n * This function is specifically designed to handle MetaMask design token color objects,\n * which can be deeply nested. It converts the structure into a flat object suitable\n * for Tailwind CSS configuration.\n *\n * @param obj - The nested color object to flatten.\n * @param prefix - The current prefix for the keys (used during recursion).\n * @returns A flattened object with kebab-case keys and color values.\n *\n * @example\n * const colors = {\n * background: {\n * default: '#FFFFFF',\n * alternative: '#F2F4F6'\n * }\n * };\n *\n * flattenColors(colors);\n * // Returns: {\n * // 'background-default': '#FFFFFF',\n * // 'background-alternative': '#F2F4F6'\n * // }\n */\nconst flattenColors = (\n obj: Record<string, unknown>,\n prefix = '',\n): Record<string, string> => {\n const result: Record<string, string> = {};\n\n for (const [key, value] of Object.entries(obj)) {\n const newKey = prefix ? `${prefix}-${toKebab(key)}` : toKebab(key);\n\n if (typeof value === 'string') {\n result[newKey] = value;\n } else if (typeof value === 'object' && value !== null) {\n Object.assign(\n result,\n flattenColors(value as Record<string, unknown>, newKey),\n );\n }\n }\n\n return result;\n};\n\nexport const themeColors: Record<Theme, Record<string, string>> = {\n [Theme.Light]: flattenColors(lightTheme.colors),\n [Theme.Dark]: flattenColors(darkTheme.colors),\n};\n\n/** @deprecated OLED values are canonical on dark; same as `themeColors[Theme.Dark]`. */\nexport const pureBlackThemeColors = themeColors[Theme.Dark];\n\n/**\n * Resolves flattened theme colors.\n *\n * @param theme - Light or dark theme.\n * @param _isPureBlack - Unused; kept for client call-site compatibility\n * (OLED values are now canonical on dark).\n * @returns Flattened color map for the theme.\n */\nexport const getThemeColors = (\n theme: Theme,\n _isPureBlack = false,\n): Record<string, string> => themeColors[theme];\n"]}