Color Token

Цветовой токен: плашка или строка с переменной, значением и копированием. Pro · Лендинги и бренд › Бренд и дизайн-система

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add color-token

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { ColorToken } from 'valyro-ui-pro';

Prop	Type	Default
`name` *	`ReactNode`		Token name: "Accent".
`usage`	`ReactNode`		Where it is used: "Primary", "Text on accent".
`color` *	`string`		Any CSS color painted in the swatch.
`token`	`string`		CSS variable or design token: "--accent".
`value`	`string`		Printed value: "#543CFC", "15%". Default: the color itself.
`layout`	`'plate' \| 'tile'`	`'plate'`	`plate`: a large colored card; `tile`: a small swatch beside the text. Default `plate`.
`ink`	`'light' \| 'dark' \| 'auto'`	`'auto'`	Text color on a plate: light, dark, or picked from the color (hex or rgb(); other syntaxes get light text). Default `auto`.
`copyable`	`boolean`	`false`	Adds a button that copies the value.
`labels`	`Partial<ColorTokenLabels>`		Overrides for the built-in English text; keys left out keep their defaults.