Цветовая палитра
Цветовая палитра – одна из основных частей восприятия платформы 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>
);
}