@synergy-design-system/mcp 1.35.0 → 1.37.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 (20) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/metadata/checksum.txt +1 -1
  3. package/metadata/packages/components/components/syn-card/component.angular.ts +14 -0
  4. package/metadata/packages/components/components/syn-card/component.custom.styles.ts +5 -0
  5. package/metadata/packages/components/components/syn-card/component.ts +4 -0
  6. package/metadata/packages/components/components/syn-card/component.vue +6 -0
  7. package/metadata/packages/components/components/syn-checkbox/component.custom.styles.ts +13 -13
  8. package/metadata/packages/components/components/syn-radio/component.custom.styles.ts +6 -4
  9. package/metadata/packages/components/components/syn-switch/component.custom.styles.ts +13 -7
  10. package/metadata/packages/components/static/CHANGELOG.md +26 -0
  11. package/metadata/packages/tokens/CHANGELOG.md +11 -0
  12. package/metadata/packages/tokens/dark.css +9 -2
  13. package/metadata/packages/tokens/index.js +35 -0
  14. package/metadata/packages/tokens/light.css +9 -2
  15. package/metadata/packages/tokens/sick2018_dark.css +9 -2
  16. package/metadata/packages/tokens/sick2018_light.css +9 -2
  17. package/metadata/packages/tokens/sick2025_dark.css +11 -4
  18. package/metadata/packages/tokens/sick2025_light.css +12 -5
  19. package/metadata/static/components/syn-card/docs.md +41 -0
  20. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # Changelog
2
2
 
