Токены

Пакет Plasma Tokens (@berdevices/plasma-tokens) предоставляет набор переменных (токенов), реализующих дизайн-систему Plasma для разных устройств.

Пример использования

Примеры приведены с использованием styled-components. Использовать токены можно и без этого инструмента.

App.tsx

import React from 'react';import styled from 'styled-components';import { body1, text, background, gradient } from '@salutejs/plasma-tokens';
const AppStyled = styled.div`    ${body1}    color: ${text};    background-color: ${background};    background-image: ${gradient};`;
export default function App() {    return (        <AppStyled>            <h2>Hello Plasma</h2>        </AppStyled>    );}

Реализация

Все CSS переменные обернуты в JavaScript переменные для упрощения доступа внутри кода компонентов. Переменные описаны в комментариях. Современные IDE выводят комментарии в виде подсказок.

/** Цвет предупреждения */export const warning = 'var(--plasma-colors-warning)';

Готовый пример

Все описанные примеры доступны в демо-приложении. Приложение основано на Create React App c использованием Typescript и styled-components. Для запуска приложения ознакомьтесь с README.