@shopware-ag/meteor-tokens
v0.3.0
Published
Design Tokens for the Meteor Design System used at shopware
Downloads
44,590
Maintainers
bird87za
ffrank913
shyim
weltraumakustik
haberkamp
segge
patzick
schuchi
pweyck
jannisleifeld
tobiasbergeKeywords
Readme
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.
Installation
npm install @shopware-ag/meteor-tokensUsage
This 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 '@shopware-ag/meteor-tokens/administration/light.css';
// If you want to support dark mode
import '@shopware-ag/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>License
Shopware 6 is completely free and released under the MIT License.