@synergy-design-system/mcp 1.31.0 → 1.33.0

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

@@ -29,10 +29,11 @@
     "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/components": "2.69.0",
     "@synergy-design-system/eslint-config-syn": "^0.1.0",
     "@synergy-design-system/styles": "1.9.0",
-    "@synergy-design-system/tokens": "^2.45.0"
+    "@synergy-design-system/tokens": "^2.45.0",
+    "@synergy-design-system/fonts": "1.0.0"
   },
   "exports": {
     ".": {
@@ -66,7 +67,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "1.31.0",
+  "version": "1.33.0",
   "scripts": {
     "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
     "build:all": "pnpm run build && pnpm run build:storybook",