@hitachivantara/uikit-styles
Version:
UI Kit styling solution for the Next Design System.
92 lines (91 loc) • 2.5 kB
JavaScript
;
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;