braid-design-system/dist/lib/components/private/InlineField/InlineField.css.mjs

Themeable design system for the SEEK Group

import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
import { styleVariants, style, createVar } from "@vanilla-extract/css";
import { calc } from "@vanilla-extract/css-utils";
import { colorModeStyle } from "../../../css/colorModeStyle.mjs";
import { outlineStyle } from "../../../css/outlineStyle.mjs";
import { responsiveStyle } from "../../../css/responsiveStyle.mjs";
import { debugTouchable } from "../touchable/debugTouchable.mjs";
import { hitArea } from "../touchable/hitArea.mjs";
import { vars } from "../../../themes/vars.css.mjs";
setFileScope("src/lib/components/private/InlineField/InlineField.css.ts", "braid-design-system");
const sizes = {
  standard: "standard",
  small: "small"
};
const fieldSize = createVar("fieldSize");
const labelCapHeight = createVar("labelCapHeight");
const sizeVars = styleVariants(sizes, (size) => responsiveStyle({
  mobile: {
    vars: {
      [fieldSize]: vars.inlineFieldSize[size],
      [labelCapHeight]: vars.textSize[size].mobile.capHeight
    }
  },
  tablet: {
    vars: {
      [labelCapHeight]: vars.textSize[size].tablet.capHeight
    }
  }
}), "sizeVars");
const hitAreaOffset = calc(hitArea).subtract(fieldSize).divide(2).negate().toString();
const realField = style([{
  width: hitArea,
  height: hitArea,
  top: hitAreaOffset,
  left: hitAreaOffset
}, debugTouchable()], "realField");
const fakeField = 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"
    }
  }
}, outlineStyle(`${realField}:focus-visible ~ &`)], "fakeField");
const labelOffset = style({
  paddingTop: calc(fieldSize).subtract(labelCapHeight).divide(2).toString()
}, "labelOffset");
const isMixed = style({}, "isMixed");
const children = style({
  selectors: {
    [`${realField}:checked ~ * &,
    ${realField}${isMixed} ~ * &`]: {
      display: "block",
      zIndex: 1
    }
  }
}, "children");
const selected = style({
  selectors: {
    [`${realField}:checked + ${fakeField} > &,
    ${realField}${isMixed} + ${fakeField} > &`]: {
      opacity: 1
    }
  }
}, "selected");
const hideBorderOnDarkBackgroundInLightMode = style(colorModeStyle({
  lightMode: {
    opacity: 0
  }
}), "hideBorderOnDarkBackgroundInLightMode");
const hoverOverlay = style({
  selectors: {
    [`${realField}:hover:not(:checked):not(${isMixed}):not(:disabled) + ${fakeField} > &,
    ${realField}:focus:not(${isMixed}) + ${fakeField} > &`]: {
      opacity: 1
    }
  }
}, "hoverOverlay");
const indicator = style({
  selectors: {
    [`${hoverOverlay} > &`]: {
      opacity: 0.2
    }
  }
}, "indicator");
const disabledRadioIndicator = style([{
  opacity: 0.3
}, colorModeStyle({
  lightMode: {
    backgroundColor: vars.foregroundColor.secondary
  },
  darkMode: {
    backgroundColor: vars.foregroundColor.secondaryInverted
  }
})], "disabledRadioIndicator");
const checkboxScale = style({
  transform: "scale(0.85)",
  selectors: {
    [`${realField}:active + ${fakeField} > * > &`]: {
      transform: "scale(0.75)"
    }
  }
}, "checkboxScale");
const checkboxIndicator = [indicator, checkboxScale];
const radioScale = style({
  transform: "scale(0.6)",
  selectors: {
    [`${realField}:active + ${fakeField} > * > &`]: {
      transform: "scale(0.5)"
    }
  }
}, "radioScale");
const radioIndicator = [indicator, radioScale];
endFileScope();
export {
  checkboxIndicator,
  children,
  disabledRadioIndicator,
  fakeField,
  hideBorderOnDarkBackgroundInLightMode,
  hoverOverlay,
  isMixed,
  labelOffset,
  radioIndicator,
  realField,
  selected,
  sizeVars
};