@synergy-design-system/tokens 2.47.0 → 2.48.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 (11) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/js/index.d.ts +16 -1
  3. package/dist/js/index.js +16 -1
  4. package/dist/scss/_tokens.scss +4 -1
  5. package/dist/themes/dark.css +4 -1
  6. package/dist/themes/light.css +4 -1
  7. package/dist/themes/sick2018_dark.css +4 -1
  8. package/dist/themes/sick2018_light.css +4 -1
  9. package/dist/themes/sick2025_dark.css +4 -1
  10. package/dist/themes/sick2025_light.css +4 -1
  11. package/package.json +1 -1
package/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/dist/js/index.d.ts 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: string;
958
958
  */
959
959
  export const SynInputBorderColor: string;
960
960
 
961
+ /**
962
+ * Maps to the css variable `--syn-input-border-color-active`
963
+ */
964
+ export const SynInputBorderColorActive: string;
965
+
961
966
  /**
962
967
  * Maps to the css variable `--syn-input-border-color-disabled`
963
968
  */
@@ -1123,6 +1128,11 @@ export const SynInputIconColorHover: string;
1123
1128
  */
1124
1129
  export const SynInputIconIconClearableColor: string;
1125
1130
 
1131
+ /**
1132
+ * Maps to the css variable `--syn-input-icon-icon-clearable-color-active`
1133
+ */
1134
+ export const SynInputIconIconClearableColorActive: string;
1135
+
1126
1136
  /**
1127
1137
  * Maps to the css variable `--syn-input-icon-icon-clearable-color-hover`
1128
1138
  */
@@ -1223,6 +1233,11 @@ export const SynInputSpacingSmall: string;
1223
1233
  */
1224
1234
  export const SynInputWidth: string;
1225
1235
 
1236
+ /**
1237
+ * Maps to the css variable `--syn-interactive-background-color-active`
1238
+ */
1239
+ export const SynInteractiveBackgroundColorActive: string;
1240
+
1226
1241
  /**
1227
1242
  * Maps to the css variable `--syn-interactive-background-color-hover`
1228
1243
  */
package/dist/js/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/dist/scss/_tokens.scss 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
  $SynAlertErrorColorBackground: var(--syn-alert-error-color-background) !default;
@@ -193,6 +193,7 @@ $SynInputBackgroundColorDisabled: var(--syn-input-background-color-disabled) !de
193
193
  $SynInputBackgroundColorFocus: var(--syn-input-background-color-focus) !default;
194
194
  $SynInputBackgroundColorHover: var(--syn-input-background-color-hover) !default;
195
195
  $SynInputBorderColor: var(--syn-input-border-color) !default;
196
+ $SynInputBorderColorActive: var(--syn-input-border-color-active) !default;
196
197
  $SynInputBorderColorDisabled: var(--syn-input-border-color-disabled) !default;
197
198
  $SynInputBorderColorFocus: var(--syn-input-border-color-focus) !default;
198
199
  $SynInputBorderColorFocusError: var(--syn-input-border-color-focus-error) !default;
@@ -226,6 +227,7 @@ $SynInputHelpTextFontSizeSmall: var(--syn-input-help-text-font-size-small) !defa
226
227
  $SynInputIconColor: var(--syn-input-icon-color) !default;
227
228
  $SynInputIconColorHover: var(--syn-input-icon-color-hover) !default;
228
229
  $SynInputIconIconClearableColor: var(--syn-input-icon-icon-clearable-color) !default;
230
+ $SynInputIconIconClearableColorActive: var(--syn-input-icon-icon-clearable-color-active) !default;
229
231
  $SynInputIconIconClearableColorHover: var(--syn-input-icon-icon-clearable-color-hover) !default;
230
232
  $SynInputLabelColor: var(--syn-input-label-color) !default;
231
233
  $SynInputLabelFontSizeLarge: var(--syn-input-label-font-size-large) !default;
@@ -246,6 +248,7 @@ $SynInputSpacingLarge: var(--syn-input-spacing-large) !default;
246
248
  $SynInputSpacingMedium: var(--syn-input-spacing-medium) !default;
247
249
  $SynInputSpacingSmall: var(--syn-input-spacing-small) !default;
248
250
  $SynInputWidth: var(--syn-input-width) !default;
251
+ $SynInteractiveBackgroundColorActive: var(--syn-interactive-background-color-active) !default;
249
252
  $SynInteractiveBackgroundColorHover: var(--syn-interactive-background-color-hover) !default;
250
253
  $SynInteractiveEmphasisColor: var(--syn-interactive-emphasis-color) !default;
251
254
  $SynInteractiveEmphasisColorActive: var(--syn-interactive-emphasis-color-active) !default;
package/dist/themes/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/dist/themes/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/dist/themes/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/dist/themes/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/dist/themes/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/dist/themes/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
@@ -57,7 +57,7 @@
57
57
  },
58
58
  "type": "module",
59
59
  "types": "./dist/js/index.d.ts",
60
- "version": "2.47.0",
60
+ "version": "2.48.0",
61
61
  "scripts": {
62
62
  "build": "pnpm clean && node scripts/build.js",
63
63
  "build:all": "dotenvx -q run pnpm build:_all",