Package Exports

@salutejs/plasma-tokens-b2b
@salutejs/plasma-tokens-b2b/es/index.js
@salutejs/plasma-tokens-b2b/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@salutejs/plasma-tokens-b2b) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Plasma Tokens B2B

Пакет предоставляет набор дизайн-токенов реализующих дизайн «Plasma B2B».

plasma-tokens

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

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)';