siteation/magento2-theme-tokens

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

1.0.1 2024-01-16 21:41 UTC

Requires

• magento/framework: ^103.0
• magento/module-backend: ^102.0
• magento/module-store: ^101.1

MIT

• Siteation

• magento2
• magento2-module
• magento2-hyva
• design-tokens
• css-props
• css-variables

README

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

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

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

First make sure your styles support CSS variables

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

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

Before	After