@synergy-design-system/tokens 2.40.0 → 2.42.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 +16 -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 +11 -5
  6. package/dist/themes/light.css +11 -5
  7. package/dist/themes/sick2018_dark.css +11 -5
  8. package/dist/themes/sick2018_light.css +11 -5
  9. package/dist/themes/sick2025_dark.css +22 -16
  10. package/dist/themes/sick2025_light.css +11 -5
  11. package/package.json +1 -1
  12. package/src/figma-variables/output/sick2018-dark.json +80 -8
  13. package/src/figma-variables/output/sick2018-light.json +80 -8
  14. package/src/figma-variables/output/sick2025-dark.json +91 -19
  15. package/src/figma-variables/output/sick2025-light.json +80 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # Changelog
2
2
 
3
+ ## 2.42.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#1076](https://github.com/synergy-design-system/synergy-design-system/pull/1076) [`1392ed2`](https://github.com/synergy-design-system/synergy-design-system/commit/1392ed23aba2b628344356adba0a78e1e8beff84) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-11-18
8
+
9
+ feat: ✨ Brand updates for `<syn-side-nav>`, `<syn-prio-nav>` and `<syn-nav-item>` (#967, #960)
10
+
11
+ ## 2.41.0
12
+
13
+ ### Minor Changes
14
+
15
+ - [#1063](https://github.com/synergy-design-system/synergy-design-system/pull/1063) [`6e616f5`](https://github.com/synergy-design-system/synergy-design-system/commit/6e616f51007ebde567eeb33190518159becc7c32) Thanks [@kirchsuSICKAG](https://github.com/kirchsuSICKAG)! - Released on: 2025-11-17
16
+
17
+ feat: ✨ Brand update for syn-range and syn-range-tick (#966)
18
+
3
19
  ## 2.40.0
4
20
 
5
21
  ### Minor Changes
package/dist/js/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.39.0
2
+ * @synergy-design-system/tokens version 2.41.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
@@ -833,6 +833,11 @@ export const SynInputBorderColorFocusError: string;
833
833
  */
834
834
  export const SynInputBorderColorHover: string;
835
835
 
836
+ /**
837
+ * Maps to the css variable `--syn-input-border-color-offset`
838
+ */
839
+ export const SynInputBorderColorOffset: string;
840
+
836
841
  /**
837
842
  * Maps to the css variable `--syn-input-border-radius-large`
838
843
  */
@@ -1248,6 +1253,31 @@ export const SynProgressIndicatorColor: string;
1248
1253
  */
1249
1254
  export const SynProgressTrackColor: string;
1250
1255
 
1256
+ /**
1257
+ * Maps to the css variable `--syn-range-color-inactive`
1258
+ */
1259
+ export const SynRangeColorInactive: string;
1260
+
1261
+ /**
1262
+ * Maps to the css variable `--syn-range-error-color`
1263
+ */
1264
+ export const SynRangeErrorColor: string;
1265
+
1266
+ /**
1267
+ * Maps to the css variable `--syn-range-tick-color`
1268
+ */
1269
+ export const SynRangeTickColor: string;
1270
+
1271
+ /**
1272
+ * Maps to the css variable `--syn-range-track-color-active`
1273
+ */
1274
+ export const SynRangeTrackColorActive: string;
1275
+
1276
+ /**
1277
+ * Maps to the css variable `--syn-readonly-background-color`
1278
+ */
1279
+ export const SynReadonlyBackgroundColor: string;
1280
+
1251
1281
  /**
1252
1282
  * Maps to the css variable `--syn-spacing-2x-large`
1253
1283
  */
package/dist/js/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.39.0
2
+ * @synergy-design-system/tokens version 2.41.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
@@ -833,6 +833,11 @@ export const SynInputBorderColorFocusError = 'var(--syn-input-border-color-focus
833
833
  */
834
834
  export const SynInputBorderColorHover = 'var(--syn-input-border-color-hover)';
835
835
 
836
+ /**
837
+ * @type {string}
838
+ */
839
+ export const SynInputBorderColorOffset = 'var(--syn-input-border-color-offset)';
840
+
836
841
  /**
837
842
  * @type {string}
838
843
  */
@@ -1248,6 +1253,31 @@ export const SynProgressIndicatorColor = 'var(--syn-progress-indicator-color)';
1248
1253
  */
1249
1254
  export const SynProgressTrackColor = 'var(--syn-progress-track-color)';
1250
1255
 
1256
+ /**
1257
+ * @type {string}
1258
+ */
1259
+ export const SynRangeColorInactive = 'var(--syn-range-color-inactive)';
1260
+
1261
+ /**
1262
+ * @type {string}
1263
+ */
1264
+ export const SynRangeErrorColor = 'var(--syn-range-error-color)';
1265
+
1266
+ /**
1267
+ * @type {string}
1268
+ */
1269
+ export const SynRangeTickColor = 'var(--syn-range-tick-color)';
1270
+
1271
+ /**
1272
+ * @type {string}
1273
+ */
1274
+ export const SynRangeTrackColorActive = 'var(--syn-range-track-color-active)';
1275
+
1276
+ /**
1277
+ * @type {string}
1278
+ */
1279
+ export const SynReadonlyBackgroundColor = 'var(--syn-readonly-background-color)';
1280
+
1251
1281
  /**
1252
1282
  * @type {string}
1253
1283
  */
package/dist/scss/_tokens.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.39.0
2
+ * @synergy-design-system/tokens version 2.41.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
  $SynAlertErrorColorBackground: var(--syn-alert-error-color-background) !default;
@@ -168,6 +168,7 @@ $SynInputBorderColorDisabled: var(--syn-input-border-color-disabled) !default;
168
168
  $SynInputBorderColorFocus: var(--syn-input-border-color-focus) !default;
169
169
  $SynInputBorderColorFocusError: var(--syn-input-border-color-focus-error) !default;
170
170
  $SynInputBorderColorHover: var(--syn-input-border-color-hover) !default;
171
+ $SynInputBorderColorOffset: var(--syn-input-border-color-offset) !default;
171
172
  $SynInputBorderRadiusLarge: var(--syn-input-border-radius-large) !default;
172
173
  $SynInputBorderRadiusMedium: var(--syn-input-border-radius-medium) !default;
173
174
  $SynInputBorderRadiusSmall: var(--syn-input-border-radius-small) !default;
@@ -251,6 +252,11 @@ $SynPanelBorderRadius: var(--syn-panel-border-radius) !default;
251
252
  $SynPanelBorderWidth: var(--syn-panel-border-width) !default;
252
253
  $SynProgressIndicatorColor: var(--syn-progress-indicator-color) !default;
253
254
  $SynProgressTrackColor: var(--syn-progress-track-color) !default;
255
+ $SynRangeColorInactive: var(--syn-range-color-inactive) !default;
256
+ $SynRangeErrorColor: var(--syn-range-error-color) !default;
257
+ $SynRangeTickColor: var(--syn-range-tick-color) !default;
258
+ $SynRangeTrackColorActive: var(--syn-range-track-color-active) !default;
259
+ $SynReadonlyBackgroundColor: var(--syn-readonly-background-color) !default;
254
260
  $SynSpacing2xLarge: var(--syn-spacing-2x-large) !default;
255
261
  $SynSpacing2xSmall: var(--syn-spacing-2x-small) !default;
256
262
  $SynSpacing3xLarge: var(--syn-spacing-3x-large) !default;
package/dist/themes/dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.39.0
2
+ * @synergy-design-system/tokens version 2.41.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -173,6 +173,7 @@
173
173
  --syn-input-border-color-focus: var(--syn-color-neutral-950);
174
174
  --syn-input-border-color-focus-error: var(--syn-color-error-700);
175
175
  --syn-input-border-color-hover: var(--syn-color-neutral-950);
176
+ --syn-input-border-color-offset: var(--syn-panel-background-color);
176
177
  --syn-input-border-radius-large: var(--syn-border-radius-none);
177
178
  --syn-input-border-radius-medium: var(--syn-border-radius-none);
178
179
  --syn-input-border-radius-small: var(--syn-border-radius-none);
@@ -210,10 +211,10 @@
210
211
  --syn-input-placeholder-color: var(--syn-color-neutral-500);
211
212
  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
212
213
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
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);
214
+ --syn-input-readonly-background-color: var(--syn-readonly-background-color);
215
+ --syn-input-readonly-background-color-disabled: var(--syn-readonly-background-color);
216
+ --syn-input-readonly-background-color-focus: var(--syn-readonly-background-color);
217
+ --syn-input-readonly-background-color-hover: var(--syn-readonly-background-color);
217
218
  --syn-input-required-content: "*";
218
219
  --syn-input-required-content-color: var(--syn-input-label-color);
219
220
  --syn-input-required-content-offset: -2px;
@@ -256,6 +257,11 @@
256
257
  --syn-panel-border-width: var(--syn-border-width-small);
257
258
  --syn-progress-indicator-color: var(--syn-color-primary-600);
258
259
  --syn-progress-track-color: var(--syn-color-neutral-200);
260
+ --syn-range-color-inactive: var(--syn-color-neutral-200);
261
+ --syn-range-error-color: var(--syn-color-error-700);
262
+ --syn-range-tick-color: var(--syn-color-neutral-400);
263
+ --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
264
+ --syn-readonly-background-color: var(--syn-color-neutral-300);
259
265
  --syn-spacing-2x-large: 48px;
260
266
  --syn-spacing-2x-small: 4px;
261
267
  --syn-spacing-3x-large: 64px;
package/dist/themes/light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.39.0
2
+ * @synergy-design-system/tokens version 2.41.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -173,6 +173,7 @@
173
173
  --syn-input-border-color-focus: var(--syn-color-neutral-950);
174
174
  --syn-input-border-color-focus-error: var(--syn-color-error-700);
175
175
  --syn-input-border-color-hover: var(--syn-color-neutral-950);
176
+ --syn-input-border-color-offset: var(--syn-panel-background-color);
176
177
  --syn-input-border-radius-large: var(--syn-border-radius-none);
177
178
  --syn-input-border-radius-medium: var(--syn-border-radius-none);
178
179
  --syn-input-border-radius-small: var(--syn-border-radius-none);
@@ -210,10 +211,10 @@
210
211
  --syn-input-placeholder-color: var(--syn-color-neutral-500);
211
212
  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
212
213
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
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);
214
+ --syn-input-readonly-background-color: var(--syn-readonly-background-color);
215
+ --syn-input-readonly-background-color-disabled: var(--syn-readonly-background-color);
216
+ --syn-input-readonly-background-color-focus: var(--syn-readonly-background-color);
217
+ --syn-input-readonly-background-color-hover: var(--syn-readonly-background-color);
217
218
  --syn-input-required-content: "*";
218
219
  --syn-input-required-content-color: var(--syn-input-label-color);
219
220
  --syn-input-required-content-offset: -2px;
@@ -256,6 +257,11 @@
256
257
  --syn-panel-border-width: var(--syn-border-width-small);
257
258
  --syn-progress-indicator-color: var(--syn-color-primary-600);
258
259
  --syn-progress-track-color: var(--syn-color-neutral-200);
260
+ --syn-range-color-inactive: var(--syn-color-neutral-200);
261
+ --syn-range-error-color: var(--syn-color-error-700);
262
+ --syn-range-tick-color: var(--syn-color-neutral-400);
263
+ --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
264
+ --syn-readonly-background-color: var(--syn-color-neutral-300);
259
265
  --syn-spacing-2x-large: 48px;
260
266
  --syn-spacing-2x-small: 4px;
261
267
  --syn-spacing-3x-large: 64px;
package/dist/themes/sick2018_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.39.0
2
+ * @synergy-design-system/tokens version 2.41.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -173,6 +173,7 @@
173
173
  --syn-input-border-color-focus: var(--syn-color-neutral-950);
174
174
  --syn-input-border-color-focus-error: var(--syn-color-error-700);
175
175
  --syn-input-border-color-hover: var(--syn-color-neutral-950);
176
+ --syn-input-border-color-offset: var(--syn-panel-background-color);
176
177
  --syn-input-border-radius-large: var(--syn-border-radius-none);
177
178
  --syn-input-border-radius-medium: var(--syn-border-radius-none);
178
179
  --syn-input-border-radius-small: var(--syn-border-radius-none);
@@ -210,10 +211,10 @@
210
211
  --syn-input-placeholder-color: var(--syn-color-neutral-500);
211
212
  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
212
213
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
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);
214
+ --syn-input-readonly-background-color: var(--syn-readonly-background-color);
215
+ --syn-input-readonly-background-color-disabled: var(--syn-readonly-background-color);
216
+ --syn-input-readonly-background-color-focus: var(--syn-readonly-background-color);
217
+ --syn-input-readonly-background-color-hover: var(--syn-readonly-background-color);
217
218
  --syn-input-required-content: "*";
