@synergy-design-system/mcp 1.2.1 → 1.3.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 (17) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/metadata/checksum.txt +1 -1
  3. package/metadata/packages/components/components/syn-input/component.custom.styles.ts +3 -3
  4. package/metadata/packages/components/migration/migration-synergy-v3.md +88 -0
  5. package/metadata/packages/components/static/CHANGELOG.md +7 -0
  6. package/metadata/packages/tokens/CHANGELOG.md +7 -0
  7. package/metadata/packages/tokens/dark.css +6 -0
  8. package/metadata/packages/tokens/index.js +30 -0
  9. package/metadata/packages/tokens/light.css +6 -0
  10. package/metadata/packages/tokens/sick2018_dark.css +6 -0
  11. package/metadata/packages/tokens/sick2018_light.css +6 -0
  12. package/metadata/packages/tokens/sick2025_dark.css +34 -28
  13. package/metadata/packages/tokens/sick2025_light.css +27 -21
  14. package/metadata/static/components/syn-combobox/docs.md +9 -1
  15. package/metadata/static/components/syn-input/docs.md +3 -1
  16. package/metadata/static/setup/prerequisites.md +104 -13
  17. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ # [@synergy-design-system/mcp-v1.3.0](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.2.1...mcp/1.3.0) (2025-08-28)
