Модуль typography (настройка)

Типографика отвечает за оформление текстов и прочих html-тэгов по умолчанию.

Все настройки классов типографики следует делать в файле config/_typography.scss в секции @use with.

Переменные по умолчанию расположены в файле modules/typography/_default.scss.

Файлы модулей не нужно редактировать!

Настройка через CSS-переменные

Некоторые классы поддерживают css-переменные, что позволяет их использовать без sass-компиляции. Для того достаточно их указать для элемента :root, тогда их влияние будет глобальным.

Имена CSS-переменных совпадают с Sass-переменными, только вместо символа $ используется --. Например переменная $body-size-base соответствует --body-size-base.

<style>
    :root {
        --body-size-base: 17px;
        --body-color: #575748;
   
        --link-color: #D51558;
        --link-hover-color: #F33F7E;
   
        --blockquote-color: #0B6CAE;
        --blockquote-bor-l: 5px solid #D51558;
    }
</style>

См. также Базовые приёмы работы с CSS-переменными

Можно использовать sass-переменную $root_list, для того, чтобы создать глобальные css-переменные:

@use '../modules/typography/default' with (
	$root_list: (
		"font-family-monospace": SFMono-Regular, Menlo, Monaco, Consolas, "PT Mono", "Liberation Mono", "Courier New", monospace, 
		"color-menu": #F3F3F3,
	),
);

После sass-компиляции будет создано:

:root {
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "PT Mono", "Liberation Mono", "Courier New", monospace;
    --color-menu: #F3F3F3;
}

Общие шрифты

Они используются в разных классах в свойстве font-family.

$font-family-monospace: (SFMono-Regular, Menlo, Monaco, Consolas, "PT Mono", "Liberation Mono", "Courier New", monospace),

$font-family-sans-serif: ("Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"),

Основной текст

Для основного шрифта используется переменная $font-family-sans-serif.

$body-size-base: 16px, // размер шрифта
$body-font-family: ("Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"), // гарнитура
$body-line-height: 1.6, // интерлиньяж
$body-color: #333, // цвет текста
$body-bg: #fff, // цвет фона браузера
$body-text-align: null, // выравнивание текста (left, right ...)

Заголовки

$h1-font-size: 2.5rem,
$h2-font-size: 2rem,
$h3-font-size: 1.75rem,
$h4-font-size: 1.5rem,
$h5-font-size: 1.2rem,
$h6-font-size: 1rem,

$headings-font-weight: normal, // полужирность
$headings-margin: 0 0 .6em 0, // отступы
$headings-line-height: 1.2, // интерлиньяж

Параграф

$paragraph-margin: 0 0 1rem 0,

Ссылки

$link-color: #4881e6, // цвет 
$link-decoration: none, // подчеркивание
$link-hover-color: #D90000, // цвет при наведении
$link-hover-decoration: underline, // подчеркивание при наведении

Тэг <pre>

$pre-text-color: #333,
$pre-bg-color: #FAFAFA,
$pre-padding: 10px 15px 10px 25px,
$pre-border-top: #DFDFDF solid 1px,
$pre-border-right: #DFDFDF solid 3px,
$pre-border-bottom: #DFDFDF solid 1px,
$pre-border-left: #DFDFDF solid 3px,
$pre-line-height: 1.5,
$pre-border-radius: 3px,
$pre-max-height: 0, // 500px or 0 for disable scrollbar

Тэг <code>

$code-background: #E5F5F9,
$code-padding: 0 5px,
$code-border-radius: 3px,
$code-font-size: .9em,
$code-color: inherit,

Тэг <kbd>

$kbd-text-color: #333,
$kbd-background-color: #e1f4df,
$kbd-font-size: .9rem,
$kbd-border-radius: 0,

Тэг <samp>

$samp-text-color: #333,
$samp-background-color: #d0ecb9,
$samp-font-size: .9rem,
$samp-border-radius: 0,

Тэг <var>

$var-text-color: #333,
$var-background-color: #f4efdf,
$var-font-size: .9rem,
$var-border-radius: 3px,

Тэг <mark>

$mark-padding: 0 4px,
$mark-background-color: #F7F2C6,
$mark-border-radius: 3px,
$mark-font-size: .95em,

Тэг <blockquote>

$blockquote-border-left: 5px solid #578CB4,
$blockquote-color: #777777,
$blockquote-margin: 20px 0,
$blockquote-padding: 10px 0 10px 25px,
$blockquote-border-radius: 7px,
$blockquote-background: null,

Изображения

$images-thumbnail-border: #DDDDDD 1px solid, // для img.thumbnail
$images-thumbnail-padding: 4px,
$images-left-margin: 5px 20px 5px 0, // для img.left
$images-right-margin: 5px 0 5px 20px, // для img.right

Иконки

$icon-rounded-radius: 5px, // для .icon-rounded

Тэг <hr>

$hr-border: 1px solid #AAAAAA,
$hr-margin: 30px 0,

Таблицы

$table-tr-border-bottom: #d7dfe1 1px solid,

$table-th-background: #eff2f3,
$table-th-border-top: #c8d3d6 1px solid,
$table-th-border-bottom: #ced8da 1px solid,
$table-th-padding: .6rem .5rem,
$table-th-border-right: #ced8da 1px solid, // .table-border

$table-td-padding: .5rem,
$table-td-border-right: #d7dfe1 1px solid, // .table-border

$table-striped-odd-bg: #ffffff, // .table-striped
$table-striped-even-bg: #f1f5f5,

$table-tr-hover-bg: #d6e2e2, // .table-hover