@synergy-design-system/mcp 1.31.0 → 1.33.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 1.33.0
+
+### Minor Changes
+
+- [#1095](https://github.com/synergy-design-system/synergy-design-system/pull/1095) [`f9f544f`](https://github.com/synergy-design-system/synergy-design-system/commit/f9f544feb2adb3edef95bd1b50a303440e0c8385) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-12-04
+
+  feat: ✨ Brand updates for `<syn-select>`, `<syn-option>` and `<syn-optgroup>` (#988)
+  feat: ✨ Brand updates for `<syn-combobox>` (#944)
+
+## 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
+bcccb716196fa09334ce6f5caa139721

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/components/syn-combobox/component.styles.ts

@@ -306,7 +306,7 @@ export default css`
 
   /* Change combobox border on hover */
   .combobox:not(.combobox--disabled):hover .combobox__inputs {
-    border-color: var(--syn-input-color-hover);
+    border-color: var(--syn-input-border-color-hover);
   }
 
   /* Prefix and Suffix */
@@ -353,18 +353,16 @@ export default css`
     font-size: var(--syn-font-size-2x-large);
   }
 
-
   .combobox__prefix,
   .combobox__suffix {
-    color: var(--syn-input-help-text-color);
+    color: var(--syn-input-icon-color);
   }
 
 
 
   /* Listbox */
   .combobox__listbox {
-    /* @todo: Should be --syn-border-radius-medium, which should be set to 0 */
-    border-radius: var(--syn-border-radius-none);
+    border-radius: var(--syn-input-border-radius-medium);
     box-shadow: var(--syn-shadow-medium);
   }
 

package/metadata/packages/components/components/syn-optgroup/component.styles.ts

@@ -14,7 +14,7 @@ export default css`
   .optgroup__label-container {
     align-items: center;
     box-sizing: border-box;
-    color: var(--syn-color-neutral-950);
+    color: var(--syn-input-color);
     display: flex;
     gap: var(--syn-spacing-small);
     min-height: var(--option-min-height, var(--syn-input-height-medium));
@@ -49,7 +49,7 @@ export default css`
 
   .optgroup__prefix,
   .optgroup__suffix {
-    color: var(--syn-color-neutral-800);
+    color: var(--syn-option-icon-color, var(--syn-color-neutral-800));
     font-size: var(--syn-spacing-large);
   }
 

package/metadata/packages/components/components/syn-option/component.custom.styles.ts

@@ -13,28 +13,54 @@ export default css`
    * See below for usage of these variables
    */
   .option {
+    /*
+     * #988: Brand2025 defines a small gap between options
+     * and rounded corners. We achieve that using an outline
+     * that simulates the gap using the menu background color.
+     */
+    --outline: calc(var(--syn-focus-ring-border-radius) * 1.5);
+
+    border-radius: calc(var(--outline) * 1.5);
     font-size: var(--option-font-size, var(--syn-font-size-medium));
-    
+
     /* Height is dependent on line-height of .option__label, which does not fit completely to layout */
     min-height: var(--option-min-height, var(--syn-input-height-medium));
-    padding: var(--option-padding, var(--syn-spacing-small) var(--syn-spacing-medium));
+    outline: var(--outline) solid var(--syn-panel-background-color);
+    outline-offset: calc(var(--outline) * -1 + 1px);
+    padding: var(--option-padding, var(--syn-spacing-small) var(--syn-spacing-medium));    
   }
 
   .option:not(.option--current) {
-    color: var(--syn-color-neutral-950);
+    color: var(--syn-option-color, var(--syn-typography-color-text));
+  }
+
+  .option--current,
+  .option--current.option--hover:not(.option--disabled) {
+    background-color: var(--syn-option-background-color-active, var(--syn-color-neutral-1000));
+    color: var(--syn-option-color-active, var(--syn-typography-color-text-inverted));
+  }
+
+  .option--hover:not(.option--current):not(.option--disabled) {
+    background-color: var(--syn-option-background-color-hover, var(--syn-color-neutral-1000));
+    color: var(--syn-option-color-hover, var(--syn-typography-color-text-inverted));
   }
 
   /** #429: Use token for opacity */
-  .option--disabled { 
+  .option--disabled {
     opacity: var(--syn-input-disabled-opacity);
   }
 
+  .option--current.option--disabled {
+    background-color: var(--syn-option-background-color-hover, var(--syn-color-neutral-1000));
+    color: var(--syn-option-color-hover, var(--syn-typography-color-text-inverted));
+  }
+
   .option__label {
     line-height: var(--syn-line-height-normal);
   }
 
   .option__check {
-    color: var(--syn-color-primary-600);
+    color: var(--syn-option-check-color, var(--syn-color-primary-600));
     font-size: var(--option-icon-size, var(--syn-spacing-large));
   }
 
@@ -44,7 +70,11 @@ export default css`
 
   /* Invert the check mark when keyboard navigation is used */
   .option--current .option__check {
-    color: var(--syn-color-neutral-0);
+    color: var(--syn-option-check-color-active, var(--syn-color-neutral-0));
+  }
+
+  .option--hover:not(.option--current) .option__check {
+    color: var(--syn-option-check-color-hover, var(--syn-color-neutral-0));
   }
 
   /* Use larger spacing between icons and content */
@@ -59,23 +89,24 @@ export default css`
   /* Set correct icon size when someone uses syn-icon in the slots */
   .option__prefix::slotted(syn-icon),
   .option__suffix::slotted(syn-icon) {
-    color: var(--syn-color-neutral-800);
+    color: var(--syn-option-icon-color, var(--syn-typography-color-text));
     font-size: var(--option-icon-size, var(--syn-spacing-large));
   }
 
+  .option--hover .option__prefix::slotted(syn-icon),
+  .option--hover .option__suffix::slotted(syn-icon) {
+    color: var(--syn-option-icon-color-hover, var(--syn-color-neutral-800));
+  }
+
   .option--current .option__prefix::slotted(syn-icon),
   .option--current .option__suffix::slotted(syn-icon) {
-    color: var(--syn-color-neutral-0);
+    color: var(--syn-option-icon-color-active, var(--syn-color-neutral-800));
   }
 
   /* This is needed for the highlight styling of the options in syn-combobox */
   .option__label::slotted(.syn-highlight-style) {
     background-color: transparent;
-    color: var(--syn-color-neutral-950);
+    color: unset;
     font: var(--syn-body-medium-bold);
   }
-
-  :host([aria-selected='true']) .option__label::slotted(.syn-highlight-style) {
-    color: var(--syn-color-neutral-0);
-  }
 `;

package/metadata/packages/components/components/syn-select/component.custom.styles.ts

@@ -59,7 +59,7 @@ export default css`
   /* Change select border on hover */
   /* stylelint-disable-next-line no-descending-specificity */
   .select:not(.select--disabled):hover .select__combobox {
-    border-color: var(--syn-input-color-hover);
+    border-color: var(--syn-input-border-color-hover);
   }
 
   /* Prefix and Suffix */
@@ -106,10 +106,9 @@ export default css`
     font-size: var(--syn-font-size-2x-large);
   }
 
-
   .select__prefix,
   .select__suffix {
-    color: var(--syn-input-help-text-color);
+    color: var(--syn-input-icon-color);
   }
 
   /* Multi Select */
@@ -131,8 +130,7 @@ export default css`
 
   /* Listbox */
   .select__listbox {
-    /* @todo: Should be --syn-border-radius-medium, which should be set to 0 */
-    border-radius: var(--syn-border-radius-none);
+    border-radius: var(--syn-input-border-radius-medium);
     box-shadow: var(--syn-shadow-medium);
   }