@hitachivantara/uikit-uno-preset
Version:
UI Kit UnoCSS preset with the NEXT theme.
62 lines (61 loc) • 1.56 kB
JavaScript
import { ds5, theme } from "@hitachivantara/uikit-styles";
const { dawn: defaultColors } = ds5.colors.modes;
const { base, ...hvSpacing } = ds5.space;
const hvBreakpoints = Object.entries(ds5.breakpoints.values).map(
([key, value]) => [key, `${value}px`]
);
const hvZIndex = Object.entries(ds5.zIndices).map(
([key, value]) => [key, `${value}`]
);
const extendTheme = (baseTheme) => ({
...baseTheme,
borderRadius: {
DEFAULT: theme.radii.base,
...theme.radii
},
breakpoints: Object.fromEntries(hvBreakpoints),
containers: Object.fromEntries(
hvBreakpoints.map(([k, v]) => [k, `(min-width: ${v})`])
),
spacing: {
...baseTheme.spacing,
DEFAULT: hvSpacing.xs,
...hvSpacing
},
zIndex: Object.fromEntries(hvZIndex),
// colors
colors: {
...baseTheme.colors,
...defaultColors,
...theme.colors
},
accentColor: { DEFAULT: defaultColors.primary },
textColor: { DEFAULT: defaultColors.text },
backgroundColor: { DEFAULT: defaultColors.bgPage },
// typography
fontFamily: {
body: ds5.fontFamily.body,
sans: ds5.fontFamily.body,
serif: ds5.fontFamily.body,
mono: "monospace"
},
lineHeight: { DEFAULT: ds5.lineHeights.base, ...ds5.lineHeights },
fontSize: { DEFAULT: ds5.fontSizes.base, ...ds5.fontSizes },
fontWeight: { DEFAULT: ds5.fontWeights.normal, ...ds5.fontWeights }
});
const themeModes = {
light: {
colors: {
...ds5.colors.modes.dawn
}
},
dark: {
colors: {
...ds5.colors.modes.wicked
}
}
};
export {
extendTheme,
themeModes
};