feat(Typography): Support fontWeightBase tokens

[andrey-medvedev-vk]

• related [Bug]: Не все компоненты типографики умеют в адаптивность #7283 (раздел с проблемой font-weight)

---

• Unit-тесты
• e2e-тесты
• Дизайн-ревью
• Документация фичи
• Release notes

Описание

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.
Надо придумать как эти токены добавить.

Изменения

Добавлено свойство useAccentWeight, которое по умолчанию true, так как в VKUI по умолчанию используются токены fontWeightAccent. Сейчас, чтобы использовались токены fontWeightBase надо явно задать useAccentWeight={false}.

Явно указывать accent по умолчанию как false выглядит как breaking change, так как могут быть пользователи Text компонента, которые ожидают уже, что там будет accent токены по умолчанию.
Добавил TODO поменять accent на false в V7.

Добавлять useBaseWeight, вместо useAccentWeight не стал, выглядит не плохо с одной стороны, но base, это как бы база, а accent уже как бы отличный вариант от base, надстройка, хочется её такой и оставить.
В общем, я больше склоняюсь к useAccentWeight.

Release notes

Улучшения

• Typography: добавлено свойство useAccentWeight для использования fontWeightAccent токенов, если требуется поменять начертание текста с помощью свойства weight. По умолчанию в VKUI useAccentWeight={true}, то есть при исползовании свойства weight применяются токены fontWeightAccent. Если нужно, чтобы использовались токены fontWeightBase необходимо явно указать useAccentWeight={false}. В v7 useAccentWeight по умолчанию будет false.

[github-actions]

size-limit report 📦

Path	Size
JS	381.67 KB (+0.02% 🔺)
JS (gzip)	115.48 KB (+0.02% 🔺)
JS (brotli)	94.84 KB (+0.05% 🔺)
JS import Div (tree shaking)	1.45 KB (0%)
CSS	309.86 KB (+0.17% 🔺)
CSS (gzip)	39.72 KB (+0.09% 🔺)
CSS (brotli)	31.88 KB (+0.07% 🔺)

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[github-actions]

e2e tests

Playwright Report

[github-actions]

👀 Docs deployed

• ✅ Styleguide
• ✅ Storybook

Commit 369ed67

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.14%. Comparing base (fa216af) to head (369ed67).
Report is 16 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #7549   +/-   ##
=======================================
  Coverage   95.14%   95.14%           
=======================================
  Files         384      384           
  Lines       11221    11226    +5     
  Branches     3685     3688    +3     
=======================================
+ Hits        10676    10681    +5     
  Misses        545      545           

Flag	Coverage Δ
unittests	95.14% <100.00%> (+<0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[inomdzhon]

💅

[vkcom-publisher]

✅ v6.7.0 🎉