@metamask/design-system-twrnc-preset
Version:
103 lines • 4.69 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
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");
/**
* 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.
* @param isPureBlack - When true with dark theme, uses pureBlackDarkTheme token values.
* @returns A Tailwind CSS configuration object with extended theme properties and plugins.
*/
const generateTailwindConfig = (theme, isPureBlack = false) => {
const designSystemColors = (0, colors_1.getThemeColors)(theme, isPureBlack);
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(designSystemColors, 'background');
const textColors = extractColorsByPrefix(designSystemColors, 'text');
const borderColors = extractColorsByPrefix(designSystemColors, 'border');
const config = {
theme: {
// 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: {
...typography_1.typographyTailwindConfig.fontSize,
},
fontFamily: {
...typography_1.typographyTailwindConfig.fontFamily,
},
letterSpacing: {
...typography_1.typographyTailwindConfig.letterSpacing,
},
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