@synergy-design-system/mcp 1.30.0 → 1.32.0

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/packages/tokens/dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.44.0
+ * @synergy-design-system/tokens version 2.45.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/metadata/packages/tokens/index.js

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.44.0
+ * @synergy-design-system/tokens version 2.45.0
  * SICK Global UX Foundation
  */
 

package/metadata/packages/tokens/light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.44.0
+ * @synergy-design-system/tokens version 2.45.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/metadata/packages/tokens/sick2018_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.44.0
+ * @synergy-design-system/tokens version 2.45.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/metadata/packages/tokens/sick2018_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.44.0
+ * @synergy-design-system/tokens version 2.45.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/metadata/packages/tokens/sick2025_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.44.0
+ * @synergy-design-system/tokens version 2.45.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/metadata/packages/tokens/sick2025_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.44.0
+ * @synergy-design-system/tokens version 2.45.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

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"
+              }
+            ]
+          }
+        }
+      }
+    }
+  }
+}
 ```