@flitsmeister/design-system 2.2.0 → 2.2.2

package/README.md

@@ -1,60 +1,66 @@
+
 # Flitsmeister Design System
 
-## Consuming the Design System CSS in Other Projects
+This project serves two main purposes:
 
-To use the design system's CSS in your project, import the bundled CSS file from the package:
+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.
 
-```js
-import '@flitsmeister/design-system/main.css';
-```
+---
 
-This will include all design tokens, Tailwind utilities, and custom styles. Ensure your build system supports PostCSS or standard CSS imports.
+## Consuming the Design System as a Library
 
-If you use a framework like Vue, React, or Next.js, you can add this import in your main entry file (e.g., `main.js`, `index.js`, or `_app.js`).
+### 1. Using Design Tokens (CSS)
 
----
-Contains support for Flitsmeister design system colors, typography, buttons, icons and input
 
+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`).
 
-## Automated Design Token Export Workflow
+**How to import CSS tokens:**
 
-This repo uses a robust, automated workflow to manage design tokens exported from Figma and generate platform-specific outputs (CSS, iOS JSON, Android XML, etc.) with full reference resolution.
+- Choose the appropriate CSS file for your schema (e.g., `fm-design-system.css`) and import it using the `themes/` alias:
 
-### 1. Source of Truth
+  ```js
+  import '@flitsmeister/design-system/themes/fm-design-system/fm-design-system.css';
+  ```
 
-- All design tokens are exported from Figma as JSON and stored in `tokens/schema_sourcefiles/`.
-- Each schema (e.g., `fm-design-system.json`, `safedrive.json`) is a complete, reference-rich token set.
+- 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.
 
-### 2. Automated Exports
 
-- The main export script is `tokens/scripts/export-tokens.js`.
-- This script:
-  - Loads all schemas from `tokens/schema_sourcefiles/`.
-  - Resolves all references (including cross-schema and nested references) using a global lookup.
-  - Outputs platform-specific files to `tokens/schema_exports/{schema}/`:
-    - CSS variables for Tailwind 4 and SCSS
-    - iOS JSON tokens
-    - Android XML tokens
+### 2. Using Vue Components
 
-- All exports are fully resolved and ready for direct use in their respective platforms.
+You can import individual Vue components directly from the package:
 
-### 3. Schema Index & Documentation
+```js
+import { fmxButton, fmxInput } from "@flitsmeister/design-system";
+```
 
-- A build-time script (`tokens/scripts/generate-schemas-data.js`) scans all available schemas and their exports.
-- It generates `web/static/schemas.data.json`, which powers the `/schemas` page in the app.
-- This page lists all schemas, their source JSON, and all available export formats with direct download links.
+These are standard Vue 3 single-file components. Register and use them in your app as you would any other Vue component.
 
-### 4. Static File Serving
+### 3. Using Icons
 
-- Both schema sourcefiles and exports are served as static files at:
-  - `/tokens/schema_sourcefiles/{schema}.json`
-  - `/tokens/schema_exports/{schema}/{exportfile}`
+SVG icon files are available via the `icons/` export path. You can import any icon directly:
 
-- This works in both development and production, so you can always download the latest tokens and exports.
+```js
+import iconCar from '@flitsmeister/design-system/icons/filled/car.svg';
+```
+
+You can also reference icons by their path for use in `<img>`, `<svg>`, or as assets in your build system.
+
+> **Browse all available icons and their names at:** [https://fmdx.netlify.app/icons](https://fmdx.netlify.app/icons)
+
+---
+
+## About the Design System
 
-### 5. Best Practices
+- 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
 
-- Never edit generated files by hand.
-- Always update the Figma export and re-run the export script to propagate changes.
-- Use the `/schemas` page to browse, verify, and download all token files.
+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.
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@flitsmeister/design-system",
-    "version": "2.2.0",
+    "version": "2.2.2",
     "description": "Flitsmeister design system and demo site",
     "main": "index.js",
     "exports": {
@@ -8,7 +8,9 @@
         "./fmxInput": "./web/components/fmxInput.vue",
         "./fmxButton": "./web/components/fmxButton.vue",
         "./main.css": "./dist-lib/main.css",
-        "./themes/*": "./tokens/schema_exports/*"
+        "./themes/*": "./tokens/schema_exports/*",
+        "./components/*": "./web/components/*",
+        "./icons/*": "./web/icons/*"
     },
     "scripts": {
         "dev": "vite",