@synergy-design-system/tokens 2.44.0 → 2.46.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 (16) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/js/index.d.ts +36 -1
  3. package/dist/js/index.js +36 -1
  4. package/dist/scss/_tokens.scss +8 -1
  5. package/dist/themes/dark.css +10 -3
  6. package/dist/themes/light.css +10 -3
  7. package/dist/themes/sick2018_dark.css +10 -3
  8. package/dist/themes/sick2018_light.css +10 -3
  9. package/dist/themes/sick2025_dark.css +12 -5
  10. package/dist/themes/sick2025_light.css +14 -7
  11. package/package.json +1 -1
  12. package/src/figma-tokens/_docs.json +10 -0
  13. package/src/figma-variables/output/sick2018-dark.json +38 -4
  14. package/src/figma-variables/output/sick2018-light.json +37 -3
  15. package/src/figma-variables/output/sick2025-dark.json +39 -5
  16. package/src/figma-variables/output/sick2025-light.json +41 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
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
+
14
+ ## 2.45.0
15
+
16
+ ### Minor Changes
17
+
18
+ - [#1092](https://github.com/synergy-design-system/synergy-design-system/pull/1092) [`b82f1d9`](https://github.com/synergy-design-system/synergy-design-system/commit/b82f1d961aa4c2898f41b7c55eb3b7d43220878c) Thanks [@kirchsuSICKAG](https://github.com/kirchsuSICKAG)! - Released on: 2025-11-28
19
+
20
+ feat: ✨ Brand update for `syn-file` (#953)
21
+
3
22
  ## 2.44.0
4
23
 
5
24
  ### Minor Changes
package/dist/js/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.43.0
2
+ * @synergy-design-system/tokens version 2.45.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
@@ -1338,6 +1338,11 @@ export const SynRangeTrackColorActive: string;
1338
1338
  */
1339
1339
  export const SynReadonlyBackgroundColor: string;
1340
1340
 
1341
+ /**
1342
+ * Maps to the css variable `--syn-spacing-1-5x-large`
1343
+ */
1344
+ export const SynSpacing15xLarge: string;
1345
+
1341
1346
  /**
1342
1347
  * Maps to the css variable `--syn-spacing-2x-large`
1343
1348
  */
@@ -1408,6 +1413,36 @@ export const SynSpacingXSmall: string;
1408
1413
  */
1409
1414
  export const SynSpinnerOpacity: string;
1410
1415
 
1416
+ /**
1417
+ * Maps to the css variable `--syn-switch-height-large`
1418
+ */
1419
+ export const SynSwitchHeightLarge: string;
1420
+
1421
+ /**
1422
+ * Maps to the css variable `--syn-switch-height-medium`
1423
+ */
1424
+ export const SynSwitchHeightMedium: string;
1425
+
1426
+ /**
1427
+ * Maps to the css variable `--syn-switch-height-small`
1428
+ */
1429
+ export const SynSwitchHeightSmall: string;
1430
+
1431
+ /**
1432
+ * Maps to the css variable `--syn-switch-width-large`
1433
+ */
1434
+ export const SynSwitchWidthLarge: string;
1435
+
1436
+ /**
1437
+ * Maps to the css variable `--syn-switch-width-medium`
1438
+ */
1439
+ export const SynSwitchWidthMedium: string;
1440
+
1441
+ /**
1442
+ * Maps to the css variable `--syn-switch-width-small`
1443
+ */
1444
+ export const SynSwitchWidthSmall: string;
1445
+
1411
1446
  /**
1412
1447
  * Maps to the css variable `--syn-table-background-color`
1413
1448
  */
package/dist/js/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.43.0
2
+ * @synergy-design-system/tokens version 2.45.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
@@ -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/dist/scss/_tokens.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.43.0
2
+ * @synergy-design-system/tokens version 2.45.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
  $SynAlertErrorColorBackground: var(--syn-alert-error-color-background) !default;
@@ -269,6 +269,7 @@ $SynRangeErrorColor: var(--syn-range-error-color) !default;
269
269
  $SynRangeTickColor: var(--syn-range-tick-color) !default;
270
270
  $SynRangeTrackColorActive: var(--syn-range-track-color-active) !default;
271
271
  $SynReadonlyBackgroundColor: var(--syn-readonly-background-color) !default;
272
+ $SynSpacing15xLarge: var(--syn-spacing-1-5x-large) !default;
272
273
  $SynSpacing2xLarge: var(--syn-spacing-2x-large) !default;
273
274
  $SynSpacing2xSmall: var(--syn-spacing-2x-small) !default;
274
275
  $SynSpacing3xLarge: var(--syn-spacing-3x-large) !default;
@@ -283,6 +284,12 @@ $SynSpacingSmall: var(--syn-spacing-small) !default;
283
284
  $SynSpacingXLarge: var(--syn-spacing-x-large) !default;
284
285
  $SynSpacingXSmall: var(--syn-spacing-x-small) !default;
285
286
  $SynSpinnerOpacity: var(--syn-spinner-opacity) !default;
287
+ $SynSwitchHeightLarge: var(--syn-switch-height-large) !default;
288
+ $SynSwitchHeightMedium: var(--syn-switch-height-medium) !default;
289
+ $SynSwitchHeightSmall: var(--syn-switch-height-small) !default;
290
+ $SynSwitchWidthLarge: var(--syn-switch-width-large) !default;
291
+ $SynSwitchWidthMedium: var(--syn-switch-width-medium) !default;
292
+ $SynSwitchWidthSmall: var(--syn-switch-width-small) !default;
286
293
  $SynTableBackgroundColor: var(--syn-table-background-color) !default;
287
294
  $SynTableBackgroundColorAlternating: var(--syn-table-background-color-alternating) !default;
288
295
  $SynTableBackgroundColorHeader: var(--syn-table-background-color-header) !default;
package/dist/themes/dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.43.0
2
+ * @synergy-design-system/tokens version 2.45.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -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/dist/themes/light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.43.0
2
+ * @synergy-design-system/tokens version 2.45.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -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/dist/themes/sick2018_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.43.0
2
+ * @synergy-design-system/tokens version 2.45.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -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/dist/themes/sick2018_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.43.0
2
+ * @synergy-design-system/tokens version 2.45.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -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/dist/themes/sick2025_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.43.0
2
+ * @synergy-design-system/tokens version 2.45.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -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/dist/themes/sick2025_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.43.0
2
+ * @synergy-design-system/tokens version 2.45.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -225,8 +225,8 @@
225
225
  --syn-input-width: var(--syn-border-width-small);
226
226
  --syn-interactive-background-color-hover: #f2f0ed;
227
227
  --syn-interactive-emphasis-color: var(--syn-color-primary-700);
228
- --syn-interactive-emphasis-color-active: var(--syn-color-primary-950);
229
- --syn-interactive-emphasis-color-hover: var(--syn-color-primary-900);
228
+ --syn-interactive-emphasis-color-active: 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
@@ -57,7 +57,7 @@
57
57
  },
58
58
  "type": "module",
59
59
  "types": "./dist/js/index.d.ts",
60
- "version": "2.44.0",
60
+ "version": "2.46.0",
61
61
  "scripts": {
62
62
  "build": "pnpm clean && node scripts/build.js",
63
63
  "build:all": "dotenvx -q run pnpm build:_all",
package/src/figma-tokens/_docs.json CHANGED
@@ -472,6 +472,16 @@
472
472
  "value": "Use the sharp variant attribute for the Card to Use a different style.",
473
473
  "type": "text"
474
474
  }
475
+ },
476
+ "shadow": {
477
+ "title": {
478
+ "value": "Card with shadow",
479
+ "type": "text"
480
+ },
481
+ "description": {
482
+ "value": "Use the shadow attribute to add a shadow.",
483
+ "type": "text"
484
+ }
475
485
  }
