PHPackages                             gtstudio/module-hyva-theme-variables - 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. gtstudio/module-hyva-theme-variables

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

gtstudio/module-hyva-theme-variables
====================================

This module enable a admin variables creation for use in frontend area.

1.0.0(2y ago)13734↑42.9%1MITPHPPHP ~8.0|~8.1|~8.2

Since Feb 19Pushed 2y ago1 watchersCompare

[ Source](https://github.com/gabrielgts/magento2-module-hyva-variables)[ Packagist](https://packagist.org/packages/gtstudio/module-hyva-theme-variables)[ RSS](/packages/gtstudio-module-hyva-theme-variables/feed)WikiDiscussions main Synced today

READMEChangelogDependencies (3)Versions (2)Used By (0)

Gtstudio Hyva Theme Variables
=============================

[](#gtstudio-hyva-theme-variables)

[![Supported Magento Versions](https://camo.githubusercontent.com/4666bc12604e0bce414b8a01e328ded896ece9ccb00105a30a145df8ab9b7c8b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6d6167656e746f2d253230322e342d627269676874677265656e2e7376673f6c6f676f3d6d6167656e746f266c6f6e6743616368653d74727565267374796c653d666c61742d737175617265)](https://camo.githubusercontent.com/4666bc12604e0bce414b8a01e328ded896ece9ccb00105a30a145df8ab9b7c8b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6d6167656e746f2d253230322e342d627269676874677265656e2e7376673f6c6f676f3d6d6167656e746f266c6f6e6743616368653d74727565267374796c653d666c61742d737175617265)

Description
-----------

[](#description)

This module allows you to control Hyvä variables by the admin

[![](docs/module.gif)](docs/module.gif)

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

[](#installation)

### Composer

[](#composer)

- Install the module composer by running `composer require gtstudio/module-hyva-theme-variables`
- enable the module by running `php bin/magento module:enable Gtstudio_HyvaThemeVariables`
- apply database updates by running `php bin/magento setup:upgrade`\*
- For information about a module installation in Magento 2, see [Enable or disable modules](https://devdocs.magento.com/guides/v2.4/install-gde/install/cli/install-cli-subcommands-enable.html).

Usage
-----

[](#usage)

Insert your variables into your theme child in `web/tailwind/tailwind.config.js`

Below is a sample of configurations of this file:

```
...
module.exports = hyvaModules.mergeTailwindConfig({
  theme: {
    extend: {
        screens: {
            'sm': "var(--variables_media_queries_sm)",
            'md': "var(--variables_media_queries_md)",
            'lg': "var(--variables_media_queries_lg)",
            'xl': "var(--variables_media_queries_xl)",
            '2xl': "var(--variables_media_queries_2xl)",
        },
      fontFamily: {
        sans: ["var(--variables_font_family)", "Segoe UI", "Helvetica Neue", "Arial", "sans-serif"]
      },
      ...
});

```

```
--variables_media_queries_sm
--variables_media_queries_md
--variables_media_queries_lg
--variables_media_queries_xl
--variables_media_queries_2xl
--variables_font_family
--variables_colors_primary_lighter
--variables_colors_primary_default
--variables_colors_primary_darker
--variables_colors_secondary_lighter
--variables_colors_secondary_default
--variables_colors_secondary_darker
--variables_text_colors_primary_lighter
--variables_text_colors_primary_default
--variables_text_colors_primary_darker
--variables_text_colors_secondary_lighter
--variables_text_colors_secondary_default
--variables_text_colors_secondary_darker
--variables_background_colors_primary_lighter
--variables_background_colors_primary_default
--variables_background_colors_primary_darker
--variables_background_colors_secondary_lighter
--variables_background_colors_secondary_default
--variables_background_colors_secondary_darker
--variables_background_colors_container_lighter
--variables_background_colors_container_default
--variables_background_colors_container_darker
--variables_border_colors_primary_lighter
--variables_border_colors_primary_default
--variables_border_colors_primary_darker
--variables_border_colors_secondary_lighter
--variables_border_colors_secondary_default
--variables_border_colors_secondary_darker
--variables_border_colors_container_lighter
--variables_border_colors_container_default
--variables_border_colors_container_darker
--variables_heights_14
--variables_heights_a11y
--variables_heights_screen_25
--variables_heights_screen_50
--variables_heights_screen_75
--variables_widths_8
--variables_widths_20
--variables_widths_40
--variables_widths_48
--variables_container_padding
--var // variable generated dinamically in Aditional variables section

```

### Adding new variables

[](#adding-new-variables)

You can add your variables in Content > Design > Configuration then select your theme and add the variables in "Variables" Section.

After this step you need to clear magento cache.

In your less files you can use escape for css3 variables support.

Eg : `color: ~"var(--color-primary)"`

Extensibility
-------------

[](#extensibility)

Extension developers can interact with this module. For more information about the Magento extension mechanism, see [Magento plug-ins](https://devdocs.magento.com/guides/v2.4/extension-dev-guide/plugins.html).

[The Magento dependency injection mechanism](https://devdocs.magento.com/guides/v2.4/extension-dev-guide/depend-inj.html) enables you to override the functionality of the module.

### UI components

[](#ui-components)

You can extend product and category updates using the UI components located in the `view/adminhtml/ui_component` directory.

For information about a UI component in Magento 2, see [Overview of UI components](https://devdocs.magento.com/guides/v2.4/ui_comp_guide/bk-ui_comps.html).

Compatibility
-------------

[](#compatibility)

This module requires PHP 8 or higher.

Additional information
----------------------

[](#additional-information)

For information about significant changes in patch releases, see [Release information](https://devdocs.magento.com/guides/v2.4/release-notes/bk-release-notes.html).

###  Health Score

29

—

LowBetter than 57% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity24

Limited adoption so far

Community5

Small or concentrated contributor base

Maturity54

Maturing project, gaining track record

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

Unknown

Total

1

Last Release

865d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/ab1f0030c21bebf4e87187df361e770ffaa2c0d3cdcd0cd45c77a79db5836156?d=identicon)[gtstudio](/maintainers/gtstudio)

### Embed Badge

![Health badge](/badges/gtstudio-module-hyva-theme-variables/health.svg)

```
[![Health](https://phpackages.com/badges/gtstudio-module-hyva-theme-variables/health.svg)](https://phpackages.com/packages/gtstudio-module-hyva-theme-variables)
```

###  Alternatives

[baldwin/magento2-module-url-data-integrity-checker

Magento 2 module which can find potential url related problems in your catalog data

282822.9k](/packages/baldwin-magento2-module-url-data-integrity-checker)[nosto/module-nostotagging

Increase your conversion rate and average order value by delivering your customers personalized product recommendations throughout their shopping journey.

27703.7k4](/packages/nosto-module-nostotagging)[myparcelnl/magento

A Magento 2 module that creates MyParcel labels

1860.2k](/packages/myparcelnl-magento)[loki/magento2-components

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

1011.8k26](/packages/loki-magento2-components)[jajuma/awesomehyva

This Magento 2 extension allows using Font Awesome 5 icons with Hyvä Themes

1354.7k](/packages/jajuma-awesomehyva)[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)