Add mageforge:hyva:tokens command for Hyvä design token generation #58

Copilot · 2026-01-09T23:29:17Z

Implements mageforge:theme:tokens command to generate Hyvä design tokens via npx hyva-tokens, supporting design.tokens.json, Figma tokens, inline configurations, and custom CSS selectors.

Implementation

New Command: TokensCommand at src/Console/Command/Theme/TokensCommand.php
- Command name: mageforge:theme:tokens (shortcode: m:t:t)
- Validates theme is Hyvä before execution
- Requires node_modules installation
- Executes in theme's web/tailwind directory using Shell service
- Interactive theme selection or direct argument support
Registration: Added mageforge_theme_tokens to src/etc/di.xml
Documentation: Updated README.md, docs/commands.md, and CHANGELOG.md with command details and token configuration examples

Usage

# Interactive selection
bin/magento mageforge:theme:tokens

# Direct theme specification
bin/magento mageforge:theme:tokens Vendor/theme

# Shortcode
bin/magento m:t:t

Token Configuration Examples

Supports multiple token sources in hyva.config.json:

// Default tokens file
{"tokens": {"src": "design.tokens.json"}}

// Figma tokens
{"tokens": {"src": "acme.figma-tokens.json", "format": "figma"}}

// Inline tokens
{"tokens": {"values": {"colors": {"primary": {"DEFAULT": "oklch(54.6% 0.245 262.881)"}}}}}

// Custom CSS selector for Tailwind v3
{"tokens": {"cssSelector": ":root"}}

Generates generated/hyva-tokens.css in the theme's tailwind directory.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

https://api.github.com/repos/magento/magento-coding-standard/zipball/f24dd98f46a98cd7081e4648b19299c27db35264
- Triggering command: /usr/bin/php8.3 /usr/bin/php8.3 -n -c /tmp/JEqquD /usr/bin/composer create-project magento/magento-coding-standard --stability=dev /tmp/magento-coding-standard (http block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

This section details on the original issue you should resolve

<issue_title>Feature-Request: hyva-tokens</issue_title>
<issue_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"
        }
    }
}
```</issue_description>

## Comments on the Issue (you are @copilot in this section)

<comments>
</comments>

Fixes Feature-Request: hyva-tokens #57

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

…sign tokens Co-authored-by: dermatz <[email protected]>

Co-authored-by: dermatz <[email protected]>

…onsistency Co-authored-by: dermatz <[email protected]>

Co-authored-by: dermatz <[email protected]>

Copilot

Pull request overview

This PR implements a new command to generate Hyvä design tokens via the npx hyva-tokens utility. The command validates that the target theme is a Hyvä theme, checks for required dependencies, executes the token generation, and handles different output locations for vendor vs. custom themes.

Changes:

Added TokensCommand for generating Hyvä design tokens from design.tokens.json or hyva.config.json
Registered command in di.xml as mageforge_theme_tokens
Updated documentation (README.md, docs/commands.md, CHANGELOG.md) with command usage and examples

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 12 comments.

Show a summary per file

File	Description
src/Console/Command/Theme/TokensCommand.php	New command implementation for Hyvä token generation with theme validation, interactive selection, and vendor theme handling
src/etc/di.xml	Registered the new TokensCommand in Magento's dependency injection configuration
docs/commands.md	Added comprehensive documentation for the tokens command including usage, examples, and implementation details
README.md	Added tokens command to the command list table and quick start guide
CHANGELOG.md	Documented the new feature in the unreleased section

Copilot · 2026-01-12T10:44:16Z

src/Console/Command/Theme/TokensCommand.php

+                $varGeneratedPath = $currentDir . '/var/generated/hyva-token/' . str_replace('/', '/', $themeCode);
+
+                if (!$this->fileDriver->isDirectory($varGeneratedPath)) {
+                    $this->fileDriver->createDirectory($varGeneratedPath, 0755);


Potential directory creation failure not handled. The createDirectory call can throw exceptions, but they're not caught separately from the main try-catch block. If directory creation fails in the vendor theme path, the error message will say "Failed to generate Hyvä design tokens" which is misleading since the tokens were already generated but the copy operation failed. Consider adding specific error handling for directory operations.

Suggested change

$this->fileDriver->createDirectory($varGeneratedPath, 0755);

try {

$this->fileDriver->createDirectory($varGeneratedPath, 0755);

} catch (\Exception $e) {

chdir($currentDir);

$this->io->error(

'Failed to prepare vendor directory for Hyvä design tokens: '

. $e->getMessage()

);

return Cli::RETURN_FAILURE;

}

README.md

Copilot · 2026-01-12T10:44:16Z

src/Console/Command/Theme/TokensCommand.php

+        $this->setName($this->getCommandName('hyva', 'tokens'))
+            ->setAliases(['m:h:t'])


Alias inconsistency. The alias 'm:h:t' suggests this is a hyva command, but if the command is corrected to 'mageforge:theme:tokens' (as indicated by its location in the Theme/ directory and the di.xml registration), the alias should be 'm:t:t' to follow the pattern of other theme commands (m:t:l, m:t:b, m:t:w).

Suggested change

$this->setName($this->getCommandName('hyva', 'tokens'))

->setAliases(['m:h:t'])

$this->setName($this->getCommandName('theme', 'tokens'))

->setAliases(['m:t:t'])

Copilot · 2026-01-12T10:44:17Z

CHANGELOG.md

+
 ### Added

+- feat: add `mageforge:theme:tokens` command to generate Hyvä design tokens from design.tokens.json or hyva.config.json


Inconsistent command name in changelog. The changelog mentions 'mageforge:theme:tokens' which contradicts the actual implementation that uses 'mageforge:hyva:tokens'. While this might be the intended correct name (matching the di.xml and PR title), the actual code implementation needs to be updated to match.

Suggested change

- feat: add `mageforge:theme:tokens` command to generate Hyvä design tokens from design.tokens.json or hyva.config.json

- feat: add `mageforge:hyva:tokens` command to generate Hyvä design tokens from design.tokens.json or hyva.config.json

docs/commands.md

Copilot · 2026-01-12T10:44:18Z

README.md

+4. Generate Hyvä design tokens (for Hyvä themes):
+
+   ```bash
+   bin/magento mageforge:hyva:tokens <theme-code>