476
486
  },
477
487
  "carousel-item": {
package/src/figma-variables/output/sick2018-dark.json CHANGED
@@ -1286,11 +1286,15 @@
1286
1286
  "opacity": {
1287
1287
  "color": {
1288
1288
  "type": "color",
1289
- "value": "rgba(115, 127, 133, 0.70)"
1289
+ "value": "rgba(115, 127, 133, 0.40)"
1290
1290
  }
1291
1291
  }
1292
1292
  },
1293
1293
  "spacing": {
1294
+ "1_5x-large": {
1295
+ "type": "sizing",
1296
+ "value": "40px"
1297
+ },
1294
1298
  "2x-large": {
1295
1299
  "type": "sizing",
1296
1300
  "value": "48px"
@@ -1350,6 +1354,36 @@
1350
1354
  "value": "16%"
1351
1355
  }
1352
1356
  },
1357
+ "switch": {
1358
+ "height": {
1359
+ "large": {
1360
+ "type": "sizing",
1361
+ "value": "28px"
1362
+ },
1363
+ "medium": {
1364
+ "type": "sizing",
1365
+ "value": "{spacing.large}"
1366
+ },
1367
+ "small": {
1368
+ "type": "sizing",
1369
+ "value": "{spacing.medium-large}"
1370
+ }
1371
+ },
1372
+ "width": {
1373
+ "large": {
1374
+ "type": "sizing",
1375
+ "value": "{spacing.2x-large}"
1376
+ },
1377
+ "medium": {
1378
+ "type": "sizing",
1379
+ "value": "{spacing.1_5x-large}"
1380
+ },
1381
+ "small": {
1382
+ "type": "sizing",
1383
+ "value": "{spacing.x-large}"
1384
+ }
1385
+ }
1386
+ },
1353
1387
  "table": {
1354
1388
  "background": {
1355
1389
  "color": {
@@ -1400,11 +1434,11 @@
1400
1434
  },
1401
1435
  "medium": {
1402
1436
  "type": "sizing",
1403
- "value": "{spacing.medium}"
1437
+ "value": "{spacing.medium-large}"
1404
1438
  },
1405
1439
  "small": {
1406
1440
  "type": "sizing",
1407
- "value": "14px"
1441
+ "value": "{spacing.medium}"
1408
1442
  }
1409
1443
  }
1410
1444
  },
