This repository contains the Design Tokens for the Meteor Design System at shopware.
⚠️ This package is still in early development. It's possible that we release breaking changes in minor or patch version. Once the package is stable we'll release a 1.0.0 version and conform to the semver versioning.
npm install @haokeyingxiao/meteor-tokensThis packages exposes a handful of files to consume:
- Primitive tokens
- Tokens for the Shopware 6 Administration (light & dark)
As an example we'll show you how to make use of the tokens for the Shopware 6 Administration.
Import the CSS files that contain the corresponding tokens.
import '@haokeyingxiao/meteor-tokens/administration/light.css';
// If you want to support dark mode
import '@haokeyingxiao/meteor-tokens/administration/dark.css';Now, you're able to make use of the Design Tokens trough CSS custom properties, like this:
.sw-button {
background-color: var(--color-interaction-primary-default);
}To switch to the dark mode add the attribute data-theme="dark" to
a DOM element as far up in the DOM tree as possible.
<body data-theme="dark">
<!-- Your application -->
</body>Shopware 6 is completely free and released under the MIT License.