@synergy-design-system/tokens 2.24.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 +7 -0
  2. package/README.md +4 -2
  3. package/dist/js/index.d.ts +63 -13
  4. package/dist/js/index.js +57 -7
  5. package/dist/scss/_tokens.scss +17 -7
  6. package/dist/themes/dark.css +23 -13
  7. package/dist/themes/light.css +23 -13
  8. package/dist/themes/sick2018_dark.css +23 -13
  9. package/dist/themes/sick2018_light.css +23 -13
  10. package/dist/themes/sick2025_dark.css +36 -26
  11. package/dist/themes/sick2025_light.css +25 -15
  12. package/package.json +5 -1
  13. package/src/figma-variables/output/sick2018-dark.json +60 -10
  14. package/src/figma-variables/output/sick2018-light.json +60 -10
  15. package/src/figma-variables/output/sick2025-dark.json +72 -22
  16. package/src/figma-variables/output/sick2025-light.json +61 -11
package/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/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.23.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
  */
@@ -864,34 +869,34 @@ export const SynInputSpacingSmall: string;
864
869
  export const SynInputWidth: string;
865
870
 
866
871
  /**
867
- * Maps to the css variable `--syn-interactive-primary-color`
872
+ * Maps to the css variable `--syn-interactive-emphasis-color`
868
873
  */
869
- export const SynInteractivePrimaryColor: string;
874
+ export const SynInteractiveEmphasisColor: string;
870
875
 
871
876
  /**
872
- * Maps to the css variable `--syn-interactive-primary-color-active`
877
+ * Maps to the css variable `--syn-interactive-emphasis-color-active`
873
878
  */
874
- export const SynInteractivePrimaryColorActive: string;
879
+ export const SynInteractiveEmphasisColorActive: string;
875
880
 
876
881
  /**
877
- * Maps to the css variable `--syn-interactive-primary-color-hover`
882
+ * Maps to the css variable `--syn-interactive-emphasis-color-hover`
878
883
  */
879
- export const SynInteractivePrimaryColorHover: string;
884
+ export const SynInteractiveEmphasisColorHover: string;
880
885
 
881
886
  /**
882
- * Maps to the css variable `--syn-interactive-secondary-color`
887
+ * Maps to the css variable `--syn-interactive-quiet-color`
883
888
  */
884
- export const SynInteractiveSecondaryColor: string;
889
+ export const SynInteractiveQuietColor: string;
885
890
 
886
891
  /**
887
- * Maps to the css variable `--syn-interactive-secondary-color-active`
892
+ * Maps to the css variable `--syn-interactive-quiet-color-active`
888
893
  */
889
- export const SynInteractiveSecondaryColorActive: string;
894
+ export const SynInteractiveQuietColorActive: string;
890
895
 
891
896
  /**
892
- * Maps to the css variable `--syn-interactive-secondary-color-hover`
897
+ * Maps to the css variable `--syn-interactive-quiet-color-hover`
893
898
  */
894
- export const SynInteractiveSecondaryColorHover: string;
899
+ export const SynInteractiveQuietColorHover: string;
895
900
 
896
901
  /**
897
902
  * Maps to the css variable `--syn-letter-spacing-dense`
@@ -973,6 +978,11 @@ export const SynLinkQuietColorActive: string;
973
978
  */
974
979
  export const SynLinkQuietColorHover: string;
975
980
 
981
+ /**
982
+ * Maps to the css variable `--syn-link-underline-outline`
983
+ */
984
+ export const SynLinkUnderlineOutline: string;
985
+
976
986
  /**
977
987
  * Maps to the css variable `--syn-opacity-50`
978
988
  */
@@ -993,6 +1003,11 @@ export const SynPanelBackgroundColor: string;
993
1003
  */
994
1004
  export const SynPanelBorderColor: string;
995
1005
 
1006
+ /**
1007
+ * Maps to the css variable `--syn-panel-border-radius`
1008
+ */
1009
+ export const SynPanelBorderRadius: string;
1010
+
996
1011
  /**
997
1012
  * Maps to the css variable `--syn-panel-border-width`
998
1013
  */
@@ -1063,6 +1078,41 @@ export const SynSpacingXLarge: string;
1063
1078
  */
1064
1079
  export const SynSpacingXSmall: string;
1065
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
+
1066
1116
  /**
1067
1117
  * Maps to the css variable `--syn-text-decoration-default`
1068
1118
  */
package/dist/js/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.23.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
  */
@@ -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/dist/scss/_tokens.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.23.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,12 +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;
177
- $SynInteractivePrimaryColor: var(--syn-interactive-primary-color) !default;
178
- $SynInteractivePrimaryColorActive: var(--syn-interactive-primary-color-active) !default;
179
- $SynInteractivePrimaryColorHover: var(--syn-interactive-primary-color-hover) !default;
180
- $SynInteractiveSecondaryColor: var(--syn-interactive-secondary-color) !default;
181
- $SynInteractiveSecondaryColorActive: var(--syn-interactive-secondary-color-active) !default;
182
- $SynInteractiveSecondaryColorHover: var(--syn-interactive-secondary-color-hover) !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;
183
184
  $SynLetterSpacingDense: var(--syn-letter-spacing-dense) !default;
184
185
  $SynLetterSpacingDenser: var(--syn-letter-spacing-denser) !default;
185
186
  $SynLetterSpacingLoose: var(--syn-letter-spacing-loose) !default;
@@ -196,10 +197,12 @@ $SynLinkColorHover: var(--syn-link-color-hover) !default;
196
197
  $SynLinkQuietColor: var(--syn-link-quiet-color) !default;
197
198
  $SynLinkQuietColorActive: var(--syn-link-quiet-color-active) !default;
198
199
  $SynLinkQuietColorHover: var(--syn-link-quiet-color-hover) !default;
200
+ $SynLinkUnderlineOutline: var(--syn-link-underline-outline) !default;
199
201
  $SynOpacity50: var(--syn-opacity-50) !default;
200
202
  $SynOverlayBackgroundColor: var(--syn-overlay-background-color) !default;
201
203
  $SynPanelBackgroundColor: var(--syn-panel-background-color) !default;
202
204
  $SynPanelBorderColor: var(--syn-panel-border-color) !default;
205
+ $SynPanelBorderRadius: var(--syn-panel-border-radius) !default;
203
206
  $SynPanelBorderWidth: var(--syn-panel-border-width) !default;
204
207
  $SynSpacing2xLarge: var(--syn-spacing-2x-large) !default;
205
208
  $SynSpacing2xSmall: var(--syn-spacing-2x-small) !default;
@@ -214,6 +217,13 @@ $SynSpacingMediumLarge: var(--syn-spacing-medium-large) !default;
214
217
  $SynSpacingSmall: var(--syn-spacing-small) !default;
215
218
  $SynSpacingXLarge: var(--syn-spacing-x-large) !default;
216
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;
217
227
  $SynTextDecorationDefault: var(--syn-text-decoration-default) !default;
218
228
  $SynTextDecorationUnderline: var(--syn-text-decoration-underline) !default;
219
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.23.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,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/dist/themes/light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.23.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,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/dist/themes/sick2018_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.23.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,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/dist/themes/sick2018_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.23.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,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);