218
219
  --syn-input-required-content-color: var(--syn-input-label-color);
219
220
  --syn-input-required-content-offset: -2px;
@@ -256,6 +257,11 @@
256
257
  --syn-panel-border-width: var(--syn-border-width-small);
257
258
  --syn-progress-indicator-color: var(--syn-color-primary-600);
258
259
  --syn-progress-track-color: var(--syn-color-neutral-200);
260
+ --syn-range-color-inactive: var(--syn-color-neutral-200);
261
+ --syn-range-error-color: var(--syn-color-error-700);
262
+ --syn-range-tick-color: var(--syn-color-neutral-400);
263
+ --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
264
+ --syn-readonly-background-color: var(--syn-color-neutral-300);
259
265
  --syn-spacing-2x-large: 48px;
260
266
  --syn-spacing-2x-small: 4px;
261
267
  --syn-spacing-3x-large: 64px;
package/dist/themes/sick2018_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.39.0
2
+ * @synergy-design-system/tokens version 2.41.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -173,6 +173,7 @@
173
173
  --syn-input-border-color-focus: var(--syn-color-neutral-950);
174
174
  --syn-input-border-color-focus-error: var(--syn-color-error-700);
175
175
  --syn-input-border-color-hover: var(--syn-color-neutral-950);
176
+ --syn-input-border-color-offset: var(--syn-panel-background-color);
176
177
  --syn-input-border-radius-large: var(--syn-border-radius-none);
