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

caution

Текст данной страницы относится к функционалу, который больше не поддерживается. С актуальной информацией можно ознакомиться на странице Типографическая система.

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

Токен​

import { typography } from '@salutejs/plasma-tokens';

typography включает в себя готовые стилевые объекты:

Импорт токена​

Каждый стилевой объект можно импортировать отдельно:

App.tsx
import React from 'react';
import styled from 'styled-components';

import { body1, headline2 } from '@salutejs/plasma-tokens';

const AppStyled = styled.div`
    padding: 30px;
    ${body1}
`;

export default function App() {
    return (
        <AppStyled>
            <h2 style={headline2}>Hello Plasma</h2>
            <div>
                <span>Сил человеческих хватает до известного предела.</span>
                <br />
                <span>Кто виноват, что именно этот предел играет решающую роль?</span>
            </div>
        </AppStyled>
    );
}

В приведенном примере:

  • Текст написан не фирменным шрифтом.
  • Размер шрифта выглядит хорошо на экране средних размеров, но будет слишком маленьким на экране телевизора.

Размеры​

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

export const body1 = {
    fontFamily: "'SB Sans Text','Helvetica','Arial',sans-serif",
    fontWeight: 500,
    fontStyle: 'normal',
    fontSize: 'var(--plasma-typo-body1-font-size, 1rem)',
    letterSpacing: '-0.0190em',
    lineHeight: 'var(--plasma-typo-body1-line-height, 1.25rem)',
};

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

Для устройств SberBox и SberPortal надо использовать значение 32px. Для остальных поверхностей используйте значение по умолчанию — 16px.

html {
    font-size: 32px;
}

Необходимые значения также предоставляются в пакете plasma-tokens.

import { sberBox } from '@salutejs/plasma-tokens/typo';

Пример использования со styled-components:

App.tsx
import React from 'react';
// createGlobalStyle нужен для создания глобальных стилей
import styled, { createGlobalStyle } from 'styled-components';

// получаем значение для целевой платформы
import { sberBox } from '@salutejs/plasma-tokens/typo';

// получаем стилевые объекты для нашего интерфейса
import { body1, headline2 } from '@salutejs/plasma-tokens';

const AppStyled = styled.div`
    padding: 30px;
    ${body1}
`;

// создаем react-компонент c глобальными стилями
const TypoScale = createGlobalStyle(sberBox);

export default function App() {
    return (
        <AppStyled>
            {/* Используем  react-компонент один раз */}
            <TypoScale />

            <h2 style={headline2}>Hello Plasma</h2>
            <div>
                <span>Сил человеческих хватает до известного предела.</span>
                <br />
                <span>Кто виноват, что именно этот предел играет решающую роль?</span>
            </div>
        </AppStyled>
    );
}

Дополнительно​

Также из пакета можно получить все возможные значения для:

  • fontSizes
  • fonts
  • fontWeights
  • lineHeights
  • letterSpacings
import { fonts } from '@salutejs/plasma-tokens';

console.log(fonts);
// –> {
//     Medium: "'SB Sans Text','Helvetica','Arial',sans-serif",
//     Bold: "'SB Sans Text','Helvetica','Arial',sans-serif",
//     Semibold: "'SB Sans Text','Helvetica','Arial',sans-serif",
//     Regular: "'SB Sans Text','Helvetica','Arial',sans-serif"
// }

Компонент​

Все типографические компоненты Plasma UI поддерживают типографическую систему Plasma Tokens по умолчанию. Такой подход позволяет использовать типографику, создавая меньше кода в проекте.

App.tsx
import React from 'react';
// вместо
// import { body1 } from '@salutejs/plasma-tokens';
// используем
import { Body1 } from '@salutejs/plasma-ui';

export default function App() {
    return <Body1>some text</Body1>;
}

С компонентами, реализующими типографику Plasma, можно ознакомиться на странице Typography.

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

Типографическая система основана на фирменном шрифте 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/SBSansText.0.2.0.css"
        />
    </head>
    <body>
        ...
    </body>
</html>