@synergy-design-system/tokens 2.23.0 → 2.25.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/README.md +4 -2
  3. package/dist/js/index.d.ts +81 -1
  4. package/dist/js/index.js +81 -1
  5. package/dist/scss/_tokens.scss +17 -1
  6. package/dist/themes/dark.css +23 -7
  7. package/dist/themes/light.css +23 -7
  8. package/dist/themes/sick2018_dark.css +23 -7
  9. package/dist/themes/sick2018_light.css +23 -7
  10. package/dist/themes/sick2025_dark.css +64 -48
  11. package/dist/themes/sick2025_light.css +46 -30
  12. package/package.json +5 -1
  13. package/src/figma-variables/output/sick2018-dark.json +86 -6
  14. package/src/figma-variables/output/sick2018-light.json +86 -6
  15. package/src/figma-variables/output/sick2025-dark.json +127 -47
  16. package/src/figma-variables/output/sick2025-light.json +109 -29
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
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
+
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)
9
+
10
+
11
+ ### Features
12
+
13
+ * ✨CD update for syn-input ([#1001](https://github.com/synergy-design-system/synergy-design-system/issues/1001)) ([52f42f8](https://github.com/synergy-design-system/synergy-design-system/commit/52f42f8d1f494c54492e54b6ddafc6693dcdb0bb))
14
+
1
15
  # [@synergy-design-system/tokens-v2.23.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.22.0...tokens/2.23.0) (2025-08-19)
2
16
 
3
17
 
package/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/dist/js/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.22.0
2
+ * @synergy-design-system/tokens version 2.24.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
@@ -448,6 +448,11 @@ export const SynDurationNormal: string;
448
448
  */
449
449
  export const SynDurationSlow: string;
450
450
 
451
+ /**
452
+ * Maps to the css variable `--syn-focus-ring-border-radius`
453
+ */
454
+ export const SynFocusRingBorderRadius: string;
455
+
451
456
  /**
452
457
  * Maps to the css variable `--syn-focus-ring-color`
453
458
  */
@@ -863,6 +868,36 @@ export const SynInputSpacingSmall: string;
863
868
  */
864
869
  export const SynInputWidth: string;
865
870
 
871
+ /**
872
+ * Maps to the css variable `--syn-interactive-emphasis-color`
873
+ */
874
+ export const SynInteractiveEmphasisColor: string;
875
+
876
+ /**
877
+ * Maps to the css variable `--syn-interactive-emphasis-color-active`
878
+ */
879
+ export const SynInteractiveEmphasisColorActive: string;
880
+
881
+ /**
882
+ * Maps to the css variable `--syn-interactive-emphasis-color-hover`
883
+ */
884
+ export const SynInteractiveEmphasisColorHover: string;
885
+
886
+ /**
887
+ * Maps to the css variable `--syn-interactive-quiet-color`
888
+ */
889
+ export const SynInteractiveQuietColor: string;
890
+
891
+ /**
892
+ * Maps to the css variable `--syn-interactive-quiet-color-active`
893
+ */
894
+ export const SynInteractiveQuietColorActive: string;
895
+
896
+ /**
897
+ * Maps to the css variable `--syn-interactive-quiet-color-hover`
898
+ */
899
+ export const SynInteractiveQuietColorHover: string;
900
+
866
901
  /**
867
902
  * Maps to the css variable `--syn-letter-spacing-dense`
868
903
  */
@@ -943,6 +978,11 @@ export const SynLinkQuietColorActive: string;
943
978
  */
944
979
  export const SynLinkQuietColorHover: string;
945
980
 
981
+ /**
982
+ * Maps to the css variable `--syn-link-underline-outline`
983
+ */
984
+ export const SynLinkUnderlineOutline: string;
985
+
946
986
  /**
947
987
  * Maps to the css variable `--syn-opacity-50`
948
988
  */
@@ -963,6 +1003,11 @@ export const SynPanelBackgroundColor: string;
963
1003
  */
964
1004
  export const SynPanelBorderColor: string;
965
1005
 
1006
+ /**
1007
+ * Maps to the css variable `--syn-panel-border-radius`
1008
+ */
1009
+ export const SynPanelBorderRadius: string;
1010
+
966
1011
  /**
967
1012
  * Maps to the css variable `--syn-panel-border-width`
968
1013
  */
@@ -1033,6 +1078,41 @@ export const SynSpacingXLarge: string;
1033
1078
  */
1034
1079
  export const SynSpacingXSmall: string;
1035
1080
 
1081
+ /**
1082
+ * Maps to the css variable `--syn-spinner-opacity`
1083
+ */
1084
+ export const SynSpinnerOpacity: string;
1085
+
1086
+ /**
1087
+ * Maps to the css variable `--syn-table-background-color`
1088
+ */
1089
+ export const SynTableBackgroundColor: string;
1090
+
1091
+ /**
1092
+ * Maps to the css variable `--syn-table-background-color-alternating`
1093
+ */
1094
+ export const SynTableBackgroundColorAlternating: string;
1095
+
1096
+ /**
1097
+ * Maps to the css variable `--syn-table-background-color-header`
1098
+ */
1099
+ export const SynTableBackgroundColorHeader: string;
1100
+
1101
+ /**
1102
+ * Maps to the css variable `--syn-table-border-color`
1103
+ */
1104
+ export const SynTableBorderColor: string;
1105
+
1106
+ /**
1107
+ * Maps to the css variable `--syn-table-shadow-end`
1108
+ */
1109
+ export const SynTableShadowEnd: string;
1110
+
1111
+ /**
1112
+ * Maps to the css variable `--syn-table-shadow-start`
1113
+ */
1114
+ export const SynTableShadowStart: string;
1115
+
1036
1116
  /**
1037
1117
  * Maps to the css variable `--syn-text-decoration-default`
1038
1118
  */
package/dist/js/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.22.0
2
+ * @synergy-design-system/tokens version 2.24.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
@@ -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
  */
@@ -863,6 +868,36 @@ export const SynInputSpacingSmall = 'var(--syn-input-spacing-small)';
863
868
  */
864
869
  export const SynInputWidth = 'var(--syn-input-width)';
865
870
 
871
+ /**
872
+ * @type {string}
873
+ */
874
+ export const SynInteractiveEmphasisColor = 'var(--syn-interactive-emphasis-color)';
875
+
876
+ /**
877
+ * @type {string}
878
+ */
879
+ export const SynInteractiveEmphasisColorActive = 'var(--syn-interactive-emphasis-color-active)';
880
+
881
+ /**
882
+ * @type {string}
883
+ */
884
+ export const SynInteractiveEmphasisColorHover = 'var(--syn-interactive-emphasis-color-hover)';
885
+
886
+ /**
887
+ * @type {string}
888
+ */
889
+ export const SynInteractiveQuietColor = 'var(--syn-interactive-quiet-color)';
890
+
891
+ /**
892
+ * @type {string}
893
+ */
894
+ export const SynInteractiveQuietColorActive = 'var(--syn-interactive-quiet-color-active)';
895
+
896
+ /**
897
+ * @type {string}
898
+ */
899
+ export const SynInteractiveQuietColorHover = 'var(--syn-interactive-quiet-color-hover)';
900
+
866
901
  /**
867
902
  * @type {string}
868
903
  */
@@ -943,6 +978,11 @@ export const SynLinkQuietColorActive = 'var(--syn-link-quiet-color-active)';
943
978
  */
944
979
  export const SynLinkQuietColorHover = 'var(--syn-link-quiet-color-hover)';
945
980
 
981
+ /**
982
+ * @type {string}
983
+ */
984
+ export const SynLinkUnderlineOutline = 'var(--syn-link-underline-outline)';
985
+
946
986
  /**
947
987
  * @type {string}
948
988
  */
@@ -963,6 +1003,11 @@ export const SynPanelBackgroundColor = 'var(--syn-panel-background-color)';
963
1003
  */
964
1004
  export const SynPanelBorderColor = 'var(--syn-panel-border-color)';
965
1005
 
1006
+ /**
1007
+ * @type {string}
1008
+ */
1009
+ export const SynPanelBorderRadius = 'var(--syn-panel-border-radius)';
1010
+
966
1011
  /**
967
1012
  * @type {string}
968
1013
  */
@@ -1033,6 +1078,41 @@ export const SynSpacingXLarge = 'var(--syn-spacing-x-large)';
1033
1078
  */
1034
1079
  export const SynSpacingXSmall = 'var(--syn-spacing-x-small)';
1035
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
+
1036
1116
  /**
1037
1117
  * @type {string}
1038
1118
  */
package/dist/scss/_tokens.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.22.0
2
+ * @synergy-design-system/tokens version 2.24.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
  $SynBorderRadiusCircle: var(--syn-border-radius-circle) !default;
@@ -91,6 +91,7 @@ $SynDurationExtraSlow: var(--syn-duration-extra-slow) !default;
91
91
  $SynDurationFast: var(--syn-duration-fast) !default;
92
92
  $SynDurationNormal: var(--syn-duration-normal) !default;
93
93
  $SynDurationSlow: var(--syn-duration-slow) !default;
94
+ $SynFocusRingBorderRadius: var(--syn-focus-ring-border-radius) !default;
94
95
  $SynFocusRingColor: var(--syn-focus-ring-color) !default;
95
96
  $SynFocusRingOffset: var(--syn-focus-ring-offset) !default;
96
97
  $SynFocusRingStyle: var(--syn-focus-ring-style) !default;
@@ -174,6 +175,12 @@ $SynInputSpacingLarge: var(--syn-input-spacing-large) !default;
174
175
  $SynInputSpacingMedium: var(--syn-input-spacing-medium) !default;
175
176
  $SynInputSpacingSmall: var(--syn-input-spacing-small) !default;
176
177
  $SynInputWidth: var(--syn-input-width) !default;
178
+ $SynInteractiveEmphasisColor: var(--syn-interactive-emphasis-color) !default;
179
+ $SynInteractiveEmphasisColorActive: var(--syn-interactive-emphasis-color-active) !default;
180
+ $SynInteractiveEmphasisColorHover: var(--syn-interactive-emphasis-color-hover) !default;
181
+ $SynInteractiveQuietColor: var(--syn-interactive-quiet-color) !default;
182
+ $SynInteractiveQuietColorActive: var(--syn-interactive-quiet-color-active) !default;
183
+ $SynInteractiveQuietColorHover: var(--syn-interactive-quiet-color-hover) !default;
177
184
  $SynLetterSpacingDense: var(--syn-letter-spacing-dense) !default;
178
185
  $SynLetterSpacingDenser: var(--syn-letter-spacing-denser) !default;
179
186
  $SynLetterSpacingLoose: var(--syn-letter-spacing-loose) !default;
@@ -190,10 +197,12 @@ $SynLinkColorHover: var(--syn-link-color-hover) !default;
190
197
  $SynLinkQuietColor: var(--syn-link-quiet-color) !default;
191
198
  $SynLinkQuietColorActive: var(--syn-link-quiet-color-active) !default;
192
199
  $SynLinkQuietColorHover: var(--syn-link-quiet-color-hover) !default;
200
+ $SynLinkUnderlineOutline: var(--syn-link-underline-outline) !default;
193
201
  $SynOpacity50: var(--syn-opacity-50) !default;
194
202
  $SynOverlayBackgroundColor: var(--syn-overlay-background-color) !default;
195
203
  $SynPanelBackgroundColor: var(--syn-panel-background-color) !default;
196
204
  $SynPanelBorderColor: var(--syn-panel-border-color) !default;
205
+ $SynPanelBorderRadius: var(--syn-panel-border-radius) !default;
197
206
  $SynPanelBorderWidth: var(--syn-panel-border-width) !default;
198
207
  $SynSpacing2xLarge: var(--syn-spacing-2x-large) !default;
199
208
  $SynSpacing2xSmall: var(--syn-spacing-2x-small) !default;
@@ -208,6 +217,13 @@ $SynSpacingMediumLarge: var(--syn-spacing-medium-large) !default;
208
217
  $SynSpacingSmall: var(--syn-spacing-small) !default;
209
218
  $SynSpacingXLarge: var(--syn-spacing-x-large) !default;
210
219
  $SynSpacingXSmall: var(--syn-spacing-x-small) !default;
220
+ $SynSpinnerOpacity: var(--syn-spinner-opacity) !default;
221
+ $SynTableBackgroundColor: var(--syn-table-background-color) !default;
222
+ $SynTableBackgroundColorAlternating: var(--syn-table-background-color-alternating) !default;
223
+ $SynTableBackgroundColorHeader: var(--syn-table-background-color-header) !default;
224
+ $SynTableBorderColor: var(--syn-table-border-color) !default;
225
+ $SynTableShadowEnd: var(--syn-table-shadow-end) !default;
226
+ $SynTableShadowStart: var(--syn-table-shadow-start) !default;
211
227
  $SynTextDecorationDefault: var(--syn-text-decoration-default) !default;
212
228
  $SynTextDecorationUnderline: var(--syn-text-decoration-underline) !default;
213
229
  $SynToggleSizeLarge: var(--syn-toggle-size-large) !default;
package/dist/themes/dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.22.0
2
+ * @synergy-design-system/tokens version 2.24.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -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,6 +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);
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);
182
189
  --syn-letter-spacing-dense: -0.24px; /** Shoelace compatibility DO NOT USE */
