Токены
Пакет 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> );}
#
ТемыВ данном пакете есть набор продуктовых тем, из которых также можно брать токены с новой системой именования.
App.tsx
import React from 'react';import styled, { createGlobalStyle } from 'styled-components';
import { bodyM } from '@salutejs/plasma-typo';import { darkSbermarket } from '@salutejs/plasma-tokens';import { surfaceAccent, textPrimary } from '@salutejs/plasma-tokens/brands/sbermarket';
const Theme = createGlobalStyle(darkSbermarket);
const AppStyled = styled.div` ${bodyM} background-color: ${surfaceAccent};`;
const HeaderStyeld = styled.h2` color: ${textPrimary};`
export default function App() { return ( <AppStyled> <Theme /> <HeaderStyeld>Hello Plasma</HeaderStyeld> </AppStyled> );}
#
РеализацияВсе CSS переменные обернуты в JavaScript переменные для упрощения доступа внутри кода компонентов. Переменные описаны в комментариях. Современные IDE выводят комментарии в виде подсказок.
/** Цвет предупреждения */export const warning = 'var(--plasma-colors-warning)';
#
Готовый примерВсе описанные примеры доступны в демо-приложении. Приложение основано на Create React App c использованием Typescript и styled-components. Для запуска приложения ознакомьтесь с README.