2
+
3
+
4
+ ### Features
5
+
6
+ * ✨CD update for syn-input ([#1001](https://github.com/synergy-design-system/synergy-design-system/issues/1001)) ([52f42f8](https://github.com/synergy-design-system/synergy-design-system/commit/52f42f8d1f494c54492e54b6ddafc6693dcdb0bb))
7
+
1
8
  # [@synergy-design-system/mcp-v1.2.1](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.2.0...mcp/1.2.1) (2025-08-21)
2
9
 
3
10
 
@@ -7,6 +14,14 @@
7
14
 
8
15
  # Changelog
9
16
 
17
+ # [@synergy-design-system/mcp-v1.2.1](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.2.0...mcp/1.2.1) (2025-08-21)
18
+
19
+
20
+ ### Bug Fixes
21
+
22
+ * 🐛 Placeholder is clipped for syn-select multiple ([#992](https://github.com/synergy-design-system/synergy-design-system/issues/992)) ([973933e](https://github.com/synergy-design-system/synergy-design-system/commit/973933e477a2cba1611c2f73f77e4e79d755c8a1))
23
+
24
+
10
25
  # [@synergy-design-system/mcp-v1.2.0](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.1.0...mcp/1.2.0) (2025-08-19)
11
26
 
12
27
  ### Features
package/metadata/checksum.txt CHANGED
@@ -1 +1 @@
1
- 2020f706c051179afe10d645a03c27a4
1
+ 25650d66bb4477440556cdbe37c6229c
package/metadata/packages/components/components/syn-input/component.custom.styles.ts CHANGED
@@ -225,7 +225,7 @@ export default css`
225
225
  align-items: center;
226
226
  background: none;
227
227
  border: none;
228
- color: var(--syn-color-primary-600);
228
+ color: var(--syn-interactive-primary-color);
229
229
  cursor: pointer;
230
230
  display: flex;
231
231
  padding: var(--syn-spacing-x-small);
@@ -245,11 +245,11 @@ export default css`
245
245
  }
246
246
 
247
247
  .input__number-stepper-button:hover:not([disabled]) {
248
- color: var(--syn-color-primary-900)
248
+ color: var(--syn-interactive-primary-color-hover)
249
249
  }
250
250
 
251
251
  .input__number-stepper-button:active:not([disabled]) {
252
- color: var(--syn-color-primary-950)
252
+ color: var(--syn-interactive-primary-color-active)
253
253
  }
254
254
 
255
255
  .input__number-stepper-button[disabled] {
package/metadata/packages/components/migration/migration-synergy-v3.md CHANGED
@@ -133,6 +133,93 @@ To use the new themes in your application:
133
133
  };
134
134
  ```
135
135
 
136
+ ### Fonts
137
+
138
+ The SICK 2025 theme introduces a new typeface called **SICK Intl** that replaces the previously used Open Sans font. When migrating to Synergy 3.0 with the SICK 2025 theme, you'll need to ensure this font is properly loaded in your application.
139
+
140
+ > **Important**: Synergy does **not provide** the SICK Intl font directly. You need to include it in your own project.
141
+
142
+ #### Font Requirements
143
+
144
+ The SICK 2025 theme requires the following font weights:
145
+
146
+ - **Regular (400)**: Used for standard text content
147
+ - **Semi Bold (600)**: Used for emphasized text and headings
148
+
149
+ For detailed information about when and how to use the different font styles, refer to the [SICK Brand Portal](https://brand.sick.com/document/145#/basiselemente/typografie/sick-intl).
150
+
151
+ #### Usage
152
+
153
+ You have several options to include the SICK Intl font in your project:
154
+
155
+ ##### Option 1: Local Installation
156
+
157
+ 1. Download the `SICK Intl` font from the [SICK Brand Portal](https://brand.sick.com/document/145#/basiselemente/typografie/sick-intl)
158
+ 2. Extract the ZIP file to a location accessible by your project (e.g., a `public` folder)
159
+ 3. Add the following CSS to your project (replace `PUBLIC_PATH` with your actual path):
160
+
161
+ ```css
162
+ @font-face {
163
+ font-display: swap;
164
+ font-family: "SICK Intl";
165
+ font-style: normal;
166
+ font-weight: 400;
167
+ src: url("/PUBLIC_PATH/SICKIntl/SICKIntl-Regular.ttf") format("truetype");
168
+ }
169
+
170
+ @font-face {
171
+ font-display: swap;
172
+ font-family: "SICK Intl";
173
+ font-style: normal;
174
+ font-weight: 600;
175
+ src: url("/PUBLIC_PATH/SICKIntl/SICKIntl-Semibold.ttf") format("truetype");
176
+ }
177
+ ```
178
+
179
+ ##### Option 2: Using the SICK CDN
180
+
181
+ For the quickest setup, load the fonts directly from the SICK CDN:
182
+
183
+ ```css
184
+ /* Regular */
185
+ @font-face {
186
+ font-display: swap;
187
+ font-family: "SICK Intl";
188
+ font-style: normal;
189
+ font-weight: 400;
190
+ src:
191
+ url("https://www.sick.com/media/fonts/sickintl-v1/regular/SICKIntl-Regular.woff2")
192
+ format("woff2"),
193
+ url("https://www.sick.com/media/fonts/sickintl-v1/regular/SICKIntl-Regular.ttf")
194
+ format("truetype");
195
+ }
196
+
197
+ /* Semi Bold */
198
+ @font-face {
199
+ font-display: swap;
200
+ font-family: "SICK Intl";
201
+ font-style: normal;
202
+ font-weight: 600;
203
+ src:
204
+ url("https://www.sick.com/media/fonts/sickintl-v1/semibold/SICKIntl-Semibold.woff2")
205
+ format("woff2"),
206
+ url("https://www.sick.com/media/fonts/sickintl-v1/semibold/SICKIntl-Semibold.ttf")
207
+ format("truetype");
208
+ }
209
+ ```
210
+
211
+ For better performance, you can also preload the font:
212
+
213
+ ```html
214
+ <link
215
+ rel="preload"
216
+ href="https://www.sick.com/media/fonts/sickintl-v1/regular/SICKIntl-Regular.woff2"
217
+ as="font"
218
+ type="font/woff2"
219
+ crossorigin
220
+ />
221
+ ```
222
+
136
223
  ## Migration Steps
137
224
 
138
225
  These steps are only needed when switching to the new Synergy 3.0 layout.
@@ -142,3 +229,4 @@ These steps are only needed when switching to the new Synergy 3.0 layout.
142
229
  3. Adjust your bundler to copy the new icons to your build output. This is necessary to ensure that the new icons are available in your application.
143
230
  4. **Update CSS theme imports** to use the new `sick2025_light.css` and `sick2025_dark.css` files instead of the legacy theme files.
144
231
  5. **Update theme class names** in your JavaScript theme switching logic to use `syn-sick2025-light` and `syn-sick2025-dark`.
232
+ 6. **Add the SICK Intl font** by either downloading it locally or using the SICK CDN. Add the required `@font-face` declarations for Regular (400) and Semi Bold (600) weights to ensure proper typography rendering.
package/metadata/packages/components/static/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ # [@synergy-design-system/components-v2.41.0](https://github.com/synergy-design-system/synergy-design-system/compare/components/2.40.1...components/2.41.0) (2025-08-28)
2
+
3
+
4
+ ### Features
5
+
6
+ * ✨CD update for syn-input ([#1001](https://github.com/synergy-design-system/synergy-design-system/issues/1001)) ([52f42f8](https://github.com/synergy-design-system/synergy-design-system/commit/52f42f8d1f494c54492e54b6ddafc6693dcdb0bb))
7
+
1
8
  # [@synergy-design-system/components-v2.40.1](https://github.com/synergy-design-system/synergy-design-system/compare/components/2.40.0...components/2.40.1) (2025-08-21)
2
9
 
3
10
 
package/metadata/packages/tokens/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ # [@synergy-design-system/tokens-v2.24.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.23.0...tokens/2.24.0) (2025-08-28)
2
+
3
+
4
+ ### Features
5
+
6
+ * ✨CD update for syn-input ([#1001](https://github.com/synergy-design-system/synergy-design-system/issues/1001)) ([52f42f8](https://github.com/synergy-design-system/synergy-design-system/commit/52f42f8d1f494c54492e54b6ddafc6693dcdb0bb))
7
+
1
8
  # [@synergy-design-system/tokens-v2.23.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.22.0...tokens/2.23.0) (2025-08-19)
2
9
 
3
10
 
package/metadata/packages/tokens/dark.css CHANGED
@@ -179,6 +179,12 @@
179
179
  --syn-input-spacing-medium: var(--syn-spacing-medium);
180
180
  --syn-input-spacing-small: var(--syn-spacing-small);
181
181
  --syn-input-width: var(--syn-border-width-small);
182
+ --syn-interactive-primary-color: var(--syn-color-primary-600);
183
+ --syn-interactive-primary-color-active: var(--syn-color-neutral-950);
184
+ --syn-interactive-primary-color-hover: var(--syn-color-primary-900);
185
+ --syn-interactive-secondary-color: var(--syn-color-neutral-950);
186
+ --syn-interactive-secondary-color-active: var(--syn-color-primary-600);
187
+ --syn-interactive-secondary-color-hover: var(--syn-color-primary-600);
182
188
  --syn-letter-spacing-dense: -0.24px; /** Shoelace compatibility DO NOT USE */
183
189
  --syn-letter-spacing-denser: -0.48px; /** Shoelace compatibility DO NOT USE */
184
190
  --syn-letter-spacing-loose: 1.2px; /** Shoelace compatibility DO NOT USE */
package/metadata/packages/tokens/index.js CHANGED
@@ -863,6 +863,36 @@ export const SynInputSpacingSmall = 'var(--syn-input-spacing-small)';
863
863
  */
864
864
  export const SynInputWidth = 'var(--syn-input-width)';
865
865
 
866
+ /**
867
+ * @type {string}
868
+ */
869
+ export const SynInteractivePrimaryColor = 'var(--syn-interactive-primary-color)';
870
+
871
+ /**
872
+ * @type {string}
873
+ */
874
+ export const SynInteractivePrimaryColorActive = 'var(--syn-interactive-primary-color-active)';
875
+
876
+ /**
877
+ * @type {string}
878
+ */
879
+ export const SynInteractivePrimaryColorHover = 'var(--syn-interactive-primary-color-hover)';
880
+
881
+ /**
882
+ * @type {string}
883
+ */
884
+ export const SynInteractiveSecondaryColor = 'var(--syn-interactive-secondary-color)';
885
+
886
+ /**
887
+ * @type {string}
888
+ */
889
+ export const SynInteractiveSecondaryColorActive = 'var(--syn-interactive-secondary-color-active)';
890
+
891
+ /**
892
+ * @type {string}
893
+ */
894
+ export const SynInteractiveSecondaryColorHover = 'var(--syn-interactive-secondary-color-hover)';
895
+
866
896
  /**
867
897
  * @type {string}
868
898
  */
package/metadata/packages/tokens/light.css CHANGED
@@ -179,6 +179,12 @@
179
179
  --syn-input-spacing-medium: var(--syn-spacing-medium);
180
180
  --syn-input-spacing-small: var(--syn-spacing-small);
181
181
  --syn-input-width: var(--syn-border-width-small);
182
+ --syn-interactive-primary-color: var(--syn-color-primary-600);
183
+ --syn-interactive-primary-color-active: var(--syn-color-neutral-950);
184
+ --syn-interactive-primary-color-hover: var(--syn-color-primary-900);
185
+ --syn-interactive-secondary-color: var(--syn-color-neutral-950);
186
+ --syn-interactive-secondary-color-active: var(--syn-color-primary-600);
187
+ --syn-interactive-secondary-color-hover: var(--syn-color-primary-600);
182
188
  --syn-letter-spacing-dense: -0.24px; /** Shoelace compatibility DO NOT USE */
183
189
  --syn-letter-spacing-denser: -0.48px; /** Shoelace compatibility DO NOT USE */
184
190
  --syn-letter-spacing-loose: 1.2px; /** Shoelace compatibility DO NOT USE */
package/metadata/packages/tokens/sick2018_dark.css CHANGED
@@ -179,6 +179,12 @@
179
179
  --syn-input-spacing-medium: var(--syn-spacing-medium);
180
180
  --syn-input-spacing-small: var(--syn-spacing-small);
181
181
  --syn-input-width: var(--syn-border-width-small);
182
+ --syn-interactive-primary-color: var(--syn-color-primary-600);
183
+ --syn-interactive-primary-color-active: var(--syn-color-neutral-950);
184
+ --syn-interactive-primary-color-hover: var(--syn-color-primary-900);
185
+ --syn-interactive-secondary-color: var(--syn-color-neutral-950);
186
+ --syn-interactive-secondary-color-active: var(--syn-color-primary-600);
187
+ --syn-interactive-secondary-color-hover: var(--syn-color-primary-600);
182
188
  --syn-letter-spacing-dense: -0.24px; /** Shoelace compatibility DO NOT USE */
183
189
  --syn-letter-spacing-denser: -0.48px; /** Shoelace compatibility DO NOT USE */
184
190
  --syn-letter-spacing-loose: 1.2px; /** Shoelace compatibility DO NOT USE */
package/metadata/packages/tokens/sick2018_light.css CHANGED
@@ -179,6 +179,12 @@
179
179
  --syn-input-spacing-medium: var(--syn-spacing-medium);
180
180
  --syn-input-spacing-small: var(--syn-spacing-small);
181
181
  --syn-input-width: var(--syn-border-width-small);
182
+ --syn-interactive-primary-color: var(--syn-color-primary-600);
183
+ --syn-interactive-primary-color-active: var(--syn-color-neutral-950);
184
+ --syn-interactive-primary-color-hover: var(--syn-color-primary-900);
185
+ --syn-interactive-secondary-color: var(--syn-color-neutral-950);
186
+ --syn-interactive-secondary-color-active: var(--syn-color-primary-600);
187
+ --syn-interactive-secondary-color-hover: var(--syn-color-primary-600);
182
188
  --syn-letter-spacing-dense: -0.24px; /** Shoelace compatibility DO NOT USE */
183
189
  --syn-letter-spacing-denser: -0.48px; /** Shoelace compatibility DO NOT USE */
184
190
  --syn-letter-spacing-loose: 1.2px; /** Shoelace compatibility DO NOT USE */
package/metadata/packages/tokens/sick2025_dark.css CHANGED
@@ -117,25 +117,25 @@
117
117
  --syn-font-weight-light: 400; /** Shoelace compatibility DO NOT USE */
118
118
  --syn-font-weight-normal: 400;
119
119
  --syn-font-weight-semibold: 600;
120
- --syn-input-background-color: var(--syn-color-neutral-0);
120
+ --syn-input-background-color: var(--syn-color-neutral-50);
121
121
  --syn-input-background-color-disabled: var(--syn-input-background-color);
122
122
  --syn-input-background-color-focus: var(--syn-input-background-color);
123
123
  --syn-input-background-color-hover: var(--syn-input-background-color);
124
- --syn-input-border-color: var(--syn-color-neutral-700);
125
- --syn-input-border-color-disabled: var(--syn-color-neutral-700);
126
- --syn-input-border-color-focus: var(--syn-color-neutral-950);
127
- --syn-input-border-color-focus-error: var(--syn-color-error-700);
128
- --syn-input-border-color-hover: var(--syn-color-neutral-950);
129
- --syn-input-border-radius-large: var(--syn-border-radius-none);
130
- --syn-input-border-radius-medium: var(--syn-border-radius-none);
131
- --syn-input-border-radius-small: var(--syn-border-radius-none);
124
+ --syn-input-border-color: var(--syn-color-neutral-1000);
125
+ --syn-input-border-color-disabled: var(--syn-color-neutral-1000);
126
+ --syn-input-border-color-focus: var(--syn-color-primary-500);
127
+ --syn-input-border-color-focus-error: var(--syn-color-error-600);
128
+ --syn-input-border-color-hover: var(--syn-color-primary-500);
129
+ --syn-input-border-radius-large: var(--syn-border-radius-medium);
130
+ --syn-input-border-radius-medium: var(--syn-border-radius-medium);
131
+ --syn-input-border-radius-small: var(--syn-border-radius-medium);
132
132
  --syn-input-border-width: 1px;
133
- --syn-input-color: var(--syn-color-neutral-950);
134
- --syn-input-color-disabled: var(--syn-color-neutral-950);
135
- --syn-input-color-focus: var(--syn-color-neutral-950);
136
- --syn-input-color-hover: var(--syn-color-neutral-950);
133
+ --syn-input-color: var(--syn-color-neutral-1000);
134
+ --syn-input-color-disabled: var(--syn-color-neutral-1000);
135
+ --syn-input-color-focus: var(--syn-color-neutral-1000);
136
+ --syn-input-color-hover: var(--syn-color-neutral-1000);
137
137
  --syn-input-disabled-opacity: 0.5;
138
- --syn-input-focus-ring-color: var(--syn-color-primary-400);
138
+ --syn-input-focus-ring-color: var(--syn-color-primary-700);
139
139
  --syn-input-focus-ring-error: var(--syn-color-error-400);
140
140
  --syn-input-focus-ring-offset: 0px;
141
141
  --syn-input-font-family: var(--syn-font-sans);
@@ -147,31 +147,31 @@
147
147
  --syn-input-height-medium: var(--syn-spacing-2x-large);
148
148
  --syn-input-height-small: 36px;
149
149
  --syn-input-help-text-color: var(--syn-color-neutral-800);
150
- --syn-input-help-text-color-error: var(--syn-color-error-700);
150
+ --syn-input-help-text-color-error: var(--syn-color-error-600);
151
151
  --syn-input-help-text-font-size-large: var(--syn-font-size-medium);
152
152
  --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
153
153
  --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
154
- --syn-input-icon-color: var(--syn-color-neutral-800);
155
- --syn-input-icon-color-focus: var(--syn-color-neutral-800);
156
- --syn-input-icon-color-hover: var(--syn-color-neutral-800);
157
- --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-500);
158
- --syn-input-icon-icon-clearable-color-focus: var(--syn-color-neutral-500);
159
- --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-500);
160
- --syn-input-label-color: var(--syn-color-neutral-950);
154
+ --syn-input-icon-color: var(--syn-color-neutral-1000);
155
+ --syn-input-icon-color-focus: var(--syn-color-neutral-1000);
156
+ --syn-input-icon-color-hover: var(--syn-color-neutral-1000);
157
+ --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-600);
158
+ --syn-input-icon-icon-clearable-color-focus: var(--syn-color-neutral-600);
159
+ --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-600);
160
+ --syn-input-label-color: var(--syn-color-neutral-1000);
161
161
  --syn-input-label-font-size-large: var(--syn-font-size-large);
162
162
  --syn-input-label-font-size-medium: var(--syn-font-size-medium);
163
163
  --syn-input-label-font-size-small: var(--syn-font-size-small);
164
164
  --syn-input-letter-spacing: normal;
165
- --syn-input-placeholder-color: var(--syn-color-neutral-500);
166
- --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
165
+ --syn-input-placeholder-color: var(--syn-color-neutral-800);
166
+ --syn-input-placeholder-color-disabled: var(--syn-color-neutral-800);
167
167
  --syn-input-readonly-color: var(--syn-color-neutral-800);
168
168
  --syn-input-readonly-color-disabled: var(--syn-color-neutral-800);
169
169
  --syn-input-readonly-color-focus: var(--syn-color-neutral-950);
170
170
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
171
- --syn-input-readonly-background-color: var(--syn-color-neutral-50);
172
- --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-50);
173
- --syn-input-readonly-background-color-focus: var(--syn-color-neutral-50);
174
- --syn-input-readonly-background-color-hover: var(--syn-color-neutral-50);
171
+ --syn-input-readonly-background-color: var(--syn-color-neutral-100);
172
+ --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-100);
173
+ --syn-input-readonly-background-color-focus: var(--syn-color-neutral-100);
174
+ --syn-input-readonly-background-color-hover: var(--syn-color-neutral-100);
175
175
  --syn-input-required-content: "*";
176
176
  --syn-input-required-content-color: var(--syn-input-label-color);
177
177
  --syn-input-required-content-offset: -2px;
@@ -179,6 +179,12 @@
179
179
  --syn-input-spacing-medium: var(--syn-spacing-medium);
180
180
  --syn-input-spacing-small: var(--syn-spacing-small);
181
181
  --syn-input-width: var(--syn-border-width-small);
182
+ --syn-interactive-primary-color: var(--syn-color-primary-500);
183
+ --syn-interactive-primary-color-active: var(--syn-color-neutral-1000);
184
+ --syn-interactive-primary-color-hover: var(--syn-color-primary-900);
185
+ --syn-interactive-secondary-color: var(--syn-color-neutral-1000);
186
+ --syn-interactive-secondary-color-active: var(--syn-color-primary-500);
187
+ --syn-interactive-secondary-color-hover: var(--syn-color-primary-500);
182
188
  --syn-letter-spacing-dense: normal; /** Shoelace compatibility DO NOT USE */
183
189
  --syn-letter-spacing-denser: normal; /** Shoelace compatibility DO NOT USE */
184
190
  --syn-letter-spacing-loose: normal; /** Shoelace compatibility DO NOT USE */
package/metadata/packages/tokens/sick2025_light.css CHANGED
@@ -121,22 +121,22 @@
121
121
  --syn-input-background-color-disabled: var(--syn-input-background-color);
122
122
  --syn-input-background-color-focus: var(--syn-input-background-color);
123
123
  --syn-input-background-color-hover: var(--syn-input-background-color);
124
- --syn-input-border-color: var(--syn-color-neutral-700);
125
- --syn-input-border-color-disabled: var(--syn-color-neutral-700);
126
- --syn-input-border-color-focus: var(--syn-color-neutral-950);
127
- --syn-input-border-color-focus-error: var(--syn-color-error-700);
128
- --syn-input-border-color-hover: var(--syn-color-neutral-950);
129
- --syn-input-border-radius-large: var(--syn-border-radius-none);
130
- --syn-input-border-radius-medium: var(--syn-border-radius-none);
131
- --syn-input-border-radius-small: var(--syn-border-radius-none);
124
+ --syn-input-border-color: var(--syn-color-neutral-950);
125
+ --syn-input-border-color-disabled: var(--syn-color-neutral-950);
126
+ --syn-input-border-color-focus: var(--syn-color-primary-700);
127
+ --syn-input-border-color-focus-error: var(--syn-color-error-600);
128
+ --syn-input-border-color-hover: var(--syn-color-primary-700);
129
+ --syn-input-border-radius-large: var(--syn-border-radius-medium);
130
+ --syn-input-border-radius-medium: var(--syn-border-radius-medium);
131
+ --syn-input-border-radius-small: var(--syn-border-radius-medium);
132
132
  --syn-input-border-width: 1px;
133
133
  --syn-input-color: var(--syn-color-neutral-950);
134
134
  --syn-input-color-disabled: var(--syn-color-neutral-950);
135
135
  --syn-input-color-focus: var(--syn-color-neutral-950);
136
136
  --syn-input-color-hover: var(--syn-color-neutral-950);
137
137
  --syn-input-disabled-opacity: 0.5;
138
- --syn-input-focus-ring-color: var(--syn-color-primary-400);
139
- --syn-input-focus-ring-error: var(--syn-color-error-400);
138
+ --syn-input-focus-ring-color: var(--syn-color-primary-500);
139
+ --syn-input-focus-ring-error: var(--syn-color-error-500);
140
140
  --syn-input-focus-ring-offset: 0px;
141
141
  --syn-input-font-family: var(--syn-font-sans);
142
142
  --syn-input-font-size-large: var(--syn-font-size-large);
@@ -146,14 +146,14 @@
146
146
  --syn-input-height-large: var(--syn-spacing-3x-large);
147
147
  --syn-input-height-medium: var(--syn-spacing-2x-large);
148
148
  --syn-input-height-small: 36px;
149
- --syn-input-help-text-color: var(--syn-color-neutral-800);
150
- --syn-input-help-text-color-error: var(--syn-color-error-700);
149
+ --syn-input-help-text-color: var(--syn-color-neutral-700);
150
+ --syn-input-help-text-color-error: var(--syn-color-error-600);
151
151
  --syn-input-help-text-font-size-large: var(--syn-font-size-medium);
152
152
  --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
153
153
  --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
154
- --syn-input-icon-color: var(--syn-color-neutral-800);
155
- --syn-input-icon-color-focus: var(--syn-color-neutral-800);
156
- --syn-input-icon-color-hover: var(--syn-color-neutral-800);
154
+ --syn-input-icon-color: var(--syn-color-neutral-950);
155
+ --syn-input-icon-color-focus: var(--syn-color-neutral-950);
156
+ --syn-input-icon-color-hover: var(--syn-color-neutral-950);
157
157
  --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-500);
158
158
  --syn-input-icon-icon-clearable-color-focus: var(--syn-color-neutral-500);
159
159
  --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-500);
@@ -162,16 +162,16 @@
162
162
  --syn-input-label-font-size-medium: var(--syn-font-size-medium);
163
163
  --syn-input-label-font-size-small: var(--syn-font-size-small);
164
164
  --syn-input-letter-spacing: normal;
165
- --syn-input-placeholder-color: var(--syn-color-neutral-500);
166
- --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
165
+ --syn-input-placeholder-color: var(--syn-color-neutral-700);
166
+ --syn-input-placeholder-color-disabled: var(--syn-color-neutral-700);
167
167
  --syn-input-readonly-color: var(--syn-color-neutral-800);
168
168
  --syn-input-readonly-color-disabled: var(--syn-color-neutral-800);
169
169
  --syn-input-readonly-color-focus: var(--syn-color-neutral-950);
170
170
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
171
- --syn-input-readonly-background-color: var(--syn-color-neutral-50);
172
- --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-50);
173
- --syn-input-readonly-background-color-focus: var(--syn-color-neutral-50);
174
- --syn-input-readonly-background-color-hover: var(--syn-color-neutral-50);
171
+ --syn-input-readonly-background-color: #f8f7f6;
172
+ --syn-input-readonly-background-color-disabled: #f8f7f6;
173
+ --syn-input-readonly-background-color-focus: #f8f7f6;
174
+ --syn-input-readonly-background-color-hover: #f8f7f6;
175
175
  --syn-input-required-content: "*";
176
176
  --syn-input-required-content-color: var(--syn-input-label-color);
177
177
  --syn-input-required-content-offset: -2px;
@@ -179,6 +179,12 @@
179
179
  --syn-input-spacing-medium: var(--syn-spacing-medium);
180
180
  --syn-input-spacing-small: var(--syn-spacing-small);
181
181
  --syn-input-width: var(--syn-border-width-small);
182
+ --syn-interactive-primary-color: var(--syn-color-primary-700);
183
+ --syn-interactive-primary-color-active: var(--syn-color-neutral-950);
184
+ --syn-interactive-primary-color-hover: var(--syn-color-primary-900);
185
+ --syn-interactive-secondary-color: var(--syn-color-neutral-950);
186
+ --syn-interactive-secondary-color-active: var(--syn-color-primary-700);
187
+ --syn-interactive-secondary-color-hover: var(--syn-color-primary-700);
182
188
  --syn-letter-spacing-dense: normal; /** Shoelace compatibility DO NOT USE */
183
189
  --syn-letter-spacing-denser: normal; /** Shoelace compatibility DO NOT USE */
184
190
  --syn-letter-spacing-loose: normal; /** Shoelace compatibility DO NOT USE */
package/metadata/static/components/syn-combobox/docs.md CHANGED
@@ -2277,7 +2277,15 @@ It is possible to add options dynamically to the combobox e.g. if the option val
2277
2277
  id="syn-combobox-option-2"
2278
2278
  >Option 3</syn-option
2279
2279
  >
2280
- </syn-combobox>
2280
+ <syn-option
2281
+ role="option"
2282
+ aria-selected="false"
2283
+ id="syn-combobox-option-3"
2284
+ aria-disabled="false"
2285
+ value=""
2286
+ >Option 4</syn-option
2287
+ ></syn-combobox
2288
+ >
2281
2289
  ```
2282
2290
 
2283
2291
  ---
package/metadata/static/components/syn-input/docs.md CHANGED
@@ -147,7 +147,7 @@ Use the disabled attribute to disable an input.
147
147
  form=""
148
148
  >
149
149
  <syn-icon
150
- name="house"
150
+ name="home"
151
151
  slot="prefix"
152
152
  aria-hidden="true"
153
153
  library="default"
@@ -380,6 +380,7 @@ Use to customize the way form controls are drawn. This example uses CSS grid to
380
380
 
381
381
  .label-on-left::part(form-control-label) {
382
382
  text-align: right;
383
+ margin-bottom: 0;
383
384
  }
384
385
 
385
386
  .label-on-left::part(form-control-help-text) {
@@ -445,6 +446,7 @@ The numeric-strategy property defines how numeric input is handled during user i
445
446
  size="medium"
446
447
  form=""
447
448
  ></syn-input>
449
+ <br />
448
450
  <syn-input
449
451
  label="Modern (min and max)"
450
452
  max="10"
package/metadata/static/setup/prerequisites.md CHANGED
@@ -2,14 +2,24 @@
2
2
 
3
3
  ## Fonts
4
4
 
5
- The Synergy Design System makes use of the `Open Sans` typeface.
5
+ Depending on the used theme (either SICK 2018 or SICK 2025) the Synergy Design System makes use of a specific typeface:
6
+
7
+ | Theme | Typeface |
8
+ | --------- | ----------- |
9
+ | SICK 2018 | `Open Sans` |
10
+ | SICK 2025 | `SICK Intl` |
11
+
12
+ 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).
13
+
6
14
  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.
7
15
  You need to include it into your own project.
8
16
 
9
- The following information may be helpful to get you started including your own copy of `Open Sans` in your project for quicker bootstrapping:
17
+ 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:
10
18
 
11
19
  ### Local Installation
12
20
 
21
+ #### SICK 2018
22
+
13
23
  1. Download the `Open Sans` font from the [SICK Brand Portal](https://brand.sick.com/document/49#/-/resources-1).
14
24
  2. Extract the ZIP file to a destination reachable by your project (e.g. a `public` folder).
15
25
  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).
@@ -65,8 +75,34 @@ The following information may be helpful to get you started including your own c
65
75
  }
66
76
  ```
67
77
 
78
+ #### SICK 2025
79
+
80
+ 1. Download the `SICK Intl` font from the [SICK Brand Portal](https://brand.sick.com/document/145#/basiselemente/typografie/sick-intl).
81
+ 2. Extract the ZIP file to a destination reachable by your project (e.g. a `public` folder).
82
+ 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).
83
+
84
+ ```css
85
+ @font-face {
86
+ font-display: swap;
87
+ font-family: "SICK Intl";
88
+ font-style: normal;
89
+ font-weight: 400;
90
+ src: url("/PUBLIC_PATH/SICKIntl/SICKIntl-Regular.ttf") format("truetype");
91
+ }
92
+
93
+ @font-face {
94
+ font-display: swap;
95
+ font-family: "SICK Intl";
96
+ font-style: normal;
97
+ font-weight: 600;
98
+ src: url("/PUBLIC_PATH/SICKIntl/SICKIntl-Semibold.ttf") format("truetype");
99
+ }
100
+ ```
101
+
68
102
  ### Installing via local npm package (e.g. for vite or webpack based setups)
69
103
 
104
+ #### SICK 2018
105
+
70
106
  1. Install the `@fontsource/open-sans` package into your project.
71
107
  2. Include the font in your project by adding the following import statements to your project:
72
108
 
@@ -79,8 +115,14 @@ import "@fontsource/open-sans/700.css";
79
115
  import "@fontsource/open-sans/700-italic.css";
80
116
  ```
81
117
 
118
+ #### SICK 2025
119
+
120
+ There is no way to install the `SICK Intl` typeface via a npm package as it is not available.
121
+
82
122
  ### Installing via local npm package (angular)
83
123
 
124
+ #### SICK 2018
125
+
84
126
  1. Install the `@fontsource/open-sans` package into your project.
85
127
  2. Adjust your `angular.json` file to include the needed stylesheets (where project_name is the name of your project):
86
128
 
@@ -107,9 +149,15 @@ import "@fontsource/open-sans/700-italic.css";
107
149
  }
108
150
  ```
109
151
 
152
+ #### SICK 2025
153
+
154
+ There is no way to install the `SICK Intl` typeface via a npm package as it is not available.
155
+
110
156
  ### Using the SICK CDN
111
157
 
112
- This is the simplest default font behavior. The `Open Sans` font is loaded from the SICK CDN.
158
+ This is the simplest default font behavior. The typefaces are loaded from the SICK CDN.
159
+
160
+ #### SICK 2018
113
161
 
114
162
  ```css
115
163
  /* Regular */
@@ -119,11 +167,11 @@ This is the simplest default font behavior. The `Open Sans` font is loaded from
119
167
  font-style: normal;
120
168
  font-weight: 400;
121
169
  src:
122
- url("https://cdn.sick.com/media/fonts/opensans-v1/Regular/OpenSans-Regular.woff2")
170
+ url("https://www.sick.com/media/fonts/opensans-v1/Regular/OpenSans-Regular.woff2")
123
171
  format("woff2"),
124
- url("https://cdn.sick.com/media/fonts/opensans-v1/Regular/OpenSans-Regular.woff")
172
+ url("https://www.sick.com/media/fonts/opensans-v1/Regular/OpenSans-Regular.woff")
125
173
  format("woff"),
126
- url("https://cdn.sick.com/media/fonts/opensans-v1/Regular/OpenSans-Regular.ttf")
174
+ url("https://www.sick.com/media/fonts/opensans-v1/Regular/OpenSans-Regular.ttf")
127
175
  format("truetype");
128
176
  }
