Skip to main content

​
Package Installation

Install the Meteor tokens package using your preferred package manager: 
npm install @shopware-ag/meteor-tokens

​
Import CSS Tokens

After installation, import the token CSS files into your application. The package provides different files for different use cases.

​
Basic Setup (Light Theme Only)

For a basic setup with light theme support: 
import '@shopware-ag/meteor-tokens/primitives.css';
import '@shopware-ag/meteor-tokens/administration/light.css';

​
With Dark Mode Support

To support both light and dark themes: 
import '@shopware-ag/meteor-tokens/primitives.css';
import '@shopware-ag/meteor-tokens/administration/light.css';
import '@shopware-ag/meteor-tokens/administration/dark.css';
The dark theme CSS uses the [data-theme="dark"] attribute selector, so both files can be imported without conflicts.

​
Available Files

The package exports the following files:
Export PathDescription
@shopware-ag/meteor-tokens/primitives.cssFoundation primitive tokens (colors, scales)
@shopware-ag/meteor-tokens/administration/light.cssSemantic tokens for light theme
@shopware-ag/meteor-tokens/administration/dark.cssSemantic tokens for dark theme
@shopware-ag/meteor-tokens/foundation/primitives.jsonRaw JSON token dictionary

​
Using with Different Frameworks

​
React / Next.js

Import tokens in your root layout or app file: 
// app/layout.tsx or pages/_app.tsx
import '@shopware-ag/meteor-tokens/primitives.css';
import '@shopware-ag/meteor-tokens/administration/light.css';
import '@shopware-ag/meteor-tokens/administration/dark.css';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

​
Vue / Nuxt

Import in your main entry file: 
// main.js or nuxt.config.ts
import '@shopware-ag/meteor-tokens/primitives.css';
import '@shopware-ag/meteor-tokens/administration/light.css';
import '@shopware-ag/meteor-tokens/administration/dark.css';

​
Vanilla JavaScript

Import in your main JavaScript file: 
// index.js
import '@shopware-ag/meteor-tokens/primitives.css';
import '@shopware-ag/meteor-tokens/administration/light.css';
import '@shopware-ag/meteor-tokens/administration/dark.css';

​
CSS/SCSS

You can also import directly in CSS if your bundler supports it: 
@import '@shopware-ag/meteor-tokens/primitives.css';
@import '@shopware-ag/meteor-tokens/administration/light.css';
@import '@shopware-ag/meteor-tokens/administration/dark.css';

​
Webpack Configuration

If you’re using Webpack, ensure you have css-loader configured: 
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

​
Vite Configuration

Vite supports CSS imports out of the box, no additional configuration needed: 
// vite.config.js
export default {
  // CSS imports work automatically
};

​
Verifying Installation

After installation, verify that tokens are loaded by checking the browser console: 
// Check if a token is available
const primaryColor = getComputedStyle(document.documentElement)
  .getPropertyValue('--color-interaction-primary-default');

console.log('Primary color:', primaryColor); // Should output: #0870ff
If the token value is returned correctly, your installation is complete!

​
Troubleshooting

Make sure you’ve imported the CSS files before your component styles. Token CSS should be loaded at the application root level.
Ensure you’ve imported the dark theme CSS and added the data-theme="dark" attribute to a parent element.
Check that your bundler is configured to handle CSS imports. You may need to install css-loader for Webpack or ensure Vite’s CSS support is enabled.

​
Next Steps

Usage Guide

Learn how to use design tokens in your CSS and components

Build docs developers (and LLMs) love

Get started for freeTalk to us