@synergy-design-system/tokens 2.38.0 → 2.39.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 +10 -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 +12 -16
  13. package/src/figma-variables/output/sick2018-light.json +12 -16
  14. package/src/figma-variables/output/sick2025-dark.json +25 -29
  15. package/src/figma-variables/output/sick2025-light.json +13 -17
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # Changelog
2
2
 
3
+ ## 2.39.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#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
8
+
9
+ feat: ✨ Brand updates for `<syn-dialog>` (#946)
10
+
11
+ Also made sure to have smaller `blur` settings as the token has double the size in Figma.
12
+
3
13
  ## 2.38.0
4
14
 
5
15
  ### 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.38.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.38.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.38.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.38.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.38.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.38.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.38.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.38.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.38.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.39.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,19 @@
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}"
964
960
  }
965
961
  },
966
962
  "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,19 @@
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}"
964
960
  }
965
961
  },
966
962
  "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,19 @@
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}"
964
960
  }
965
961
  },
966
962
  "required": {
@@ -1006,15 +1002,15 @@
1006
1002
  "emphasis": {
1007
1003
  "color": {
1008
1004
  "type": "color",
1009
- "value": "{color.primary.500}"
1005
+ "value": "{color.primary.400}"
1010
1006
  },
1011
1007
  "color-active": {
1012
1008
  "type": "color",
1013
- "value": "{color.primary.800}"
1009
+ "value": "{color.primary.700}"
1014
1010
  },
1015
1011
  "color-hover": {
1016
1012
  "type": "color",
1017
- "value": "{color.primary.700}"
1013
+ "value": "{color.primary.600}"
1018
1014
  }
1019
1015
  },
1020
1016
  "quiet": {
@@ -1024,11 +1020,11 @@
1024
1020
  },
1025
1021
  "color-active": {
1026
1022
  "type": "color",
1027
- "value": "{color.primary.600}"
1023
+ "value": "{color.primary.500}"
1028
1024
  },
1029
1025
  "color-hover": {
1030
1026
  "type": "color",
1031
- "value": "{color.primary.500}"
1027
+ "value": "{color.primary.400}"
1032
1028
  }
1033
1029
  }
1034
1030
  },
@@ -1138,7 +1134,7 @@
1138
1134
  },
1139
1135
  "color": {
1140
1136
  "type": "color",
1141
- "value": "rgba(0, 10, 55, 0.60)"
1137
+ "value": "rgba(0, 5, 26, 0.60)"
1142
1138
  }
1143
1139
  }
1144
1140
  },
@@ -1252,11 +1248,11 @@
1252
1248
  },
1253
1249
  "color-alternating": {
1254
1250
  "type": "color",
1255
- "value": "{color.neutral.100}"
1251
+ "value": "{color.neutral.200}"
1256
1252
  },
1257
1253
  "color-header": {
1258
1254
  "type": "color",
1259
- "value": "{color.neutral.200}"
1255
+ "value": "{color.neutral.300}"
1260
1256
  }
1261
1257
  },
1262
1258
  "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,19 @@
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"
964
960
  }
965
961
  },
966
962
  "required": {
@@ -1138,7 +1134,7 @@
1138
1134
  },
1139
1135
  "color": {
1140
1136
  "type": "color",
1141
- "value": "rgba(0, 10, 55, 0.30)"
1137
+ "value": "rgba(0, 5, 26, 0.30)"
1142
1138
  }
1143
1139
  }
1144
1140
  },