@violetprotocol/nudge-components/dist/src/atoms/Typography/Typography.styles.js

Components for Nudge's websites and applications.

/* HEADINGS */
const h1 = "text-[60px] leading-[60px] tracking-[-.04] font-dmsans";
const h1_sm = "sm:text-[60px] sm:leading-[60px] sm:tracking-[-.04]";
const h1_md = "md:text-[60px] md:leading-[60px] md:tracking-[-.04]";
const h1_lg = "lg:text-[60px] lg:leading-[60px] lg:tracking-[-.04]";
const h1_xl = "xl:text-[60px] xl:leading-[60px] xl:tracking-[-.04]";
const h2 = "text-[48px] leading-[48px] tracking-[-.04] font-dmsans";
const h2_sm = "sm:text-[48px] sm:leading-[48px] sm:tracking-[-.04]";
const h2_md = "md:text-[48px] md:leading-[48px] md:tracking-[-.04]";
const h2_lg = "lg:text-[48px] lg:leading-[48px] lg:tracking-[-.04]";
const h2_xl = "xl:text-[48px] xl:leading-[48px] xl:tracking-[-.04]";
const h3 = "text-[40px] leading-[48px] tracking-[-.03] font-dmsans";
const h3_sm = "sm:text-[40px] sm:leading-[48px] sm:tracking-[-.03]";
const h3_md = "md:text-[40px] md:leading-[48px] md:tracking-[-.03]";
const h3_lg = "lg:text-[40px] lg:leading-[48px] lg:tracking-[-.03]";
const h3_xl = "xl:text-[40px] xl:leading-[48px] xl:tracking-[-.03]";
const h4 = "text-[36px] leading-[40px] tracking-[-.02] font-dmsans";
const h4_sm = "sm:text-[36px] sm:leading-[40px] sm:tracking-[-.02]";
const h4_md = "md:text-[36px] md:leading-[40px] md:tracking-[-.02]";
const h4_lg = "lg:text-[36px] lg:leading-[40px] lg:tracking-[-.02]";
const h4_xl = "xl:text-[36px] xl:leading-[40px] xl:tracking-[-.02]";
const h5 = "text-[30px] leading-[36px] tracking-[-.02] font-dmsans";
const h5_sm = "sm:text-[30px] sm:leading-[36px] sm:tracking-[-.02]";
const h5_md = "md:text-[30px] md:leading-[36px] md:tracking-[-.02]";
const h5_lg = "lg:text-[30px] lg:leading-[36px] lg:tracking-[-.02]";
const h5_xl = "xl:text-[30px] xl:leading-[36px] xl:tracking-[-.02]";
/* DISPLAY */
const displayXl = "text-[96px] leading-[96px] tracking-[-.04] font-dmsans";
const displayXl_sm = "sm:text-[96px] sm:leading-[96px] sm:tracking-[-.04]";
const displayXl_md = "md:text-[96px] md:leading-[96px] md:tracking-[-.04]";
const displayXl_lg = "lg:text-[96px] lg:leading-[96px] lg:tracking-[-.04]";
const displayXl_xl = "xl:text-[96px] xl:leading-[96px] xl:tracking-[-.04]";
const displayLg = "text-[72px] leading-[72px] tracking-[-.04] font-dmsans";
const displayLg_sm = "sm:text-[72px] sm:leading-[72px] sm:tracking-[-.04]";
const displayLg_md = "md:text-[72px] md:leading-[72px] md:tracking-[-.04]";
const displayLg_lg = "lg:text-[72px] lg:leading-[72px] lg:tracking-[-.04]";
const displayLg_xl = "xl:text-[72px] xl:leading-[72px] xl:tracking-[-.04]";
const displayMd = "text-[64px] leading-[64px] tracking-[-.04] font-dmsans";
const displayMd_sm = "sm:text-[64px] sm:leading-[64px] sm:tracking-[-.04]";
const displayMd_md = "md:text-[64px] md:leading-[64px] md:tracking-[-.04]";
const displayMd_lg = "lg:text-[64px] lg:leading-[64px] lg:tracking-[-.04]";
const displayMd_xl = "xl:text-[64px] xl:leading-[64px] xl:tracking-[-.04]";
const displaySm = "text-[48px] leading-[48px] tracking-[-.04] font-dmsans";
const displaySm_sm = "sm:text-[48px] sm:leading-[48px] sm:tracking-[-.04]";
const displaySm_md = "md:text-[48px] md:leading-[48px] md:tracking-[-.04]";
const displaySm_lg = "lg:text-[48px] lg:leading-[48px] lg:tracking-[-.04]";
const displaySm_xl = "xl:text-[48px] xl:leading-[48px] xl:tracking-[-.04]";
const displayXs = "text-[36px] leading-[36px] tracking-[-.04] font-dmsans";
const displayXs_sm = "sm:text-[36px] sm:leading-[36px] sm:tracking-[-.04]";
const displayXs_md = "md:text-[36px] md:leading-[36px] md:tracking-[-.04]";
const displayXs_lg = "lg:text-[36px] lg:leading-[36px] lg:tracking-[-.04]";
const displayXs_xl = "xl:text-[36px] xl:leading-[36px] xl:tracking-[-.04]";
/* PARAGRAPHS */
const pTiny = "text-[10px] leading-[16px] font-inter";
const pTiny_sm = "sm:text-[10px] sm:leading-[16px]";
const pTiny_md = "md:text-[10px] md:leading-[16px]";
const pTiny_lg = "lg:text-[10px] lg:leading-[16px]";
const pTiny_xl = "xl:text-[10px] xl:leading-[16px]";
const pXs = "text-[12px] leading-[16px] tracking-[-.04] font-inter";
const pXs_sm = "sm:text-[12px] sm:leading-[16px] sm:tracking-[-.04]";
const pXs_md = "md:text-[12px] md:leading-[16px] md:tracking-[-.04]";
const pXs_lg = "lg:text-[12px] lg:leading-[16px] lg:tracking-[-.04]";
const pXs_xl = "xl:text-[12px] xl:leading-[16px] xl:tracking-[-.04]";
const pSm = "text-[14px] leading-[20px] tracking-[-.04] font-inter";
const pSm_sm = "sm:text-[14px] sm:leading-[20px] sm:tracking-[-.04]";
const pSm_md = "md:text-[14px] md:leading-[20px] md:tracking-[-.04]";
const pSm_lg = "lg:text-[14px] lg:leading-[20px] lg:tracking-[-.04]";
const pSm_xl = "xl:text-[14px] xl:leading-[20px] xl:tracking-[-.04]";
const p = "text-[16px] leading-[24px] tracking-[-.04] font-inter";
const p_sm = "sm:text-[16px] sm:leading-[25px] sm:tracking-[-.04]";
const p_md = "md:text-[16px] md:leading-[25px] md:tracking-[-.04]";
const p_lg = "lg:text-[16px] lg:leading-[25px] lg:tracking-[-.04]";
const p_xl = "xl:text-[16px] xl:leading-[25px] xl:tracking-[-.04]";
const pLeading = "text-[18px] leading-[28px] tracking-[-.04] font-inter";
const pLeading_sm = "sm:text-[18px] sm:leading-[28px] sm:tracking-[-.04]";
const pLeading_md = "md:text-[18px] md:leading-[28px] md:tracking-[-.04]";
const pLeading_lg = "lg:text-[18px] lg:leading-[28px] lg:tracking-[-.04]";
const pLeading_xl = "xl:text-[18px] xl:leading-[28px] xl:tracking-[-.04]";
const pSubheadingSm = "text-[20px] leading-[28px] tracking-[-.04] font-dmsans";
const pSubheadingSm_sm = "sm:text-[20px] sm:leading-[28px] sm:tracking-[-.04]";
const pSubheadingSm_md = "md:text-[20px] md:leading-[28px] md:tracking-[-.04]";
const pSubheadingSm_lg = "lg:text-[20px] lg:leading-[28px] lg:tracking-[-.04]";
const pSubheadingSm_xl = "xl:text-[20px] xl:leading-[28px] xl:tracking-[-.04]";
const pSubheading = "text-[24px] leading-[32px] tracking-[-.04] font-dmsans";
const pSubheading_sm = "sm:text-[24px] sm:leading-[32px] sm:tracking-[-.04]";
const pSubheading_md = "md:text-[24px] md:leading-[32px] md:tracking-[-.04]";
const pSubheading_lg = "lg:text-[24px] lg:leading-[32px] lg:tracking-[-.04]";
const pSubheading_xl = "xl:text-[24px] xl:leading-[32px] xl:tracking-[-.04]";
const pBrandSm = "font-bold text-[14px] leading-[20px] tracking-[-.04] font-inter";
const pBrandSm_sm = "sm:font-bold sm:text-[14px] sm:leading-[20px] sm:tracking-[-.04]";
const pBrandSm_md = "md:font-bold md:text-[14px] md:leading-[20px] md:tracking-[-.04]";
const pBrandSm_lg = "lg:font-bold lg:text-[14px] lg:leading-[20px] lg:tracking-[-.04]";
const pBrandSm_xl = "xl:font-bold xl:text-[14px] xl:leading-[20px] xl:tracking-[-.04]";
export const TypographyStyles = {
    h1: { default: h1, sm: h1_sm, md: h1_md, lg: h1_lg, xl: h1_xl },
    h2: { default: h2, sm: h2_sm, md: h2_md, lg: h2_lg, xl: h2_xl },
    h3: { default: h3, sm: h3_sm, md: h3_md, lg: h3_lg, xl: h3_xl },
    h4: { default: h4, sm: h4_sm, md: h4_md, lg: h4_lg, xl: h4_xl },
    h5: { default: h5, sm: h5_sm, md: h5_md, lg: h5_lg, xl: h5_xl },
    "display-xl": {
        default: displayXl,
        sm: displayXl_sm,
        md: displayXl_md,
        lg: displayXl_lg,
        xl: displayXl_xl,
    },
    "display-lg": {
        default: displayLg,
        sm: displayLg_sm,
        md: displayLg_md,
        lg: displayLg_lg,
        xl: displayLg_xl,
    },
    "display-md": {
        default: displayMd,
        sm: displayMd_sm,
        md: displayMd_md,
        lg: displayMd_lg,
        xl: displayMd_xl,
    },
    "display-sm": {
        default: displaySm,
        sm: displaySm_sm,
        md: displaySm_md,
        lg: displaySm_lg,
        xl: displaySm_xl,
    },
    "display-xs": {
        default: displayXs,
        sm: displayXs_sm,
        md: displayXs_md,
        lg: displayXs_lg,
        xl: displayXs_xl,
    },
    "p-tiny": {
        default: pTiny,
        sm: pTiny_sm,
        md: pTiny_md,
        lg: pTiny_lg,
        xl: pTiny_xl,
    },
    "p-xs": { default: pXs, sm: pXs_sm, md: pXs_md, lg: pXs_lg, xl: pXs_xl },
    "p-sm": { default: pSm, sm: pSm_sm, md: pSm_md, lg: pSm_lg, xl: pSm_xl },
    p: { default: p, sm: p_sm, md: p_md, lg: p_lg, xl: p_xl },
    "p-leading": {
        default: pLeading,
        sm: pLeading_sm,
        md: pLeading_md,
        lg: pLeading_lg,
        xl: pLeading_xl,
    },
    "p-subheading-sm": {
        default: pSubheadingSm,
        sm: pSubheadingSm_sm,
        md: pSubheadingSm_md,
        lg: pSubheadingSm_lg,
        xl: pSubheadingSm_xl,
    },
    "p-subheading": {
        default: pSubheading,
        sm: pSubheading_sm,
        md: pSubheading_md,
        lg: pSubheading_lg,
        xl: pSubheading_xl,
    },
    "p-brand-sm": {
        default: pBrandSm,
        sm: pBrandSm_sm,
        md: pBrandSm_md,
        lg: pBrandSm_lg,
        xl: pBrandSm_xl,
    },
};