@synergy-design-system/mcp 1.6.2 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/metadata/checksum.txt +1 -1
  3. package/metadata/packages/assets/CHANGELOG.md +7 -0
  4. package/metadata/packages/components/components/syn-details/component.angular.ts +2 -0
  5. package/metadata/packages/components/components/syn-details/component.custom.styles.ts +1 -1
  6. package/metadata/packages/components/components/syn-details/component.react.ts +2 -0
  7. package/metadata/packages/components/components/syn-details/component.ts +4 -2
  8. package/metadata/packages/components/components/syn-details/component.vue +2 -0
  9. package/metadata/packages/components/components/syn-divider/component.custom.styles.ts +0 -3
  10. package/metadata/packages/components/components/syn-tag/component.custom.styles.ts +6 -5
  11. package/metadata/packages/components/static/CHANGELOG.md +7 -0
  12. package/metadata/packages/tokens/CHANGELOG.md +7 -0
  13. package/metadata/packages/tokens/dark.css +5 -5
  14. package/metadata/packages/tokens/index.js +10 -10
  15. package/metadata/packages/tokens/light.css +5 -5
  16. package/metadata/packages/tokens/sick2018_dark.css +5 -5
  17. package/metadata/packages/tokens/sick2018_light.css +5 -5
  18. package/metadata/packages/tokens/sick2025_dark.css +5 -5
  19. package/metadata/packages/tokens/sick2025_light.css +5 -5
  20. package/metadata/static/components/syn-accordion/docs.md +0 -24
  21. package/metadata/static/components/syn-details/docs.md +0 -10
  22. package/metadata/static/templates/appshell.md +0 -8
  23. package/metadata/static/templates/footer.md +0 -2
  24. package/metadata/static/templates/table.md +0 -1
  25. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ # [@synergy-design-system/mcp-v1.7.0](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.6.2...mcp/1.7.0) (2025-10-02)
