Пакет предоставляет набор дизайн-токенов
реализующих дизайн «Plasma B2B».
NB — Все примеры будут приведены с использованием styled-components. Но использовать plasma-tokens-b2b
можно и без этого инструмента.
npm i --save @salutejs/plasma-tokens-b2b
import React from 'react';
import styled from 'styled-components';
import { text, background, gradient } from '@salutejs/plasma-tokens-b2b';
const AppStyled = styled.div`
padding: 30px;
color: ${text};
background-color: ${background};
background-image: ${gradient};
`;
const App = () => {
return (
<AppStyled>
<h2>Hello Plasma</h2>
</AppStyled>
);
};
export default App;
Все CSS-переменные завернуты в JS-переменные для более удобного доступа. Каждая переменная имеет описание ввиде комментария. Современные IDE будут выводить этот комментарий ввиде подсказки.
Пример:
/** Цвет предупреждения */
export const warning = 'var(--plasma-colors-warning)';