Текст данной страницы относится к функционалу, который больше не поддерживается. С актуальной информацией можно ознакомиться на странице Типографическая система.
Типографическая система
Текст – основа интерфейса. Типографическая система Plasma разработана, чтобы текст вы глядел одинаково во всей экосистеме Salute.
Типографическая система представляет собой набор констант (токенов) и компонентов.
Компоненты заменяют обычные HTML-теги, такие как h1
, h2
, h3
, h4
, p
и некоторые другие.
Токен
import { typography } from '@salutejs/plasma-tokens';
typography
включает в себя готовые стилевые объекты:
- Hero Unit:
- display1
- display2
- display3
- Заголовки:
- headline1
- headline2
- headline3
- headline4
- Основной текст:
- body1
- body2
- body3
- paragraph1
- paragraph2
- Вспомогательный текст:
- footnote1
- footnote2
- Контролы:
- button1
- button2
- Дополнительные:
- caption
- underline
Импорт токена
Каждый стилевой объект можно импортировать отдельно:
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:
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 по умолчанию. Такой подход позволяет использовать типографику, создавая меньше кода в проекте.
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
и подключите систему в нем.
- Create React App
- Next.js
<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>
import BaseDocument, { Html, Head, Main, NextScript } from 'next/document';
export default class Document extends BaseDocument {
render() {
return (
<Html>
<Head>
<link
rel="stylesheet"
href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansText.0.2.0.css"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}