@hitachivantara/uikit-styles
Version:
UI Kit styling solution for the Next Design System.
132 lines (131 loc) • 3.6 kB
JavaScript
;
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const palette = require("./palette.cjs");
const index = require("./tokens/index.cjs");
const utils = require("./utils.cjs");
const colors = require("./tokens/colors.cjs");
const componentsSpec = {
header: {
height: "string",
secondLevelHeight: "string"
},
form: {
errorColor: "string"
},
bulkActions: {
actionButtonVariant: "string"
},
table: {
rowStripedBackgroundColorEven: "string",
rowStripedBackgroundColorOdd: "string",
rowExpandBackgroundColor: "string",
rowSortedColor: "string",
rowSortedColorAlpha: "string"
},
stepNavigation: {
separatorMargin: "string",
defaultSeparatorHeight: "string",
simpleSeparatorHeight: "string"
},
filterGroup: {
applyButtonVariant: "string",
cancelButtonVariant: "string"
},
scrollTo: {
dotSelectedSize: "string",
backgroundColorOpacity: "string"
},
colorPicker: {
hueDirection: "string"
},
snackbar: {
actionButtonVariant: "string"
}
};
const typographyProps = {
color: "string",
fontSize: "string",
letterSpacing: "string",
lineHeight: "string",
fontWeight: "string",
textDecoration: "string"
};
const typographySpec = {
typography: {
// DS5
display: { ...typographyProps },
title1: { ...typographyProps },
title2: { ...typographyProps },
title3: { ...typographyProps },
title4: { ...typographyProps },
label: { ...typographyProps },
body: { ...typographyProps },
captionLabel: { ...typographyProps },
caption1: { ...typographyProps },
caption2: { ...typographyProps },
// LEGACY UNMAPPABLE (DS3)
"5xlTitle": { ...typographyProps },
"4xlTitle": { ...typographyProps },
xxlTitle: { ...typographyProps },
lTitle: { ...typographyProps },
sTitle: { ...typographyProps },
xxsTitle: { ...typographyProps },
sectionTitle: { ...typographyProps },
placeholderText: { ...typographyProps },
link: { ...typographyProps },
disabledText: { ...typographyProps },
selectedNavText: { ...typographyProps },
vizTextDisabled: { ...typographyProps },
xsInlineLink: { ...typographyProps }
}
};
const colorTokens = {
...colors.colors.common,
...colors.colors.light
};
const themeVars = utils.mapCSSVars({
...index,
colors: {
type: "light",
...colorTokens
},
// Flatten colors and add background color
...componentsSpec,
...typographySpec
});
function getColorOrFallback(color) {
return themeVars.colors[color] || color;
}
function getColor(color, fallbackColor) {
return getColorOrFallback(color) || getColorOrFallback(fallbackColor);
}
const spacing = (...args) => {
if (utils.hasMultipleArgs(args)) {
return args.map((arg) => utils.spacingUtil(arg, themeVars)).join(" ");
}
const [value] = args;
switch (typeof value) {
case "number":
case "string":
return utils.spacingUtil(value, themeVars);
// TODO: remove in v6
case "object":
return value && value.length > 0 ? value.map((val) => utils.spacingUtilOld(val, themeVars)).join(" ") : "0px";
default:
return "0px";
}
};
const mix = (color1, factor, color2 = "transparent") => {
const percent = typeof factor === "number" ? `${factor * 100}%` : factor;
return `color-mix(in srgb, ${getColor(color1)} ${percent}, ${getColor(color2)})`;
};
const alpha = (color, factor) => mix(color, factor);
const theme = {
...themeVars,
palette: palette.palette,
spacing,
alpha,
mix
};
exports.getColor = getColor;
exports.theme = theme;