177
178
  --syn-input-border-radius-medium: var(--syn-border-radius-none);
178
179
  --syn-input-border-radius-small: var(--syn-border-radius-none);
@@ -210,10 +211,10 @@
210
211
  --syn-input-placeholder-color: var(--syn-color-neutral-500);
211
212
  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
212
213
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
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);
214
+ --syn-input-readonly-background-color: var(--syn-readonly-background-color);
215
+ --syn-input-readonly-background-color-disabled: var(--syn-readonly-background-color);
216
+ --syn-input-readonly-background-color-focus: var(--syn-readonly-background-color);
217
+ --syn-input-readonly-background-color-hover: var(--syn-readonly-background-color);
217
218
  --syn-input-required-content: "*";
218
219
  --syn-input-required-content-color: var(--syn-input-label-color);
219
220
  --syn-input-required-content-offset: -2px;
@@ -256,6 +257,11 @@
256
257
  --syn-panel-border-width: var(--syn-border-width-small);
257
258
  --syn-progress-indicator-color: var(--syn-color-primary-600);
258
259
  --syn-progress-track-color: var(--syn-color-neutral-200);
260
+ --syn-range-color-inactive: var(--syn-color-neutral-200);
261
+ --syn-range-error-color: var(--syn-color-error-700);
262
+ --syn-range-tick-color: var(--syn-color-neutral-400);
263
+ --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
264
+ --syn-readonly-background-color: var(--syn-color-neutral-300);
259
265
  --syn-spacing-2x-large: 48px;
260
266
  --syn-spacing-2x-small: 4px;
261
267
  --syn-spacing-3x-large: 64px;
package/dist/themes/sick2025_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.39.0
2
+ * @synergy-design-system/tokens version 2.41.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -173,6 +173,7 @@
173
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
175
  --syn-input-border-color-hover: var(--syn-color-primary-400);
176
+ --syn-input-border-color-offset: var(--syn-panel-background-color);
176
177
  --syn-input-border-radius-large: var(--syn-border-radius-medium);
177
178
  --syn-input-border-radius-medium: var(--syn-border-radius-medium);
178
179
  --syn-input-border-radius-small: var(--syn-border-radius-medium);
@@ -210,10 +211,10 @@
210
211
  --syn-input-placeholder-color: var(--syn-color-neutral-800);
211
212
  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-800);
212
213
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
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);
214
+ --syn-input-readonly-background-color: var(--syn-readonly-background-color);
215
+ --syn-input-readonly-background-color-disabled: var(--syn-readonly-background-color);
216
+ --syn-input-readonly-background-color-focus: var(--syn-readonly-background-color);
217
+ --syn-input-readonly-background-color-hover: var(--syn-readonly-background-color);
217
218
  --syn-input-required-content: "*";
218
219
  --syn-input-required-content-color: var(--syn-input-label-color);
219
220
  --syn-input-required-content-offset: -2px;
@@ -256,6 +257,11 @@
256
257
  --syn-panel-border-width: var(--syn-border-width-small);
257
258
  --syn-progress-indicator-color: var(--syn-color-primary-500);
258
259
  --syn-progress-track-color: var(--syn-color-neutral-300);
260
+ --syn-range-color-inactive: var(--syn-color-neutral-300);
261
+ --syn-range-error-color: var(--syn-color-error-600);
262
+ --syn-range-tick-color: var(--syn-color-neutral-600);
263
+ --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
264
+ --syn-readonly-background-color: var(--syn-color-neutral-300);
259
265
  --syn-spacing-2x-large: 48px;
260
266
  --syn-spacing-2x-small: 4px;
261
267
  --syn-spacing-3x-large: 64px;
