braid-design-system
Version:
Themeable design system for the SEEK Group
72 lines (71 loc) • 1.98 kB
JavaScript
import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
import { style, styleVariants, createThemeContract, assignVars } from "@vanilla-extract/css";
import { colorModeStyle } from "../../../css/colorModeStyle.mjs";
import { vars } from "../../../themes/vars.css.mjs";
setFileScope("src/lib/components/private/Keyline/Keyline.css.ts", "braid-design-system");
const keylineVars = createThemeContract({
promote: null,
info: null,
positive: null,
caution: null,
critical: null,
formAccent: null
});
const lightModeVars = {
vars: assignVars(keylineVars, {
promote: vars.borderColor.promote,
info: vars.borderColor.info,
positive: vars.borderColor.positive,
caution: vars.borderColor.caution,
critical: vars.borderColor.critical,
formAccent: vars.borderColor.formAccent
})
};
const darkModeVars = {
vars: assignVars(keylineVars, {
promote: vars.borderColor.promoteLight,
info: vars.borderColor.infoLight,
positive: vars.borderColor.positiveLight,
caution: vars.borderColor.cautionLight,
critical: vars.borderColor.criticalLight,
formAccent: vars.borderColor.formAccentLight
})
};
const tone = styleVariants(keylineVars, (_, name) => ({
background: keylineVars[name]
}), "tone");
const lightMode = styleVariants({
light: colorModeStyle({
lightMode: lightModeVars
}),
dark: colorModeStyle({
lightMode: darkModeVars
})
}, "lightMode");
const darkMode = styleVariants({
light: colorModeStyle({
darkMode: lightModeVars
}),
dark: colorModeStyle({
darkMode: darkModeVars
})
}, "darkMode");
const noRadiusOnRight = style({
borderTopRightRadius: "0 !important",
borderBottomRightRadius: "0 !important"
}, "noRadiusOnRight");
const largestWidth = style({
width: vars.borderRadius.xlarge
}, "largestWidth");
const width = style({
width: vars.grid
}, "width");
endFileScope();
export {
darkMode,
largestWidth,
lightMode,
noRadiusOnRight,
tone,
width
};