@patreon/studio/module/utilities/type-bundles/bundles.js

Patreon Studio Design System

import { css } from 'styled-components';
import { typeTokens } from '../../tokens/typography';
const sharedSelectorStyles = css `
  em {
    font-style: italic;
  }

  s {
    text-decoration: line-through;
  }
`;
/**
 * BodyText
 */
export const bodyShared = css `
  font-family: ${typeTokens.body.fontStack};
  letter-spacing: ${typeTokens.body.letterSpacing};
  line-height: ${typeTokens.body.lineHeight};

  ${sharedSelectorStyles};
`;
export const bodyWeightNormal = css `
  font-weight: ${typeTokens.body.fontWeights.normal};

  strong,
  b {
    font-weight: ${typeTokens.body.fontWeights.bold};
  }
`;
export const bodyWeightBold = css `
  font-weight: ${typeTokens.body.fontWeights.bold};
`;
export const bodyXs = css `
  font-size: ${typeTokens.body.fontSizes.xs};
`;
export const bodySm = css `
  font-size: ${typeTokens.body.fontSizes.sm};
`;
export const bodyMd = css `
  font-size: ${typeTokens.body.fontSizes.md};
`;
export const bodyLg = css `
  font-size: ${typeTokens.body.fontSizes.lg};
`;
/**
 * HeadingText
 */
export const headingShared = css `
  font-family: ${typeTokens.heading.fontStack};
  letter-spacing: ${typeTokens.heading.letterSpacing};
  line-height: ${typeTokens.heading.lineHeight};

  ${sharedSelectorStyles};
`;
export const headingWeightLight = css `
  font-weight: ${typeTokens.heading.fontWeights.light};
`;
export const headingWeightNormal = css `
  font-weight: ${typeTokens.heading.fontWeights.normal};
`;
export const headingWeightMedium = css `
  font-weight: ${typeTokens.heading.fontWeights.medium};
`;
export const headingXs = css `
  font-size: ${typeTokens.heading.fontSizes.xs};
`;
export const headingSm = css `
  font-size: ${typeTokens.heading.fontSizes.sm};
`;
export const headingMd = css `
  font-size: ${typeTokens.heading.fontSizes.md};
`;
export const headingLg = css `
  font-size: ${typeTokens.heading.fontSizes.lg};
`;
export const headingXl = css `
  font-size: ${typeTokens.heading.fontSizes.xl};
`;
/**
 * DisplayText
 */
export const displayShared = css `
  font-family: ${typeTokens.display.fontStack};
  letter-spacing: ${typeTokens.display.letterSpacing};
  line-height: ${typeTokens.display.lineHeight};

  ${sharedSelectorStyles};
`;
export const displayWeightLight = css `
  font-weight: ${typeTokens.display.fontWeights.light};
`;
export const displayWeightNormal = css `
  font-weight: ${typeTokens.display.fontWeights.normal};
`;
export const displayWeightMedium = css `
  font-weight: ${typeTokens.display.fontWeights.medium};
`;
export const displayMd = css `
  font-size: ${typeTokens.display.fontSizes.md};
`;
export const displayLg = css `
  font-size: ${typeTokens.display.fontSizes.lg};
`;
export const displayXl = css `
  font-size: ${typeTokens.display.fontSizes.xl};
`;
export const displayXxl = css `
  font-size: ${typeTokens.display.fontSizes.xxl};
`;
export const displayXxxl = css `
  font-size: ${typeTokens.display.fontSizes.xxxl};
`;
/**
 * DataBodyText
 */
export const dataBodyShared = css `
  font-family: ${typeTokens.dataBody.fontStack};
  letter-spacing: ${typeTokens.dataBody.letterSpacing};
  line-height: ${typeTokens.dataBody.lineHeight};
  font-variation-settings: ${typeTokens.dataBody.fontWidth};
  font-variant-numeric: lining-nums tabular-nums;
`;
export const dataBodyWeightNormal = css `
  font-weight: ${typeTokens.dataBody.fontWeights.normal};

  strong,
  b {
    font-weight: ${typeTokens.body.fontWeights.bold};
  }
`;
export const dataBodyWeightBold = css `
  font-weight: ${typeTokens.dataBody.fontWeights.bold};
`;
export const dataBodyXs = css `
  font-size: ${typeTokens.dataBody.fontSizes.xs};
`;
export const dataBodySm = css `
  font-size: ${typeTokens.dataBody.fontSizes.sm};
`;
export const dataBodyMd = css `
  font-size: ${typeTokens.dataBody.fontSizes.md};
`;
export const dataBodyLg = css `
  font-size: ${typeTokens.dataBody.fontSizes.lg};
`;
/**
 * DataHeadingText
 */
export const dataHeadingShared = css `
  font-family: ${typeTokens.dataHeading.fontStack};
  letter-spacing: ${typeTokens.dataHeading.letterSpacing};
  line-height: ${typeTokens.dataHeading.lineHeight};
  font-variation-settings: ${typeTokens.dataHeading.fontWidth};
  font-variant-numeric: lining-nums tabular-nums;
`;
export const dataHeadingWeightLight = css `
  font-weight: ${typeTokens.dataHeading.fontWeights.light};
`;
export const dataHeadingWeightNormal = css `
  font-weight: ${typeTokens.dataHeading.fontWeights.normal};
`;
export const dataHeadingWeightMedium = css `
  font-weight: ${typeTokens.dataHeading.fontWeights.medium};
`;
export const dataHeadingXs = css `
  font-size: ${typeTokens.dataHeading.fontSizes.xs};
`;
export const dataHeadingSm = css `
  font-size: ${typeTokens.dataHeading.fontSizes.sm};
`;
export const dataHeadingMd = css `
  font-size: ${typeTokens.dataHeading.fontSizes.md};
`;
export const dataHeadingLg = css `
  font-size: ${typeTokens.dataHeading.fontSizes.lg};
`;
export const dataHeadingXl = css `
  font-size: ${typeTokens.dataHeading.fontSizes.xl};
`;
/**
 * DataDisplayText
 */
export const dataDisplayShared = css `
  font-family: ${typeTokens.dataDisplay.fontStack};
  letter-spacing: ${typeTokens.dataDisplay.letterSpacing};
  line-height: ${typeTokens.dataDisplay.lineHeight};
  font-variation-settings: ${typeTokens.dataDisplay.fontWidth};
  font-variant-numeric: lining-nums tabular-nums;
`;
export const dataDisplayWeightLight = css `
  font-weight: ${typeTokens.dataDisplay.fontWeights.light};
`;
export const dataDisplayWeightNormal = css `
  font-weight: ${typeTokens.dataDisplay.fontWeights.normal};
`;
export const dataDisplayWeightMedium = css `
  font-weight: ${typeTokens.dataDisplay.fontWeights.medium};
`;
export const dataDisplayMd = css `
  font-size: ${typeTokens.dataDisplay.fontSizes.md};
`;
export const dataDisplayLg = css `
  font-size: ${typeTokens.dataDisplay.fontSizes.lg};
`;
export const dataDisplayXl = css `
  font-size: ${typeTokens.dataDisplay.fontSizes.xl};
`;
export const dataDisplayXxl = css `
  font-size: ${typeTokens.dataDisplay.fontSizes.xxl};
`;
export const dataDisplayXxxl = css `
  font-size: ${typeTokens.dataDisplay.fontSizes.xxxl};
`;
//# sourceMappingURL=bundles.js.map