183
190
  --syn-letter-spacing-denser: -0.48px; /** Shoelace compatibility DO NOT USE */
184
191
  --syn-letter-spacing-loose: 1.2px; /** Shoelace compatibility DO NOT USE */
@@ -189,16 +196,18 @@
189
196
  --syn-line-height-loose: 1.8; /** Shoelace compatibility DO NOT USE */
190
197
  --syn-line-height-looser: 2.2; /** Shoelace compatibility DO NOT USE */
191
198
  --syn-line-height-normal: 1.4; /** Shoelace compatibility DO NOT USE */
192
- --syn-link-color: var(--syn-color-primary-600);
193
- --syn-link-color-active: var(--syn-color-primary-950);
194
- --syn-link-color-hover: var(--syn-color-primary-900);
195
- --syn-link-quiet-color: var(--syn-typography-color-text);
196
- --syn-link-quiet-color-active: var(--syn-color-primary-950);
197
- --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%;
198
206
  --syn-opacity-50: 0.5; /** 50% */
199
207
  --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
200
208
  --syn-panel-background-color: var(--syn-color-neutral-0);
201
209
  --syn-panel-border-color: var(--syn-color-neutral-300);
210
+ --syn-panel-border-radius: var(--syn-border-radius-medium);
202
211
  --syn-panel-border-width: var(--syn-border-width-small);
