Release Notes - v0.4.0¶

Release Date: 2026-06-29

Highlights¶

NPM Package Generation - Generate publishable NPM packages with framework-specific outputs
Single-file Loader - Load design systems from design-system.json files
Seven Target Formats - CSS, Tailwind, ShadCN, MkDocs Material, SCSS, JSON, W3C

What's New¶

NPM Package Generation¶

Generate complete, publishable NPM packages from your design system specification with framework-specific presets and configurations.

CLI Usage:

# Generate package with all targets
dss generate --package ./dist --targets all

# Generate with specific targets
dss generate --package ./dist --targets css,tailwind,shadcn

# Custom scope and name
dss generate --package ./dist --scope @myorg --name tokens

Available Targets:

Target	Output	Use Case
`css`	CSS custom properties	Vanilla CSS/HTML projects
`tailwind`	Tailwind v4 preset and theme	Tailwind CSS v4+ projects
`shadcn`	ShadCN/UI theme variables	ShadCN/UI component library
`mkdocs-material`	MkDocs Material theme	Documentation sites
`scss`	SCSS variables	Sass/SCSS projects
`json`	Raw JSON tokens	Build tool pipelines
`w3c`	W3C Design Tokens format	Standards-compliant token exchange

Generated Package Structure:

dist/
├── package.json           # NPM package manifest with exports
├── index.js               # CommonJS entry point
├── index.mjs              # ES module entry point
├── index.d.ts             # TypeScript declarations
├── README.md              # Usage documentation
├── css/
│   └── tokens.css         # CSS custom properties
├── tailwind/
│   ├── preset.js          # Tailwind preset
│   └── theme.json         # Tailwind v4 theme
├── shadcn/
│   └── theme.css          # ShadCN theme variables
└── scss/
    └── tokens.scss        # SCSS variables

Example: Using Generated Tailwind Package

Install:

npm install ./dist

Configure tailwind.config.js:

import tokens from '@myorg/design-tokens/tailwind';

export default {
  presets: [tokens],
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
};

Example: Using Generated ShadCN Package

Import in your CSS:

@import '@myorg/design-tokens/shadcn';

/* ShadCN components now use your design system tokens */

Example: Using with MkDocs Material

Configure mkdocs.yml:

theme:
  name: material

extra_css:
  - https://unpkg.com/@myorg/design-tokens/mkdocs/theme.css

Single-file Loader Support¶

The loader now supports loading design systems from a single design-system.json file in addition to directory-based structures.

Before (directory structure):

my-design-system/
├── meta.json
├── foundations/
│   ├── colors.json
│   └── typography.json
└── components/
    └── button.json

Now (single file):

{
  "meta": {
    "name": "My Design System",
    "version": "1.0.0"
  },
  "foundations": {
    "colors": [...],
    "typography": {...}
  },
  "components": [...]
}

CLI:

dss generate -d ./design-system.json --package ./dist

Go SDK:

ds, err := dss.LoadDesignSystem("./design-system.json")

Added¶

GeneratePackage() method for NPM package generation
PackageGeneratorOptions struct with target configuration
PackageTarget constants for all supported formats
--package, --scope, --name, --targets, --dry-run CLI flags
Single-file loader support for design-system.json
Comprehensive package generation tests

Fixed¶

Directory loader now recognizes design-system.json in addition to folder structures

Documentation¶

NPM package generation roadmap and examples
Updated CLI reference with --package flag
Updated task list tracking implementation progress

Build¶

Updated Go module dependencies

Installation¶

# CLI tool
go install github.com/plexusone/design-system-spec/cmd/dss@v0.4.0

# Go SDK
go get github.com/plexusone/design-system-spec@v0.4.0

Quick Start¶

# Load design system
cd my-design-system

# Generate NPM package with all targets
dss generate --package ./dist --targets all

# Publish to NPM
cd dist
npm publish

SDK Usage¶

import dss "github.com/plexusone/design-system-spec/sdk/go"

ds, _ := dss.LoadDesignSystem("./my-design-system/")

opts := dss.PackageGeneratorOptions{
    OutputDir:   "./dist",
    Scope:       "@myorg",
    PackageName: "design-tokens",
    Targets: []dss.PackageTarget{
        dss.TargetCSS,
        dss.TargetTailwind,
        dss.TargetShadCN,
    },
}

err := ds.GeneratePackage(opts)

What's Next¶

dss init scaffolding for new design systems
dss lint for spec completeness checking
Advanced validation (color contrast, composition rules)
Figma tokens import/export