Типографическая система

Текст – основа интерфейса. Типографическая система Plasma разработана, чтобы текст выглядел одинаково во всей экосистеме Salute. Типографическая система представляет собой набор констант (токенов) и компонентов. Компоненты заменяют обычные HTML-теги, такие, как h1, h2, h3, h4, p и некоторые другие.

Использование​

import { BodyL } from '@salutejs/plasma-web';
import { bodyL } from '@salutejs/plasma-typo';

export default function App() {
    return (
        <>
            {/* как компонент */}
            <BodyL>Hello, World!</BodyL>

            {/* как стилевой токен */}
            <div style={bodyL}>This is Plasma.</div>
        </>
    );
}

Состав​

Типографика дизайн-системы Plasma включает в себя следующие компоненты:

Размеры​

Размер текста в объектах стилей, которые предоставляет типографическая система, задан в единицах измерения rem.

export const bodyL = {
    fontFamily: 'var(--plasma-typo-body-l-font-family)',
    fontSize: 'var(--plasma-typo-body-l-font-size)',
    fontStyle: 'var(--plasma-typo-body-l-font-style)',
    fontWeight: 'var(--plasma-typo-body-l-font-weight)',
    letterSpacing: 'var(--plasma-typo-body-l-letter-spacing)',
    lineHeight: 'var(--plasma-typo-body-l-line-height)'
};

Это позволяет масштабировать весь интерфейс за счёт указания font-size на теге <html>.

Значение по умолчанию — 16px.

html {
    font-size: 16px;
}

При использовании стандартной типографики устанавливать размер шрифта на теге <html> не обязательно, это уже предусмотрено в глобальных стилях.

Установка шрифта​

Типографическая система основана на фирменных шрифтах SB Sans Display (для заголовков) и SB Sans Text (для текста и компонентов).

Для подключения в веб-приложения, шрифт загружен в CDN.

Чтобы использовать типографическую систему, достаточно указать один CSS-файл внутри тега <head>.

  • Если вы используете Create React App, подключите систему в файле public/index.html.
  • Если вы используете Next.js, создайте файл pages/_document.tsx и подключите систему в нем.
public/index.html
<html>
    <head>
        <link
            rel="stylesheet"
            href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansDisplay.0.2.0.css"
        />
        <link
            rel="stylesheet"
            href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansText.0.2.0.css"
        />
    </head>
    <body>
        ...
    </body>
</html>

Типографика, совместимая со старыми версиями​

См. на странице Совместимая типографика.