diff --git a/src/internals/constants.js b/src/internals/constants.js index d2e4e92..d32c737 100644 --- a/src/internals/constants.js +++ b/src/internals/constants.js @@ -102,18 +102,18 @@ export const BORDER_STYLE_PROPERTIES = { }; export const DEFAULT_THEME_MAP = { - borderStyles: BORDER_STYLE_PROPERTIES, - borderWidths: BORDER_WIDTH_PROPERTIES, - colors: COLOR_PROPERTIES, - fonts: FONT_PROPERTIES, - fontSizes: FONT_SIZE_PROPERTIES, - fontWeights: FONT_WEIGHT_PROPERTIES, - letterSpacings: LETTER_SPACING_PROPERTIES, - lineHeights: LINE_HEIGHT_PROPERTIES, - radii: RADII_PROPERTIES, - sizes: SIZE_PROPERTIES, - space: SPACE_PROPERTIES, - zIndices: Z_INDEX_PROPERTIES, + ...BORDER_STYLE_PROPERTIES, + ...BORDER_WIDTH_PROPERTIES, + ...COLOR_PROPERTIES, + ...FONT_PROPERTIES, + ...FONT_SIZE_PROPERTIES, + ...FONT_WEIGHT_PROPERTIES, + ...LETTER_SPACING_PROPERTIES, + ...LINE_HEIGHT_PROPERTIES, + ...RADII_PROPERTIES, + ...SIZE_PROPERTIES, + ...SPACE_PROPERTIES, + ...Z_INDEX_PROPERTIES, }; const THEME_VALUES = { diff --git a/src/internals/utils.js b/src/internals/utils.js index b3402f0..9f5b21b 100644 --- a/src/internals/utils.js +++ b/src/internals/utils.js @@ -58,6 +58,22 @@ export function resolveMediaRangeQuery(query, windowWidth) { return result; } +export function processThemeMap(themeMap) { + const definition = {}; + + Object.keys(themeMap).forEach((token) => { + const scale = themeMap[token]; + + if (!definition[scale]) { + definition[scale] = {}; + } + + definition[scale][token] = scale; + }); + + return definition; +} + export function processTheme(theme) { const definition = {}; const values = {}; @@ -88,7 +104,8 @@ export function processTheme(theme) { } export function processStyles({ styles, theme, config }) { - const { utils, themeMap = DEFAULT_THEME_MAP } = config; + const { utils, themeMap: customThemeMap } = config; + const themeMap = processThemeMap(customThemeMap || DEFAULT_THEME_MAP); return Object.entries(styles).reduce((acc, [key, val]) => { if (utils && key in utils) {