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

Patreon Studio Design System

import { css } from 'styled-components';
import { cssForResponsive, wrapResponsive } from '~/utilities/opaque-responsive';
import { bodyLg, bodyMd, bodyShared, bodySm, bodyWeightBold, bodyWeightNormal, bodyXs, displayLg, displayMd, displayShared, displayWeightLight, displayWeightMedium, displayWeightNormal, displayXl, displayXxl, displayXxxl, headingLg, headingMd, headingShared, headingSm, headingWeightLight, headingWeightMedium, headingWeightNormal, headingXl, headingXs, } from './bundles';
/**
 * CSS which includes the correct tokens and styles for BodyText.
 *
 * In most cases, the `<BodyText />` component should be used instead.
 */
export function cssForBodyText(config) {
    const responsiveSize = wrapResponsive(config?.size ?? 'md');
    return css `
    ${bodyShared};
    ${bodyWeight[config?.weight ?? 'normal']};
    ${cssForResponsive(responsiveSize, (size) => bodySize[size])};
  `;
}
const bodyWeight = {
    normal: bodyWeightNormal,
    bold: bodyWeightBold,
};
const bodySize = {
    xs: bodyXs,
    sm: bodySm,
    md: bodyMd,
    lg: bodyLg,
};
/**
 * CSS which includes the correct tokens and styles for HeadingText.
 *
 * In most cases, the `<HeadingText />` component should be used instead.
 */
export function cssForHeadingText(config) {
    const responsiveSize = wrapResponsive(config?.size ?? 'lg');
    return css `
    ${headingShared};
    ${headingWeight[config?.weight ?? 'medium']};
    ${cssForResponsive(responsiveSize, (size) => headingSize[size])};
  `;
}
const headingWeight = {
    light: headingWeightLight,
    normal: headingWeightNormal,
    medium: headingWeightMedium,
};
const headingSize = {
    xs: headingXs,
    sm: headingSm,
    md: headingMd,
    lg: headingLg,
    xl: headingXl,
};
/**
 * CSS which includes the correct tokens and styles for DisplayText.
 *
 * In most cases, the `<DisplayText />` component should be used instead.
 */
export function cssForDisplayText(config) {
    const responsiveSize = wrapResponsive(config?.size ?? 'md');
    return css `
    ${displayShared};
    ${displayWeight[config?.weight ?? 'medium']};
    ${cssForResponsive(responsiveSize, (size) => displaySize[size])};
  `;
}
const displayWeight = {
    light: displayWeightLight,
    normal: displayWeightNormal,
    medium: displayWeightMedium,
};
const displaySize = {
    md: displayMd,
    lg: displayLg,
    xl: displayXl,
    xxl: displayXxl,
    xxxl: displayXxxl,
};
//# sourceMappingURL=index.js.map