[Bug]: Не все компоненты типографики умеют в адаптивность

[mendrew]

Описание

Проблема

Выяснилось, что не все компоненты из раздела Типографики умеют адаптироваться под размер экрана.
Под умением подразумевается использование специальных компонентных токенов в режиме regular и compact.

Например.

Компонент Headline.
Иммет разные параметры типографики для разных значений level.
Каждый уровень задан специальными токенами:
--vkui--font_headline1--font_size--regular

VKUI/packages/vkui/src/components/Typography/Headline/Headline.module.css

Lines 1 to 6 in 716657b

	.Headline--level-1 {
	font-size: var(--vkui--font_headline1--font_size--regular);
	line-height: var(--vkui--font_headline1--line_height--regular);
	font-weight: var(--vkui--font_headline1--font_weight--regular);
	font-family: var(--vkui--font_headline1--font_family--regular);
	}

В режиме compact используются уже другие токены:

VKUI/packages/vkui/src/components/Typography/Headline/Headline.module.css

Lines 8 to 18 in 716657b

	.Headline--sizeY-compact.Headline--level-1 {
	font-size: var(--vkui--font_headline1--font_size--compact);
	line-height: var(--vkui--font_headline1--line_height--compact);
	}
	@media (--sizeY-compact) {
	.Headline--sizeY-none.Headline--level-1 {
	font-size: var(--vkui--font_headline1--font_size--compact);
	line-height: var(--vkui--font_headline1--line_height--compact);
	}
	}

То же самое наблюдается для level 2

VKUI/packages/vkui/src/components/Typography/Headline/Headline.module.css

Lines 20 to 37 in 716657b

	.Headline--level-2 {
	font-size: var(--vkui--font_headline2--font_size--regular);
	line-height: var(--vkui--font_headline2--line_height--regular);
	font-weight: var(--vkui--font_headline2--font_weight--regular);
	font-family: var(--vkui--font_headline2--font_family--regular);
	}
	.Headline--sizeY-compact.Headline--level-2 {
	font-size: var(--vkui--font_headline2--font_size--compact);
	line-height: var(--vkui--font_headline2--line_height--compact);
	}
	@media (--sizeY-compact) {
	.Headline--sizeY-none.Headline--level-2 {
	font-size: var(--vkui--font_headline2--font_size--compact);
	line-height: var(--vkui--font_headline2--line_height--compact);
	}
	}

Это можно считать идальным примером, но и тут есть ещё что улучшить.
Например, для режима compact отстутсвует использование токенов для font-weight и font-family.
А они тоже могут быть иными, согласно дизайн системе, по крайней мере font-weight в compact режиме точно может быть изменён через токены, а значит и мы должны это в компоненте отобразить.
На счёт font-family, конечно, вопрос, может быть это можно и не добавлять.

Общие требования для всех Typography компонентов

1. compact режим, в котором используются compact токены для всех режимов, для которых предусмотрены токены, например level. Пример DisplayTitle1 DisplayTitle2 в vkui-tokens
2. в отдельных режимах также должны присутствовать токены font-weight и font-family. font-family перебор?
3. в отдельных режимах должны присутствовать токены letterSpacing и textTransform, по крайней мере для компонентов Caption и Footnote. Пример в vkui-tokens

Компоненты, которые нужно дополнить.

• DisplayTitle feat(DisplayTitle): Add adaptivity to DisplayTitle #7553
  • нет адаптивности для кадого level
• Title feat(Title): Add adaptivity #7554
  • нет адаптивности для каждого level
• Headline fix(Headline): add compact adaptivity for fontWeight #7551
  • нет токенов для font-weight
• Caption feat(Caption): Add adaptivity #7555
  • нету режима compact
  • нет использования токенов для letter-spacing и text-transform
  • text-transform есть, но не через токен. Возможно через токен было бы лучше 🤷‍♂️
  • в vkui-tokens
• Footnote feat(Footnote): add adaptivity #7563
  • нету режима compact
  • нет использования токенов для letter-spacing и text-transform
• Text feat(Text): Add compact tokens for font-weight and font-family #7564
  • нету использования токенов для font-weight
• Paragraph feat(Paragraph): Add compact mode #7565
  • нету использования токенов для режима compact.
• Subhead feat(Subhead): Add fontWeight and fontFamily to compact mode #7566
  • нету использования токенов для font-weight.

Проблема с font-weight. #7549

Отдельно хочется подчеркнуть проблему с font-weight.
font-weight в дизайн системе может выглядеть как отдельны режим.
Мы позволяем менять font-weight с помощью свойства weight компонента Typography, который под капотом у всех других типографических элементов.

VKUI/packages/vkui/src/components/Typography/Typography.tsx

Lines 21 to 24 in 716657b

	/**
	* Задаёт начертание шрифта, отличное от стандартного.
	*/
	weight?: '1' | '2' | '3';

Но Typography поддерживает не все токены, которые могут быть использованы в дизайн-системе.
Вот все токены fontWeight пока что существующие в vkui-tokens. Ссылка на токены темы paradigm

https://github.com/VKCOM/VKUI/blob/716657bed3a0498ac2458ec0b53f9e3bfa46da0d/packages/vkui/src/components/Typography/Typography.module.css#L12-L27

Сейчас VKUI поддерживает только разные уровни fontWeightAccent

VKUI/packages/vkui/src/components/Typography/Typography.module.css

Lines 12 to 27 in 716657b

	.Typography--weight-1.Typography--weight-1.Typography--weight-1 {
	font-weight: var(--vkui--font_weight_accent1);
	}
	.Typography--weight-2.Typography--weight-2.Typography--weight-2 {
	font-weight: var(--vkui--font_weight_accent2);
	}
	.Typography--weight-3.Typography--weight-3.Typography--weight-3 {
	font-weight: var(--vkui--font_weight_accent3);
	}
	/* stylelint-disable-next-line selector-max-type */
	.Typography b {
	font-weight: var(--vkui--font_weight_accent1);
	}

Стоит также поддержать и уровни fontWeightBase, я видел использование таких токенов в дизайн системе, независимо от regular/compact. Например жирность была fontWeightBase равная 700 и в режиме compact и в режиме regular, что нельзя сейчас поддержать в VKUI.
Надо придумать как эти токены добавить.

Версия

v6.4.1

[andrey-medvedev-vk]

Все компоненты типографики теперь знают о режиме compact начиная с версии v6.7.0

Чтобы адаптивность работала по дизайн системе нужно убедиться, что в токенах типографических элементов vkui-tokens прописан режим compact.
Как, например, тут

fontText: {
  regular: {
    fontSize: 16,
    lineHeight: 20,
    fontFamily: fontFamilyBase,
    fontWeight: fontWeightBase3,
  },
  compact: {
    fontSize: 15,
    lineHeight: 20,
  },
},