@@ -1651,7 +1685,7 @@
1651
1685
  },
1652
1686
  "4x-large": {
1653
1687
  "type": "typography",
1654
- "value": "{font-weight.bold} 52/1.2 {font.sans}"
1688
+ "value": "{font-weight.bold} {font-size.4x-large}/1.2 {font.sans}"
1655
1689
  }
1656
1690
  }
1657
1691
  }
package/src/figma-variables/output/sick2018-light.json CHANGED
@@ -1291,6 +1291,10 @@
1291
1291
  }
1292
1292
  },
1293
1293
  "spacing": {
1294
+ "1_5x-large": {
1295
+ "type": "sizing",
1296
+ "value": "40px"
1297
+ },
1294
1298
  "2x-large": {
1295
1299
  "type": "sizing",
1296
1300
  "value": "48px"
@@ -1350,6 +1354,36 @@
1350
1354
  "value": "16%"
1351
1355
  }
1352
1356
  },
1357
+ "switch": {
1358
+ "height": {
1359
+ "large": {
1360
+ "type": "sizing",
1361
+ "value": "28px"
1362
+ },
1363
+ "medium": {
1364
+ "type": "sizing",
1365
+ "value": "{spacing.large}"
1366
+ },
1367
+ "small": {
1368
+ "type": "sizing",
1369
+ "value": "{spacing.medium-large}"
1370
+ }
1371
+ },
1372
+ "width": {
1373
+ "large": {
1374
+ "type": "sizing",
1375
+ "value": "{spacing.2x-large}"
1376
+ },
1377
+ "medium": {
1378
+ "type": "sizing",
1379
+ "value": "{spacing.1_5x-large}"
1380
+ },
1381
+ "small": {
1382
+ "type": "sizing",
1383
+ "value": "{spacing.x-large}"
1384
+ }
1385
+ }
1386
+ },
1353
1387
  "table": {
1354
1388
  "background": {
1355
1389
  "color": {
@@ -1400,11 +1434,11 @@
1400
1434
  },
1401
1435
  "medium": {
1402
1436
  "type": "sizing",
1403
- "value": "{spacing.medium}"
1437
+ "value": "{spacing.medium-large}"
1404
1438
  },
1405
1439
  "small": {
1406
1440
  "type": "sizing",
1407
- "value": "14px"
1441
+ "value": "{spacing.medium}"
1408
1442
  }
1409
1443
  }
1410
1444
  },