Inconsistent command name in usage example. The command name should match the actual implementation and the project structure. If this command is in the Theme/ directory, it should use 'mageforge:theme:tokens' not 'mageforge:hyva:tokens'.

Copilot · 2026-01-12T10:44:18Z

src/Console/Command/Theme/TokensCommand.php

+        if (empty($themeCode)) {
+            $themes = $this->themeList->getAllThemes();
+            $options = array_map(fn($theme) => $theme->getCode(), $themes);
+
+            $themeCodePrompt = new SelectPrompt(
+                label: 'Select theme to generate tokens for',
+                options: $options,
+                scroll: 10,
+                hint: 'Arrow keys to navigate, Enter to confirm',
+            );
+
+            try {
+                $themeCode = $themeCodePrompt->prompt();
+                \Laravel\Prompts\Prompt::terminal()->restoreTty();
+            } catch (\Exception $e) {
+                $this->io->error('Interactive mode failed: ' . $e->getMessage());
+                return Cli::RETURN_FAILURE;
+            }
+        }


The interactive theme selection does not check if the environment supports interactive terminals, unlike BuildCommand which uses isInteractiveTerminal() to handle non-interactive environments gracefully. In non-interactive CI/CD environments, this will fail with an exception. Consider adding a check similar to BuildCommand's implementation to handle non-interactive environments by displaying available themes and returning gracefully instead of attempting to show an interactive prompt.

Copilot · 2026-01-12T10:44:19Z

src/Console/Command/Theme/TokensCommand.php