203
212
  --syn-spacing-2x-large: 48px;
204
213
  --syn-spacing-2x-small: 4px;
@@ -213,6 +222,13 @@
213
222
  --syn-spacing-small: 12px;
214
223
  --syn-spacing-x-large: 32px;
215
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);
216
232
  --syn-text-decoration-default: none;
217
233
  --syn-text-decoration-underline: underline;
218
234
  --syn-toggle-size-large: var(--syn-spacing-large);
package/dist/themes/light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.22.0
2
+ * @synergy-design-system/tokens version 2.24.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -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,6 +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);
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);
182
189
  --syn-letter-spacing-dense: -0.24px; /** Shoelace compatibility DO NOT USE */
183
190
  --syn-letter-spacing-denser: -0.48px; /** Shoelace compatibility DO NOT USE */
184
191
  --syn-letter-spacing-loose: 1.2px; /** Shoelace compatibility DO NOT USE */
@@ -189,16 +196,18 @@
189
196
  --syn-line-height-loose: 1.8; /** Shoelace compatibility DO NOT USE */
190
197
  --syn-line-height-looser: 2.2; /** Shoelace compatibility DO NOT USE */
191
198
  --syn-line-height-normal: 1.4; /** Shoelace compatibility DO NOT USE */
192
- --syn-link-color: var(--syn-color-primary-600);
193
- --syn-link-color-active: var(--syn-color-primary-950);
194
- --syn-link-color-hover: var(--syn-color-primary-900);
195
- --syn-link-quiet-color: var(--syn-typography-color-text);
196
- --syn-link-quiet-color-active: var(--syn-color-primary-950);
197
- --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%;
198
206
  --syn-opacity-50: 0.5; /** 50% */
