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

Дизайн Plasma базируется на типографической системе, которая имеет возможность изменять размеры в зависимости от разрешения экрана устройства:

РазмерРазрешение, pxПоверхность
Sдо 559SaluteApp
Mот 1120 до 1919SberPortal
Lот 1920SberBox

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

import { BodyL, bodyL } from '@salutejs/plasma-ui';

export default function App() {
    return (
        <>
            <BodyL>Hello, World!</BodyL>{/* как компонент */}
            <div style={bodyL}>This is Plasma.</div>{/* как стилевой токен */}
        </>
    );
}

Подключение​

Адаптивная типографика спрятана за флагом responsiveTypo компонента DeviceThemeProvider. По умолчанию она выключена.

Размеры​

Размер текста в объектах стилей, которые предоставляет типографическая система, задан в единицах измерения 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>. Для устройств SberBox и SberPortal используется значение 32px. Для остальных поверхностей (например, приложение SaluteApp) используется значение по умолчанию — 16px.

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

Перенос​

По умолчанию для всех компонентов типографики в теме включен перенос текста.

Если необходимо отключить данное поведение, нужно указать breakWard={false} в провайдере темы DeviceThemeProvider.

import { DeviceThemeProvider } from '@salutejs/plasma-ui';

export default function App() {
    return (
        <DeviceThemeProvider breakWord={false}>
           ...
        </DeviceThemeProvider>
    );
}

Переносы на SberBox, SberPortal, etc.​

На устройствах не работает, пока что, автоматическая система переносов для русского языка.

Однако если использовать мягкие переносы - &shy;, то система корректно расставит все переносы.

Состав​

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

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

Типографическая система основана на фирменных шрифтах 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>

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

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