@synergy-design-system/mcp 1.31.0 → 1.32.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 1.32.0
+
+### Minor Changes
+
+- [#1099](https://github.com/synergy-design-system/synergy-design-system/pull/1099) [`fc1e550`](https://github.com/synergy-design-system/synergy-design-system/commit/fc1e550fb4aa28eabf0bef6b089993a1dd939ff2) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-12-04
+
+  feat: ✨ add sick intl to fonts (#1085)
+
+  Add an optimized variant of the `SICK Intl` font as a shared asset to the new `@synergy-design-system/fonts` package.
+  It also adds the fonts package to the Synergy MCP server.
+
 ## 1.31.0
 
 ### Minor Changes

package/dist/build/build.js

@@ -1,6 +1,7 @@
 import ora from 'ora';
 import { buildAssets } from './assets.js';
 import { buildComponents } from './components.js';
+import { buildFonts } from './fonts.js';
 import { buildFrameworkFiles } from './frameworks.js';
 import { buildStaticFiles } from './static.js';
 import { buildTokens } from './tokens.js';
@@ -14,6 +15,7 @@ const build = async () => {
     await buildAssets();
     await buildComponents();
     await buildFrameworkFiles();
+    await buildFonts();
     await buildTokens();
     await buildStyles();
     // Should be run last as we will copy files where we see fit and paths must exist

package/dist/build/fonts.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Sets up all wanted data from the fonts package and adds it to the static metadata.
+ */
+export declare const buildFonts: () => Promise<void>;

package/dist/build/fonts.js

@@ -0,0 +1,49 @@
+import { existsSync } from 'node:fs';
+import { copyFile } from 'node:fs/promises';
+import { basename, join } from 'node:path';
+import { rimraf } from 'rimraf';
+import ora from 'ora';
+import { createPath, fontsPath, getAbsolutePath, } from '../utilities/index.js';
+/**
+ * List of relative paths to files that should be copied to the static metadata directory.
+ */
+const staticFilesToCopy = [
+    'README.md',
+    'CHANGELOG.md',
+    'package.json',
+].map(file => ([
+    getAbsolutePath(`../../../../packages/fonts/${file}`),
+    join(fontsPath, ''),
+]));
+/**
+ * Sets up all wanted data from the fonts package and adds it to the static metadata.
+ */
+export const buildFonts = async () => {
+    const spinner = ora({
+        prefixText: 'Fonts:',
+        text: 'Generating static metadata...',
+    }).start();
+    try {
+        spinner.text = 'Cleaning up old metadata...';
+        await rimraf(fontsPath);
+        spinner.succeed('Old metadata cleaned up.');
+        spinner.text = 'Creating new metadata directory...';
+        // Create the fonts directory if it doesn't exist
+        await createPath(fontsPath);
+        spinner.succeed('New metadata directory created.');
+        spinner.text = 'Copying files to metadata directory...';
+        const staticFiles = staticFilesToCopy
+            .filter(file => existsSync(file.at(0)))
+            .map(async ([staticFile, target]) => {
+            await createPath(target);
+            return copyFile(staticFile, join(target, basename(staticFile)));
+        });
+        await Promise.all(staticFiles);
+        spinner.succeed('Framework metadata generated successfully.');
+        spinner.succeed('Generation of metadata generated successfully.');
+    }
+    catch (error) {
+        spinner.fail(`Failed to generate fonts metadata. Error: ${error}`);
+        throw error; // Re-throw to handle it in the calling function
+    }
+};

package/dist/tools/font-info.d.ts

@@ -0,0 +1,6 @@
+import type { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+/**
+ * Simple tool to retrieve information about the fonts used in the Synergy Design System.
+ * @param server - The MCP server instance to register the tool on.
+ */
+export declare const fontInfoTool: (server: McpServer) => void;

package/dist/tools/font-info.js

@@ -0,0 +1,35 @@
+import { getFontsMetaData, getStructuredMetaData, } from '../utilities/index.js';
+/**
+ * Simple tool to retrieve information about the fonts used in the Synergy Design System.
+ * @param server - The MCP server instance to register the tool on.
+ */
+export const fontInfoTool = (server) => {
+    server.registerTool('font-info', {
+        description: 'Get the list of used fonts and their setup for the Synergy Design System.',
+        title: 'Font Information',
+    }, async () => {
+        const aiRules = await getStructuredMetaData('../../metadata/static/fonts');
+        const fontsData = await getFontsMetaData((fileName) => !fileName.toLowerCase().startsWith('changelog'));
+        return {
+            content: [
+                {
+                    text: 'Available fonts in the Synergy Design System:',
+                    type: 'text',
+                },
+                {
+                    text: JSON.stringify([
+                        {
+                            text: JSON.stringify(aiRules, null, 2),
+                            type: 'text',
+                        },
+                    ], null, 2),
+                    type: 'text',
+                },
+                {
+                    text: JSON.stringify(fontsData, null, 2),
+                    type: 'text',
+                },
+            ],
+        };
+    });
+};

package/dist/tools/index.d.ts

@@ -3,6 +3,7 @@ export * from './asset-list.js';
 export * from './component-info.js';
 export * from './component-list.js';
 export * from './davinci-migration.js';
+export * from './font-info.js';
 export * from './framework-info.js';
 export * from './migration-info.js';
 export * from './styles-info.js';

package/dist/tools/index.js

@@ -3,6 +3,7 @@ export * from './asset-list.js';
 export * from './component-info.js';
 export * from './component-list.js';
 export * from './davinci-migration.js';
+export * from './font-info.js';
 export * from './framework-info.js';
 export * from './migration-info.js';
 export * from './styles-info.js';

package/dist/utilities/config.d.ts

@@ -70,6 +70,10 @@ export declare const staticPath: string;
  * Path to the migration directory, relative to the MCP directory.
  */
 export declare const staticMigrationPath: string;
+/**
+ * Path to the fonts directory, relative to the MCP directory.
+ */
+export declare const fontsPath: string;
 /**
  * List of supported frameworks.
  */

package/dist/utilities/config.js

@@ -75,3 +75,7 @@ export const staticPath = join(currentDirname, '../../metadata/static');
  * Path to the migration directory, relative to the MCP directory.
  */
 export const staticMigrationPath = join(currentDirname, '../../metadata/static/migration');
+/**
+ * Path to the fonts directory, relative to the MCP directory.
+ */
+export const fontsPath = join(currentDirname, '../../metadata/packages/fonts');

package/dist/utilities/fonts.d.ts

@@ -0,0 +1,2 @@
+import { type Filter } from './metadata.js';
+export declare const getFontsMetaData: (filter?: Filter) => Promise<(import("./metadata.js").MetadataFile | null)[]>;

package/dist/utilities/fonts.js

@@ -0,0 +1,3 @@
+import { fontsPath, } from './config.js';
+import { getStructuredMetaData, } from './metadata.js';
+export const getFontsMetaData = async (filter) => getStructuredMetaData(fontsPath, filter);

package/dist/utilities/index.d.ts

@@ -3,6 +3,7 @@ export * from './checksum.js';
 export * from './components.js';
 export * from './config.js';
 export * from './file.js';
+export * from './fonts.js';
 export * from './migration.js';
 export * from './metadata.js';
 export * from './stdio.js';

package/dist/utilities/index.js

@@ -3,6 +3,7 @@ export * from './checksum.js';
 export * from './components.js';
 export * from './config.js';
 export * from './file.js';
+export * from './fonts.js';
 export * from './migration.js';
 export * from './metadata.js';
 export * from './stdio.js';

package/metadata/checksum.txt

@@ -1 +1 @@
-f84502dc39564645a0c772c6f75681ea
+b0cfd690fcc6a6634862f98820c5fb8c

package/metadata/packages/assets/README.md

@@ -18,7 +18,9 @@ npm install --save @synergy-design-system/assets
 
 ### Usage
 
-All assets are provided as svg's.
+#### Images
+
+All images are provided as svg's.
 
 The recommended way of using the icons is using the [<syn-icon> Synergy component](https://synergy-design-system.github.io/?path=/docs/components-syn-icon--docs). Here you will also get more information about how setting up the assets package on bundlers like vite.
 
@@ -26,7 +28,7 @@ The recommended way of using the icons is using the [<syn-icon> Synergy componen
 <syn-icon name="warning"></syn-icon>
 ```
 
-But the assets could also be used like following:
+Images could also be used directly:
 
 ```html
 <img src="assets/icons/warning.svg" />

package/metadata/packages/components/migration/migration-synergy-v3.md

@@ -1,24 +1,181 @@
-# Migration to Synergy 3.0
+# Synergy 3.0 Migration Guide
 
-This document outlines the changes and migration steps required to upgrade from Synergy 2.x to the new Synergy 3.0.
+> ⚠️ **Migration in progress:** Some features may not be fully implemented yet. See the [GitHub migration board](https://github.com/orgs/synergy-design-system/projects/2/views/37) for updates.
 
-> Please note that this migration is still in progress, and some features may not be fully implemented yet. We recommend reviewing the [GitHub repository](https://github.com/orgs/synergy-design-system/projects/2/views/37) for the latest updates.
+> It is currently not advised to use the new version in production, as we are still finalizing the migration process.
+> However, you can start preparing your codebase for the upcoming changes.
 
-## Roadmap
+---
 
-We are currently working on the migration to Synergy 3.0, which includes significant updates to the brand appearance, fonts and icon library.
-This migration will ensure that your application remains up-to-date with the latest design standards and functionality improvements.
+## Migration Checklist: Quick Overview
 
-It is currently not advised to use the new version in production, as we are still finalizing the migration process.
-However, you can start preparing your codebase for the upcoming changes.
+- [ ] Update Synergy packages to the latest version
+- [ ] Call `setSystemIconLibrary('sick2025')` before rendering components
+- [ ] Copy new icons to `/assets/icons/`
+- [ ] Import new CSS themes (`sick2025_light.css`, `sick2025_dark.css`)
+- [ ] Update theme switching logic to use new class names
+- [ ] Add SICK Intl font (via `@synergy-design-system/fonts`, CDN, or brand portal)
 
-A roadmap and current status of the migration can be found in our [GitHub repository](https://github.com/orgs/synergy-design-system/projects/2/views/37).
+---
 
-## Breaking Changes
+## Release Highlights: Synergy 3.0
 
-### Icons
+- **Brand appearance:** Updated colors, roundings, and overall look
+- **Fonts:** New SICK Intl font replaces Open Sans
+- **Icon library:** New outline and filled icons, new naming
+- **CSS tokens/themes:** New theme files and class names
 
-#### System Icon Library
+---
+
+## Migration Steps: Detailed Guide
+
+### 1. Update Synergy packages
+
+Use your package manager to update all `@synergy-design-system/*` packages.
+Also make sure to install `@synergy-design-system/fonts` for the new `SICK Intl` font.
+
+---
+
+### 2. Set the system icon library
+
+Call `setSystemIconLibrary('sick2025')` before rendering any Synergy components.
+
+**Example:**
+
+```js
+import { setSystemIconLibrary } from "@synergy-design-system/components";
+setSystemIconLibrary("sick2025");
+```
+
+---
+
+### 3. Copy new icons to your build output
+
+Use your bundler (e.g., Vite) to copy icons from `@synergy-design-system/assets` to `/assets/icons/`.
+
+**Example (Vite):**
+
+```js
+viteStaticCopy({
+  targets: [
+    {
+      src: "node_modules/@synergy-design-system/assets/src/sick2025/outline/*",
+      dest: "./assets/icons/",
+    },
+    {
+      src: "node_modules/@synergy-design-system/assets/src/sick2025/fill/*",
+      dest: "./assets/icons/",
+    },
+  ],
+});
+```
+
+---
+
+### 4. Import new CSS themes
+
+Replace old theme imports with:
+
+```js
+import "@synergy-design-system/tokens/themes/sick2025_light.css";
+import "@synergy-design-system/tokens/themes/sick2025_dark.css";
+```
+
+---
+
+### 5. Update theme switching logic
+
+Use new class names: `syn-sick2025-light` and `syn-sick2025-dark`.
+
+**Example:**
+
+```js
+// Theme switcher
+const { body } = document;
+if (body.classList.contains("syn-sick2025-dark")) {
+  body.classList.remove("syn-sick2025-dark");
+  body.classList.add("syn-sick2025-light");
+} else {
+  body.classList.remove("syn-sick2025-light");
+  body.classList.add("syn-sick2025-dark");
+}
+```
+
+---
+
+### 6. Add the SICK Intl font
+
+Use one of the following options:
+
+**Synergy fonts package (recommended):**
+
+```javascript
+import "@synergy-design-system/fonts";
+```
+
+**SICK CDN:**
+
+```css
+@font-face {
+  font-display: swap;
+  font-family: "SICK Intl";
+  font-style: normal;
+  font-weight: 400;
+  src: url("https://www.sick.com/media/fonts/sickintl-v2/SICKIntl-Regular.woff2")
+    format("woff2");
+}
+@font-face {
+  font-display: swap;
+  font-family: "SICK Intl";
+  font-style: normal;
+  font-weight: 600;
+  src: url("https://www.sick.com/media/fonts/sickintl-v2/SICKIntl-Semibold.woff2")
+    format("woff2");
+}
+```
+
+**Brand portal:** Download and host the font yourself, then use a local path in `@font-face`.
+
+---
+
+## Migration: Breaking Changes & Details
+
+### Breaking Changes: Icons
+
+- **System icon library:** Synergy now ships two system icon libraries for compatibility. Use `setSystemIconLibrary` to switch to the new set.
+- **New SICK 2025 icons:** Outline and filled icons, new naming. Use `<syn-icon name="home">` and `<syn-icon name="home_fill">`.
+- **Migration utilities:** Use `setupIcons("sick2025")` for easy migration, or `migrateIconName` for custom setups.
+
+### Breaking Changes: Tokens & Themes
+
+- New theme files: `sick2025_light.css`, `sick2025_dark.css`
+- New theme class names: `.syn-sick2025-light`, `.syn-sick2025-dark`
+- Significant visual changes: colors, roundings, font
+
+### Breaking Changes: SICK Intl Fonts
+
+- New font: SICK Intl (Regular 400, Semi Bold 600)
+- Provided directly by Synergy via `@synergy-design-system/fonts`, CDN, or brand portal
+
+---
+
+## Migration: Troubleshooting
+
+- **Icons not showing?** Check asset paths and icon names.
+- **Fonts not loading?** Verify font-face URLs and file locations.
+- **Theme not switching?** Check class names and CSS imports.
+
+---
+
+## Migration: References & Further Reading
+
+- [Synergy Docs](https://synergy-design-system.github.io/)
+- [SICK Brand Portal](https://brand.sick.com/document/145#/basiselemente/typografie/sick-intl)
+- [GitHub migration board](https://github.com/orgs/synergy-design-system/projects/2/views/37)
+
+### Reference: Icons
+
+#### Reference: System Icon Library
 
 Some Synergy components depend on a set of icons that must always be available. To make sure those components display correctly, even if the `@synergy-design-system/assets` package is not installed or configured properly, these icons are baked into Synergies core directly.
 
@@ -41,7 +198,7 @@ import { setSystemIconLibrary } from "@synergy-design-system/components";
 setSystemIconLibrary("sick2025");
 ```
 
-#### New SICK 2025 icons
+#### Reference: New SICK 2025 Icons
 
 The new SICK 2025 theme comes with an updated icon library that includes both outline and filled versions of icons. These icons are available in the `@synergy-design-system/assets` package and can be used with the `<syn-icon>` or `<syn-icon-button>` component.
 
@@ -85,7 +242,7 @@ export default defineConfig({
 });
 ```
 
-#### Migrating to the new icon set without changing the icon names
+#### Reference: Migrating Icon Names
 
 Applications that are migrating from Synergy 2 may have used icons that have been renamed in the migration process.
 Those icons will **not** show up after the switch to the new icon library.
@@ -147,7 +304,7 @@ registerIconLibrary("default", customIconLibrary);
 setSystemIconLibrary("sick2025");
 ```
 
-### Tokens
+### Reference: Tokens & Themes
 
 Synergy 3.0 introduces new CSS theme files that implement the updated SICK brand appearance:
 
@@ -195,11 +352,11 @@ To use the new themes in your application:
    };
    ```
 
-### Fonts
+### Reference: SICK Intl Fonts
 
 The SICK 2025 theme introduces a new typeface called **SICK Intl** that replaces the previously used Open Sans font. When migrating to Synergy 3.0 with the SICK 2025 theme, you'll need to ensure this font is properly loaded in your application.
 
-> **Important**: Synergy does **not provide** the SICK Intl font directly. You need to include it in your own project.
+> **Important**: The SICK Intl font is now provided via the dedicated `@synergy-design-system/fonts` package for easy integration.
 
 #### Font Requirements
 
@@ -212,32 +369,35 @@ For detailed information about when and how to use the different font styles, re
 
 #### Usage
 
-You have several options to include the SICK Intl font in your project:
+You have several options to include the SICK Intl font in your project.
+Each of those has its own advantages.
 
-##### Option 1: Local Installation
+| Option            | Advantages                                                                         | Disadvantages                                                                                                                                                                                 |
+| :---------------- | :--------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Fonts Package     | Easy integration, works offline, updates under your control, automatic CSS imports | Requires npm package installation.                                                                                                                                                            |
+| CDN               | Fast delivery when online, automatic update via CDN                                | Only works for services that have online connection, font updates may break application layouts.                                                                                              |
+| Brand&nbsp;Portal | Installation from the official source                                              | File exports (other than the original TTF) from the official source are currently misaligned, leading to issues with vertical alignment, especially for components that support or use icons. |
 
-1. Download the `SICK Intl` font from the [SICK Brand Portal](https://brand.sick.com/document/145#/basiselemente/typografie/sick-intl)
-2. Extract the ZIP file to a location accessible by your project (e.g., a `public` folder)
-3. Add the following CSS to your project (replace `PUBLIC_PATH` with your actual path):
+> If you are not sure, we recommend you to use Option 1 as outlined below.
 
-```css
-@font-face {
-  font-display: swap;
-  font-family: "SICK Intl";
-  font-style: normal;
-  font-weight: 400;
-  src: url("/PUBLIC_PATH/SICKIntl/SICKIntl-Regular.ttf") format("truetype");
-}
+##### Option 1: Using @synergy-design-system/fonts (Recommended!)
 
-@font-face {
-  font-display: swap;
-  font-family: "SICK Intl";
-  font-style: normal;
-  font-weight: 600;
-  src: url("/PUBLIC_PATH/SICKIntl/SICKIntl-Semibold.ttf") format("truetype");
-}
+Synergy now provides the SICK Intl font via the dedicated `@synergy-design-system/fonts` package.
+
+**Installation:**
+
+```bash
+npm install @synergy-design-system/fonts
+```
+
+**Usage:**
+
+```javascript
+import "@synergy-design-system/fonts";
 ```
 
+This automatically imports all required font-face declarations and makes the SICK Intl font available in your application.
+
 ##### Option 2: Using the SICK CDN
 
 For the quickest setup, load the fonts directly from the SICK CDN:
@@ -249,11 +409,8 @@ For the quickest setup, load the fonts directly from the SICK CDN:
   font-family: "SICK Intl";
   font-style: normal;
   font-weight: 400;
-  src:
-    url("https://www.sick.com/media/fonts/sickintl-v1/regular/SICKIntl-Regular.woff2")
-      format("woff2"),
-    url("https://www.sick.com/media/fonts/sickintl-v1/regular/SICKIntl-Regular.ttf")
-      format("truetype");
+  src: url("https://www.sick.com/media/fonts/sickintl-v2/SICKIntl-Regular.woff2")
+    format("woff2");
 }
 
 /* Semi Bold */
@@ -262,11 +419,8 @@ For the quickest setup, load the fonts directly from the SICK CDN:
   font-family: "SICK Intl";
   font-style: normal;
   font-weight: 600;
-  src:
-    url("https://www.sick.com/media/fonts/sickintl-v1/semibold/SICKIntl-Semibold.woff2")
-      format("woff2"),
-    url("https://www.sick.com/media/fonts/sickintl-v1/semibold/SICKIntl-Semibold.ttf")
-      format("truetype");
+  src: url("https://www.sick.com/media/fonts/sickintl-v2/SICKIntl-Semibold.woff2")
+    format("woff2");
 }
 ```
 
@@ -275,13 +429,44 @@ For better performance, you can also preload the font:
 ```html
 <link
   rel="preload"
-  href="https://www.sick.com/media/fonts/sickintl-v1/regular/SICKIntl-Regular.woff2"
+  href="https://www.sick.com/media/fonts/sickintl-v2/SICKIntl-Regular.woff2"
+  as="font"
+  type="font/woff2"
+  crossorigin
+/>
+<link
+  rel="preload"
+  href="https://www.sick.com/media/fonts/sickintl-v2/SICKIntl-Semibold.woff2"
   as="font"
   type="font/woff2"
   crossorigin
 />
 ```
 
+##### Option 3: Local Installation from brand portal (not recommended!)
+
+1. Download the `SICK Intl` font from the [SICK Brand Portal](https://brand.sick.com/document/145#/basiselemente/typografie/sick-intl)
+2. Extract the ZIP file to a location accessible by your project (e.g., a `public` folder)
+3. Add the following CSS to your project (replace `PUBLIC_PATH` with your actual path):
+
+```css
+@font-face {
+  font-display: swap;
+  font-family: "SICK Intl";
+  font-style: normal;
+  font-weight: 400;
+  src: url("/PUBLIC_PATH/SICKIntl/SICKIntl-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "SICK Intl";
+  font-style: normal;
+  font-weight: 600;
+  src: url("/PUBLIC_PATH/SICKIntl/SICKIntl-Semibold.ttf") format("truetype");
+}
+```
+
 ## Migration Steps
 
 These steps are only needed when switching to the new Synergy 3.0 layout.
@@ -291,4 +476,4 @@ These steps are only needed when switching to the new Synergy 3.0 layout.
 3. Adjust your bundler to copy the new icons to your build output. This is necessary to ensure that the new icons are available in your application.
 4. **Update CSS theme imports** to use the new `sick2025_light.css` and `sick2025_dark.css` files instead of the legacy theme files.
 5. **Update theme class names** in your JavaScript theme switching logic to use `syn-sick2025-light` and `syn-sick2025-dark`.
-6. **Add the SICK Intl font** by either downloading it locally or using the SICK CDN. Add the required `@font-face` declarations for Regular (400) and Semi Bold (600) weights to ensure proper typography rendering.
+6. **Add the SICK Intl font** by either using the dedicated `@synergy-design-system/fonts` package (recommended), using the SICK CDN, or downloading it locally. The fonts package automatically provides all required font-face declarations for Regular (400) and Semi Bold (600) weights.

package/metadata/packages/fonts/CHANGELOG.md

@@ -0,0 +1,12 @@
+# Changelog
+
+## 1.0.0
+
+### Major Changes
+
+- [#1099](https://github.com/synergy-design-system/synergy-design-system/pull/1099) [`fc1e550`](https://github.com/synergy-design-system/synergy-design-system/commit/fc1e550fb4aa28eabf0bef6b089993a1dd939ff2) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-12-04
+
+  feat: ✨ add sick intl to fonts (#1085)
+
+  Add an optimized variant of the `SICK Intl` font as a shared asset to the new `@synergy-design-system/fonts` package.
+  It also adds the fonts package to the Synergy MCP server.

package/metadata/packages/fonts/README.md

@@ -0,0 +1,157 @@
+# @synergy-design-system/fonts
+
+This package provides the SICK Intl font family required for Synergy 3.0 and later versions. The font is distributed with pre-built CSS files for easy integration into any project.
+
+## Installation
+
+Install the fonts package as a dependency:
+
+```bash
+npm install --save @synergy-design-system/fonts
+```
+
+## Usage
+
+### Basic Usage
+
+Import the complete font family with all weights:
+
+```javascript
+// The default export will load SICK Intl automatically.
+import "@synergy-design-system/fonts";
+
+// You may also use a direct import instead.
+// Use this if your bundler does not understand JavaScript module syntax
+import "@synergy-design-system/fonts/src/sick-intl/font.css";
+```
+
+This will load both Regular (400) and Semi Bold (600) font weights with proper `@font-face` declarations.
+
+### CSS Import
+
+If you prefer CSS imports, you can use:
+
+```css
+@import "@synergy-design-system/fonts/src/sick-intl/font.css";
+```
+
+### Inline Base64 Version (Self-Contained)
+
+For applications that need **fully self-contained CSS without external font file dependencies**, use the automatically generated inline version:
+
+```javascript
+import "@synergy-design-system/fonts/sick-intl-inline.css";
+```
+
+This version includes the font files as base64-encoded data URIs directly in the CSS, eliminating the need for separate font file hosting. **Note:** This increases CSS file size but removes external dependencies.
+
+### Framework Examples
+
+#### Vite
+
+```javascript
+// main.tsx
+import "@synergy-design-system/fonts";
+```
+
+#### Angular
+
+```json
+// In angular.json
+"styles": [
+  "@synergy-design-system/fonts/src/sick-intl/font.css",
+]
+```
+
+### CSS Usage
+
+After importing the fonts, use the `SICK Intl` font family in your CSS:
+
+```css
+body {
+  font-family:
+    "SICK Intl",
+    -apple-system,
+    BlinkMacSystemFont,
+    sans-serif;
+}
+
+.heading {
+  font-family: "SICK Intl";
+  font-weight: 600; /* Semi Bold */
+}
+
+.body-text {
+  font-family: "SICK Intl";
+  font-weight: 400; /* Regular */
+}
+```
+
+## Available Font Weights
+
+- **400 (Regular):** Used for body text and standard content
+- **600 (Semi Bold):** Used for headings, emphasized text, and UI elements
+
+## File Structure
+
+```
+dist/
+├── sick-intl-inline.css     # Base64 inline version (git ignored)
+src/
+└── sick-intl/
+    ├── font.css                # Default font face definitions
+    ├── SICKIntl-Regular.woff2  # Regular font
+    └── SICKIntl-SemiBold.woff2 # Semibold font
+```
+
+## Browser Support
+
+The font files are provided in WOFF2 format, which is supported by:
+
+- Chrome 36+
+- Firefox 39+
+- Safari 12+
+- Edge 14+
+
+For older browser support, consider using the CDN version or hosting additional font formats.
+
+## CDN Alternative
+
+If you prefer not to bundle fonts with your application, you can load them from the SICK CDN:
+
+```css
+@font-face {
+  font-display: swap;
+  font-family: "SICK Intl";
+  font-style: normal;
+  font-weight: 400;
+  src: url("https://www.sick.com/media/fonts/sickintl-v2/SICKIntl-Regular.woff2")
+    format("woff2");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "SICK Intl";
+  font-style: normal;
+  font-weight: 600;
+  src: url("https://www.sick.com/media/fonts/sickintl-v2/SICKIntl-Semibold.woff2")
+    format("woff2");
+}
+```
+
+## Performance Considerations
+
+- **Standard version:** Loads font files separately, better for caching
+- **Inline version:** Self-contained but larger CSS file size
+- **CDN version:** Fastest initial load but requires network connectivity
+
+---
+
+## Development
+
+This package uses PostCSS to generate multiple font distribution formats:
+
+- Standard CSS with external font files
+- Base64 inline CSS for self-contained usage
+
+The inline version is automatically generated during build and includes the font files as data URIs.

package/metadata/packages/fonts/package.json

@@ -0,0 +1,72 @@
+{
+  "author": {
+    "name": "SICK Global UX Foundation",
+    "url": "https://www.sick.com"
+  },
+  "description": "Fonts for Synergy, the SICK Design System",
+  "devDependencies": {
+    "@synergy-design-system/eslint-config-syn": "workspace:^",
+    "@synergy-design-system/stylelint-config-syn": "workspace:^",
+    "eslint": "^8.57.1",
+    "ora": "^8.2.0",
+    "postcss": "^8.5.6",
+    "postcss-header": "^3.0.3",
+    "postcss-import": "^16.1.1",
+    "postcss-url": "^10.1.3",
+    "stylelint": "^16.24.0"
+  },
+  "exports": {
+    ".": {
+      "import": "./src/sick-intl/font.css",
+      "default": "./src/sick-intl/font.css"
+    },
+    "./sick-intl.css": {
+      "import": "./src/sick-intl/font.css",
+      "default": "./src/sick-intl/font.css"
+    },
+    "./sick-intl-inline.css": {
+      "import": "./dist/sick-intl-inline.css",
+      "default": "./dist/sick-intl-inline.css"
+    },
+    "./src/*": {
+      "import": "./src/*",
+      "default": "./src/*"
+    },
+    "./dist/*": {
+      "import": "./dist/*",
+      "default": "./dist/*"
+    },
+    "./package.json": {
+      "import": "./package.json",
+      "default": "./package.json"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "CHANGELOG.md",
+    "NOTICE"
+  ],
+  "homepage": "https://synergy-design-system.github.io",
+  "keywords": [
+    "SDS",
+    "SICK",
+    "Synergy Design System",
+    "SICK Fonts"
+  ],
+  "license": "MIT",
+  "name": "@synergy-design-system/fonts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/synergy-design-system/synergy-design-system.git",
+    "directory": "packages/fonts"
+  },
+  "scripts": {
+    "build": "node scripts/build.js",
+    "lint:css": "stylelint \"src/**/*.css\"",
+    "lint:js": "eslint .",
+    "lint": "pnpm run /^lint:.*/"
+  },
+  "type": "module",
+  "version": "1.0.0"
+}

package/metadata/static/fonts/index.md

@@ -0,0 +1,4 @@
+# Rules for chatbots and llms
+
+- Synergy Version 3 uses `SICK Intl` as its font, whereas older Versions use `Open Sans`.
+- Prefer the use of `@synergy-design-system/fonts` for setups

package/metadata/static/setup/prerequisites.md

@@ -2,27 +2,131 @@
 
 ## Fonts
 
-Depending on the used theme (either SICK 2018 or SICK 2025) the Synergy Design System makes use of a specific typeface:
+Synergy Design System uses these typefaces:
 
 | Theme     | Typeface    |
 | --------- | ----------- |
 | SICK 2018 | `Open Sans` |
 | SICK 2025 | `SICK Intl` |
 
-For the SICK 2025 theme there are some rules, how and when to use the different styles (like regular, semi-bold, bold, ...). For more information about this, have a look at the [SICK Brand Portal](https://brand.sick.com/document/145#/basiselemente/typografie/sick-intl).
+For SICK 2025, see [SICK Brand Portal](https://brand.sick.com/document/145#/basiselemente/typografie/sick-intl) for style usage (regular, semi-bold, etc).
 
-Because there are various ways of loading fonts, depending on used bundler, pre- and postprocessors and usage of a CDN, Synergy does **not provide** this font.
-You need to include it into your own project.
+---
 
-The following information may be helpful to get you started including your own copy of `Open Sans` or `SICK Intl` in your project for quicker bootstrapping:
+## SICK 2018 Theme (Open Sans)
 
-### Local Installation
+### Using `@fontsource` npm packages (Recommended)
 
-#### SICK 2018
+Install the `@fontsource/open-sans` package into your project:
+
+```bash
+npm install @fontsource/open-sans
+```
+
+#### Vite/Webpack
+
+```javascript
+import "@fontsource/open-sans/400.css";
+import "@fontsource/open-sans/400-italic.css";
+import "@fontsource/open-sans/600.css";
+import "@fontsource/open-sans/600-italic.css";
+import "@fontsource/open-sans/700.css";
+import "@fontsource/open-sans/700-italic.css";
+```
+
+#### Angular
+
+Add to your `angular.json` file:
+
+```json
+{
+  "projects": {
+    "project_name": {
+      "architect": {
+        "build": {
+          "options": {
+            "styles": [
+              "@fontsource/open-sans/400.css",
+              "@fontsource/open-sans/400-italic.css",
+              "@fontsource/open-sans/600.css",
+              "@fontsource/open-sans/600-italic.css",
+              "@fontsource/open-sans/700.css",
+              "@fontsource/open-sans/700-italic.css"
+            ]
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+### Using SICK CDN for Open Sans
+
+```css
+/* Regular */
+@font-face {
+  font-display: swap;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  src:
+    url("https://www.sick.com/media/fonts/opensans-v1/Regular/OpenSans-Regular.woff2")
+      format("woff2"),
+    url("https://www.sick.com/media/fonts/opensans-v1/Regular/OpenSans-Regular.woff")
+      format("woff"),
+    url("https://www.sick.com/media/fonts/opensans-v1/Regular/OpenSans-Regular.ttf")
+      format("truetype");
+}
+
+/* Semi Bold */
+@font-face {
+  font-display: swap;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  src:
+    url("https://www.sick.com/media/fonts/opensans-v1/SemiBold/OpenSans-SemiBold.woff2")
+      format("woff2"),
+    url("https://www.sick.com/media/fonts/opensans-v1/SemiBold/OpenSans-SemiBold.woff")
+      format("woff"),
+    url("https://www.sick.com/media/fonts/opensans-v1/SemiBold/OpenSans-SemiBold.ttf")
+      format("truetype");
+}
+
+/* Bold */
+@font-face {
+  font-display: swap;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  src:
+    url("https://www.sick.com/media/fonts/opensans-v1/Bold/OpenSans-Bold.woff2")
+      format("woff2"),
+    url("https://www.sick.com/media/fonts/opensans-v1/Bold/OpenSans-Bold.woff")
+      format("woff"),
+    url("https://www.sick.com/media/fonts/opensans-v1/Bold/OpenSans-Bold.ttf")
+      format("truetype");
+}
+```
+
+For better performance, add this preload to your HTML:
+
+```html
+<link
+  rel="preload"
+  href="https://www.sick.com/media/fonts/opensans-v1/Regular/OpenSans-Regular.woff2"
+  as="font"
+  type="font/woff2"
+  crossorigin
+/>
+```
+
+### Manual Installation
 
 1. Download the `Open Sans` font from the [SICK Brand Portal](https://brand.sick.com/document/49#/-/resources-1).
 2. Extract the ZIP file to a destination reachable by your project (e.g. a `public` folder).
-3. Include the font in your project by adding the following CSS to your project (where `PUBLIC_PATH` is the path to the folder containing the font files).
+3. Include the font in your project by adding the following CSS (where `PUBLIC_PATH` is the path to the folder containing the font files):
 
 ```css
 @font-face {
@@ -75,56 +179,34 @@ The following information may be helpful to get you started including your own c
 }
 ```
 
-#### SICK 2025
+---
 
-1. Download the `SICK Intl` font from the [SICK Brand Portal](https://brand.sick.com/document/145#/basiselemente/typografie/sick-intl).
-2. Extract the ZIP file to a destination reachable by your project (e.g. a `public` folder).
-3. Include the font in your project by adding the following CSS to your project (where `PUBLIC_PATH` is the path to the folder containing the font files).
+## SICK 2025 Theme (SICK Intl)
 
-```css
-@font-face {
-  font-display: swap;
-  font-family: "SICK Intl";
-  font-style: normal;
-  font-weight: 400;
-  src: url("/PUBLIC_PATH/SICKIntl/SICKIntl-Regular.ttf") format("truetype");
-}
+### Using @synergy-design-system/fonts (Recommended)
 
-@font-face {
-  font-display: swap;
-  font-family: "SICK Intl";
-  font-style: normal;
-  font-weight: 600;
-  src: url("/PUBLIC_PATH/SICKIntl/SICKIntl-Semibold.ttf") format("truetype");
-}
-```
-
-### Installing via local npm package (e.g. for vite or webpack based setups)
+Install the fonts package:
 
-#### SICK 2018
+```bash
+npm install @synergy-design-system/fonts
+```
 
-1. Install the `@fontsource/open-sans` package into your project.
-2. Include the font in your project by adding the following import statements to your project:
+#### Vite/Webpack
 
-```js
-import "@fontsource/open-sans/400.css";
-import "@fontsource/open-sans/400-italic.css";
-import "@fontsource/open-sans/600.css";
-import "@fontsource/open-sans/600-italic.css";
-import "@fontsource/open-sans/700.css";
-import "@fontsource/open-sans/700-italic.css";
+```javascript
+import "@synergy-design-system/fonts";
 ```
 
-#### SICK 2025
-
-There is no way to install the `SICK Intl` typeface via a npm package as it is not available.
+#### Angular
 
-### Installing via local npm package (angular)
+Import in your main styles file:
 
-#### SICK 2018
+```css
+/* styles.css */
+@import "@synergy-design-system/fonts";
+```
 
-1. Install the `@fontsource/open-sans` package into your project.
-2. Adjust your `angular.json` file to include the needed stylesheets (where project_name is the name of your project):
+Or add to your `angular.json` file:
 
 ```json
 {
@@ -133,14 +215,7 @@ There is no way to install the `SICK Intl` typeface via a npm package as it is n
       "architect": {
         "build": {
           "options": {
-            "styles": [
-              "@fontsource/open-sans/400.css",
-              "@fontsource/open-sans/400-italic.css",
-              "@fontsource/open-sans/600.css",
-              "@fontsource/open-sans/600-italic.css",
-              "@fontsource/open-sans/700.css",
-              "@fontsource/open-sans/700-italic.css"
-            ]
+            "styles": ["@synergy-design-system/fonts/src/sick-intl/font.css"]
           }
         }
       }
@@ -149,114 +224,96 @@ There is no way to install the `SICK Intl` typeface via a npm package as it is n
 }
 ```
 
-#### SICK 2025
-
-There is no way to install the `SICK Intl` typeface via a npm package as it is not available.
-
-### Using the SICK CDN
-
-This is the simplest default font behavior. The typefaces are loaded from the SICK CDN.
-
-#### SICK 2018
+### Using SICK CDN
 
 ```css
 /* Regular */
 @font-face {
   font-display: swap;
-  font-family: "Open Sans";
+  font-family: "SICK Intl";
   font-style: normal;
   font-weight: 400;
-  src:
-    url("https://www.sick.com/media/fonts/opensans-v1/Regular/OpenSans-Regular.woff2")
-      format("woff2"),
-    url("https://www.sick.com/media/fonts/opensans-v1/Regular/OpenSans-Regular.woff")
-      format("woff"),
-    url("https://www.sick.com/media/fonts/opensans-v1/Regular/OpenSans-Regular.ttf")
-      format("truetype");
+  src: url("https://www.sick.com/media/fonts/sickintl-v2/SICKIntl-Regular.woff2")
+    format("woff2");
 }
 
 /* Semi Bold */
 @font-face {
   font-display: swap;
-  font-family: "Open Sans";
+  font-family: "SICK Intl";
   font-style: normal;
   font-weight: 600;
-  src:
-    url("https://www.sick.com/media/fonts/opensans-v1/SemiBold/OpenSans-SemiBold.woff2")
-      format("woff2"),
-    url("https://www.sick.com/media/fonts/opensans-v1/SemiBold/OpenSans-SemiBold.woff")
-      format("woff"),
-    url("https://www.sick.com/media/fonts/opensans-v1/SemiBold/OpenSans-SemiBold.ttf")
-      format("truetype");
-}
-
-/* Bold */
-@font-face {
-  font-display: swap;
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 700;
-  src:
-    url("https://www.sick.com/media/fonts/opensans-v1/Bold/OpenSans-Bold.woff2")
-      format("woff2"),
-    url("https://www.sick.com/media/fonts/opensans-v1/Bold/OpenSans-Bold.woff")
-      format("woff"),
-    url("https://www.sick.com/media/fonts/opensans-v1/Bold/OpenSans-Bold.ttf")
-      format("truetype");
+  src: url("https://www.sick.com/media/fonts/sickintl-v2/SICKIntl-Semibold.woff2")
+    format("woff2");
 }
 ```
 
-For better performance, you may also add the following statement to your HTML:
+For better performance, add this preload to your HTML:
 
 ```html
 <link
   rel="preload"
-  href="https://www.sick.com/media/fonts/opensans-v1/Regular/OpenSans-Regular.woff2"
+  href="https://www.sick.com/media/fonts/sickintl-v2/SICKIntl-Regular.woff2"
+  as="font"
+  type="font/woff2"
+  crossorigin
+/>
+<link
+  rel="preload"
+  href="https://www.sick.com/media/fonts/sickintl-v2/SICKIntl-Semibold.woff2"
   as="font"
   type="font/woff2"
   crossorigin
 />
 ```
 
-#### SICK 2025
+### Manual Installation
+
+1. Install `@synergy-design-system/fonts`.
+2. Copy the font from `node_modules/@synergy-design-system/fonts/src/sick-intl` to a destination reachable by your project (e.g. a public folder).
+3. Include the font with custom CSS (where `PUBLIC_PATH` is the path to the folder containing the font files):
 
 ```css
-/* Regular */
 @font-face {
   font-display: swap;
-  font-family: "Open Sans";
+  font-family: "SICK Intl";
   font-style: normal;
   font-weight: 400;
-  src:
-    url("https://www.sick.com/media/fonts/sickintl-v1/regular/SICKIntl-Regular.woff2")
-      format("woff2"),
-    url("https://www.sick.com/media/fonts/sickintl-v1/regular/SICKIntl-Regular.ttf")
-      format("truetype");
+  src: url("/PUBLIC_PATH/sick-intl/SICKIntl-Regular.woff2") format("woff2");
 }
 
-/* Semi Bold */
 @font-face {
   font-display: swap;
-  font-family: "Open Sans";
+  font-family: "SICK Intl";
   font-style: normal;
   font-weight: 600;
-  src:
-    url("https://www.sick.com/media/fonts/sickintl-v1/semibold/SICKIntl-Semibold.woff2")
-      format("woff2"),
-    format("woff"),
-    url("https://www.sick.com/media/fonts/sickintl-v1/semibold/SICKIntl-Semibold.ttf")
-      format("truetype");
+  src: url("/PUBLIC_PATH/sick-intl/SICKIntl-Semibold.woff2") format("woff2");
 }
 ```
 
-For better performance, you may also add the following statement to your HTML:
+### Manual Installation (Angular)
 
-```html
-<link
-  rel="preload"
-  href="https://www.sick.com/media/fonts/sickintl-v1/regular/SICKIntl-Regular.woff2"
-  as="font"
-  type="font/woff2"
-  crossorigin
-/>
+1. Install the `@synergy-design-system/fonts` package.
+2. Configure your `angular.json` file to include the fonts:
+
+```json
+{
+  "projects": {
+    "project_name": {
+      "architect": {
+        "build": {
+          "options": {
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "./node_modules/@synergy-design-system/fonts/src/sick-intl",
+                "output": "/assets/fonts"
+              }
+            ]
+          }
+        }
+      }
+    }
+  }
+}
 ```

package/package.json

@@ -28,9 +28,10 @@
     "serve-handler": "^6.1.6",
     "ts-jest": "^29.4.0",
     "typescript": "^5.9.3",
-    "@synergy-design-system/docs": "0.1.0",
     "@synergy-design-system/components": "2.68.0",
+    "@synergy-design-system/docs": "0.1.0",
     "@synergy-design-system/eslint-config-syn": "^0.1.0",
+    "@synergy-design-system/fonts": "1.0.0",
     "@synergy-design-system/styles": "1.9.0",
     "@synergy-design-system/tokens": "^2.45.0"
   },
@@ -66,7 +67,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "1.31.0",
+  "version": "1.32.0",
   "scripts": {
     "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
     "build:all": "pnpm run build && pnpm run build:storybook",