@nurl/panda-preset/build/modern/theme/textStyles.js

Official Panda-CSS preset for the Ganglion Design System.

// src/theme/textStyles.ts
import { defineTextStyles } from "@pandacss/dev";
var displayStyles = {
  fontFamily: "display",
  fontVariationSettings: '"wght" 800',
  lineHeight: "110%"
};
var headingWeight = {
  fontVariationSettings: '"wght" 600'
};
var monoStyles = {
  fontFamily: "mono",
  fontVariationSettings: '"wght" 400'
};
function createTextStyle(description, options) {
  return {
    description,
    value: {
      fontFamily: "sans",
      ...options
    }
  };
}
var textStyles = defineTextStyles({
  "display-sm": {
    ...createTextStyle("The h1 text style - used for small display text", {
      fontSize: "3.5rem",
      ...displayStyles
    })
  },
  "display-md": {
    ...createTextStyle("The h1 text style - used for medium display text", {
      fontSize: "4.5rem",
      ...displayStyles
    })
  },
  "display-lg": {
    ...createTextStyle("The h1 text style - used for large display text", {
      fontSize: "5.5rem",
      ...displayStyles
    })
  },
  // headings
  h1: {
    ...createTextStyle("The h1 text style - used in page headings", {
      fontSize: "2.5rem",
      lineHeight: "110%",
      ...headingWeight
    })
  },
  h2: {
    ...createTextStyle("The h2 text style - used in page headings", {
      fontSize: "2rem",
      lineHeight: "125%",
      ...headingWeight
    })
  },
  h3: {
    ...createTextStyle("The h3 text style - used in secondary headings", {
      fontSize: "1.5rem",
      lineHeight: "125%",
      ...headingWeight
    })
  },
  h4: {
    ...createTextStyle("The h4 text style - used in secondary headings", {
      fontSize: "1.125rem",
      lineHeight: "125%",
      ...headingWeight
    })
  },
  h5: {
    ...createTextStyle(
      "The h5 text style - used in headings that are the lower emphasis",
      {
        fontSize: "1rem",
        ...headingWeight
      }
    )
  },
  h6: {
    ...createTextStyle(
      "The h6 text style - used in headings that are the lowest emphasis",
      {
        fontSize: "0.875rem",
        ...headingWeight
      }
    )
  },
  // body text - inherits mostly from the html element in globalCSS.ts
  "body-xs": {
    ...createTextStyle(
      "The small text style - used in support text or legal.",
      {
        fontSize: "0.75rem"
      }
    )
  },
  "body-s": {
    ...createTextStyle(
      "The small text style - used in support text or legal.",
      {
        fontSize: "0.875rem"
      }
    )
  },
  "body-m": {
    ...createTextStyle("The body text style - used in paragraphs", {
      fontSize: "1rem"
    })
  },
  "body-l": {
    ...createTextStyle(
      "The body text style - used in paragraphs as smallest headings",
      {
        fontSize: "1.125rem"
      }
    )
  },
  "body-xl": {
    ...createTextStyle(
      "The body text style - used in paragraphs as smaller headings",
      {
        fontSize: "1.25rem"
      }
    )
  },
  "body-2xl": {
    ...createTextStyle(
      "The body text style - used in paragraphs as small headings",
      {
        fontSize: "1.5rem"
      }
    )
  },
  // mono
  "mono-xs": {
    ...createTextStyle("The mono text style - used in smallest code blocks", {
      fontSize: "0.75rem",
      ...monoStyles
    })
  },
  "mono-sm": {
    ...createTextStyle("The mono text style - used in small code blocks", {
      fontSize: "0.875rem",
      ...monoStyles
    })
  },
  "mono-md": {
    ...createTextStyle("The mono text style - used in normal code blocks", {
      fontSize: "1rem",
      ...monoStyles
    })
  },
  "mono-lg": {
    ...createTextStyle("The mono text style - used in large code blocks", {
      fontSize: "1.125rem",
      ...monoStyles
    })
  },
  // links
  link: {
    ...createTextStyle("The link text style - used for inline text links", {
      textDecoration: "underline"
    })
  }
});
export {
  textStyles
};
//# sourceMappingURL=textStyles.js.map