@synergy-design-system/tokens 2.23.0 → 2.24.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 +31 -1
  3. package/dist/js/index.js +31 -1
  4. package/dist/scss/_tokens.scss +7 -1
  5. package/dist/themes/dark.css +7 -1
  6. package/dist/themes/light.css +7 -1
  7. package/dist/themes/sick2018_dark.css +7 -1
  8. package/dist/themes/sick2018_light.css +7 -1
  9. package/dist/themes/sick2025_dark.css +35 -29
  10. package/dist/themes/sick2025_light.css +28 -22
  11. package/package.json +1 -1
  12. package/src/figma-variables/output/sick2018-dark.json +30 -0
  13. package/src/figma-variables/output/sick2018-light.json +30 -0
  14. package/src/figma-variables/output/sick2025-dark.json +58 -28
  15. package/src/figma-variables/output/sick2025-light.json +51 -21
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ # [@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
+
3
+
4
+ ### Features
5
+
6
+ * ✨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))
7
+
1
8
  # [@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
9
 
3
10
 
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.23.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
@@ -863,6 +863,36 @@ export const SynInputSpacingSmall: string;
863
863
  */
864
864
  export const SynInputWidth: string;
865
865
 
866
+ /**
867
+ * Maps to the css variable `--syn-interactive-primary-color`
868
+ */
869
+ export const SynInteractivePrimaryColor: string;
870
+
871
+ /**
872
+ * Maps to the css variable `--syn-interactive-primary-color-active`
873
+ */
874
+ export const SynInteractivePrimaryColorActive: string;
875
+
876
+ /**
877
+ * Maps to the css variable `--syn-interactive-primary-color-hover`
878
+ */
879
+ export const SynInteractivePrimaryColorHover: string;
880
+
881
+ /**
882
+ * Maps to the css variable `--syn-interactive-secondary-color`
883
+ */
884
+ export const SynInteractiveSecondaryColor: string;
885
+
886
+ /**
887
+ * Maps to the css variable `--syn-interactive-secondary-color-active`
888
+ */
889
+ export const SynInteractiveSecondaryColorActive: string;
890
+
891
+ /**
892
+ * Maps to the css variable `--syn-interactive-secondary-color-hover`
893
+ */
894
+ export const SynInteractiveSecondaryColorHover: string;
895
+
866
896
  /**
867
897
  * Maps to the css variable `--syn-letter-spacing-dense`
868
898
  */
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.23.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
@@ -863,6 +863,36 @@ export const SynInputSpacingSmall = 'var(--syn-input-spacing-small)';
863
863
  */
864
864
  export const SynInputWidth = 'var(--syn-input-width)';
865
865
 
866
+ /**
867
+ * @type {string}
868
+ */
869
+ export const SynInteractivePrimaryColor = 'var(--syn-interactive-primary-color)';
870
+
871
+ /**
872
+ * @type {string}
873
+ */
874
+ export const SynInteractivePrimaryColorActive = 'var(--syn-interactive-primary-color-active)';
875
+
876
+ /**
877
+ * @type {string}
878
+ */
879
+ export const SynInteractivePrimaryColorHover = 'var(--syn-interactive-primary-color-hover)';
880
+
881
+ /**
882
+ * @type {string}
883
+ */
884
+ export const SynInteractiveSecondaryColor = 'var(--syn-interactive-secondary-color)';
885
+
886
+ /**
887
+ * @type {string}
888
+ */
889
+ export const SynInteractiveSecondaryColorActive = 'var(--syn-interactive-secondary-color-active)';
890
+
891
+ /**
892
+ * @type {string}
893
+ */
894
+ export const SynInteractiveSecondaryColorHover = 'var(--syn-interactive-secondary-color-hover)';
895
+
866
896
  /**
867
897
  * @type {string}
868
898
  */
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.23.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
  $SynBorderRadiusCircle: var(--syn-border-radius-circle) !default;
@@ -174,6 +174,12 @@ $SynInputSpacingLarge: var(--syn-input-spacing-large) !default;
174
174
  $SynInputSpacingMedium: var(--syn-input-spacing-medium) !default;
175
175
  $SynInputSpacingSmall: var(--syn-input-spacing-small) !default;
176
176
  $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;
177
183
  $SynLetterSpacingDense: var(--syn-letter-spacing-dense) !default;
178
184
  $SynLetterSpacingDenser: var(--syn-letter-spacing-denser) !default;
179
185
  $SynLetterSpacingLoose: var(--syn-letter-spacing-loose) !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.23.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -179,6 +179,12 @@
179
179
  --syn-input-spacing-medium: var(--syn-spacing-medium);
180
180
  --syn-input-spacing-small: var(--syn-spacing-small);
181
181
  --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);
182
188
  --syn-letter-spacing-dense: -0.24px; /** Shoelace compatibility DO NOT USE */
183
189
  --syn-letter-spacing-denser: -0.48px; /** Shoelace compatibility DO NOT USE */
184
190
  --syn-letter-spacing-loose: 1.2px; /** Shoelace compatibility DO NOT USE */
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.23.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -179,6 +179,12 @@
179
179
  --syn-input-spacing-medium: var(--syn-spacing-medium);
180
180
  --syn-input-spacing-small: var(--syn-spacing-small);
181
181
  --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);
182
188
  --syn-letter-spacing-dense: -0.24px; /** Shoelace compatibility DO NOT USE */
183
189
  --syn-letter-spacing-denser: -0.48px; /** Shoelace compatibility DO NOT USE */
184
190
  --syn-letter-spacing-loose: 1.2px; /** Shoelace compatibility DO NOT USE */
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.23.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -179,6 +179,12 @@
179
179
  --syn-input-spacing-medium: var(--syn-spacing-medium);
180
180
  --syn-input-spacing-small: var(--syn-spacing-small);
181
181
  --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);
182
188
  --syn-letter-spacing-dense: -0.24px; /** Shoelace compatibility DO NOT USE */
183
189
  --syn-letter-spacing-denser: -0.48px; /** Shoelace compatibility DO NOT USE */
184
190
  --syn-letter-spacing-loose: 1.2px; /** Shoelace compatibility DO NOT USE */
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.23.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -179,6 +179,12 @@
179
179
  --syn-input-spacing-medium: var(--syn-spacing-medium);
180
180
  --syn-input-spacing-small: var(--syn-spacing-small);
181
181
  --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);
182
188
  --syn-letter-spacing-dense: -0.24px; /** Shoelace compatibility DO NOT USE */
183
189
  --syn-letter-spacing-denser: -0.48px; /** Shoelace compatibility DO NOT USE */
184
190
  --syn-letter-spacing-loose: 1.2px; /** Shoelace compatibility DO NOT USE */
package/dist/themes/sick2025_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.23.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -117,25 +117,25 @@
117
117
  --syn-font-weight-light: 400; /** Shoelace compatibility DO NOT USE */
118
118
  --syn-font-weight-normal: 400;
119
119
  --syn-font-weight-semibold: 600;
120
- --syn-input-background-color: var(--syn-color-neutral-0);
120
+ --syn-input-background-color: var(--syn-color-neutral-50);
121
121
  --syn-input-background-color-disabled: var(--syn-input-background-color);
122
122
  --syn-input-background-color-focus: var(--syn-input-background-color);
123
123
  --syn-input-background-color-hover: var(--syn-input-background-color);
124
- --syn-input-border-color: var(--syn-color-neutral-700);
125
- --syn-input-border-color-disabled: var(--syn-color-neutral-700);
126
- --syn-input-border-color-focus: var(--syn-color-neutral-950);
127
- --syn-input-border-color-focus-error: var(--syn-color-error-700);
128
- --syn-input-border-color-hover: var(--syn-color-neutral-950);
129
- --syn-input-border-radius-large: var(--syn-border-radius-none);
130
- --syn-input-border-radius-medium: var(--syn-border-radius-none);
131
- --syn-input-border-radius-small: var(--syn-border-radius-none);
124
+ --syn-input-border-color: var(--syn-color-neutral-1000);
125
+ --syn-input-border-color-disabled: var(--syn-color-neutral-1000);
126
+ --syn-input-border-color-focus: var(--syn-color-primary-500);
127
+ --syn-input-border-color-focus-error: var(--syn-color-error-600);
128
+ --syn-input-border-color-hover: var(--syn-color-primary-500);
129
+ --syn-input-border-radius-large: var(--syn-border-radius-medium);
130
+ --syn-input-border-radius-medium: var(--syn-border-radius-medium);
131
+ --syn-input-border-radius-small: var(--syn-border-radius-medium);
132
132
  --syn-input-border-width: 1px;
133
- --syn-input-color: var(--syn-color-neutral-950);
134
- --syn-input-color-disabled: var(--syn-color-neutral-950);
135
- --syn-input-color-focus: var(--syn-color-neutral-950);
136
- --syn-input-color-hover: var(--syn-color-neutral-950);
133
+ --syn-input-color: var(--syn-color-neutral-1000);
134
+ --syn-input-color-disabled: var(--syn-color-neutral-1000);
135
+ --syn-input-color-focus: var(--syn-color-neutral-1000);
136
+ --syn-input-color-hover: var(--syn-color-neutral-1000);
137
137
  --syn-input-disabled-opacity: 0.5;
138
- --syn-input-focus-ring-color: var(--syn-color-primary-400);
138
+ --syn-input-focus-ring-color: var(--syn-color-primary-700);
139
139
  --syn-input-focus-ring-error: var(--syn-color-error-400);
140
140
  --syn-input-focus-ring-offset: 0px;
141
141
  --syn-input-font-family: var(--syn-font-sans);
@@ -147,31 +147,31 @@
147
147
  --syn-input-height-medium: var(--syn-spacing-2x-large);
148
148
  --syn-input-height-small: 36px;
149
149
  --syn-input-help-text-color: var(--syn-color-neutral-800);
150
- --syn-input-help-text-color-error: var(--syn-color-error-700);
150
+ --syn-input-help-text-color-error: var(--syn-color-error-600);
151
151
  --syn-input-help-text-font-size-large: var(--syn-font-size-medium);
152
152
  --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
153
153
  --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
154
- --syn-input-icon-color: var(--syn-color-neutral-800);
155
- --syn-input-icon-color-focus: var(--syn-color-neutral-800);
156
- --syn-input-icon-color-hover: var(--syn-color-neutral-800);
157
- --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-500);
158
- --syn-input-icon-icon-clearable-color-focus: var(--syn-color-neutral-500);
159
- --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-500);
160
- --syn-input-label-color: var(--syn-color-neutral-950);
154
+ --syn-input-icon-color: var(--syn-color-neutral-1000);
155
+ --syn-input-icon-color-focus: var(--syn-color-neutral-1000);
156
+ --syn-input-icon-color-hover: var(--syn-color-neutral-1000);
157
+ --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-600);
158
+ --syn-input-icon-icon-clearable-color-focus: var(--syn-color-neutral-600);
159
+ --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-600);
160
+ --syn-input-label-color: var(--syn-color-neutral-1000);
161
161
  --syn-input-label-font-size-large: var(--syn-font-size-large);
162
162
  --syn-input-label-font-size-medium: var(--syn-font-size-medium);
163
163
  --syn-input-label-font-size-small: var(--syn-font-size-small);
164
164
  --syn-input-letter-spacing: normal;
165
- --syn-input-placeholder-color: var(--syn-color-neutral-500);
166
- --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
165
+ --syn-input-placeholder-color: var(--syn-color-neutral-800);
166
+ --syn-input-placeholder-color-disabled: var(--syn-color-neutral-800);
167
167
  --syn-input-readonly-color: var(--syn-color-neutral-800);
168
168
  --syn-input-readonly-color-disabled: var(--syn-color-neutral-800);
169
169
  --syn-input-readonly-color-focus: var(--syn-color-neutral-950);
170
170
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
171
- --syn-input-readonly-background-color: var(--syn-color-neutral-50);
172
- --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-50);
173
- --syn-input-readonly-background-color-focus: var(--syn-color-neutral-50);
174
- --syn-input-readonly-background-color-hover: var(--syn-color-neutral-50);
171
+ --syn-input-readonly-background-color: var(--syn-color-neutral-100);
172
+ --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-100);
173
+ --syn-input-readonly-background-color-focus: var(--syn-color-neutral-100);
174
+ --syn-input-readonly-background-color-hover: var(--syn-color-neutral-100);
175
175
  --syn-input-required-content: "*";
176
176
  --syn-input-required-content-color: var(--syn-input-label-color);
177
177
  --syn-input-required-content-offset: -2px;
@@ -179,6 +179,12 @@
179
179
  --syn-input-spacing-medium: var(--syn-spacing-medium);
180
180
  --syn-input-spacing-small: var(--syn-spacing-small);
181
181
  --syn-input-width: var(--syn-border-width-small);
182
+ --syn-interactive-primary-color: var(--syn-color-primary-500);
183
+ --syn-interactive-primary-color-active: var(--syn-color-neutral-1000);
184
+ --syn-interactive-primary-color-hover: var(--syn-color-primary-900);
185
+ --syn-interactive-secondary-color: var(--syn-color-neutral-1000);
186
+ --syn-interactive-secondary-color-active: var(--syn-color-primary-500);
187
+ --syn-interactive-secondary-color-hover: var(--syn-color-primary-500);
182
188
  --syn-letter-spacing-dense: normal; /** Shoelace compatibility DO NOT USE */
183
189
  --syn-letter-spacing-denser: normal; /** Shoelace compatibility DO NOT USE */
184
190
  --syn-letter-spacing-loose: normal; /** Shoelace compatibility DO NOT USE */
package/dist/themes/sick2025_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.23.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -121,22 +121,22 @@
121
121
  --syn-input-background-color-disabled: var(--syn-input-background-color);
122
122
  --syn-input-background-color-focus: var(--syn-input-background-color);
123
123
  --syn-input-background-color-hover: var(--syn-input-background-color);
124
- --syn-input-border-color: var(--syn-color-neutral-700);
125
- --syn-input-border-color-disabled: var(--syn-color-neutral-700);
126
- --syn-input-border-color-focus: var(--syn-color-neutral-950);
127
- --syn-input-border-color-focus-error: var(--syn-color-error-700);
128
- --syn-input-border-color-hover: var(--syn-color-neutral-950);
129
- --syn-input-border-radius-large: var(--syn-border-radius-none);
130
- --syn-input-border-radius-medium: var(--syn-border-radius-none);
131
- --syn-input-border-radius-small: var(--syn-border-radius-none);
124
+ --syn-input-border-color: var(--syn-color-neutral-950);
125
+ --syn-input-border-color-disabled: var(--syn-color-neutral-950);
126
+ --syn-input-border-color-focus: var(--syn-color-primary-700);
127
+ --syn-input-border-color-focus-error: var(--syn-color-error-600);
128
+ --syn-input-border-color-hover: var(--syn-color-primary-700);
129
+ --syn-input-border-radius-large: var(--syn-border-radius-medium);
130
+ --syn-input-border-radius-medium: var(--syn-border-radius-medium);
131
+ --syn-input-border-radius-small: var(--syn-border-radius-medium);
132
132
  --syn-input-border-width: 1px;
133
133
  --syn-input-color: var(--syn-color-neutral-950);
134
134
  --syn-input-color-disabled: var(--syn-color-neutral-950);
135
135
  --syn-input-color-focus: var(--syn-color-neutral-950);
136
136
  --syn-input-color-hover: var(--syn-color-neutral-950);
137
137
  --syn-input-disabled-opacity: 0.5;
138
- --syn-input-focus-ring-color: var(--syn-color-primary-400);
139
- --syn-input-focus-ring-error: var(--syn-color-error-400);
138
+ --syn-input-focus-ring-color: var(--syn-color-primary-500);
139
+ --syn-input-focus-ring-error: var(--syn-color-error-500);
140
140
  --syn-input-focus-ring-offset: 0px;
141
141
  --syn-input-font-family: var(--syn-font-sans);
142
142
  --syn-input-font-size-large: var(--syn-font-size-large);
@@ -146,14 +146,14 @@
146
146
  --syn-input-height-large: var(--syn-spacing-3x-large);
147
147
  --syn-input-height-medium: var(--syn-spacing-2x-large);
148
148
  --syn-input-height-small: 36px;
149
- --syn-input-help-text-color: var(--syn-color-neutral-800);
150
- --syn-input-help-text-color-error: var(--syn-color-error-700);
149
+ --syn-input-help-text-color: var(--syn-color-neutral-700);
150
+ --syn-input-help-text-color-error: var(--syn-color-error-600);
151
151
  --syn-input-help-text-font-size-large: var(--syn-font-size-medium);
152
152
  --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
153
153
  --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
154
- --syn-input-icon-color: var(--syn-color-neutral-800);
155
- --syn-input-icon-color-focus: var(--syn-color-neutral-800);
156
- --syn-input-icon-color-hover: var(--syn-color-neutral-800);
154
+ --syn-input-icon-color: var(--syn-color-neutral-950);
155
+ --syn-input-icon-color-focus: var(--syn-color-neutral-950);
156
+ --syn-input-icon-color-hover: var(--syn-color-neutral-950);
157
157
  --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-500);
158
158
  --syn-input-icon-icon-clearable-color-focus: var(--syn-color-neutral-500);
159
159
  --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-500);
@@ -162,16 +162,16 @@
162
162
  --syn-input-label-font-size-medium: var(--syn-font-size-medium);
163
163
  --syn-input-label-font-size-small: var(--syn-font-size-small);
164
164
  --syn-input-letter-spacing: normal;
165
- --syn-input-placeholder-color: var(--syn-color-neutral-500);
166
- --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
165
+ --syn-input-placeholder-color: var(--syn-color-neutral-700);
166
+ --syn-input-placeholder-color-disabled: var(--syn-color-neutral-700);
167
167
  --syn-input-readonly-color: var(--syn-color-neutral-800);
168
168
  --syn-input-readonly-color-disabled: var(--syn-color-neutral-800);
169
169
  --syn-input-readonly-color-focus: var(--syn-color-neutral-950);
170
170
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
171
- --syn-input-readonly-background-color: var(--syn-color-neutral-50);
172
- --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-50);
173
- --syn-input-readonly-background-color-focus: var(--syn-color-neutral-50);
174
- --syn-input-readonly-background-color-hover: var(--syn-color-neutral-50);
171
+ --syn-input-readonly-background-color: #f8f7f6;
172
+ --syn-input-readonly-background-color-disabled: #f8f7f6;
173
+ --syn-input-readonly-background-color-focus: #f8f7f6;
174
+ --syn-input-readonly-background-color-hover: #f8f7f6;
175
175
  --syn-input-required-content: "*";
176
176
  --syn-input-required-content-color: var(--syn-input-label-color);
177
177
  --syn-input-required-content-offset: -2px;
@@ -179,6 +179,12 @@
179
179
  --syn-input-spacing-medium: var(--syn-spacing-medium);
180
180
  --syn-input-spacing-small: var(--syn-spacing-small);
181
181
  --syn-input-width: var(--syn-border-width-small);
182
+ --syn-interactive-primary-color: var(--syn-color-primary-700);
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-700);
187
+ --syn-interactive-secondary-color-hover: var(--syn-color-primary-700);
182
188
  --syn-letter-spacing-dense: normal; /** Shoelace compatibility DO NOT USE */
183
189
  --syn-letter-spacing-denser: normal; /** Shoelace compatibility DO NOT USE */
184
190
  --syn-letter-spacing-loose: normal; /** Shoelace compatibility DO NOT USE */
package/package.json CHANGED
@@ -112,7 +112,7 @@
112
112
  },
113
113
  "type": "module",
114
114
  "types": "./dist/js/index.d.ts",
115
- "version": "2.23.0",
115
+ "version": "2.24.0",
116
116
  "scripts": {
117
117
  "build": "pnpm clean && node scripts/build.js",
118
118
  "build:figma": "pnpm run build:variables && pnpm run build:styles",
package/src/figma-variables/output/sick2018-dark.json CHANGED
@@ -766,6 +766,36 @@
766
766
  "value": "{border-width.small}"
767
767
  }
768
768
  },
769
+ "interactive": {
770
+ "primary": {
771
+ "color": {
772
+ "type": "color",
773
+ "value": "{color.primary.600}"
774
+ },
775
+ "color-active": {
776
+ "type": "color",
777
+ "value": "{color.neutral.950}"
778
+ },
779
+ "color-hover": {
780
+ "type": "color",
781
+ "value": "{color.primary.900}"
782
+ }
783
+ },
784
+ "secondary": {
785
+ "color": {
786
+ "type": "color",
787
+ "value": "{color.neutral.950}"
788
+ },
789
+ "color-active": {
790
+ "type": "color",
791
+ "value": "{color.primary.600}"
792
+ },
793
+ "color-hover": {
794
+ "type": "color",
795
+ "value": "{color.primary.600}"
796
+ }
797
+ }
798
+ },
769
799
  "letter-spacing": {
770
800
  "dense": {
771
801
  "description": "Shoelace compatibility DO NOT USE",
package/src/figma-variables/output/sick2018-light.json CHANGED
@@ -766,6 +766,36 @@
766
766
  "value": "{border-width.small}"
767
767
  }
768
768
  },
769
+ "interactive": {
770
+ "primary": {
771
+ "color": {
772
+ "type": "color",
773
+ "value": "{color.primary.600}"
774
+ },
775
+ "color-active": {
776
+ "type": "color",
777
+ "value": "{color.neutral.950}"
778
+ },
779
+ "color-hover": {
780
+ "type": "color",
781
+ "value": "{color.primary.900}"
782
+ }
783
+ },
784
+ "secondary": {
785
+ "color": {
786
+ "type": "color",
787
+ "value": "{color.neutral.950}"
788
+ },
789
+ "color-active": {
790
+ "type": "color",
791
+ "value": "{color.primary.600}"
792
+ },
793
+ "color-hover": {
794
+ "type": "color",
795
+ "value": "{color.primary.600}"
796
+ }
797
+ }
798
+ },
769
799
  "letter-spacing": {
770
800
  "dense": {
771
801
  "description": "Shoelace compatibility DO NOT USE",
package/src/figma-variables/output/sick2025-dark.json CHANGED
@@ -488,7 +488,7 @@
488
488
  "background": {
489
489
  "color": {
490
490
  "type": "color",
491
- "value": "{color.neutral.0}"
491
+ "value": "{color.neutral.50}"
492
492
  },
493
493
  "color-disabled": {
494
494
  "type": "color",
@@ -506,35 +506,35 @@
506
506
  "border": {
507
507
  "color": {
508
508
  "type": "color",
509
- "value": "{color.neutral.700}"
509
+ "value": "{color.neutral.1000}"
510
510
  },
511
511
  "color-disabled": {
512
512
  "type": "color",
513
- "value": "{color.neutral.700}"
513
+ "value": "{color.neutral.1000}"
514
514
  },
515
515
  "color-focus": {
516
516
  "type": "color",
517
- "value": "{color.neutral.950}"
517
+ "value": "{color.primary.500}"
518
518
  },
519
519
  "color-focus-error": {
520
520
  "type": "color",
521
- "value": "{color.error.700}"
521
+ "value": "{color.error.600}"
522
522
  },
523
523
  "color-hover": {
524
524
  "type": "color",
525
- "value": "{color.neutral.950}"
525
+ "value": "{color.primary.500}"
526
526
  },
527
527
  "radius-large": {
528
528
  "type": "sizing",
529
- "value": "{border-radius.none}"
529
+ "value": "{border-radius.medium}"
530
530
  },
531
531
  "radius-medium": {
532
532
  "type": "sizing",
533
- "value": "{border-radius.none}"
533
+ "value": "{border-radius.medium}"
534
534
  },
535
535
  "radius-small": {
536
536
  "type": "sizing",
537
- "value": "{border-radius.none}"
537
+ "value": "{border-radius.medium}"
538
538
  },
539
539
  "width": {
540
540
  "type": "sizing",
@@ -543,19 +543,19 @@
543
543
  },
544
544
  "color": {
545
545
  "type": "color",
546
- "value": "{color.neutral.950}"
546
+ "value": "{color.neutral.1000}"
547
547
  },
548
548
  "color-disabled": {
549
549
  "type": "color",
550
- "value": "{color.neutral.950}"
550
+ "value": "{color.neutral.1000}"
551
551
  },
552
552
  "color-focus": {
553
553
  "type": "color",
554
- "value": "{color.neutral.950}"
554
+ "value": "{color.neutral.1000}"
555
555
  },
556
556
  "color-hover": {
557
557
  "type": "color",
558
- "value": "{color.neutral.950}"
558
+ "value": "{color.neutral.1000}"
559
559
  },
560
560
  "disabled-opacity": {
561
561
  "type": "opacity",
@@ -564,7 +564,7 @@
564
564
  "focus-ring": {
565
565
  "color": {
566
566
  "type": "color",
567
- "value": "{color.primary.400}"
567
+ "value": "{color.primary.700}"
568
568
  },
569
569
  "error": {
570
570
  "type": "color",
@@ -618,7 +618,7 @@
618
618
  },
619
619
  "color-error": {
620
620
  "type": "color",
621
- "value": "{color.error.700}"
621
+ "value": "{color.error.600}"
622
622
  },
623
623
  "font-size": {
624
624
  "large": {
@@ -638,35 +638,35 @@
638
638
  "icon": {
639
639
  "color": {
640
640
  "type": "color",
641
- "value": "{color.neutral.800}"
641
+ "value": "{color.neutral.1000}"
642
642
  },
643
643
  "color-focus": {
644
644
  "type": "color",
645
- "value": "{color.neutral.800}"
645
+ "value": "{color.neutral.1000}"
646
646
  },
647
647
  "color-hover": {
648
648
  "type": "color",
649
- "value": "{color.neutral.800}"
649
+ "value": "{color.neutral.1000}"
650
650
  },
651
651
  "icon-clearable": {
652
652
  "color": {
653
653
  "type": "color",
654
- "value": "{color.neutral.500}"
654
+ "value": "{color.neutral.600}"
655
655
  },
656
656
  "color-focus": {
657
657
  "type": "color",
658
- "value": "{color.neutral.500}"
658
+ "value": "{color.neutral.600}"
659
659
  },
660
660
  "color-hover": {
661
661
  "type": "color",
662
- "value": "{color.neutral.500}"
662
+ "value": "{color.neutral.600}"
663
663
  }
664
664
  }
665
665
  },
666
666
  "label": {
667
667
  "color": {
668
668
  "type": "color",
669
- "value": "{color.neutral.950}"
669
+ "value": "{color.neutral.1000}"
670
670
  },
671
671
  "font-size": {
672
672
  "large": {
@@ -690,11 +690,11 @@
690
690
  "placeholder": {
691
691
  "color": {
692
692
  "type": "color",
693
- "value": "{color.neutral.500}"
693
+ "value": "{color.neutral.800}"
694
694
  },
695
695
  "color-disabled": {
696
696
  "type": "color",
697
- "value": "{color.neutral.500}"
697
+ "value": "{color.neutral.800}"
698
698
  }
699
699
  },
700
700
  "readonly": {
@@ -718,19 +718,19 @@
718
718
  "readonly-background": {
719
719
  "color": {
720
720
  "type": "color",
721
- "value": "{color.neutral.50}"
721
+ "value": "{color.neutral.100}"
722
722
  },
723
723
  "color-disabled": {
724
724
  "type": "color",
725
- "value": "{color.neutral.50}"
725
+ "value": "{color.neutral.100}"
726
726
  },
727
727
  "color-focus": {
728
728
  "type": "color",
729
- "value": "{color.neutral.50}"
729
+ "value": "{color.neutral.100}"
730
730
  },
731
731
  "color-hover": {
732
732
  "type": "color",
733
- "value": "{color.neutral.50}"
733
+ "value": "{color.neutral.100}"
734
734
  }
735
735
  },
736
736
  "required": {
@@ -766,6 +766,36 @@
766
766
  "value": "{border-width.small}"
767
767
  }
768
768
  },
769
+ "interactive": {
770
+ "primary": {
771
+ "color": {
772
+ "type": "color",
773
+ "value": "{color.primary.500}"
774
+ },
775
+ "color-active": {
776
+ "type": "color",
777
+ "value": "{color.neutral.1000}"
778
+ },
779
+ "color-hover": {
780
+ "type": "color",
781
+ "value": "{color.primary.900}"
782
+ }
783
+ },
784
+ "secondary": {
785
+ "color": {
786
+ "type": "color",
787
+ "value": "{color.neutral.1000}"
788
+ },
789
+ "color-active": {
790
+ "type": "color",
791
+ "value": "{color.primary.500}"
792
+ },
793
+ "color-hover": {
794
+ "type": "color",
795
+ "value": "{color.primary.500}"
796
+ }
797
+ }
798
+ },
769
799
  "letter-spacing": {
770
800
  "dense": {
771
801
  "description": "Shoelace compatibility DO NOT USE",
package/src/figma-variables/output/sick2025-light.json CHANGED
@@ -506,35 +506,35 @@
506
506
  "border": {
507
507
  "color": {
508
508
  "type": "color",
509
- "value": "{color.neutral.700}"
509
+ "value": "{color.neutral.950}"
510
510
  },
511
511
  "color-disabled": {
512
512
  "type": "color",
513
- "value": "{color.neutral.700}"
513
+ "value": "{color.neutral.950}"
514
514
  },
515
515
  "color-focus": {
516
516
  "type": "color",
517
- "value": "{color.neutral.950}"
517
+ "value": "{color.primary.700}"
518
518
  },
519
519
  "color-focus-error": {
520
520
  "type": "color",
521
- "value": "{color.error.700}"
521
+ "value": "{color.error.600}"
522
522
  },
523
523
  "color-hover": {
524
524
  "type": "color",
525
- "value": "{color.neutral.950}"
525
+ "value": "{color.primary.700}"
526
526
  },
527
527
  "radius-large": {
528
528
  "type": "sizing",
529
- "value": "{border-radius.none}"
529
+ "value": "{border-radius.medium}"
530
530
  },
531
531
  "radius-medium": {
532
532
  "type": "sizing",
533
- "value": "{border-radius.none}"
533
+ "value": "{border-radius.medium}"
534
534
  },
535
535
  "radius-small": {
536
536
  "type": "sizing",
537
- "value": "{border-radius.none}"
537
+ "value": "{border-radius.medium}"
538
538
  },
539
539
  "width": {
540
540
  "type": "sizing",
@@ -564,11 +564,11 @@
564
564
  "focus-ring": {
565
565
  "color": {
566
566
  "type": "color",
567
- "value": "{color.primary.400}"
567
+ "value": "{color.primary.500}"
568
568
  },
569
569
  "error": {
570
570
  "type": "color",
571
- "value": "{color.error.400}"
571
+ "value": "{color.error.500}"
572
572
  },
573
573
  "offset": {
574
574
  "type": "sizing",
@@ -614,11 +614,11 @@
614
614
  "help-text": {
615
615
  "color": {
616
616
  "type": "color",
617
- "value": "{color.neutral.800}"
617
+ "value": "{color.neutral.700}"
618
618
  },
619
619
  "color-error": {
620
620
  "type": "color",
621
- "value": "{color.error.700}"
621
+ "value": "{color.error.600}"
622
622
  },
623
623
  "font-size": {
624
624
  "large": {
@@ -638,15 +638,15 @@
638
638
  "icon": {
639
639
  "color": {
640
640
  "type": "color",
641
- "value": "{color.neutral.800}"
641
+ "value": "{color.neutral.950}"
642
642
  },
643
643
  "color-focus": {
644
644
  "type": "color",
645
- "value": "{color.neutral.800}"
645
+ "value": "{color.neutral.950}"
646
646
  },
647
647
  "color-hover": {
648
648
  "type": "color",
649
- "value": "{color.neutral.800}"
649
+ "value": "{color.neutral.950}"
650
650
  },
651
651
  "icon-clearable": {
652
652
  "color": {
@@ -690,11 +690,11 @@
690
690
  "placeholder": {
691
691
  "color": {
692
692
  "type": "color",
693
- "value": "{color.neutral.500}"
693
+ "value": "{color.neutral.700}"
694
694
  },
695
695
  "color-disabled": {
696
696
  "type": "color",
697
- "value": "{color.neutral.500}"
697
+ "value": "{color.neutral.700}"
698
698
  }
699
699
  },
700
700
  "readonly": {
@@ -718,19 +718,19 @@
718
718
  "readonly-background": {
719
719
  "color": {
720
720
  "type": "color",
721
- "value": "{color.neutral.50}"
721
+ "value": "#f8f7f6"
722
722
  },
723
723
  "color-disabled": {
724
724
  "type": "color",
725
- "value": "{color.neutral.50}"
725
+ "value": "#f8f7f6"
726
726
  },
727
727
  "color-focus": {
728
728
  "type": "color",
729
- "value": "{color.neutral.50}"
729
+ "value": "#f8f7f6"
730
730
  },
731
731
  "color-hover": {
732
732
  "type": "color",
733
- "value": "{color.neutral.50}"
733
+ "value": "#f8f7f6"
734
734
  }
735
735
  },
736
736
  "required": {
@@ -766,6 +766,36 @@
766
766
  "value": "{border-width.small}"
767
767
  }
768
768
  },
769
+ "interactive": {
770
+ "primary": {
771
+ "color": {
772
+ "type": "color",
773
+ "value": "{color.primary.700}"
774
+ },
775
+ "color-active": {
776
+ "type": "color",
777
+ "value": "{color.neutral.950}"
778
+ },
779
+ "color-hover": {
780
+ "type": "color",
781
+ "value": "{color.primary.900}"
782
+ }
783
+ },
784
+ "secondary": {
785
+ "color": {
786
+ "type": "color",
787
+ "value": "{color.neutral.950}"
788
+ },
789
+ "color-active": {
790
+ "type": "color",
791
+ "value": "{color.primary.700}"
792
+ },
793
+ "color-hover": {
794
+ "type": "color",
795
+ "value": "{color.primary.700}"
796
+ }
797
+ }
798
+ },
769
799
  "letter-spacing": {
770
800
  "dense": {
771
801
  "description": "Shoelace compatibility DO NOT USE",