@fluid-topics/ft-typography
Version:
Typography components
210 lines (208 loc) • 14.7 kB
JavaScript
import { css } from "lit";
import { designSystemVariables, FtCssVariableFactory, } from "@fluid-topics/ft-wc-utils";
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;
}
`;