+
+            if ($isVendorTheme) {
+                // Store in var/generated/hyva-token/{ThemeCode}/ for vendor themes
+                $varGeneratedPath = $currentDir . '/var/generated/hyva-token/' . str_replace('/', '/', $themeCode);


The str_replace call is replacing '/' with '/', which is a no-op and doesn't change the string. This appears to be a mistake. If the intention is to keep the slash, this line can be simplified to just concatenate themeCode. If the intention is to replace slashes with a different character (like '-' or '_'), the second parameter should be updated accordingly.

Suggested change

$varGeneratedPath = $currentDir . '/var/generated/hyva-token/' . str_replace('/', '/', $themeCode);

$varGeneratedPath = $currentDir . '/var/generated/hyva-token/' . $themeCode;

Copilot · 2026-01-12T10:44:19Z

src/Console/Command/Theme/TokensCommand.php

+            $sourceFilePath = $tailwindPath . '/generated/hyva-tokens.css';
+
+            if ($isVendorTheme) {
+                // Store in var/generated/hyva-token/{ThemeCode}/ for vendor themes
+                $varGeneratedPath = $currentDir . '/var/generated/hyva-token/' . str_replace('/', '/', $themeCode);
+
+                if (!$this->fileDriver->isDirectory($varGeneratedPath)) {
+                    $this->fileDriver->createDirectory($varGeneratedPath, 0755);
+                }
+
+                $generatedFilePath = $varGeneratedPath . '/hyva-tokens.css';
+
+                // Copy file to var/generated location
+                if ($this->fileDriver->isExists($sourceFilePath)) {
+                    $this->fileDriver->copy($sourceFilePath, $generatedFilePath);
+                }
+
+                $this->io->success('Hyvä design tokens generated successfully.');
+                $this->io->note('This is a vendor theme. Tokens have been saved to var/generated/hyva-token/ instead.');
+                $this->io->text('Generated file: ' . $generatedFilePath);
+            } else {
+                $generatedFilePath = $sourceFilePath;
+                $this->io->success('Hyvä design tokens generated successfully.');
+                $this->io->text('Generated file: ' . $generatedFilePath);
+            }


Missing error handling if the source file doesn't exist after npx hyva-tokens execution. The code only checks if the file exists before copying for vendor themes but doesn't handle the case where the token generation succeeds but doesn't create the expected file. For non-vendor themes, the code assumes the file exists and displays it as the generated file path without verification. Consider adding explicit validation that the file was created before reporting success.

Initial plan

adf3ada

Copilot AI assigned Copilot and dermatz Jan 9, 2026

Copilot started work on behalf of dermatz January 9, 2026 23:29 View session

Copilot AI and others added 4 commits January 9, 2026 23:34

#add-hyva-token-command - Create TokensCommand for generating Hyvä de…

0d1ae63

…sign tokens Co-authored-by: dermatz <[email protected]>

#add-hyva-token-command - Fix variable naming and improve documentation

f2b5a5f

Co-authored-by: dermatz <[email protected]>

#add-hyva-token-command - Use Shell service for better security and c…

2e9e3ec

…onsistency Co-authored-by: dermatz <[email protected]>

#add-hyva-token-command - Update CHANGELOG.md with new feature

17cf63b

Co-authored-by: dermatz <[email protected]>

Copilot AI changed the title ~~[WIP] Add command to create hyva tokens~~ Add mageforge:theme:tokens command for Hyvä design token generation Jan 9, 2026

Copilot AI requested a review from dermatz January 9, 2026 23:37

Copilot finished work on behalf of dermatz January 9, 2026 23:37

dermatz and others added 2 commits January 12, 2026 11:25

Merge branch 'main' into copilot/add-hyva-token-command

e56ffce

✨ feat: rename command to generate Hyvä design tokens

62202cb

dermatz marked this pull request as ready for review January 12, 2026 10:37

Copilot AI review requested due to automatic review settings January 12, 2026 10:37

Copilot started reviewing on behalf of dermatz January 12, 2026 10:38 View session

Copilot AI reviewed Jan 12, 2026

View reviewed changes

dermatz changed the title ~~Add mageforge:theme:tokens command for Hyvä design token generation~~ Add mageforge:hyva:tokens command for Hyvä design token generation Jan 12, 2026

dermatz merged commit 68ee6bf into main Jan 12, 2026
14 checks passed

dermatz deleted the copilot/add-hyva-token-command branch January 12, 2026 10:51

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add mageforge:hyva:tokens command for Hyvä design token generation #58

Add mageforge:hyva:tokens command for Hyvä design token generation #58

Uh oh!

Copilot AI commented Jan 9, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 12, 2026

Uh oh!

Uh oh!

Copilot AI Jan 12, 2026

Uh oh!

Copilot AI Jan 12, 2026

Uh oh!

Uh oh!

Uh oh!

Copilot AI Jan 12, 2026

Uh oh!

Copilot AI Jan 12, 2026

Uh oh!

Copilot AI Jan 12, 2026

Uh oh!

Copilot AI Jan 12, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		$this->setName($this->getCommandName('hyva', 'tokens'))
		->setAliases(['m:h:t'])


		### Added

		- feat: add `mageforge:theme:tokens` command to generate Hyvä design tokens from design.tokens.json or hyva.config.json

	- feat: add `mageforge:theme:tokens` command to generate Hyvä design tokens from design.tokens.json or hyva.config.json
	- feat: add `mageforge:hyva:tokens` command to generate Hyvä design tokens from design.tokens.json or hyva.config.json

	$varGeneratedPath = $currentDir . '/var/generated/hyva-token/' . str_replace('/', '/', $themeCode);
	$varGeneratedPath = $currentDir . '/var/generated/hyva-token/' . $themeCode;

Add mageforge:hyva:tokens command for Hyvä design token generation #58

Add mageforge:hyva:tokens command for Hyvä design token generation #58

Uh oh!

Conversation

Copilot AI commented Jan 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Implementation

Usage

Token Configuration Examples

I tried to connect to the following addresses, but was blocked by firewall rules:

Sub Informations

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Jan 9, 2026 •

edited

Loading