{"id":19921585,"url":"https://github.com/siteation/magento2-theme-tokens","last_synced_at":"2025-05-03T07:30:26.784Z","repository":{"id":183943203,"uuid":"661535436","full_name":"Siteation/magento2-theme-tokens","owner":"Siteation","description":"Customize your theme with ease with Design Tokens (CSS props)","archived":false,"fork":false,"pushed_at":"2024-01-16T21:42:14.000Z","size":888,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-01T18:52:30.955Z","etag":null,"topics":["css-props","css-variables","design-tokens","hyva","hyva-compatibility-module","magento2","magento2-module"],"latest_commit_sha":null,"homepage":"https://siteation.dev","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Siteation.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-07-03T05:13:01.000Z","updated_at":"2024-09-06T15:16:07.000Z","dependencies_parsed_at":"2024-11-12T22:08:00.739Z","dependency_job_id":"b1956d06-2243-46a1-a5cd-c88393ed448e","html_url":"https://github.com/Siteation/magento2-theme-tokens","commit_stats":null,"previous_names":["siteation/magento2-theme-tokens"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Siteation%2Fmagento2-theme-tokens","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Siteation%2Fmagento2-theme-tokens/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Siteation%2Fmagento2-theme-tokens/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Siteation%2Fmagento2-theme-tokens/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Siteation","download_url":"https://codeload.github.com/Siteation/magento2-theme-tokens/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252156679,"owners_count":21703326,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-props","css-variables","design-tokens","hyva","hyva-compatibility-module","magento2","magento2-module"],"created_at":"2024-11-12T22:07:58.150Z","updated_at":"2025-05-03T07:30:26.455Z","avatar_url":"https://github.com/Siteation.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Siteation - Magento 2 module Theme Tokens\n\n[![Packagist Version](https://img.shields.io/packagist/v/siteation/magento2-theme-tokens?style=for-the-badge)](https://packagist.org/packages/siteation/magento2-theme-tokens)\n![Supported Magento Versions](https://img.shields.io/badge/magento-%202.4-brightgreen.svg?logo=magento\u0026longCache=true\u0026style=for-the-badge)\n[![Hyvä Themes Supported](https://img.shields.io/badge/Hyva_Themes-Supported-3df0af.svg?longCache=true\u0026style=for-the-badge)](https://hyva.io/)\n![License](https://img.shields.io/github/license/siteation/magento2-theme-tokens?color=%23234\u0026style=for-the-badge)\n\nThis Magento 2 module makes it easy to manage Design Tokens from the Magento backend.\n\nOnce you have set your tokens,\nthey will be output as CSS variables to the frontend,\nmaking it easy to style your website with consistent and reusable code.\n\n## Installation\n\nInstall the package via;\n\n```bash\ncomposer require siteation/magento2-theme-tokens\nbin/magento setup:upgrade\n```\n\n\u003e **Note** This Module requires Magento 2.4 or higher!\n\u003e For more requirements see the `composer.json`.\n\n## How to use\n\nOnce the module is installed, you can manage your Design Tokens from the Magento backend.\n\nFirst make sure your styles support CSS variables\n\n![Sample config with Hyva Tailwind Config](./assets/preview-config.jpg)\n\nAfter this you can configure your tokens, Go to Stores \u003e Configuration \u003e Siteation \u003e Design Tokens.\nEnter your the tokens in the desired format.\n\n![Sample config with Hyva Tailwind Config](./assets/backend.jpg)\n\nOnce you have set your tokens, they will be output as CSS variables to the frontend.\n\n| Before       | After        |\n| ------------ | ------------ |\n| ![preview-1] | ![preview-2] |\n\n[preview-1]: ./assets/default.jpg\n[preview-2]: ./assets/with-tokens.jpg\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiteation%2Fmagento2-theme-tokens","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsiteation%2Fmagento2-theme-tokens","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiteation%2Fmagento2-theme-tokens/lists"}