@melospot/tokens

Design tokens for the MeloSpot design system. Built with Style Dictionary.

Installation

npm install @melospot/tokens

Usage

CSS

You can import the CSS variables for either the light or dark theme:

/* Import light theme variables */
@import "@melospot/tokens/css/light";

/* Import dark theme variables */
@import "@melospot/tokens/css/dark";

The tokens are available as CSS variables, for example:

• --color-brand-primary
• --spacing-4
• --theme-color-background-primary

SCSS

// Import light theme variables
@use "@melospot/tokens/scss/light";

// Use tokens
.my-card {
  background-color: light.$theme-color-background-primary;
  padding: light.$spacing-4;
}

JavaScript / TypeScript

import { color, spacing, theme } from '@melospot/tokens';

// Default export uses the light theme
console.log(color.brand.primary); // #d74d0f
console.log(theme.color.background.primary); // #ffffff

To use the dark theme in JS:

import { theme } from '@melospot/tokens/dark';
console.log(theme.color.background.primary); // #0d0d0d

Available Tokens

Core Palette

• Colors: Brand, Neutral, Semantic (Success, Error, etc.)
• Spacing: 0-96px scale
• Radius: xs to full (circular)
• Typography: Font families, weights, and sizes

Semantic (Thematic) Tokens

• Backgrounds: Primary, Secondary
• Text: Primary, Secondary, Inverse
• Surface: Primary, Border
• Brand: Primary, Secondary, Tertiary

Development

To modify tokens, edit the JSON files in src/tokens or src/themes.

Build

Generate the distribution files:

npm run build

Clean

Remove the dist folder:

npm run clean

License

ISC