@synergy-design-system/mcp 1.38.4 → 1.38.5

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 1.38.5
+
+### Patch Changes
+
+- [#1134](https://github.com/synergy-design-system/synergy-design-system/pull/1134) [`53bd655`](https://github.com/synergy-design-system/synergy-design-system/commit/53bd655f465b76c2aa7d57449750b99e8fcfb500) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-12-16
+
+  fix: 🐛 Adjust `<syn-option>` and `<syn-menu-item>` interactive background (#1127)
+
+  Minor adjustments for `<syn-option>` and `<syn-menu-item>` hover and focus states to better mimic the effects as detailed in Figma for the SICK 2025 themes.
+  Both components now use a combination of `background` and `border-radius` to show the `<syn-option>` with an inset highlight color, allowing to better match the wanted spacings.
+
 ## 1.38.4
 
 ### Patch Changes

package/metadata/checksum.txt

@@ -1 +1 @@
-6a2396efaec02a827d527a41ab32d3e0
+f3d1570f48a5e4ab32df16eeee906a50

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

@@ -4,28 +4,43 @@ export default css`
   :host {
     /* Custom override for hiding the checkmark in menus it is not needed */
     --display-checkmark: flex;
+
+    /**
+     * Default size settings for menu-item
+     * This prepares the custom sizes that we will add later on
+     * @see https://github.com/synergy-design-system/design/issues/277
+     */
+    --menuitem-inset-border-horizontal: var(--syn-spacing-2x-small);
+    --menuitem-inset-border-vertical: calc(var(--syn-spacing-x-small) - 1px);
+    --menuitem-min-height: var(--syn-input-height-medium);
+    --menuitem-padding: var(--syn-input-spacing-medium);
+    --menuitem-font-size: var(--syn-input-font-size-medium);
+    --menuitem-icon-size: var(--syn-spacing-large);
   }
 
   .menu-item {
+    align-items: center;
+
     /*
-     * #958: Brand2025 defines a small gap between menu items
-     * and rounded corners. We achieve that using an outline
+     * #1127: Brand2025 defines a small gap between options
+     * and rounded corners. We achieve that using an border
      * 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);
+    border: solid var(--syn-panel-background-color);
+
+    /* Border Radius needs to be increased to cover the outline */
+    border-radius: calc(var(--syn-focus-ring-border-radius) + var(--menuitem-inset-border-vertical));
+    border-width: var(--menuitem-inset-border-horizontal) var(--menuitem-inset-border-vertical);
     color: var(--syn-option-color, var(--syn-typography-color-text));
-    font-size: var(--syn-font-size-medium);
-    outline: var(--outline) solid var(--syn-panel-background-color);
-    outline-offset: calc(var(--outline) * -1 + 1px);
-    padding: var(--syn-spacing-small) var(--syn-spacing-medium);
+    font-size: var(--menuitem-font-size);
+
+    /* Height is dependent on line-height of .option__label, which does not fit completely to layout */
+    min-height: var(--menuitem-min-height, var(--syn-input-height-medium));
+    padding: 0 calc(var(--menuitem-padding) - var(--menuitem-inset-border-vertical));
   }
 
   :host(:focus-visible) .menu-item {
     background-color: var(--syn-option-background-color-active, var(--syn-color-neutral-1000));
-    outline: var(--outline) solid var(--syn-panel-background-color);
-    outline-offset: calc(var(--outline) * -1 + 1px);
   }
 
   /** #429: Use token for opacity */
@@ -146,7 +161,7 @@ export default css`
 
     color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-700));
     font-size: var(--syn-font-size-medium);
-    left: var(--syn-spacing-medium);
+    left: calc(var(--menuitem-padding) - var(--menuitem-inset-border-vertical));
   }
 
   /**

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

@@ -13,6 +13,8 @@ export default css`
 
   .optgroup__label-container {
     align-items: center;
+    border: solid transparent;
+    border-width: 0 var(--option-inset-border-vertical);
     box-sizing: border-box;
     color: var(--syn-input-color);
     display: flex;
@@ -26,7 +28,7 @@ export default css`
   .optgroup--has-prefix .optgroup__label-container,
   .optgroup--has-label .optgroup__label-container,
   .optgroup--has-suffix .optgroup__label-container {
-    padding: var(--option-padding, var(--syn-spacing-small) var(--syn-spacing-medium));
+    padding: 0 calc(var(--option-padding) - var(--option-inset-border-vertical));
   }
 
   /**

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

@@ -15,19 +15,24 @@ export default css`
   .option {
     /*
      * #988: Brand2025 defines a small gap between options
-     * and rounded corners. We achieve that using an outline
+     * and rounded corners. We achieve that using an border
      * that simulates the gap using the menu background color.
      */
-    --outline: calc(var(--syn-focus-ring-border-radius) * 1.5);
+    border: solid var(--syn-panel-background-color);
 
-    border-radius: calc(var(--outline) * 1.5);
+    /**
+     * Border Radius needs to be increased to cover the outline
+     * Note this also needs to take the following into account:
+     * - 2018 does not have a focus ring, so the border radius is as small as the border, essentially negating it to "0"
+     * - 2025 needs to adapt with another pixel to make it match the rounding of the focus ring
+     */
+    border-radius: calc(calc(var(--syn-focus-ring-border-radius) * 2) + var(--option-inset-border-vertical) - 1px);
+    border-width: var(--option-inset-border-horizontal) var(--option-inset-border-vertical);
     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));
-    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));    
+    padding: 0 calc(var(--option-padding) - var(--option-inset-border-vertical));
   }
 
   .option:not(.option--current) {

package/metadata/packages/components/static/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 2.74.4
+
+### Patch Changes
+
+- [#1134](https://github.com/synergy-design-system/synergy-design-system/pull/1134) [`53bd655`](https://github.com/synergy-design-system/synergy-design-system/commit/53bd655f465b76c2aa7d57449750b99e8fcfb500) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-12-16
+
+  fix: 🐛 Adjust `<syn-option>` and `<syn-menu-item>` interactive background (#1127)
+
+  Minor adjustments for `<syn-option>` and `<syn-menu-item>` hover and focus states to better mimic the effects as detailed in Figma for the SICK 2025 themes.
+  Both components now use a combination of `background` and `border-radius` to show the `<syn-option>` with an inset highlight color, allowing to better match the wanted spacings.
+
 ## 2.74.3
 
 ### Patch Changes

package/package.json

@@ -28,11 +28,11 @@
     "serve-handler": "^6.1.6",
     "ts-jest": "^29.4.0",
     "typescript": "^5.9.3",
-    "@synergy-design-system/components": "2.74.3",
-    "@synergy-design-system/eslint-config-syn": "^0.1.0",
     "@synergy-design-system/docs": "0.1.0",
     "@synergy-design-system/fonts": "1.0.1",
+    "@synergy-design-system/components": "2.74.4",
     "@synergy-design-system/styles": "1.9.0",
+    "@synergy-design-system/eslint-config-syn": "^0.1.0",
     "@synergy-design-system/tokens": "^2.46.0"
   },
   "exports": {
@@ -67,7 +67,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "1.38.4",
+  "version": "1.38.5",
   "scripts": {
     "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
     "build:all": "pnpm run build && pnpm run build:storybook",