@synergy-design-system/mcp 1.3.1 → 1.4.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 (23) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/metadata/checksum.txt +1 -1
  3. package/metadata/packages/assets/CHANGELOG.md +7 -0
  4. package/metadata/packages/components/components/syn-input/component.custom.styles.ts +3 -3
  5. package/metadata/packages/components/components/syn-spinner/component.custom.styles.ts +2 -1
  6. package/metadata/packages/components/components/syn-textarea/component.custom.styles.ts +30 -0
  7. package/metadata/packages/components/static/CHANGELOG.md +14 -0
  8. package/metadata/packages/styles/CHANGELOG.md +7 -0
  9. package/metadata/packages/styles/index.css +15 -24
  10. package/metadata/packages/styles/link.css +2 -0
  11. package/metadata/packages/styles/tables.css +13 -24
  12. package/metadata/packages/tokens/CHANGELOG.md +7 -0
  13. package/metadata/packages/tokens/README.md +4 -2
  14. package/metadata/packages/tokens/dark.css +22 -12
  15. package/metadata/packages/tokens/index.js +56 -6
  16. package/metadata/packages/tokens/light.css +22 -12
  17. package/metadata/packages/tokens/sick2018_dark.css +22 -12
  18. package/metadata/packages/tokens/sick2018_light.css +22 -12
  19. package/metadata/packages/tokens/sick2025_dark.css +35 -25
  20. package/metadata/packages/tokens/sick2025_light.css +24 -14
  21. package/metadata/static/components/syn-combobox/docs.md +1 -9
  22. package/metadata/static/styles/syn-table-cell.md +8 -6
  23. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ # [@synergy-design-system/mcp-v1.4.0](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.3.1...mcp/1.4.0) (2025-09-23)
