@wikimedia/codex/mixins/typography.less

Codex Design System for Wikimedia

@import ( reference ) '@wikimedia/codex-design-tokens/theme-wikimedia-ui.less';

// Mixins for typography. These mixins combine type styles to form intended
// typographic styles for different headings and body text.
.cdx-mixin-body-text() {
	font-family: @font-family-base;
	font-size: @font-size-medium;
	font-weight: @font-weight-normal;
	line-height: @line-height-medium;
}

.cdx-mixin-caption() {
	font-family: @font-family-base;
	font-size: @font-size-small;
	font-weight: @font-weight-normal;
	line-height: @line-height-small;
}

.cdx-mixin-typography() {
	h1 {
		font-family: @font-family-serif;
		font-size: @font-size-xxx-large;
		font-weight: @font-weight-normal;
		line-height: @line-height-xxx-large;
	}

	h2 {
		font-family: @font-family-serif;
		font-size: @font-size-xx-large;
		font-weight: @font-weight-normal;
		line-height: @line-height-xx-large;
	}

	h3 {
		font-family: @font-family-base;
		font-size: @font-size-x-large;
		font-weight: @font-weight-bold;
		line-height: @line-height-x-large;
	}

	h4,
	h5,
	h6 {
		font-family: @font-family-base;
		font-size: @font-size-medium;
		font-weight: @font-weight-bold;
		line-height: @line-height-medium;
	}

	p,
	blockquote {
		.cdx-mixin-body-text();
	}

	blockquote {
		font-family: @font-family-serif;
	}

	small,
	figcaption,
	cite {
		font-family: @font-family-base;
		font-size: @font-size-small;
		font-weight: @font-weight-normal;
		line-height: @line-height-small;
	}

	code {
		font-family: @font-family-monospace;
	}
}