@synergy-design-system/tokens 2.27.0 → 2.29.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 +14 -0
  2. package/dist/js/index.d.ts +16 -1
  3. package/dist/js/index.js +16 -1
  4. package/dist/scss/_tokens.scss +4 -1
  5. package/dist/themes/dark.css +7 -4
  6. package/dist/themes/light.css +7 -4
  7. package/dist/themes/sick2018_dark.css +7 -4
  8. package/dist/themes/sick2018_light.css +7 -4
  9. package/dist/themes/sick2025_dark.css +8 -5
  10. package/dist/themes/sick2025_light.css +6 -3
  11. package/package.json +3 -3
  12. package/src/figma-variables/output/sick2018-dark.json +33 -3
  13. package/src/figma-variables/output/sick2018-light.json +33 -3
  14. package/src/figma-variables/output/sick2025-dark.json +34 -4
  15. package/src/figma-variables/output/sick2025-light.json +32 -2
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ # [@synergy-design-system/tokens-v2.29.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.28.0...tokens/2.29.0) (2025-10-20)
2
+
3
+
4
+ ### Features
5
+
6
+ * ✨ CD update for syn-drawer ([#1043](https://github.com/synergy-design-system/synergy-design-system/issues/1043)) ([214b367](https://github.com/synergy-design-system/synergy-design-system/commit/214b367e8e603e264ec2718772087601f463439e))
7
+
8
+ # [@synergy-design-system/tokens-v2.28.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.27.0...tokens/2.28.0) (2025-10-13)
9
+
10
+
11
+ ### Features
12
+
13
+ * ✨ CD update for syn-progress-ring ([#1033](https://github.com/synergy-design-system/synergy-design-system/issues/1033)) ([ba51374](https://github.com/synergy-design-system/synergy-design-system/commit/ba51374977ad486c2a8020586718740e60da7f51))
14
+
1
15
  # [@synergy-design-system/tokens-v2.27.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.26.1...tokens/2.27.0) (2025-10-02)
2
16
 
3
17
 
package/dist/js/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.26.1
2
+ * @synergy-design-system/tokens version 2.28.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
@@ -988,6 +988,11 @@ export const SynLinkUnderlineOutline: string;
988
988
  */
989
989
  export const SynOpacity50: string;
990
990
 
991
+ /**
992
+ * Maps to the css variable `--syn-overlay-background-blur`
993
+ */
994
+ export const SynOverlayBackgroundBlur: string;
995
+
991
996
  /**
992
997
  * Maps to the css variable `--syn-overlay-background-color`
993
998
  */
@@ -1013,6 +1018,16 @@ export const SynPanelBorderRadius: string;
1013
1018
  */
1014
1019
  export const SynPanelBorderWidth: string;
1015
1020
 
1021
+ /**
1022
+ * Maps to the css variable `--syn-progress-indicator-color`
1023
+ */
1024
+ export const SynProgressIndicatorColor: string;
1025
+
1026
+ /**
1027
+ * Maps to the css variable `--syn-progress-track-color`
1028
+ */
1029
+ export const SynProgressTrackColor: string;
1030
+
1016
1031
  /**
1017
1032
  * Maps to the css variable `--syn-spacing-2x-large`
1018
1033
  */
package/dist/js/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.26.1
2
+ * @synergy-design-system/tokens version 2.28.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
@@ -988,6 +988,11 @@ export const SynLinkUnderlineOutline = 'var(--syn-link-underline-outline)';
988
988
  */
989
989
  export const SynOpacity50 = 'var(--syn-opacity-50)';
990
990
 
991
+ /**
992
+ * @type {string}
993
+ */
994
+ export const SynOverlayBackgroundBlur = 'var(--syn-overlay-background-blur)';
995
+
991
996
  /**
992
997
  * @type {string}
993
998
  */
@@ -1013,6 +1018,16 @@ export const SynPanelBorderRadius = 'var(--syn-panel-border-radius)';
1013
1018
  */
1014
1019
  export const SynPanelBorderWidth = 'var(--syn-panel-border-width)';
1015
1020
 
1021
+ /**
1022
+ * @type {string}
1023
+ */
1024
+ export const SynProgressIndicatorColor = 'var(--syn-progress-indicator-color)';
1025
+
1026
+ /**
1027
+ * @type {string}
1028
+ */
1029
+ export const SynProgressTrackColor = 'var(--syn-progress-track-color)';
1030
+
1016
1031
  /**
1017
1032
  * @type {string}
1018
1033
  */
package/dist/scss/_tokens.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.26.1
2
+ * @synergy-design-system/tokens version 2.28.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
  $SynBorderRadiusCircle: var(--syn-border-radius-circle) !default;
@@ -199,11 +199,14 @@ $SynLinkQuietColorActive: var(--syn-link-quiet-color-active) !default;
199
199
  $SynLinkQuietColorHover: var(--syn-link-quiet-color-hover) !default;
200
200
  $SynLinkUnderlineOutline: var(--syn-link-underline-outline) !default;
201
201
  $SynOpacity50: var(--syn-opacity-50) !default;
202
+ $SynOverlayBackgroundBlur: var(--syn-overlay-background-blur) !default;
202
203
  $SynOverlayBackgroundColor: var(--syn-overlay-background-color) !default;
203
204
  $SynPanelBackgroundColor: var(--syn-panel-background-color) !default;
204
205
  $SynPanelBorderColor: var(--syn-panel-border-color) !default;
205
206
  $SynPanelBorderRadius: var(--syn-panel-border-radius) !default;
206
207
  $SynPanelBorderWidth: var(--syn-panel-border-width) !default;
208
+ $SynProgressIndicatorColor: var(--syn-progress-indicator-color) !default;
209
+ $SynProgressTrackColor: var(--syn-progress-track-color) !default;
207
210
  $SynSpacing2xLarge: var(--syn-spacing-2x-large) !default;
208
211
  $SynSpacing2xSmall: var(--syn-spacing-2x-small) !default;
209
212
  $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.26.1
2
+ * @synergy-design-system/tokens version 2.28.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -138,7 +138,7 @@
138
138
  --syn-input-color-hover: var(--syn-color-neutral-950);
139
139
  --syn-input-disabled-opacity: 0.5;
140
140
  --syn-input-focus-ring-color: var(--syn-color-primary-400);
141
- --syn-input-focus-ring-error: var(--syn-color-error-400);
141
+ --syn-input-focus-ring-error: var(--syn-color-error-600);
142
142
  --syn-input-focus-ring-offset: 0px;
143
143
  --syn-input-font-family: var(--syn-font-sans);
144
144
  --syn-input-font-size-large: var(--syn-font-size-large);
@@ -149,7 +149,7 @@
149
149
  --syn-input-height-medium: var(--syn-spacing-2x-large);
150
150
  --syn-input-height-small: 36px;
151
151
  --syn-input-help-text-color: var(--syn-color-neutral-800);
152
- --syn-input-help-text-color-error: var(--syn-color-error-700);
152
+ --syn-input-help-text-color-error: var(--syn-color-error-600);
153
153
  --syn-input-help-text-font-size-large: var(--syn-font-size-medium);
154
154
  --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
155
155
  --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
@@ -204,11 +204,14 @@
204
204
  --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
205
205
  --syn-link-underline-outline: 7%;
206
206
  --syn-opacity-50: 0.5; /** 50% */
207
- --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
207
+ --syn-overlay-background-blur: 0px;
208
+ --syn-overlay-background-color: rgba(49, 55, 58, 0.5);
208
209
  --syn-panel-background-color: var(--syn-color-neutral-0);
209
210
  --syn-panel-border-color: var(--syn-color-neutral-300);
210
211
  --syn-panel-border-radius: var(--syn-border-radius-medium);
211
212
  --syn-panel-border-width: var(--syn-border-width-small);
213
+ --syn-progress-indicator-color: var(--syn-color-primary-600);
214
+ --syn-progress-track-color: var(--syn-color-neutral-200);
212
215
  --syn-spacing-2x-large: 48px;
213
216
  --syn-spacing-2x-small: 4px;
214
217
  --syn-spacing-3x-large: 64px;
package/dist/themes/light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.26.1
2
+ * @synergy-design-system/tokens version 2.28.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -138,7 +138,7 @@
138
138
  --syn-input-color-hover: var(--syn-color-neutral-950);
139
139
  --syn-input-disabled-opacity: 0.5;
140
140
  --syn-input-focus-ring-color: var(--syn-color-primary-400);
141
- --syn-input-focus-ring-error: var(--syn-color-error-400);
141
+ --syn-input-focus-ring-error: var(--syn-color-error-600);
142
142
  --syn-input-focus-ring-offset: 0px;
143
143
  --syn-input-font-family: var(--syn-font-sans);
144
144
  --syn-input-font-size-large: var(--syn-font-size-large);
@@ -149,7 +149,7 @@
149
149
  --syn-input-height-medium: var(--syn-spacing-2x-large);
150
150
  --syn-input-height-small: 36px;
151
151
  --syn-input-help-text-color: var(--syn-color-neutral-800);
152
- --syn-input-help-text-color-error: var(--syn-color-error-700);
152
+ --syn-input-help-text-color-error: var(--syn-color-error-600);
153
153
  --syn-input-help-text-font-size-large: var(--syn-font-size-medium);
154
154
  --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
155
155
  --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
@@ -204,11 +204,14 @@
204
204
  --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
205
205
  --syn-link-underline-outline: 7%;
206
206
  --syn-opacity-50: 0.5; /** 50% */
207
- --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
207
+ --syn-overlay-background-blur: 0px;
208
+ --syn-overlay-background-color: rgba(49, 55, 58, 0.5);
208
209
  --syn-panel-background-color: var(--syn-color-neutral-0);
209
210
  --syn-panel-border-color: var(--syn-color-neutral-300);
210
211
  --syn-panel-border-radius: var(--syn-border-radius-medium);
211
212
  --syn-panel-border-width: var(--syn-border-width-small);
213
+ --syn-progress-indicator-color: var(--syn-color-primary-600);
214
+ --syn-progress-track-color: var(--syn-color-neutral-200);
212
215
  --syn-spacing-2x-large: 48px;
213
216
  --syn-spacing-2x-small: 4px;
214
217
  --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.26.1
2
+ * @synergy-design-system/tokens version 2.28.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -138,7 +138,7 @@
138
138
  --syn-input-color-hover: var(--syn-color-neutral-950);
139
139
  --syn-input-disabled-opacity: 0.5;
140
140
  --syn-input-focus-ring-color: var(--syn-color-primary-400);
141
- --syn-input-focus-ring-error: var(--syn-color-error-400);
141
+ --syn-input-focus-ring-error: var(--syn-color-error-600);
142
142
  --syn-input-focus-ring-offset: 0px;
143
143
  --syn-input-font-family: var(--syn-font-sans);
144
144
  --syn-input-font-size-large: var(--syn-font-size-large);
@@ -149,7 +149,7 @@
149
149
  --syn-input-height-medium: var(--syn-spacing-2x-large);
150
150
  --syn-input-height-small: 36px;
151
151
  --syn-input-help-text-color: var(--syn-color-neutral-800);
152
- --syn-input-help-text-color-error: var(--syn-color-error-700);
152
+ --syn-input-help-text-color-error: var(--syn-color-error-600);
153
153
  --syn-input-help-text-font-size-large: var(--syn-font-size-medium);
154
154
  --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
155
155
  --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
@@ -204,11 +204,14 @@
204
204
  --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
205
205
  --syn-link-underline-outline: 7%;
206
206
  --syn-opacity-50: 0.5; /** 50% */
207
- --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
207
+ --syn-overlay-background-blur: 0px;
208
+ --syn-overlay-background-color: rgba(49, 55, 58, 0.5);
208
209
  --syn-panel-background-color: var(--syn-color-neutral-0);
209
210
  --syn-panel-border-color: var(--syn-color-neutral-300);
210
211
  --syn-panel-border-radius: var(--syn-border-radius-medium);
211
212
  --syn-panel-border-width: var(--syn-border-width-small);
213
+ --syn-progress-indicator-color: var(--syn-color-primary-600);
214
+ --syn-progress-track-color: var(--syn-color-neutral-200);
212
215
  --syn-spacing-2x-large: 48px;
213
216
  --syn-spacing-2x-small: 4px;
214
217
  --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.26.1
2
+ * @synergy-design-system/tokens version 2.28.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -138,7 +138,7 @@
138
138
  --syn-input-color-hover: var(--syn-color-neutral-950);
139
139
  --syn-input-disabled-opacity: 0.5;
140
140
  --syn-input-focus-ring-color: var(--syn-color-primary-400);
141
- --syn-input-focus-ring-error: var(--syn-color-error-400);
141
+ --syn-input-focus-ring-error: var(--syn-color-error-600);
142
142
  --syn-input-focus-ring-offset: 0px;
143
143
  --syn-input-font-family: var(--syn-font-sans);
144
144
  --syn-input-font-size-large: var(--syn-font-size-large);
@@ -149,7 +149,7 @@
149
149
  --syn-input-height-medium: var(--syn-spacing-2x-large);
150
150
  --syn-input-height-small: 36px;
151
151
  --syn-input-help-text-color: var(--syn-color-neutral-800);
152
- --syn-input-help-text-color-error: var(--syn-color-error-700);
152
+ --syn-input-help-text-color-error: var(--syn-color-error-600);
153
153
  --syn-input-help-text-font-size-large: var(--syn-font-size-medium);
154
154
  --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
155
155
  --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
@@ -204,11 +204,14 @@
204
204
  --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
205
205
  --syn-link-underline-outline: 7%;
206
206
  --syn-opacity-50: 0.5; /** 50% */
207
- --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
207
+ --syn-overlay-background-blur: 0px;
208
+ --syn-overlay-background-color: rgba(49, 55, 58, 0.5);
208
209
  --syn-panel-background-color: var(--syn-color-neutral-0);
209
210
  --syn-panel-border-color: var(--syn-color-neutral-300);
210
211
  --syn-panel-border-radius: var(--syn-border-radius-medium);
211
212
  --syn-panel-border-width: var(--syn-border-width-small);
213
+ --syn-progress-indicator-color: var(--syn-color-primary-600);
214
+ --syn-progress-track-color: var(--syn-color-neutral-200);
212
215
  --syn-spacing-2x-large: 48px;
213
216
  --syn-spacing-2x-small: 4px;
214
217
  --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.26.1
2
+ * @synergy-design-system/tokens version 2.28.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -45,7 +45,7 @@
45
45
  --syn-color-error-900: #ffe3e4;
46
46
  --syn-color-error-950: #fff1f1;
47
47
  --syn-color-neutral-0: #000414;
48
- --syn-color-neutral-50: #00061f;
48
+ --syn-color-neutral-50: #000724;
49
49
  --syn-color-neutral-100: #000a37;
50
50
  --syn-color-neutral-200: #141e47;
51
51
  --syn-color-neutral-300: #262f55;
@@ -56,7 +56,7 @@
56
56
  --syn-color-neutral-800: #9298b6;
57
57
  --syn-color-neutral-900: #adb2c8;
58
58
  --syn-color-neutral-950: #c8ccdb;
59
- --syn-color-neutral-1000: #e3e5ed;
59
+ --syn-color-neutral-1000: #e9ebf1;
60
60
  --syn-color-primary-50: #0e275d;
61
61
  --syn-color-primary-100: #0d3f9b;
62
62
  --syn-color-primary-200: #0845c5;
@@ -138,7 +138,7 @@
138
138
  --syn-input-color-hover: var(--syn-color-neutral-1000);
139
139
  --syn-input-disabled-opacity: 0.5;
140
140
  --syn-input-focus-ring-color: var(--syn-color-primary-700);
141
- --syn-input-focus-ring-error: var(--syn-color-error-400);
141
+ --syn-input-focus-ring-error: var(--syn-color-error-600);
142
142
  --syn-input-focus-ring-offset: 0px;
143
143
  --syn-input-font-family: var(--syn-font-sans);
144
144
  --syn-input-font-size-large: var(--syn-font-size-large);
@@ -204,11 +204,14 @@
204
204
  --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
205
205
  --syn-link-underline-outline: 25%;
206
206
  --syn-opacity-50: 0.5; /** 50% */
207
- --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
207
+ --syn-overlay-background-blur: 16px;
208
+ --syn-overlay-background-color: rgba(0, 10, 55, 0.6);
208
209
  --syn-panel-background-color: var(--syn-color-neutral-50);
209
210
  --syn-panel-border-color: var(--syn-color-neutral-300);
210
211
  --syn-panel-border-radius: var(--syn-border-radius-medium);
211
212
  --syn-panel-border-width: var(--syn-border-width-small);
213
+ --syn-progress-indicator-color: var(--syn-color-primary-500);
214
+ --syn-progress-track-color: var(--syn-color-neutral-300);
212
215
  --syn-spacing-2x-large: 48px;
213
216
  --syn-spacing-2x-small: 4px;
214
217
  --syn-spacing-3x-large: 64px;
package/dist/themes/sick2025_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.26.1
2
+ * @synergy-design-system/tokens version 2.28.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -138,7 +138,7 @@
138
138
  --syn-input-color-hover: var(--syn-color-neutral-950);
139
139
  --syn-input-disabled-opacity: 0.5;
140
140
  --syn-input-focus-ring-color: var(--syn-color-primary-500);
141
- --syn-input-focus-ring-error: var(--syn-color-error-500);
141
+ --syn-input-focus-ring-error: var(--syn-color-error-600);
142
142
  --syn-input-focus-ring-offset: 0px;
143
143
  --syn-input-font-family: var(--syn-font-sans);
144
144
  --syn-input-font-size-large: var(--syn-font-size-large);
@@ -204,11 +204,14 @@
204
204
  --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
205
205
  --syn-link-underline-outline: 25%;
206
206
  --syn-opacity-50: 0.5; /** 50% */
207
- --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
207
+ --syn-overlay-background-blur: 16px;
208
+ --syn-overlay-background-color: rgba(0, 10, 55, 0.3);
208
209
  --syn-panel-background-color: var(--syn-color-neutral-0);
209
210
  --syn-panel-border-color: #e6e1dc;
210
211
  --syn-panel-border-radius: var(--syn-border-radius-medium);
211
212
  --syn-panel-border-width: var(--syn-border-width-small);
213
+ --syn-progress-indicator-color: var(--syn-color-primary-700);
214
+ --syn-progress-track-color: var(--syn-color-neutral-100);
212
215
  --syn-spacing-2x-large: 48px;
213
216
  --syn-spacing-2x-small: 4px;
214
217
  --syn-spacing-3x-large: 64px;
package/package.json CHANGED
@@ -25,8 +25,8 @@
25
25
  "style-dictionary": "^5.0.1",
26
26
  "stylelint": "^16.23.0",
27
27
  "typescript": "^5.8.3",
28
- "@synergy-design-system/stylelint-config-syn": "0.1.0",
29
- "@synergy-design-system/eslint-config-syn": "0.1.0"
28
+ "@synergy-design-system/eslint-config-syn": "0.1.0",
29
+ "@synergy-design-system/stylelint-config-syn": "0.1.0"
30
30
  },
31
31
  "exports": {
32
32
  ".": {
@@ -113,7 +113,7 @@
113
113
  },
114
114
  "type": "module",
115
115
  "types": "./dist/js/index.d.ts",
116
- "version": "2.27.0",
116
+ "version": "2.29.0",
117
117
  "scripts": {
118
118
  "build": "pnpm clean && node scripts/build.js",
119
119
  "build:all": "dotenvx -q run pnpm build:_all",
package/src/figma-variables/output/sick2018-dark.json CHANGED
@@ -534,6 +534,10 @@
534
534
  "type": "color",
535
535
  "value": "{color.neutral.950}"
536
536
  },
537
+ "color-offset": {
538
+ "type": "color",
539
+ "value": "{panel.background.color}"
540
+ },
537
541
  "radius-large": {
538
542
  "type": "sizing",
539
543
  "value": "{border-radius.none}"
@@ -578,7 +582,7 @@
578
582
  },
579
583
  "error": {
580
584
  "type": "color",
581
- "value": "{color.error.400}"
585
+ "value": "{color.error.600}"
582
586
  },
583
587
  "offset": {
584
588
  "type": "sizing",
@@ -628,7 +632,7 @@
628
632
  },
629
633
  "color-error": {
630
634
  "type": "color",
631
- "value": "{color.error.700}"
635
+ "value": "{color.error.600}"
632
636
  },
633
637
  "font-size": {
634
638
  "large": {
@@ -898,9 +902,13 @@
898
902
  },
899
903
  "overlay": {
900
904
  "background": {
905
+ "blur": {
906
+ "type": "sizing",
907
+ "value": "0px"
908
+ },
901
909
  "color": {
902
910
  "type": "color",
903
- "value": "rgba(0, 0, 0, 0.50)"
911
+ "value": "rgba(49, 55, 58, 0.50)"
904
912
  }
905
913
  }
906
914
  },
@@ -926,6 +934,20 @@
926
934
  }
927
935
  }
928
936
  },
937
+ "progress": {
938
+ "indicator": {
939
+ "color": {
940
+ "type": "color",
941
+ "value": "{color.primary.600}"
942
+ }
943
+ },
944
+ "track": {
945
+ "color": {
946
+ "type": "color",
947
+ "value": "{color.neutral.200}"
948
+ }
949
+ }
950
+ },
929
951
  "spacing": {
930
952
  "2x-large": {
931
953
  "type": "sizing",
@@ -1120,6 +1142,14 @@
1120
1142
  "text-inverted": {
1121
1143
  "type": "color",
1122
1144
  "value": "{color.neutral.0}"
1145
+ },
1146
+ "text-quiet": {
1147
+ "type": "color",
1148
+ "value": "{color.neutral.800}"
1149
+ },
1150
+ "text-quiet-inverted": {
1151
+ "type": "color",
1152
+ "value": "{color.neutral.200}"
1123
1153
  }
1124
1154
  }
1125
1155
  },
package/src/figma-variables/output/sick2018-light.json CHANGED
@@ -534,6 +534,10 @@
534
534
  "type": "color",
535
535
  "value": "{color.neutral.950}"
536
536
  },
537
+ "color-offset": {
538
+ "type": "color",
539
+ "value": "{panel.background.color}"
540
+ },
537
541
  "radius-large": {
538
542
  "type": "sizing",
539
543
  "value": "{border-radius.none}"
@@ -578,7 +582,7 @@
578
582
  },
579
583
  "error": {
580
584
  "type": "color",
581
- "value": "{color.error.400}"
585
+ "value": "{color.error.600}"
582
586
  },
583
587
  "offset": {
584
588
  "type": "sizing",
@@ -628,7 +632,7 @@
628
632
  },
629
633
  "color-error": {
630
634
  "type": "color",
631
- "value": "{color.error.700}"
635
+ "value": "{color.error.600}"
632
636
  },
633
637
  "font-size": {
634
638
  "large": {
@@ -898,9 +902,13 @@
898
902
  },
899
903
  "overlay": {
900
904
  "background": {
905
+ "blur": {
906
+ "type": "sizing",
907
+ "value": "0px"
908
+ },
901
909
  "color": {
902
910
  "type": "color",
903
- "value": "rgba(0, 0, 0, 0.50)"
911
+ "value": "rgba(49, 55, 58, 0.50)"
904
912
  }
905
913
  }
906
914
  },
@@ -926,6 +934,20 @@
926
934
  }
927
935
  }
