@synergy-design-system/metadata 1.0.0 → 3.0.1

package/data/layers/full/setup/setup:components-package/docs/prerequisites.md

@@ -0,0 +1,319 @@
+# Prerequisites
+
+## Fonts
+
+Synergy Design System uses these typefaces:
+
+| Theme     | Typeface    |
+| --------- | ----------- |
+| SICK 2018 | `Open Sans` |
+| SICK 2025 | `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).
+
+---
+
+## SICK 2018 Theme (Open Sans)
+
+### Using `@fontsource` npm packages (Recommended)
+
+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 (where `PUBLIC_PATH` is the path to the folder containing the font files):
+
+```css
+@font-face {
+  font-display: swap;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  src: url("/PUBLIC_PATH/Regular/OpenSans-Regular.woff2") format("woff2");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "Open Sans";
+  font-style: italic;
+  font-weight: 400;
+  src: url("/PUBLIC_PATH/Italic/OpenSans-Italic.woff2") format("woff2");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  src: url("/PUBLIC_PATH/SemiBold/OpenSans-SemiBold.woff2") format("woff2");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "Open Sans";
+  font-style: italic;
+  font-weight: 600;
+  src: url("/PUBLIC_PATH/SemiBoldItalic/OpenSans-SemiBoldItalic.woff2")
+    format("woff2");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  src: url("/PUBLIC_PATH/Bold/OpenSans-Bold.woff2") format("woff2");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "Open Sans";
+  font-style: italic;
+  font-weight: 700;
+  src: url("/PUBLIC_PATH/BoldItalic/OpenSans-BoldItalic.woff2") format("woff2");
+}
+```
+
+---
+
+## SICK 2025 Theme (SICK Intl)
+
+### Using @synergy-design-system/fonts (Recommended)
+
+Install the fonts package:
+
+```bash
+npm install @synergy-design-system/fonts
+```
+
+#### Vite/Webpack
+
+```javascript
+import "@synergy-design-system/fonts";
+```
+
+#### Angular
+
+Import in your main styles file:
+
+```css
+/* styles.css */
+@import "@synergy-design-system/fonts";
+```
+
+Or add to your `angular.json` file:
+
+```json
+{
+  "projects": {
+    "project_name": {
+      "architect": {
+        "build": {
+          "options": {
+            "styles": ["@synergy-design-system/fonts/src/sick-intl/font.css"]
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+### Using SICK CDN
+
+```css
+/* Regular */
+@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");
+}
+
+/* Semi Bold */
+@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");
+}
+```
+
+For better performance, add this preload to your HTML:
+
+```html
+<link
+  rel="preload"
+  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
+/>
+```
+
+### 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
+@font-face {
+  font-display: swap;
+  font-family: "SICK Intl";
+  font-style: normal;
+  font-weight: 400;
+  src: url("/PUBLIC_PATH/sick-intl/SICKIntl-Regular.woff2") format("woff2");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "SICK Intl";
+  font-style: normal;
+  font-weight: 600;
+  src: url("/PUBLIC_PATH/sick-intl/SICKIntl-Semibold.woff2") format("woff2");
+}
+```
+
+### Manual Installation (Angular)
+
+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/data/layers/full/setup/setup:fonts-package/fonts/CHANGELOG.md

@@ -0,0 +1,65 @@
+# Changelog
+
+## 1.0.6
+
+### Patch Changes
+
+- [#1263](https://github.com/synergy-design-system/synergy-design-system/pull/1263) [`f422a1f`](https://github.com/synergy-design-system/synergy-design-system/commit/f422a1f5e7c8d8970b086d914dbba3a5b3bb8d0b) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-04-28
+
+  fix: 🐛 dependency updates ([#258](https://github.com/synergy-design-system/synergy-design-system/issues/258))
+
+## 1.0.5
+
+### Patch Changes
+
+- [#1246](https://github.com/synergy-design-system/synergy-design-system/pull/1246) [`5f0eb58`](https://github.com/synergy-design-system/synergy-design-system/commit/5f0eb58996be36571edf1764a7314f78bac96dd9) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-27
+
+  fix: 🐛 dependency updates (#258)
+
+## 1.0.4
+
+### Patch Changes
+
+- [#1223](https://github.com/synergy-design-system/synergy-design-system/pull/1223) [`60b2845`](https://github.com/synergy-design-system/synergy-design-system/commit/60b2845fc089c2508f7e4a2b068b359fad166288) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-09
+
+  fix: 🐛 dependency updates (#258)
+
+## 1.0.3
+
+### Patch Changes
+
+- [#1182](https://github.com/synergy-design-system/synergy-design-system/pull/1182) [`460f8c2`](https://github.com/synergy-design-system/synergy-design-system/commit/460f8c22dfdc305d3990ba0af4b4aefc451fa8ea) Thanks [@kirchsuSICKAG](https://github.com/kirchsuSICKAG)! - Released on: 2026-02-19
+
+  fix: 🐛 Dependency updates (#258)
+
+## 1.0.2
+
+### Patch Changes
+
+- [#1148](https://github.com/synergy-design-system/synergy-design-system/pull/1148) [`73b7011`](https://github.com/synergy-design-system/synergy-design-system/commit/73b70118ae21bc58c83cbfeb9e2e8447873803a6) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-01-08
+
+  fix: 🐛 Minor dependency updates (#258)
+
+## 1.0.1
+
+### Patch Changes
+
+- [#1137](https://github.com/synergy-design-system/synergy-design-system/pull/1137) [`f7c0662`](https://github.com/synergy-design-system/synergy-design-system/commit/f7c0662d80dacd3aae6f4bd8559aadc399025858) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-12-16
+
+  fix: 🐛 SICK Intl Semibold does not display correctly on Windows (#1124)
+
+  This release fixes an issue that only appears when using Windows 10 and 11.
+  The exported font used cleartype annotations which lead to broken renderings on certain font sizes.
+
+  > We are still in the process of optimizing `SICK Intl` and are actively working on a solution for current problems like blurry rendering.
+
+## 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/data/layers/full/setup/setup:fonts-package/fonts/README.md

@@ -0,0 +1,164 @@
+# @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.
+
+### Steps for updating SICK Intl
+
+When updating SICK Intl to the latest version, please make sure to:
+
+- Use the [Font Squirrel Webfont Generator](https://www.fontsquirrel.com/tools/webfont-generator)
+- Use the export settings in the `export-configs` folder of this package.

package/data/layers/full/setup/setup:fonts-package/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": "^9.39.4",
+    "ora": "^9.4.0",
+    "postcss": "^8.5.10",
+    "postcss-header": "^3.0.3",
+    "postcss-import": "^16.1.1",
+    "postcss-url": "^10.1.3",
+    "stylelint": "^17.9.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.6"
+}