-
Notifications
You must be signed in to change notification settings - Fork 2
Description
Magento 2 Version
latest
Hyvä Version
1.2.3
Is your feature request related to a problem? Please describe.
no
Describe the solution you'd like
add a command to create a hyva token
https://www.npmjs.com/package/@hyva-themes/hyva-modules?activeTab=readme#:~:text=hyva%2Dinit.-,hyva%2Dtokens,-This%20command%20creates
Sub Informations
This command creates a generated/hyva-tokens.css from a design token input.
To run it, use: npx hyva-tokens.
By default, this will look for a design.tokens.json, but if you use Figma, you can configure it in hyva.config.json to use this file instead:
{
"tokens": {
"src": "acme.figma-tokens.json",
"format": "figma"
}
}
Since the format of Figma is diffrent, you need to also pass the format key with the value figma.
If you only need a few simple tokens, you can also create the tokens directly in hyva.config.json:
{
"tokens": {
"values": {
"colors": {
"primary": {
"lighter": "oklch(62.3% 0.214 259.815)",
"DEFAULT": "oklch(54.6% 0.245 262.881)",
"darker": "oklch(37.9% 0.146 265.522)"
}
}
}
}
}
By default, generated/hyva-tokens.css will be created in the Tailwind v4 syntax. You can change the cssSelector to anything you want. For example, you could use :root to add support for Tailwind v3:
{
"tokens": {
"values": {
"src": "...",
"cssSelector": ":root"
}
}
}