129
177
 
@@ -134,11 +182,11 @@ This is the simplest default font behavior. The `Open Sans` font is loaded from
134
182
  font-style: normal;
135
183
  font-weight: 600;
136
184
  src:
137
- url("https://cdn.sick.com/media/fonts/opensans-v1/SemiBold/OpenSans-SemiBold.woff2")
185
+ url("https://www.sick.com/media/fonts/opensans-v1/SemiBold/OpenSans-SemiBold.woff2")
138
186
  format("woff2"),
139
- url("https://cdn.sick.com/media/fonts/opensans-v1/SemiBold/OpenSans-SemiBold.woff")
187
+ url("https://www.sick.com/media/fonts/opensans-v1/SemiBold/OpenSans-SemiBold.woff")
140
188
  format("woff"),
141
- url("https://cdn.sick.com/media/fonts/opensans-v1/SemiBold/OpenSans-SemiBold.ttf")
189
+ url("https://www.sick.com/media/fonts/opensans-v1/SemiBold/OpenSans-SemiBold.ttf")
142
190
  format("truetype");
143
191
  }
144
192
 
@@ -149,11 +197,54 @@ This is the simplest default font behavior. The `Open Sans` font is loaded from
149
197
  font-style: normal;
150
198
  font-weight: 700;
151
199
  src:
