braid-design-system
Version:
Themeable design system for the SEEK Group
131 lines (130 loc) • 4.61 kB
JavaScript
"use strict";
const fileScope = require("@vanilla-extract/css/fileScope");
const css = require("@vanilla-extract/css");
const cssUtils = require("@vanilla-extract/css-utils");
const lib_css_colorModeStyle_cjs = require("../../../css/colorModeStyle.cjs");
const lib_css_outlineStyle_cjs = require("../../../css/outlineStyle.cjs");
const lib_css_responsiveStyle_cjs = require("../../../css/responsiveStyle.cjs");
const lib_components_private_touchable_debugTouchable_cjs = require("../touchable/debugTouchable.cjs");
const lib_components_private_touchable_hitArea_cjs = require("../touchable/hitArea.cjs");
const lib_themes_vars_css_cjs = require("../../../themes/vars.css.cjs");
fileScope.setFileScope("src/lib/components/private/InlineField/InlineField.css.ts", "braid-design-system");
const sizes = {
standard: "standard",
small: "small"
};
const fieldSize = css.createVar("fieldSize");
const labelCapHeight = css.createVar("labelCapHeight");
const sizeVars = css.styleVariants(sizes, (size) => lib_css_responsiveStyle_cjs.responsiveStyle({
mobile: {
vars: {
[fieldSize]: lib_themes_vars_css_cjs.vars.inlineFieldSize[size],
[labelCapHeight]: lib_themes_vars_css_cjs.vars.textSize[size].mobile.capHeight
}
},
tablet: {
vars: {
[labelCapHeight]: lib_themes_vars_css_cjs.vars.textSize[size].tablet.capHeight
}
}
}), "sizeVars");
const hitAreaOffset = cssUtils.calc(lib_components_private_touchable_hitArea_cjs.hitArea).subtract(fieldSize).divide(2).negate().toString();
const realField = css.style([{
width: lib_components_private_touchable_hitArea_cjs.hitArea,
height: lib_components_private_touchable_hitArea_cjs.hitArea,
top: hitAreaOffset,
left: hitAreaOffset
}, lib_components_private_touchable_debugTouchable_cjs.debugTouchable()], "realField");
const fakeField = css.style([{
height: fieldSize,
width: fieldSize,
selectors: {
// Overrides `surface` background of checked checkbox
// to make `formAccent` edge crisp on dark background
[`${realField}[type="checkbox"]:checked ~ &`]: {
background: "transparent"
}
}
}, lib_css_outlineStyle_cjs.outlineStyle(`${realField}:focus-visible ~ &`)], "fakeField");
const labelOffset = css.style({
paddingTop: cssUtils.calc(fieldSize).subtract(labelCapHeight).divide(2).toString()
}, "labelOffset");
const isMixed = css.style({}, "isMixed");
const children = css.style({
selectors: {
[`${realField}:checked ~ * &,
${realField}${isMixed} ~ * &`]: {
display: "block",
zIndex: 1
}
}
}, "children");
const selected = css.style({
selectors: {
[`${realField}:checked + ${fakeField} > &,
${realField}${isMixed} + ${fakeField} > &`]: {
opacity: 1
}
}
}, "selected");
const hideBorderOnDarkBackgroundInLightMode = css.style(lib_css_colorModeStyle_cjs.colorModeStyle({
lightMode: {
opacity: 0
}
}), "hideBorderOnDarkBackgroundInLightMode");
const hoverOverlay = css.style({
selectors: {
[`${realField}:hover:not(:checked):not(${isMixed}):not(:disabled) + ${fakeField} > &,
${realField}:focus:not(${isMixed}) + ${fakeField} > &`]: {
opacity: 1
}
}
}, "hoverOverlay");
const indicator = css.style({
selectors: {
[`${hoverOverlay} > &`]: {
opacity: 0.2
}
}
}, "indicator");
const disabledRadioIndicator = css.style([{
opacity: 0.3
}, lib_css_colorModeStyle_cjs.colorModeStyle({
lightMode: {
backgroundColor: lib_themes_vars_css_cjs.vars.foregroundColor.secondary
},
darkMode: {
backgroundColor: lib_themes_vars_css_cjs.vars.foregroundColor.secondaryInverted
}
})], "disabledRadioIndicator");
const checkboxScale = css.style({
transform: "scale(0.85)",
selectors: {
[`${realField}:active + ${fakeField} > * > &`]: {
transform: "scale(0.75)"
}
}
}, "checkboxScale");
const checkboxIndicator = [indicator, checkboxScale];
const radioScale = css.style({
transform: "scale(0.6)",
selectors: {
[`${realField}:active + ${fakeField} > * > &`]: {
transform: "scale(0.5)"
}
}
}, "radioScale");
const radioIndicator = [indicator, radioScale];
fileScope.endFileScope();
exports.checkboxIndicator = checkboxIndicator;
exports.children = children;
exports.disabledRadioIndicator = disabledRadioIndicator;
exports.fakeField = fakeField;
exports.hideBorderOnDarkBackgroundInLightMode = hideBorderOnDarkBackgroundInLightMode;
exports.hoverOverlay = hoverOverlay;
exports.isMixed = isMixed;
exports.labelOffset = labelOffset;
exports.radioIndicator = radioIndicator;
exports.realField = realField;
exports.selected = selected;
exports.sizeVars = sizeVars;