@synergy-design-system/tokens 2.43.0 → 2.44.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/js/index.d.ts +61 -1
  3. package/dist/js/index.js +61 -1
  4. package/dist/scss/_tokens.scss +13 -1
  5. package/dist/themes/dark.css +13 -1
  6. package/dist/themes/light.css +13 -1
  7. package/dist/themes/sick2018_dark.css +13 -1
  8. package/dist/themes/sick2018_light.css +13 -1
  9. package/dist/themes/sick2025_dark.css +13 -1
  10. package/dist/themes/sick2025_light.css +13 -1
  11. package/package.json +1 -1
  12. package/src/figma-tokens/_docs.json +11 -1
  13. package/src/figma-variables/output/sick2018-dark.json +52 -0
  14. package/src/figma-variables/output/sick2018-light.json +52 -0
  15. package/src/figma-variables/output/sick2025-dark.json +52 -0
  16. package/src/figma-variables/output/sick2025-light.json +52 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # Changelog
2
2
 
3
+ ## 2.44.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#1074](https://github.com/synergy-design-system/synergy-design-system/pull/1074) [`ac24e63`](https://github.com/synergy-design-system/synergy-design-system/commit/ac24e6379862c7e60b5d5293614f0d804eeb7388) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-11-27
8
+
9
+ feat: ✨ Brand updates for `<syn-menu>`, `<syn-menu-item>` and `<syn-menu-label>` (#958)
10
+
3
11
  ## 2.43.0
4
12
 
5
13
  ### Minor Changes
package/dist/js/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.42.0
2
+ * @synergy-design-system/tokens version 2.43.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
@@ -523,6 +523,11 @@ export const SynColorPrimary900: string;
523
523
  */
524
524
  export const SynColorPrimary950: string;
525
525
 
526
+ /**
527
+ * Maps to the css variable `--syn-color-primary-1000`
528
+ */
529
+ export const SynColorPrimary1000: string;
530
+
526
531
  /**
527
532
  * Maps to the css variable `--syn-color-success-50`
528
533
  */
@@ -1208,6 +1213,61 @@ export const SynLogoColor: string;
1208
1213
  */
1209
1214
  export const SynOpacity50: string;
1210
1215
 
1216
+ /**
1217
+ * Maps to the css variable `--syn-option-background-color-active`
1218
+ */
1219
+ export const SynOptionBackgroundColorActive: string;
1220
+
1221
+ /**
1222
+ * Maps to the css variable `--syn-option-background-color-hover`
1223
+ */
1224
+ export const SynOptionBackgroundColorHover: string;
1225
+
1226
+ /**
1227
+ * Maps to the css variable `--syn-option-check-color`
1228
+ */
1229
+ export const SynOptionCheckColor: string;
1230
+
1231
+ /**
1232
+ * Maps to the css variable `--syn-option-check-color-active`
1233
+ */
1234
+ export const SynOptionCheckColorActive: string;
1235
+
1236
+ /**
1237
+ * Maps to the css variable `--syn-option-check-color-hover`
1238
+ */
1239
+ export const SynOptionCheckColorHover: string;
1240
+
1241
+ /**
1242
+ * Maps to the css variable `--syn-option-color`
1243
+ */
1244
+ export const SynOptionColor: string;
1245
+
1246
+ /**
1247
+ * Maps to the css variable `--syn-option-color-active`
1248
+ */
1249
+ export const SynOptionColorActive: string;
1250
+
1251
+ /**
1252
+ * Maps to the css variable `--syn-option-color-hover`
1253
+ */
1254
+ export const SynOptionColorHover: string;
1255
+
1256
+ /**
1257
+ * Maps to the css variable `--syn-option-icon-color`
1258
+ */
1259
+ export const SynOptionIconColor: string;
1260
+
1261
+ /**
1262
+ * Maps to the css variable `--syn-option-icon-color-active`
1263
+ */
1264
+ export const SynOptionIconColorActive: string;
1265
+
1266
+ /**
1267
+ * Maps to the css variable `--syn-option-icon-color-hover`
1268
+ */
1269
+ export const SynOptionIconColorHover: string;
1270
+
1211
1271
  /**
1212
1272
  * Maps to the css variable `--syn-overlay-background-blur`
1213
1273
  */
package/dist/js/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.42.0
2
+ * @synergy-design-system/tokens version 2.43.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
@@ -523,6 +523,11 @@ export const SynColorPrimary900 = 'var(--syn-color-primary-900)';
523
523
  */
524
524
  export const SynColorPrimary950 = 'var(--syn-color-primary-950)';
525
525
 
526
+ /**
527
+ * @type {string}
528
+ */
529
+ export const SynColorPrimary1000 = 'var(--syn-color-primary-1000)';
530
+
526
531
  /**
527
532
  * @type {string}
528
533
  */
@@ -1208,6 +1213,61 @@ export const SynLogoColor = 'var(--syn-logo-color)';
1208
1213
  */
1209
1214
  export const SynOpacity50 = 'var(--syn-opacity-50)';
1210
1215
 
1216
+ /**
1217
+ * @type {string}
1218
+ */
1219
+ export const SynOptionBackgroundColorActive = 'var(--syn-option-background-color-active)';
1220
+
1221
+ /**
1222
+ * @type {string}
1223
+ */
1224
+ export const SynOptionBackgroundColorHover = 'var(--syn-option-background-color-hover)';
1225
+
1226
+ /**
1227
+ * @type {string}
1228
+ */
1229
+ export const SynOptionCheckColor = 'var(--syn-option-check-color)';
1230
+
1231
+ /**
1232
+ * @type {string}
1233
+ */
1234
+ export const SynOptionCheckColorActive = 'var(--syn-option-check-color-active)';
1235
+
1236
+ /**
1237
+ * @type {string}
1238
+ */
1239
+ export const SynOptionCheckColorHover = 'var(--syn-option-check-color-hover)';
1240
+
1241
+ /**
1242
+ * @type {string}
1243
+ */
1244
+ export const SynOptionColor = 'var(--syn-option-color)';
1245
+
1246
+ /**
1247
+ * @type {string}
1248
+ */
1249
+ export const SynOptionColorActive = 'var(--syn-option-color-active)';
1250
+
1251
+ /**
1252
+ * @type {string}
1253
+ */
1254
+ export const SynOptionColorHover = 'var(--syn-option-color-hover)';
1255
+
1256
+ /**
1257
+ * @type {string}
1258
+ */
1259
+ export const SynOptionIconColor = 'var(--syn-option-icon-color)';
1260
+
1261
+ /**
1262
+ * @type {string}
1263
+ */
1264
+ export const SynOptionIconColorActive = 'var(--syn-option-icon-color-active)';
1265
+
1266
+ /**
1267
+ * @type {string}
1268
+ */
1269
+ export const SynOptionIconColorHover = 'var(--syn-option-icon-color-hover)';
1270
+
1211
1271
  /**
1212
1272
  * @type {string}
1213
1273
  */
package/dist/scss/_tokens.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.42.0
2
+ * @synergy-design-system/tokens version 2.43.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
  $SynAlertErrorColorBackground: var(--syn-alert-error-color-background) !default;
@@ -106,6 +106,7 @@ $SynColorPrimary700: var(--syn-color-primary-700) !default;
106
106
  $SynColorPrimary800: var(--syn-color-primary-800) !default;
107
107
  $SynColorPrimary900: var(--syn-color-primary-900) !default;
108
108
  $SynColorPrimary950: var(--syn-color-primary-950) !default;
109
+ $SynColorPrimary1000: var(--syn-color-primary-1000) !default;
109
110
  $SynColorSuccess50: var(--syn-color-success-50) !default;
110
111
  $SynColorSuccess100: var(--syn-color-success-100) !default;
111
112
  $SynColorSuccess200: var(--syn-color-success-200) !default;
@@ -243,6 +244,17 @@ $SynLinkQuietColorHover: var(--syn-link-quiet-color-hover) !default;
243
244
  $SynLinkUnderlineOutline: var(--syn-link-underline-outline) !default;
244
245
  $SynLogoColor: var(--syn-logo-color) !default;
245
246
  $SynOpacity50: var(--syn-opacity-50) !default;
247
+ $SynOptionBackgroundColorActive: var(--syn-option-background-color-active) !default;
248
+ $SynOptionBackgroundColorHover: var(--syn-option-background-color-hover) !default;
249
+ $SynOptionCheckColor: var(--syn-option-check-color) !default;
250
+ $SynOptionCheckColorActive: var(--syn-option-check-color-active) !default;
251
+ $SynOptionCheckColorHover: var(--syn-option-check-color-hover) !default;
252
+ $SynOptionColor: var(--syn-option-color) !default;
253
+ $SynOptionColorActive: var(--syn-option-color-active) !default;
254
+ $SynOptionColorHover: var(--syn-option-color-hover) !default;
255
+ $SynOptionIconColor: var(--syn-option-icon-color) !default;
256
+ $SynOptionIconColorActive: var(--syn-option-icon-color-active) !default;
257
+ $SynOptionIconColorHover: var(--syn-option-icon-color-hover) !default;
246
258
  $SynOverlayBackgroundBlur: var(--syn-overlay-background-blur) !default;
247
259
  $SynOverlayBackgroundColor: var(--syn-overlay-background-color) !default;
248
260
  $SynPageBackground: var(--syn-page-background) !default;
package/dist/themes/dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.42.0
2
+ * @synergy-design-system/tokens version 2.43.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -111,6 +111,7 @@
111
111
  --syn-color-primary-800: #b9e5fe;
112
112
  --syn-color-primary-900: #e0f1fe;
113
113
  --syn-color-primary-950: #f0f9ff;
114
+ --syn-color-primary-1000: #f0f9ff;
114
115
  --syn-color-success-50: #172c07;
115
116
  --syn-color-success-100: #315017;
116
117
  --syn-color-success-200: #395e16;
@@ -248,6 +249,17 @@
248
249
  --syn-link-underline-outline: 7%;
249
250
  --syn-logo-color: var(--syn-color-primary-400);
250
251
  --syn-opacity-50: 0.5; /** 50% */
252
+ --syn-option-background-color-active: var(--syn-color-primary-400);
253
+ --syn-option-background-color-hover: var(--syn-color-neutral-100);
254
+ --syn-option-check-color: var(--syn-color-primary-600);
255
+ --syn-option-check-color-active: var(--syn-color-neutral-0);
256
+ --syn-option-check-color-hover: var(--syn-color-primary-600);
257
+ --syn-option-color: var(--syn-typography-color-text);
258
+ --syn-option-color-active: var(--syn-typography-color-text-inverted);
259
+ --syn-option-color-hover: var(--syn-typography-color-text);
260
+ --syn-option-icon-color: var(--syn-typography-color-text);
261
+ --syn-option-icon-color-active: var(--syn-typography-color-text-inverted);
262
+ --syn-option-icon-color-hover: var(--syn-typography-color-text);
251
263
  --syn-overlay-background-blur: 0px;
252
264
  --syn-overlay-background-color: rgba(49, 55, 58, 0.5);
253
265
  --syn-page-background: var(--syn-color-neutral-50);
package/dist/themes/light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.42.0
2
+ * @synergy-design-system/tokens version 2.43.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -111,6 +111,7 @@
111
111
  --syn-color-primary-800: #065786;
112
112
  --syn-color-primary-900: #0b486f;
113
113
  --syn-color-primary-950: #072e4a;
114
+ --syn-color-primary-1000: #072e4a;
114
115
  --syn-color-success-50: #f5fde8;
115
116
  --syn-color-success-100: #e7facd;
116
117
  --syn-color-success-200: #d1f4a2;
@@ -248,6 +249,17 @@
248
249
  --syn-link-underline-outline: 7%;
249
250
  --syn-logo-color: var(--syn-color-primary-600);
250
251
  --syn-opacity-50: 0.5; /** 50% */
252
+ --syn-option-background-color-active: var(--syn-color-primary-600);
253
+ --syn-option-background-color-hover: var(--syn-color-neutral-100);
254
+ --syn-option-check-color: var(--syn-color-primary-600);
255
+ --syn-option-check-color-active: var(--syn-color-neutral-0);
256
+ --syn-option-check-color-hover: var(--syn-color-primary-600);
257
+ --syn-option-color: var(--syn-typography-color-text);
258
+ --syn-option-color-active: var(--syn-typography-color-text-inverted);
259
+ --syn-option-color-hover: var(--syn-typography-color-text);
260
+ --syn-option-icon-color: var(--syn-input-icon-color);
261
+ --syn-option-icon-color-active: var(--syn-color-neutral-0);
262
+ --syn-option-icon-color-hover: var(--syn-input-icon-color-hover);
251
263
  --syn-overlay-background-blur: 0px;
252
264
  --syn-overlay-background-color: rgba(49, 55, 58, 0.5);
253
265
  --syn-page-background: var(--syn-color-neutral-100);
package/dist/themes/sick2018_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.42.0
2
+ * @synergy-design-system/tokens version 2.43.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -111,6 +111,7 @@
111
111
  --syn-color-primary-800: #b9e5fe;
112
112
  --syn-color-primary-900: #e0f1fe;
113
113
  --syn-color-primary-950: #f0f9ff;
114
+ --syn-color-primary-1000: #f0f9ff;
114
115
  --syn-color-success-50: #172c07;
115
116
  --syn-color-success-100: #315017;
116
117
  --syn-color-success-200: #395e16;
@@ -248,6 +249,17 @@
248
249
  --syn-link-underline-outline: 7%;
249
250
  --syn-logo-color: var(--syn-color-primary-400);
250
251
  --syn-opacity-50: 0.5; /** 50% */
252
+ --syn-option-background-color-active: var(--syn-color-primary-400);
253
+ --syn-option-background-color-hover: var(--syn-color-neutral-100);
254
+ --syn-option-check-color: var(--syn-color-primary-600);
255
+ --syn-option-check-color-active: var(--syn-color-neutral-0);
256
+ --syn-option-check-color-hover: var(--syn-color-primary-600);
257
+ --syn-option-color: var(--syn-typography-color-text);
258
+ --syn-option-color-active: var(--syn-typography-color-text-inverted);
259
+ --syn-option-color-hover: var(--syn-typography-color-text);
260
+ --syn-option-icon-color: var(--syn-typography-color-text);
261
+ --syn-option-icon-color-active: var(--syn-typography-color-text-inverted);
262
+ --syn-option-icon-color-hover: var(--syn-typography-color-text);
251
263
  --syn-overlay-background-blur: 0px;
252
264
  --syn-overlay-background-color: rgba(49, 55, 58, 0.5);
253
265
  --syn-page-background: var(--syn-color-neutral-50);
package/dist/themes/sick2018_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.42.0
2
+ * @synergy-design-system/tokens version 2.43.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -111,6 +111,7 @@
111
111
  --syn-color-primary-800: #065786;
112
112
  --syn-color-primary-900: #0b486f;
113
113
  --syn-color-primary-950: #072e4a;
114
+ --syn-color-primary-1000: #072e4a;
114
115
  --syn-color-success-50: #f5fde8;
115
116
  --syn-color-success-100: #e7facd;
116
117
  --syn-color-success-200: #d1f4a2;
@@ -248,6 +249,17 @@
248
249
  --syn-link-underline-outline: 7%;
249
250
  --syn-logo-color: var(--syn-color-primary-600);
250
251
  --syn-opacity-50: 0.5; /** 50% */
252
+ --syn-option-background-color-active: var(--syn-color-primary-600);
253
+ --syn-option-background-color-hover: var(--syn-color-neutral-100);
254
+ --syn-option-check-color: var(--syn-color-primary-600);
255
+ --syn-option-check-color-active: var(--syn-color-neutral-0);
256
+ --syn-option-check-color-hover: var(--syn-color-primary-600);
257
+ --syn-option-color: var(--syn-typography-color-text);
258
+ --syn-option-color-active: var(--syn-typography-color-text-inverted);
259
+ --syn-option-color-hover: var(--syn-typography-color-text);
260
+ --syn-option-icon-color: var(--syn-input-icon-color);
261
+ --syn-option-icon-color-active: var(--syn-color-neutral-0);
262
+ --syn-option-icon-color-hover: var(--syn-input-icon-color-hover);
251
263
  --syn-overlay-background-blur: 0px;
252
264
  --syn-overlay-background-color: rgba(49, 55, 58, 0.5);
253
265
  --syn-page-background: var(--syn-color-neutral-100);
package/dist/themes/sick2025_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.42.0
2
+ * @synergy-design-system/tokens version 2.43.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -111,6 +111,7 @@
111
111
  --syn-color-primary-800: #ccdeff;
112
112
  --syn-color-primary-900: #dae7ff;
113
113
  --syn-color-primary-950: #eff5ff;
114
+ --syn-color-primary-1000: #eff5ff;
114
115
  --syn-color-success-50: #003911;
115
116
  --syn-color-success-100: #026524;
116
117
  --syn-color-success-200: #00852c;
@@ -248,6 +249,17 @@
248
249
  --syn-link-underline-outline: 25%;
249
250
  --syn-logo-color: var(--syn-color-primary-300);
250
251
  --syn-opacity-50: 0.5; /** 50% */
252
+ --syn-option-background-color-active: var(--syn-color-neutral-1000);
253
+ --syn-option-background-color-hover: var(--syn-color-neutral-1000);
254
+ --syn-option-check-color: var(--syn-interactive-quiet-color);
255
+ --syn-option-check-color-active: var(--syn-color-neutral-0);
256
+ --syn-option-check-color-hover: var(--syn-color-neutral-0);
257
+ --syn-option-color: var(--syn-typography-color-text);
258
+ --syn-option-color-active: var(--syn-typography-color-text-inverted);
259
+ --syn-option-color-hover: var(--syn-typography-color-text-inverted);
260
+ --syn-option-icon-color: var(--syn-interactive-quiet-color);
261
+ --syn-option-icon-color-active: var(--syn-color-neutral-0);
262
+ --syn-option-icon-color-hover: var(--syn-color-neutral-0);
251
263
  --syn-overlay-background-blur: 8px;
252
264
  --syn-overlay-background-color: rgba(0, 5, 26, 0.6);
253
265
  --syn-page-background: var(--syn-color-neutral-0);
package/dist/themes/sick2025_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.42.0
2
+ * @synergy-design-system/tokens version 2.43.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -111,6 +111,7 @@
111
111
  --syn-color-primary-800: #0845c5;
112
112
  --syn-color-primary-900: #0d3f9b;
113
113
  --syn-color-primary-950: #0e275d;
114
+ --syn-color-primary-1000: #000a37;
114
115
  --syn-color-success-50: #f0fdf4;
115
116
  --syn-color-success-100: #ddfbe6;
116
117
  --syn-color-success-200: #bcf6cf;
@@ -248,6 +249,17 @@
248
249
  --syn-link-underline-outline: 25%;
249
250
  --syn-logo-color: var(--syn-color-primary-700);
250
251
  --syn-opacity-50: 0.5; /** 50% */
252
+ --syn-option-background-color-active: var(--syn-color-primary-1000);
253
+ --syn-option-background-color-hover: var(--syn-color-primary-1000);
254
+ --syn-option-check-color: var(--syn-interactive-quiet-color);
255
+ --syn-option-check-color-active: var(--syn-color-neutral-0);
256
+ --syn-option-check-color-hover: var(--syn-color-neutral-0);
257
+ --syn-option-color: var(--syn-typography-color-text);
258
+ --syn-option-color-active: var(--syn-typography-color-text-inverted);
259
+ --syn-option-color-hover: var(--syn-typography-color-text-inverted);
260
+ --syn-option-icon-color: var(--syn-interactive-quiet-color);
261
+ --syn-option-icon-color-active: var(--syn-color-neutral-0);
262
+ --syn-option-icon-color-hover: var(--syn-color-neutral-0);
251
263
  --syn-overlay-background-blur: 8px;
252
264
  --syn-overlay-background-color: rgba(0, 5, 26, 0.3);
253
265
  --syn-page-background: #f8f7f6;
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.43.0",
60
+ "version": "2.44.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-tokens/_docs.json CHANGED
@@ -1483,6 +1483,16 @@
1483
1483
  }
