@synergy-design-system/tokens 2.38.0 → 2.40.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 +18 -0
  2. package/dist/js/index.d.ts +1 -16
  3. package/dist/js/index.js +1 -16
  4. package/dist/scss/_tokens.scss +1 -4
  5. package/dist/themes/dark.css +5 -8
  6. package/dist/themes/light.css +5 -8
  7. package/dist/themes/sick2018_dark.css +5 -8
  8. package/dist/themes/sick2018_light.css +5 -8
  9. package/dist/themes/sick2025_dark.css +19 -22
  10. package/dist/themes/sick2025_light.css +7 -10
  11. package/package.json +1 -1
  12. package/src/figma-variables/output/sick2018-dark.json +16 -16
  13. package/src/figma-variables/output/sick2018-light.json +16 -16
  14. package/src/figma-variables/output/sick2025-dark.json +29 -29
  15. package/src/figma-variables/output/sick2025-light.json +17 -17
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # Changelog
2
2
 
3
+ ## 2.40.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#1072](https://github.com/synergy-design-system/synergy-design-system/pull/1072) [`81dae1e`](https://github.com/synergy-design-system/synergy-design-system/commit/81dae1e912bcbdefb4346b4a3bbc245f7fac9f12) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-11-07
8
+
9
+ feat: ✨ Brand updates for `<syn-card>` (#942)
10
+
11
+ ## 2.39.0
12
+
13
+ ### Minor Changes
14
+
15
+ - [#1073](https://github.com/synergy-design-system/synergy-design-system/pull/1073) [`0ae632c`](https://github.com/synergy-design-system/synergy-design-system/commit/0ae632c5331f0583ba652add18755df01766cbf5) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-11-07
16
+
17
+ feat: ✨ Brand updates for `<syn-dialog>` (#946)
18
+
19
+ Also made sure to have smaller `blur` settings as the token has double the size in Figma.
20
+
3
21
  ## 2.38.0
4
22
 
5
23
  ### Minor Changes
package/dist/js/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.37.0
2
+ * @synergy-design-system/tokens version 2.39.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
@@ -1013,21 +1013,6 @@ export const SynInputPlaceholderColor: string;
1013
1013
  */
1014
1014
  export const SynInputPlaceholderColorDisabled: string;
1015
1015
 
1016
- /**
1017
- * Maps to the css variable `--syn-input-readonly-color`
1018
- */
1019
- export const SynInputReadonlyColor: string;
1020
-
1021
- /**
1022
- * Maps to the css variable `--syn-input-readonly-color-disabled`
1023
- */
1024
- export const SynInputReadonlyColorDisabled: string;
1025
-
1026
- /**
1027
- * Maps to the css variable `--syn-input-readonly-color-focus`
1028
- */
1029
- export const SynInputReadonlyColorFocus: string;
1030
-
1031
1016
  /**
1032
1017
  * Maps to the css variable `--syn-input-readonly-color-hover`
1033
1018
  */
package/dist/js/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.37.0
2
+ * @synergy-design-system/tokens version 2.39.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
@@ -1013,21 +1013,6 @@ export const SynInputPlaceholderColor = 'var(--syn-input-placeholder-color)';
1013
1013
  */
1014
1014
  export const SynInputPlaceholderColorDisabled = 'var(--syn-input-placeholder-color-disabled)';
1015
1015
 
1016
- /**
1017
- * @type {string}
1018
- */
1019
- export const SynInputReadonlyColor = 'var(--syn-input-readonly-color)';
1020
-
1021
- /**
1022
- * @type {string}
1023
- */
1024
- export const SynInputReadonlyColorDisabled = 'var(--syn-input-readonly-color-disabled)';
1025
-
1026
- /**
1027
- * @type {string}
1028
- */
1029
- export const SynInputReadonlyColorFocus = 'var(--syn-input-readonly-color-focus)';
1030
-
1031
1016
  /**
1032
1017
  * @type {string}
1033
1018
  */
package/dist/scss/_tokens.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.37.0
2
+ * @synergy-design-system/tokens version 2.39.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
  $SynAlertErrorColorBackground: var(--syn-alert-error-color-background) !default;
@@ -204,9 +204,6 @@ $SynInputLabelFontSizeSmall: var(--syn-input-label-font-size-small) !default;
204
204
  $SynInputLetterSpacing: var(--syn-input-letter-spacing) !default;
205
205
  $SynInputPlaceholderColor: var(--syn-input-placeholder-color) !default;
206
206
  $SynInputPlaceholderColorDisabled: var(--syn-input-placeholder-color-disabled) !default;
207
- $SynInputReadonlyColor: var(--syn-input-readonly-color) !default;
208
- $SynInputReadonlyColorDisabled: var(--syn-input-readonly-color-disabled) !default;
209
- $SynInputReadonlyColorFocus: var(--syn-input-readonly-color-focus) !default;
210
207
  $SynInputReadonlyColorHover: var(--syn-input-readonly-color-hover) !default;
211
208
  $SynInputReadonlyBackgroundColor: var(--syn-input-readonly-background-color) !default;
212
209
  $SynInputReadonlyBackgroundColorDisabled: var(--syn-input-readonly-background-color-disabled) !default;
package/dist/themes/dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.37.0
2
+ * @synergy-design-system/tokens version 2.39.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -209,14 +209,11 @@
209
209
  --syn-input-letter-spacing: var(--syn-letter-spacing-normal);
210
210
  --syn-input-placeholder-color: var(--syn-color-neutral-500);
211
211
  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
212
- --syn-input-readonly-color: var(--syn-color-neutral-800);
213
- --syn-input-readonly-color-disabled: var(--syn-color-neutral-800);
214
- --syn-input-readonly-color-focus: var(--syn-color-neutral-950);
215
212
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
216
- --syn-input-readonly-background-color: var(--syn-color-neutral-50);
217
- --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-50);
218
- --syn-input-readonly-background-color-focus: var(--syn-color-neutral-50);
219
- --syn-input-readonly-background-color-hover: var(--syn-color-neutral-50);
213
+ --syn-input-readonly-background-color: var(--syn-color-neutral-300);
214
+ --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-300);
215
+ --syn-input-readonly-background-color-focus: var(--syn-color-neutral-300);
216
+ --syn-input-readonly-background-color-hover: var(--syn-color-neutral-300);
220
217
  --syn-input-required-content: "*";
221
218
  --syn-input-required-content-color: var(--syn-input-label-color);
222
219
  --syn-input-required-content-offset: -2px;
package/dist/themes/light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.37.0
2
+ * @synergy-design-system/tokens version 2.39.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -209,14 +209,11 @@
209
209
  --syn-input-letter-spacing: var(--syn-letter-spacing-normal);
210
210
  --syn-input-placeholder-color: var(--syn-color-neutral-500);
211
211
  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
212
- --syn-input-readonly-color: var(--syn-color-neutral-800);
213
- --syn-input-readonly-color-disabled: var(--syn-color-neutral-800);
214
- --syn-input-readonly-color-focus: var(--syn-color-neutral-950);
215
212
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
216
- --syn-input-readonly-background-color: var(--syn-color-neutral-50);
217
- --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-50);
218
- --syn-input-readonly-background-color-focus: var(--syn-color-neutral-50);
219
- --syn-input-readonly-background-color-hover: var(--syn-color-neutral-50);
213
+ --syn-input-readonly-background-color: var(--syn-color-neutral-300);
214
+ --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-300);
215
+ --syn-input-readonly-background-color-focus: var(--syn-color-neutral-300);
216
+ --syn-input-readonly-background-color-hover: var(--syn-color-neutral-300);
220
217
  --syn-input-required-content: "*";