@@ -1651,7 +1685,7 @@
1651
1685
  },
1652
1686
  "4x-large": {
1653
1687
  "type": "typography",
1654
- "value": "{font-weight.bold} 52/1.2 {font.sans}"
1688
+ "value": "{font-weight.bold} {font-size.4x-large}/1.2 {font.sans}"
1655
1689
  }
1656
1690
  }
1657
1691
  }
package/src/figma-variables/output/sick2025-dark.json CHANGED
@@ -1134,11 +1134,11 @@
1134
1134
  "background": {
1135
1135
  "color-active": {
1136
1136
  "type": "color",
1137
- "value": "{color.neutral.1000}"
1137
+ "value": "{interactive.emphasis.color-active}"
1138
1138
  },
1139
1139
  "color-hover": {
1140
1140
  "type": "color",
1141
- "value": "{color.neutral.1000}"
1141
+ "value": "{interactive.emphasis.color-hover}"
1142
1142
  }
1143
1143
  },
1144
1144
  "check": {
@@ -1291,6 +1291,10 @@
1291
1291
  }
1292
1292
  },
1293
1293
  "spacing": {
1294
+ "1_5x-large": {
1295
+ "type": "sizing",
1296
+ "value": "40px"
1297
+ },
1294
1298
  "2x-large": {
1295
1299
  "type": "sizing",
1296
1300
  "value": "48px"
@@ -1350,6 +1354,36 @@
1350
1354
  "value": "40%"
1351
1355
  }
1352
1356
  },
1357
+ "switch": {
1358
+ "height": {
1359
+ "large": {
1360
+ "type": "sizing",
1361
+ "value": "28px"
1362
+ },
1363
+ "medium": {
1364
+ "type": "sizing",
1365
+ "value": "{spacing.large}"
1366
+ },
1367
+ "small": {
1368
+ "type": "sizing",
1369
+ "value": "{spacing.medium-large}"
1370
+ }
1371
+ },
1372
+ "width": {
1373
+ "large": {
1374
+ "type": "sizing",
1375
+ "value": "{spacing.2x-large}"
1376
+ },
1377
+ "medium": {
1378
+ "type": "sizing",
1379
+ "value": "{spacing.1_5x-large}"
1380
+ },
1381
+ "small": {
1382
+ "type": "sizing",
1383
+ "value": "{spacing.x-large}"
1384
+ }
1385
+ }
1386
+ },
1353
1387
  "table": {
1354
1388
  "background": {
1355
1389
  "color": {
@@ -1400,11 +1434,11 @@
1400
1434
  },
1401
1435
  "medium": {
1402
1436
  "type": "sizing",
1403
- "value": "{spacing.medium}"
1437
+ "value": "{spacing.medium-large}"
1404
1438
  },
1405
1439
  "small": {
1406
1440
  "type": "sizing",
1407
- "value": "14px"
1441
+ "value": "{spacing.medium}"
1408
1442
  }
1409
1443
  }
1410
1444
  },
