@synergy-design-system/mcp 1.39.0 → 1.40.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 +14 -0
  2. package/metadata/checksum.txt +1 -1
  3. package/metadata/packages/components/components/syn-checkbox/component.custom.styles.ts +27 -2
  4. package/metadata/packages/components/components/syn-nav-item/component.styles.ts +8 -0
  5. package/metadata/packages/components/components/syn-radio/component.custom.styles.ts +11 -5
  6. package/metadata/packages/components/components/syn-switch/component.custom.styles.ts +23 -6
  7. package/metadata/packages/components/static/CHANGELOG.md +19 -0
  8. package/metadata/packages/tokens/CHANGELOG.md +14 -0
  9. package/metadata/packages/tokens/dark.css +4 -1
  10. package/metadata/packages/tokens/index.js +16 -1
  11. package/metadata/packages/tokens/light.css +4 -1
  12. package/metadata/packages/tokens/sick2018_dark.css +4 -1
  13. package/metadata/packages/tokens/sick2018_light.css +4 -1
  14. package/metadata/packages/tokens/sick2025_dark.css +4 -1
  15. package/metadata/packages/tokens/sick2025_light.css +4 -1
  16. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # Changelog
2
2
 
3
+ ## 1.40.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#1138](https://github.com/synergy-design-system/synergy-design-system/pull/1138) [`dc56e6f`](https://github.com/synergy-design-system/synergy-design-system/commit/dc56e6f0ebc08e44b23bdbdaa6fffa03abc26e9e) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-12-18
8
+
9
+ feat: ✨ form element active states (#433)
10
+
11
+ This release adds adjustments for `:active` states for various form elements.
12
+ - `<syn-checkbox>` now has new active states, dependent on if it is checked and unchecked.
13
+ - `<syn-nav-item>` now has a new active state
14
+ - `<syn-radio>` will show its active indicator when pressing the associated label, too.
15
+ - `<syn-switch>` now has new active states, dependent on if it is checked and unchecked.
16
+
3
17
  ## 1.39.0
4
18
 
5
19
  ### Minor Changes
package/metadata/checksum.txt CHANGED
@@ -1 +1 @@
1
- 7487440271c227c317e857fa8014c08f
1
+ b5c9690dc359d540101b8ccb74086919
package/metadata/packages/components/components/syn-checkbox/component.custom.styles.ts CHANGED
@@ -17,6 +17,13 @@ export default css`
17
17
  margin: 0.1em 0;
18
18
  }
19
19
 
20
+ /* Checked/indeterminate */
21
+ .checkbox--checked .checkbox__control,
22
+ .checkbox--indeterminate .checkbox__control {
23
+ background-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
24
+ border-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
25
+ }
26
+
20
27
  :host([data-user-invalid]) .checkbox__control {
21
28
  background: var(--syn-input-border-color-focus-error);
22
29
  border-color: var(--syn-input-border-color-focus-error);
@@ -49,8 +56,26 @@ export default css`
49
56
  */
50
57
  .checkbox.checkbox--checked:not(.checkbox--disabled):hover .checkbox__control,
51
58
  .checkbox.checkbox--indeterminate:not(.checkbox--disabled):hover .checkbox__control {
52
- background-color: var(--syn-color-primary-900);
53
- border-color: var(--syn-color-primary-900);
59
+ background-color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
60
+ border-color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
61
+ }
62
+
63
+ /*
64
+ * #443: Add active styles
65
+ * The checked and unchecked states have different active colors
66
+ * Note the fallback is defined to match the hover color.
67
+ * This is done to make sure no active state is shown at all if no active color is defined.
68
+ * Still better than showing one for the unchecked state but not for the checked state.
69
+ */
70
+ .checkbox:not(.checkbox--checked):not(.checkbox--disabled):active .checkbox__control {
71
+ border-color: var(--syn-input-border-color-active);
72
+ }
73
+
74
+ /* Checked/indeterminate */
75
+ .checkbox.checkbox--checked:not(.checkbox--disabled):active .checkbox__control,
76
+ .checkbox.checkbox--indeterminate:not(.checkbox--disabled):active .checkbox__control {
77
+ background: var(--syn-interactive-emphasis-color-active, var(--syn-color-primary-900));
78
+ border-color: var(--syn-interactive-emphasis-color-active, var(--syn-color-primary-900));
54
79
  }
55
80
 
56
81
  .checkbox__label {
package/metadata/packages/components/components/syn-nav-item/component.styles.ts CHANGED
@@ -123,6 +123,14 @@ export default css`
123
123
  opacity: 1;
124
124
  }
125
125
 
126
+ /**
127
+ * #443: Add support for active state
128
+ */
129
+ .nav-item:not(.nav-item--disabled):active::before {
130
+ background: var(--syn-interactive-background-color-active, var(--syn-color-neutral-50));
131
+ opacity: 1;
132
+ }
133
+
126
134
  /**
127
135
  * When using horizontal, the background should extend the element
128
136
  * on the left and right so the animation for the indicator can be seen
package/metadata/packages/components/components/syn-radio/component.custom.styles.ts CHANGED
@@ -22,26 +22,32 @@ export default css`
22
22
  border-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
23
23
  }
24
24
 
25
+ /* Reset original hover */
26
+ .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {
27
+ background: inherit;
28
+ border-color: inherit;
29
+ }
30
+
25
31
  /* Checked + hover */
26
- .radio.radio--checked:not(.radio--disabled) .radio__control:hover {
32
+ .radio.radio--checked:not(.radio--disabled):hover .radio__control {
27
33
  background-color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-950));
28
34
  border-color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-950));
