@shopware-ag/meteor-tokens
v1.3.1
Published
Design Tokens for the Meteor Design System used at shopware
Downloads
86,532
Maintainers
schuchi
pweyck
jannisleifeld
tobiasberge
patzick
weltraumakustik
haberkamp
shyim
ffrank913
bird87zaKeywords
Readme
This repository contains the Design Tokens for the Meteor Design System at shopware.
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.