928
936
  },
937
+ "progress": {
938
+ "indicator": {
939
+ "color": {
940
+ "type": "color",
941
+ "value": "{color.primary.600}"
942
+ }
943
+ },
944
+ "track": {
945
+ "color": {
946
+ "type": "color",
947
+ "value": "{color.neutral.200}"
948
+ }
949
+ }
950
+ },
929
951
  "spacing": {
930
952
  "2x-large": {
931
953
  "type": "sizing",
@@ -1120,6 +1142,14 @@
1120
1142
  "text-inverted": {
1121
1143
  "type": "color",
1122
1144
  "value": "{color.neutral.0}"
1145
+ },
1146
+ "text-quiet": {
1147
+ "type": "color",
1148
+ "value": "{color.neutral.800}"
1149
+ },
1150
+ "text-quiet-inverted": {
1151
+ "type": "color",
1152
+ "value": "{color.neutral.200}"
1123
1153
  }
1124
1154
  }
1125
1155
  },
package/src/figma-variables/output/sick2025-dark.json CHANGED
@@ -172,7 +172,7 @@
172
172
  },
173
173
  "50": {
174
174
  "type": "color",
175
- "value": "#00061f"
175
+ "value": "#000724"
176
176
  },
177
177
  "100": {
178
178
  "type": "color",
@@ -216,7 +216,7 @@
216
216
  },
217
217
  "1000": {
218
218
  "type": "color",
219
- "value": "#e3e5ed"
219
+ "value": "#e9ebf1"
220
220
  }
221
221
  },
222
222
  "primary": {
@@ -534,6 +534,10 @@
534
534
  "type": "color",
535
535
  "value": "{color.primary.500}"
536
536
  },
537
+ "color-offset": {
538
+ "type": "color",
539
+ "value": "{panel.background.color}"
540
+ },
537
541
  "radius-large": {
538
542
  "type": "sizing",
539
543
  "value": "{border-radius.medium}"
@@ -578,7 +582,7 @@
578
582
  },
579
583
  "error": {
580
584
  "type": "color",
581
- "value": "{color.error.400}"
585
+ "value": "{color.error.600}"
582
586
  },
583
587
  "offset": {
584
588
  "type": "sizing",
@@ -898,9 +902,13 @@
898
902
  },
899
903
  "overlay": {
900
904
  "background": {
905
+ "blur": {
906
+ "type": "sizing",
907
+ "value": "16px"
908
+ },
901
909
  "color": {
902
910
  "type": "color",
903
- "value": "rgba(0, 0, 0, 0.50)"
911
+ "value": "rgba(0, 10, 55, 0.60)"
904
912
  }
905
913
  }
906
914
  },
@@ -926,6 +934,20 @@
926
934
  }
927
935
  }
928
936
  },
937
+ "progress": {
938
+ "indicator": {
939
+ "color": {
940
+ "type": "color",
941
+ "value": "{color.primary.500}"
942
+ }
943
+ },
944
+ "track": {
945
+ "color": {
946
+ "type": "color",
947
+ "value": "{color.neutral.300}"
948
+ }
949
+ }
950
+ },
929
951
  "spacing": {
930
952
  "2x-large": {
931
953
  "type": "sizing",
@@ -1120,6 +1142,14 @@
1120
1142
  "text-inverted": {
1121
1143
  "type": "color",
1122
1144
  "value": "{color.neutral.50}"
1145
+ },
1146
+ "text-quiet": {
1147
+ "type": "color",
1148
+ "value": "{color.neutral.800}"
1149
+ },
1150
+ "text-quiet-inverted": {
1151
+ "type": "color",
1152
+ "value": "{color.neutral.200}"
1123
1153
  }
1124
1154
  }
1125
1155
  },
package/src/figma-variables/output/sick2025-light.json CHANGED
@@ -534,6 +534,10 @@
534
534
  "type": "color",
535
535
  "value": "{color.primary.700}"
536
536
  },
537
+ "color-offset": {
538
+ "type": "color",
539
+ "value": "{panel.background.color}"
540
+ },
537
541
  "radius-large": {
538
542
  "type": "sizing",
539
543
  "value": "{border-radius.medium}"
@@ -578,7 +582,7 @@
578
582
  },
579
583
  "error": {
580
584
  "type": "color",
581
- "value": "{color.error.500}"
585
+ "value": "{color.error.600}"
582
586
  },
583
587
  "offset": {
584
588
  "type": "sizing",
@@ -898,9 +902,13 @@
898
902
  },
899
903
  "overlay": {
900
904
  "background": {
905
+ "blur": {
906
+ "type": "sizing",
907
+ "value": "16px"
908
+ },
901
909
  "color": {
902
910
  "type": "color",
903
- "value": "rgba(0, 0, 0, 0.50)"
911
+ "value": "rgba(0, 10, 55, 0.30)"
904
912
  }
905
913
  }
906
914
  },
@@ -926,6 +934,20 @@
926
934
  }
927
935
  }
928
936
  },
937
+ "progress": {
938
+ "indicator": {
939
+ "color": {
940
+ "type": "color",
941
+ "value": "{color.primary.700}"
942
+ }
943
+ },
944
+ "track": {
945
+ "color": {
946
+ "type": "color",
947
+ "value": "{color.neutral.100}"
948
+ }
949
+ }
950
+ },
929
951
  "spacing": {
930
952
  "2x-large": {
931
953
  "type": "sizing",
@@ -1120,6 +1142,14 @@
1120
1142
  "text-inverted": {
1121
1143
  "type": "color",
1122
1144
  "value": "{color.neutral.0}"
1145
+ },
1146
+ "text-quiet": {
1147
+ "type": "color",
1148
+ "value": "{color.neutral.700}"
1149
+ },
1150
+ "text-quiet-inverted": {
1151
+ "type": "color",
1152
+ "value": "{color.neutral.300}"
1123
1153
  }
1124
1154
  }
1125
1155
  },