@@ -274,8 +280,8 @@
274
280
  --syn-table-background-color-alternating: var(--syn-color-neutral-200);
275
281
  --syn-table-background-color-header: var(--syn-color-neutral-300);
276
282
  --syn-table-border-color: var(--syn-color-neutral-300);
277
- --syn-table-shadow-end: rgba(0, 0, 0, 0);
278
- --syn-table-shadow-start: rgba(0, 0, 0, 0.8);
283
+ --syn-table-shadow-end: rgba(13, 13, 13, 0);
284
+ --syn-table-shadow-start: rgba(13, 13, 13, 0.8);
279
285
  --syn-text-decoration-default: none;
280
286
  --syn-text-decoration-underline: underline;
281
287
  --syn-toggle-size-large: var(--syn-spacing-large);
@@ -302,15 +308,15 @@
302
308
  --syn-z-index-dropdown: 900; /** Shoelace compatibility DO NOT USE */
303
309
  --syn-z-index-toast: 950; /** Shoelace compatibility DO NOT USE */
304
310
  --syn-z-index-tooltip: 1000; /** Shoelace compatibility DO NOT USE */
305
- --syn-shadow-medium: 0px 1px 2px 0px rgba(0, 0, 0, 0.08), 0px 1px 4px 0px rgba(0, 0, 0, 0.08), 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
306
- --syn-shadow-large: 0px 0px 3px 0px rgba(0, 0, 0, 0.12), 0px 2px 6px 0px rgba(0, 0, 0, 0.12), 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
307
- --syn-shadow-x-large: 0px 1px 4px 0px rgba(0, 0, 0, 0.12), 0px 8px 24px 0px rgba(0, 0, 0, 0.12), 0px 16px 48px 0px rgba(0, 0, 0, 0.16);
308
- --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(0, 0, 0, 0.12), 0px 3px 8px 0px rgba(0, 0, 0, 0.12), 0px 4px 12px 0px rgba(0, 0, 0, 0.16);
309
- --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(0, 0, 0, 0.12), 0px -3px 8px 0px rgba(0, 0, 0, 0.12), 0px -4px 12px 0px rgba(0, 0, 0, 0.16);
310
- --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(0, 0, 0, 0.12), -3px 0px 8px 0px rgba(0, 0, 0, 0.12), -4px 0px 12px 0px rgba(0, 0, 0, 0.16);
311
- --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(0, 0, 0, 0.12), 3px 0px 8px 0px rgba(0, 0, 0, 0.12), 4px 0px 12px 0px rgba(0, 0, 0, 0.16);
312
- --syn-shadow-x-small: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 4px 0px rgba(0, 0, 0, 0.04), 0px 2px 8px 0px rgba(0, 0, 0, 0.04);
313
- --syn-shadow-small: 0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 8px 0px rgba(0, 0, 0, 0.06);
311
+ --syn-shadow-medium: 0px 1px 2px 0px rgba(13, 13, 13, 0.08), 0px 1px 4px 0px rgba(13, 13, 13, 0.08), 0px 2px 8px 0px rgba(13, 13, 13, 0.08);
312
+ --syn-shadow-large: 0px 0px 3px 0px rgba(13, 13, 13, 0.12), 0px 2px 6px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.16);
313
+ --syn-shadow-x-large: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 8px 24px 0px rgba(13, 13, 13, 0.12), 0px 16px 48px 0px rgba(13, 13, 13, 0.16);
314
+ --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.12), 0px 4px 12px 0px rgba(13, 13, 13, 0.16);
315
+ --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(13, 13, 13, 0.12), 0px -3px 8px 0px rgba(13, 13, 13, 0.12), 0px -4px 12px 0px rgba(13, 13, 13, 0.16);
316
+ --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(13, 13, 13, 0.12), -3px 0px 8px 0px rgba(13, 13, 13, 0.12), -4px 0px 12px 0px rgba(13, 13, 13, 0.16);
317
+ --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(13, 13, 13, 0.12), 3px 0px 8px 0px rgba(13, 13, 13, 0.12), 4px 0px 12px 0px rgba(13, 13, 13, 0.16);
318
+ --syn-shadow-x-small: 0px 1px 2px 0px rgba(13, 13, 13, 0.04), 0px 1px 4px 0px rgba(13, 13, 13, 0.04), 0px 2px 8px 0px rgba(13, 13, 13, 0.04);
319
+ --syn-shadow-small: 0px 1px 2px 0px rgba(13, 13, 13, 0.06), 0px 1px 4px 0px rgba(13, 13, 13, 0.06), 0px 2px 8px 0px rgba(13, 13, 13, 0.06);
314
320
  --syn-body-x-small-regular: 400 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
315
321
  --syn-body-x-small-semibold: 600 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
316
322
  --syn-body-x-small-bold: 600 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
package/dist/themes/sick2025_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.39.0
2
+ * @synergy-design-system/tokens version 2.41.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -173,6 +173,7 @@
173
173
  --syn-input-border-color-focus: var(--syn-color-primary-700);
174
174
  --syn-input-border-color-focus-error: var(--syn-color-error-600);
175
175
  --syn-input-border-color-hover: var(--syn-color-primary-700);
176
+ --syn-input-border-color-offset: var(--syn-panel-background-color);
176
177
  --syn-input-border-radius-large: var(--syn-border-radius-medium);
177
178
  --syn-input-border-radius-medium: var(--syn-border-radius-medium);
178
179
  --syn-input-border-radius-small: var(--syn-border-radius-medium);
@@ -210,10 +211,10 @@
210
211
  --syn-input-placeholder-color: var(--syn-color-neutral-700);
211
212
  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-700);
212
213
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
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;
214
+ --syn-input-readonly-background-color: var(--syn-readonly-background-color);
215
+ --syn-input-readonly-background-color-disabled: var(--syn-readonly-background-color);
216
+ --syn-input-readonly-background-color-focus: var(--syn-readonly-background-color);
217
+ --syn-input-readonly-background-color-hover: var(--syn-readonly-background-color);
217
218
  --syn-input-required-content: "*";
