Documentation menuCSS, tokens and JSON

CSS, tokens and JSON

Export the palette as CSS custom properties, W3C design tokens or plain JSON.

CSS custom properties

npx @sweberdev/gradient "#e30613" --out gradient.css
npx @sweberdev/gradient "#e30613" --hex --prefix c --dark class --out gradient.css

:root {
  --color-brand-50: oklch(97.98% 0.0098 25.07);
  /* … */
  --color-brand-on-600: oklch(100% 0 0);
}

Options of toCss(palette, options):

Option	Default
`prefix`	`"color"`	`--<prefix>-<name>-<step>`
`format`	`"oklch"`	`"hex"`, or `"channels"` for `oklch(var(--x) / 50%)`
`dark`	`"both"`	See Dark mode
`darkSelector`	`".dark"`
`lightSelector`	`".light"`	Forces light mode when `dark` is `both`
`root`	`":root"`	Selector for the light values, e.g. `.theme-brand`

Design tokens

npx @sweberdev/gradient "#e30613" --format tokens --out tokens.json

The file follows the W3C Design Tokens format and works with Tokens Studio for Figma and Style Dictionary:

{
  "light": { "brand": { "500": { "$type": "color", "$value": "#ff4c41" } } },
  "dark": { "brand": { "500": { "$type": "color", "$value": "#c3000d" } } }
}

JSON

--format json or toJson(palette) gives plain hex values: { "brand": { "light": { "50": "#fff6f5", … }, "dark": { … } } }.