fonts.scss

@use 'media-queries';
@use 'tokens';

/**
 * Quartz Font Mixins
 *
 * These mixins allow us to maintain a consistent typographic style
 * throughout qz.com and our wider family of products.
 *
 * To identify the font mixin used in a design, inspect the text box in
 * Abstract and look for 'Text Style' under the Properties panel in the
 * bar on the right.
 *
 * IMPORTANT:
 *
 * If you can't find a mixin that matches your designs, talk to your
 * friendly neighborhood designer. Avoid writing one-offs and do not
 * create new mixins here without the knowledge and approval of the
 * design team.
 *
 * Our mixins should match this document:
 * https://docs.google.com/spreadsheets/d/1jk-QoK22_lAoJbbyZyxVM1Ym7sakCNZGHVBtMOY6hxE/edit#gid=0
 */

@mixin maison-500-1 {
	@include maison;
	@include font-size-helper(11px, 13px, null);

	font-weight: 500;
	line-height: tokens.$font-line-height-maison-medium;
}

@mixin maison-500-2 {
	@include maison;
	@include font-size-helper(14px, 16px, null);

	font-weight: 500;
	line-height: tokens.$font-line-height-maison-medium;
}

@mixin maison-500-3 {
	@include maison;
	@include font-size-helper(14px, 20px, null);

	font-weight: 500;
	line-height: tokens.$font-line-height-maison-medium;
}

@mixin maison-500-4 {
	@include maison;
	@include font-size-helper(16px, 20px, null);

	font-weight: 500;
	line-height: tokens.$font-line-height-maison-medium;
}

@mixin maison-500-5 {
	@include maison;
	@include font-size-helper(14px, 20px, 30px);

	font-weight: 500;
	line-height: tokens.$font-line-height-maison-medium;
}

@mixin pt-serif-400-1 {
	@include pt-serif;
	@include font-size-helper(16px, 20px, null);

	font-weight: 400;
	line-height: tokens.$font-line-height-pt-serif;
}

@mixin maison-extended-700-1 {
	@include maison-extended;
	@include font-size-helper(11px, 13px, null);

	font-weight: 700;
	line-height: tokens.$font-line-height-maison-extra-bold;
	text-transform: uppercase;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

@mixin maison-extended-700-2 {
	@include maison-extended;
	@include font-size-helper(14px, 16px, null);

	font-weight: 700;
	line-height: tokens.$font-line-height-maison-extra-bold;
	text-transform: uppercase;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

@mixin maison-800-1 {
	@include maison;
	@include font-size-helper(11px, 13px, null);

	font-weight: 800;
	line-height: tokens.$font-line-height-maison-extra-bold;
}

@mixin maison-800-2 {
	@include maison;
	@include font-size-helper(14px, 16px, null);

	font-weight: 800;
	line-height: tokens.$font-line-height-maison-extra-bold;
}

@mixin maison-800-3 {
	@include maison;
	@include font-size-helper(14px, 20px, null);

	font-weight: 800;
	line-height: tokens.$font-line-height-maison-extra-bold;
}

@mixin maison-800-4 {
	@include maison;
	@include font-size-helper(16px, 20px, null);

	font-weight: 800;
	line-height: tokens.$font-line-height-maison-extra-bold;
}

@mixin maison-800-5 {
	@include maison;
	@include font-size-helper(20px, 32px, null);

	font-weight: 800;
	line-height: tokens.$font-line-height-maison-extra-bold;
}

@mixin maison-800-6 {
	@include maison;
	@include font-size-helper(24px, 40px, null);

	font-weight: 800;
	line-height: tokens.$font-line-height-maison-extra-bold;
}

@mixin maison-800-7 {
	@include maison;
	@include font-size-helper(16px, 28px, 48px);

	font-weight: 800;
	line-height: tokens.$font-line-height-maison-extra-bold;
}

@mixin maison-800-8 {
	@include maison;
	@include font-size-helper(18px, 24px);

	font-weight: 800;
	line-height: tokens.$font-line-height-maison-extra-bold;
}

@mixin maison-800-9 {
	@include maison;
	@include font-size-helper(24px, 48px, 64px);

	font-weight: 800;
	line-height: tokens.$font-line-height-maison-extra-bold;
}

@mixin maison-800-10 {
	@include maison;
	@include font-size-helper(28px, 64px, 80px);

	font-weight: 800;
	line-height: tokens.$font-line-height-maison-extra-bold;
}

@mixin publico-800-1 {
	@include publico-headline;
	@include font-size-helper(24px, 48px, 64px);

	font-weight: 800;
	line-height: tokens.$font-line-height-maison-extra-bold;
}

/**
 * Helper mixins
 *
 * Avoid using the following mixins outside this file whenever
 * possible.
 */

@mixin maison {
	font-family: $maison;
}

@mixin maison-extended {
	font-family: $maison-extended;
}

@mixin pt-serif {
	font-family: $pt-serif;
}

@mixin publico-headline {
	font-family: $publico-headline;
}

/*
 * STOP HERE!
 *
 * Do not reference the following variables or mixins outside this file!
 *
 * Use a mixin to ensure non-system fonts are loaded correctly.
*/

$font-default-sans-fallback: -apple-system, 'Helvetica Neue', Helvetica, 'Hiragino Sans', sans-serif;
$font-default-serif-fallback: Georgia, 'Hiragino Sans', serif;

$maison: 'MaisonNeue', $font-default-sans-fallback;
$maison-extended: 'MaisonNeueExtended', $font-default-sans-fallback;
$publico-headline: 'Publico Headline', $font-default-serif-fallback;
$pt-serif: 'PTSerif', $font-default-serif-fallback;

/**
 * Do not use this mixin directly! This mixin is only to be used the
 * predefined font mixins above; ensure you shouldn't be using one of
 * them first. If you absolutely must create a one-off, e.g. for a
 * special editorial project, you should use the break points directly
 * in your component's CSS file.
 * */
@mixin font-size-helper($mobile, $tablet-portrait: null, $tablet-landscape: null) {
	font-size: $mobile;

	@if $tablet-portrait != null {
		@include media-queries.tablet-portrait-up {
			font-size: $tablet-portrait;
		}
	}

	@if $tablet-landscape != null {
		@include media-queries.tablet-landscape-up {
			font-size: $tablet-landscape;
		}
	}
}