221
218
  --syn-input-required-content-color: var(--syn-input-label-color);
222
219
  --syn-input-required-content-offset: -2px;
package/dist/themes/sick2018_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.37.0
2
+ * @synergy-design-system/tokens version 2.39.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -209,14 +209,11 @@
209
209
  --syn-input-letter-spacing: var(--syn-letter-spacing-normal);
210
210
  --syn-input-placeholder-color: var(--syn-color-neutral-500);
211
211
  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
212
- --syn-input-readonly-color: var(--syn-color-neutral-800);
213
- --syn-input-readonly-color-disabled: var(--syn-color-neutral-800);
214
- --syn-input-readonly-color-focus: var(--syn-color-neutral-950);
215
212
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
216
- --syn-input-readonly-background-color: var(--syn-color-neutral-50);
217
- --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-50);
218
- --syn-input-readonly-background-color-focus: var(--syn-color-neutral-50);
219
- --syn-input-readonly-background-color-hover: var(--syn-color-neutral-50);
213
+ --syn-input-readonly-background-color: var(--syn-color-neutral-300);
214
+ --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-300);
215
+ --syn-input-readonly-background-color-focus: var(--syn-color-neutral-300);
216
+ --syn-input-readonly-background-color-hover: var(--syn-color-neutral-300);
220
217
  --syn-input-required-content: "*";
221
218
  --syn-input-required-content-color: var(--syn-input-label-color);
222
219
  --syn-input-required-content-offset: -2px;
package/dist/themes/sick2018_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.37.0
2
+ * @synergy-design-system/tokens version 2.39.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -209,14 +209,11 @@
209
209
  --syn-input-letter-spacing: var(--syn-letter-spacing-normal);
210
210
  --syn-input-placeholder-color: var(--syn-color-neutral-500);
211
211
  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
212
- --syn-input-readonly-color: var(--syn-color-neutral-800);
213
- --syn-input-readonly-color-disabled: var(--syn-color-neutral-800);
214
- --syn-input-readonly-color-focus: var(--syn-color-neutral-950);
215
212
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
216
- --syn-input-readonly-background-color: var(--syn-color-neutral-50);
217
- --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-50);
218
- --syn-input-readonly-background-color-focus: var(--syn-color-neutral-50);
219
- --syn-input-readonly-background-color-hover: var(--syn-color-neutral-50);
213
+ --syn-input-readonly-background-color: var(--syn-color-neutral-300);
214
+ --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-300);
215
+ --syn-input-readonly-background-color-focus: var(--syn-color-neutral-300);
216
+ --syn-input-readonly-background-color-hover: var(--syn-color-neutral-300);
220
217
  --syn-input-required-content: "*";
221
218
  --syn-input-required-content-color: var(--syn-input-label-color);
222
219
  --syn-input-required-content-offset: -2px;
package/dist/themes/sick2025_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.37.0
2
+ * @synergy-design-system/tokens version 2.39.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -87,10 +87,10 @@
87
87
  --syn-color-info-800: #a6e9ff;
88
88
  --syn-color-info-900: #dff4ff;
89
89
  --syn-color-info-950: #effaff;
90
- --syn-color-neutral-0: #000414;
91
- --syn-color-neutral-50: #000724;
90
+ --syn-color-neutral-0: #000206;
91
+ --syn-color-neutral-50: #00051a;
92
92
  --syn-color-neutral-100: #000a37;
93
- --syn-color-neutral-200: #141e47;
93
+ --syn-color-neutral-200: #0e1633;
94
94
  --syn-color-neutral-300: #262f55;
95
95
  --syn-color-neutral-400: #404769;
96
96
  --syn-color-neutral-500: #4d5473;
@@ -170,9 +170,9 @@
170
170
  --syn-input-background-color-hover: var(--syn-input-background-color);
171
171
  --syn-input-border-color: var(--syn-color-neutral-1000);
172
172
  --syn-input-border-color-disabled: var(--syn-color-neutral-1000);
173
- --syn-input-border-color-focus: var(--syn-color-primary-500);
173
+ --syn-input-border-color-focus: var(--syn-color-primary-400);
174
174
  --syn-input-border-color-focus-error: var(--syn-color-error-600);
175
- --syn-input-border-color-hover: var(--syn-color-primary-500);
175
+ --syn-input-border-color-hover: var(--syn-color-primary-400);
176
176
  --syn-input-border-radius-large: var(--syn-border-radius-medium);
177
177
  --syn-input-border-radius-medium: var(--syn-border-radius-medium);
178
178
  --syn-input-border-radius-small: var(--syn-border-radius-medium);
@@ -209,14 +209,11 @@
209
209
  --syn-input-letter-spacing: normal;
210
210
  --syn-input-placeholder-color: var(--syn-color-neutral-800);
211
211
  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-800);
212
- --syn-input-readonly-color: var(--syn-color-neutral-800);
213
- --syn-input-readonly-color-disabled: var(--syn-color-neutral-800);
214
- --syn-input-readonly-color-focus: var(--syn-color-neutral-950);
215
212
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
216
- --syn-input-readonly-background-color: var(--syn-color-neutral-200);
217
- --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-200);
218
- --syn-input-readonly-background-color-focus: var(--syn-color-neutral-200);
219
- --syn-input-readonly-background-color-hover: var(--syn-color-neutral-200);
213
+ --syn-input-readonly-background-color: var(--syn-color-neutral-300);
214
+ --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-300);
215
+ --syn-input-readonly-background-color-focus: var(--syn-color-neutral-300);
216
+ --syn-input-readonly-background-color-hover: var(--syn-color-neutral-300);
220
217
  --syn-input-required-content: "*";
221
218
  --syn-input-required-content-color: var(--syn-input-label-color);
222
219
  --syn-input-required-content-offset: -2px;
@@ -225,12 +222,12 @@
225
222
  --syn-input-spacing-small: var(--syn-spacing-small);
226
223
  --syn-input-width: var(--syn-border-width-small);
227
224
  --syn-interactive-background-color-hover: var(--syn-color-neutral-100);
228
- --syn-interactive-emphasis-color: var(--syn-color-primary-500);
229
- --syn-interactive-emphasis-color-active: var(--syn-color-primary-800);
230
- --syn-interactive-emphasis-color-hover: var(--syn-color-primary-700);
225
+ --syn-interactive-emphasis-color: var(--syn-color-primary-400);
226
+ --syn-interactive-emphasis-color-active: var(--syn-color-primary-700);
227
+ --syn-interactive-emphasis-color-hover: var(--syn-color-primary-600);
231
228
  --syn-interactive-quiet-color: var(--syn-color-neutral-1000);
232
- --syn-interactive-quiet-color-active: var(--syn-color-primary-600);
233
- --syn-interactive-quiet-color-hover: var(--syn-color-primary-500);
229
+ --syn-interactive-quiet-color-active: var(--syn-color-primary-500);
230
+ --syn-interactive-quiet-color-hover: var(--syn-color-primary-400);
234
231
  --syn-letter-spacing-dense: normal; /** Shoelace compatibility DO NOT USE */
235
232
  --syn-letter-spacing-denser: normal; /** Shoelace compatibility DO NOT USE */
236
233
  --syn-letter-spacing-loose: normal; /** Shoelace compatibility DO NOT USE */
@@ -250,8 +247,8 @@
250
247
  --syn-link-underline-outline: 25%;
251
248
  --syn-logo-color: var(--syn-color-primary-300);
252
249
  --syn-opacity-50: 0.5; /** 50% */
253
- --syn-overlay-background-blur: 16px;
254
- --syn-overlay-background-color: rgba(0, 10, 55, 0.6);
250
+ --syn-overlay-background-blur: 8px;
251
+ --syn-overlay-background-color: rgba(0, 5, 26, 0.6);
255
252
  --syn-page-background: var(--syn-color-neutral-0);
256
253
  --syn-panel-background-color: var(--syn-color-neutral-50);
257
254
  --syn-panel-border-color: var(--syn-color-neutral-300);
@@ -274,8 +271,8 @@
274
271
  --syn-spacing-x-small: 8px;
275
272
  --syn-spinner-opacity: 0.4;
276
273
  --syn-table-background-color: var(--syn-panel-background-color);
277
- --syn-table-background-color-alternating: var(--syn-color-neutral-100);
278
- --syn-table-background-color-header: var(--syn-color-neutral-200);
274
+ --syn-table-background-color-alternating: var(--syn-color-neutral-200);
275
+ --syn-table-background-color-header: var(--syn-color-neutral-300);
279
276
  --syn-table-border-color: var(--syn-color-neutral-300);
280
277
  --syn-table-shadow-end: rgba(0, 0, 0, 0);
281
278
  --syn-table-shadow-start: rgba(0, 0, 0, 0.8);
package/dist/themes/sick2025_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.37.0
2
+ * @synergy-design-system/tokens version 2.39.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -209,14 +209,11 @@
209
209
  --syn-input-letter-spacing: normal;
210
210
  --syn-input-placeholder-color: var(--syn-color-neutral-700);
211
211
  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-700);
212
- --syn-input-readonly-color: var(--syn-color-neutral-800);
213
- --syn-input-readonly-color-disabled: var(--syn-color-neutral-800);
214
- --syn-input-readonly-color-focus: var(--syn-color-neutral-950);
215
212
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
216
- --syn-input-readonly-background-color: #f2f0ed;
217
- --syn-input-readonly-background-color-disabled: #f2f0ed;
218
- --syn-input-readonly-background-color-focus: #f2f0ed;
219
- --syn-input-readonly-background-color-hover: #f2f0ed;
213
+ --syn-input-readonly-background-color: #e6e1dc;
214
+ --syn-input-readonly-background-color-disabled: #e6e1dc;
215
+ --syn-input-readonly-background-color-focus: #e6e1dc;
216
+ --syn-input-readonly-background-color-hover: #e6e1dc;
220
217
  --syn-input-required-content: "*";
221
218
  --syn-input-required-content-color: var(--syn-input-label-color);
222
219
  --syn-input-required-content-offset: -2px;
@@ -250,8 +247,8 @@
250
247
  --syn-link-underline-outline: 25%;
251
248
  --syn-logo-color: var(--syn-color-primary-700);
252
249
  --syn-opacity-50: 0.5; /** 50% */
253
- --syn-overlay-background-blur: 16px;
254
- --syn-overlay-background-color: rgba(0, 10, 55, 0.3);
250
+ --syn-overlay-background-blur: 8px;
251
+ --syn-overlay-background-color: rgba(0, 5, 26, 0.3);
255
252
  --syn-page-background: #f8f7f6;
256
253
  --syn-panel-background-color: var(--syn-color-neutral-0);
257
254
  --syn-panel-border-color: #e6e1dc;
package/package.json CHANGED
@@ -57,7 +57,7 @@
57
57
  },
58
58
  "type": "module",
59
59
  "types": "./dist/js/index.d.ts",
60
- "version": "2.38.0",
60
+ "version": "2.40.0",
61
61
  "scripts": {
62
62
  "build": "pnpm clean && node scripts/build.js",
63
63
  "build:all": "dotenvx -q run pnpm build:_all",
package/src/figma-variables/output/sick2018-dark.json CHANGED
@@ -742,6 +742,10 @@
742
742
  "type": "color",
743
743
  "value": "{color.neutral.700}"
744
744
  },
745
+ "color-active": {
746
+ "type": "color",
747
+ "value": "{color.neutral.1000}"
748
+ },
745
749
  "color-disabled": {
746
750
  "type": "color",
747
751
  "value": "{color.neutral.700}"
@@ -887,6 +891,10 @@
887
891
  "type": "color",
888
892
  "value": "{color.neutral.600}"
889
893
  },
894
+ "color-active": {
895
+ "type": "color",
896
+ "value": "{color.neutral.900}"
897
+ },
890
898
  "color-hover": {
891
899
  "type": "color",
892
900
  "value": "{color.neutral.800}"
@@ -928,18 +936,6 @@
928
936
  }
929
937
  },
930
938
  "readonly": {
931
- "color": {
932
- "type": "color",
933
- "value": "{color.neutral.800}"
934
- },
935
- "color-disabled": {
936
- "type": "color",
937
- "value": "{color.neutral.800}"
938
- },
939
- "color-focus": {
940
- "type": "color",
941
- "value": "{color.neutral.950}"
942
- },
943
939
  "color-hover": {
944
940
  "type": "color",
945
941
  "value": "{color.neutral.950}"
@@ -948,19 +944,23 @@
948
944
  "readonly-background": {
949
945
  "color": {
950
946
  "type": "color",
951
- "value": "{color.neutral.50}"
947
+ "value": "{color.neutral.300}"
952
948
  },
953
949
  "color-disabled": {
954
950
  "type": "color",
955
- "value": "{color.neutral.50}"
951
+ "value": "{color.neutral.300}"
956
952
  },
957
953
  "color-focus": {
958
954
  "type": "color",
959
- "value": "{color.neutral.50}"
955
+ "value": "{color.neutral.300}"
960
956
  },
961
957
  "color-hover": {
962
958
  "type": "color",
963
- "value": "{color.neutral.50}"
959
+ "value": "{color.neutral.300}"
960
+ },
961
+ "opacity": {
962
+ "type": "color",
963
+ "value": "rgba(115, 127, 133, 0.70)"
964
964
  }
965
965
  },
966
966
  "required": {
package/src/figma-variables/output/sick2018-light.json CHANGED
@@ -742,6 +742,10 @@
742
742
  "type": "color",
743
743
  "value": "{color.neutral.700}"
744
744
  },
745
+ "color-active": {
746
+ "type": "color",
747
+ "value": "{color.neutral.1000}"
748
+ },
745
749
  "color-disabled": {
746
750
  "type": "color",
747
751
  "value": "{color.neutral.700}"
@@ -887,6 +891,10 @@
887
891
  "type": "color",
888
892
  "value": "{color.neutral.600}"
889
893
  },
894
+ "color-active": {
895
+ "type": "color",
896
+ "value": "{color.neutral.900}"
897
+ },
890
898
  "color-hover": {
891
899
  "type": "color",
892
900
  "value": "{color.neutral.800}"
@@ -928,18 +936,6 @@
928
936
  }
929
937
  },
930
938
  "readonly": {
931
- "color": {
932
- "type": "color",
933
- "value": "{color.neutral.800}"
934
- },
935
- "color-disabled": {
936
- "type": "color",
937
- "value": "{color.neutral.800}"
938
- },
939
- "color-focus": {
940
- "type": "color",
941
- "value": "{color.neutral.950}"
942
- },
943
939
  "color-hover": {
944
940
  "type": "color",
945
941
  "value": "{color.neutral.950}"
@@ -948,19 +944,23 @@
948
944
  "readonly-background": {
949
945
  "color": {
950
946
  "type": "color",
951
- "value": "{color.neutral.50}"
947
+ "value": "{color.neutral.300}"
952
948
  },
953
949
  "color-disabled": {
954
950
  "type": "color",
955
- "value": "{color.neutral.50}"
951
+ "value": "{color.neutral.300}"
956
952
  },
957
953
  "color-focus": {
958
954
  "type": "color",
959
- "value": "{color.neutral.50}"
955
+ "value": "{color.neutral.300}"
960
956
  },
961
957
  "color-hover": {
962
958
  "type": "color",
963
- "value": "{color.neutral.50}"
959
+ "value": "{color.neutral.300}"
960
+ },
961
+ "opacity": {
962
+ "type": "color",
963
+ "value": "rgba(213, 219, 221, 0.70)"
964
964
  }
965
965
  },
966
966
  "required": {
package/src/figma-variables/output/sick2025-dark.json CHANGED
@@ -372,11 +372,11 @@
372
372
  "neutral": {
373
373
  "0": {
374
374
  "type": "color",
375
- "value": "#000414"
375
+ "value": "#000206"
376
376
  },
377
377
  "50": {
378
378
  "type": "color",
379
- "value": "#000724"
379
+ "value": "#00051a"
380
380
  },
381
381
  "100": {
382
382
  "type": "color",
@@ -384,7 +384,7 @@
384
384
  },
385
385
  "200": {
386
386
  "type": "color",
387
- "value": "#141e47"
387
+ "value": "#0e1633"
388
388
  },
389
389
  "300": {
390
390
  "type": "color",
@@ -742,13 +742,17 @@
742
742
  "type": "color",
743
743
  "value": "{color.neutral.1000}"
744
744
  },
745
+ "color-active": {
746
+ "type": "color",
747
+ "value": "{color.primary.500}"
748
+ },
745
749
  "color-disabled": {
746
750
  "type": "color",
747
751
  "value": "{color.neutral.1000}"
748
752
  },
749
753
  "color-focus": {
750
754
  "type": "color",
751
- "value": "{color.primary.500}"
755
+ "value": "{color.primary.400}"
752
756
  },
753
757
  "color-focus-error": {
754
758
  "type": "color",
@@ -756,7 +760,7 @@
756
760
  },
757
761
  "color-hover": {
758
762
  "type": "color",
759
- "value": "{color.primary.500}"
763
+ "value": "{color.primary.400}"
760
764
  },
761
765
  "color-offset": {
762
766
  "type": "color",
@@ -887,6 +891,10 @@
887
891
  "type": "color",
888
892
  "value": "{color.neutral.600}"
889
893
  },
894
+ "color-active": {
895
+ "type": "color",
896
+ "value": "{color.neutral.900}"
897
+ },
890
898
  "color-hover": {
891
899
  "type": "color",
892
900
  "value": "{color.neutral.800}"
@@ -928,18 +936,6 @@
928
936
  }
929
937
  },
930
938
  "readonly": {
931
- "color": {
932
- "type": "color",
933
- "value": "{color.neutral.800}"
934
- },
935
- "color-disabled": {
936
- "type": "color",
937
- "value": "{color.neutral.800}"
938
- },
939
- "color-focus": {
940
- "type": "color",
941
- "value": "{color.neutral.950}"
942
- },
943
939
  "color-hover": {
944
940
  "type": "color",
945
941
  "value": "{color.neutral.950}"
@@ -948,19 +944,23 @@
948
944
  "readonly-background": {
949
945
  "color": {
950
946
  "type": "color",
951
- "value": "{color.neutral.200}"
947
+ "value": "{color.neutral.300}"
952
948
  },
953
949
  "color-disabled": {
954
950
  "type": "color",
955
- "value": "{color.neutral.200}"
951
+ "value": "{color.neutral.300}"
956
952
  },
957
953
  "color-focus": {
958
954
  "type": "color",
959
- "value": "{color.neutral.200}"
955
+ "value": "{color.neutral.300}"
960
956
  },
961
957
  "color-hover": {
962
958
  "type": "color",
963
- "value": "{color.neutral.200}"
959
+ "value": "{color.neutral.300}"
960
+ },
961
+ "opacity": {
962
+ "type": "color",
963
+ "value": "rgba(38, 47, 85, 0.70)"
964
964
  }
965
965
  },
966
966
  "required": {
@@ -1006,15 +1006,15 @@
1006
1006
  "emphasis": {
1007
1007
  "color": {
1008
1008
  "type": "color",
1009
- "value": "{color.primary.500}"
1009
+ "value": "{color.primary.400}"
1010
1010
  },
1011
1011
  "color-active": {
1012
1012
  "type": "color",
1013
- "value": "{color.primary.800}"
1013
+ "value": "{color.primary.700}"
1014
1014
  },
1015
1015
  "color-hover": {
1016
1016
  "type": "color",
1017
- "value": "{color.primary.700}"
1017
+ "value": "{color.primary.600}"
1018
1018
  }
1019
1019
  },
1020
1020
  "quiet": {
@@ -1024,11 +1024,11 @@
1024
1024
  },
1025
1025
  "color-active": {
1026
1026
  "type": "color",
1027
- "value": "{color.primary.600}"
1027
+ "value": "{color.primary.500}"
1028
1028
  },
1029
1029
  "color-hover": {
1030
1030
  "type": "color",
1031
- "value": "{color.primary.500}"
1031
+ "value": "{color.primary.400}"
1032
1032
  }
1033
1033
  }
1034
1034
  },
@@ -1138,7 +1138,7 @@
1138
1138
  },
1139
1139
  "color": {
1140
1140
  "type": "color",
1141
- "value": "rgba(0, 10, 55, 0.60)"
1141
+ "value": "rgba(0, 5, 26, 0.60)"
1142
1142
  }
1143
1143
  }
1144
1144
  },
@@ -1252,11 +1252,11 @@
1252
1252
  },
1253
1253
  "color-alternating": {
1254
1254
  "type": "color",
1255
- "value": "{color.neutral.100}"
1255
+ "value": "{color.neutral.200}"
1256
1256
  },
1257
1257
  "color-header": {
1258
1258
  "type": "color",
1259
- "value": "{color.neutral.200}"
1259
+ "value": "{color.neutral.300}"
1260
1260
  }
1261
1261
  },
1262
1262
  "border": {
package/src/figma-variables/output/sick2025-light.json CHANGED
@@ -742,6 +742,10 @@
742
742
  "type": "color",
743
743
  "value": "{color.neutral.950}"
744
744
  },
745
+ "color-active": {
746
+ "type": "color",
747
+ "value": "{color.primary.800}"
748
+ },
745
749
  "color-disabled": {
746
750
  "type": "color",
747
751
  "value": "{color.neutral.950}"
@@ -887,6 +891,10 @@
887
891
  "type": "color",
888
892
  "value": "{color.neutral.500}"
889
893
  },
894
+ "color-active": {
895
+ "type": "color",
896
+ "value": "{color.neutral.800}"
897
+ },
890
898
  "color-hover": {
891
899
  "type": "color",
892
900
  "value": "{color.neutral.700}"
@@ -928,18 +936,6 @@
928
936
  }
929
937
  },
930
938
  "readonly": {
931
- "color": {
932
- "type": "color",
933
- "value": "{color.neutral.800}"
934
- },
935
- "color-disabled": {
936
- "type": "color",
937
- "value": "{color.neutral.800}"
938
- },
939
- "color-focus": {
940
- "type": "color",
941
- "value": "{color.neutral.950}"
942
- },
943
939
  "color-hover": {
944
940
  "type": "color",
945
941
  "value": "{color.neutral.950}"
@@ -948,19 +944,23 @@
948
944
  "readonly-background": {
949
945
  "color": {
950
946
  "type": "color",
951
- "value": "#f2f0ed"
947
+ "value": "#e6e1dc"
952
948
  },
953
949
  "color-disabled": {
954
950
  "type": "color",
955
- "value": "#f2f0ed"
951
+ "value": "#e6e1dc"
956
952
  },
957
953
  "color-focus": {
958
954
  "type": "color",
959
- "value": "#f2f0ed"
955
+ "value": "#e6e1dc"
960
956
  },
961
957
  "color-hover": {
962
958
  "type": "color",
963
- "value": "#f2f0ed"
959
+ "value": "#e6e1dc"
960
+ },
961
+ "opacity": {
962
+ "type": "color",
963
+ "value": "rgba(230, 225, 220, 0.70)"
964
964
  }
965
965
  },
966
966
  "required": {
@@ -1138,7 +1138,7 @@
1138
1138
  },
1139
1139
  "color": {
1140
1140
  "type": "color",
1141
- "value": "rgba(0, 10, 55, 0.30)"
1141
+ "value": "rgba(0, 5, 26, 0.30)"
1142
1142
  }
1143
1143
  }
1144
1144
  },