import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
import { style, styleVariants, createThemeContract, assignVars } from "@vanilla-extract/css";
import { calc } from "@vanilla-extract/css-utils";
import { createTextStyle } from "./capsize.css.mjs";
import { vars } from "../themes/vars.css.mjs";
import { breakpointQuery, responsiveStyle } from "./responsiveStyle.mjs";
import { colorModeStyle } from "./colorModeStyle.mjs";
import { mapToProperty } from "../utils/index.mjs";
setFileScope("src/lib/css/typography.css.ts", "braid-design-system");
const fontFamily = style({
  fontFamily: vars.fontFamily
}, "fontFamily");
const fontWeight = styleVariants(vars.textWeight, mapToProperty("fontWeight"), "fontWeight");
const textSizeTrimmed = styleVariants(vars.textSize, ({
  mobile,
  tablet
}, variant) => [createTextStyle({
  fontSize: mobile.fontSize,
  lineHeight: mobile.lineHeight,
  ...mobile.capsizeTrims
}, {
  "@media": {
    [breakpointQuery.tablet]: {
      fontSize: tablet.fontSize,
      lineHeight: tablet.lineHeight,
      ...tablet.capsizeTrims
    }
  }
}, `textSize_${variant}`)], "textSizeTrimmed");
const textSizeUntrimmed = styleVariants(vars.textSize, ({
  mobile,
  tablet
}) => responsiveStyle({
  mobile: {
    fontSize: mobile.fontSize,
    lineHeight: mobile.lineHeight
  },
  tablet: {
    fontSize: tablet.fontSize,
    lineHeight: tablet.lineHeight
  }
}), "textSizeUntrimmed");
const headingWeight = styleVariants(vars.headingWeight, mapToProperty("fontWeight"), "headingWeight");
const heading = styleVariants(vars.headingLevel, ({
  mobile,
  tablet
}, variant) => [createTextStyle({
  fontSize: mobile.fontSize,
  lineHeight: mobile.lineHeight,
  ...mobile.capsizeTrims
}, {
  "@media": {
    [breakpointQuery.tablet]: {
      fontSize: tablet.fontSize,
      lineHeight: tablet.lineHeight,
      ...tablet.capsizeTrims
    }
  }
}, `heading_${variant}`)], "heading");
const textToneVars = createThemeContract({
  critical: null,
  caution: null,
  info: null,
  promote: null,
  positive: null,
  brandAccent: null,
  formAccent: null,
  neutral: null,
  secondary: null,
  link: null
});
const lightContextToneVars = assignVars(textToneVars, {
  critical: vars.foregroundColor.critical,
  caution: vars.foregroundColor.caution,
  info: vars.foregroundColor.info,
  promote: vars.foregroundColor.promote,
  positive: vars.foregroundColor.positive,
  brandAccent: vars.foregroundColor.brandAccent,
  formAccent: vars.foregroundColor.formAccent,
  neutral: vars.foregroundColor.neutral,
  secondary: vars.foregroundColor.secondary,
  link: vars.foregroundColor.link
});
const darkContextToneVars = assignVars(textToneVars, {
  critical: vars.foregroundColor.criticalLight,
  caution: vars.foregroundColor.cautionLight,
  info: vars.foregroundColor.infoLight,
  promote: vars.foregroundColor.promoteLight,
  positive: vars.foregroundColor.positiveLight,
  brandAccent: vars.foregroundColor.brandAccentLight,
  formAccent: vars.foregroundColor.formAccentLight,
  neutral: vars.foregroundColor.neutralInverted,
  secondary: vars.foregroundColor.secondaryInverted,
  link: vars.foregroundColor.linkLight
});
const lightModeTone = styleVariants({
  light: colorModeStyle({
    lightMode: {
      vars: lightContextToneVars
    }
  }),
  dark: colorModeStyle({
    lightMode: {
      vars: darkContextToneVars
    }
  })
}, "lightModeTone");
const darkModeTone = styleVariants({
  light: colorModeStyle({
    darkMode: {
      vars: lightContextToneVars
    }
  }),
  dark: colorModeStyle({
    darkMode: {
      vars: darkContextToneVars
    }
  })
}, "darkModeTone");
const neutralOverrideForBackground = {
  criticalLight: "critical",
  criticalSoft: "critical",
  criticalSoftActive: "critical",
  criticalSoftHover: "critical",
  caution: "caution",
  cautionLight: "caution",
  positiveLight: "positive",
  infoLight: "info",
  promoteLight: "promote"
};
const lightModeNeutralOverride = styleVariants(neutralOverrideForBackground, (textTone) => colorModeStyle({
  lightMode: {
    vars: {
      [textToneVars.neutral]: textToneVars[textTone]
    }
  }
}), "lightModeNeutralOverride");
const darkModeNeutralOverride = styleVariants(neutralOverrideForBackground, (textTone) => colorModeStyle({
  darkMode: {
    vars: {
      [textToneVars.neutral]: textToneVars[textTone]
    }
  }
}), "darkModeNeutralOverride");
const tone = styleVariants(textToneVars, (toneVar) => ({
  color: toneVar
}), "tone");
const makeTouchableSpacing = (touchableHeight, textHeight) => {
  const space = calc(touchableHeight).subtract(textHeight).divide(2).toString();
  return {
    paddingTop: space,
    paddingBottom: space
  };
};
const touchableText = styleVariants(vars.textSize, (textDefinition) => responsiveStyle({
  mobile: makeTouchableSpacing(vars.touchableSize, textDefinition.mobile.lineHeight),
  tablet: makeTouchableSpacing(vars.touchableSize, textDefinition.tablet.lineHeight)
}), "touchableText");
endFileScope();
export {
  darkModeNeutralOverride,
  darkModeTone,
  fontFamily,
  fontWeight,
  heading,
  headingWeight,
  lightModeNeutralOverride,
  lightModeTone,
  textSizeTrimmed,
  textSizeUntrimmed,
  tone,
  touchableText
};