@@ -1651,7 +1685,7 @@
1651
1685
  },
1652
1686
  "4x-large": {
1653
1687
  "type": "typography",
1654
- "value": "{font-weight.bold} 52/1.2 {font.sans}"
1688
+ "value": "{font-weight.bold} {font-size.4x-large}/1.2 {font.sans}"
1655
1689
  }
1656
1690
  }
1657
1691
  }
package/src/figma-variables/output/sick2025-light.json CHANGED
@@ -1010,11 +1010,11 @@
1010
1010
  },
1011
1011
  "color-active": {
1012
1012
  "type": "color",
1013
- "value": "{color.primary.950}"
1013
+ "value": "{color.primary.1000}"
1014
1014
  },
1015
1015
  "color-hover": {
1016
1016
  "type": "color",
1017
- "value": "{color.primary.900}"
1017
+ "value": "{color.primary.950}"
1018
1018
  }
1019
1019
  },
1020
1020
  "quiet": {
@@ -1134,11 +1134,11 @@
1134
1134
  "background": {
1135
1135
  "color-active": {
1136
1136
  "type": "color",
1137
- "value": "{color.primary.1000}"
1137
+ "value": "{interactive.emphasis.color-active}"
1138
1138
  },
1139
1139
  "color-hover": {
1140
1140
  "type": "color",
1141
- "value": "{color.primary.1000}"
1141
+ "value": "{interactive.emphasis.color-hover}"
1142
1142
  }
1143
1143
  },
1144
1144
  "check": {
@@ -1291,6 +1291,10 @@
1291
1291
  }
1292
1292
  },
1293
1293
  "spacing": {
1294
+ "1_5x-large": {
1295
+ "type": "sizing",
1296
+ "value": "40px"
1297
+ },
1294
1298
  "2x-large": {
1295
1299
  "type": "sizing",
1296
1300
  "value": "48px"
@@ -1350,6 +1354,36 @@
1350
1354
  "value": "16%"
1351
1355
  }
1352
1356
  },
1357
+ "switch": {
1358
+ "height": {
1359
+ "large": {
1360
+ "type": "sizing",
1361
+ "value": "28px"
1362
+ },
1363
+ "medium": {
1364
+ "type": "sizing",
1365
+ "value": "{spacing.large}"
1366
+ },
1367
+ "small": {
1368
+ "type": "sizing",
1369
+ "value": "{spacing.medium-large}"
1370
+ }
1371
+ },
1372
+ "width": {
1373
+ "large": {
1374
+ "type": "sizing",
1375
+ "value": "{spacing.2x-large}"
1376
+ },
1377
+ "medium": {
1378
+ "type": "sizing",
1379
+ "value": "{spacing.1_5x-large}"
1380
+ },
1381
+ "small": {
1382
+ "type": "sizing",
1383
+ "value": "{spacing.x-large}"
1384
+ }
1385
+ }
1386
+ },
1353
1387
  "table": {
1354
1388
  "background": {
1355
1389
  "color": {
@@ -1400,11 +1434,11 @@
1400
1434
  },
1401
1435
  "medium": {
1402
1436
  "type": "sizing",
1403
- "value": "{spacing.medium}"
1437
+ "value": "{spacing.medium-large}"
1404
1438
  },
1405
1439
  "small": {
1406
1440
  "type": "sizing",
1407
- "value": "14px"
1441
+ "value": "{spacing.medium}"
1408
1442
  }
1409
1443
  }
1410
1444
  },
@@ -1651,7 +1685,7 @@
1651
1685
  },
1652
1686
  "4x-large": {
1653
1687
  "type": "typography",
1654
- "value": "{font-weight.bold} 52/1.2 {font.sans}"
1688
+ "value": "{font-weight.bold} {font-size.4x-large}/1.2 {font.sans}"
1655
1689
  }
1656
1690
  }
1657
1691
  }