PHPackages                             siteation/magento2-theme-tokens - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. siteation/magento2-theme-tokens

ActiveMagento2-module[Utility & Helpers](/categories/utility)

siteation/magento2-theme-tokens
===============================

Customize your theme with ease with Design Tokens (CSS props)

1.0.1(2y ago)36.4k↑114.3%MITPHP

Since Jul 26Pushed 2y ago3 watchersCompare

[ Source](https://github.com/Siteation/magento2-theme-tokens)[ Packagist](https://packagist.org/packages/siteation/magento2-theme-tokens)[ RSS](/packages/siteation-magento2-theme-tokens/feed)WikiDiscussions main Synced yesterday

READMEChangelog (2)Dependencies (3)Versions (3)Used By (0)

Siteation - Magento 2 module Theme Tokens
=========================================

[](#siteation---magento-2-module-theme-tokens)

[![Packagist Version](https://camo.githubusercontent.com/5ed2e29a71e9b71d1615aef7c082ce551a7392298265b59d3ff5055d723b2f51/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f736974656174696f6e2f6d6167656e746f322d7468656d652d746f6b656e733f7374796c653d666f722d7468652d6261646765)](https://packagist.org/packages/siteation/magento2-theme-tokens)[![Supported Magento Versions](https://camo.githubusercontent.com/a504a0adb323bd8dfa1ee1ca6d8299fcf2a52d50bb943fc5fb087413b877e124/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6d6167656e746f2d253230322e342d627269676874677265656e2e7376673f6c6f676f3d6d6167656e746f266c6f6e6743616368653d74727565267374796c653d666f722d7468652d6261646765)](https://camo.githubusercontent.com/a504a0adb323bd8dfa1ee1ca6d8299fcf2a52d50bb943fc5fb087413b877e124/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6d6167656e746f2d253230322e342d627269676874677265656e2e7376673f6c6f676f3d6d6167656e746f266c6f6e6743616368653d74727565267374796c653d666f722d7468652d6261646765)[![Hyvä Themes Supported](https://camo.githubusercontent.com/493d9b281f5efa76d5f34ed3635cd68c922897b8a113966936a31c3cd661fdfb/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f487976615f5468656d65732d537570706f727465642d3364663061662e7376673f6c6f6e6743616368653d74727565267374796c653d666f722d7468652d6261646765)](https://hyva.io/)[![License](https://camo.githubusercontent.com/d442d174035c2ac9a1f90bc704200cef144120f678e0d3b725b38cdb6f6d27e6/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f736974656174696f6e2f6d6167656e746f322d7468656d652d746f6b656e733f636f6c6f723d253233323334267374796c653d666f722d7468652d6261646765)](https://camo.githubusercontent.com/d442d174035c2ac9a1f90bc704200cef144120f678e0d3b725b38cdb6f6d27e6/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f736974656174696f6e2f6d6167656e746f322d7468656d652d746f6b656e733f636f6c6f723d253233323334267374796c653d666f722d7468652d6261646765)

This Magento 2 module makes it easy to manage Design Tokens from the Magento backend.

Once you have set your tokens, they will be output as CSS variables to the frontend, making it easy to style your website with consistent and reusable code.

Installation
------------

[](#installation)

Install the package via;

```
composer require siteation/magento2-theme-tokens
bin/magento setup:upgrade
```

> **Note** This Module requires Magento 2.4 or higher! For more requirements see the `composer.json`.

How to use
----------

[](#how-to-use)

Once the module is installed, you can manage your Design Tokens from the Magento backend.

First make sure your styles support CSS variables

[![Sample config with Hyva Tailwind Config](./assets/preview-config.jpg)](./assets/preview-config.jpg)

After this you can configure your tokens, Go to Stores > Configuration > Siteation > Design Tokens. Enter your the tokens in the desired format.

[![Sample config with Hyva Tailwind Config](./assets/backend.jpg)](./assets/backend.jpg)

Once you have set your tokens, they will be output as CSS variables to the frontend.

BeforeAfter[![preview-1](./assets/default.jpg)](./assets/default.jpg)[![preview-2](./assets/with-tokens.jpg)](./assets/with-tokens.jpg)

###  Health Score

28

—

LowBetter than 52% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity26

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity45

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~174 days

Total

2

Last Release

899d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/482de6cea25a4fe2d4b27d083cc439703e737d690d436a5009cc677d32109d25?d=identicon)[GrimLink](/maintainers/GrimLink)

![](https://www.gravatar.com/avatar/0359ec5af3f7d474ea9e1d2c9e0a4115976ea174aa5eed45523cf4dcc216d821?d=identicon)[siteation](/maintainers/siteation)

---

Top Contributors

[![GrimLink](https://avatars.githubusercontent.com/u/4387541?v=4)](https://github.com/GrimLink "GrimLink (20 commits)")

---

Tags

css-propscss-variablesdesign-tokenshyvahyva-compatibility-modulemagento2magento2-modulemagento2design-tokensmagento2 modulemagento2-hyvacss-propscss-variables

### Embed Badge

![Health badge](/badges/siteation-magento2-theme-tokens/health.svg)

```
[![Health](https://phpackages.com/badges/siteation-magento2-theme-tokens/health.svg)](https://phpackages.com/packages/siteation-magento2-theme-tokens)
```

###  Alternatives

[run-as-root/magento2-prometheus-exporter

Magento2 Prometheus Exporter

68357.9k](/packages/run-as-root-magento2-prometheus-exporter)[mollie/magento2

Mollie Payment Module for Magento 2

1131.9M16](/packages/mollie-magento2)[loki/magento2-components

Core module for defining Alpine.js components with advanced AJAX features

1011.8k26](/packages/loki-magento2-components)[opengento/module-category-import-export

This module add the capability to import and export the categories from the back-office.

1310.9k2](/packages/opengento-module-category-import-export)[angeo/module-llms-txt

Magento 2 module for AI Engine Optimization (AEO). Generates spec-compliant llms.txt and llms-full.txt per llmstxt.org standard, plus streaming JSONL for vector indexing. Multi-store, multi-website, CLI, cron, async admin UI, Page Builder-aware sanitization, customer-group pricing, atomic writes, ETag/Cache-Control, .md mirrors.

111.1k](/packages/angeo-module-llms-txt)[zwernemann/module-withdrawal

Magento 2 EU Withdrawal Button Module - Adds a withdrawal/revocation button for orders in compliance with EU Directive (EU) 2023/2673

244.8k2](/packages/zwernemann-module-withdrawal)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)