Токены

Пакет 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.