@fluid-topics/ft-typography/build/ftds-typography.styles.js

Typography components

import { typographies } from "@fluid-topics/design-system-variables";
import { css, unsafeCSS, } from "lit";
export { typographyDisplay as FtdsTypographyDisplayCssVariables } from "@fluid-topics/design-system-variables";
export { typographyTitle1 as FtdsTypographyTitle1CssVariables } from "@fluid-topics/design-system-variables";
export { typographyTitle2 as FtdsTypographyTitle2CssVariables } from "@fluid-topics/design-system-variables";
export { typographyTitle3 as FtdsTypographyTitle3CssVariables } from "@fluid-topics/design-system-variables";
export { typographyBody1Regular as FtdsTypographyBody1RegularCssVariables } from "@fluid-topics/design-system-variables";
export { typographyBody1Medium as FtdsTypographyBody1MediumCssVariables } from "@fluid-topics/design-system-variables";
export { typographyBody1Semibold as FtdsTypographyBody1SemiboldCssVariables } from "@fluid-topics/design-system-variables";
export { typographyBody2Regular as FtdsTypographyBody2RegularCssVariables } from "@fluid-topics/design-system-variables";
export { typographyBody2Medium as FtdsTypographyBody2MediumCssVariables } from "@fluid-topics/design-system-variables";
export { typographyBody2Semibold as FtdsTypographyBody2SemiboldCssVariables } from "@fluid-topics/design-system-variables";
export { typographyCaption1Medium as FtdsTypographyCaption1MediumCssVariables } from "@fluid-topics/design-system-variables";
export { typographyCaption1Semibold as FtdsTypographyCaption1SemiboldCssVariables } from "@fluid-topics/design-system-variables";
export { typographyCaption2Medium as FtdsTypographyCaption2MediumCssVariables } from "@fluid-topics/design-system-variables";
export { typographyCaption2Semibold as FtdsTypographyCaption2SemiboldCssVariables } from "@fluid-topics/design-system-variables";
export { typographyCaption2Bold as FtdsTypographyCaption2BoldCssVariables } from "@fluid-topics/design-system-variables";
export function buildDsTypographyCss(variant, selector) {
    const typographyVariables = typographies[variant];
    return css `
        ${selector ? unsafeCSS(selector) : css `.ftds-typography--${unsafeCSS(variant)}`} {
            font-family: ${typographyVariables.fontFamily};
            font-size: ${typographyVariables.fontSize};
            font-weight: ${typographyVariables.fontWeight};
            letter-spacing: ${typographyVariables.letterSpacing};
            line-height: ${typographyVariables.lineHeight};
            text-decoration: ${typographyVariables.textDecoration};
            text-transform: ${typographyVariables.textCase};
        }
    `;
}
export const FtdsTypographyStyles = [Object.keys(typographies).map((v) => buildDsTypographyCss(v))];