29
35
  }
30
36
 
31
37
  /* Checked + active */
32
- .radio.radio--checked:not(.radio--disabled) .radio__control:active {
38
+ .radio.radio--checked:not(.radio--disabled):active .radio__control {
33
39
  background-color: var(--syn-interactive-emphasis-color-active, var(--syn-color-primary-950));
34
40
  border-color: var(--syn-interactive-emphasis-color-active, var(--syn-color-primary-950));
35
41
  }
36
42
 
37
43
  /* Not-Checked + Hover */
38
- .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {
44
+ .radio:not(.radio--checked):not(.radio--disabled):hover .radio__control {
39
45
  border-color: var(--syn-input-border-color-hover);
40
46
  }
41
47
 
42
48
  /* Not-Checked + active */
43
- .radio:not(.radio--checked):not(.radio--disabled) .radio__control:active {
44
- border-color: var(--syn-color-neutral-1000);
49
+ .radio:not(.radio--checked):not(.radio--disabled):active .radio__control {
50
+ border-color: var(--syn-input-border-color-active, var(--syn-color-neutral-1000));
45
51
  }
46
52
 
47
53
  /* Fix#456: Multi line radio fixes */
package/metadata/packages/components/components/syn-switch/component.custom.styles.ts CHANGED
@@ -61,27 +61,44 @@ export default css`
61
61
  background-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
62
62
  border-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
63
63
  }
64
-
64
+
65
65
  /* Hover */
66
- .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {
66
+ .switch:not(.switch--checked):not(.switch--disabled):hover .switch__control {
67
67
  background-color: var(--syn-input-icon-icon-clearable-color-hover);
68
68
  border-color: var(--syn-input-icon-icon-clearable-color-hover);
69
69
  }
70
70
 
71
- .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb {
71
+ .switch:not(.switch--checked):not(.switch--disabled):hover .switch__control:hover .switch__thumb {
72
72
  background-color: var(--syn-color-neutral-0);
73
73
  }
74
74
 
75
75
  /* Checked + hover */
76
- .switch.switch--checked:not(.switch--disabled) .switch__control:hover {
76
+ .switch.switch--checked:not(.switch--disabled):hover .switch__control {
77
77
  background-color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
78
78
  border-color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
79
79
  }
80
80
 
81
- .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb {
81
+ .switch.switch--checked:not(.switch--disabled):hover .switch__control:hover .switch__thumb {
82
82
  background-color: var(--syn-color-neutral-0);
83
83
  }
84
84
 
85
+ /*
86
+ * #443: Add active styles
87
+ * The checked and unchecked states have different active colors
88
+ * Note the fallback is defined to match the hover color.
89
+ * This is done to make sure no active state is shown at all if no active color is defined.
90
+ * Still better than showing one for the unchecked state but not for the checked state.
91
+ */
92
+ .switch:not(.switch--checked):not(.switch--disabled):active .switch__control {
93
+ background: var(--syn-input-icon-icon-clearable-color-active);
94
+ border-color: var(--syn-input-icon-icon-clearable-color-active);
95
+ }
96
+
97
+ .switch.switch--checked:not(.switch--disabled):active .switch__control {
98
+ background: var(--syn-interactive-emphasis-color-active);
99
+ border-color: var(--syn-interactive-emphasis-color-active);
100
+ }
101
+
85
102
  /* Focus */
86
103
  .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {
87
104
  background-color: var(--syn-input-icon-icon-clearable-color);
@@ -117,7 +134,7 @@ export default css`
117
134
  border-color: var(--syn-input-border-color-focus-error, var(--syn-color-error-700));
118
135
  }
119
136
 
120
- :host([data-user-invalid]) .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {
137
+ :host([data-user-invalid]) .switch:not(.switch--checked):not(.switch--disabled):hover .switch__control {
121
138
  background-color: var(--syn-input-border-color-hover, var(--syn-color-error-900));
122
139
  border-color: var(--syn-input-border-color-hover, var(--syn-color-error-900));
123
140
  }
package/metadata/packages/components/static/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # Changelog
2
2
 
3
+ ## 2.76.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#1138](https://github.com/synergy-design-system/synergy-design-system/pull/1138) [`dc56e6f`](https://github.com/synergy-design-system/synergy-design-system/commit/dc56e6f0ebc08e44b23bdbdaa6fffa03abc26e9e) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-12-18
8
+
9
+ feat: ✨ form element active states (#433)
10
+
11
+ This release adds adjustments for `:active` states for various form elements.
12
+ - `<syn-checkbox>` now has new active states, dependent on if it is checked and unchecked.
13
+ - `<syn-nav-item>` now has a new active state
14
+ - `<syn-radio>` will show its active indicator when pressing the associated label, too.
15
+ - `<syn-switch>` now has new active states, dependent on if it is checked and unchecked.
16
+
17
+ ### Patch Changes
18
+
19
+ - Updated dependencies [[`dc56e6f`](https://github.com/synergy-design-system/synergy-design-system/commit/dc56e6f0ebc08e44b23bdbdaa6fffa03abc26e9e)]:
20
+ - @synergy-design-system/tokens@2.48.0
21
+
3
22
  ## 2.75.0
4
23
 
5
24
  ### Minor Changes
package/metadata/packages/tokens/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # Changelog
2
2
 
3
+ ## 2.48.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#1138](https://github.com/synergy-design-system/synergy-design-system/pull/1138) [`dc56e6f`](https://github.com/synergy-design-system/synergy-design-system/commit/dc56e6f0ebc08e44b23bdbdaa6fffa03abc26e9e) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-12-18
8
+
9
+ feat: ✨ form element active states (#433)
10
+
11
+ This release adds adjustments for `:active` states for various form elements.
12
+ - `<syn-checkbox>` now has new active states, dependent on if it is checked and unchecked.
13
+ - `<syn-nav-item>` now has a new active state
14
+ - `<syn-radio>` will show its active indicator when pressing the associated label, too.
15
+ - `<syn-switch>` now has new active states, dependent on if it is checked and unchecked.
16
+
3
17
  ## 2.47.0
4
18
 
5
19
  ### Minor Changes
package/metadata/packages/tokens/dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.46.0
2
+ * @synergy-design-system/tokens version 2.47.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -198,6 +198,7 @@
198
198
  --syn-input-background-color-focus: var(--syn-input-background-color);
199
199
  --syn-input-background-color-hover: var(--syn-input-background-color);
200
200
  --syn-input-border-color: var(--syn-color-neutral-700);
201
+ --syn-input-border-color-active: var(--syn-color-neutral-1000);
201
202
  --syn-input-border-color-disabled: var(--syn-color-neutral-700);
202
203
  --syn-input-border-color-focus: var(--syn-color-neutral-950);
203
204
  --syn-input-border-color-focus-error: var(--syn-color-error-700);
@@ -231,6 +232,7 @@
231
232
  --syn-input-icon-color: var(--syn-color-neutral-800);
232
233
  --syn-input-icon-color-hover: var(--syn-color-neutral-800);
233
234
  --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-600);
235
+ --syn-input-icon-icon-clearable-color-active: var(--syn-color-neutral-900);
234
236
  --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-800);
235
237
  --syn-input-label-color: var(--syn-color-neutral-950);
236
238
  --syn-input-label-font-size-large: var(--syn-font-size-large);
@@ -251,6 +253,7 @@
251
253
  --syn-input-spacing-medium: var(--syn-spacing-medium);
252
254
  --syn-input-spacing-small: var(--syn-spacing-small);
253
255
  --syn-input-width: var(--syn-border-width-small);
256
+ --syn-interactive-background-color-active: var(--syn-color-neutral-300);
254
257
  --syn-interactive-background-color-hover: var(--syn-color-neutral-100);
255
258
  --syn-interactive-emphasis-color: var(--syn-color-primary-600);
256
259
  --syn-interactive-emphasis-color-active: var(--syn-color-primary-950);
package/metadata/packages/tokens/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.46.0
2
+ * @synergy-design-system/tokens version 2.47.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
@@ -958,6 +958,11 @@ export const SynInputBackgroundColorHover = 'var(--syn-input-background-color-ho
958
958
  */
959
959
  export const SynInputBorderColor = 'var(--syn-input-border-color)';
960
960
 
961
+ /**
962
+ * @type {string}
963
+ */
964
+ export const SynInputBorderColorActive = 'var(--syn-input-border-color-active)';
965
+
961
966
  /**
962
967
  * @type {string}
963
968
  */
@@ -1123,6 +1128,11 @@ export const SynInputIconColorHover = 'var(--syn-input-icon-color-hover)';
1123
1128
  */
1124
1129
  export const SynInputIconIconClearableColor = 'var(--syn-input-icon-icon-clearable-color)';
1125
1130
 
1131
+ /**
1132
+ * @type {string}
1133
+ */
1134
+ export const SynInputIconIconClearableColorActive = 'var(--syn-input-icon-icon-clearable-color-active)';
1135
+
1126
1136
  /**
1127
1137
  * @type {string}
1128
1138
  */
@@ -1223,6 +1233,11 @@ export const SynInputSpacingSmall = 'var(--syn-input-spacing-small)';
1223
1233
  */
1224
1234
  export const SynInputWidth = 'var(--syn-input-width)';
1225
1235
 
1236
+ /**
1237
+ * @type {string}
1238
+ */
1239
+ export const SynInteractiveBackgroundColorActive = 'var(--syn-interactive-background-color-active)';
1240
+
1226
1241
  /**
1227
1242
  * @type {string}
1228
1243
  */
package/metadata/packages/tokens/light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.46.0
2
+ * @synergy-design-system/tokens version 2.47.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -198,6 +198,7 @@
198
198
  --syn-input-background-color-focus: var(--syn-input-background-color);
199
199
  --syn-input-background-color-hover: var(--syn-input-background-color);
200
200
  --syn-input-border-color: var(--syn-color-neutral-700);
201
+ --syn-input-border-color-active: var(--syn-color-neutral-1000);
201
202
  --syn-input-border-color-disabled: var(--syn-color-neutral-700);
202
203
  --syn-input-border-color-focus: var(--syn-color-neutral-950);
203
204
  --syn-input-border-color-focus-error: var(--syn-color-error-700);
@@ -231,6 +232,7 @@
231
232
  --syn-input-icon-color: var(--syn-color-neutral-800);
232
233
  --syn-input-icon-color-hover: var(--syn-color-neutral-800);
233
234
  --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-600);
235
+ --syn-input-icon-icon-clearable-color-active: var(--syn-color-neutral-900);
234
236
  --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-800);
235
237
  --syn-input-label-color: var(--syn-color-neutral-950);
236
238
  --syn-input-label-font-size-large: var(--syn-font-size-large);
@@ -251,6 +253,7 @@
251
253
  --syn-input-spacing-medium: var(--syn-spacing-medium);
252
254
  --syn-input-spacing-small: var(--syn-spacing-small);
253
255
  --syn-input-width: var(--syn-border-width-small);
256
+ --syn-interactive-background-color-active: var(--syn-color-neutral-300);
254
257
  --syn-interactive-background-color-hover: var(--syn-color-neutral-100);
255
258
  --syn-interactive-emphasis-color: var(--syn-color-primary-600);
256
259
  --syn-interactive-emphasis-color-active: var(--syn-color-primary-950);
package/metadata/packages/tokens/sick2018_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.46.0
2
+ * @synergy-design-system/tokens version 2.47.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -198,6 +198,7 @@
198
198
  --syn-input-background-color-focus: var(--syn-input-background-color);
199
199
  --syn-input-background-color-hover: var(--syn-input-background-color);
200
200
  --syn-input-border-color: var(--syn-color-neutral-700);
201
+ --syn-input-border-color-active: var(--syn-color-neutral-1000);
201
202
  --syn-input-border-color-disabled: var(--syn-color-neutral-700);
202
203
  --syn-input-border-color-focus: var(--syn-color-neutral-950);
203
204
  --syn-input-border-color-focus-error: var(--syn-color-error-700);
@@ -231,6 +232,7 @@
231
232
  --syn-input-icon-color: var(--syn-color-neutral-800);
232
233
  --syn-input-icon-color-hover: var(--syn-color-neutral-800);
233
234
  --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-600);
235
+ --syn-input-icon-icon-clearable-color-active: var(--syn-color-neutral-900);
234
236
  --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-800);
235
237
  --syn-input-label-color: var(--syn-color-neutral-950);
236
238
  --syn-input-label-font-size-large: var(--syn-font-size-large);
@@ -251,6 +253,7 @@
251
253
  --syn-input-spacing-medium: var(--syn-spacing-medium);
252
254
  --syn-input-spacing-small: var(--syn-spacing-small);
253
255
  --syn-input-width: var(--syn-border-width-small);
256
+ --syn-interactive-background-color-active: var(--syn-color-neutral-300);
254
257
  --syn-interactive-background-color-hover: var(--syn-color-neutral-100);
255
258
  --syn-interactive-emphasis-color: var(--syn-color-primary-600);
256
259
  --syn-interactive-emphasis-color-active: var(--syn-color-primary-950);
package/metadata/packages/tokens/sick2018_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.46.0
2
+ * @synergy-design-system/tokens version 2.47.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -198,6 +198,7 @@
198
198
  --syn-input-background-color-focus: var(--syn-input-background-color);
199
199
  --syn-input-background-color-hover: var(--syn-input-background-color);
200
200
  --syn-input-border-color: var(--syn-color-neutral-700);
201
+ --syn-input-border-color-active: var(--syn-color-neutral-1000);
201
202
  --syn-input-border-color-disabled: var(--syn-color-neutral-700);
202
203
  --syn-input-border-color-focus: var(--syn-color-neutral-950);
203
204
  --syn-input-border-color-focus-error: var(--syn-color-error-700);
@@ -231,6 +232,7 @@
231
232
  --syn-input-icon-color: var(--syn-color-neutral-800);
232
233
  --syn-input-icon-color-hover: var(--syn-color-neutral-800);
233
234
  --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-600);