199
207
  --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
200
208
  --syn-panel-background-color: var(--syn-color-neutral-0);
201
209
  --syn-panel-border-color: var(--syn-color-neutral-300);
210
+ --syn-panel-border-radius: var(--syn-border-radius-medium);
202
211
  --syn-panel-border-width: var(--syn-border-width-small);
203
212
  --syn-spacing-2x-large: 48px;
204
213
  --syn-spacing-2x-small: 4px;
@@ -213,6 +222,13 @@
213
222
  --syn-spacing-small: 12px;
214
223
  --syn-spacing-x-large: 32px;
215
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);
216
232
  --syn-text-decoration-default: none;
217
233
  --syn-text-decoration-underline: underline;
218
234
  --syn-toggle-size-large: var(--syn-spacing-large);
package/dist/themes/sick2018_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.22.0
2
+ * @synergy-design-system/tokens version 2.24.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -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,6 +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);
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);
182
189
  --syn-letter-spacing-dense: -0.24px; /** Shoelace compatibility DO NOT USE */
183
190
  --syn-letter-spacing-denser: -0.48px; /** Shoelace compatibility DO NOT USE */
184
191
  --syn-letter-spacing-loose: 1.2px; /** Shoelace compatibility DO NOT USE */
@@ -189,16 +196,18 @@
189
196
  --syn-line-height-loose: 1.8; /** Shoelace compatibility DO NOT USE */
