Color Token

Color token: swatch or row with the variable, value and copy. Pro · Landing pages and brand › Brand and design system

Installation

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.

Theme Customizer — Theme customizer: presets, colors, radius, font and a live preview
Type Specimen — Type specimen: a large glyph and typeface–role pairs
Template Card — Template card: live thumbnail, badge, description and links
Hero Section — Landing page hero
Feature Grid — Feature grid
Bento Grid — Responsive bento grid of cards in mixed sizes
Logo Cloud — Customer logos
Pricing Table — Pricing plans
Comparison Table — Product comparison
Testimonials — Customer testimonials
FAQ Section — Frequently asked questions
Award Badge — Award badge with a laurel wreath, stars and caption