@synergy-design-system/mcp 1.36.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 (15) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/metadata/checksum.txt +1 -1
  3. package/metadata/packages/components/components/syn-checkbox/component.custom.styles.ts +13 -13
  4. package/metadata/packages/components/components/syn-radio/component.custom.styles.ts +6 -4
  5. package/metadata/packages/components/components/syn-switch/component.custom.styles.ts +13 -7
  6. package/metadata/packages/components/static/CHANGELOG.md +16 -0
  7. package/metadata/packages/tokens/CHANGELOG.md +11 -0
  8. package/metadata/packages/tokens/dark.css +9 -2
  9. package/metadata/packages/tokens/index.js +35 -0
  10. package/metadata/packages/tokens/light.css +9 -2
  11. package/metadata/packages/tokens/sick2018_dark.css +9 -2
  12. package/metadata/packages/tokens/sick2018_light.css +9 -2
  13. package/metadata/packages/tokens/sick2025_dark.css +11 -4
  14. package/metadata/packages/tokens/sick2025_light.css +12 -5
  15. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
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
+
3
14
  ## 1.36.0
4
15
 
5
16
  ### Minor Changes
package/metadata/checksum.txt CHANGED
@@ -1 +1 @@
1
- 0faf5c48a9a48492eff9c2d0f5607fa0
1
+ c3be5df393f0cfe6983d43863f357b7e
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,21 @@
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
+
3
19
  ## 2.72.0
4
20
 
5
21
  ### 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/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.72.0",
32
31
  "@synergy-design-system/docs": "0.1.0",
33
- "@synergy-design-system/fonts": "1.0.0",
34
- "@synergy-design-system/styles": "1.9.0",
32
+ "@synergy-design-system/components": "2.73.0",
35
33
  "@synergy-design-system/eslint-config-syn": "^0.1.0",
36
- "@synergy-design-system/tokens": "^2.45.0"
34
+ "@synergy-design-system/styles": "1.9.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.36.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",