190
197
  --syn-line-height-looser: 2.2; /** Shoelace compatibility DO NOT USE */
191
198
  --syn-line-height-normal: 1.4; /** Shoelace compatibility DO NOT USE */
192
- --syn-link-color: var(--syn-color-primary-600);
193
- --syn-link-color-active: var(--syn-color-primary-950);
194
- --syn-link-color-hover: var(--syn-color-primary-900);
195
- --syn-link-quiet-color: var(--syn-typography-color-text);
196
- --syn-link-quiet-color-active: var(--syn-color-primary-950);
197
- --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%;
198
206
  --syn-opacity-50: 0.5; /** 50% */
199
207
  --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
200
208
  --syn-panel-background-color: var(--syn-color-neutral-0);
201
209
  --syn-panel-border-color: var(--syn-color-neutral-300);
210
+ --syn-panel-border-radius: var(--syn-border-radius-medium);
202
211
  --syn-panel-border-width: var(--syn-border-width-small);
203
212
  --syn-spacing-2x-large: 48px;
204
213
  --syn-spacing-2x-small: 4px;
@@ -213,6 +222,13 @@
213
222
  --syn-spacing-small: 12px;
214
223
  --syn-spacing-x-large: 32px;
215
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);
216
232
  --syn-text-decoration-default: none;
217
233
  --syn-text-decoration-underline: underline;
218
234
  --syn-toggle-size-large: var(--syn-spacing-large);
package/dist/themes/sick2018_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.22.0
2
+ * @synergy-design-system/tokens version 2.24.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -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,6 +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);
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);
182
189
  --syn-letter-spacing-dense: -0.24px; /** Shoelace compatibility DO NOT USE */
183
190
  --syn-letter-spacing-denser: -0.48px; /** Shoelace compatibility DO NOT USE */
184
191
  --syn-letter-spacing-loose: 1.2px; /** Shoelace compatibility DO NOT USE */
@@ -189,16 +196,18 @@
189
196
  --syn-line-height-loose: 1.8; /** Shoelace compatibility DO NOT USE */
190
197
  --syn-line-height-looser: 2.2; /** Shoelace compatibility DO NOT USE */
191
198
  --syn-line-height-normal: 1.4; /** Shoelace compatibility DO NOT USE */
192
- --syn-link-color: var(--syn-color-primary-600);
193
- --syn-link-color-active: var(--syn-color-primary-950);
194
- --syn-link-color-hover: var(--syn-color-primary-900);
195
- --syn-link-quiet-color: var(--syn-typography-color-text);
196
- --syn-link-quiet-color-active: var(--syn-color-primary-950);
197
- --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%;
198
206
  --syn-opacity-50: 0.5; /** 50% */
199
207
  --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
200
208
  --syn-panel-background-color: var(--syn-color-neutral-0);
201
209
  --syn-panel-border-color: var(--syn-color-neutral-300);
210
+ --syn-panel-border-radius: var(--syn-border-radius-medium);
202
211
  --syn-panel-border-width: var(--syn-border-width-small);
203
212
  --syn-spacing-2x-large: 48px;
204
213
  --syn-spacing-2x-small: 4px;
@@ -213,6 +222,13 @@
213
222
  --syn-spacing-small: 12px;
214
223
  --syn-spacing-x-large: 32px;
215
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);
216
232
  --syn-text-decoration-default: none;
217
233
  --syn-text-decoration-underline: underline;
218
234
  --syn-toggle-size-large: var(--syn-spacing-large);