import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
import { createThemeContract, assignVars, styleVariants, style } from "@vanilla-extract/css";
import { colorModeStyle } from "../../../css/colorModeStyle.mjs";
setFileScope("src/lib/components/private/Placeholder/Placeholder.css.ts", "braid-design-system");
const vars = createThemeContract({
  background: null,
  borderColor: null,
  labelColor: null,
  lineColor: null
});
const lightContextVars = {
  vars: assignVars(vars, {
    background: "hsla(0, 0%, 20%, 0.08)",
    borderColor: "hsla(0, 0%, 20%, 0.3)",
    labelColor: "hsla(0, 0%, 20%, 0.4)",
    lineColor: "hsla(0, 0%, 20%, 0.1)"
  })
};
const darkContextVars = {
  vars: assignVars(vars, {
    background: "hsla(0, 0%, 100%, 0.05)",
    borderColor: "hsla(0, 0%, 100%, 0.4)",
    labelColor: "hsla(0, 0%, 100%, 0.6)",
    lineColor: "hsla(0, 0%, 100%, 0.2)"
  })
};
const lightTheme = styleVariants({
  light: colorModeStyle({
    lightMode: lightContextVars
  }),
  dark: colorModeStyle({
    lightMode: darkContextVars
  })
}, "lightTheme");
const darkTheme = styleVariants({
  light: colorModeStyle({
    darkMode: lightContextVars
  }),
  dark: colorModeStyle({
    darkMode: darkContextVars
  })
}, "darkTheme");
const borderWidth = "2px";
const box = style({
  background: vars.background,
  border: `${borderWidth} solid ${vars.borderColor}`
}, "box");
const label = style({
  color: vars.labelColor
}, "label");
const line = style({
  strokeWidth: borderWidth,
  stroke: vars.lineColor
}, "line");
endFileScope();
export {
  box,
  darkTheme,
  label,
  lightTheme,
  line
};
