@synergy-design-system/mcp 1.21.1 → 1.22.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 (14) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/metadata/checksum.txt +1 -1
  3. package/metadata/packages/components/components/syn-range/component.styles.ts +11 -11
  4. package/metadata/packages/components/components/syn-range-tick/component.styles.ts +1 -1
  5. package/metadata/packages/components/static/CHANGELOG.md +13 -0
  6. package/metadata/packages/tokens/CHANGELOG.md +8 -0
  7. package/metadata/packages/tokens/dark.css +10 -4
  8. package/metadata/packages/tokens/index.js +30 -0
  9. package/metadata/packages/tokens/light.css +10 -4
  10. package/metadata/packages/tokens/sick2018_dark.css +10 -4
  11. package/metadata/packages/tokens/sick2018_light.css +10 -4
  12. package/metadata/packages/tokens/sick2025_dark.css +21 -15
  13. package/metadata/packages/tokens/sick2025_light.css +10 -4
  14. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # Changelog
2
2
 
3
+ ## 1.22.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#1063](https://github.com/synergy-design-system/synergy-design-system/pull/1063) [`6e616f5`](https://github.com/synergy-design-system/synergy-design-system/commit/6e616f51007ebde567eeb33190518159becc7c32) Thanks [@kirchsuSICKAG](https://github.com/kirchsuSICKAG)! - Released on: 2025-11-17
8
+
9
+ feat: ✨ Brand update for syn-range and syn-range-tick (#966)
10
+
3
11
  ## 1.21.1
4
12
 
5
13
  ### Patch Changes
package/metadata/checksum.txt CHANGED
@@ -1 +1 @@
1
- dd20adbd42b1195face89f971b318975
1
+ 801fb6a373aadb785308b079343111ee
package/metadata/packages/components/components/syn-range/component.styles.ts CHANGED
@@ -10,8 +10,8 @@ export default css`
10
10
  --thumb-hit-area-size: 1.4;
11
11
  --track-hit-area-size: var(--syn-spacing-medium);
12
12
  --track-active-offset: 0px;
13
- --track-color-active: var(--syn-color-primary-600);
14
- --track-color-inactive: var(--syn-color-neutral-200);
13
+ --track-color-active: var(--syn-range-track-color-active,var(--syn-color-primary-600));
14
+ --track-color-inactive: var(--syn-range-color-inactive, var(--syn-color-neutral-200));
15
15
  --track-height: var(--syn-spacing-2x-small);
16
16
 
17
17
  /* This is needed to get the full with of the element, including the border */
@@ -139,14 +139,14 @@ export default css`
139
139
 
140
140
  .track {
141
141
  background-color: var(--track-color-inactive);
142
- border-radius: var(--syn-border-radius-small);
142
+ border-radius: var(--syn-border-radius-pill);
143
143
  height: var(--track-height);
144
144
  margin: calc((var(--full-thumb-size) - var(--track-height)) / 2) calc(var(--half-thumb-size) * -1);
145
145
  }
146
146
 
147
147
  .active-track {
148
148
  background-color: var(--track-color-active);
149
- border-radius: var(--syn-border-radius-small);
149
+ border-radius: var(--syn-border-radius-pill);
150
150
  height: var(--track-height);
151
151
  margin: 0 calc(var(--half-thumb-size) * -1);
152
152
  position: absolute;
@@ -155,8 +155,8 @@ export default css`
155
155
  }
156
156
 
157
157
  .thumb {
158
- background-color: var(--syn-color-primary-600);
159
- border: var(--syn-focus-ring-width) solid var(--syn-color-neutral-0);
158
+ background-color: var(--syn-interactive-emphasis-color,var(--syn-color-primary-600));
159
+ border: var(--syn-focus-ring-width) solid var(--syn-input-border-color-offset, var(--syn-color-neutral-0));
160
160
  border-radius: var(--syn-border-radius-circle);
161
161
  cursor: pointer;
162
162
  display: block;
@@ -192,7 +192,7 @@ export default css`
192
192
  }
193
193
 
194
194
  .thumb.grabbed {
195
- background: var(--syn-color-primary-950);
195
+ background: var(--syn-interactive-emphasis-color-active, var(--syn-color-primary-950));
196
196
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
197
197
  cursor: grabbing;
198
198
  }
@@ -202,7 +202,7 @@ export default css`
202
202
  }
203
203
 
204
204
  .thumb:not(.grabbed):focus-visible {
205
- background: var(--syn-color-primary-600);
205
+ background: var(--syn-interactive-emphasis-color-hover,var(--syn-color-primary-900));
206
206
  outline: var(--syn-focus-ring);
207
207
  outline-offset: 0;
208
208
  }
@@ -223,7 +223,7 @@ export default css`
223
223
  }