152
- url("https://cdn.sick.com/media/fonts/opensans-v1/Bold/OpenSans-Bold.woff2")
200
+ url("https://www.sick.com/media/fonts/opensans-v1/Bold/OpenSans-Bold.woff2")
153
201
  format("woff2"),
154
- url("https://cdn.sick.com/media/fonts/opensans-v1/Bold/OpenSans-Bold.woff")
202
+ url("https://www.sick.com/media/fonts/opensans-v1/Bold/OpenSans-Bold.woff")
155
203
  format("woff"),
156
- url("https://cdn.sick.com/media/fonts/opensans-v1/Bold/OpenSans-Bold.ttf")
204
+ url("https://www.sick.com/media/fonts/opensans-v1/Bold/OpenSans-Bold.ttf")
205
+ format("truetype");
206
+ }
207
+ ```
208
+
209
+ For better performance, you may also add the following statement to your HTML:
210
+
211
+ ```html
212
+ <link
213
+ rel="preload"
214
+ href="https://www.sick.com/media/fonts/opensans-v1/Regular/OpenSans-Regular.woff2"
215
+ as="font"
216
+ type="font/woff2"
217
+ crossorigin
218
+ />
219
+ ```
220
+
221
+ #### SICK 2025
222
+
223
+ ```css
224
+ /* Regular */
225
+ @font-face {
226
+ font-display: swap;
227
+ font-family: "Open Sans";
228
+ font-style: normal;
229
+ font-weight: 400;
230
+ src:
231
+ url("https://www.sick.com/media/fonts/sickintl-v1/regular/SICKIntl-Regular.woff2")
232
+ format("woff2"),
233
+ url("https://www.sick.com/media/fonts/sickintl-v1/regular/SICKIntl-Regular.ttf")
234
+ format("truetype");
235
+ }
236
+
237
+ /* Semi Bold */
238
+ @font-face {
239
+ font-display: swap;
240
+ font-family: "Open Sans";
241
+ font-style: normal;
242
+ font-weight: 600;
243
+ src:
244
+ url("https://www.sick.com/media/fonts/sickintl-v1/semibold/SICKIntl-Semibold.woff2")
245
+ format("woff2"),
246
+ format("woff"),
247
+ url("https://www.sick.com/media/fonts/sickintl-v1/semibold/SICKIntl-Semibold.ttf")
157
248
  format("truetype");
158
249
  }
159
250
  ```
@@ -163,7 +254,7 @@ For better performance, you may also add the following statement to your HTML:
163
254
  ```html
164
255
  <link
165
256
  rel="preload"
166
- href="https://cdn.sick.com/media/fonts/opensans-v1/Regular/OpenSans-Regular.woff2"
257
+ href="https://www.sick.com/media/fonts/sickintl-v1/regular/SICKIntl-Regular.woff2"
167
258
  as="font"
168
259
  type="font/woff2"
169
260
  crossorigin
package/package.json CHANGED
@@ -34,10 +34,10 @@
34
34
  "ts-jest": "^29.4.0",
35
35
  "typescript": "^5.8.3",
36
36
  "@synergy-design-system/docs": "0.1.0",
37
+ "@synergy-design-system/components": "2.41.0",
37
38
  "@synergy-design-system/eslint-config-syn": "^0.1.0",
38
39
  "@synergy-design-system/styles": "1.7.2",
39
- "@synergy-design-system/tokens": "^2.23.0",
40
- "@synergy-design-system/components": "2.40.1"
40
+ "@synergy-design-system/tokens": "^2.24.0"
41
41
  },
42
42
  "exports": {
43
43
  ".": {
@@ -95,7 +95,7 @@
95
95
  [
96
96
  "@semantic-release/exec",
97
97
  {
98
- "prepareCmd": "pnpm build && git add . && git commit -m 'chore(release/mcp) Automatic data update [skip actions]'"
98
+ "prepareCmd": "pnpm build && git add ./metadata && git diff --cached --quiet ./metadata || git commit -m 'chore(release/mcp) Automatic data update [skip actions]'"
99
99
  }
100
100
  ],
101
101
  [
@@ -122,7 +122,7 @@
122
122
  "directory": "packages/mcp"
123
123
  },
124
124
  "type": "module",
125
- "version": "1.2.1",
125
+ "version": "1.3.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",