UNPKG

@hitachivantara/uikit-styles

Version:

UI Kit styling solution for the Next Design System.

92 lines (91 loc) 2.5 kB
"use strict"; Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" }); const theme = require("./theme.cjs"); const index = require("./tokens/index.cjs"); const utils = require("./utils.cjs"); const colors = require("./tokens/colors.cjs"); const makeTheme = (options) => { const customTheme = typeof options === "function" ? options(theme.theme) : options; const newTheme = utils.mergeTheme(index, customTheme); return newTheme; }; const compatMap = { primaryStrong: "primary_80", primaryDimmed: "primary_20", positiveStrong: "positive_80", positiveDeep: "positive_120", positiveDimmed: "positive_20", warningStrong: "warning_120", warningDeep: "warning_140", warningDimmed: "warning_20", negativeStrong: "negative_80", negativeDeep: "negative_120", negativeDimmed: "negative_20", info: "neutral", infoDimmed: "neutral_20", text: "secondary", textSubtle: "secondary_80", textDisabled: "secondary_60", textDimmed: "atmo1", textLight: "base_light", textDark: "base_dark", bgHover: "primary_20", bgDisabled: "atmo3", bgPage: "atmo2", bgContainer: "atmo1", bgPageSecondary: "atmo3", border: "atmo4" }; const aliasMap = { bgPage: "backgroundColor", bgHover: "containerBackgroundHover" }; const extendCompatColors = (colors2) => { return Object.entries(colors2).reduce((acc, [key, color]) => { const compatKey = compatMap[key]; if (compatKey) { acc[compatKey] = color; } const aliasKey = aliasMap[key]; if (aliasKey) { acc[aliasKey] = color; } return acc; }, {}); }; const makeColors = (inputColors) => { const [lightColors, darkColors] = Object.entries(inputColors).reduce( (acc, [key, color]) => { const [lightColor, darkColor] = typeof color === "string" ? [color, color] : color; if (lightColor) { acc[0][key] = lightColor; } if (darkColor) { acc[1][key] = darkColor; } return acc; }, [{}, {}] ); return { // TODO: review allowing generic modes vs light/dark only modes: { dawn: { type: "light", ...colors.colors.common, ...colors.colors.light, ...extendCompatColors(lightColors), ...lightColors }, wicked: { type: "dark", ...colors.colors.common, ...colors.colors.dark, ...extendCompatColors(darkColors), ...darkColors } } }; }; exports.makeColors = makeColors; exports.makeTheme = makeTheme;