Skip to content

Feature-Request: hyva-tokens #45

@dermatz

Description

@dermatz

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"
        }
    }
}

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions