@synergy-design-system/tokens 2.26.1 → 2.27.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 (15) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/js/index.d.ts +11 -11
  3. package/dist/js/index.js +11 -11
  4. package/dist/scss/_tokens.scss +3 -3
  5. package/dist/themes/dark.css +6 -6
  6. package/dist/themes/light.css +6 -6
  7. package/dist/themes/sick2018_dark.css +6 -6
  8. package/dist/themes/sick2018_light.css +6 -6
  9. package/dist/themes/sick2025_dark.css +6 -6
  10. package/dist/themes/sick2025_light.css +6 -6
  11. package/package.json +3 -3
  12. package/src/figma-variables/output/sick2018-dark.json +15 -11
  13. package/src/figma-variables/output/sick2018-light.json +15 -11
  14. package/src/figma-variables/output/sick2025-dark.json +15 -11
  15. package/src/figma-variables/output/sick2025-light.json +15 -11
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ # [@synergy-design-system/tokens-v2.27.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.26.1...tokens/2.27.0) (2025-10-02)
2
+
3
+
4
+ ### Features
5
+
6
+ * ✨ CD update for syn-divider, syn-tag, syn-accordion, syn-details ([#1028](https://github.com/synergy-design-system/synergy-design-system/issues/1028)) ([b43a81a](https://github.com/synergy-design-system/synergy-design-system/commit/b43a81ab651da6b41668e481981ccbdcc1f07254))
7
+
1
8
  # [@synergy-design-system/tokens-v2.26.1](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.26.0...tokens/2.26.1) (2025-09-30)
2
9
 
3
10
 
package/dist/js/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.26.0
2
+ * @synergy-design-system/tokens version 2.26.1
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
@@ -418,6 +418,11 @@ export const SynColorWarning900: string;
418
418
  */
419
419
  export const SynColorWarning950: string;
420
420
 
421
+ /**
422
+ * Maps to the css variable `--syn-details-open-rotation`
423
+ */
424
+ export const SynDetailsOpenRotation: string;
425
+
421
426
  /**
422
427
  * Maps to the css variable `--syn-dimension-base`
423
428
  */
@@ -733,11 +738,6 @@ export const SynInputHelpTextFontSizeSmall: string;
733
738
  */
734
739
  export const SynInputIconColor: string;
735
740
 
736
- /**
737
- * Maps to the css variable `--syn-input-icon-color-focus`
738
- */
739
- export const SynInputIconColorFocus: string;
740
-
741
741
  /**
742
742
  * Maps to the css variable `--syn-input-icon-color-hover`
743
743
  */
@@ -748,11 +748,6 @@ export const SynInputIconColorHover: string;
748
748
  */
749
749
  export const SynInputIconIconClearableColor: string;
750
750
 
751
- /**
752
- * Maps to the css variable `--syn-input-icon-icon-clearable-color-focus`
753
- */
754
- export const SynInputIconIconClearableColorFocus: string;
755
-
756
751
  /**
757
752
  * Maps to the css variable `--syn-input-icon-icon-clearable-color-hover`
758
753
  */
@@ -868,6 +863,11 @@ export const SynInputSpacingSmall: string;
868
863
  */
869
864
  export const SynInputWidth: string;
870
865
 
866
+ /**
867
+ * Maps to the css variable `--syn-interactive-background-color-hover`
868
+ */
869
+ export const SynInteractiveBackgroundColorHover: string;
870
+
871
871
  /**
872
872
  * Maps to the css variable `--syn-interactive-emphasis-color`
873
873
  */
package/dist/js/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.26.0
2
+ * @synergy-design-system/tokens version 2.26.1
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
@@ -418,6 +418,11 @@ export const SynColorWarning900 = 'var(--syn-color-warning-900)';
418
418
  */
419
419
  export const SynColorWarning950 = 'var(--syn-color-warning-950)';
420
420
 
421
+ /**
422
+ * @type {string}
423
+ */
424
+ export const SynDetailsOpenRotation = 'var(--syn-details-open-rotation)';
425
+
421
426
  /**
422
427
  * @type {string}
423
428
  */
@@ -733,11 +738,6 @@ export const SynInputHelpTextFontSizeSmall = 'var(--syn-input-help-text-font-siz
733
738
  */
734
739
  export const SynInputIconColor = 'var(--syn-input-icon-color)';
735
740
 
736
- /**
737
- * @type {string}
738
- */
739
- export const SynInputIconColorFocus = 'var(--syn-input-icon-color-focus)';
740
-
741
741
  /**
742
742
  * @type {string}
743
743
  */
@@ -748,11 +748,6 @@ export const SynInputIconColorHover = 'var(--syn-input-icon-color-hover)';
748
748
  */
749
749
  export const SynInputIconIconClearableColor = 'var(--syn-input-icon-icon-clearable-color)';
750
750
 
751
- /**
752
- * @type {string}
753
- */
754
- export const SynInputIconIconClearableColorFocus = 'var(--syn-input-icon-icon-clearable-color-focus)';
755
-
756
751
  /**
757
752
  * @type {string}
758
753
  */
@@ -868,6 +863,11 @@ export const SynInputSpacingSmall = 'var(--syn-input-spacing-small)';
868
863
  */
869
864
  export const SynInputWidth = 'var(--syn-input-width)';
870
865
 
866
+ /**
867
+ * @type {string}
868
+ */
869
+ export const SynInteractiveBackgroundColorHover = 'var(--syn-interactive-background-color-hover)';
870
+
871
871
  /**
872
872
  * @type {string}
873
873
  */
package/dist/scss/_tokens.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.26.0
2
+ * @synergy-design-system/tokens version 2.26.1
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
  $SynBorderRadiusCircle: var(--syn-border-radius-circle) !default;
@@ -85,6 +85,7 @@ $SynColorWarning700: var(--syn-color-warning-700) !default;
85
85
  $SynColorWarning800: var(--syn-color-warning-800) !default;
86
86
  $SynColorWarning900: var(--syn-color-warning-900) !default;
87
87
  $SynColorWarning950: var(--syn-color-warning-950) !default;
88
+ $SynDetailsOpenRotation: var(--syn-details-open-rotation) !default;
88
89
  $SynDimensionBase: var(--syn-dimension-base) !default;
89
90
  $SynDurationExtraFast: var(--syn-duration-extra-fast) !default;
90
91
  $SynDurationExtraSlow: var(--syn-duration-extra-slow) !default;
@@ -148,10 +149,8 @@ $SynInputHelpTextFontSizeLarge: var(--syn-input-help-text-font-size-large) !defa
148
149
  $SynInputHelpTextFontSizeMedium: var(--syn-input-help-text-font-size-medium) !default;
149
150
  $SynInputHelpTextFontSizeSmall: var(--syn-input-help-text-font-size-small) !default;
150
151
  $SynInputIconColor: var(--syn-input-icon-color) !default;
151
- $SynInputIconColorFocus: var(--syn-input-icon-color-focus) !default;
152
152
  $SynInputIconColorHover: var(--syn-input-icon-color-hover) !default;
153
153
  $SynInputIconIconClearableColor: var(--syn-input-icon-icon-clearable-color) !default;
154
- $SynInputIconIconClearableColorFocus: var(--syn-input-icon-icon-clearable-color-focus) !default;
155
154
  $SynInputIconIconClearableColorHover: var(--syn-input-icon-icon-clearable-color-hover) !default;
156
155
  $SynInputLabelColor: var(--syn-input-label-color) !default;
157
156
  $SynInputLabelFontSizeLarge: var(--syn-input-label-font-size-large) !default;
@@ -175,6 +174,7 @@ $SynInputSpacingLarge: var(--syn-input-spacing-large) !default;
175
174
  $SynInputSpacingMedium: var(--syn-input-spacing-medium) !default;
176
175
  $SynInputSpacingSmall: var(--syn-input-spacing-small) !default;
177
176
  $SynInputWidth: var(--syn-input-width) !default;
177
+ $SynInteractiveBackgroundColorHover: var(--syn-interactive-background-color-hover) !default;
178
178
  $SynInteractiveEmphasisColor: var(--syn-interactive-emphasis-color) !default;
179
179
  $SynInteractiveEmphasisColorActive: var(--syn-interactive-emphasis-color-active) !default;
180
180
  $SynInteractiveEmphasisColorHover: var(--syn-interactive-emphasis-color-hover) !default;
package/dist/themes/dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.26.0
2
+ * @synergy-design-system/tokens version 2.26.1
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -90,13 +90,14 @@
90
90
  --syn-color-warning-800: #fcec8c;
91
91
  --syn-color-warning-900: #fdf7c4;
92
92
  --syn-color-warning-950: #fefce8;
93
+ --syn-details-open-rotation: 360deg;
93
94
  --syn-dimension-base: 4px; /** to be deprecated */
94
95
  --syn-duration-extra-fast: 50ms;
95
96
  --syn-duration-extra-slow: 1000ms;
96
97
  --syn-duration-fast: 150ms;
97
98
  --syn-duration-normal: 250ms;
98
99
  --syn-duration-slow: 500ms;
99
- --syn-focus-ring-border-radius: 0px;
100
+ --syn-focus-ring-border-radius: var(--syn-border-radius-none);
100
101
  --syn-focus-ring-color: var(--syn-color-primary-400);
101
102
  --syn-focus-ring-offset: var(--syn-spacing-3x-small);
102
103
  --syn-focus-ring-style: solid;
@@ -153,11 +154,9 @@
153
154
  --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
154
155
  --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
155
156
  --syn-input-icon-color: var(--syn-color-neutral-800);
156
- --syn-input-icon-color-focus: var(--syn-color-neutral-800);
157
157
  --syn-input-icon-color-hover: var(--syn-color-neutral-800);
158
- --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-500);
159
- --syn-input-icon-icon-clearable-color-focus: var(--syn-color-neutral-500);
160
- --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-500);
158
+ --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-600);
159
+ --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-800);
161
160
  --syn-input-label-color: var(--syn-color-neutral-950);
162
161
  --syn-input-label-font-size-large: var(--syn-font-size-large);
163
162
  --syn-input-label-font-size-medium: var(--syn-font-size-medium);
@@ -180,6 +179,7 @@
180
179
  --syn-input-spacing-medium: var(--syn-spacing-medium);
181
180
  --syn-input-spacing-small: var(--syn-spacing-small);
182
181
  --syn-input-width: var(--syn-border-width-small);
182
+ --syn-interactive-background-color-hover: var(--syn-color-neutral-100);
183
183
  --syn-interactive-emphasis-color: var(--syn-color-primary-600);
184
184
  --syn-interactive-emphasis-color-active: var(--syn-color-primary-950);
185
185
  --syn-interactive-emphasis-color-hover: var(--syn-color-primary-900);
package/dist/themes/light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.26.0
2
+ * @synergy-design-system/tokens version 2.26.1
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -90,13 +90,14 @@
90
90
  --syn-color-warning-800: #834b10;
91
91
  --syn-color-warning-900: #6f3e14;
92
92
  --syn-color-warning-950: #411f07;
93
+ --syn-details-open-rotation: 360deg;
93
94
  --syn-dimension-base: 4px; /** to be deprecated */
94
95
  --syn-duration-extra-fast: 50ms;
95
96
  --syn-duration-extra-slow: 1000ms;
96
97
  --syn-duration-fast: 150ms;
97
98
  --syn-duration-normal: 250ms;
98
99
  --syn-duration-slow: 500ms;
99
- --syn-focus-ring-border-radius: 0px;
100
+ --syn-focus-ring-border-radius: var(--syn-border-radius-none);
100
101
  --syn-focus-ring-color: var(--syn-color-primary-400);
101
102
  --syn-focus-ring-offset: var(--syn-spacing-3x-small);
102
103
  --syn-focus-ring-style: solid;
@@ -153,11 +154,9 @@
153
154
  --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
154
155
  --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
155
156
  --syn-input-icon-color: var(--syn-color-neutral-800);
156
- --syn-input-icon-color-focus: var(--syn-color-neutral-800);
157
157
  --syn-input-icon-color-hover: var(--syn-color-neutral-800);
158
- --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-500);
159
- --syn-input-icon-icon-clearable-color-focus: var(--syn-color-neutral-500);
160
- --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-500);
158
+ --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-600);
159
+ --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-800);
161
160
  --syn-input-label-color: var(--syn-color-neutral-950);
162
161
  --syn-input-label-font-size-large: var(--syn-font-size-large);
163
162
  --syn-input-label-font-size-medium: var(--syn-font-size-medium);
@@ -180,6 +179,7 @@
180
179
  --syn-input-spacing-medium: var(--syn-spacing-medium);
181
180
  --syn-input-spacing-small: var(--syn-spacing-small);
182
181
  --syn-input-width: var(--syn-border-width-small);
182
+ --syn-interactive-background-color-hover: var(--syn-color-neutral-100);
183
183
  --syn-interactive-emphasis-color: var(--syn-color-primary-600);
184
184
  --syn-interactive-emphasis-color-active: var(--syn-color-primary-950);
185
185
  --syn-interactive-emphasis-color-hover: var(--syn-color-primary-900);
package/dist/themes/sick2018_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.26.0
2
+ * @synergy-design-system/tokens version 2.26.1
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -90,13 +90,14 @@
90
90
  --syn-color-warning-800: #fcec8c;
91
91
  --syn-color-warning-900: #fdf7c4;
92
92
  --syn-color-warning-950: #fefce8;
93
+ --syn-details-open-rotation: 360deg;
93
94
  --syn-dimension-base: 4px; /** to be deprecated */
94
95
  --syn-duration-extra-fast: 50ms;
95
96
  --syn-duration-extra-slow: 1000ms;
96
97
  --syn-duration-fast: 150ms;
97
98
  --syn-duration-normal: 250ms;
98
99
  --syn-duration-slow: 500ms;
99
- --syn-focus-ring-border-radius: 0px;
100
+ --syn-focus-ring-border-radius: var(--syn-border-radius-none);
100
101
  --syn-focus-ring-color: var(--syn-color-primary-400);
101
102
  --syn-focus-ring-offset: var(--syn-spacing-3x-small);
102
103
  --syn-focus-ring-style: solid;
@@ -153,11 +154,9 @@
153
154
  --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
154
155
  --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
155
156
  --syn-input-icon-color: var(--syn-color-neutral-800);
156
- --syn-input-icon-color-focus: var(--syn-color-neutral-800);
157
157
  --syn-input-icon-color-hover: var(--syn-color-neutral-800);
158
- --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-500);
159
- --syn-input-icon-icon-clearable-color-focus: var(--syn-color-neutral-500);
160
- --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-500);
158
+ --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-600);
159
+ --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-800);
161
160
  --syn-input-label-color: var(--syn-color-neutral-950);
162
161
  --syn-input-label-font-size-large: var(--syn-font-size-large);
163
162
  --syn-input-label-font-size-medium: var(--syn-font-size-medium);
@@ -180,6 +179,7 @@
180
179
  --syn-input-spacing-medium: var(--syn-spacing-medium);
181
180
  --syn-input-spacing-small: var(--syn-spacing-small);
182
181
  --syn-input-width: var(--syn-border-width-small);
182
+ --syn-interactive-background-color-hover: var(--syn-color-neutral-100);
183
183
  --syn-interactive-emphasis-color: var(--syn-color-primary-600);
184
184
  --syn-interactive-emphasis-color-active: var(--syn-color-primary-950);
185
185
  --syn-interactive-emphasis-color-hover: var(--syn-color-primary-900);
package/dist/themes/sick2018_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.26.0
2
+ * @synergy-design-system/tokens version 2.26.1
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -90,13 +90,14 @@
90
90
  --syn-color-warning-800: #834b10;
91
91
  --syn-color-warning-900: #6f3e14;
92
92
  --syn-color-warning-950: #411f07;
93
+ --syn-details-open-rotation: 360deg;
93
94
  --syn-dimension-base: 4px; /** to be deprecated */
94
95
  --syn-duration-extra-fast: 50ms;
95
96
  --syn-duration-extra-slow: 1000ms;
96
97
  --syn-duration-fast: 150ms;
97
98
  --syn-duration-normal: 250ms;
98
99
  --syn-duration-slow: 500ms;
99
- --syn-focus-ring-border-radius: 0px;
100
+ --syn-focus-ring-border-radius: var(--syn-border-radius-none);
100
101
  --syn-focus-ring-color: var(--syn-color-primary-400);
101
102
  --syn-focus-ring-offset: var(--syn-spacing-3x-small);
102
103
  --syn-focus-ring-style: solid;
@@ -153,11 +154,9 @@
153
154
  --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
154
155
  --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
155
156
  --syn-input-icon-color: var(--syn-color-neutral-800);
156
- --syn-input-icon-color-focus: var(--syn-color-neutral-800);
157
157
  --syn-input-icon-color-hover: var(--syn-color-neutral-800);
158
- --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-500);
159
- --syn-input-icon-icon-clearable-color-focus: var(--syn-color-neutral-500);
160
- --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-500);
158
+ --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-600);
159
+ --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-800);
161
160
  --syn-input-label-color: var(--syn-color-neutral-950);
162
161
  --syn-input-label-font-size-large: var(--syn-font-size-large);
163
162
  --syn-input-label-font-size-medium: var(--syn-font-size-medium);
@@ -180,6 +179,7 @@
180
179
  --syn-input-spacing-medium: var(--syn-spacing-medium);
181
180
  --syn-input-spacing-small: var(--syn-spacing-small);
182
181
  --syn-input-width: var(--syn-border-width-small);
182
+ --syn-interactive-background-color-hover: var(--syn-color-neutral-100);
183
183
  --syn-interactive-emphasis-color: var(--syn-color-primary-600);
184
184
  --syn-interactive-emphasis-color-active: var(--syn-color-primary-950);
185
185
  --syn-interactive-emphasis-color-hover: var(--syn-color-primary-900);
package/dist/themes/sick2025_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.26.0
2
+ * @synergy-design-system/tokens version 2.26.1
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -90,13 +90,14 @@
90
90
  --syn-color-warning-800: #ffe67c;
91
91
  --syn-color-warning-900: #fff5c6;
92
92
  --syn-color-warning-950: #fffbeb;
93
+ --syn-details-open-rotation: 0deg;
93
94
  --syn-dimension-base: 4px; /** to be deprecated */
94
95
  --syn-duration-extra-fast: 50ms;
95
96
  --syn-duration-extra-slow: 1000ms;
96
97
  --syn-duration-fast: 150ms;
97
98
  --syn-duration-normal: 250ms;
98
99
  --syn-duration-slow: 500ms;
99
- --syn-focus-ring-border-radius: 4px;
100
+ --syn-focus-ring-border-radius: var(--syn-border-radius-small);
100
101
  --syn-focus-ring-color: var(--syn-color-primary-500);
101
102
  --syn-focus-ring-offset: var(--syn-spacing-3x-small);
102
103
  --syn-focus-ring-style: solid;
@@ -153,11 +154,9 @@
153
154
  --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
154
155
  --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
155
156
  --syn-input-icon-color: var(--syn-color-neutral-1000);
156
- --syn-input-icon-color-focus: var(--syn-color-neutral-1000);
157
157
  --syn-input-icon-color-hover: var(--syn-color-neutral-1000);
158
158
  --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-600);
159
- --syn-input-icon-icon-clearable-color-focus: var(--syn-color-neutral-600);
160
- --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-600);
159
+ --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-800);
161
160
  --syn-input-label-color: var(--syn-color-neutral-1000);
162
161
  --syn-input-label-font-size-large: var(--syn-font-size-large);
163
162
  --syn-input-label-font-size-medium: var(--syn-font-size-medium);
@@ -180,6 +179,7 @@
180
179
  --syn-input-spacing-medium: var(--syn-spacing-medium);
181
180
  --syn-input-spacing-small: var(--syn-spacing-small);
182
181
  --syn-input-width: var(--syn-border-width-small);
182
+ --syn-interactive-background-color-hover: var(--syn-color-neutral-100);
183
183
  --syn-interactive-emphasis-color: var(--syn-color-primary-500);
184
184
  --syn-interactive-emphasis-color-active: var(--syn-color-neutral-1000);
185
185
  --syn-interactive-emphasis-color-hover: var(--syn-color-primary-900);
@@ -207,7 +207,7 @@
207
207
  --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
208
208
  --syn-panel-background-color: var(--syn-color-neutral-50);
209
209
  --syn-panel-border-color: var(--syn-color-neutral-300);
210
- --syn-panel-border-radius: var(--syn-border-radius-x-large);
210
+ --syn-panel-border-radius: var(--syn-border-radius-medium);
211
211
  --syn-panel-border-width: var(--syn-border-width-small);
212
212
  --syn-spacing-2x-large: 48px;
213
213
  --syn-spacing-2x-small: 4px;
package/dist/themes/sick2025_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.26.0
2
+ * @synergy-design-system/tokens version 2.26.1
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -90,13 +90,14 @@
90
90
  --syn-color-warning-800: #89540a;
91
91
  --syn-color-warning-900: #74450f;
92
92
  --syn-color-warning-950: #442404;
93
+ --syn-details-open-rotation: 0deg;
93
94
  --syn-dimension-base: 4px; /** to be deprecated */
94
95
  --syn-duration-extra-fast: 50ms;
95
96
  --syn-duration-extra-slow: 1000ms;
96
97
  --syn-duration-fast: 150ms;
97
98
  --syn-duration-normal: 250ms;
98
99
  --syn-duration-slow: 500ms;
99
- --syn-focus-ring-border-radius: 4px;
100
+ --syn-focus-ring-border-radius: var(--syn-border-radius-small);
100
101
  --syn-focus-ring-color: var(--syn-color-primary-700);
101
102
  --syn-focus-ring-offset: var(--syn-spacing-3x-small);
102
103
  --syn-focus-ring-style: solid;
@@ -153,11 +154,9 @@
153
154
  --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
154
155
  --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
155
156
  --syn-input-icon-color: var(--syn-color-neutral-950);
156
- --syn-input-icon-color-focus: var(--syn-color-neutral-950);
157
157
  --syn-input-icon-color-hover: var(--syn-color-neutral-950);
158
158
  --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-500);
159
- --syn-input-icon-icon-clearable-color-focus: var(--syn-color-neutral-500);
160
- --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-500);
159
+ --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-700);
161
160
  --syn-input-label-color: var(--syn-color-neutral-950);
162
161
  --syn-input-label-font-size-large: var(--syn-font-size-large);
163
162
  --syn-input-label-font-size-medium: var(--syn-font-size-medium);
@@ -180,6 +179,7 @@
180
179
  --syn-input-spacing-medium: var(--syn-spacing-medium);
181
180
  --syn-input-spacing-small: var(--syn-spacing-small);
182
181
  --syn-input-width: var(--syn-border-width-small);
182
+ --syn-interactive-background-color-hover: #f8f7f6;
183
183
  --syn-interactive-emphasis-color: var(--syn-color-primary-700);
184
184
  --syn-interactive-emphasis-color-active: var(--syn-color-neutral-950);
185
185
  --syn-interactive-emphasis-color-hover: var(--syn-color-primary-900);
@@ -207,7 +207,7 @@
207
207
  --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
208
208
  --syn-panel-background-color: var(--syn-color-neutral-0);
209
209
  --syn-panel-border-color: #e6e1dc;
210
- --syn-panel-border-radius: var(--syn-border-radius-x-large);
210
+ --syn-panel-border-radius: var(--syn-border-radius-medium);
211
211
  --syn-panel-border-width: var(--syn-border-width-small);
212
212
  --syn-spacing-2x-large: 48px;
213
213
  --syn-spacing-2x-small: 4px;
package/package.json CHANGED
@@ -25,8 +25,8 @@
25
25
  "style-dictionary": "^5.0.1",
26
26
  "stylelint": "^16.23.0",
27
27
  "typescript": "^5.8.3",
28
- "@synergy-design-system/eslint-config-syn": "0.1.0",
29
- "@synergy-design-system/stylelint-config-syn": "0.1.0"
28
+ "@synergy-design-system/stylelint-config-syn": "0.1.0",
29
+ "@synergy-design-system/eslint-config-syn": "0.1.0"
30
30
  },
31
31
  "exports": {
32
32
  ".": {
@@ -113,7 +113,7 @@
113
113
  },
114
114
  "type": "module",
115
115
  "types": "./dist/js/index.d.ts",
116
- "version": "2.26.1",
116
+ "version": "2.27.0",
117
117
  "scripts": {
118
118
  "build": "pnpm clean && node scripts/build.js",
119
119
  "build:all": "dotenvx -q run pnpm build:_all",
package/src/figma-variables/output/sick2018-dark.json CHANGED
@@ -358,6 +358,12 @@
358
358
  }
359
359
  }
360
360
  },
361
+ "details": {
362
+ "open-rotation": {
363
+ "type": "string",
364
+ "value": "360deg"
365
+ }
366
+ },
361
367
  "dimension": {
362
368
  "base": {
363
369
  "description": "to be deprecated",
@@ -390,7 +396,7 @@
390
396
  "focus-ring": {
391
397
  "border-radius": {
392
398
  "type": "sizing",
393
- "value": "0px"
399
+ "value": "{border-radius.none}"
394
400
  },
395
401
  "color": {
396
402
  "type": "color",
@@ -644,10 +650,6 @@
644
650
  "type": "color",
645
651
  "value": "{color.neutral.800}"
646
652
  },
647
- "color-focus": {
648
- "type": "color",
649
- "value": "{color.neutral.800}"
650
- },
651
653
  "color-hover": {
652
654
  "type": "color",
653
655
  "value": "{color.neutral.800}"
@@ -655,15 +657,11 @@
655
657
  "icon-clearable": {
656
658
  "color": {
657
659
  "type": "color",
658
- "value": "{color.neutral.500}"
659
- },
660
- "color-focus": {
661
- "type": "color",
662
- "value": "{color.neutral.500}"
660
+ "value": "{color.neutral.600}"
663
661
  },
664
662
  "color-hover": {
665
663
  "type": "color",
666
- "value": "{color.neutral.500}"
664
+ "value": "{color.neutral.800}"
667
665
  }
668
666
  }
669
667
  },
@@ -771,6 +769,12 @@
771
769
  }
772
770
  },
773
771
  "interactive": {
772
+ "background": {
773
+ "color-hover": {
774
+ "type": "color",
775
+ "value": "{color.neutral.100}"
776
+ }
777
+ },
774
778
  "emphasis": {
775
779
  "color": {
776
780
  "type": "color",
package/src/figma-variables/output/sick2018-light.json CHANGED
@@ -358,6 +358,12 @@
358
358
  }
359
359
  }
360
360
  },
361
+ "details": {
362
+ "open-rotation": {
363
+ "type": "string",
364
+ "value": "360deg"
365
+ }
366
+ },
361
367
  "dimension": {
362
368
  "base": {
363
369
  "description": "to be deprecated",
@@ -390,7 +396,7 @@
390
396
  "focus-ring": {
391
397
  "border-radius": {
392
398
  "type": "sizing",
393
- "value": "0px"
399
+ "value": "{border-radius.none}"
394
400
  },
395
401
  "color": {
396
402
  "type": "color",
@@ -644,10 +650,6 @@
644
650
  "type": "color",
645
651
  "value": "{color.neutral.800}"
646
652
  },
647
- "color-focus": {
648
- "type": "color",
649
- "value": "{color.neutral.800}"
650
- },
651
653
  "color-hover": {
652
654
  "type": "color",
653
655
  "value": "{color.neutral.800}"
@@ -655,15 +657,11 @@
655
657
  "icon-clearable": {
656
658
  "color": {
657
659
  "type": "color",
658
- "value": "{color.neutral.500}"
659
- },
660
- "color-focus": {
661
- "type": "color",
662
- "value": "{color.neutral.500}"
660
+ "value": "{color.neutral.600}"
663
661
  },
664
662
  "color-hover": {
665
663
  "type": "color",
666
- "value": "{color.neutral.500}"
664
+ "value": "{color.neutral.800}"
667
665
  }
668
666
  }
669
667
  },
@@ -771,6 +769,12 @@
771
769
  }
772
770
  },
773
771
  "interactive": {
772
+ "background": {
773
+ "color-hover": {
774
+ "type": "color",
775
+ "value": "{color.neutral.100}"
776
+ }
777
+ },
774
778
  "emphasis": {
775
779
  "color": {
776
780
  "type": "color",
package/src/figma-variables/output/sick2025-dark.json CHANGED
@@ -358,6 +358,12 @@
358
358
  }
359
359
  }
360
360
  },
361
+ "details": {
362
+ "open-rotation": {
363
+ "type": "string",
364
+ "value": "0deg"
365
+ }
366
+ },
361
367
  "dimension": {
362
368
  "base": {
363
369
  "description": "to be deprecated",
@@ -390,7 +396,7 @@
390
396
  "focus-ring": {
391
397
  "border-radius": {
392
398
  "type": "sizing",
393
- "value": "4px"
399
+ "value": "{border-radius.small}"
394
400
  },
395
401
  "color": {
396
402
  "type": "color",
@@ -644,10 +650,6 @@
644
650
  "type": "color",
645
651
  "value": "{color.neutral.1000}"
646
652
  },
647
- "color-focus": {
648
- "type": "color",
649
- "value": "{color.neutral.1000}"
650
- },
651
653
  "color-hover": {
652
654
  "type": "color",
653
655
  "value": "{color.neutral.1000}"
@@ -657,13 +659,9 @@
657
659
  "type": "color",
658
660
  "value": "{color.neutral.600}"
659
661
  },
660
- "color-focus": {
661
- "type": "color",
662
- "value": "{color.neutral.600}"
663
- },
664
662
  "color-hover": {
665
663
  "type": "color",
666
- "value": "{color.neutral.600}"
664
+ "value": "{color.neutral.800}"
667
665
  }
668
666
  }
669
667
  },
@@ -771,6 +769,12 @@
771
769
  }
772
770
  },
773
771
  "interactive": {
772
+ "background": {
773
+ "color-hover": {
774
+ "type": "color",
775
+ "value": "{color.neutral.100}"
776
+ }
777
+ },
774
778
  "emphasis": {
775
779
  "color": {
776
780
  "type": "color",
@@ -914,7 +918,7 @@
914
918
  },
915
919
  "radius": {
916
920
  "type": "sizing",
917
- "value": "{border-radius.x-large}"
921
+ "value": "{border-radius.medium}"
918
922
  },
919
923
  "width": {
920
924
  "type": "sizing",
package/src/figma-variables/output/sick2025-light.json CHANGED
@@ -358,6 +358,12 @@
358
358
  }
359
359
  }
360
360
  },
361
+ "details": {
362
+ "open-rotation": {
363
+ "type": "string",
364
+ "value": "0deg"
365
+ }
366
+ },
361
367
  "dimension": {
362
368
  "base": {
363
369
  "description": "to be deprecated",
@@ -390,7 +396,7 @@
390
396
  "focus-ring": {
391
397
  "border-radius": {
392
398
  "type": "sizing",
393
- "value": "4px"
399
+ "value": "{border-radius.small}"
394
400
  },
395
401
  "color": {
396
402
  "type": "color",
@@ -644,10 +650,6 @@
644
650
  "type": "color",
645
651
  "value": "{color.neutral.950}"
646
652
  },
647
- "color-focus": {
648
- "type": "color",
649
- "value": "{color.neutral.950}"
650
- },
651
653
  "color-hover": {
652
654
  "type": "color",
653
655
  "value": "{color.neutral.950}"
@@ -657,13 +659,9 @@
657
659
  "type": "color",
658
660
  "value": "{color.neutral.500}"
659
661
  },
660
- "color-focus": {
661
- "type": "color",
662
- "value": "{color.neutral.500}"
663
- },
664
662
  "color-hover": {
665
663
  "type": "color",
666
- "value": "{color.neutral.500}"
664
+ "value": "{color.neutral.700}"
667
665
  }
668
666
  }
669
667
  },
@@ -771,6 +769,12 @@
771
769
  }
772
770
  },
773
771
  "interactive": {
772
+ "background": {
773
+ "color-hover": {
774
+ "type": "color",
775
+ "value": "#f8f7f6"
776
+ }
777
+ },
774
778
  "emphasis": {
775
779
  "color": {
776
780
  "type": "color",
@@ -914,7 +918,7 @@
914
918
  },
915
919
  "radius": {
916
920
  "type": "sizing",
917
- "value": "{border-radius.x-large}"
921
+ "value": "{border-radius.medium}"
918
922
  },
919
923
  "width": {
920
924
  "type": "sizing",