3
+ ## 1.37.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#1122](https://github.com/synergy-design-system/synergy-design-system/pull/1122) [`740816b`](https://github.com/synergy-design-system/synergy-design-system/commit/740816b1a86768e7f2fed5516241bdb3a9df4ef7) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-12-11
8
+
9
+ feat: ✨ adjust sizes of form elements (#1083)
10
+ - `<syn-checkbox>` Bigger checkbox in small and medium
11
+ - `<syn-radio>` Bigger radio control in small and medium
12
+ - `<syn-switch>` Larger label and bigger switch control in all sizes
13
+
14
+ ## 1.36.0
15
+
16
+ ### Minor Changes
17
+
18
+ - [#1128](https://github.com/synergy-design-system/synergy-design-system/pull/1128) [`7de2441`](https://github.com/synergy-design-system/synergy-design-system/commit/7de244110cf55bb3788e26f65704194bfc861412) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-12-09
19
+
20
+ feat: ✨ Add a new `shadow` propertry to `<syn-card>` (#1107)
21
+
22
+ Using `<syn-card shadow></syn-card>` will draw the card with a shadow. This can be used when the card has to stand out visually, for example in dashboards.
23
+
3
24
  ## 1.35.0
4
25
 
5
26
  ### Minor Changes
package/metadata/checksum.txt CHANGED
@@ -1 +1 @@
1
- f0be49088f738fe51076f80ae4139437
1
+ c3be5df393f0cfe6983d43863f357b7e
package/metadata/packages/components/components/syn-card/component.angular.ts CHANGED
@@ -52,6 +52,20 @@ export class SynCardComponent {
52
52
  this._ngZone = ngZone;
53
53
  }
54
54
 
55
+ /**
56
+ * Draws the card with a shadow.
57
+ * Can be used when the card has to stand out visually, for example in dashboards.
58
+ */
59
+ @Input()
60
+ set shadow(v: '' | SynCard['shadow']) {
61
+ this._ngZone.runOutsideAngular(
62
+ () => (this.nativeElement.shadow = v === '' || v),
63
+ );
64
+ }
65
+ get shadow(): SynCard['shadow'] {
66
+ return this.nativeElement.shadow;
67
+ }
68
+
55
69
  /**
56
70
  * Draws the card with sharp edges.
57
71
  * Can be used e.g.
package/metadata/packages/components/components/syn-card/component.custom.styles.ts CHANGED
@@ -11,6 +11,11 @@ export default css`
11
11
  box-shadow: none;
12
12
  }
13
13
 
14
+ /** #1107: Add shadow property to card */
15
+ .card--shadow {
16
+ box-shadow: var(--syn-shadow-small);
17
+ }
18
+
14
19
  /**
15
20
  * Header adjustments
16
21
  */
package/metadata/packages/components/components/syn-card/component.ts CHANGED
@@ -43,6 +43,9 @@ export default class SynCard extends SynergyElement {
43
43
 
44
44
  private readonly hasSlotController = new HasSlotController(this, 'footer', 'header', 'image');
45
45
 
46
+ /** Draws the card with a shadow. Can be used when the card has to stand out visually, for example in dashboards. */
47
+ @property({ type: Boolean, reflect: true }) shadow = false;
48
+
46
49
  /** Draws the card with sharp edges. Can be used e.g. when nesting multiple syn-cards to create hierarchy. */
47
50
  @property({ type: Boolean, reflect: true }) sharp = false;
48
51
 
@@ -52,6 +55,7 @@ export default class SynCard extends SynergyElement {
52
55
  part="base"
53
56
  class=${classMap({
54
57
  card: true,
58
+ 'card--shadow': this.shadow,
55
59
  'card--sharp': this.sharp,
56
60
  'card--has-footer': this.hasSlotController.test('footer'),
57
61
  'card--has-image': this.hasSlotController.test('image'),
package/metadata/packages/components/components/syn-card/component.vue CHANGED
@@ -41,6 +41,12 @@ defineExpose({
41
41
 
42
42
  // Map attributes
43
43
  const props = defineProps<{
44
+ /**
45
+ * Draws the card with a shadow.
46
+ * Can be used when the card has to stand out visually, for example in dashboards.
47
+ */
48
+ shadow?: SynCard['shadow'];
49
+
44
50
  /**
45
51
  * Draws the card with sharp edges.
46
52
  * Can be used e.g.
package/metadata/packages/components/components/syn-checkbox/component.custom.styles.ts CHANGED
@@ -1,8 +1,20 @@
1
1
  import { css } from 'lit';
2
2
 
3
3
  export default css`
4
+ .checkbox {
5
+ /* #1083: This adds spacing around multi-line labels */
6
+ padding: var(--syn-spacing-2x-small) 0;
7
+ }
8
+
9
+ .checkbox--small {
10
+ padding: var(--syn-spacing-3x-small) 0;
11
+ }
12
+
4
13
  .checkbox__control {
5
14
  border-radius: var(--syn-checkbox-border-radius, var(--syn-input-border-radius-small));
15
+
16
+ /* #1083: This adds spacing around multi-line labels */
17
+ margin: 0.1em 0;
6
18
  }
7
19
 
8
20
  :host([data-user-invalid]) .checkbox__control {
@@ -42,20 +54,8 @@ export default css`
42
54
  }
43
55
 
44
56
  .checkbox__label {
57
+ align-self: center;
45
58
  line-height: var(--syn-line-height-normal);
46
59
  margin-inline-start: var(--syn-spacing-x-small);
47
- position: relative;
48
- }
49
-
50
- .checkbox--small .checkbox__label {
51
- top: -3px;
52
- }
53
-
54
- .checkbox--medium .checkbox__label {
55
- top: -3px;
56
- }
57
-
58
- .checkbox--large .checkbox__label {
59
- top: -2px;
60
60
  }
61
61
  `;
package/metadata/packages/components/components/syn-radio/component.custom.styles.ts CHANGED
@@ -6,6 +6,10 @@ export default css`
6
6
  outline-offset: var(--syn-focus-ring-width);
7
7
  }
8
8
 
9
+ .radio {
10
+ align-items: flex-start;
11
+ }
12
+
9
13
  /** #429: Use token for opacity */
10
14
  .radio--disabled {
11
15
  opacity: var(--syn-input-disabled-opacity);
@@ -42,23 +46,21 @@ export default css`
42
46
 
43
47
  /* Fix#456: Multi line radio fixes */
44
48
  .radio__label {
49
+ align-self: center;
45
50
  margin-inline-start: var(--syn-spacing-x-small);
46
- position: relative;
51
+ margin-top: -1px;
47
52
  }
48
53
 
49
54
  .radio--small .radio__label {
50
55
  font: var(--syn-body-small-regular);
51
- top: -3px;
52
56
  }
53
57
 
54
58
  .radio--medium .radio__label {
55
59
  font: var(--syn-body-medium-regular);
56
- top: -3px;
57
60
  }
58
61
 
59
62
  .radio--large .radio__label {
60
63
  font: var(--syn-body-large-regular);
61
- top: -2px;
62
64
  }
63
65
 
64
66
  /* /Fix#456 */
package/metadata/packages/components/components/syn-switch/component.custom.styles.ts CHANGED
@@ -2,21 +2,27 @@ import { css } from 'lit';
2
2
 
3
3
  export default css`
4
4
  :host([size='small']) {
5
- --height: calc(var(--syn-toggle-size-medium) + 2px);
6
- --thumb-size: var(--syn-toggle-size-small);
7
- --width: calc((var(--height) * 2) - 6px);
5
+ --height: var(--syn-switch-height-small, calc(var(--syn-toggle-size-medium) + 2px));
6
+ --thumb-size: var(--syn-toggle-size-small);
7
+ --width: var(--syn-switch-width-small, calc((var(--height) * 2) - 6px));
8
+
9
+ font-size: var(--syn-input-font-size-small);
8
10
  }
9
11
 
10
12
  :host([size='medium']) {
11
- --height: calc(var(--syn-toggle-size-medium) + 4px);
13
+ --height: var(--syn-switch-height-medium, calc(var(--syn-toggle-size-medium) + 4px));
12
14
  --thumb-size: var(--syn-toggle-size-medium);
13
- --width: calc((var(--height) * 2) - 6px);
15
+ --width: var(--syn-switch-width-medium, calc((var(--height) * 2) - 6px));
16
+
17
+ font-size: var(--syn-input-font-size-medium);
14
18
  }
15
19
 
16
20
  :host([size='large']) {
17
- --height: calc(var(--syn-toggle-size-large) + 4px);
21
+ --height: var(--syn-switch-height-large, calc(var(--syn-toggle-size-large) + 4px));
18
22
  --thumb-size: var(--syn-toggle-size-large);
19
- --width: calc((var(--height) * 2) - 6px);
23
+ --width: var(--syn-switch-width-large, calc((var(--height) * 2) - 6px));
24
+
25
+ font-size: var(--syn-input-font-size-large);
20
26
  }
21
27
 
22
28
  /** #429: Use token for opacity */
package/metadata/packages/components/static/CHANGELOG.md CHANGED
@@ -1,5 +1,31 @@
1
1
  # Changelog
2
2
 
3
+ ## 2.73.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#1122](https://github.com/synergy-design-system/synergy-design-system/pull/1122) [`740816b`](https://github.com/synergy-design-system/synergy-design-system/commit/740816b1a86768e7f2fed5516241bdb3a9df4ef7) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-12-11
8
+
9
+ feat: ✨ adjust sizes of form elements (#1083)
10
+ - `<syn-checkbox>` Bigger checkbox in small and medium
11
+ - `<syn-radio>` Bigger radio control in small and medium
12
+ - `<syn-switch>` Larger label and bigger switch control in all sizes
13
+
14
+ ### Patch Changes
15
+
16
+ - Updated dependencies [[`740816b`](https://github.com/synergy-design-system/synergy-design-system/commit/740816b1a86768e7f2fed5516241bdb3a9df4ef7)]:
17
+ - @synergy-design-system/tokens@2.46.0
18
+
19
+ ## 2.72.0
20
+
21
+ ### Minor Changes
22
+
23
+ - [#1128](https://github.com/synergy-design-system/synergy-design-system/pull/1128) [`7de2441`](https://github.com/synergy-design-system/synergy-design-system/commit/7de244110cf55bb3788e26f65704194bfc861412) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-12-09
24
+
25
+ feat: ✨ Add a new `shadow` propertry to `<syn-card>` (#1107)
26
+
27
+ Using `<syn-card shadow></syn-card>` will draw the card with a shadow. This can be used when the card has to stand out visually, for example in dashboards.
28
+
3
29
  ## 2.71.0
4
30
 
5
31
  ### Minor Changes
package/metadata/packages/tokens/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # Changelog
2
2
 
3
+ ## 2.46.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#1122](https://github.com/synergy-design-system/synergy-design-system/pull/1122) [`740816b`](https://github.com/synergy-design-system/synergy-design-system/commit/740816b1a86768e7f2fed5516241bdb3a9df4ef7) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-12-11
8
+
9
+ feat: ✨ adjust sizes of form elements (#1083)
10
+ - `<syn-checkbox>` Bigger checkbox in small and medium
11
+ - `<syn-radio>` Bigger radio control in small and medium
12
+ - `<syn-switch>` Larger label and bigger switch control in all sizes
13
+
3
14
  ## 2.45.0
4
15
 
5
16
  ### Minor Changes
package/metadata/packages/tokens/dark.css CHANGED
@@ -274,6 +274,7 @@
274
274
  --syn-range-tick-color: var(--syn-color-neutral-400);
275
275
  --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
276
276
  --syn-readonly-background-color: var(--syn-color-neutral-300);
277
+ --syn-spacing-1-5x-large: 40px;
277
278
  --syn-spacing-2x-large: 48px;
278
279
  --syn-spacing-2x-small: 4px;
279
280
  --syn-spacing-3x-large: 64px;
@@ -288,6 +289,12 @@
288
289
  --syn-spacing-x-large: 32px;
289
290
  --syn-spacing-x-small: 8px;
290
291
  --syn-spinner-opacity: 0.16;
292
+ --syn-switch-height-large: 28px;
293
+ --syn-switch-height-medium: var(--syn-spacing-large);
294
+ --syn-switch-height-small: var(--syn-spacing-medium-large);
295
+ --syn-switch-width-large: var(--syn-spacing-2x-large);
296
+ --syn-switch-width-medium: var(--syn-spacing-1-5x-large);
297
+ --syn-switch-width-small: var(--syn-spacing-x-large);
291
298
  --syn-table-background-color: var(--syn-panel-background-color);
292
299
  --syn-table-background-color-alternating: var(--syn-color-neutral-50);
293
300
  --syn-table-background-color-header: var(--syn-color-neutral-200);
@@ -297,8 +304,8 @@
297
304
  --syn-text-decoration-default: none;
298
305
  --syn-text-decoration-underline: underline;
299
306
  --syn-toggle-size-large: var(--syn-spacing-large);
300
- --syn-toggle-size-medium: var(--syn-spacing-medium);
301
- --syn-toggle-size-small: 14px;
307
+ --syn-toggle-size-medium: var(--syn-spacing-medium-large);
308
+ --syn-toggle-size-small: var(--syn-spacing-medium);
302
309
  --syn-tooltip-arrow-size: 9px;
303
310
  --syn-tooltip-background-color: var(--syn-color-neutral-950);
304
311
  --syn-tooltip-border-radius: var(--syn-border-radius-small);
package/metadata/packages/tokens/index.js CHANGED
@@ -1338,6 +1338,11 @@ export const SynRangeTrackColorActive = 'var(--syn-range-track-color-active)';
1338
1338
  */
1339
1339
  export const SynReadonlyBackgroundColor = 'var(--syn-readonly-background-color)';
1340
1340
 
1341
+ /**
1342
+ * @type {string}
1343
+ */
1344
+ export const SynSpacing15xLarge = 'var(--syn-spacing-1-5x-large)';
1345
+
1341
1346
  /**
1342
1347
  * @type {string}
1343
1348
  */
@@ -1408,6 +1413,36 @@ export const SynSpacingXSmall = 'var(--syn-spacing-x-small)';
1408
1413
  */
1409
1414
  export const SynSpinnerOpacity = 'var(--syn-spinner-opacity)';
1410
1415
 
1416
+ /**
1417
+ * @type {string}
1418
+ */
1419
+ export const SynSwitchHeightLarge = 'var(--syn-switch-height-large)';
1420
+
1421
+ /**
1422
+ * @type {string}
1423
+ */
1424
+ export const SynSwitchHeightMedium = 'var(--syn-switch-height-medium)';
1425
+
1426
+ /**
1427
+ * @type {string}
1428
+ */
1429
+ export const SynSwitchHeightSmall = 'var(--syn-switch-height-small)';
1430
+
1431
+ /**
1432
+ * @type {string}
1433
+ */
1434
+ export const SynSwitchWidthLarge = 'var(--syn-switch-width-large)';
1435
+
1436
+ /**
1437
+ * @type {string}
1438
+ */
1439
+ export const SynSwitchWidthMedium = 'var(--syn-switch-width-medium)';
1440
+
1441
+ /**
1442
+ * @type {string}
1443
+ */
1444
+ export const SynSwitchWidthSmall = 'var(--syn-switch-width-small)';
1445
+
1411
1446
  /**
1412
1447
  * @type {string}
1413
1448
  */
package/metadata/packages/tokens/light.css CHANGED
@@ -274,6 +274,7 @@
274
274
  --syn-range-tick-color: var(--syn-color-neutral-400);
275
275
  --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
276
276
  --syn-readonly-background-color: var(--syn-color-neutral-300);
277
+ --syn-spacing-1-5x-large: 40px;
277
278
  --syn-spacing-2x-large: 48px;
278
279
  --syn-spacing-2x-small: 4px;
279
280
  --syn-spacing-3x-large: 64px;
@@ -288,6 +289,12 @@
288
289
  --syn-spacing-x-large: 32px;
289
290
  --syn-spacing-x-small: 8px;
290
291
  --syn-spinner-opacity: 0.16;
292
+ --syn-switch-height-large: 28px;
293
+ --syn-switch-height-medium: var(--syn-spacing-large);
294
+ --syn-switch-height-small: var(--syn-spacing-medium-large);
295
+ --syn-switch-width-large: var(--syn-spacing-2x-large);
296
+ --syn-switch-width-medium: var(--syn-spacing-1-5x-large);
297
+ --syn-switch-width-small: var(--syn-spacing-x-large);
291
298
  --syn-table-background-color: var(--syn-panel-background-color);
292
299
  --syn-table-background-color-alternating: var(--syn-color-neutral-50);
293
300
  --syn-table-background-color-header: var(--syn-color-neutral-200);
@@ -297,8 +304,8 @@
297
304
  --syn-text-decoration-default: none;
298
305
  --syn-text-decoration-underline: underline;
299
306
  --syn-toggle-size-large: var(--syn-spacing-large);
300
- --syn-toggle-size-medium: var(--syn-spacing-medium);
301
- --syn-toggle-size-small: 14px;
307
+ --syn-toggle-size-medium: var(--syn-spacing-medium-large);
308
+ --syn-toggle-size-small: var(--syn-spacing-medium);
302
309
  --syn-tooltip-arrow-size: 9px;
303
310
  --syn-tooltip-background-color: var(--syn-color-neutral-950);
304
311
  --syn-tooltip-border-radius: var(--syn-border-radius-small);
package/metadata/packages/tokens/sick2018_dark.css CHANGED
@@ -274,6 +274,7 @@
274
274
  --syn-range-tick-color: var(--syn-color-neutral-400);
275
275
  --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
276
276
  --syn-readonly-background-color: var(--syn-color-neutral-300);
277
+ --syn-spacing-1-5x-large: 40px;
277
278
  --syn-spacing-2x-large: 48px;
278
279
  --syn-spacing-2x-small: 4px;
279
280
  --syn-spacing-3x-large: 64px;
@@ -288,6 +289,12 @@
288
289
  --syn-spacing-x-large: 32px;
289
290
  --syn-spacing-x-small: 8px;
290
291
  --syn-spinner-opacity: 0.16;
292
+ --syn-switch-height-large: 28px;
293
+ --syn-switch-height-medium: var(--syn-spacing-large);
294
+ --syn-switch-height-small: var(--syn-spacing-medium-large);
295
+ --syn-switch-width-large: var(--syn-spacing-2x-large);
296
+ --syn-switch-width-medium: var(--syn-spacing-1-5x-large);
297
+ --syn-switch-width-small: var(--syn-spacing-x-large);
291
298
  --syn-table-background-color: var(--syn-panel-background-color);
292
299
  --syn-table-background-color-alternating: var(--syn-color-neutral-50);
293
300
  --syn-table-background-color-header: var(--syn-color-neutral-200);
@@ -297,8 +304,8 @@
297
304
  --syn-text-decoration-default: none;
298
305
  --syn-text-decoration-underline: underline;
299
306
  --syn-toggle-size-large: var(--syn-spacing-large);
300
- --syn-toggle-size-medium: var(--syn-spacing-medium);
301
- --syn-toggle-size-small: 14px;
307
+ --syn-toggle-size-medium: var(--syn-spacing-medium-large);
308
+ --syn-toggle-size-small: var(--syn-spacing-medium);
302
309
  --syn-tooltip-arrow-size: 9px;
303
310
  --syn-tooltip-background-color: var(--syn-color-neutral-950);
304
311
  --syn-tooltip-border-radius: var(--syn-border-radius-small);
package/metadata/packages/tokens/sick2018_light.css CHANGED
@@ -274,6 +274,7 @@
274
274
  --syn-range-tick-color: var(--syn-color-neutral-400);
275
275
  --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
276
276
  --syn-readonly-background-color: var(--syn-color-neutral-300);
277
+ --syn-spacing-1-5x-large: 40px;
277
278
  --syn-spacing-2x-large: 48px;
278
279
  --syn-spacing-2x-small: 4px;
279
280
  --syn-spacing-3x-large: 64px;
@@ -288,6 +289,12 @@
288
289
  --syn-spacing-x-large: 32px;
289
290
  --syn-spacing-x-small: 8px;
290
291
  --syn-spinner-opacity: 0.16;
292
+ --syn-switch-height-large: 28px;
293
+ --syn-switch-height-medium: var(--syn-spacing-large);
294
+ --syn-switch-height-small: var(--syn-spacing-medium-large);
295
+ --syn-switch-width-large: var(--syn-spacing-2x-large);
296
+ --syn-switch-width-medium: var(--syn-spacing-1-5x-large);
297
+ --syn-switch-width-small: var(--syn-spacing-x-large);
291
298
  --syn-table-background-color: var(--syn-panel-background-color);
292
299
  --syn-table-background-color-alternating: var(--syn-color-neutral-50);
293
300
  --syn-table-background-color-header: var(--syn-color-neutral-200);
@@ -297,8 +304,8 @@
297
304
  --syn-text-decoration-default: none;
298
305
  --syn-text-decoration-underline: underline;
299
306
  --syn-toggle-size-large: var(--syn-spacing-large);
300
- --syn-toggle-size-medium: var(--syn-spacing-medium);
301
- --syn-toggle-size-small: 14px;
307
+ --syn-toggle-size-medium: var(--syn-spacing-medium-large);
308
+ --syn-toggle-size-small: var(--syn-spacing-medium);
302
309
  --syn-tooltip-arrow-size: 9px;
303
310
  --syn-tooltip-background-color: var(--syn-color-neutral-950);
304
311
  --syn-tooltip-border-radius: var(--syn-border-radius-small);
package/metadata/packages/tokens/sick2025_dark.css CHANGED
@@ -249,8 +249,8 @@
249
249
  --syn-link-underline-outline: 25%;
250
250
  --syn-logo-color: var(--syn-color-primary-300);
251
251
  --syn-opacity-50: 0.5; /** 50% */
252
- --syn-option-background-color-active: var(--syn-color-neutral-1000);
253
- --syn-option-background-color-hover: var(--syn-color-neutral-1000);
252
+ --syn-option-background-color-active: var(--syn-interactive-emphasis-color-active);
253
+ --syn-option-background-color-hover: var(--syn-interactive-emphasis-color-hover);
254
254
  --syn-option-check-color: var(--syn-interactive-quiet-color);
255
255
  --syn-option-check-color-active: var(--syn-color-neutral-0);
256
256
  --syn-option-check-color-hover: var(--syn-color-neutral-0);
@@ -274,6 +274,7 @@
274
274
  --syn-range-tick-color: var(--syn-color-neutral-600);
275
275
  --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
276
276
  --syn-readonly-background-color: var(--syn-color-neutral-300);
277
+ --syn-spacing-1-5x-large: 40px;
277
278
  --syn-spacing-2x-large: 48px;
278
279
  --syn-spacing-2x-small: 4px;
279
280
  --syn-spacing-3x-large: 64px;
@@ -288,6 +289,12 @@
288
289
  --syn-spacing-x-large: 32px;
289
290
  --syn-spacing-x-small: 8px;
290
291
  --syn-spinner-opacity: 0.4;
292
+ --syn-switch-height-large: 28px;
293
+ --syn-switch-height-medium: var(--syn-spacing-large);
294
+ --syn-switch-height-small: var(--syn-spacing-medium-large);
295
+ --syn-switch-width-large: var(--syn-spacing-2x-large);
296
+ --syn-switch-width-medium: var(--syn-spacing-1-5x-large);
297
+ --syn-switch-width-small: var(--syn-spacing-x-large);
291
298
  --syn-table-background-color: var(--syn-panel-background-color);
292
299
  --syn-table-background-color-alternating: var(--syn-color-neutral-200);
293
300
  --syn-table-background-color-header: var(--syn-color-neutral-300);
@@ -297,8 +304,8 @@
297
304
  --syn-text-decoration-default: none;
298
305
  --syn-text-decoration-underline: underline;
299
306
  --syn-toggle-size-large: var(--syn-spacing-large);
300
- --syn-toggle-size-medium: var(--syn-spacing-medium);
301
- --syn-toggle-size-small: 14px;
307
+ --syn-toggle-size-medium: var(--syn-spacing-medium-large);
308
+ --syn-toggle-size-small: var(--syn-spacing-medium);
302
309
  --syn-tooltip-arrow-size: 9px;
303
310
  --syn-tooltip-background-color: var(--syn-color-neutral-1000);
304
311
  --syn-tooltip-border-radius: var(--syn-border-radius-small);
package/metadata/packages/tokens/sick2025_light.css CHANGED
@@ -226,7 +226,7 @@
226
226
  --syn-interactive-background-color-hover: #f2f0ed;
227
227
  --syn-interactive-emphasis-color: var(--syn-color-primary-700);
228
228
  --syn-interactive-emphasis-color-active: var(--syn-color-primary-1000);
229
- --syn-interactive-emphasis-color-hover: var(--syn-color-primary-1000);
229
+ --syn-interactive-emphasis-color-hover: var(--syn-color-primary-950);
230
230
  --syn-interactive-quiet-color: var(--syn-color-neutral-950);
231
231
  --syn-interactive-quiet-color-active: var(--syn-color-primary-800);
232
232
  --syn-interactive-quiet-color-hover: var(--syn-color-primary-700);
@@ -249,8 +249,8 @@
249
249
  --syn-link-underline-outline: 25%;
250
250
  --syn-logo-color: var(--syn-color-primary-700);
251
251
  --syn-opacity-50: 0.5; /** 50% */
252
- --syn-option-background-color-active: var(--syn-color-primary-1000);
253
- --syn-option-background-color-hover: var(--syn-color-primary-1000);
252
+ --syn-option-background-color-active: var(--syn-interactive-emphasis-color-active);
253
+ --syn-option-background-color-hover: var(--syn-interactive-emphasis-color-hover);
254
254
  --syn-option-check-color: var(--syn-interactive-quiet-color);
255
255
  --syn-option-check-color-active: var(--syn-color-neutral-0);
256
256
  --syn-option-check-color-hover: var(--syn-color-neutral-0);
@@ -274,6 +274,7 @@
274
274
  --syn-range-tick-color: var(--syn-color-neutral-500);
275
275
  --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
276
276
  --syn-readonly-background-color: #e6e1dc;
277
+ --syn-spacing-1-5x-large: 40px;
277
278
  --syn-spacing-2x-large: 48px;
278
279
  --syn-spacing-2x-small: 4px;
279
280
  --syn-spacing-3x-large: 64px;
@@ -288,6 +289,12 @@
288
289
  --syn-spacing-x-large: 32px;
289
290
  --syn-spacing-x-small: 8px;
290
291
  --syn-spinner-opacity: 0.16;
292
+ --syn-switch-height-large: 28px;
293
+ --syn-switch-height-medium: var(--syn-spacing-large);
294
+ --syn-switch-height-small: var(--syn-spacing-medium-large);
295
+ --syn-switch-width-large: var(--syn-spacing-2x-large);
296
+ --syn-switch-width-medium: var(--syn-spacing-1-5x-large);
297
+ --syn-switch-width-small: var(--syn-spacing-x-large);
291
298
  --syn-table-background-color: var(--syn-panel-background-color);
292
299
  --syn-table-background-color-alternating: #f8f7f6;
293
300
  --syn-table-background-color-header: #f2f0ed;
@@ -297,8 +304,8 @@
297
304
  --syn-text-decoration-default: none;
298
305
  --syn-text-decoration-underline: underline;
299
306
  --syn-toggle-size-large: var(--syn-spacing-large);
300
- --syn-toggle-size-medium: var(--syn-spacing-medium);
301
- --syn-toggle-size-small: 14px;
307
+ --syn-toggle-size-medium: var(--syn-spacing-medium-large);
308
+ --syn-toggle-size-small: var(--syn-spacing-medium);
302
309
  --syn-tooltip-arrow-size: 9px;
303
310
  --syn-tooltip-background-color: var(--syn-color-neutral-950);
304
311
  --syn-tooltip-border-radius: var(--syn-border-radius-small);
package/metadata/static/components/syn-card/docs.md CHANGED
@@ -271,3 +271,44 @@ Use the sharp variant attribute for the Card to Use a different style.
271
271
  }
272
272
  </style>
273
273
  ```
274
+
275
+ ---
276
+
277
+ ## Card With Shadow
278
+
279
+ Use the shadow attribute to add a shadow.
280
+
281
+ ```html
282
+ <div class="shadow-card-wrapper">
283
+ <syn-card shadow="">
284
+ <img
285
+ slot="image"
286
+ src="https://synergy-design-system.github.io/card-example.jpg"
287
+ alt="Multiple persons having lunch in SICK Academy"
288
+ />
289
+ These are some happy employees, but not just any employees. These are SICK
290
+ employees.
291
+ </syn-card>
292
+ <syn-card shadow="" sharp="">
293
+ <img
294
+ slot="image"
295
+ src="https://synergy-design-system.github.io/card-example.jpg"
296
+ alt="Multiple persons having lunch in SICK Academy"
297
+ />
298
+ These are some happy employees, but not just any employees. These are SICK
299
+ employees.
300
+ </syn-card>
301
+ </div>
302
+
303
+ <style>
304
+ .shadow-card-wrapper {
305
+ display: flex;
306
+ flex-direction: row;
307
+ gap: var(--syn-spacing-large);
308
+ }
309
+
310
+ .shadow-card-wrapper syn-card {
311
+ max-width: 400px;
312
+ }
313
+ </style>
314
+ ```
package/package.json CHANGED
@@ -28,12 +28,12 @@
28
28
  "serve-handler": "^6.1.6",
29
29
  "ts-jest": "^29.4.0",
30
30
  "typescript": "^5.9.3",
31
- "@synergy-design-system/components": "2.71.0",
32
31
  "@synergy-design-system/docs": "0.1.0",
32
+ "@synergy-design-system/components": "2.73.0",
33
33
  "@synergy-design-system/eslint-config-syn": "^0.1.0",
34
34
  "@synergy-design-system/styles": "1.9.0",
35
- "@synergy-design-system/tokens": "^2.45.0",
36
- "@synergy-design-system/fonts": "1.0.0"
35
+ "@synergy-design-system/fonts": "1.0.0",
36
+ "@synergy-design-system/tokens": "^2.46.0"
37
37
  },
38
38
  "exports": {
39
39
  ".": {
@@ -67,7 +67,7 @@
67
67
  "directory": "packages/mcp"
68
68
  },
69
69
  "type": "module",
70
- "version": "1.35.0",
70
+ "version": "1.37.0",
71
71
  "scripts": {
72
72
  "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
73
73
  "build:all": "pnpm run build && pnpm run build:storybook",