1484
1484
  },
1485
1485
  "menu-item": {
1486
+ "focus": {
1487
+ "title": {
1488
+ "value": "Focus",
1489
+ "type": "text"
1490
+ },
1491
+ "description": {
1492
+ "value": "The focus event gives the user feedback that the Menu Item has been focused by the keyboard interaction from the user.",
1493
+ "type": "text"
1494
+ }
1495
+ },
1486
1496
  "default": {
1487
1497
  "description": {
1488
1498
  "value": "Menu items provide options for the user to pick from in a menu.",
@@ -4107,4 +4117,4 @@
4107
4117
  }
4108
4118
  }
4109
4119
  }
4110
- }
4120
+ }
package/src/figma-variables/output/sick2018-dark.json CHANGED
@@ -1130,6 +1130,58 @@
1130
1130
  "value": "50%"
1131
1131
  }
1132
1132
  },
1133
+ "option": {
1134
+ "background": {
1135
+ "color-active": {
1136
+ "type": "color",
1137
+ "value": "{color.primary.400}"
1138
+ },
1139
+ "color-hover": {
1140
+ "type": "color",
1141
+ "value": "{color.neutral.100}"
1142
+ }
1143
+ },
1144
+ "check": {
1145
+ "color": {
1146
+ "type": "color",
1147
+ "value": "{color.primary.600}"
1148
+ },
1149
+ "color-active": {
1150
+ "type": "color",
1151
+ "value": "{color.neutral.0}"
1152
+ },
1153
+ "color-hover": {
1154
+ "type": "color",
1155
+ "value": "{color.primary.600}"
1156
+ }
1157
+ },
1158
+ "color": {
1159
+ "type": "color",
1160
+ "value": "{typography.color.text}"
1161
+ },
1162
+ "color-active": {
1163
+ "type": "color",
1164
+ "value": "{typography.color.text-inverted}"
1165
+ },
1166
+ "color-hover": {
1167
+ "type": "color",
1168
+ "value": "{typography.color.text}"
1169
+ },
1170
+ "icon": {
1171
+ "color": {
1172
+ "type": "color",
1173
+ "value": "{typography.color.text}"
1174
+ },
1175
+ "color-active": {
1176
+ "type": "color",
1177
+ "value": "{typography.color.text-inverted}"
1178
+ },
1179
+ "color-hover": {
1180
+ "type": "color",
1181
+ "value": "{typography.color.text}"
1182
+ }
1183
+ }
1184
+ },
1133
1185
  "overlay": {
1134
1186
  "background": {
1135
1187
  "blur": {
package/src/figma-variables/output/sick2018-light.json CHANGED
@@ -1130,6 +1130,58 @@
1130
1130
  "value": "50%"
1131
1131
  }
1132
1132
  },
1133
+ "option": {
1134
+ "background": {
1135
+ "color-active": {
1136
+ "type": "color",
1137
+ "value": "{color.primary.600}"
1138
+ },
1139
+ "color-hover": {
1140
+ "type": "color",
1141
+ "value": "{color.neutral.100}"
1142
+ }
1143
+ },
1144
+ "check": {
1145
+ "color": {
1146
+ "type": "color",
1147
+ "value": "{color.primary.600}"
1148
+ },
1149
+ "color-active": {
1150
+ "type": "color",
1151
+ "value": "{color.neutral.0}"
1152
+ },
1153
+ "color-hover": {
1154
+ "type": "color",
1155
+ "value": "{color.primary.600}"
1156
+ }
1157
+ },
1158
+ "color": {
1159
+ "type": "color",
1160
+ "value": "{typography.color.text}"
1161
+ },
1162
+ "color-active": {
1163
+ "type": "color",
1164
+ "value": "{typography.color.text-inverted}"
1165
+ },
1166
+ "color-hover": {
1167
+ "type": "color",
1168
+ "value": "{typography.color.text}"
1169
+ },
1170
+ "icon": {
1171
+ "color": {
1172
+ "type": "color",
1173
+ "value": "{input.icon.color}"
1174
+ },
1175
+ "color-active": {
1176
+ "type": "color",
1177
+ "value": "{color.neutral.0}"
1178
+ },
1179
+ "color-hover": {
1180
+ "type": "color",
1181
+ "value": "{input.icon.color-hover}"
1182
+ }
1183
+ }
1184
+ },
1133
1185
  "overlay": {
1134
1186
  "background": {
1135
1187
  "blur": {
package/src/figma-variables/output/sick2025-dark.json CHANGED
@@ -1130,6 +1130,58 @@
1130
1130
  "value": "50%"
1131
1131
  }
1132
1132
  },
1133
+ "option": {
1134
+ "background": {
1135
+ "color-active": {
1136
+ "type": "color",
1137
+ "value": "{color.neutral.1000}"
1138
+ },
1139
+ "color-hover": {
1140
+ "type": "color",
1141
+ "value": "{color.neutral.1000}"
1142
+ }
1143
+ },
1144
+ "check": {
1145
+ "color": {
1146
+ "type": "color",
1147
+ "value": "{interactive.quiet.color}"
1148
+ },
1149
+ "color-active": {
1150
+ "type": "color",
1151
+ "value": "{color.neutral.0}"
1152
+ },
1153
+ "color-hover": {
1154
+ "type": "color",
1155
+ "value": "{color.neutral.0}"
1156
+ }
1157
+ },
1158
+ "color": {
1159
+ "type": "color",
1160
+ "value": "{typography.color.text}"
1161
+ },
1162
+ "color-active": {
1163
+ "type": "color",
1164
+ "value": "{typography.color.text-inverted}"
1165
+ },
1166
+ "color-hover": {
1167
+ "type": "color",
1168
+ "value": "{typography.color.text-inverted}"
1169
+ },
1170
+ "icon": {
1171
+ "color": {
1172
+ "type": "color",
1173
+ "value": "{interactive.quiet.color}"
1174
+ },
1175
+ "color-active": {
1176
+ "type": "color",
1177
+ "value": "{color.neutral.0}"
1178
+ },
1179
+ "color-hover": {
1180
+ "type": "color",
1181
+ "value": "{color.neutral.0}"
1182
+ }
1183
+ }
1184
+ },
1133
1185
  "overlay": {
1134
1186
  "background": {
1135
1187
  "blur": {
package/src/figma-variables/output/sick2025-light.json CHANGED
@@ -1130,6 +1130,58 @@
1130
1130
  "value": "50%"
1131
1131
  }
1132
1132
  },
1133
+ "option": {
1134
+ "background": {
1135
+ "color-active": {
1136
+ "type": "color",
1137
+ "value": "{color.primary.1000}"
1138
+ },
1139
+ "color-hover": {
1140
+ "type": "color",
1141
+ "value": "{color.primary.1000}"
1142
+ }
1143
+ },
1144
+ "check": {
1145
+ "color": {
1146
+ "type": "color",
1147
+ "value": "{interactive.quiet.color}"
1148
+ },
1149
+ "color-active": {
1150
+ "type": "color",
1151
+ "value": "{color.neutral.0}"
1152
+ },
1153
+ "color-hover": {
1154
+ "type": "color",
1155
+ "value": "{color.neutral.0}"
1156
+ }
1157
+ },
1158
+ "color": {
1159
+ "type": "color",
1160
+ "value": "{typography.color.text}"
1161
+ },
1162
+ "color-active": {
1163
+ "type": "color",
1164
+ "value": "{typography.color.text-inverted}"
1165
+ },
1166
+ "color-hover": {
1167
+ "type": "color",
1168
+ "value": "{typography.color.text-inverted}"
1169
+ },
1170
+ "icon": {
1171
+ "color": {
1172
+ "type": "color",
1173
+ "value": "{interactive.quiet.color}"
1174
+ },
1175
+ "color-active": {
1176
+ "type": "color",
1177
+ "value": "{color.neutral.0}"
1178
+ },
1179
+ "color-hover": {
1180
+ "type": "color",
1181
+ "value": "{color.neutral.0}"
1182
+ }
1183
+ }
1184
+ },
1133
1185
  "overlay": {
1134
1186
  "background": {
1135
1187
  "blur": {