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>.

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

html {
font-size: 16px;
}

Необходимые значения также предоставляются в пакете 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 web поддерживают типографическую систему Plasma Tokens по умолчанию. Такой подход позволяет использовать типографику, создавая меньше кода в проекте.

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

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>