235
+ --syn-input-icon-icon-clearable-color-active: var(--syn-color-neutral-900);
234
236
  --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-800);
235
237
  --syn-input-label-color: var(--syn-color-neutral-950);
236
238
  --syn-input-label-font-size-large: var(--syn-font-size-large);
@@ -251,6 +253,7 @@
251
253
  --syn-input-spacing-medium: var(--syn-spacing-medium);
252
254
  --syn-input-spacing-small: var(--syn-spacing-small);
253
255
  --syn-input-width: var(--syn-border-width-small);
256
+ --syn-interactive-background-color-active: var(--syn-color-neutral-300);
254
257
  --syn-interactive-background-color-hover: var(--syn-color-neutral-100);
255
258
  --syn-interactive-emphasis-color: var(--syn-color-primary-600);
256
259
  --syn-interactive-emphasis-color-active: var(--syn-color-primary-950);
package/metadata/packages/tokens/sick2025_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.46.0
2
+ * @synergy-design-system/tokens version 2.47.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -198,6 +198,7 @@
198
198
  --syn-input-background-color-focus: var(--syn-input-background-color);
199
199
  --syn-input-background-color-hover: var(--syn-input-background-color);
200
200
  --syn-input-border-color: var(--syn-color-neutral-1000);
201
+ --syn-input-border-color-active: var(--syn-color-primary-500);
201
202
  --syn-input-border-color-disabled: var(--syn-color-neutral-1000);
