@metamask/design-system-twrnc-preset
Version:
67 lines • 2.42 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.themeColors = void 0;
const design_tokens_1 = require("@metamask/design-tokens");
const Theme_types_1 = require("./Theme.types.cjs");
/**
* Helper function to convert a camelCase / PascalCase string to kebab-case.
*
* It inserts a hyphen ("-") before every capital letter (while also handling
* consecutive capitals), then lower-cases the entire result.
*
* @param str - The original camelCase or PascalCase string.
* @returns The kebab-case representation of the input.
*
* @example
* toKebab('defaultHover'); // → 'default-hover'
* toKebab('RGBValue'); // → 'r-g-b-value'
*/
const toKebab = (str) => str
// place a dash between lower/number → upper transitions
.replace(/([a-z0-9])([A-Z])/gu, '$1-$2')
// place a dash between upper → upper+lower transitions (e.g. "RGBValue")
.replace(/([A-Z])([A-Z][a-z])/gu, '$1-$2')
.toLowerCase();
/**
* Recursively flattens a nested object of colors into a flat object with kebab-case keys.
*
* This function is specifically designed to handle MetaMask design token color objects,
* which can be deeply nested. It converts the structure into a flat object suitable
* for Tailwind CSS configuration.
*
* @param obj - The nested color object to flatten.
* @param prefix - The current prefix for the keys (used during recursion).
* @returns A flattened object with kebab-case keys and color values.
*
* @example
* const colors = {
* background: {
* default: '#FFFFFF',
* alternative: '#F2F4F6'
* }
* };
*
* flattenColors(colors);
* // Returns: {
* // 'background-default': '#FFFFFF',
* // 'background-alternative': '#F2F4F6'
* // }
*/
const flattenColors = (obj, prefix = '') => {
const result = {};
for (const [key, value] of Object.entries(obj)) {
const newKey = prefix ? `${prefix}-${toKebab(key)}` : toKebab(key);
if (typeof value === 'string') {
result[newKey] = value;
}
else if (typeof value === 'object' && value !== null) {
Object.assign(result, flattenColors(value, newKey));
}
}
return result;
};
exports.themeColors = {
[Theme_types_1.Theme.Light]: flattenColors(design_tokens_1.lightTheme.colors),
[Theme_types_1.Theme.Dark]: flattenColors(design_tokens_1.darkTheme.colors),
};
//# sourceMappingURL=colors.cjs.map