@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 { bodyShared, bodyWeightNormal, bodyWeightBold, bodyXs, bodySm, bodyMd, bodyLg, headingShared, headingWeightLight, headingWeightNormal, headingWeightMedium, headingXs, headingSm, headingMd, headingLg, headingXl, displayShared, displayWeightLight, displayWeightNormal, displayWeightMedium, displayMd, displayLg, displayXl, displayXxl, displayXxxl, dataBodyShared, dataBodyWeightNormal, dataBodyWeightBold, dataBodyXs, dataBodySm, dataBodyMd, dataBodyLg, dataHeadingShared, dataHeadingWeightLight, dataHeadingWeightNormal, dataHeadingWeightMedium, dataHeadingXs, dataHeadingSm, dataHeadingMd, dataHeadingLg, dataHeadingXl, dataDisplayShared, dataDisplayWeightLight, dataDisplayWeightNormal, dataDisplayWeightMedium, dataDisplayMd, dataDisplayLg, dataDisplayXl, dataDisplayXxl, dataDisplayXxxl, } 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 BoldBodyText.
 *
 * In most cases, the `<BodyText><strong>` component should be used instead.
 *
 * @deprecated use `cssForBodyText({ weight: 'bold' })` instead.
 */
export function cssForBoldBodyText(config) {
    return cssForBodyText({
        size: config?.size,
        weight: 'bold',
    });
}
/**
 * CSS which includes the correct tokens and styles for DataBodyText.
 *
 * In most cases, the `<DataText variant="body" />` component should be used instead.
 */
export function cssForDataBodyText(config) {
    const responsiveSize = wrapResponsive(config?.size ?? 'md');
    return css `
    ${dataBodyShared};
    ${dataBodyWeight[config?.weight ?? 'normal']};
    ${cssForResponsive(responsiveSize, (size) => dataBodySize[size])};
  `;
}
const dataBodyWeight = {
    normal: dataBodyWeightNormal,
    bold: dataBodyWeightBold,
};
const dataBodySize = {
    xs: dataBodyXs,
    sm: dataBodySm,
    md: dataBodyMd,
    lg: dataBodyLg,
};
/**
 * 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 DataHeadingText.
 *
 * In most cases, the `<DataText variant="heading" />` component should be used instead.
 */
export function cssForDataHeadingText(config) {
    const responsiveSize = wrapResponsive(config?.size ?? 'lg');
    return css `
    ${dataHeadingShared};
    ${dataHeadingWeight[config?.weight ?? 'medium']};
    ${cssForResponsive(responsiveSize, (size) => dataHeadingSize[size])};
  `;
}
const dataHeadingWeight = {
    light: dataHeadingWeightLight,
    normal: dataHeadingWeightNormal,
    medium: dataHeadingWeightMedium,
};
const dataHeadingSize = {
    xs: dataHeadingXs,
    sm: dataHeadingSm,
    md: dataHeadingMd,
    lg: dataHeadingLg,
    xl: dataHeadingXl,
};
/**
 * 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,
};
/**
 * CSS which includes the correct tokens and styles for DataDisplayText.
 *
 * In most cases, the `<DataText variant="display" />` component should be used instead.
 */
export function cssForDataDisplayText(config) {
    const responsiveSize = wrapResponsive(config?.size ?? 'md');
    return css `
    ${dataDisplayShared};
    ${dataDisplayWeight[config?.weight ?? 'medium']};
    ${cssForResponsive(responsiveSize, (size) => dataDisplaySize[size])};
  `;
}
const dataDisplayWeight = {
    light: dataDisplayWeightLight,
    normal: dataDisplayWeightNormal,
    medium: dataDisplayWeightMedium,
};
const dataDisplaySize = {
    md: dataDisplayMd,
    lg: dataDisplayLg,
    xl: dataDisplayXl,
    xxl: dataDisplayXxl,
    xxxl: dataDisplayXxxl,
};
/**
 * CSS which includes the correct tokens and styles for ButtonText.
 *
 * In most cases, the `<Button />` component should be used instead.
 *
 * @deprecated use `cssForBodyText({ weight: 'bold' })` instead.
 */
export function cssForButtonText(config) {
    return cssForBodyText({ size: config?.size, weight: config?.weight ?? 'bold' });
}
//# sourceMappingURL=index.js.map