Цветовая палитра

Цветовая палитра – одна из основных частей восприятия платформы Salute.

Цвета

Цвета в Plasma Tokens представляют собой CSS custom properties c заданным цветом по умолчанию. Это позволяет переопределять цвета с помощью Тем.

Цвета можно получить из корня пакета:

import { accent } from '@salutejs/plasma-tokens';

Также доступны сами значения пременных:

import { colorValues } from '@salutejs/plasma-tokens';

console.log(colorValues.black); // –> '#080808'

Пример использования цветов для создания основной подложки веб-приложения:

App.tsx

import React from 'react';
// createGlobalStyle нужен для создания глобальных стилей
import { createGlobalStyle } from 'styled-components';
// получаем цвета для нашего интерфейса
import { text, background, gradient } from '@salutejs/plasma-tokens';
/**
 * text - основной цвет текста
 * background - основной цвет фона
 * gradient - градиентная заливка фона
 */

const DocStyles = createGlobalStyle`
  html {
    color: ${text};
    background-color: ${background};
    background-image: ${gradient};

    /** необходимо залить градиентом всю подложку */
    min-height: 100vh;
  }
`;

export default function App() {
    return (
        <div>
            {/* Используем глобальные react-компоненты один раз */}
            <DocStyles />
        </div>
    );
}

Темы

Каждая тема соотносится с персонажем ассистента и меняет цветовую гамму веб-приложения.

В пакете предоставлены 6 тем:

• darkSber
• darkEva
• darkJoy
• lightSber
• lightEva
• lightJoy

Подключение:

App.tsx

import React from 'react';
// createGlobalStyle нужен для создания глобальных стилей
import { createGlobalStyle } from 'styled-components';
// получаем тему персонажа
import { darkJoy } from '@salutejs/plasma-tokens/themes';
// получаем цвета для нашего интерфейса
import { text, background, gradient } from '@salutejs/plasma-tokens';

const DocStyles = createGlobalStyle`
    html {
        color: ${text};
        background-color: ${background};
        background-image: ${gradient};

        /** необходимо залить градиентом всю подложку */
        min-height: 100vh;
    }
`;

// создаем react-компонент для персонажа
const Theme = createGlobalStyle(darkJoy);

export default function App() {
    return (
        <>
            {/* Используем глобальные react-компоненты один раз */}
            <DocStyles />
            <Theme />
        </>
    );
}