Flitsmeister Design System

This project serves two main purposes:

1. Dev Docs Site: A documentation and demo site for developing and previewing the design system.
2. Library Use: A consumable library of Vue components and design tokens for use in other projects.

Consuming the Design System as a Library

1. Using Design Tokens (CSS)

Design tokens are exported as platform-specific files in tokens/schema_exports/. For easier consumption, the package maps these files to the themes/ export path (see the exports field in package.json).

How to import CSS tokens:

• Choose the appropriate CSS file for your schema (e.g., fm-design-system.css) and import it using the themes/ alias:

  import '@flitsmeister/design-system/themes/fm-design-system/fm-design-system.css';

• This will provide all color, spacing, and other design tokens as CSS custom properties. You can use these variables directly in your own CSS or with Tailwind.

Note: No bundled main.css is provided. You must import the relevant CSS export(s) for your use case.

2. Using Vue Components

You can import individual Vue components directly from the package:

import { fmxButton, fmxInput } from "@flitsmeister/design-system";

These are standard Vue 3 single-file components. Register and use them in your app as you would any other Vue component.

About the Design System

• Provides Flitsmeister design system colors, typography, buttons, icons, and input components.
• Design tokens are managed and exported from Figma, with automated scripts generating platform-specific outputs (CSS, iOS JSON, Android XML, etc.).
• See the /tokens/schema_exports/ directory for all available exports.

Automated Design Token Export Workflow

1. Source of Truth: All design tokens are exported from Figma as JSON and stored in tokens/schema_sourcefiles/.
2. Automated Exports: Run tokens/scripts/export-tokens.js to generate fully resolved, platform-specific files in tokens/schema_exports/{schema}/.
3. Schema Index & Documentation: The /schemas page in the dev site lists all schemas and export formats with download links.
4. Static File Serving: All schema sourcefiles and exports are served as static files for easy download and integration.
5. Best Practices: Never edit generated files by hand. Always update the Figma export and re-run the export script to propagate changes.