@salutejs/plasma-tokens-web
TypeScript icon, indicating that this package has built-in type declarations

1.52.0 • Public • Published

Plasma-tokens-web

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

plasma-tokens

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

NB — Все примеры будут приведены с использованием styled-components. Но использовать plasma-tokens-web можно и без этого инструмента.

npm i --save @salutejs/plasma-tokens-web
import React from 'react';
import styled from 'styled-components';

import { text, background, gradient } from '@salutejs/plasma-tokens-web';

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

Readme

Keywords

none

Package Sidebar

Install

npm i @salutejs/plasma-tokens-web

Weekly Downloads

4,946

Version

1.52.0

License

MIT

Unpacked Size

577 kB

Total Files

174

Last publish

Collaborators

  • salute-eva
  • awinogradov
  • turanchoks
  • salute-assistant