@luxury-presence/design-system-tokens

@luxury-presence/design-system-tokens

This package contains the design tokens for the Luxury Presence design system. It provides a centralized way to manage and distribute visual design attributes like colors, typography, spacing, etc., ensuring consistency across all applications and platforms.

Installation

To install this package in your project, use pnpm:

pnpm add @luxury-presence/design-system-tokens

Usage

The tokens are available in multiple formats (CSS and JavaScript) to suit different use cases.

CSS Tokens

To use the CSS custom properties, import the generated CSS file into your project. This is typically done in your main CSS file or a global style entry point.

/* Example: In your main application stylesheet */
@import '@luxury-presence/design-system-tokens/tokens.css';

/* You can then use the tokens in your CSS: */
.my-component {
  background-color: var(--lp-color-primary-500); /* Example token */
  font-family: var(--lp-font-family-sans);
}

The CSS file is located at dist/tokens.css within the package, and is exported as @luxury-presence/design-system-tokens/tokens.css.

JavaScript Tokens

To use the tokens in JavaScript (e.g., for styling with JS-in-CSS libraries or accessing token values programmatically), you can import them from the package:

import tokens from '@luxury-presence/design-system-tokens';
// or specific token categories
import { colors, spacing } from '@luxury-presence/design-system-tokens';

console.log(tokens.colors.primary[500]);
console.log(spacing.sm);

The main JavaScript entry point is dist/tokens.js.

Token Source

The source of truth for the design tokens are JSON files located within the src/assets/json/design-tokens/ directory of this package. These files define the token names and their values.

Building Tokens

This package uses a build process to transform the source JSON tokens into various output formats (CSS, JavaScript).

To build the tokens, run:

pnpm build

This command will:

• Compile TypeScript files (including the CLI tool used for token generation).
• Execute the token generation script (node dist/cli.js), which processes the source JSON files.
• Generate output files in the dist/ directory, including:
  • dist/tokens.css: CSS custom properties.
  • dist/tokens.js: JavaScript module with token objects.
  • dist/tokens.d.ts: TypeScript declaration files for the JS tokens.

Available Scripts

This package includes several scripts for development and maintenance:

• pnpm build: Builds the tokens from source files.
• pnpm lint: Lints the codebase using ESLint.
• pnpm format: Formats the code using Prettier.
• pnpm format:check: Checks for formatting issues without making changes.
• pnpm test: Runs the test suite using Vitest.
• pnpm test:watch: Runs tests in watch mode.
• pnpm test:update: Updates test snapshots.
• pnpm prepublishOnly: Automatically runs pnpm build before publishing the package.

License

MIT