202
203
  --syn-input-border-color-focus: var(--syn-color-primary-400);
203
204
  --syn-input-border-color-focus-error: var(--syn-color-error-600);
@@ -231,6 +232,7 @@
231
232
  --syn-input-icon-color: var(--syn-color-neutral-1000);
232
233
  --syn-input-icon-color-hover: var(--syn-color-neutral-1000);
233
234
  --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-600);
235
+ --syn-input-icon-icon-clearable-color-active: var(--syn-color-neutral-900);
234
236
  --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-800);
235
237
  --syn-input-label-color: var(--syn-color-neutral-1000);
236
238
  --syn-input-label-font-size-large: var(--syn-font-size-large);
@@ -251,6 +253,7 @@
251
253
  --syn-input-spacing-medium: var(--syn-spacing-medium);
252
254
  --syn-input-spacing-small: var(--syn-spacing-small);
253
255
  --syn-input-width: var(--syn-border-width-small);
256
+ --syn-interactive-background-color-active: var(--syn-color-neutral-300);
254
257
  --syn-interactive-background-color-hover: var(--syn-color-neutral-100);
255
258
  --syn-interactive-emphasis-color: var(--syn-color-primary-400);
256
259
  --syn-interactive-emphasis-color-active: var(--syn-color-primary-700);