2
+
3
+
4
+ ### Features
5
+
6
+ * ✨ CD update for syn-divider, syn-tag, syn-accordion, syn-details ([#1028](https://github.com/synergy-design-system/synergy-design-system/issues/1028)) ([b43a81a](https://github.com/synergy-design-system/synergy-design-system/commit/b43a81ab651da6b41668e481981ccbdcc1f07254))
7
+
1
8
  # [@synergy-design-system/mcp-v1.6.2](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.6.1...mcp/1.6.2) (2025-10-02)
2
9
 
3
10
 
package/metadata/checksum.txt CHANGED
@@ -1 +1 @@
1
- 18fcbda4eac37b507ca3eb507699801d
1
+ 744ff99772420e24dc148ca4f4c88ddf
package/metadata/packages/assets/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ # [@synergy-design-system/assets-v1.20.0](https://github.com/synergy-design-system/synergy-design-system/compare/assets/1.19.0...assets/1.20.0) (2025-10-02)
2
+
3
+
4
+ ### Features
5
+
6
+ * ✨ CD update for syn-divider, syn-tag, syn-accordion, syn-details ([#1028](https://github.com/synergy-design-system/synergy-design-system/issues/1028)) ([b43a81a](https://github.com/synergy-design-system/synergy-design-system/commit/b43a81ab651da6b41668e481981ccbdcc1f07254))
7
+
1
8
  # [@synergy-design-system/assets-v1.19.0](https://github.com/synergy-design-system/synergy-design-system/compare/assets/1.18.0...assets/1.19.0) (2025-09-12)
2
9
 
3
10
 
package/metadata/packages/components/components/syn-details/component.angular.ts CHANGED
@@ -46,6 +46,8 @@ import '@synergy-design-system/components/components/details/details.js';
46
46
  *
47
47
  * @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.
48
48
  * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.
49
+ *
50
+ * @cssproperty --syn-details-open-rotation - The rotation angle of the summary icon when the details is open.
49
51
  */
50
52
  @Component({
51
53
  selector: 'syn-details',
package/metadata/packages/components/components/syn-details/component.custom.styles.ts CHANGED
@@ -39,7 +39,7 @@ export default css`
39
39
  * we have to adjust the rotation of the icon when the details is open.
40
40
  */
41
41
  .details--open .details__summary-icon {
42
- rotate: -180deg;
42
+ rotate: var(--syn-details-open-rotation, 360deg);
43
43
  }
44
44
 
45
45
  /**
package/metadata/packages/components/components/syn-details/component.react.ts CHANGED
@@ -43,6 +43,8 @@ Component.define('syn-details');
43
43
  *
44
44
  * @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.
45
45
  * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.
46
+ *
47
+ * @cssproperty --syn-details-open-rotation - The rotation angle of the summary icon when the details is open.
46
48
  */
47
49
  export const SynDetails = createComponent({
48
50
  displayName: 'SynDetails',
package/metadata/packages/components/components/syn-details/component.ts CHANGED
@@ -49,6 +49,8 @@ import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator
49
49
  *
50
50
  * @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.
51
51
  * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.
52
+ *
53
+ * @cssproperty --syn-details-open-rotation - The rotation angle of the summary icon when the details is open.
52
54
  */
53
55
  @enableDefaultSettings('SynDetails')
54
56
  export default class SynDetails extends SynergyElement {
@@ -233,10 +235,10 @@ export default class SynDetails extends SynergyElement {
233
235
 
234
236
  <span part="summary-icon" class="details__summary-icon">
235
237
  <slot name="expand-icon">
236
- <syn-icon library="system" name="chevron-down"></syn-icon>
238
+ <syn-icon library="system" name="details-open"></syn-icon>
237
239
  </slot>
238
240
  <slot name="collapse-icon">
239
- <syn-icon library="system" name="chevron-down"></syn-icon>
241
+ <syn-icon library="system" name="details-close"></syn-icon>
240
242
  </slot>
241
243
  </span>
242
244
  </summary>
package/metadata/packages/components/components/syn-details/component.vue CHANGED
@@ -32,6 +32,8 @@
32
32
  *
33
33
  * @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.
34
34
  * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.
35
+ *
36
+ * @cssproperty --syn-details-open-rotation - The rotation angle of the summary icon when the details is open.
35
37
  */
36
38
  import { computed, ref } from 'vue';
37
39
  import '@synergy-design-system/components/components/details/details.js';
package/metadata/packages/components/components/syn-divider/component.custom.styles.ts CHANGED
@@ -2,7 +2,4 @@ import { css } from 'lit';
2
2
 
3
3
  export default css`
4
4
  /* Write custom CSS here */
5
- :host {
6
- --color: var(--syn-color-neutral-400);
7
- }
8
5
  `;
package/metadata/packages/components/components/syn-tag/component.custom.styles.ts CHANGED
@@ -10,14 +10,15 @@ export default css`
10
10
  }
11
11
 
12
12
  .tag {
13
- background-color: var(--syn-color-neutral-0);
14
- border-color: var(--syn-color-neutral-400);
13
+ background-color: var(--syn-panel-background-color);
14
+ border-color: var(--syn-panel-border-color);
15
15
  border-radius: var(--syn-border-radius-small);
16
+ border-width: var(--syn-border-width-small);
16
17
  color: var(--syn-input-color);
17
18
  }
18
19
 
19
20
  .tag .tag__remove {
20
- color: var(--syn-color-neutral-500);
21
+ color: var(--syn-input-icon-icon-clearable-color);
21
22
  }
22
23
 
23
24
 
@@ -67,11 +68,11 @@ export default css`
67
68
 
68
69
  /* Hover */
69
70
  .tag.tag--removable:hover {
70
- background-color: var(--syn-color-neutral-100);
71
+ background-color: var(--syn-interactive-background-color-hover, var(--syn-color-neutral-100));
71
72
  }
72
73
 
73
74
  .tag .tag__remove:hover {
74
- color: var(--syn-color-neutral-950);
75
+ color: var(--syn-input-icon-icon-clearable-color-hover);
75
76
  }
76
77
 
77
78
 
package/metadata/packages/components/static/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ # [@synergy-design-system/components-v2.46.0](https://github.com/synergy-design-system/synergy-design-system/compare/components/2.45.2...components/2.46.0) (2025-10-02)
2
+
3
+
4
+ ### Features
5
+
6
+ * ✨ CD update for syn-divider, syn-tag, syn-accordion, syn-details ([#1028](https://github.com/synergy-design-system/synergy-design-system/issues/1028)) ([b43a81a](https://github.com/synergy-design-system/synergy-design-system/commit/b43a81ab651da6b41668e481981ccbdcc1f07254))
7
+
1
8
  # [@synergy-design-system/components-v2.45.2](https://github.com/synergy-design-system/synergy-design-system/compare/components/2.45.1...components/2.45.2) (2025-10-02)
2
9
 
3
10
 
package/metadata/packages/tokens/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ # [@synergy-design-system/tokens-v2.27.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.26.1...tokens/2.27.0) (2025-10-02)
2
+
3
+
4
+ ### Features
5
+
6
+ * ✨ CD update for syn-divider, syn-tag, syn-accordion, syn-details ([#1028](https://github.com/synergy-design-system/synergy-design-system/issues/1028)) ([b43a81a](https://github.com/synergy-design-system/synergy-design-system/commit/b43a81ab651da6b41668e481981ccbdcc1f07254))
7
+
1
8
  # [@synergy-design-system/tokens-v2.26.1](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.26.0...tokens/2.26.1) (2025-09-30)
2
9
 
3
10
 
package/metadata/packages/tokens/dark.css CHANGED
@@ -90,13 +90,14 @@
90
90
  --syn-color-warning-800: #fcec8c;
91
91
  --syn-color-warning-900: #fdf7c4;
92
92
  --syn-color-warning-950: #fefce8;
93
+ --syn-details-open-rotation: 360deg;
93
94
  --syn-dimension-base: 4px; /** to be deprecated */
94
95
  --syn-duration-extra-fast: 50ms;
95
96
  --syn-duration-extra-slow: 1000ms;
96
97
  --syn-duration-fast: 150ms;
97
98
  --syn-duration-normal: 250ms;
98
99
  --syn-duration-slow: 500ms;
99
- --syn-focus-ring-border-radius: 0px;
100
+ --syn-focus-ring-border-radius: var(--syn-border-radius-none);
100
101
  --syn-focus-ring-color: var(--syn-color-primary-400);
101
102
  --syn-focus-ring-offset: var(--syn-spacing-3x-small);
102
103
  --syn-focus-ring-style: solid;
@@ -153,11 +154,9 @@
153
154
  --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
154
155
  --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
155
156
  --syn-input-icon-color: var(--syn-color-neutral-800);
156
- --syn-input-icon-color-focus: var(--syn-color-neutral-800);
157
157
  --syn-input-icon-color-hover: var(--syn-color-neutral-800);
158
- --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-500);
159
- --syn-input-icon-icon-clearable-color-focus: var(--syn-color-neutral-500);
160
- --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-500);
158
+ --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-600);
159
+ --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-800);
161
160
  --syn-input-label-color: var(--syn-color-neutral-950);
162
161
  --syn-input-label-font-size-large: var(--syn-font-size-large);
163
162
  --syn-input-label-font-size-medium: var(--syn-font-size-medium);
@@ -180,6 +179,7 @@
180
179
  --syn-input-spacing-medium: var(--syn-spacing-medium);
181
180
  --syn-input-spacing-small: var(--syn-spacing-small);
182
181
  --syn-input-width: var(--syn-border-width-small);
182
+ --syn-interactive-background-color-hover: var(--syn-color-neutral-100);
183
183
  --syn-interactive-emphasis-color: var(--syn-color-primary-600);
184
184
  --syn-interactive-emphasis-color-active: var(--syn-color-primary-950);
185
185
  --syn-interactive-emphasis-color-hover: var(--syn-color-primary-900);
package/metadata/packages/tokens/index.js CHANGED
@@ -418,6 +418,11 @@ export const SynColorWarning900 = 'var(--syn-color-warning-900)';
418
418
  */
419
419
  export const SynColorWarning950 = 'var(--syn-color-warning-950)';
420
420
 
421
+ /**
422
+ * @type {string}
423
+ */
424
+ export const SynDetailsOpenRotation = 'var(--syn-details-open-rotation)';
425
+
421
426
  /**
422
427
  * @type {string}
423
428
  */
@@ -733,11 +738,6 @@ export const SynInputHelpTextFontSizeSmall = 'var(--syn-input-help-text-font-siz
733
738
  */
734
739
  export const SynInputIconColor = 'var(--syn-input-icon-color)';
735
740
 
736
- /**
737
- * @type {string}
738
- */
739
- export const SynInputIconColorFocus = 'var(--syn-input-icon-color-focus)';
740
-
741
741
  /**
742
742
  * @type {string}
743
743
  */
@@ -748,11 +748,6 @@ export const SynInputIconColorHover = 'var(--syn-input-icon-color-hover)';
748
748
  */
749
749
  export const SynInputIconIconClearableColor = 'var(--syn-input-icon-icon-clearable-color)';
750
750
 
751
- /**
752
- * @type {string}
753
- */
754
- export const SynInputIconIconClearableColorFocus = 'var(--syn-input-icon-icon-clearable-color-focus)';
755
-
756
751
  /**
757
752
  * @type {string}
758
753
  */
@@ -868,6 +863,11 @@ export const SynInputSpacingSmall = 'var(--syn-input-spacing-small)';
868
863
  */
869
864
  export const SynInputWidth = 'var(--syn-input-width)';
870
865
 
866
+ /**
867
+ * @type {string}
868
+ */
869
+ export const SynInteractiveBackgroundColorHover = 'var(--syn-interactive-background-color-hover)';
870
+
871
871
  /**
872
872
  * @type {string}
873
873
  */
package/metadata/packages/tokens/light.css CHANGED
@@ -90,13 +90,14 @@
90
90
  --syn-color-warning-800: #834b10;
91
91
  --syn-color-warning-900: #6f3e14;
92
92
  --syn-color-warning-950: #411f07;
93
+ --syn-details-open-rotation: 360deg;
93
94
  --syn-dimension-base: 4px; /** to be deprecated */
94
95
  --syn-duration-extra-fast: 50ms;
95
96
  --syn-duration-extra-slow: 1000ms;
96
97
  --syn-duration-fast: 150ms;
97
98
  --syn-duration-normal: 250ms;
98
99
  --syn-duration-slow: 500ms;
99
- --syn-focus-ring-border-radius: 0px;
100
+ --syn-focus-ring-border-radius: var(--syn-border-radius-none);
100
101
  --syn-focus-ring-color: var(--syn-color-primary-400);
101
102
  --syn-focus-ring-offset: var(--syn-spacing-3x-small);
102
103
  --syn-focus-ring-style: solid;
@@ -153,11 +154,9 @@
153
154
  --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
154
155
  --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
155
156
  --syn-input-icon-color: var(--syn-color-neutral-800);
156
- --syn-input-icon-color-focus: var(--syn-color-neutral-800);
157
157
  --syn-input-icon-color-hover: var(--syn-color-neutral-800);
158
- --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-500);
159
- --syn-input-icon-icon-clearable-color-focus: var(--syn-color-neutral-500);
160
- --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-500);
158
+ --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-600);
159
+ --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-800);
161
160
  --syn-input-label-color: var(--syn-color-neutral-950);
162
161
  --syn-input-label-font-size-large: var(--syn-font-size-large);
163
162
  --syn-input-label-font-size-medium: var(--syn-font-size-medium);
@@ -180,6 +179,7 @@
180
179
  --syn-input-spacing-medium: var(--syn-spacing-medium);
181
180
  --syn-input-spacing-small: var(--syn-spacing-small);
182
181
  --syn-input-width: var(--syn-border-width-small);
182
+ --syn-interactive-background-color-hover: var(--syn-color-neutral-100);
183
183
  --syn-interactive-emphasis-color: var(--syn-color-primary-600);
184
184
  --syn-interactive-emphasis-color-active: var(--syn-color-primary-950);
185
185
  --syn-interactive-emphasis-color-hover: var(--syn-color-primary-900);
package/metadata/packages/tokens/sick2018_dark.css CHANGED
@@ -90,13 +90,14 @@
90
90
  --syn-color-warning-800: #fcec8c;
91
91
  --syn-color-warning-900: #fdf7c4;
92
92
  --syn-color-warning-950: #fefce8;
93
+ --syn-details-open-rotation: 360deg;
93
94
  --syn-dimension-base: 4px; /** to be deprecated */
94
95
  --syn-duration-extra-fast: 50ms;
95
96
  --syn-duration-extra-slow: 1000ms;
96
97
  --syn-duration-fast: 150ms;
97
98
  --syn-duration-normal: 250ms;
98
99
  --syn-duration-slow: 500ms;
99
- --syn-focus-ring-border-radius: 0px;
100
+ --syn-focus-ring-border-radius: var(--syn-border-radius-none);
100
101
  --syn-focus-ring-color: var(--syn-color-primary-400);
101
102
  --syn-focus-ring-offset: var(--syn-spacing-3x-small);
102
103
  --syn-focus-ring-style: solid;
@@ -153,11 +154,9 @@
153
154
  --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
154
155
  --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
155
156
  --syn-input-icon-color: var(--syn-color-neutral-800);
156
- --syn-input-icon-color-focus: var(--syn-color-neutral-800);
157
157
  --syn-input-icon-color-hover: var(--syn-color-neutral-800);
158
- --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-500);
159
- --syn-input-icon-icon-clearable-color-focus: var(--syn-color-neutral-500);
160
- --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-500);
158
+ --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-600);
159
+ --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-800);
161
160
  --syn-input-label-color: var(--syn-color-neutral-950);
162
161
  --syn-input-label-font-size-large: var(--syn-font-size-large);
163
162
  --syn-input-label-font-size-medium: var(--syn-font-size-medium);
@@ -180,6 +179,7 @@
180
179
  --syn-input-spacing-medium: var(--syn-spacing-medium);
181
180
  --syn-input-spacing-small: var(--syn-spacing-small);
182
181
  --syn-input-width: var(--syn-border-width-small);
182
+ --syn-interactive-background-color-hover: var(--syn-color-neutral-100);
183
183
  --syn-interactive-emphasis-color: var(--syn-color-primary-600);
184
184
  --syn-interactive-emphasis-color-active: var(--syn-color-primary-950);
185
185
  --syn-interactive-emphasis-color-hover: var(--syn-color-primary-900);
package/metadata/packages/tokens/sick2018_light.css CHANGED
@@ -90,13 +90,14 @@
90
90
  --syn-color-warning-800: #834b10;
91
91
  --syn-color-warning-900: #6f3e14;
92
92
  --syn-color-warning-950: #411f07;
93
+ --syn-details-open-rotation: 360deg;
93
94
  --syn-dimension-base: 4px; /** to be deprecated */
94
95
  --syn-duration-extra-fast: 50ms;
95
96
  --syn-duration-extra-slow: 1000ms;
96
97
  --syn-duration-fast: 150ms;
97
98
  --syn-duration-normal: 250ms;
98
99
  --syn-duration-slow: 500ms;
99
- --syn-focus-ring-border-radius: 0px;
100
+ --syn-focus-ring-border-radius: var(--syn-border-radius-none);
100
101
  --syn-focus-ring-color: var(--syn-color-primary-400);
101
102
  --syn-focus-ring-offset: var(--syn-spacing-3x-small);
102
103
  --syn-focus-ring-style: solid;
@@ -153,11 +154,9 @@
153
154
  --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
154
155
  --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
155
156
  --syn-input-icon-color: var(--syn-color-neutral-800);
156
- --syn-input-icon-color-focus: var(--syn-color-neutral-800);
157
157
  --syn-input-icon-color-hover: var(--syn-color-neutral-800);
158
- --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-500);
159
- --syn-input-icon-icon-clearable-color-focus: var(--syn-color-neutral-500);
160
- --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-500);
158
+ --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-600);
159
+ --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-800);
161
160
  --syn-input-label-color: var(--syn-color-neutral-950);
162
161
  --syn-input-label-font-size-large: var(--syn-font-size-large);
163
162
  --syn-input-label-font-size-medium: var(--syn-font-size-medium);
@@ -180,6 +179,7 @@
180
179
  --syn-input-spacing-medium: var(--syn-spacing-medium);
181
180
  --syn-input-spacing-small: var(--syn-spacing-small);
182
181
  --syn-input-width: var(--syn-border-width-small);
182
+ --syn-interactive-background-color-hover: var(--syn-color-neutral-100);
183
183
  --syn-interactive-emphasis-color: var(--syn-color-primary-600);
184
184
  --syn-interactive-emphasis-color-active: var(--syn-color-primary-950);
185
185
  --syn-interactive-emphasis-color-hover: var(--syn-color-primary-900);
package/metadata/packages/tokens/sick2025_dark.css CHANGED
@@ -90,13 +90,14 @@
90
90
  --syn-color-warning-800: #ffe67c;
91
91
  --syn-color-warning-900: #fff5c6;
92
92
  --syn-color-warning-950: #fffbeb;
93
+ --syn-details-open-rotation: 0deg;
93
94
  --syn-dimension-base: 4px; /** to be deprecated */
94
95
  --syn-duration-extra-fast: 50ms;
95
96
  --syn-duration-extra-slow: 1000ms;
96
97
  --syn-duration-fast: 150ms;
97
98
  --syn-duration-normal: 250ms;
98
99
  --syn-duration-slow: 500ms;
99
- --syn-focus-ring-border-radius: 4px;
100
+ --syn-focus-ring-border-radius: var(--syn-border-radius-small);
100
101
  --syn-focus-ring-color: var(--syn-color-primary-500);
101
102
  --syn-focus-ring-offset: var(--syn-spacing-3x-small);
102
103
  --syn-focus-ring-style: solid;
@@ -153,11 +154,9 @@
153
154
  --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
154
155
  --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
155
156
  --syn-input-icon-color: var(--syn-color-neutral-1000);
156
- --syn-input-icon-color-focus: var(--syn-color-neutral-1000);
157
157
  --syn-input-icon-color-hover: var(--syn-color-neutral-1000);
158
158
  --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-600);
159
- --syn-input-icon-icon-clearable-color-focus: var(--syn-color-neutral-600);
160
- --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-600);
159
+ --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-800);
161
160
  --syn-input-label-color: var(--syn-color-neutral-1000);
162
161
  --syn-input-label-font-size-large: var(--syn-font-size-large);
163
162
  --syn-input-label-font-size-medium: var(--syn-font-size-medium);
@@ -180,6 +179,7 @@
180
179
  --syn-input-spacing-medium: var(--syn-spacing-medium);
181
180
  --syn-input-spacing-small: var(--syn-spacing-small);
182
181
  --syn-input-width: var(--syn-border-width-small);
182
+ --syn-interactive-background-color-hover: var(--syn-color-neutral-100);
183
183
  --syn-interactive-emphasis-color: var(--syn-color-primary-500);
184
184
  --syn-interactive-emphasis-color-active: var(--syn-color-neutral-1000);
185
185
  --syn-interactive-emphasis-color-hover: var(--syn-color-primary-900);
@@ -207,7 +207,7 @@
207
207
  --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
208
208
  --syn-panel-background-color: var(--syn-color-neutral-50);
209
209
  --syn-panel-border-color: var(--syn-color-neutral-300);
210
- --syn-panel-border-radius: var(--syn-border-radius-x-large);
210
+ --syn-panel-border-radius: var(--syn-border-radius-medium);
211
211
  --syn-panel-border-width: var(--syn-border-width-small);
212
212
  --syn-spacing-2x-large: 48px;
213
213
  --syn-spacing-2x-small: 4px;
package/metadata/packages/tokens/sick2025_light.css CHANGED
@@ -90,13 +90,14 @@
90
90
  --syn-color-warning-800: #89540a;
91
91
  --syn-color-warning-900: #74450f;
92
92
  --syn-color-warning-950: #442404;
93
+ --syn-details-open-rotation: 0deg;
93
94
  --syn-dimension-base: 4px; /** to be deprecated */
94
95
  --syn-duration-extra-fast: 50ms;
95
96
  --syn-duration-extra-slow: 1000ms;
96
97
  --syn-duration-fast: 150ms;
97
98
  --syn-duration-normal: 250ms;
98
99
  --syn-duration-slow: 500ms;
99
- --syn-focus-ring-border-radius: 4px;
100
+ --syn-focus-ring-border-radius: var(--syn-border-radius-small);
100
101
  --syn-focus-ring-color: var(--syn-color-primary-700);
101
102
  --syn-focus-ring-offset: var(--syn-spacing-3x-small);
102
103
  --syn-focus-ring-style: solid;
@@ -153,11 +154,9 @@
153
154
  --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
154
155
  --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
155
156
  --syn-input-icon-color: var(--syn-color-neutral-950);
156
- --syn-input-icon-color-focus: var(--syn-color-neutral-950);
157
157
  --syn-input-icon-color-hover: var(--syn-color-neutral-950);
158
158
  --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-500);
159
- --syn-input-icon-icon-clearable-color-focus: var(--syn-color-neutral-500);
160
- --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-500);
159
+ --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-700);
161
160
  --syn-input-label-color: var(--syn-color-neutral-950);
162
161
  --syn-input-label-font-size-large: var(--syn-font-size-large);
163
162
  --syn-input-label-font-size-medium: var(--syn-font-size-medium);
@@ -180,6 +179,7 @@
180
179
  --syn-input-spacing-medium: var(--syn-spacing-medium);
181
180
  --syn-input-spacing-small: var(--syn-spacing-small);
182
181
  --syn-input-width: var(--syn-border-width-small);
182
+ --syn-interactive-background-color-hover: #f8f7f6;
183
183
  --syn-interactive-emphasis-color: var(--syn-color-primary-700);
184
184
  --syn-interactive-emphasis-color-active: var(--syn-color-neutral-950);
185
185
  --syn-interactive-emphasis-color-hover: var(--syn-color-primary-900);
@@ -207,7 +207,7 @@
207
207
  --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
208
208
  --syn-panel-background-color: var(--syn-color-neutral-0);
209
209
  --syn-panel-border-color: #e6e1dc;
210
- --syn-panel-border-radius: var(--syn-border-radius-x-large);
210
+ --syn-panel-border-radius: var(--syn-border-radius-medium);
211
211
  --syn-panel-border-width: var(--syn-border-width-small);
212
212
  --syn-spacing-2x-large: 48px;
213
213
  --syn-spacing-2x-small: 4px;
package/metadata/static/components/syn-accordion/docs.md CHANGED
@@ -7,7 +7,6 @@
7
7
  style="
8
8
  margin: 0 0 var(--syn-spacing-x-small);
9
9
  font: var(--syn-body-small-bold);
10
- color: var(--syn-typography-color-text);
11
10
  "
12
11
  >
13
12
  Subheadline
@@ -21,7 +20,6 @@
21
20
  style="
22
21
  margin: 0 0 var(--syn-spacing-x-small);
23
22
  font: var(--syn-body-small-bold);
24
- color: var(--syn-typography-color-text);
25
23
  "
26
24
  >
27
25
  Subheadline
@@ -35,7 +33,6 @@
35
33
  style="
36
34
  margin: 0 0 var(--syn-spacing-x-small);
37
35
  font: var(--syn-body-small-bold);
38
- color: var(--syn-typography-color-text);
39
36
  "
40
37
  >
41
38
  Subheadline
@@ -60,7 +57,6 @@ Accordion is a group of syn-details to show a brief summary and expand to show a
60
57
  style="
61
58
  margin: 0 0 var(--syn-spacing-x-small);
62
59
  font: var(--syn-body-small-bold);
63
- color: var(--syn-typography-color-text);
64
60
  "
65
61
  >
66
62
  Subheadline
@@ -74,7 +70,6 @@ Accordion is a group of syn-details to show a brief summary and expand to show a
74
70
  style="
75
71
  margin: 0 0 var(--syn-spacing-x-small);
76
72
  font: var(--syn-body-small-bold);
77
- color: var(--syn-typography-color-text);
78
73
  "
79
74
  >
80
75
  Subheadline
@@ -88,7 +83,6 @@ Accordion is a group of syn-details to show a brief summary and expand to show a
88
83
  style="
89
84
  margin: 0 0 var(--syn-spacing-x-small);
90
85
  font: var(--syn-body-small-bold);
91
- color: var(--syn-typography-color-text);
92
86
  "
93
87
  >
94
88
  Subheadline
@@ -114,7 +108,6 @@ To give content more structure, you can use the property contained.
114
108
  style="
115
109
  margin: 0 0 var(--syn-spacing-x-small);
116
110
  font: var(--syn-body-small-bold);
117
- color: var(--syn-typography-color-text);
118
111
  "
119
112
  >
120
113
  Subheadline
@@ -129,7 +122,6 @@ To give content more structure, you can use the property contained.
129
122
  style="
130
123
  margin: 0 0 var(--syn-spacing-x-small);
131
124
  font: var(--syn-body-small-bold);
132
- color: var(--syn-typography-color-text);
133
125
  "
134
126
  >
135
127
  Subheadline
@@ -144,7 +136,6 @@ To give content more structure, you can use the property contained.
144
136
  style="
145
137
  margin: 0 0 var(--syn-spacing-x-small);
146
138
  font: var(--syn-body-small-bold);
147
- color: var(--syn-typography-color-text);
148
139
  "
149
140
  >
150
141
  Subheadline
@@ -169,7 +160,6 @@ Set the close-others property to true to ensure only one detail is open at a tim
169
160
  style="
170
161
  margin: 0 0 var(--syn-spacing-x-small);
171
162
  font: var(--syn-body-small-bold);
172
- color: var(--syn-typography-color-text);
173
163
  "
174
164
  >
175
165
  Subheadline
@@ -183,7 +173,6 @@ Set the close-others property to true to ensure only one detail is open at a tim
183
173
  style="
184
174
  margin: 0 0 var(--syn-spacing-x-small);
185
175
  font: var(--syn-body-small-bold);
186
- color: var(--syn-typography-color-text);
187
176
  "
188
177
  >
189
178
  Subheadline
@@ -197,7 +186,6 @@ Set the close-others property to true to ensure only one detail is open at a tim
197
186
  style="
198
187
  margin: 0 0 var(--syn-spacing-x-small);
199
188
  font: var(--syn-body-small-bold);
200
- color: var(--syn-typography-color-text);
201
189
  "
202
190
  >
203
191
  Subheadline
@@ -223,7 +211,6 @@ The focus event gives the user feedback that the detail has been focused by the
223
211
  style="
224
212
  margin: 0 0 var(--syn-spacing-x-small);
225
213
  font: var(--syn-body-small-bold);
226
- color: var(--syn-typography-color-text);
227
214
  "
228
215
  >
229
216
  Subheadline
@@ -237,7 +224,6 @@ The focus event gives the user feedback that the detail has been focused by the
237
224
  style="
238
225
  margin: 0 0 var(--syn-spacing-x-small);
239
226
  font: var(--syn-body-small-bold);
240
- color: var(--syn-typography-color-text);
241
227
  "
242
228
  >
243
229
  Subheadline
@@ -251,7 +237,6 @@ The focus event gives the user feedback that the detail has been focused by the
251
237
  style="
252
238
  margin: 0 0 var(--syn-spacing-x-small);
253
239
  font: var(--syn-body-small-bold);
254
- color: var(--syn-typography-color-text);
255
240
  "
256
241
  >
257
242
  Subheadline
@@ -277,7 +262,6 @@ Use the disable attribute to prevent the details from expanding.
277
262
  style="
278
263
  margin: 0 0 var(--syn-spacing-x-small);
279
264
  font: var(--syn-body-small-bold);
280
- color: var(--syn-typography-color-text);
281
265
  "
282
266
  >
283
267
  Subheadline
@@ -291,7 +275,6 @@ Use the disable attribute to prevent the details from expanding.
291
275
  style="
292
276
  margin: 0 0 var(--syn-spacing-x-small);
293
277
  font: var(--syn-body-small-bold);
294
- color: var(--syn-typography-color-text);
295
278
  "
296
279
  >
297
280
  Subheadline
@@ -305,7 +288,6 @@ Use the disable attribute to prevent the details from expanding.
305
288
  style="
306
289
  margin: 0 0 var(--syn-spacing-x-small);
307
290
  font: var(--syn-body-small-bold);
308
- color: var(--syn-typography-color-text);
309
291
  "
310
292
  >
311
293
  Subheadline
@@ -331,7 +313,6 @@ Use the size attribute to change a detail’s size. The size attribute should no
331
313
  style="
332
314
  margin: 0 0 var(--syn-spacing-x-small);
333
315
  font: var(--syn-body-small-bold);
334
- color: var(--syn-typography-color-text);
335
316
  "
336
317
  >
337
318
  Subheadline
@@ -346,7 +327,6 @@ Use the size attribute to change a detail’s size. The size attribute should no
346
327
  style="
347
328
  margin: 0 0 var(--syn-spacing-x-small);
348
329
  font: var(--syn-body-small-bold);
349
- color: var(--syn-typography-color-text);
350
330
  "
351
331
  >
352
332
  Subheadline
@@ -361,7 +341,6 @@ Use the size attribute to change a detail’s size. The size attribute should no
361
341
  style="
362
342
  margin: 0 0 var(--syn-spacing-x-small);
363
343
  font: var(--syn-body-small-bold);
364
- color: var(--syn-typography-color-text);
365
344
  "
366
345
  >
367
346
  Subheadline
@@ -379,7 +358,6 @@ Use the size attribute to change a detail’s size. The size attribute should no
379
358
  style="
380
359
  margin: 0 0 var(--syn-spacing-x-small);
381
360
  font: var(--syn-body-small-bold);
382
- color: var(--syn-typography-color-text);
383
361
  "
384
362
  >
385
363
  Subheadline
@@ -394,7 +372,6 @@ Use the size attribute to change a detail’s size. The size attribute should no
394
372
  style="
395
373
  margin: 0 0 var(--syn-spacing-x-small);
396
374
  font: var(--syn-body-small-bold);
397
- color: var(--syn-typography-color-text);
398
375
  "
399
376
  >
400
377
  Subheadline
@@ -409,7 +386,6 @@ Use the size attribute to change a detail’s size. The size attribute should no
409
386
  style="
410
387
  margin: 0 0 var(--syn-spacing-x-small);
411
388
  font: var(--syn-body-small-bold);
412
- color: var(--syn-typography-color-text);
413
389
  "
414
390
  >
415
391
  Subheadline
package/metadata/static/components/syn-details/docs.md CHANGED
@@ -6,7 +6,6 @@
6
6
  style="
7
7
  margin: 0 0 var(--syn-spacing-x-small);
8
8
  font: var(--syn-body-small-bold);
9
- color: var(--syn-typography-color-text);
10
9
  "
11
10
  >
12
11
  Subheadline
@@ -29,7 +28,6 @@ Details show a brief summary and expand to show additional content. If you want
29
28
  style="
30
29
  margin: 0 0 var(--syn-spacing-x-small);
31
30
  font: var(--syn-body-small-bold);
32
- color: var(--syn-typography-color-text);
33
31
  "
34
32
  >
35
33
  Subheadline
@@ -52,7 +50,6 @@ Details show a brief summary and expand to show additional content.
52
50
  style="
53
51
  margin: 0 0 var(--syn-spacing-x-small);
54
52
  font: var(--syn-body-small-bold);
55
- color: var(--syn-typography-color-text);
56
53
  "
57
54
  >
58
55
  Subheadline
@@ -75,7 +72,6 @@ To give content more structure, you can use the property contained.
75
72
  style="
76
73
  margin: 0 0 var(--syn-spacing-x-small);
77
74
  font: var(--syn-body-small-bold);
78
- color: var(--syn-typography-color-text);
79
75
  "
80
76
  >
81
77
  Subheadline
@@ -90,7 +86,6 @@ To give content more structure, you can use the property contained.
90
86
  style="
91
87
  margin: 0 0 var(--syn-spacing-x-small);
92
88
  font: var(--syn-body-small-bold);
93
- color: var(--syn-typography-color-text);
94
89
  "
95
90
  >
96
91
  Subheadline
@@ -114,7 +109,6 @@ The focus event gives the user feedback that the detail has been focused by the
114
109
  style="
115
110
  margin: 0 0 var(--syn-spacing-x-small);
116
111
  font: var(--syn-body-small-bold);
117
- color: var(--syn-typography-color-text);
118
112
  "
119
113
  >
120
114
  Subheadline
@@ -138,7 +132,6 @@ Use the disable attribute to prevent the details from expanding.
138
132
  style="
139
133
  margin: 0 0 var(--syn-spacing-x-small);
140
134
  font: var(--syn-body-small-bold);
141
- color: var(--syn-typography-color-text);
142
135
  "
143
136
  >
144
137
  Subheadline
@@ -162,7 +155,6 @@ Use the size attribute to change a detail’s size.
162
155
  style="
163
156
  margin: 0 0 var(--syn-spacing-x-small);
164
157
  font: var(--syn-body-small-bold);
165
- color: var(--syn-typography-color-text);
166
158
  "
167
159
  >
168
160
  Subheadline
@@ -178,7 +170,6 @@ Use the size attribute to change a detail’s size.
178
170
  style="
179
171
  margin: 0 0 var(--syn-spacing-x-small);
180
172
  font: var(--syn-body-small-bold);
181
- color: var(--syn-typography-color-text);
182
173
  "
183
174
  >
184
175
  Subheadline
@@ -208,7 +199,6 @@ Use the prefix Icon to prepend an icon to the details.
208
199
  style="
209
200
  margin: 0 0 var(--syn-spacing-x-small);
210
201
  font: var(--syn-body-small-bold);
211
- color: var(--syn-typography-color-text);
212
202
  "
213
203
  >
214
204
  Subheadline
package/metadata/static/templates/appshell.md CHANGED
@@ -135,7 +135,6 @@ The side navigation opens when the user clicks on the burger menu. As the side n
135
135
  }
136
136
 
137
137
  .copyright {
138
- color: var(--syn-typography-color-text);
139
138
  font: var(--syn-body-small-bold);
140
139
  margin: 0;
141
140
  }
@@ -400,7 +399,6 @@ The side navigation opens when the user clicks on the burger menu. As the side n
400
399
  }
401
400
 
402
401
  .copyright {
403
- color: var(--syn-typography-color-text);
404
402
  font: var(--syn-body-small-bold);
405
403
  margin: 0;
406
404
  }
@@ -697,7 +695,6 @@ The navigation opens when the user hovers over it. As the navigation opens, it o
697
695
  }
698
696
 
699
697
  .copyright {
700
- color: var(--syn-typography-color-text);
701
698
  font: var(--syn-body-small-bold);
702
699
  margin: 0;
703
700
  }
@@ -975,7 +972,6 @@ The navigation opens when the user touches it. As the side navigation opens, a t
975
972
  }
976
973
 
977
974
  .copyright {
978
- color: var(--syn-typography-color-text);
979
975
  font: var(--syn-body-small-bold);
980
976
  margin: 0;
981
977
  }
@@ -1237,7 +1233,6 @@ General BehaviourThe navigation maintains its compact width until the user click
1237
1233
  }
1238
1234
 
1239
1235
  .copyright {
1240
- color: var(--syn-typography-color-text);
1241
1236
  font: var(--syn-body-small-bold);
1242
1237
  margin: 0;
1243
1238
  }
@@ -1499,7 +1494,6 @@ General BehaviourThe navigation maintains its compact width until the user click
1499
1494
  }
1500
1495
 
1501
1496
  .copyright {
1502
- color: var(--syn-typography-color-text);
1503
1497
  font: var(--syn-body-small-bold);
1504
1498
  margin: 0;
1505
1499
  }
@@ -1719,7 +1713,6 @@ The top navigation can be combined with a light grey background.This variant is
1719
1713
  }
1720
1714
 
1721
1715
  .copyright {
1722
- color: var(--syn-typography-color-text);
1723
1716
  font: var(--syn-body-small-bold);
1724
1717
  margin: 0;
1725
1718
  }
@@ -1926,7 +1919,6 @@ Additionally the top navigation can be combined with a white background.
1926
1919
  }
1927
1920
 
1928
1921
  .copyright {
1929
- color: var(--syn-typography-color-text);
1930
1922
  font: var(--syn-body-small-bold);
1931
1923
  margin: 0;
1932
1924
  }
package/metadata/static/templates/footer.md CHANGED
@@ -17,7 +17,6 @@
17
17
  }
18
18
 
19
19
  .copyright {
20
- color: var(--syn-typography-color-text);
21
20
  font: var(--syn-body-small-bold);
22
21
  margin: 0;
23
22
  }
@@ -213,7 +212,6 @@
213
212
  }
214
213
 
215
214
  .copyright {
216
- color: var(--syn-typography-color-text);
217
215
  font: var(--syn-body-small-bold);
218
216
  margin: 0;
219
217
  }
package/metadata/static/templates/table.md CHANGED
@@ -1389,7 +1389,6 @@ property should be set to 'separate'. Otherwise the table will have some strange
1389
1389
  }
1390
1390
 
1391
1391
  .product-cell {
1392
- color: var(--syn-typography-color-text);
1393
1392
  display: flex;
1394
1393
  flex-direction: row;
1395
1394
  font: var(--syn-body-x-small-regular);
package/package.json CHANGED
@@ -11,7 +11,7 @@
11
11
  "globby": "^14.1.0",
12
12
  "serve-handler": "^6.1.6",
13
13
  "zod": "^3.25.67",
14
- "@synergy-design-system/assets": "1.19.0"
14
+ "@synergy-design-system/assets": "1.20.0"
15
15
  },
16
16
  "description": "MCP Server for the Synergy Design System",
17
17
  "devDependencies": {
@@ -33,11 +33,11 @@
33
33
  "semantic-release-monorepo": "7.0.5",
34
34
  "ts-jest": "^29.4.0",
35
35
  "typescript": "^5.8.3",
36
+ "@synergy-design-system/components": "2.46.0",
36
37
  "@synergy-design-system/docs": "0.1.0",
37
38
  "@synergy-design-system/eslint-config-syn": "^0.1.0",
38
- "@synergy-design-system/components": "2.45.2",
39
- "@synergy-design-system/styles": "1.8.0",
40
- "@synergy-design-system/tokens": "^2.26.1"
39
+ "@synergy-design-system/tokens": "^2.27.0",
40
+ "@synergy-design-system/styles": "1.8.0"
41
41
  },
42
42
  "exports": {
43
43
  ".": {
@@ -122,7 +122,7 @@
122
122
  "directory": "packages/mcp"
123
123
  },
124
124
  "type": "module",
125
- "version": "1.6.2",
125
+ "version": "1.7.0",
126
126
  "scripts": {
127
127
  "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
128
128
  "build:all": "pnpm run build && pnpm run build:storybook",