224
224
 
225
225
  :host(:not([disabled])) .thumb:not(.grabbed):hover {
226
- background: var(--syn-color-primary-900);
226
+ background: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
227
227
  }
228
228
 
229
229
  :host(:not([disabled])) .thumb:hover::after {
@@ -275,10 +275,10 @@ export default css`
275
275
 
276
276
 
277
277
  :host([data-user-invalid]) .active-track {
278
- --track-color-active: var(--syn-input-border-color-focus-error);
278
+ --track-color-active: var(--syn-range-error-color ,var(--syn-input-border-color-focus-error));
279
279
  }
280
280
 
281
281
  :host([data-user-invalid]) .thumb {
282
- background-color: var(--syn-input-border-color-focus-error);
282
+ background-color: var(--syn-range-error-color ,var(--syn-input-border-color-focus-error));
283
283
  }
284
284
  `;
package/metadata/packages/components/components/syn-range-tick/component.styles.ts CHANGED
@@ -15,7 +15,7 @@ export default css`
15
15
  }
16
16
 
17
17
  .tick-line {
18
- background: var(--syn-color-neutral-400);
18
+ background: var(--syn-range-tick-color, var(--syn-color-neutral-400));
19
19
  height: var(--tick-height);
20
20
  }
21
21
 
package/metadata/packages/components/static/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # Changelog
2
2
 
3
+ ## 2.60.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#1063](https://github.com/synergy-design-system/synergy-design-system/pull/1063) [`6e616f5`](https://github.com/synergy-design-system/synergy-design-system/commit/6e616f51007ebde567eeb33190518159becc7c32) Thanks [@kirchsuSICKAG](https://github.com/kirchsuSICKAG)! - Released on: 2025-11-17
8
+
9
+ feat: ✨ Brand update for syn-range and syn-range-tick (#966)
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies [[`6e616f5`](https://github.com/synergy-design-system/synergy-design-system/commit/6e616f51007ebde567eeb33190518159becc7c32)]:
14
+ - @synergy-design-system/tokens@2.41.0
15
+
3
16
  ## 2.59.0
4
17
 
5
18
  ### Minor Changes
package/metadata/packages/tokens/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # Changelog
2
2
 
3
+ ## 2.41.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#1063](https://github.com/synergy-design-system/synergy-design-system/pull/1063) [`6e616f5`](https://github.com/synergy-design-system/synergy-design-system/commit/6e616f51007ebde567eeb33190518159becc7c32) Thanks [@kirchsuSICKAG](https://github.com/kirchsuSICKAG)! - Released on: 2025-11-17
8
+
9
+ feat: ✨ Brand update for syn-range and syn-range-tick (#966)
10
+
3
11
  ## 2.40.0
4
12
 
5
13
  ### Minor Changes
package/metadata/packages/tokens/dark.css CHANGED
@@ -173,6 +173,7 @@
173
173
  --syn-input-border-color-focus: var(--syn-color-neutral-950);
174
174
  --syn-input-border-color-focus-error: var(--syn-color-error-700);
175
175
  --syn-input-border-color-hover: var(--syn-color-neutral-950);
176
+ --syn-input-border-color-offset: var(--syn-panel-background-color);
176
177
  --syn-input-border-radius-large: var(--syn-border-radius-none);
177
178
  --syn-input-border-radius-medium: var(--syn-border-radius-none);
178
179
  --syn-input-border-radius-small: var(--syn-border-radius-none);
@@ -210,10 +211,10 @@
210
211
  --syn-input-placeholder-color: var(--syn-color-neutral-500);
211
212
  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
212
213
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
213
- --syn-input-readonly-background-color: var(--syn-color-neutral-300);
214
- --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-300);
215
- --syn-input-readonly-background-color-focus: var(--syn-color-neutral-300);
216
- --syn-input-readonly-background-color-hover: var(--syn-color-neutral-300);
214
+ --syn-input-readonly-background-color: var(--syn-readonly-background-color);
215
+ --syn-input-readonly-background-color-disabled: var(--syn-readonly-background-color);
216
+ --syn-input-readonly-background-color-focus: var(--syn-readonly-background-color);
217
+ --syn-input-readonly-background-color-hover: var(--syn-readonly-background-color);
217
218
  --syn-input-required-content: "*";
218
219
  --syn-input-required-content-color: var(--syn-input-label-color);
219
220
  --syn-input-required-content-offset: -2px;
@@ -256,6 +257,11 @@
256
257
  --syn-panel-border-width: var(--syn-border-width-small);
257
258
  --syn-progress-indicator-color: var(--syn-color-primary-600);
258
259
  --syn-progress-track-color: var(--syn-color-neutral-200);
260
+ --syn-range-color-inactive: var(--syn-color-neutral-200);
261
+ --syn-range-error-color: var(--syn-color-error-700);
262
+ --syn-range-tick-color: var(--syn-color-neutral-400);
263
+ --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
264
+ --syn-readonly-background-color: var(--syn-color-neutral-300);
259
265
  --syn-spacing-2x-large: 48px;
260
266
  --syn-spacing-2x-small: 4px;
261
267
  --syn-spacing-3x-large: 64px;
package/metadata/packages/tokens/index.js CHANGED
@@ -833,6 +833,11 @@ export const SynInputBorderColorFocusError = 'var(--syn-input-border-color-focus
833
833
  */
834
834
  export const SynInputBorderColorHover = 'var(--syn-input-border-color-hover)';
835
835
 
836
+ /**
837
+ * @type {string}
838
+ */
839
+ export const SynInputBorderColorOffset = 'var(--syn-input-border-color-offset)';
840
+
836
841
  /**
837
842
  * @type {string}
838
843
  */
@@ -1248,6 +1253,31 @@ export const SynProgressIndicatorColor = 'var(--syn-progress-indicator-color)';
1248
1253
  */
1249
1254
  export const SynProgressTrackColor = 'var(--syn-progress-track-color)';
1250
1255
 
1256
+ /**
1257
+ * @type {string}
1258
+ */
1259
+ export const SynRangeColorInactive = 'var(--syn-range-color-inactive)';
1260
+
1261
+ /**
1262
+ * @type {string}
1263
+ */
1264
+ export const SynRangeErrorColor = 'var(--syn-range-error-color)';
1265
+
1266
+ /**
1267
+ * @type {string}
1268
+ */
1269
+ export const SynRangeTickColor = 'var(--syn-range-tick-color)';
1270
+
1271
+ /**
1272
+ * @type {string}
1273
+ */
1274
+ export const SynRangeTrackColorActive = 'var(--syn-range-track-color-active)';
1275
+
1276
+ /**
1277
+ * @type {string}
1278
+ */
1279
+ export const SynReadonlyBackgroundColor = 'var(--syn-readonly-background-color)';
1280
+
1251
1281
  /**
1252
1282
  * @type {string}
1253
1283
  */
package/metadata/packages/tokens/light.css CHANGED
@@ -173,6 +173,7 @@
173
173
  --syn-input-border-color-focus: var(--syn-color-neutral-950);
174
174
  --syn-input-border-color-focus-error: var(--syn-color-error-700);
175
175
  --syn-input-border-color-hover: var(--syn-color-neutral-950);
176
+ --syn-input-border-color-offset: var(--syn-panel-background-color);
176
177
  --syn-input-border-radius-large: var(--syn-border-radius-none);
177
178
  --syn-input-border-radius-medium: var(--syn-border-radius-none);
178
179
  --syn-input-border-radius-small: var(--syn-border-radius-none);
@@ -210,10 +211,10 @@
210
211
  --syn-input-placeholder-color: var(--syn-color-neutral-500);
211
212
  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
212
213
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
213
- --syn-input-readonly-background-color: var(--syn-color-neutral-300);
214
- --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-300);
215
- --syn-input-readonly-background-color-focus: var(--syn-color-neutral-300);
216
- --syn-input-readonly-background-color-hover: var(--syn-color-neutral-300);
214
+ --syn-input-readonly-background-color: var(--syn-readonly-background-color);
215
+ --syn-input-readonly-background-color-disabled: var(--syn-readonly-background-color);
216
+ --syn-input-readonly-background-color-focus: var(--syn-readonly-background-color);
217
+ --syn-input-readonly-background-color-hover: var(--syn-readonly-background-color);
217
218
  --syn-input-required-content: "*";
218
219
  --syn-input-required-content-color: var(--syn-input-label-color);
219
220
  --syn-input-required-content-offset: -2px;
@@ -256,6 +257,11 @@
256
257
  --syn-panel-border-width: var(--syn-border-width-small);
257
258
  --syn-progress-indicator-color: var(--syn-color-primary-600);
258
259
  --syn-progress-track-color: var(--syn-color-neutral-200);
260
+ --syn-range-color-inactive: var(--syn-color-neutral-200);
261
+ --syn-range-error-color: var(--syn-color-error-700);
262
+ --syn-range-tick-color: var(--syn-color-neutral-400);
263
+ --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
264
+ --syn-readonly-background-color: var(--syn-color-neutral-300);
259
265
  --syn-spacing-2x-large: 48px;
260
266
  --syn-spacing-2x-small: 4px;
261
267
  --syn-spacing-3x-large: 64px;
package/metadata/packages/tokens/sick2018_dark.css CHANGED
@@ -173,6 +173,7 @@
173
173
  --syn-input-border-color-focus: var(--syn-color-neutral-950);
174
174
  --syn-input-border-color-focus-error: var(--syn-color-error-700);
175
175
  --syn-input-border-color-hover: var(--syn-color-neutral-950);
176
+ --syn-input-border-color-offset: var(--syn-panel-background-color);
176
177
  --syn-input-border-radius-large: var(--syn-border-radius-none);
177
178
  --syn-input-border-radius-medium: var(--syn-border-radius-none);
178
179
  --syn-input-border-radius-small: var(--syn-border-radius-none);
@@ -210,10 +211,10 @@
210
211
  --syn-input-placeholder-color: var(--syn-color-neutral-500);
211
212
  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
212
213
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
213
- --syn-input-readonly-background-color: var(--syn-color-neutral-300);
214
- --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-300);
215
- --syn-input-readonly-background-color-focus: var(--syn-color-neutral-300);
216
- --syn-input-readonly-background-color-hover: var(--syn-color-neutral-300);
214
+ --syn-input-readonly-background-color: var(--syn-readonly-background-color);
215
+ --syn-input-readonly-background-color-disabled: var(--syn-readonly-background-color);
216
+ --syn-input-readonly-background-color-focus: var(--syn-readonly-background-color);
217
+ --syn-input-readonly-background-color-hover: var(--syn-readonly-background-color);
217
218
  --syn-input-required-content: "*";
218
219
  --syn-input-required-content-color: var(--syn-input-label-color);
219
220
  --syn-input-required-content-offset: -2px;
@@ -256,6 +257,11 @@
256
257
  --syn-panel-border-width: var(--syn-border-width-small);
257
258
  --syn-progress-indicator-color: var(--syn-color-primary-600);
258
259
  --syn-progress-track-color: var(--syn-color-neutral-200);
260
+ --syn-range-color-inactive: var(--syn-color-neutral-200);
261
+ --syn-range-error-color: var(--syn-color-error-700);
262
+ --syn-range-tick-color: var(--syn-color-neutral-400);
263
+ --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
264
+ --syn-readonly-background-color: var(--syn-color-neutral-300);
259
265
  --syn-spacing-2x-large: 48px;
260
266
  --syn-spacing-2x-small: 4px;
261
267
  --syn-spacing-3x-large: 64px;
package/metadata/packages/tokens/sick2018_light.css CHANGED
@@ -173,6 +173,7 @@
173
173
  --syn-input-border-color-focus: var(--syn-color-neutral-950);
174
174
  --syn-input-border-color-focus-error: var(--syn-color-error-700);
175
175
  --syn-input-border-color-hover: var(--syn-color-neutral-950);
176
+ --syn-input-border-color-offset: var(--syn-panel-background-color);
176
177
  --syn-input-border-radius-large: var(--syn-border-radius-none);
177
178
  --syn-input-border-radius-medium: var(--syn-border-radius-none);
178
179
  --syn-input-border-radius-small: var(--syn-border-radius-none);
@@ -210,10 +211,10 @@
210
211
  --syn-input-placeholder-color: var(--syn-color-neutral-500);
211
212
  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
212
213
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
213
- --syn-input-readonly-background-color: var(--syn-color-neutral-300);
214
- --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-300);
215
- --syn-input-readonly-background-color-focus: var(--syn-color-neutral-300);
216
- --syn-input-readonly-background-color-hover: var(--syn-color-neutral-300);
214
+ --syn-input-readonly-background-color: var(--syn-readonly-background-color);
215
+ --syn-input-readonly-background-color-disabled: var(--syn-readonly-background-color);
216
+ --syn-input-readonly-background-color-focus: var(--syn-readonly-background-color);
217
+ --syn-input-readonly-background-color-hover: var(--syn-readonly-background-color);
217
218
  --syn-input-required-content: "*";
218
219
  --syn-input-required-content-color: var(--syn-input-label-color);
219
220
  --syn-input-required-content-offset: -2px;
@@ -256,6 +257,11 @@
256
257
  --syn-panel-border-width: var(--syn-border-width-small);
257
258
  --syn-progress-indicator-color: var(--syn-color-primary-600);
258
259
  --syn-progress-track-color: var(--syn-color-neutral-200);
260
+ --syn-range-color-inactive: var(--syn-color-neutral-200);
261
+ --syn-range-error-color: var(--syn-color-error-700);
262
+ --syn-range-tick-color: var(--syn-color-neutral-400);
263
+ --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
264
+ --syn-readonly-background-color: var(--syn-color-neutral-300);
259
265
  --syn-spacing-2x-large: 48px;
260
266
  --syn-spacing-2x-small: 4px;
261
267
  --syn-spacing-3x-large: 64px;
package/metadata/packages/tokens/sick2025_dark.css CHANGED
@@ -173,6 +173,7 @@
173
173
  --syn-input-border-color-focus: var(--syn-color-primary-400);
174
174
  --syn-input-border-color-focus-error: var(--syn-color-error-600);
175
175
  --syn-input-border-color-hover: var(--syn-color-primary-400);
176
+ --syn-input-border-color-offset: var(--syn-panel-background-color);
176
177
  --syn-input-border-radius-large: var(--syn-border-radius-medium);
177
178
  --syn-input-border-radius-medium: var(--syn-border-radius-medium);
178
179
  --syn-input-border-radius-small: var(--syn-border-radius-medium);
@@ -210,10 +211,10 @@
210
211
  --syn-input-placeholder-color: var(--syn-color-neutral-800);
211
212
  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-800);
212
213
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
213
- --syn-input-readonly-background-color: var(--syn-color-neutral-300);
214
- --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-300);
215
- --syn-input-readonly-background-color-focus: var(--syn-color-neutral-300);
216
- --syn-input-readonly-background-color-hover: var(--syn-color-neutral-300);
214
+ --syn-input-readonly-background-color: var(--syn-readonly-background-color);
215
+ --syn-input-readonly-background-color-disabled: var(--syn-readonly-background-color);
216
+ --syn-input-readonly-background-color-focus: var(--syn-readonly-background-color);
217
+ --syn-input-readonly-background-color-hover: var(--syn-readonly-background-color);
217
218
  --syn-input-required-content: "*";
218
219
  --syn-input-required-content-color: var(--syn-input-label-color);
219
220
  --syn-input-required-content-offset: -2px;
@@ -256,6 +257,11 @@
256
257
  --syn-panel-border-width: var(--syn-border-width-small);
257
258
  --syn-progress-indicator-color: var(--syn-color-primary-500);
258
259
  --syn-progress-track-color: var(--syn-color-neutral-300);
260
+ --syn-range-color-inactive: var(--syn-color-neutral-300);
261
+ --syn-range-error-color: var(--syn-color-error-600);
262
+ --syn-range-tick-color: var(--syn-color-neutral-600);
263
+ --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
264
+ --syn-readonly-background-color: var(--syn-color-neutral-300);
259
265
  --syn-spacing-2x-large: 48px;
260
266
  --syn-spacing-2x-small: 4px;
261
267
  --syn-spacing-3x-large: 64px;
@@ -274,8 +280,8 @@
274
280
  --syn-table-background-color-alternating: var(--syn-color-neutral-200);
275
281
  --syn-table-background-color-header: var(--syn-color-neutral-300);
276
282
  --syn-table-border-color: var(--syn-color-neutral-300);
277
- --syn-table-shadow-end: rgba(0, 0, 0, 0);
278
- --syn-table-shadow-start: rgba(0, 0, 0, 0.8);
283
+ --syn-table-shadow-end: rgba(13, 13, 13, 0);
284
+ --syn-table-shadow-start: rgba(13, 13, 13, 0.8);
279
285
  --syn-text-decoration-default: none;
280
286
  --syn-text-decoration-underline: underline;
281
287
  --syn-toggle-size-large: var(--syn-spacing-large);
@@ -302,15 +308,15 @@
302
308
  --syn-z-index-dropdown: 900; /** Shoelace compatibility DO NOT USE */
303
309
  --syn-z-index-toast: 950; /** Shoelace compatibility DO NOT USE */
304
310
  --syn-z-index-tooltip: 1000; /** Shoelace compatibility DO NOT USE */
305
- --syn-shadow-medium: 0px 1px 2px 0px rgba(0, 0, 0, 0.08), 0px 1px 4px 0px rgba(0, 0, 0, 0.08), 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
306
- --syn-shadow-large: 0px 0px 3px 0px rgba(0, 0, 0, 0.12), 0px 2px 6px 0px rgba(0, 0, 0, 0.12), 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
307
- --syn-shadow-x-large: 0px 1px 4px 0px rgba(0, 0, 0, 0.12), 0px 8px 24px 0px rgba(0, 0, 0, 0.12), 0px 16px 48px 0px rgba(0, 0, 0, 0.16);
308
- --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(0, 0, 0, 0.12), 0px 3px 8px 0px rgba(0, 0, 0, 0.12), 0px 4px 12px 0px rgba(0, 0, 0, 0.16);
309
- --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(0, 0, 0, 0.12), 0px -3px 8px 0px rgba(0, 0, 0, 0.12), 0px -4px 12px 0px rgba(0, 0, 0, 0.16);
310
- --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(0, 0, 0, 0.12), -3px 0px 8px 0px rgba(0, 0, 0, 0.12), -4px 0px 12px 0px rgba(0, 0, 0, 0.16);
311
- --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(0, 0, 0, 0.12), 3px 0px 8px 0px rgba(0, 0, 0, 0.12), 4px 0px 12px 0px rgba(0, 0, 0, 0.16);
312
- --syn-shadow-x-small: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 4px 0px rgba(0, 0, 0, 0.04), 0px 2px 8px 0px rgba(0, 0, 0, 0.04);
313
- --syn-shadow-small: 0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 8px 0px rgba(0, 0, 0, 0.06);
311
+ --syn-shadow-medium: 0px 1px 2px 0px rgba(13, 13, 13, 0.08), 0px 1px 4px 0px rgba(13, 13, 13, 0.08), 0px 2px 8px 0px rgba(13, 13, 13, 0.08);
312
+ --syn-shadow-large: 0px 0px 3px 0px rgba(13, 13, 13, 0.12), 0px 2px 6px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.16);
313
+ --syn-shadow-x-large: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 8px 24px 0px rgba(13, 13, 13, 0.12), 0px 16px 48px 0px rgba(13, 13, 13, 0.16);
314
+ --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.12), 0px 4px 12px 0px rgba(13, 13, 13, 0.16);
315
+ --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(13, 13, 13, 0.12), 0px -3px 8px 0px rgba(13, 13, 13, 0.12), 0px -4px 12px 0px rgba(13, 13, 13, 0.16);
316
+ --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(13, 13, 13, 0.12), -3px 0px 8px 0px rgba(13, 13, 13, 0.12), -4px 0px 12px 0px rgba(13, 13, 13, 0.16);
317
+ --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(13, 13, 13, 0.12), 3px 0px 8px 0px rgba(13, 13, 13, 0.12), 4px 0px 12px 0px rgba(13, 13, 13, 0.16);
318
+ --syn-shadow-x-small: 0px 1px 2px 0px rgba(13, 13, 13, 0.04), 0px 1px 4px 0px rgba(13, 13, 13, 0.04), 0px 2px 8px 0px rgba(13, 13, 13, 0.04);
319
+ --syn-shadow-small: 0px 1px 2px 0px rgba(13, 13, 13, 0.06), 0px 1px 4px 0px rgba(13, 13, 13, 0.06), 0px 2px 8px 0px rgba(13, 13, 13, 0.06);
314
320
  --syn-body-x-small-regular: 400 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
315
321
  --syn-body-x-small-semibold: 600 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
316
322
  --syn-body-x-small-bold: 600 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
package/metadata/packages/tokens/sick2025_light.css CHANGED
@@ -173,6 +173,7 @@
173
173
  --syn-input-border-color-focus: var(--syn-color-primary-700);
174
174
  --syn-input-border-color-focus-error: var(--syn-color-error-600);
175
175
  --syn-input-border-color-hover: var(--syn-color-primary-700);
176
+ --syn-input-border-color-offset: var(--syn-panel-background-color);
176
177
  --syn-input-border-radius-large: var(--syn-border-radius-medium);
177
178
  --syn-input-border-radius-medium: var(--syn-border-radius-medium);
178
179
  --syn-input-border-radius-small: var(--syn-border-radius-medium);
@@ -210,10 +211,10 @@
210
211
  --syn-input-placeholder-color: var(--syn-color-neutral-700);
211
212
  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-700);
212
213
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
213
- --syn-input-readonly-background-color: #e6e1dc;
214
- --syn-input-readonly-background-color-disabled: #e6e1dc;
215
- --syn-input-readonly-background-color-focus: #e6e1dc;
216
- --syn-input-readonly-background-color-hover: #e6e1dc;
214
+ --syn-input-readonly-background-color: var(--syn-readonly-background-color);
215
+ --syn-input-readonly-background-color-disabled: var(--syn-readonly-background-color);
216
+ --syn-input-readonly-background-color-focus: var(--syn-readonly-background-color);
217
+ --syn-input-readonly-background-color-hover: var(--syn-readonly-background-color);
217
218
  --syn-input-required-content: "*";
218
219
  --syn-input-required-content-color: var(--syn-input-label-color);
219
220
  --syn-input-required-content-offset: -2px;
@@ -256,6 +257,11 @@
256
257
  --syn-panel-border-width: var(--syn-border-width-small);
257
258
  --syn-progress-indicator-color: var(--syn-color-primary-700);
258
259
  --syn-progress-track-color: var(--syn-color-neutral-100);
260
+ --syn-range-color-inactive: var(--syn-color-neutral-100);
261
+ --syn-range-error-color: var(--syn-color-error-600);
262
+ --syn-range-tick-color: var(--syn-color-neutral-500);
263
+ --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
264
+ --syn-readonly-background-color: #e6e1dc;
259
265
  --syn-spacing-2x-large: 48px;
260
266
  --syn-spacing-2x-small: 4px;
261
267
  --syn-spacing-3x-large: 64px;
package/package.json CHANGED
@@ -28,11 +28,11 @@
28
28
  "serve-handler": "^6.1.6",
29
29
  "ts-jest": "^29.4.0",
30
30
  "typescript": "^5.9.3",
31
- "@synergy-design-system/docs": "0.1.0",
31
+ "@synergy-design-system/components": "2.60.0",
32
32
  "@synergy-design-system/eslint-config-syn": "^0.1.0",
33
- "@synergy-design-system/components": "2.59.0",
33
+ "@synergy-design-system/docs": "0.1.0",
34
34
  "@synergy-design-system/styles": "1.9.0",
35
- "@synergy-design-system/tokens": "^2.40.0"
35
+ "@synergy-design-system/tokens": "^2.41.0"
36
36
  },
37
37
  "exports": {
38
38
  ".": {
@@ -66,7 +66,7 @@
66
66
  "directory": "packages/mcp"
67
67
  },
68
68
  "type": "module",
69
- "version": "1.21.1",
69
+ "version": "1.22.0",
70
70
  "scripts": {
71
71
  "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
72
72
  "build:all": "pnpm run build && pnpm run build:storybook",