2
+
3
+
4
+ ### Features
5
+
6
+ * ✨ CD update for syn-spinner, syn-textarea, syn-link, syn-table ([#1010](https://github.com/synergy-design-system/synergy-design-system/issues/1010)) ([c472bab](https://github.com/synergy-design-system/synergy-design-system/commit/c472bab888e5fb9efd368456e1b8f60953970b63))
7
+
1
8
  # [@synergy-design-system/mcp-v1.3.1](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.3.0...mcp/1.3.1) (2025-08-28)
2
9
 
3
10
 
package/metadata/checksum.txt CHANGED
@@ -1 +1 @@
1
- 1bf8cb09ea1580473f1e5ea02ef90f7a
1
+ 937ba411b0317b1a01a5409e22a74ef4
package/metadata/packages/assets/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ # [@synergy-design-system/assets-v1.19.0](https://github.com/synergy-design-system/synergy-design-system/compare/assets/1.18.0...assets/1.19.0) (2025-09-12)
2
+
3
+
4
+ ### Features
5
+
6
+ * ✨ add new logos for sick2025 ([#1017](https://github.com/synergy-design-system/synergy-design-system/issues/1017)) ([d9eec10](https://github.com/synergy-design-system/synergy-design-system/commit/d9eec1045812f0538d686269254dfc33414d0667))
7
+
1
8
  # [@synergy-design-system/assets-v1.18.0](https://github.com/synergy-design-system/synergy-design-system/compare/assets/1.17.0...assets/1.18.0) (2025-08-08)
2
9
 
3
10
 
package/metadata/packages/components/components/syn-input/component.custom.styles.ts CHANGED
@@ -225,7 +225,7 @@ export default css`
225
225
  align-items: center;
226
226
  background: none;
227
227
  border: none;
228
- color: var(--syn-interactive-primary-color, var(--syn-color-primary-600));
228
+ color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
229
229
  cursor: pointer;
230
230
  display: flex;
231
231
  padding: var(--syn-spacing-x-small);
@@ -245,11 +245,11 @@ export default css`
245
245
  }
246
246
 
247
247
  .input__number-stepper-button:hover:not([disabled]) {
248
- color: var(--syn-interactive-primary-color-hover, var(--syn-color-primary-900));
248
+ color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
249
249
  }
250
250
 
251
251
  .input__number-stepper-button:active:not([disabled]) {
252
- color: var(--syn-interactive-primary-color-active, var(--syn-color-primary-950));
252
+ color: var(--syn-interactive-emphasis-color-active, var(--syn-color-primary-950));
253
253
  }
254
254
 
255
255
  .input__number-stepper-button[disabled] {
package/metadata/packages/components/components/syn-spinner/component.custom.styles.ts CHANGED
@@ -3,6 +3,7 @@ import { css } from 'lit';
3
3
  export default css`
4
4
  :host {
5
5
  --speed: var(--syn-transition-x-slow);
6
+ --indicator-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
6
7
  }
7
8
 
8
9
  .spinner__indicator {
@@ -15,7 +16,7 @@ export default css`
15
16
  */
16
17
  .spinner__track {
17
18
  filter: saturate(0);
18
- opacity: 0.16;
19
+ opacity: var(--syn-spinner-opacity, 0.16);
19
20
  stroke: var(--indicator-color);
20
21
  }
21
22
 
package/metadata/packages/components/components/syn-textarea/component.custom.styles.ts CHANGED
@@ -15,4 +15,34 @@ export default css`
15
15
  .textarea--standard.textarea--disabled {
16
16
  opacity: var(--syn-input-disabled-opacity);
17
17
  }
18
+
19
+ .textarea__control {
20
+ /*
21
+ Unfortunately we need to add a small margin to the textarea control. This is needed for the new sick 2025 theme,
22
+ as because of the big border-radius the resize icon will otherwise overlap with the border
23
+ This added margin needs to be subtracted from the padding of the textarea
24
+ */
25
+ margin: var(--syn-spacing-3x-small);
26
+ }
27
+
28
+ .textarea--small .textarea__control {
29
+ /* TODO: Wait for Design response, how to handle this left / right spacing. Design has "--syn-input-spacing-medium" for all sizes,
30
+ but we have different (coming from shoelace) */
31
+
32
+ /* We need to subtract the added margin of the textarea control from the padding */
33
+ padding: calc(var(--syn-spacing-x-small) - var(--syn-spacing-3x-small)) calc(var(--syn-input-spacing-small) - var(--syn-spacing-3x-small));
34
+ }
35
+
36
+ .textarea--medium .textarea__control {
37
+ /* We need to subtract the added margin of the textarea control from the padding */
38
+ padding: calc(var(--syn-spacing-x-small) - var(--syn-spacing-3x-small)) calc(var(--syn-input-spacing-medium) - var(--syn-spacing-3x-small));
39
+ }
40
+
41
+ .textarea--large .textarea__control {
42
+ /* TODO: Wait for Design response, how to handle this left / right spacing. Design has "--syn-input-spacing-medium" for all sizes,
43
+ but we have different (coming from shoelace) */
44
+
45
+ /* We need to subtract the added margin of the textarea control from the padding */
46
+ padding: calc(var(--syn-spacing-x-small) - var(--syn-spacing-3x-small)) calc(var(--syn-input-spacing-large) - var(--syn-spacing-3x-small));
47
+ }
18
48
  `;
package/metadata/packages/components/static/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ # [@synergy-design-system/components-v2.43.0](https://github.com/synergy-design-system/synergy-design-system/compare/components/2.42.0...components/2.43.0) (2025-09-23)
2
+
3
+
4
+ ### Features
5
+
6
+ * ✨ CD update for syn-spinner, syn-textarea, syn-link, syn-table ([#1010](https://github.com/synergy-design-system/synergy-design-system/issues/1010)) ([c472bab](https://github.com/synergy-design-system/synergy-design-system/commit/c472bab888e5fb9efd368456e1b8f60953970b63))
7
+
8
+ # [@synergy-design-system/components-v2.42.0](https://github.com/synergy-design-system/synergy-design-system/compare/components/2.41.1...components/2.42.0) (2025-09-12)
9
+
10
+
11
+ ### Features
12
+
13
+ * ✨ add new logos for sick2025 ([#1017](https://github.com/synergy-design-system/synergy-design-system/issues/1017)) ([d9eec10](https://github.com/synergy-design-system/synergy-design-system/commit/d9eec1045812f0538d686269254dfc33414d0667))
14
+
1
15
  # [@synergy-design-system/components-v2.41.1](https://github.com/synergy-design-system/synergy-design-system/compare/components/2.41.0...components/2.41.1) (2025-08-28)
2
16
 
3
17
 
package/metadata/packages/styles/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ # [@synergy-design-system/styles-v1.8.0](https://github.com/synergy-design-system/synergy-design-system/compare/styles/1.7.2...styles/1.8.0) (2025-09-23)
2
+
3
+
4
+ ### Features
5
+
6
+ * ✨ CD update for syn-spinner, syn-textarea, syn-link, syn-table ([#1010](https://github.com/synergy-design-system/synergy-design-system/issues/1010)) ([c472bab](https://github.com/synergy-design-system/synergy-design-system/commit/c472bab888e5fb9efd368456e1b8f60953970b63))
7
+
1
8
  # [@synergy-design-system/styles-v1.7.2](https://github.com/synergy-design-system/synergy-design-system/compare/styles/1.7.1...styles/1.7.2) (2025-06-20)
2
9
 
3
10
 
package/metadata/packages/styles/index.css CHANGED
@@ -23,6 +23,7 @@
23
23
  font-family: var(--syn-font-sans);
24
24
  font-size: var(--syn-link-font-size);
25
25
  text-decoration: underline;
26
+ text-underline-offset: var(--syn-link-underline-outline, initial);
26
27
  }
27
28
  .syn-link:has(syn-icon) {
28
29
  align-items: center;
@@ -39,6 +40,7 @@
39
40
  color: var(--syn-link-color-active);
40
41
  }
41
42
  .syn-link:not(.syn-link--disabled):focus-visible {
43
+ border-radius: var(--syn-focus-ring-border-radius);
42
44
  outline: var(--syn-focus-ring);
43
45
  outline-offset: var(--syn-focus-ring-offset);
44
46
  }
@@ -204,7 +206,7 @@ a.syn-link:not([href]) {
204
206
  .syn-table--default td,
205
207
  .syn-table--alternating td,
206
208
  .syn-table--border td {
207
- background-color: var(--syn-color-neutral-0);
209
+ background-color: var(--syn-table-background-color, var(--syn-color-neutral-0));
208
210
  color: var(--syn-typography-color-text);
209
211
  font: var(--syn-body-small-regular);
210
212
  height: var(--syn-spacing-large);
@@ -214,29 +216,29 @@ a.syn-link:not([href]) {
214
216
  }
215
217
  .syn-table-cell--alternating,
216
218
  .syn-table--alternating tr:nth-child(even) > td {
217
- background-color: var(--syn-color-neutral-50);
219
+ background-color: var(--syn-table-background-color-alternating, var(--syn-color-neutral-50));
218
220
  }
219
221
  /* Border */
220
222
  .syn-table-cell--border-start {
221
- border-inline-start: var(--syn-border-width-small) solid var(--syn-color-neutral-300);
223
+ border-inline-start: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
222
224
  }
223
225
  .syn-table-cell--border-end,
224
226
  .syn-table--border tr > td:not(:last-child) {
225
- border-inline-end: var(--syn-border-width-small) solid var(--syn-color-neutral-300);
227
+ border-inline-end: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
226
228
  }
227
229
  .syn-table-cell--border-top {
228
- border-top: var(--syn-border-width-small) solid var(--syn-color-neutral-300);
230
+ border-top: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
229
231
  }
230
232
  .syn-table-cell--border-bottom,
231
233
  .syn-table--border tr:not(:last-child) > td {
232
- border-bottom: var(--syn-border-width-small) solid var(--syn-color-neutral-300);
234
+ border-bottom: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
233
235
  }
234
236
  /* Header */
235
237
  .syn-table-cell--header,
236
238
  .syn-table--default th,
237
239
  .syn-table--alternating th,
238
240
  .syn-table--border th {
239
- background-color: var(--syn-color-neutral-200);
241
+ background-color: var(--syn-table-background-color-header, var(--syn-color-neutral-200));
240
242
  color: var(--syn-typography-color-text);
241
243
  font: var(--syn-body-small-semibold);
242
244
  height: var(--syn-spacing-large);
@@ -249,9 +251,8 @@ a.syn-link:not([href]) {
249
251
  .syn-table-cell--shadow-top::after,
250
252
  .syn-table-cell--shadow-start::after,
251
253
  .syn-table-cell--shadow-end::after {
252
- /* Fallback for no color-mix support */
253
- --shadow-start: rgb(49 55 58 / 0%) ;
254
- --shadow-end: rgb(49 55 58 / 15%);
254
+ --shadow-start: var(--syn-table-shadow-start, rgb(49 55 58 / 15%));
255
+ --shadow-end: var(--syn-table-shadow-end, rgb(49 55 58 / 0%));
255
256
 
256
257
  content: '';
257
258
  opacity: 0;
@@ -261,16 +262,6 @@ a.syn-link:not([href]) {
261
262
  transition-property: opacity;
262
263
  transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
263
264
  }
264
- /* I can not use var(--syn-color-neutral-950) here for some reason and therefore `grey`is used. If doing this, the fallback will not be used */
265
- @supports (background: color-mix(in srgb, grey 0%, transparent)) {
266
- .syn-table-cell--shadow-bottom::after,
267
- .syn-table-cell--shadow-top::after,
268
- .syn-table-cell--shadow-start::after,
269
- .syn-table-cell--shadow-end::after {
270
- --shadow-start: color-mix(in srgb, var(--syn-color-neutral-950) 0%, transparent);
271
- --shadow-end: color-mix(in srgb, var(--syn-color-neutral-950) 15%, transparent);
272
- }
273
- }
274
265
  .syn-table-cell--shadow-bottom::after,
275
266
  .syn-table-cell--shadow-top::after {
276
267
  height: var(--syn-spacing-x-small);
@@ -284,23 +275,23 @@ a.syn-link:not([href]) {
284
275
  width: var(--syn-spacing-x-small);
285
276
  }
286
277
  .syn-table-cell--shadow-bottom::after {
287
- background: linear-gradient(0deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
278
+ background: linear-gradient(180deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
288
279
  bottom: calc(var(--syn-spacing-x-small) * -1);
289
280
  }
290
281
  .syn-table-cell--shadow-top::after {
291
- background: linear-gradient(180deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
282
+ background: linear-gradient(0deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
292
283
  top: calc(var(--syn-spacing-x-small) * -1);
293
284
  }
294
285
  .syn-table-cell--shadow-start::after,
295
286
  :dir(rtl) .syn-table-cell--shadow-end::after {
296
- background: linear-gradient(90deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
287
+ background: linear-gradient(270deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
297
288
  left: calc(var(--syn-spacing-x-small) * -1);
298
289
  right: unset;
299
290
  }
300
291
  /* stylelint-disable-next-line no-descending-specificity */
301
292
  .syn-table-cell--shadow-end::after,
302
293
  :dir(rtl) .syn-table-cell--shadow-start::after {
303
- background: linear-gradient(270deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
294
+ background: linear-gradient(90deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
304
295
  left: unset;
305
296
  right: calc(var(--syn-spacing-x-small) * -1);
306
297
  }
package/metadata/packages/styles/link.css CHANGED
@@ -23,6 +23,7 @@
23
23
  font-family: var(--syn-font-sans);
24
24
  font-size: var(--syn-link-font-size);
25
25
  text-decoration: underline;
26
+ text-underline-offset: var(--syn-link-underline-outline, initial);
26
27
  }
27
28
  .syn-link:has(syn-icon) {
28
29
  align-items: center;
@@ -39,6 +40,7 @@
39
40
  color: var(--syn-link-color-active);
40
41
  }
41
42
  .syn-link:not(.syn-link--disabled):focus-visible {
43
+ border-radius: var(--syn-focus-ring-border-radius);
42
44
  outline: var(--syn-focus-ring);
43
45
  outline-offset: var(--syn-focus-ring-offset);
44
46
  }
package/metadata/packages/styles/tables.css CHANGED
@@ -38,7 +38,7 @@
38
38
  .syn-table--default td,
39
39
  .syn-table--alternating td,
40
40
  .syn-table--border td {
41
- background-color: var(--syn-color-neutral-0);
41
+ background-color: var(--syn-table-background-color, var(--syn-color-neutral-0));
42
42
  color: var(--syn-typography-color-text);
43
43
  font: var(--syn-body-small-regular);
44
44
  height: var(--syn-spacing-large);
@@ -48,29 +48,29 @@
48
48
  }
49
49
  .syn-table-cell--alternating,
50
50
  .syn-table--alternating tr:nth-child(even) > td {
51
- background-color: var(--syn-color-neutral-50);
51
+ background-color: var(--syn-table-background-color-alternating, var(--syn-color-neutral-50));
52
52
  }
53
53
  /* Border */
54
54
  .syn-table-cell--border-start {
55
- border-inline-start: var(--syn-border-width-small) solid var(--syn-color-neutral-300);
55
+ border-inline-start: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
56
56
  }
57
57
  .syn-table-cell--border-end,
58
58
  .syn-table--border tr > td:not(:last-child) {
59
- border-inline-end: var(--syn-border-width-small) solid var(--syn-color-neutral-300);
59
+ border-inline-end: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
60
60
  }
61
61
  .syn-table-cell--border-top {
62
- border-top: var(--syn-border-width-small) solid var(--syn-color-neutral-300);
62
+ border-top: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
63
63
  }
64
64
  .syn-table-cell--border-bottom,
65
65
  .syn-table--border tr:not(:last-child) > td {
66
- border-bottom: var(--syn-border-width-small) solid var(--syn-color-neutral-300);
66
+ border-bottom: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
67
67
  }
68
68
  /* Header */
69
69
  .syn-table-cell--header,
70
70
  .syn-table--default th,
71
71
  .syn-table--alternating th,
72
72
  .syn-table--border th {
73
- background-color: var(--syn-color-neutral-200);
73
+ background-color: var(--syn-table-background-color-header, var(--syn-color-neutral-200));
74
74
  color: var(--syn-typography-color-text);
75
75
  font: var(--syn-body-small-semibold);
76
76
  height: var(--syn-spacing-large);
@@ -83,9 +83,8 @@
83
83
  .syn-table-cell--shadow-top::after,
84
84
  .syn-table-cell--shadow-start::after,
85
85
  .syn-table-cell--shadow-end::after {
86
- /* Fallback for no color-mix support */
87
- --shadow-start: rgb(49 55 58 / 0%) ;
88
- --shadow-end: rgb(49 55 58 / 15%);
86
+ --shadow-start: var(--syn-table-shadow-start, rgb(49 55 58 / 15%));
87
+ --shadow-end: var(--syn-table-shadow-end, rgb(49 55 58 / 0%));
89
88
 
90
89
  content: '';
91
90
  opacity: 0;
@@ -95,16 +94,6 @@
95
94
  transition-property: opacity;
96
95
  transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
97
96
  }
98
- /* I can not use var(--syn-color-neutral-950) here for some reason and therefore `grey`is used. If doing this, the fallback will not be used */
99
- @supports (background: color-mix(in srgb, grey 0%, transparent)) {
100
- .syn-table-cell--shadow-bottom::after,
101
- .syn-table-cell--shadow-top::after,
102
- .syn-table-cell--shadow-start::after,
103
- .syn-table-cell--shadow-end::after {
104
- --shadow-start: color-mix(in srgb, var(--syn-color-neutral-950) 0%, transparent);
105
- --shadow-end: color-mix(in srgb, var(--syn-color-neutral-950) 15%, transparent);
106
- }
107
- }
108
97
  .syn-table-cell--shadow-bottom::after,
109
98
  .syn-table-cell--shadow-top::after {
110
99
  height: var(--syn-spacing-x-small);
@@ -118,23 +107,23 @@
118
107
  width: var(--syn-spacing-x-small);
119
108
  }
120
109
  .syn-table-cell--shadow-bottom::after {
121
- background: linear-gradient(0deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
110
+ background: linear-gradient(180deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
122
111
  bottom: calc(var(--syn-spacing-x-small) * -1);
123
112
  }
124
113
  .syn-table-cell--shadow-top::after {
125
- background: linear-gradient(180deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
114
+ background: linear-gradient(0deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
126
115
  top: calc(var(--syn-spacing-x-small) * -1);
127
116
  }
128
117
  .syn-table-cell--shadow-start::after,
129
118
  :dir(rtl) .syn-table-cell--shadow-end::after {
130
- background: linear-gradient(90deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
119
+ background: linear-gradient(270deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
131
120
  left: calc(var(--syn-spacing-x-small) * -1);
132
121
  right: unset;
133
122
  }
134
123
  /* stylelint-disable-next-line no-descending-specificity */
135
124
  .syn-table-cell--shadow-end::after,
136
125
  :dir(rtl) .syn-table-cell--shadow-start::after {
137
- background: linear-gradient(270deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
126
+ background: linear-gradient(90deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
138
127
  left: unset;
139
128
  right: calc(var(--syn-spacing-x-small) * -1);
140
129
  }
package/metadata/packages/tokens/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ # [@synergy-design-system/tokens-v2.25.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.24.0...tokens/2.25.0) (2025-09-23)
2
+
3
+
4
+ ### Features
5
+
6
+ * ✨ CD update for syn-spinner, syn-textarea, syn-link, syn-table ([#1010](https://github.com/synergy-design-system/synergy-design-system/issues/1010)) ([c472bab](https://github.com/synergy-design-system/synergy-design-system/commit/c472bab888e5fb9efd368456e1b8f60953970b63))
7
+
1
8
  # [@synergy-design-system/tokens-v2.24.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.23.0...tokens/2.24.0) (2025-08-28)
2
9
 
3
10
 
package/metadata/packages/tokens/README.md CHANGED
@@ -253,6 +253,9 @@ pnpm build:styles
253
253
 
254
254
  # Process transformed tokens with Style Dictionary (build final output)
255
255
  pnpm build
256
+
257
+ # Or do it all at once
258
+ FIGMA_FILE_ID="FILE_ID" FIGMA_TOKEN="FIGMA_TOKEN" pnpm build:all
256
259
  ```
257
260
 
258
261
  #### Figma variables
@@ -405,8 +408,7 @@ After the new / updated tokens are fetched and build:
405
408
 
406
409
  ```bash
407
410
  # Copy the newly built files to serve as new reference files
408
- cp dist/themes/light.css test/light.css
409
- cp dist/themes/dark.css test/dark.css
411
+ cp dist/themes/sick*.css test
410
412
  ```
411
413
 
412
414
  4. **Verify the update**: Run the test again to ensure everything matches
package/metadata/packages/tokens/dark.css CHANGED
@@ -96,6 +96,7 @@
96
96
  --syn-duration-fast: 150ms;
97
97
  --syn-duration-normal: 250ms;
98
98
  --syn-duration-slow: 500ms;
99
+ --syn-focus-ring-border-radius: 0px;
99
100
  --syn-focus-ring-color: var(--syn-color-primary-400);
100
101
  --syn-focus-ring-offset: var(--syn-spacing-3x-small);
101
102
  --syn-focus-ring-style: solid;
@@ -179,12 +180,12 @@
179
180
  --syn-input-spacing-medium: var(--syn-spacing-medium);
180
181
  --syn-input-spacing-small: var(--syn-spacing-small);
181
182
  --syn-input-width: var(--syn-border-width-small);
182
- --syn-interactive-primary-color: var(--syn-color-primary-600);
183
- --syn-interactive-primary-color-active: var(--syn-color-neutral-950);
184
- --syn-interactive-primary-color-hover: var(--syn-color-primary-900);
185
- --syn-interactive-secondary-color: var(--syn-color-neutral-950);
186
- --syn-interactive-secondary-color-active: var(--syn-color-primary-600);
187
- --syn-interactive-secondary-color-hover: var(--syn-color-primary-600);
183
+ --syn-interactive-emphasis-color: var(--syn-color-primary-600);
184
+ --syn-interactive-emphasis-color-active: var(--syn-color-primary-950);
185
+ --syn-interactive-emphasis-color-hover: var(--syn-color-primary-900);
186
+ --syn-interactive-quiet-color: var(--syn-color-neutral-950);
187
+ --syn-interactive-quiet-color-active: var(--syn-color-primary-700);
188
+ --syn-interactive-quiet-color-hover: var(--syn-color-primary-600);
188
189
  --syn-letter-spacing-dense: -0.24px; /** Shoelace compatibility DO NOT USE */
189
190
  --syn-letter-spacing-denser: -0.48px; /** Shoelace compatibility DO NOT USE */
190
191
  --syn-letter-spacing-loose: 1.2px; /** Shoelace compatibility DO NOT USE */
@@ -195,16 +196,18 @@
195
196
  --syn-line-height-loose: 1.8; /** Shoelace compatibility DO NOT USE */
196
197
  --syn-line-height-looser: 2.2; /** Shoelace compatibility DO NOT USE */
197
198
  --syn-line-height-normal: 1.4; /** Shoelace compatibility DO NOT USE */
198
- --syn-link-color: var(--syn-color-primary-600);
199
- --syn-link-color-active: var(--syn-color-primary-950);
200
- --syn-link-color-hover: var(--syn-color-primary-900);
201
- --syn-link-quiet-color: var(--syn-typography-color-text);
202
- --syn-link-quiet-color-active: var(--syn-color-primary-950);
203
- --syn-link-quiet-color-hover: var(--syn-color-primary-900);
199
+ --syn-link-color: var(--syn-interactive-emphasis-color);
200
+ --syn-link-color-active: var(--syn-interactive-emphasis-color-active);
201
+ --syn-link-color-hover: var(--syn-interactive-emphasis-color-hover);
202
+ --syn-link-quiet-color: var(--syn-interactive-quiet-color);
203
+ --syn-link-quiet-color-active: var(--syn-interactive-quiet-color-active);
204
+ --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
205
+ --syn-link-underline-outline: 7%;
204
206
  --syn-opacity-50: 0.5; /** 50% */
205
207
  --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
206
208
  --syn-panel-background-color: var(--syn-color-neutral-0);
207
209
  --syn-panel-border-color: var(--syn-color-neutral-300);
210
+ --syn-panel-border-radius: var(--syn-border-radius-medium);
208
211
  --syn-panel-border-width: var(--syn-border-width-small);
209
212
  --syn-spacing-2x-large: 48px;
210
213
  --syn-spacing-2x-small: 4px;
@@ -219,6 +222,13 @@
219
222
  --syn-spacing-small: 12px;
220
223
  --syn-spacing-x-large: 32px;
221
224
  --syn-spacing-x-small: 8px;
225
+ --syn-spinner-opacity: 0.16;
226
+ --syn-table-background-color: var(--syn-panel-background-color);
227
+ --syn-table-background-color-alternating: var(--syn-color-neutral-50);
228
+ --syn-table-background-color-header: var(--syn-color-neutral-200);
229
+ --syn-table-border-color: var(--syn-color-neutral-300);
230
+ --syn-table-shadow-end: rgba(49, 55, 58, 0);
231
+ --syn-table-shadow-start: rgba(49, 55, 58, 0.16);
222
232
  --syn-text-decoration-default: none;
223
233
  --syn-text-decoration-underline: underline;
224
234
  --syn-toggle-size-large: var(--syn-spacing-large);
package/metadata/packages/tokens/index.js CHANGED
@@ -448,6 +448,11 @@ export const SynDurationNormal = 'var(--syn-duration-normal)';
448
448
  */
449
449
  export const SynDurationSlow = 'var(--syn-duration-slow)';
450
450
 
451
+ /**
452
+ * @type {string}
453
+ */
454
+ export const SynFocusRingBorderRadius = 'var(--syn-focus-ring-border-radius)';
455
+
451
456
  /**
452
457
  * @type {string}
453
458
  */
@@ -866,32 +871,32 @@ export const SynInputWidth = 'var(--syn-input-width)';
866
871
  /**
867
872
  * @type {string}
868
873
  */
869
- export const SynInteractivePrimaryColor = 'var(--syn-interactive-primary-color)';
874
+ export const SynInteractiveEmphasisColor = 'var(--syn-interactive-emphasis-color)';
870
875
 
871
876
  /**
872
877
  * @type {string}
873
878
  */
874
- export const SynInteractivePrimaryColorActive = 'var(--syn-interactive-primary-color-active)';
879
+ export const SynInteractiveEmphasisColorActive = 'var(--syn-interactive-emphasis-color-active)';
875
880
 
876
881
  /**
877
882
  * @type {string}
878
883
  */
879
- export const SynInteractivePrimaryColorHover = 'var(--syn-interactive-primary-color-hover)';
884
+ export const SynInteractiveEmphasisColorHover = 'var(--syn-interactive-emphasis-color-hover)';
880
885
 
881
886
  /**
882
887
  * @type {string}
883
888
  */
884
- export const SynInteractiveSecondaryColor = 'var(--syn-interactive-secondary-color)';
889
+ export const SynInteractiveQuietColor = 'var(--syn-interactive-quiet-color)';
885
890
 
886
891
  /**
887
892
  * @type {string}
888
893
  */
889
- export const SynInteractiveSecondaryColorActive = 'var(--syn-interactive-secondary-color-active)';
894
+ export const SynInteractiveQuietColorActive = 'var(--syn-interactive-quiet-color-active)';
890
895
 
891
896
  /**
892
897
  * @type {string}
893
898
  */
894
- export const SynInteractiveSecondaryColorHover = 'var(--syn-interactive-secondary-color-hover)';
899
+ export const SynInteractiveQuietColorHover = 'var(--syn-interactive-quiet-color-hover)';
895
900
 
896
901
  /**
897
902
  * @type {string}
@@ -973,6 +978,11 @@ export const SynLinkQuietColorActive = 'var(--syn-link-quiet-color-active)';
973
978
  */
974
979
  export const SynLinkQuietColorHover = 'var(--syn-link-quiet-color-hover)';
975
980
 
981
+ /**
982
+ * @type {string}
983
+ */
984
+ export const SynLinkUnderlineOutline = 'var(--syn-link-underline-outline)';
985
+
976
986
  /**
977
987
  * @type {string}
978
988
  */
@@ -993,6 +1003,11 @@ export const SynPanelBackgroundColor = 'var(--syn-panel-background-color)';
993
1003
  */
994
1004
  export const SynPanelBorderColor = 'var(--syn-panel-border-color)';
995
1005
 
1006
+ /**
1007
+ * @type {string}
1008
+ */
1009
+ export const SynPanelBorderRadius = 'var(--syn-panel-border-radius)';
1010
+
996
1011
  /**
997
1012
  * @type {string}
998
1013
  */
@@ -1063,6 +1078,41 @@ export const SynSpacingXLarge = 'var(--syn-spacing-x-large)';
1063
1078
  */
1064
1079
  export const SynSpacingXSmall = 'var(--syn-spacing-x-small)';
1065
1080
 
1081
+ /**
1082
+ * @type {string}
1083
+ */
1084
+ export const SynSpinnerOpacity = 'var(--syn-spinner-opacity)';
1085
+
1086
+ /**
1087
+ * @type {string}
1088
+ */
1089
+ export const SynTableBackgroundColor = 'var(--syn-table-background-color)';
1090
+
1091
+ /**
1092
+ * @type {string}
1093
+ */
1094
+ export const SynTableBackgroundColorAlternating = 'var(--syn-table-background-color-alternating)';
1095
+
1096
+ /**
1097
+ * @type {string}
1098
+ */
1099
+ export const SynTableBackgroundColorHeader = 'var(--syn-table-background-color-header)';
1100
+
1101
+ /**
1102
+ * @type {string}
1103
+ */
1104
+ export const SynTableBorderColor = 'var(--syn-table-border-color)';
1105
+
1106
+ /**
1107
+ * @type {string}
1108
+ */
1109
+ export const SynTableShadowEnd = 'var(--syn-table-shadow-end)';
1110
+
1111
+ /**
1112
+ * @type {string}
1113
+ */
1114
+ export const SynTableShadowStart = 'var(--syn-table-shadow-start)';
1115
+
1066
1116
  /**
1067
1117
  * @type {string}
1068
1118
  */
package/metadata/packages/tokens/light.css CHANGED
@@ -96,6 +96,7 @@
96
96
  --syn-duration-fast: 150ms;
97
97
  --syn-duration-normal: 250ms;
98
98
  --syn-duration-slow: 500ms;
99
+ --syn-focus-ring-border-radius: 0px;
99
100
  --syn-focus-ring-color: var(--syn-color-primary-400);
100
101
  --syn-focus-ring-offset: var(--syn-spacing-3x-small);
101
102
  --syn-focus-ring-style: solid;
@@ -179,12 +180,12 @@
179
180
  --syn-input-spacing-medium: var(--syn-spacing-medium);
180
181
  --syn-input-spacing-small: var(--syn-spacing-small);
181
182
  --syn-input-width: var(--syn-border-width-small);
182
- --syn-interactive-primary-color: var(--syn-color-primary-600);
183
- --syn-interactive-primary-color-active: var(--syn-color-neutral-950);
184
- --syn-interactive-primary-color-hover: var(--syn-color-primary-900);
185
- --syn-interactive-secondary-color: var(--syn-color-neutral-950);
186
- --syn-interactive-secondary-color-active: var(--syn-color-primary-600);
187
- --syn-interactive-secondary-color-hover: var(--syn-color-primary-600);
183
+ --syn-interactive-emphasis-color: var(--syn-color-primary-600);
184
+ --syn-interactive-emphasis-color-active: var(--syn-color-primary-950);
185
+ --syn-interactive-emphasis-color-hover: var(--syn-color-primary-900);
186
+ --syn-interactive-quiet-color: var(--syn-color-neutral-950);
187
+ --syn-interactive-quiet-color-active: var(--syn-color-primary-700);
188
+ --syn-interactive-quiet-color-hover: var(--syn-color-primary-600);
188
189
  --syn-letter-spacing-dense: -0.24px; /** Shoelace compatibility DO NOT USE */
189
190
  --syn-letter-spacing-denser: -0.48px; /** Shoelace compatibility DO NOT USE */
190
191
  --syn-letter-spacing-loose: 1.2px; /** Shoelace compatibility DO NOT USE */
@@ -195,16 +196,18 @@
195
196
  --syn-line-height-loose: 1.8; /** Shoelace compatibility DO NOT USE */
196
197
  --syn-line-height-looser: 2.2; /** Shoelace compatibility DO NOT USE */
197
198
  --syn-line-height-normal: 1.4; /** Shoelace compatibility DO NOT USE */
198
- --syn-link-color: var(--syn-color-primary-600);
199
- --syn-link-color-active: var(--syn-color-primary-950);
200
- --syn-link-color-hover: var(--syn-color-primary-900);
201
- --syn-link-quiet-color: var(--syn-typography-color-text);
202
- --syn-link-quiet-color-active: var(--syn-color-primary-950);
203
- --syn-link-quiet-color-hover: var(--syn-color-primary-900);
199
+ --syn-link-color: var(--syn-interactive-emphasis-color);
200
+ --syn-link-color-active: var(--syn-interactive-emphasis-color-active);
201
+ --syn-link-color-hover: var(--syn-interactive-emphasis-color-hover);
202
+ --syn-link-quiet-color: var(--syn-interactive-quiet-color);
203
+ --syn-link-quiet-color-active: var(--syn-interactive-emphasis-color-active);
204
+ --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
205
+ --syn-link-underline-outline: 7%;
204
206
  --syn-opacity-50: 0.5; /** 50% */
205
207
  --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
206
208
  --syn-panel-background-color: var(--syn-color-neutral-0);
207
209
  --syn-panel-border-color: var(--syn-color-neutral-300);
210
+ --syn-panel-border-radius: var(--syn-border-radius-medium);
208
211
  --syn-panel-border-width: var(--syn-border-width-small);
209
212
  --syn-spacing-2x-large: 48px;
210
213
  --syn-spacing-2x-small: 4px;
@@ -219,6 +222,13 @@
219
222
  --syn-spacing-small: 12px;
220
223
  --syn-spacing-x-large: 32px;
221
224
  --syn-spacing-x-small: 8px;
225
+ --syn-spinner-opacity: 0.16;
226
+ --syn-table-background-color: var(--syn-panel-background-color);
227
+ --syn-table-background-color-alternating: var(--syn-color-neutral-50);
228
+ --syn-table-background-color-header: var(--syn-color-neutral-200);
229
+ --syn-table-border-color: var(--syn-color-neutral-300);
230
+ --syn-table-shadow-end: rgba(49, 55, 58, 0);
231
+ --syn-table-shadow-start: rgba(49, 55, 58, 0.16);
222
232
  --syn-text-decoration-default: none;
223
233
  --syn-text-decoration-underline: underline;
224
234
  --syn-toggle-size-large: var(--syn-spacing-large);
package/metadata/packages/tokens/sick2018_dark.css CHANGED
@@ -96,6 +96,7 @@
96
96
  --syn-duration-fast: 150ms;
97
97
  --syn-duration-normal: 250ms;
98
98
  --syn-duration-slow: 500ms;
99
+ --syn-focus-ring-border-radius: 0px;
99
100
  --syn-focus-ring-color: var(--syn-color-primary-400);
100
101
  --syn-focus-ring-offset: var(--syn-spacing-3x-small);
101
102
  --syn-focus-ring-style: solid;
@@ -179,12 +180,12 @@
179
180
  --syn-input-spacing-medium: var(--syn-spacing-medium);
180
181
  --syn-input-spacing-small: var(--syn-spacing-small);
181
182
  --syn-input-width: var(--syn-border-width-small);
182
- --syn-interactive-primary-color: var(--syn-color-primary-600);
183
- --syn-interactive-primary-color-active: var(--syn-color-neutral-950);
184
- --syn-interactive-primary-color-hover: var(--syn-color-primary-900);
185
- --syn-interactive-secondary-color: var(--syn-color-neutral-950);
186
- --syn-interactive-secondary-color-active: var(--syn-color-primary-600);
187
- --syn-interactive-secondary-color-hover: var(--syn-color-primary-600);
183
+ --syn-interactive-emphasis-color: var(--syn-color-primary-600);
184
+ --syn-interactive-emphasis-color-active: var(--syn-color-primary-950);
185
+ --syn-interactive-emphasis-color-hover: var(--syn-color-primary-900);
186
+ --syn-interactive-quiet-color: var(--syn-color-neutral-950);
187
+ --syn-interactive-quiet-color-active: var(--syn-color-primary-700);
188
+ --syn-interactive-quiet-color-hover: var(--syn-color-primary-600);
188
189
  --syn-letter-spacing-dense: -0.24px; /** Shoelace compatibility DO NOT USE */
189
190
  --syn-letter-spacing-denser: -0.48px; /** Shoelace compatibility DO NOT USE */
190
191
  --syn-letter-spacing-loose: 1.2px; /** Shoelace compatibility DO NOT USE */
@@ -195,16 +196,18 @@
195
196
  --syn-line-height-loose: 1.8; /** Shoelace compatibility DO NOT USE */
196
197
  --syn-line-height-looser: 2.2; /** Shoelace compatibility DO NOT USE */
197
198
  --syn-line-height-normal: 1.4; /** Shoelace compatibility DO NOT USE */
198
- --syn-link-color: var(--syn-color-primary-600);
199
- --syn-link-color-active: var(--syn-color-primary-950);
200
- --syn-link-color-hover: var(--syn-color-primary-900);
201
- --syn-link-quiet-color: var(--syn-typography-color-text);
202
- --syn-link-quiet-color-active: var(--syn-color-primary-950);
203
- --syn-link-quiet-color-hover: var(--syn-color-primary-900);
199
+ --syn-link-color: var(--syn-interactive-emphasis-color);
200
+ --syn-link-color-active: var(--syn-interactive-emphasis-color-active);
201
+ --syn-link-color-hover: var(--syn-interactive-emphasis-color-hover);
202
+ --syn-link-quiet-color: var(--syn-interactive-quiet-color);
203
+ --syn-link-quiet-color-active: var(--syn-interactive-quiet-color-active);
204
+ --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
205
+ --syn-link-underline-outline: 7%;
204
206
  --syn-opacity-50: 0.5; /** 50% */
205
207
  --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
206
208
  --syn-panel-background-color: var(--syn-color-neutral-0);
207
209
  --syn-panel-border-color: var(--syn-color-neutral-300);
210
+ --syn-panel-border-radius: var(--syn-border-radius-medium);
208
211
  --syn-panel-border-width: var(--syn-border-width-small);
209
212
  --syn-spacing-2x-large: 48px;
210
213
  --syn-spacing-2x-small: 4px;
@@ -219,6 +222,13 @@
219
222
  --syn-spacing-small: 12px;
220
223
  --syn-spacing-x-large: 32px;
221
224
  --syn-spacing-x-small: 8px;
225
+ --syn-spinner-opacity: 0.16;
226
+ --syn-table-background-color: var(--syn-panel-background-color);
227
+ --syn-table-background-color-alternating: var(--syn-color-neutral-50);
228
+ --syn-table-background-color-header: var(--syn-color-neutral-200);
229
+ --syn-table-border-color: var(--syn-color-neutral-300);
230
+ --syn-table-shadow-end: rgba(49, 55, 58, 0);
231
+ --syn-table-shadow-start: rgba(49, 55, 58, 0.16);
222
232
  --syn-text-decoration-default: none;
223
233
  --syn-text-decoration-underline: underline;
224
234
  --syn-toggle-size-large: var(--syn-spacing-large);
package/metadata/packages/tokens/sick2018_light.css CHANGED
@@ -96,6 +96,7 @@
96
96
  --syn-duration-fast: 150ms;
97
97
  --syn-duration-normal: 250ms;
98
98
  --syn-duration-slow: 500ms;
99
+ --syn-focus-ring-border-radius: 0px;
99
100
  --syn-focus-ring-color: var(--syn-color-primary-400);
100
101
  --syn-focus-ring-offset: var(--syn-spacing-3x-small);
101
102
  --syn-focus-ring-style: solid;
@@ -179,12 +180,12 @@
179
180
  --syn-input-spacing-medium: var(--syn-spacing-medium);
180
181
  --syn-input-spacing-small: var(--syn-spacing-small);
181
182
  --syn-input-width: var(--syn-border-width-small);
182
- --syn-interactive-primary-color: var(--syn-color-primary-600);
183
- --syn-interactive-primary-color-active: var(--syn-color-neutral-950);
184
- --syn-interactive-primary-color-hover: var(--syn-color-primary-900);
185
- --syn-interactive-secondary-color: var(--syn-color-neutral-950);
186
- --syn-interactive-secondary-color-active: var(--syn-color-primary-600);
187
- --syn-interactive-secondary-color-hover: var(--syn-color-primary-600);
183
+ --syn-interactive-emphasis-color: var(--syn-color-primary-600);
184
+ --syn-interactive-emphasis-color-active: var(--syn-color-primary-950);
185
+ --syn-interactive-emphasis-color-hover: var(--syn-color-primary-900);
186
+ --syn-interactive-quiet-color: var(--syn-color-neutral-950);
187
+ --syn-interactive-quiet-color-active: var(--syn-color-primary-700);
188
+ --syn-interactive-quiet-color-hover: var(--syn-color-primary-600);
188
189
  --syn-letter-spacing-dense: -0.24px; /** Shoelace compatibility DO NOT USE */
189
190
  --syn-letter-spacing-denser: -0.48px; /** Shoelace compatibility DO NOT USE */
190
191
  --syn-letter-spacing-loose: 1.2px; /** Shoelace compatibility DO NOT USE */
@@ -195,16 +196,18 @@
195
196
  --syn-line-height-loose: 1.8; /** Shoelace compatibility DO NOT USE */
196
197
  --syn-line-height-looser: 2.2; /** Shoelace compatibility DO NOT USE */
197
198
  --syn-line-height-normal: 1.4; /** Shoelace compatibility DO NOT USE */
198
- --syn-link-color: var(--syn-color-primary-600);
199
- --syn-link-color-active: var(--syn-color-primary-950);
200
- --syn-link-color-hover: var(--syn-color-primary-900);
201
- --syn-link-quiet-color: var(--syn-typography-color-text);
202
- --syn-link-quiet-color-active: var(--syn-color-primary-950);
203
- --syn-link-quiet-color-hover: var(--syn-color-primary-900);
199
+ --syn-link-color: var(--syn-interactive-emphasis-color);
200
+ --syn-link-color-active: var(--syn-interactive-emphasis-color-active);
201
+ --syn-link-color-hover: var(--syn-interactive-emphasis-color-hover);
202
+ --syn-link-quiet-color: var(--syn-interactive-quiet-color);
203
+ --syn-link-quiet-color-active: var(--syn-interactive-emphasis-color-active);
204
+ --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
205
+ --syn-link-underline-outline: 7%;
204
206
  --syn-opacity-50: 0.5; /** 50% */
205
207
  --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
206
208
  --syn-panel-background-color: var(--syn-color-neutral-0);
207
209
  --syn-panel-border-color: var(--syn-color-neutral-300);
210
+ --syn-panel-border-radius: var(--syn-border-radius-medium);
208
211
  --syn-panel-border-width: var(--syn-border-width-small);
209
212
  --syn-spacing-2x-large: 48px;
210
213
  --syn-spacing-2x-small: 4px;
@@ -219,6 +222,13 @@
219
222
  --syn-spacing-small: 12px;
220
223
  --syn-spacing-x-large: 32px;
221
224
  --syn-spacing-x-small: 8px;
225
+ --syn-spinner-opacity: 0.16;
226
+ --syn-table-background-color: var(--syn-panel-background-color);
227
+ --syn-table-background-color-alternating: var(--syn-color-neutral-50);
228
+ --syn-table-background-color-header: var(--syn-color-neutral-200);
229
+ --syn-table-border-color: var(--syn-color-neutral-300);
230
+ --syn-table-shadow-end: rgba(49, 55, 58, 0);
231
+ --syn-table-shadow-start: rgba(49, 55, 58, 0.16);
222
232
  --syn-text-decoration-default: none;
223
233
  --syn-text-decoration-underline: underline;
224
234
  --syn-toggle-size-large: var(--syn-spacing-large);
package/metadata/packages/tokens/sick2025_dark.css CHANGED
@@ -96,7 +96,8 @@
96
96
  --syn-duration-fast: 150ms;
97
97
  --syn-duration-normal: 250ms;
98
98
  --syn-duration-slow: 500ms;
99
- --syn-focus-ring-color: var(--syn-color-primary-400);
99
+ --syn-focus-ring-border-radius: 4px;
100
+ --syn-focus-ring-color: var(--syn-color-primary-500);
100
101
  --syn-focus-ring-offset: var(--syn-spacing-3x-small);
101
102
  --syn-focus-ring-style: solid;
102
103
  --syn-focus-ring-width: var(--syn-border-width-medium);
@@ -179,12 +180,12 @@
179
180
  --syn-input-spacing-medium: var(--syn-spacing-medium);
180
181
  --syn-input-spacing-small: var(--syn-spacing-small);
181
182
  --syn-input-width: var(--syn-border-width-small);
182
- --syn-interactive-primary-color: var(--syn-color-primary-500);
183
- --syn-interactive-primary-color-active: var(--syn-color-neutral-1000);
184
- --syn-interactive-primary-color-hover: var(--syn-color-primary-900);
185
- --syn-interactive-secondary-color: var(--syn-color-neutral-1000);
186
- --syn-interactive-secondary-color-active: var(--syn-color-primary-500);
187
- --syn-interactive-secondary-color-hover: var(--syn-color-primary-500);
183
+ --syn-interactive-emphasis-color: var(--syn-color-primary-500);
184
+ --syn-interactive-emphasis-color-active: var(--syn-color-neutral-1000);
185
+ --syn-interactive-emphasis-color-hover: var(--syn-color-primary-900);
186
+ --syn-interactive-quiet-color: var(--syn-color-neutral-1000);
187
+ --syn-interactive-quiet-color-active: var(--syn-color-primary-600);
188
+ --syn-interactive-quiet-color-hover: var(--syn-color-primary-500);
188
189
  --syn-letter-spacing-dense: normal; /** Shoelace compatibility DO NOT USE */
189
190
  --syn-letter-spacing-denser: normal; /** Shoelace compatibility DO NOT USE */
190
191
  --syn-letter-spacing-loose: normal; /** Shoelace compatibility DO NOT USE */
@@ -195,16 +196,18 @@
195
196
  --syn-line-height-loose: 1.8; /** Shoelace compatibility DO NOT USE */
196
197
  --syn-line-height-looser: 2.2; /** Shoelace compatibility DO NOT USE */
197
198
  --syn-line-height-normal: 1.4; /** Shoelace compatibility DO NOT USE */
198
- --syn-link-color: var(--syn-color-primary-600);
199
- --syn-link-color-active: var(--syn-color-primary-950);
200
- --syn-link-color-hover: var(--syn-color-primary-900);
201
- --syn-link-quiet-color: var(--syn-typography-color-text);
202
- --syn-link-quiet-color-active: var(--syn-color-primary-950);
203
- --syn-link-quiet-color-hover: var(--syn-color-primary-900);
199
+ --syn-link-color: var(--syn-interactive-emphasis-color);
200
+ --syn-link-color-active: var(--syn-interactive-emphasis-color-active);
201
+ --syn-link-color-hover: var(--syn-interactive-emphasis-color-hover);
202
+ --syn-link-quiet-color: var(--syn-interactive-quiet-color);
203
+ --syn-link-quiet-color-active: var(--syn-interactive-quiet-color-active);
204
+ --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
205
+ --syn-link-underline-outline: 25%;
204
206
  --syn-opacity-50: 0.5; /** 50% */
205
207
  --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
206
- --syn-panel-background-color: var(--syn-color-neutral-0);
208
+ --syn-panel-background-color: var(--syn-color-neutral-50);
207
209
  --syn-panel-border-color: var(--syn-color-neutral-300);
210
+ --syn-panel-border-radius: var(--syn-border-radius-x-large);
208
211
  --syn-panel-border-width: var(--syn-border-width-small);
209
212
  --syn-spacing-2x-large: 48px;
210
213
  --syn-spacing-2x-small: 4px;
@@ -219,6 +222,13 @@
219
222
  --syn-spacing-small: 12px;
220
223
  --syn-spacing-x-large: 32px;
221
224
  --syn-spacing-x-small: 8px;
225
+ --syn-spinner-opacity: 0.4;
226
+ --syn-table-background-color: var(--syn-panel-background-color);
227
+ --syn-table-background-color-alternating: var(--syn-color-neutral-100);
228
+ --syn-table-background-color-header: var(--syn-color-neutral-200);
229
+ --syn-table-border-color: var(--syn-color-neutral-300);
230
+ --syn-table-shadow-end: rgba(0, 0, 0, 0);
231
+ --syn-table-shadow-start: rgba(0, 0, 0, 0.8);
222
232
  --syn-text-decoration-default: none;
223
233
  --syn-text-decoration-underline: underline;
224
234
  --syn-toggle-size-large: var(--syn-spacing-large);
@@ -238,22 +248,22 @@
238
248
  --syn-transition-slow: 500ms; /** Shoelace compatibility DO NOT USE */
239
249
  --syn-transition-x-fast: 50ms; /** Shoelace compatibility DO NOT USE */
240
250
  --syn-transition-x-slow: 1000ms; /** Shoelace compatibility DO NOT USE */
241
- --syn-typography-color-text: var(--syn-color-neutral-950);
242
- --syn-typography-color-text-inverted: var(--syn-color-neutral-0);
251
+ --syn-typography-color-text: var(--syn-color-neutral-1000);
252
+ --syn-typography-color-text-inverted: var(--syn-color-neutral-50);
243
253
  --syn-z-index-dialog: 800; /** Shoelace compatibility DO NOT USE */
244
254
  --syn-z-index-drawer: 700; /** Shoelace compatibility DO NOT USE */
245
255
  --syn-z-index-dropdown: 900; /** Shoelace compatibility DO NOT USE */
246
256
  --syn-z-index-toast: 950; /** Shoelace compatibility DO NOT USE */
247
257
  --syn-z-index-tooltip: 1000; /** Shoelace compatibility DO NOT USE */
248
- --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);
249
- --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);
250
- --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);
251
- --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);
252
- --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);
253
- --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);
254
- --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);
255
- --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);
256
- --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);
258
+ --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);
259
+ --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);
260
+ --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);
261
+ --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);
262
+ --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);
263
+ --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);
264
+ --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);
265
+ --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);
266
+ --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);
257
267
  --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';
258
268
  --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';
259
269
  --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
@@ -96,7 +96,8 @@
96
96
  --syn-duration-fast: 150ms;
97
97
  --syn-duration-normal: 250ms;
98
98
  --syn-duration-slow: 500ms;
99
- --syn-focus-ring-color: var(--syn-color-primary-400);
99
+ --syn-focus-ring-border-radius: 4px;
100
+ --syn-focus-ring-color: var(--syn-color-primary-700);
100
101
  --syn-focus-ring-offset: var(--syn-spacing-3x-small);
101
102
  --syn-focus-ring-style: solid;
102
103
  --syn-focus-ring-width: var(--syn-border-width-medium);
@@ -179,12 +180,12 @@
179
180
  --syn-input-spacing-medium: var(--syn-spacing-medium);
180
181
  --syn-input-spacing-small: var(--syn-spacing-small);
181
182
  --syn-input-width: var(--syn-border-width-small);
182
- --syn-interactive-primary-color: var(--syn-color-primary-700);
183
- --syn-interactive-primary-color-active: var(--syn-color-neutral-950);
184
- --syn-interactive-primary-color-hover: var(--syn-color-primary-900);
185
- --syn-interactive-secondary-color: var(--syn-color-neutral-950);
186
- --syn-interactive-secondary-color-active: var(--syn-color-primary-700);
187
- --syn-interactive-secondary-color-hover: var(--syn-color-primary-700);
183
+ --syn-interactive-emphasis-color: var(--syn-color-primary-700);
184
+ --syn-interactive-emphasis-color-active: var(--syn-color-neutral-950);
185
+ --syn-interactive-emphasis-color-hover: var(--syn-color-primary-900);
186
+ --syn-interactive-quiet-color: var(--syn-color-neutral-950);
187
+ --syn-interactive-quiet-color-active: var(--syn-color-primary-800);
188
+ --syn-interactive-quiet-color-hover: var(--syn-color-primary-700);
188
189
  --syn-letter-spacing-dense: normal; /** Shoelace compatibility DO NOT USE */
189
190
  --syn-letter-spacing-denser: normal; /** Shoelace compatibility DO NOT USE */
190
191
  --syn-letter-spacing-loose: normal; /** Shoelace compatibility DO NOT USE */
@@ -195,16 +196,18 @@
195
196
  --syn-line-height-loose: 1.8; /** Shoelace compatibility DO NOT USE */
196
197
  --syn-line-height-looser: 2.2; /** Shoelace compatibility DO NOT USE */
197
198
  --syn-line-height-normal: 1.4; /** Shoelace compatibility DO NOT USE */
198
- --syn-link-color: var(--syn-color-primary-600);
199
- --syn-link-color-active: var(--syn-color-primary-950);
200
- --syn-link-color-hover: var(--syn-color-primary-900);
201
- --syn-link-quiet-color: var(--syn-typography-color-text);
202
- --syn-link-quiet-color-active: var(--syn-color-primary-950);
203
- --syn-link-quiet-color-hover: var(--syn-color-primary-900);
199
+ --syn-link-color: var(--syn-interactive-emphasis-color);
200
+ --syn-link-color-active: var(--syn-interactive-emphasis-color-active);
201
+ --syn-link-color-hover: var(--syn-interactive-emphasis-color-hover);
202
+ --syn-link-quiet-color: var(--syn-interactive-quiet-color);
203
+ --syn-link-quiet-color-active: var(--syn-interactive-quiet-color-active);
204
+ --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
205
+ --syn-link-underline-outline: 25%;
204
206
  --syn-opacity-50: 0.5; /** 50% */
205
207
  --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
206
208
  --syn-panel-background-color: var(--syn-color-neutral-0);
207
- --syn-panel-border-color: var(--syn-color-neutral-300);
209
+ --syn-panel-border-color: #e6e1dc;
210
+ --syn-panel-border-radius: var(--syn-border-radius-x-large);
208
211
  --syn-panel-border-width: var(--syn-border-width-small);
209
212
  --syn-spacing-2x-large: 48px;
210
213
  --syn-spacing-2x-small: 4px;
@@ -219,6 +222,13 @@
219
222
  --syn-spacing-small: 12px;
220
223
  --syn-spacing-x-large: 32px;
221
224
  --syn-spacing-x-small: 8px;
225
+ --syn-spinner-opacity: 0.16;
226
+ --syn-table-background-color: var(--syn-panel-background-color);
227
+ --syn-table-background-color-alternating: #f8f7f6;
228
+ --syn-table-background-color-header: #f2f0ed;
229
+ --syn-table-border-color: #e6e1dc;
230
+ --syn-table-shadow-end: rgba(13, 13, 13, 0);
231
+ --syn-table-shadow-start: rgba(13, 13, 13, 0.16);
222
232
  --syn-text-decoration-default: none;
223
233
  --syn-text-decoration-underline: underline;
224
234
  --syn-toggle-size-large: var(--syn-spacing-large);
package/metadata/static/components/syn-combobox/docs.md CHANGED
@@ -2277,15 +2277,7 @@ It is possible to add options dynamically to the combobox e.g. if the option val
2277
2277
  id="syn-combobox-option-2"
2278
2278
  >Option 3</syn-option
2279
2279
  >
2280
- <syn-option
2281
- role="option"
2282
- aria-selected="false"
2283
- id="syn-combobox-option-3"
2284
- aria-disabled="false"
2285
- value=""
2286
- >Option 4</syn-option
2287
- ></syn-combobox
2288
- >
2280
+ </syn-combobox>
2289
2281
  ```
2290
2282
 
2291
2283
  ---
package/metadata/static/styles/syn-table-cell.md CHANGED
@@ -3,7 +3,7 @@
3
3
  The syn-table-cell component offers basic styling for table cells. A table can be created by combining several cell components into columns and rows. DEV: Instead of a component we have multiple classes, to apply the table styling. More complex tables, such as applying the shadow styling and adding scrolling behavior, require additional CSS and JavaScript Code. See the table templates for examples.
4
4
 
5
5
  ```html
6
- <table class="syn-table">
6
+ <table class="syn-table" style="width: 200px">
7
7
  <tbody>
8
8
  <tr>
9
9
  <td class="syn-table-cell sticky">Cell content</td>
@@ -24,7 +24,7 @@ The syn-table-cell component offers basic styling for table cells. A table can
24
24
  Use the cell header attribute to help the user identify the top of the table. Table header can be used as column header and row Header, but not at the same time.
25
25
 
26
26
  ```html
27
- <table class="syn-table">
27
+ <table class="syn-table" style="width: 200px">
28
28
  <thead>
29
29
  <tr>
30
30
  <th class="syn-table-cell--header">Cell header</th>
@@ -45,7 +45,7 @@ Use the cell header attribute to help the user identify the top of the table. T
45
45
  The alternating attribute helps the user to visually separate the rows, even when scrolling horizontally, and helps to compare the data.
46
46
 
47
47
  ```html
48
- <table class="syn-table">
48
+ <table class="syn-table" style="width: 200px">
49
49
  <tbody>
50
50
  <tr>
51
51
  <td class="syn-table-cell">Cell content</td>
@@ -70,7 +70,7 @@ The alternating attribute helps the user to visually separate the rows, even whe
70
70
  Use the border attribute to define different borders in a cell. Borders can also be combined.
71
71
 
72
72
  ```html
73
- <table class="syn-table">
73
+ <table class="syn-table" style="width: 200px">
74
74
  <tbody>
75
75
  <tr>
76
76
  <td class="syn-table-cell syn-table-cell--border-top">Border Top</td>
@@ -82,7 +82,9 @@ Use the border attribute to define different borders in a cell. Borders can also
82
82
  <td class="syn-table-cell syn-table-cell--border-end">Border End</td>
83
83
  </tr>
84
84
  <tr>
85
- <td class="syn-table-cell syn-table-cell--border-bottom">Border Left</td>
85
+ <td class="syn-table-cell syn-table-cell--border-bottom">
86
+ Border Bottom
87
+ </td>
86
88
  </tr>
87
89
  </tbody>
88
90
  </table>
@@ -95,7 +97,7 @@ Use the border attribute to define different borders in a cell. Borders can also
95
97
  If the table contains a scrolling behavior the table cell gets a shadow.
96
98
 
97
99
  ```html
98
- <table class="syn-table">
100
+ <table class="syn-table" style="width: 400px">
99
101
  <thead>
100
102
  <tr>
101
103
  <th
package/package.json CHANGED
@@ -11,7 +11,7 @@
11
11
  "globby": "^14.1.0",
12
12
  "serve-handler": "^6.1.6",
13
13
  "zod": "^3.25.67",
14
- "@synergy-design-system/assets": "1.18.0"
14
+ "@synergy-design-system/assets": "1.19.0"
15
15
  },
16
16
  "description": "MCP Server for the Synergy Design System",
17
17
  "devDependencies": {
@@ -33,11 +33,11 @@
33
33
  "semantic-release-monorepo": "7.0.5",
34
34
  "ts-jest": "^29.4.0",
35
35
  "typescript": "^5.8.3",
36
- "@synergy-design-system/components": "2.41.1",
37
- "@synergy-design-system/docs": "0.1.0",
36
+ "@synergy-design-system/components": "2.43.0",
38
37
  "@synergy-design-system/eslint-config-syn": "^0.1.0",
39
- "@synergy-design-system/styles": "1.7.2",
40
- "@synergy-design-system/tokens": "^2.24.0"
38
+ "@synergy-design-system/docs": "0.1.0",
39
+ "@synergy-design-system/tokens": "^2.25.0",
40
+ "@synergy-design-system/styles": "1.8.0"
41
41
  },
42
42
  "exports": {
43
43
  ".": {
@@ -122,7 +122,7 @@
122
122
  "directory": "packages/mcp"
123
123
  },
124
124
  "type": "module",
125
- "version": "1.3.1",
125
+ "version": "1.4.0",
126
126
  "scripts": {
127
127
  "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
128
128
  "build:all": "pnpm run build && pnpm run build:storybook",