package/metadata/packages/tokens/sick2025_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.46.0
2
+ * @synergy-design-system/tokens version 2.47.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -198,6 +198,7 @@
198
198
  --syn-input-background-color-focus: var(--syn-input-background-color);
199
199
  --syn-input-background-color-hover: var(--syn-input-background-color);
200
200
  --syn-input-border-color: var(--syn-color-neutral-950);
201
+ --syn-input-border-color-active: var(--syn-color-primary-800);
201
202
  --syn-input-border-color-disabled: var(--syn-color-neutral-950);
202
203
  --syn-input-border-color-focus: var(--syn-color-primary-700);
203
204
  --syn-input-border-color-focus-error: var(--syn-color-error-600);
@@ -231,6 +232,7 @@
231
232
  --syn-input-icon-color: var(--syn-color-neutral-950);
232
233
  --syn-input-icon-color-hover: var(--syn-color-neutral-950);
233
234
  --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-500);
235
+ --syn-input-icon-icon-clearable-color-active: var(--syn-color-neutral-800);
234
236
  --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-700);
235
237
  --syn-input-label-color: var(--syn-color-neutral-950);
236
238
  --syn-input-label-font-size-large: var(--syn-font-size-large);
@@ -251,6 +253,7 @@
251
253
  --syn-input-spacing-medium: var(--syn-spacing-medium);
252
254
  --syn-input-spacing-small: var(--syn-spacing-small);
253
255
  --syn-input-width: var(--syn-border-width-small);
256
+ --syn-interactive-background-color-active: #e6e1dc;
254
257
  --syn-interactive-background-color-hover: #f2f0ed;
255
258
  --syn-interactive-emphasis-color: var(--syn-color-primary-700);
256
259
  --syn-interactive-emphasis-color-active: var(--syn-color-primary-1000);
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.75.0",
32
- "@synergy-design-system/fonts": "1.0.1",
33
31
  "@synergy-design-system/docs": "0.1.0",
34
32
  "@synergy-design-system/eslint-config-syn": "^0.1.0",
33
+ "@synergy-design-system/fonts": "1.0.1",
35
34
  "@synergy-design-system/styles": "1.9.0",
36
- "@synergy-design-system/tokens": "^2.47.0"
35
+ "@synergy-design-system/tokens": "^2.48.0",
36
+ "@synergy-design-system/components": "2.76.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.39.0",
70
+ "version": "1.40.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",