218
219
  --syn-input-required-content-color: var(--syn-input-label-color);
219
220
  --syn-input-required-content-offset: -2px;
@@ -256,6 +257,11 @@
256
257
  --syn-panel-border-width: var(--syn-border-width-small);
257
258
  --syn-progress-indicator-color: var(--syn-color-primary-700);
258
259
  --syn-progress-track-color: var(--syn-color-neutral-100);
260
+ --syn-range-color-inactive: var(--syn-color-neutral-100);
261
+ --syn-range-error-color: var(--syn-color-error-600);
262
+ --syn-range-tick-color: var(--syn-color-neutral-500);
263
+ --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
264
+ --syn-readonly-background-color: #e6e1dc;
259
265
  --syn-spacing-2x-large: 48px;
260
266
  --syn-spacing-2x-small: 4px;
261
267
  --syn-spacing-3x-large: 64px;
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.40.0",
60
+ "version": "2.42.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
@@ -944,23 +944,19 @@
944
944
  "readonly-background": {
945
945
  "color": {
946
946
  "type": "color",
947
- "value": "{color.neutral.300}"
947
+ "value": "{readonly.background.color}"
948
948
  },
949
949
  "color-disabled": {
950
950
  "type": "color",
951
- "value": "{color.neutral.300}"
951
+ "value": "{readonly.background.color}"
952
952
  },
953
953
  "color-focus": {
954
954
  "type": "color",
955
- "value": "{color.neutral.300}"
955
+ "value": "{readonly.background.color}"
956
956
  },
957
957
  "color-hover": {
958
958
  "type": "color",
959
- "value": "{color.neutral.300}"
960
- },
961
- "opacity": {
962
- "type": "color",
963
- "value": "rgba(115, 127, 133, 0.70)"
959
+ "value": "{readonly.background.color}"
964
960
  }
965
961
  },
966
962
  "required": {
@@ -998,6 +994,10 @@
998
994
  },
999
995
  "interactive": {
1000
996
  "background": {
997
+ "color-active": {
998
+ "type": "color",
999
+ "value": "{color.neutral.200}"
1000
+ },
1001
1001
  "color-hover": {
1002
1002
  "type": "color",
1003
1003
  "value": "{color.neutral.100}"
@@ -1184,6 +1184,60 @@
1184
1184
  }
1185
1185
  }
1186
1186
  },
1187
+ "range": {
1188
+ "color-inactive": {
1189
+ "type": "color",
1190
+ "value": "{color.neutral.200}"
1191
+ },
1192
+ "color-readonly": {
1193
+ "type": "color",
1194
+ "value": "{input.readonly-background.color}"
1195
+ },
1196
+ "error": {
1197
+ "color": {
1198
+ "type": "color",
1199
+ "value": "{color.error.700}"
1200
+ }
1201
+ },
1202
+ "tick": {
1203
+ "color": {
1204
+ "type": "color",
1205
+ "value": "{color.neutral.400}"
1206
+ }
1207
+ },
1208
+ "track": {
1209
+ "color-active": {
1210
+ "type": "color",
1211
+ "value": "{interactive.emphasis.color}"
1212
+ }
1213
+ }
1214
+ },
1215
+ "readonly": {
1216
+ "background": {
1217
+ "color": {
1218
+ "type": "color",
1219
+ "value": "{color.neutral.300}"
1220
+ }
1221
+ },
1222
+ "border": {
1223
+ "color": {
1224
+ "type": "color",
1225
+ "value": "{typography.color.text}"
1226
+ }
1227
+ },
1228
+ "indicator": {
1229
+ "color": {
1230
+ "type": "color",
1231
+ "value": "{typography.color.text}"
1232
+ }
1233
+ },
1234
+ "opacity": {
1235
+ "color": {
1236
+ "type": "color",
1237
+ "value": "rgba(115, 127, 133, 0.70)"
1238
+ }
1239
+ }
1240
+ },
1187
1241
  "spacing": {
1188
1242
  "2x-large": {
1189
1243
  "type": "sizing",
@@ -1510,6 +1564,20 @@
1510
1564
  "type": "typography",
1511
1565
  "value": "{font-weight.bold} {font-size.large}/1.4 {font.sans}"
1512
1566
  }
1567
+ },
1568
+ "2x-small": {
1569
+ "regular": {
1570
+ "type": "typography",
1571
+ "value": "{font-weight.normal} {font-size.2x-small}/1.4 {font.sans}"
1572
+ },
1573
+ "semibold": {
1574
+ "type": "typography",
1575
+ "value": "{font-weight.semibold} {font-size.2x-small}/1.4 {font.sans}"
1576
+ },
1577
+ "bold": {
1578
+ "type": "typography",
1579
+ "value": "{font-weight.bold} {font-size.2x-small}/1.4 {font.sans}"
1580
+ }
1513
1581
  }
1514
1582
  },
1515
1583
  "heading": {
@@ -1528,6 +1596,10 @@
1528
1596
  "3x-large": {
1529
1597
  "type": "typography",
1530
1598
  "value": "{font-weight.bold} {font-size.3x-large}/1.2 {font.sans}"
1599
+ },
1600
+ "4x-large": {
1601
+ "type": "typography",
1602
+ "value": "{font-weight.bold} 52/1.2 {font.sans}"
1531
1603
  }
1532
1604
  }
1533
1605
  }
package/src/figma-variables/output/sick2018-light.json CHANGED
@@ -944,23 +944,19 @@
944
944
  "readonly-background": {
945
945
  "color": {
946
946
  "type": "color",
947
- "value": "{color.neutral.300}"
947
+ "value": "{readonly.background.color}"
948
948
  },
949
949
  "color-disabled": {
950
950
  "type": "color",
951
- "value": "{color.neutral.300}"
951
+ "value": "{readonly.background.color}"
952
952
  },
953
953
  "color-focus": {
954
954
  "type": "color",
955
- "value": "{color.neutral.300}"
955
+ "value": "{readonly.background.color}"
956
956
  },
957
957
  "color-hover": {
958
958
  "type": "color",
959
- "value": "{color.neutral.300}"
960
- },
961
- "opacity": {
962
- "type": "color",
963
- "value": "rgba(213, 219, 221, 0.70)"
959
+ "value": "{readonly.background.color}"
964
960
  }
965
961
  },
966
962
  "required": {
@@ -998,6 +994,10 @@
998
994
  },
999
995
  "interactive": {
1000
996
  "background": {
997
+ "color-active": {
998
+ "type": "color",
999
+ "value": "{color.neutral.200}"
1000
+ },
1001
1001
  "color-hover": {
1002
1002
  "type": "color",
1003
1003
  "value": "{color.neutral.100}"
@@ -1184,6 +1184,60 @@
1184
1184
  }
1185
1185
  }
1186
1186
  },
1187
+ "range": {
1188
+ "color-inactive": {
1189
+ "type": "color",
1190
+ "value": "{color.neutral.200}"
1191
+ },
1192
+ "color-readonly": {
1193
+ "type": "color",
1194
+ "value": "{input.readonly-background.color}"
1195
+ },
1196
+ "error": {
1197
+ "color": {
1198
+ "type": "color",
1199
+ "value": "{color.error.700}"
1200
+ }
1201
+ },
1202
+ "tick": {
1203
+ "color": {
1204
+ "type": "color",
1205
+ "value": "{color.neutral.400}"
1206
+ }
1207
+ },
1208
+ "track": {
1209
+ "color-active": {
1210
+ "type": "color",
1211
+ "value": "{interactive.emphasis.color}"
1212
+ }
1213
+ }
1214
+ },
1215
+ "readonly": {
1216
+ "background": {
1217
+ "color": {
1218
+ "type": "color",
1219
+ "value": "{color.neutral.300}"
1220
+ }
1221
+ },
1222
+ "border": {
1223
+ "color": {
1224
+ "type": "color",
1225
+ "value": "{typography.color.text}"
1226
+ }
1227
+ },
1228
+ "indicator": {
1229
+ "color": {
1230
+ "type": "color",
1231
+ "value": "{typography.color.text}"
1232
+ }
1233
+ },
1234
+ "opacity": {
1235
+ "color": {
1236
+ "type": "color",
1237
+ "value": "rgba(213, 219, 221, 0.70)"
1238
+ }
1239
+ }
1240
+ },
1187
1241
  "spacing": {
1188
1242
  "2x-large": {
1189
1243
  "type": "sizing",
@@ -1510,6 +1564,20 @@
1510
1564
  "type": "typography",
1511
1565
  "value": "{font-weight.bold} {font-size.large}/1.4 {font.sans}"
1512
1566
  }
1567
+ },
1568
+ "2x-small": {
1569
+ "regular": {
1570
+ "type": "typography",
1571
+ "value": "{font-weight.normal} {font-size.2x-small}/1.4 {font.sans}"
1572
+ },
1573
+ "semibold": {
1574
+ "type": "typography",
1575
+ "value": "{font-weight.semibold} {font-size.2x-small}/1.4 {font.sans}"
1576
+ },
1577
+ "bold": {
1578
+ "type": "typography",
1579
+ "value": "{font-weight.bold} {font-size.2x-small}/1.4 {font.sans}"
1580
+ }
1513
1581
  }
1514
1582
  },
1515
1583
  "heading": {
@@ -1528,6 +1596,10 @@
1528
1596
  "3x-large": {
1529
1597
  "type": "typography",
1530
1598
  "value": "{font-weight.bold} {font-size.3x-large}/1.2 {font.sans}"
1599
+ },
1600
+ "4x-large": {
1601
+ "type": "typography",
1602
+ "value": "{font-weight.bold} 52/1.2 {font.sans}"
1531
1603
  }
1532
1604
  }
1533
1605
  }
package/src/figma-variables/output/sick2025-dark.json CHANGED
@@ -944,23 +944,19 @@
944
944
  "readonly-background": {
945
945
  "color": {
946
946
  "type": "color",
947
- "value": "{color.neutral.300}"
947
+ "value": "{readonly.background.color}"
948
948
  },
949
949
  "color-disabled": {
950
950
  "type": "color",
951
- "value": "{color.neutral.300}"
951
+ "value": "{readonly.background.color}"
952
952
  },
953
953
  "color-focus": {
954
954
  "type": "color",
955
- "value": "{color.neutral.300}"
955
+ "value": "{readonly.background.color}"
956
956
  },
957
957
  "color-hover": {
958
958
  "type": "color",
959
- "value": "{color.neutral.300}"
960
- },
961
- "opacity": {
962
- "type": "color",
963
- "value": "rgba(38, 47, 85, 0.70)"
959
+ "value": "{readonly.background.color}"
964
960
  }
965
961
  },
966
962
  "required": {
@@ -998,6 +994,10 @@
998
994
  },
999
995
  "interactive": {
1000
996
  "background": {
997
+ "color-active": {
998
+ "type": "color",
999
+ "value": "{color.neutral.200}"
1000
+ },
1001
1001
  "color-hover": {
1002
1002
  "type": "color",
1003
1003
  "value": "{color.neutral.100}"
@@ -1184,6 +1184,60 @@
1184
1184
  }
1185
1185
  }
1186
1186
  },
1187
+ "range": {
1188
+ "color-inactive": {
1189
+ "type": "color",
1190
+ "value": "{color.neutral.300}"
1191
+ },
1192
+ "color-readonly": {
1193
+ "type": "color",
1194
+ "value": "{input.readonly-background.color}"
1195
+ },
1196
+ "error": {
1197
+ "color": {
1198
+ "type": "color",
1199
+ "value": "{color.error.600}"
1200
+ }
1201
+ },
1202
+ "tick": {
1203
+ "color": {
1204
+ "type": "color",
1205
+ "value": "{color.neutral.600}"
1206
+ }
1207
+ },
1208
+ "track": {
1209
+ "color-active": {
1210
+ "type": "color",
1211
+ "value": "{interactive.emphasis.color}"
1212
+ }
1213
+ }
1214
+ },
1215
+ "readonly": {
1216
+ "background": {
1217
+ "color": {
1218
+ "type": "color",
1219
+ "value": "{color.neutral.300}"
1220
+ }
1221
+ },
1222
+ "border": {
1223
+ "color": {
1224
+ "type": "color",
1225
+ "value": "{typography.color.text}"
1226
+ }
1227
+ },
1228
+ "indicator": {
1229
+ "color": {
1230
+ "type": "color",
1231
+ "value": "{typography.color.text}"
1232
+ }
1233
+ },
1234
+ "opacity": {
1235
+ "color": {
1236
+ "type": "color",
1237
+ "value": "rgba(38, 47, 85, 0.55)"
1238
+ }
1239
+ }
1240
+ },
1187
1241
  "spacing": {
1188
1242
  "2x-large": {
1189
1243
  "type": "sizing",
@@ -1268,11 +1322,11 @@
1268
1322
  "shadow": {
1269
1323
  "end": {
1270
1324
  "type": "color",
1271
- "value": "rgba(0, 0, 0, 0.00)"
1325
+ "value": "rgba(13, 13, 13, 0.00)"
1272
1326
  },
1273
1327
  "start": {
1274
1328
  "type": "color",
1275
- "value": "rgba(0, 0, 0, 0.80)"
1329
+ "value": "rgba(13, 13, 13, 0.80)"
1276
1330
  }
1277
1331
  }
1278
1332
  },
@@ -1419,39 +1473,39 @@
1419
1473
  "shadow": {
1420
1474
  "medium": {
1421
1475
  "type": "shadow",
1422
- "value": "0px 1px 2px 0px rgba(0, 0, 0, 0.08), 0px 1px 4px 0px rgba(0, 0, 0, 0.08), 0px 2px 8px 0px rgba(0, 0, 0, 0.08)"
1476
+ "value": "0px 1px 2px 0px rgba(13, 13, 13, 0.08), 0px 1px 4px 0px rgba(13, 13, 13, 0.08), 0px 2px 8px 0px rgba(13, 13, 13, 0.08)"
1423
1477
  },
1424
1478
  "large": {
1425
1479
  "type": "shadow",
1426
- "value": "0px 0px 3px 0px rgba(0, 0, 0, 0.12), 0px 2px 6px 0px rgba(0, 0, 0, 0.12), 0px 3px 8px 0px rgba(0, 0, 0, 0.16)"
1480
+ "value": "0px 0px 3px 0px rgba(13, 13, 13, 0.12), 0px 2px 6px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.16)"
1427
1481
  },
1428
1482
  "x-large": {
1429
1483
  "type": "shadow",
1430
- "value": "0px 1px 4px 0px rgba(0, 0, 0, 0.12), 0px 8px 24px 0px rgba(0, 0, 0, 0.12), 0px 16px 48px 0px rgba(0, 0, 0, 0.16)"
1484
+ "value": "0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 8px 24px 0px rgba(13, 13, 13, 0.12), 0px 16px 48px 0px rgba(13, 13, 13, 0.16)"
1431
1485
  },
1432
1486
  "overflow-down": {
1433
1487
  "type": "shadow",
1434
- "value": "0px 1px 4px 0px rgba(0, 0, 0, 0.12), 0px 3px 8px 0px rgba(0, 0, 0, 0.12), 0px 4px 12px 0px rgba(0, 0, 0, 0.16)"
1488
+ "value": "0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.12), 0px 4px 12px 0px rgba(13, 13, 13, 0.16)"
1435
1489
  },
1436
1490
  "overflow-up": {
1437
1491
  "type": "shadow",
1438
- "value": "0px -1px 4px 0px rgba(0, 0, 0, 0.12), 0px -3px 8px 0px rgba(0, 0, 0, 0.12), 0px -4px 12px 0px rgba(0, 0, 0, 0.16)"
1492
+ "value": "0px -1px 4px 0px rgba(13, 13, 13, 0.12), 0px -3px 8px 0px rgba(13, 13, 13, 0.12), 0px -4px 12px 0px rgba(13, 13, 13, 0.16)"
1439
1493
  },
1440
1494
  "overflow-left": {
1441
1495
  "type": "shadow",
1442
- "value": "-1px 0px 4px 0px rgba(0, 0, 0, 0.12), -3px 0px 8px 0px rgba(0, 0, 0, 0.12), -4px 0px 12px 0px rgba(0, 0, 0, 0.16)"
1496
+ "value": "-1px 0px 4px 0px rgba(13, 13, 13, 0.12), -3px 0px 8px 0px rgba(13, 13, 13, 0.12), -4px 0px 12px 0px rgba(13, 13, 13, 0.16)"
1443
1497
  },
1444
1498
  "overflow-right": {
1445
1499
  "type": "shadow",
1446
- "value": "1px 0px 4px 0px rgba(0, 0, 0, 0.12), 3px 0px 8px 0px rgba(0, 0, 0, 0.12), 4px 0px 12px 0px rgba(0, 0, 0, 0.16)"
1500
+ "value": "1px 0px 4px 0px rgba(13, 13, 13, 0.12), 3px 0px 8px 0px rgba(13, 13, 13, 0.12), 4px 0px 12px 0px rgba(13, 13, 13, 0.16)"
1447
1501
  },
1448
1502
  "x-small": {
1449
1503
  "type": "shadow",
1450
- "value": "0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 4px 0px rgba(0, 0, 0, 0.04), 0px 2px 8px 0px rgba(0, 0, 0, 0.04)"
1504
+ "value": "0px 1px 2px 0px rgba(13, 13, 13, 0.04), 0px 1px 4px 0px rgba(13, 13, 13, 0.04), 0px 2px 8px 0px rgba(13, 13, 13, 0.04)"
1451
1505
  },
1452
1506
  "small": {
1453
1507
  "type": "shadow",
1454
- "value": "0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 8px 0px rgba(0, 0, 0, 0.06)"
1508
+ "value": "0px 1px 2px 0px rgba(13, 13, 13, 0.06), 0px 1px 4px 0px rgba(13, 13, 13, 0.06), 0px 2px 8px 0px rgba(13, 13, 13, 0.06)"
1455
1509
  }
1456
1510
  },
1457
1511
  "body": {
@@ -1510,6 +1564,20 @@
1510
1564
  "type": "typography",
1511
1565
  "value": "{font-weight.bold} {font-size.large}/1.4 {font.sans}"
1512
1566
  }
1567
+ },
1568
+ "2x-small": {
1569
+ "regular": {
1570
+ "type": "typography",
1571
+ "value": "{font-weight.normal} {font-size.2x-small}/1.4 {font.sans}"
1572
+ },
1573
+ "semibold": {
1574
+ "type": "typography",
1575
+ "value": "{font-weight.semibold} {font-size.2x-small}/1.4 {font.sans}"
1576
+ },
1577
+ "bold": {
1578
+ "type": "typography",
1579
+ "value": "{font-weight.bold} {font-size.2x-small}/1.4 {font.sans}"
1580
+ }
1513
1581
  }
1514
1582
  },
1515
1583
  "heading": {
@@ -1528,6 +1596,10 @@
1528
1596
  "3x-large": {
1529
1597
  "type": "typography",
1530
1598
  "value": "{font-weight.bold} {font-size.3x-large}/1.2 {font.sans}"
1599
+ },
1600
+ "4x-large": {
1601
+ "type": "typography",
1602
+ "value": "{font-weight.bold} 52/1.2 {font.sans}"
1531
1603
  }
1532
1604
  }
1533
1605
  }
package/src/figma-variables/output/sick2025-light.json CHANGED
@@ -944,23 +944,19 @@
944
944
  "readonly-background": {
945
945
  "color": {
946
946
  "type": "color",
947
- "value": "#e6e1dc"
947
+ "value": "{readonly.background.color}"
948
948
  },
949
949
  "color-disabled": {
950
950
  "type": "color",
951
- "value": "#e6e1dc"
951
+ "value": "{readonly.background.color}"
952
952
  },
953
953
  "color-focus": {
954
954
  "type": "color",
955
- "value": "#e6e1dc"
955
+ "value": "{readonly.background.color}"
956
956
  },
957
957
  "color-hover": {
958
958
  "type": "color",
959
- "value": "#e6e1dc"
960
- },
961
- "opacity": {
962
- "type": "color",
963
- "value": "rgba(230, 225, 220, 0.70)"
959
+ "value": "{readonly.background.color}"
964
960
  }
965
961
  },
966
962
  "required": {
@@ -998,6 +994,10 @@
998
994
  },
999
995
  "interactive": {
1000
996
  "background": {
997
+ "color-active": {
998
+ "type": "color",
999
+ "value": "#ece8e5"
1000
+ },
1001
1001
  "color-hover": {
1002
1002
  "type": "color",
1003
1003
  "value": "#f2f0ed"
@@ -1184,6 +1184,60 @@
1184
1184
  }
1185
1185
  }
1186
1186
  },
1187
+ "range": {
1188
+ "color-inactive": {
1189
+ "type": "color",
1190
+ "value": "{color.neutral.100}"
1191
+ },
1192
+ "color-readonly": {
1193
+ "type": "color",
1194
+ "value": "{input.readonly-background.color}"
1195
+ },
1196
+ "error": {
1197
+ "color": {
1198
+ "type": "color",
1199
+ "value": "{color.error.600}"
1200
+ }
1201
+ },
1202
+ "tick": {
1203
+ "color": {
1204
+ "type": "color",
1205
+ "value": "{color.neutral.500}"
1206
+ }
1207
+ },
1208
+ "track": {
1209
+ "color-active": {
1210
+ "type": "color",
1211
+ "value": "{interactive.emphasis.color}"
1212
+ }
1213
+ }
1214
+ },
1215
+ "readonly": {
1216
+ "background": {
1217
+ "color": {
1218
+ "type": "color",
1219
+ "value": "#e6e1dc"
1220
+ }
1221
+ },
1222
+ "border": {
1223
+ "color": {
1224
+ "type": "color",
1225
+ "value": "{typography.color.text}"
1226
+ }
1227
+ },
1228
+ "indicator": {
1229
+ "color": {
1230
+ "type": "color",
1231
+ "value": "{typography.color.text}"
1232
+ }
1233
+ },
1234
+ "opacity": {
1235
+ "color": {
1236
+ "type": "color",
1237
+ "value": "rgba(230, 225, 220, 0.70)"
1238
+ }
1239
+ }
1240
+ },
1187
1241
  "spacing": {
1188
1242
  "2x-large": {
1189
1243
  "type": "sizing",
@@ -1510,6 +1564,20 @@
1510
1564
  "type": "typography",
1511
1565
  "value": "{font-weight.bold} {font-size.large}/1.4 {font.sans}"
1512
1566
  }
1567
+ },
1568
+ "2x-small": {
1569
+ "regular": {
1570
+ "type": "typography",
1571
+ "value": "{font-weight.normal} {font-size.2x-small}/1.4 {font.sans}"
1572
+ },
1573
+ "semibold": {
1574
+ "type": "typography",
1575
+ "value": "{font-weight.semibold} {font-size.2x-small}/1.4 {font.sans}"
1576
+ },
1577
+ "bold": {
1578
+ "type": "typography",
1579
+ "value": "{font-weight.bold} {font-size.2x-small}/1.4 {font.sans}"
1580
+ }
1513
1581
  }
1514
1582
  },
1515
1583
  "heading": {
@@ -1528,6 +1596,10 @@
1528
1596
  "3x-large": {
1529
1597
  "type": "typography",
1530
1598
  "value": "{font-weight.bold} {font-size.3x-large}/1.2 {font.sans}"
1599
+ },
1600
+ "4x-large": {
1601
+ "type": "typography",
1602
+ "value": "{font-weight.bold} 52/1.2 {font.sans}"
1531
1603
  }
1532
1604
  }
1533
1605
  }