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

Typography components

import { css } from "lit";
import { designSystemVariables, FtCssVariableFactory, } from "@fluid-topics/ft-wc-utils";
import { typographies, } from "@fluid-topics/design-system-variables";
import { buildDsTypographyCss } from "./ft-typography.css.helper";
const titleFontFamily = FtCssVariableFactory.extend("--ft-typography-font-family", "", designSystemVariables.titleFont);
const contentFontFamily = FtCssVariableFactory.extend("--ft-typography-font-family", "", designSystemVariables.contentFont);
export const FtTypographyCssVariables = {
    fontFamily: contentFontFamily,
    fontSize: FtCssVariableFactory.create("--ft-typography-font-size", "", "SIZE", "16px"),
    fontWeight: FtCssVariableFactory.create("--ft-typography-font-weight", "", "UNKNOWN", "normal"),
    letterSpacing: FtCssVariableFactory.create("--ft-typography-letter-spacing", "", "SIZE", "0.496px"),
    lineHeight: FtCssVariableFactory.create("--ft-typography-line-height", "", "NUMBER", "1.5"),
    textTransform: FtCssVariableFactory.create("--ft-typography-text-transform", "", "UNKNOWN", "inherit"),
};
export const FtTypographyTitleCssVariables = {
    fontFamily: FtCssVariableFactory.extend("--ft-typography-title-font-family", "", titleFontFamily),
    fontSize: FtCssVariableFactory.extend("--ft-typography-title-font-size", "", FtTypographyCssVariables.fontSize, "20px"),
    fontWeight: FtCssVariableFactory.extend("--ft-typography-title-font-weight", "", FtTypographyCssVariables.fontWeight, "normal"),
    letterSpacing: FtCssVariableFactory.extend("--ft-typography-title-letter-spacing", "", FtTypographyCssVariables.letterSpacing, "0.15px"),
    lineHeight: FtCssVariableFactory.extend("--ft-typography-title-line-height", "", FtTypographyCssVariables.lineHeight, "1.2"),
    textTransform: FtCssVariableFactory.extend("--ft-typography-title-text-transform", "", FtTypographyCssVariables.textTransform, "inherit"),
};
export const FtTypographyTitleDenseCssVariables = {
    fontFamily: FtCssVariableFactory.extend("--ft-typography-title-dense-font-family", "", titleFontFamily),
    fontSize: FtCssVariableFactory.extend("--ft-typography-title-dense-font-size", "", FtTypographyCssVariables.fontSize, "14px"),
    fontWeight: FtCssVariableFactory.extend("--ft-typography-title-dense-font-weight", "", FtTypographyCssVariables.fontWeight, "normal"),
    letterSpacing: FtCssVariableFactory.extend("--ft-typography-title-dense-letter-spacing", "", FtTypographyCssVariables.letterSpacing, "0.105px"),
    lineHeight: FtCssVariableFactory.extend("--ft-typography-title-dense-line-height", "", FtTypographyCssVariables.lineHeight, "1.7"),
    textTransform: FtCssVariableFactory.extend("--ft-typography-title-dense-text-transform", "", FtTypographyCssVariables.textTransform, "inherit"),
};
export const FtTypographySubtitle1CssVariables = {
    fontFamily: FtCssVariableFactory.extend("--ft-typography-subtitle1-font-family", "", contentFontFamily),
    fontSize: FtCssVariableFactory.extend("--ft-typography-subtitle1-font-size", "", FtTypographyCssVariables.fontSize, "16px"),
    fontWeight: FtCssVariableFactory.extend("--ft-typography-subtitle1-font-weight", "", FtTypographyCssVariables.fontWeight, "600"),
    letterSpacing: FtCssVariableFactory.extend("--ft-typography-subtitle1-letter-spacing", "", FtTypographyCssVariables.letterSpacing, "0.144px"),
    lineHeight: FtCssVariableFactory.extend("--ft-typography-subtitle1-line-height", "", FtTypographyCssVariables.lineHeight, "1.5"),
    textTransform: FtCssVariableFactory.extend("--ft-typography-subtitle1-text-transform", "", FtTypographyCssVariables.textTransform, "inherit"),
};
export const FtTypographySubtitle2CssVariables = {
    fontFamily: FtCssVariableFactory.extend("--ft-typography-subtitle2-font-family", "", contentFontFamily),
    fontSize: FtCssVariableFactory.extend("--ft-typography-subtitle2-font-size", "", FtTypographyCssVariables.fontSize, "14px"),
    fontWeight: FtCssVariableFactory.extend("--ft-typography-subtitle2-font-weight", "", FtTypographyCssVariables.fontWeight, "normal"),
    letterSpacing: FtCssVariableFactory.extend("--ft-typography-subtitle2-letter-spacing", "", FtTypographyCssVariables.letterSpacing, "0.098px"),
    lineHeight: FtCssVariableFactory.extend("--ft-typography-subtitle2-line-height", "", FtTypographyCssVariables.lineHeight, "1.7"),
    textTransform: FtCssVariableFactory.extend("--ft-typography-subtitle2-text-transform", "", FtTypographyCssVariables.textTransform, "inherit"),
};
export const FtTypographyBody1CssVariables = {
    fontFamily: FtCssVariableFactory.extend("--ft-typography-body1-font-family", "", contentFontFamily),
    fontSize: FtCssVariableFactory.extend("--ft-typography-body1-font-size", "", FtTypographyCssVariables.fontSize, "16px"),
    fontWeight: FtCssVariableFactory.extend("--ft-typography-body1-font-weight", "", FtTypographyCssVariables.fontWeight, "normal"),
    letterSpacing: FtCssVariableFactory.extend("--ft-typography-body1-letter-spacing", "", FtTypographyCssVariables.letterSpacing, "0.496px"),
    lineHeight: FtCssVariableFactory.extend("--ft-typography-body1-line-height", "", FtTypographyCssVariables.lineHeight, "1.5"),
    textTransform: FtCssVariableFactory.extend("--ft-typography-body1-text-transform", "", FtTypographyCssVariables.textTransform, "inherit"),
};
export const FtTypographyBody2CssVariables = {
    fontFamily: FtCssVariableFactory.extend("--ft-typography-body2-font-family", "", contentFontFamily),
    fontSize: FtCssVariableFactory.extend("--ft-typography-body2-font-size", "", FtTypographyCssVariables.fontSize, "14px"),
    fontWeight: FtCssVariableFactory.extend("--ft-typography-body2-font-weight", "", FtTypographyCssVariables.fontWeight, "normal"),
    letterSpacing: FtCssVariableFactory.extend("--ft-typography-body2-letter-spacing", "", FtTypographyCssVariables.letterSpacing, "0.252px"),
    lineHeight: FtCssVariableFactory.extend("--ft-typography-body2-line-height", "", FtTypographyCssVariables.lineHeight, "1.4"),
    textTransform: FtCssVariableFactory.extend("--ft-typography-body2-text-transform", "", FtTypographyCssVariables.textTransform, "inherit"),
};
export const FtTypographyCaptionCssVariables = {
    fontFamily: FtCssVariableFactory.extend("--ft-typography-caption-font-family", "", contentFontFamily),
    fontSize: FtCssVariableFactory.extend("--ft-typography-caption-font-size", "", FtTypographyCssVariables.fontSize, "12px"),
    fontWeight: FtCssVariableFactory.extend("--ft-typography-caption-font-weight", "", FtTypographyCssVariables.fontWeight, "normal"),
    letterSpacing: FtCssVariableFactory.extend("--ft-typography-caption-letter-spacing", "", FtTypographyCssVariables.letterSpacing, "0.396px"),
    lineHeight: FtCssVariableFactory.extend("--ft-typography-caption-line-height", "", FtTypographyCssVariables.lineHeight, "1.33"),
    textTransform: FtCssVariableFactory.extend("--ft-typography-caption-text-transform", "", FtTypographyCssVariables.textTransform, "inherit"),
};
export const FtTypographyBreadcrumbCssVariables = {
    fontFamily: FtCssVariableFactory.extend("--ft-typography-breadcrumb-font-family", "", contentFontFamily),
    fontSize: FtCssVariableFactory.extend("--ft-typography-breadcrumb-font-size", "", FtTypographyCssVariables.fontSize, "10px"),
    fontWeight: FtCssVariableFactory.extend("--ft-typography-breadcrumb-font-weight", "", FtTypographyCssVariables.fontWeight, "normal"),
    letterSpacing: FtCssVariableFactory.extend("--ft-typography-breadcrumb-letter-spacing", "", FtTypographyCssVariables.letterSpacing, "0.33px"),
    lineHeight: FtCssVariableFactory.extend("--ft-typography-breadcrumb-line-height", "", FtTypographyCssVariables.lineHeight, "1.6"),
    textTransform: FtCssVariableFactory.extend("--ft-typography-breadcrumb-text-transform", "", FtTypographyCssVariables.textTransform, "inherit"),
};
export const FtTypographyOverlineCssVariables = {
    fontFamily: FtCssVariableFactory.extend("--ft-typography-overline-font-family", "", contentFontFamily),
    fontSize: FtCssVariableFactory.extend("--ft-typography-overline-font-size", "", FtTypographyCssVariables.fontSize, "10px"),
    fontWeight: FtCssVariableFactory.extend("--ft-typography-overline-font-weight", "", FtTypographyCssVariables.fontWeight, "normal"),
    letterSpacing: FtCssVariableFactory.extend("--ft-typography-overline-letter-spacing", "", FtTypographyCssVariables.letterSpacing, "1.5px"),
    lineHeight: FtCssVariableFactory.extend("--ft-typography-overline-line-height", "", FtTypographyCssVariables.lineHeight, "1.6"),
    textTransform: FtCssVariableFactory.extend("--ft-typography-overline-text-transform", "", FtTypographyCssVariables.textTransform, "uppercase"),
};
export const FtTypographyButtonCssVariables = {
    fontFamily: FtCssVariableFactory.extend("--ft-typography-button-font-family", "", contentFontFamily),
    fontSize: FtCssVariableFactory.extend("--ft-typography-button-font-size", "", FtTypographyCssVariables.fontSize, "14px"),
    fontWeight: FtCssVariableFactory.extend("--ft-typography-button-font-weight", "", FtTypographyCssVariables.fontWeight, "600"),
    letterSpacing: FtCssVariableFactory.extend("--ft-typography-button-letter-spacing", "", FtTypographyCssVariables.letterSpacing, "1.246px"),
    lineHeight: FtCssVariableFactory.extend("--ft-typography-button-line-height", "", FtTypographyCssVariables.lineHeight, "1.15"),
    textTransform: FtCssVariableFactory.extend("--ft-typography-button-text-transform", "", FtTypographyCssVariables.textTransform, "uppercase"),
};
// language=CSS
export const FtTypographyTitle = css `
    .ft-typography--title {
        font-family: ${FtTypographyTitleCssVariables.fontFamily};
        font-size: ${FtTypographyTitleCssVariables.fontSize};
        font-weight: ${FtTypographyTitleCssVariables.fontWeight};
        letter-spacing: ${FtTypographyTitleCssVariables.letterSpacing};
        line-height: ${FtTypographyTitleCssVariables.lineHeight};
        text-transform: ${FtTypographyTitleCssVariables.textTransform};
    }
`;
// language=CSS
export const FtTypographyTitleDense = css `
    .ft-typography--title-dense {
        font-family: ${FtTypographyTitleDenseCssVariables.fontFamily};
        font-size: ${FtTypographyTitleDenseCssVariables.fontSize};
        font-weight: ${FtTypographyTitleDenseCssVariables.fontWeight};
        letter-spacing: ${FtTypographyTitleDenseCssVariables.letterSpacing};
        line-height: ${FtTypographyTitleDenseCssVariables.lineHeight};
        text-transform: ${FtTypographyTitleDenseCssVariables.textTransform};
    }
`;
// language=CSS
export const FtTypographySubtitle1 = css `
    .ft-typography--subtitle1 {
        font-family: ${FtTypographySubtitle1CssVariables.fontFamily};
        font-size: ${FtTypographySubtitle1CssVariables.fontSize};
        font-weight: ${FtTypographySubtitle1CssVariables.fontWeight};
        letter-spacing: ${FtTypographySubtitle1CssVariables.letterSpacing};
        line-height: ${FtTypographySubtitle1CssVariables.lineHeight};
        text-transform: ${FtTypographySubtitle1CssVariables.textTransform};
    }
`;
// language=CSS
export const FtTypographySubtitle2 = css `
    .ft-typography--subtitle2 {
        font-family: ${FtTypographySubtitle2CssVariables.fontFamily};
        font-size: ${FtTypographySubtitle2CssVariables.fontSize};
        font-weight: ${FtTypographySubtitle2CssVariables.fontWeight};
        letter-spacing: ${FtTypographySubtitle2CssVariables.letterSpacing};
        line-height: ${FtTypographySubtitle2CssVariables.lineHeight};
        text-transform: ${FtTypographySubtitle2CssVariables.textTransform};
    }

`;
// language=CSS
export const FtTypographyBody1 = css `
    .ft-typography--body1 {
        font-family: ${FtTypographyBody1CssVariables.fontFamily};
        font-size: ${FtTypographyBody1CssVariables.fontSize};
        font-weight: ${FtTypographyBody1CssVariables.fontWeight};
        letter-spacing: ${FtTypographyBody1CssVariables.letterSpacing};
        line-height: ${FtTypographyBody1CssVariables.lineHeight};
        text-transform: ${FtTypographyBody1CssVariables.textTransform};
    }
`;
// language=CSS
export const FtTypographyBody2 = css `
    .ft-typography--body2 {
        font-family: ${FtTypographyBody2CssVariables.fontFamily};
        font-size: ${FtTypographyBody2CssVariables.fontSize};
        font-weight: ${FtTypographyBody2CssVariables.fontWeight};
        letter-spacing: ${FtTypographyBody2CssVariables.letterSpacing};
        line-height: ${FtTypographyBody2CssVariables.lineHeight};
        text-transform: ${FtTypographyBody2CssVariables.textTransform};
    }
`;
// language=CSS
export const FtTypographyCaption = css `
    .ft-typography--caption {
        font-family: ${FtTypographyCaptionCssVariables.fontFamily};
        font-size: ${FtTypographyCaptionCssVariables.fontSize};
        font-weight: ${FtTypographyCaptionCssVariables.fontWeight};
        letter-spacing: ${FtTypographyCaptionCssVariables.letterSpacing};
        line-height: ${FtTypographyCaptionCssVariables.lineHeight};
        text-transform: ${FtTypographyCaptionCssVariables.textTransform};
    }
`;
// language=CSS
export const FtTypographyBreadcrumb = css `
    .ft-typography--breadcrumb {
        font-family: ${FtTypographyBreadcrumbCssVariables.fontFamily};
        font-size: ${FtTypographyBreadcrumbCssVariables.fontSize};
        font-weight: ${FtTypographyBreadcrumbCssVariables.fontWeight};
        letter-spacing: ${FtTypographyBreadcrumbCssVariables.letterSpacing};
        line-height: ${FtTypographyBreadcrumbCssVariables.lineHeight};
        text-transform: ${FtTypographyBreadcrumbCssVariables.textTransform};
    }
`;
// language=CSS
export const FtTypographyOverline = css `
    .ft-typography--overline {
        font-family: ${FtTypographyOverlineCssVariables.fontFamily};
        font-size: ${FtTypographyOverlineCssVariables.fontSize};
        font-weight: ${FtTypographyOverlineCssVariables.fontWeight};
        letter-spacing: ${FtTypographyOverlineCssVariables.letterSpacing};
        line-height: ${FtTypographyOverlineCssVariables.lineHeight};
        text-transform: ${FtTypographyOverlineCssVariables.textTransform};
    }
`;
// language=CSS
export const FtTypographyButton = css `
    .ft-typography--button {
        font-family: ${FtTypographyButtonCssVariables.fontFamily};
        font-size: ${FtTypographyButtonCssVariables.fontSize};
        font-weight: ${FtTypographyButtonCssVariables.fontWeight};
        letter-spacing: ${FtTypographyButtonCssVariables.letterSpacing};
        line-height: ${FtTypographyButtonCssVariables.lineHeight};
        text-transform: ${FtTypographyButtonCssVariables.textTransform};
    }
`;
// language=CSS
export const FtTypographyStyles = css `
    .ft-typography {
        vertical-align: inherit;
    }
`;
export { typographyDisplay as FtTypographyDisplayCssVariables } from "@fluid-topics/design-system-variables";
export { typographyTitle1 as FtTypographyTitle1CssVariables } from "@fluid-topics/design-system-variables";
export { typographyTitle2 as FtTypographyTitle2CssVariables } from "@fluid-topics/design-system-variables";
export { typographyTitle3 as FtTypographyTitle3CssVariables } from "@fluid-topics/design-system-variables";
export { typographyBody1Regular as FtTypographyBody1RegularCssVariables } from "@fluid-topics/design-system-variables";
export { typographyBody1Medium as FtTypographyBody1MediumCssVariables } from "@fluid-topics/design-system-variables";
export { typographyBody1Semibold as FtTypographyBody1SemiboldCssVariables } from "@fluid-topics/design-system-variables";
export { typographyBody2Regular as FtTypographyBody2RegularCssVariables } from "@fluid-topics/design-system-variables";
export { typographyBody2Medium as FtTypographyBody2MediumCssVariables } from "@fluid-topics/design-system-variables";
export { typographyBody2Semibold as FtTypographyBody2SemiboldCssVariables } from "@fluid-topics/design-system-variables";
export { typographyLabel1Medium as FtTypographyLabel1MediumCssVariables } from "@fluid-topics/design-system-variables";
export { typographyLabel1Semibold as FtTypographyLabel1SemiboldCssVariables } from "@fluid-topics/design-system-variables";
export { typographyLabel1Bold as FtTypographyLabel1BoldCssVariables } from "@fluid-topics/design-system-variables";
export { typographyLabel2Medium as FtTypographyLabel2MediumCssVariables } from "@fluid-topics/design-system-variables";
export { typographyLabel2Semibold as FtTypographyLabel2SemiboldCssVariables } from "@fluid-topics/design-system-variables";
export { typographyLabel2Bold as FtTypographyLabel2BoldCssVariables } from "@fluid-topics/design-system-variables";
export { typographyCaption1Medium as FtTypographyCaption1MediumCssVariables } from "@fluid-topics/design-system-variables";
export { typographyCaption1Semibold as FtTypographyCaption1SemiboldCssVariables } from "@fluid-topics/design-system-variables";
export { typographyCaption1Bold as FtTypographyCaption1BoldCssVariables } from "@fluid-topics/design-system-variables";
export { typographyCaption2Medium as FtTypographyCaption2MediumCssVariables } from "@fluid-topics/design-system-variables";
export { typographyCaption2Semibold as FtTypographyCaption2SemiboldCssVariables } from "@fluid-topics/design-system-variables";
export { typographyCaption2Bold as FtTypographyCaption2BoldCssVariables } from "@fluid-topics/design-system-variables";
export { typographyCaption3Medium as FtTypographyCaption3MediumCssVariables } from "@fluid-topics/design-system-variables";
export { typographyCaption3Semibold as FtTypographyCaption3SemiboldCssVariables } from "@fluid-topics/design-system-variables";
export { typographyCaption3Bold as FtTypographyCaption3BoldCssVariables } from "@fluid-topics/design-system-variables";
export const FtdsTypographyStyles = [Object.keys(typographies).map(v => buildDsTypographyCss(v))];