braid-design-system
Version:
Themeable design system for the SEEK Group
32 lines (31 loc) • 1.06 kB
JavaScript
import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
import { style, createVar } from "@vanilla-extract/css";
import { calc } from "@vanilla-extract/css-utils";
import { responsiveStyle } from "../../css/responsiveStyle.mjs";
import { vars } from "../../themes/vars.css.mjs";
setFileScope("src/lib/components/MenuItemCheckbox/MenuItemCheckbox.css.ts", "braid-design-system");
const checkboxFieldSize = vars.inlineFieldSize.small;
const menuItemCapHeight = createVar("menuItemCapHeight");
const crop = createVar("crop");
const checkboxSize = style([responsiveStyle({
mobile: {
vars: {
[menuItemCapHeight]: vars.textSize.standard.mobile.capHeight,
[crop]: calc(checkboxFieldSize).subtract(menuItemCapHeight).divide(2).negate().toString()
}
},
tablet: {
vars: {
[menuItemCapHeight]: vars.textSize.standard.tablet.capHeight
}
}
}), {
height: checkboxFieldSize,
width: checkboxFieldSize,
marginTop: crop,
marginBottom: crop
}], "checkboxSize");
endFileScope();
export {
checkboxSize
};