@synergy-design-system/tokens 2.30.0 → 2.31.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 +7 -0
  2. package/dist/js/index.d.ts +6 -1
  3. package/dist/js/index.js +6 -1
  4. package/dist/scss/_tokens.scss +2 -1
  5. package/dist/themes/dark.css +2 -1
  6. package/dist/themes/light.css +2 -1
  7. package/dist/themes/sick2018_dark.css +2 -1
  8. package/dist/themes/sick2018_light.css +2 -1
  9. package/dist/themes/sick2025_dark.css +8 -7
  10. package/dist/themes/sick2025_light.css +8 -7
  11. package/package.json +1 -1
  12. package/src/figma-variables/output/sick2018-dark.json +6 -0
  13. package/src/figma-variables/output/sick2018-light.json +6 -0
  14. package/src/figma-variables/output/sick2025-dark.json +12 -6
  15. package/src/figma-variables/output/sick2025-light.json +12 -6
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ # [@synergy-design-system/tokens-v2.31.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.30.0...tokens/2.31.0) (2025-10-23)
2
+
3
+
4
+ ### Features
5
+
6
+ * ✨ CD update for syn-breadcrumb ([#1045](https://github.com/synergy-design-system/synergy-design-system/issues/1045)) ([46383b2](https://github.com/synergy-design-system/synergy-design-system/commit/46383b2557d284328cfb49d476a052986cb47d75))
7
+
1
8
  # [@synergy-design-system/tokens-v2.30.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.29.0...tokens/2.30.0) (2025-10-22)
2
9
 
3
10
 
package/dist/js/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.29.0
2
+ * @synergy-design-system/tokens version 2.30.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
@@ -63,6 +63,11 @@ export const SynBorderWidthSmall: string;
63
63
  */
64
64
  export const SynBorderWidthXLarge: string;
65
65
 
66
+ /**
67
+ * Maps to the css variable `--syn-breadcrumb-color`
68
+ */
69
+ export const SynBreadcrumbColor: string;
70
+
66
71
  /**
67
72
  * Maps to the css variable `--syn-button-font-size-large`
68
73
  */
package/dist/js/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.29.0
2
+ * @synergy-design-system/tokens version 2.30.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
@@ -63,6 +63,11 @@ export const SynBorderWidthSmall = 'var(--syn-border-width-small)';
63
63
  */
64
64
  export const SynBorderWidthXLarge = 'var(--syn-border-width-x-large)';
65
65
 
66
+ /**
67
+ * @type {string}
68
+ */
69
+ export const SynBreadcrumbColor = 'var(--syn-breadcrumb-color)';
70
+
66
71
  /**
67
72
  * @type {string}
68
73
  */
package/dist/scss/_tokens.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.29.0
2
+ * @synergy-design-system/tokens version 2.30.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
  $SynBorderRadiusCircle: var(--syn-border-radius-circle) !default;
@@ -14,6 +14,7 @@ $SynBorderWidthMedium: var(--syn-border-width-medium) !default;
14
14
  $SynBorderWidthNone: var(--syn-border-width-none) !default;
15
15
  $SynBorderWidthSmall: var(--syn-border-width-small) !default;
16
16
  $SynBorderWidthXLarge: var(--syn-border-width-x-large) !default;
17
+ $SynBreadcrumbColor: var(--syn-breadcrumb-color) !default;
17
18
  $SynButtonFontSizeLarge: var(--syn-button-font-size-large) !default;
18
19
  $SynButtonFontSizeMedium: var(--syn-button-font-size-medium) !default;
19
20
  $SynButtonFontSizeSmall: var(--syn-button-font-size-small) !default;
package/dist/themes/dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.29.0
2
+ * @synergy-design-system/tokens version 2.30.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -19,6 +19,7 @@
19
19
  --syn-border-width-none: 0px; /** None */
20
20
  --syn-border-width-small: 1px; /** Small */
21
21
  --syn-border-width-x-large: 4px; /** X Large */
22
+ --syn-breadcrumb-color: var(--syn-color-neutral-500);
22
23
  --syn-button-font-size-large: var(--syn-font-size-large);
23
24
  --syn-button-font-size-medium: var(--syn-font-size-medium);
24
25
  --syn-button-font-size-small: var(--syn-font-size-small);
package/dist/themes/light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.29.0
2
+ * @synergy-design-system/tokens version 2.30.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -19,6 +19,7 @@
19
19
  --syn-border-width-none: 0px; /** None */
20
20
  --syn-border-width-small: 1px; /** Small */
21
21
  --syn-border-width-x-large: 4px; /** X Large */
22
+ --syn-breadcrumb-color: var(--syn-color-neutral-500);
22
23
  --syn-button-font-size-large: var(--syn-font-size-large);
23
24
  --syn-button-font-size-medium: var(--syn-font-size-medium);
24
25
  --syn-button-font-size-small: var(--syn-font-size-small);
package/dist/themes/sick2018_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.29.0
2
+ * @synergy-design-system/tokens version 2.30.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -19,6 +19,7 @@
19
19
  --syn-border-width-none: 0px; /** None */
20
20
  --syn-border-width-small: 1px; /** Small */
21
21
  --syn-border-width-x-large: 4px; /** X Large */
22
+ --syn-breadcrumb-color: var(--syn-color-neutral-500);
22
23
  --syn-button-font-size-large: var(--syn-font-size-large);
23
24
  --syn-button-font-size-medium: var(--syn-font-size-medium);
24
25
  --syn-button-font-size-small: var(--syn-font-size-small);
package/dist/themes/sick2018_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.29.0
2
+ * @synergy-design-system/tokens version 2.30.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -19,6 +19,7 @@
19
19
  --syn-border-width-none: 0px; /** None */
20
20
  --syn-border-width-small: 1px; /** Small */
21
21
  --syn-border-width-x-large: 4px; /** X Large */
22
+ --syn-breadcrumb-color: var(--syn-color-neutral-500);
22
23
  --syn-button-font-size-large: var(--syn-font-size-large);
23
24
  --syn-button-font-size-medium: var(--syn-font-size-medium);
24
25
  --syn-button-font-size-small: var(--syn-font-size-small);
package/dist/themes/sick2025_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.29.0
2
+ * @synergy-design-system/tokens version 2.30.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -19,6 +19,7 @@
19
19
  --syn-border-width-none: 0px; /** None */
20
20
  --syn-border-width-small: 1px; /** Small */
21
21
  --syn-border-width-x-large: 4px; /** X Large */
22
+ --syn-breadcrumb-color: var(--syn-typography-color-text);
22
23
  --syn-button-font-size-large: var(--syn-font-size-large);
23
24
  --syn-button-font-size-medium: var(--syn-font-size-medium);
24
25
  --syn-button-font-size-small: var(--syn-font-size-small);
@@ -98,7 +99,7 @@
98
99
  --syn-duration-normal: 250ms;
99
100
  --syn-duration-slow: 500ms;
100
101
  --syn-focus-ring-border-radius: var(--syn-border-radius-small);
101
- --syn-focus-ring-color: var(--syn-color-primary-500);
102
+ --syn-focus-ring-color: var(--syn-color-primary-700);
102
103
  --syn-focus-ring-offset: var(--syn-spacing-3x-small);
103
104
  --syn-focus-ring-style: solid;
104
105
  --syn-focus-ring-width: var(--syn-border-width-medium);
@@ -119,7 +120,7 @@
119
120
  --syn-font-weight-light: 400; /** Shoelace compatibility DO NOT USE */
120
121
  --syn-font-weight-normal: 400;
121
122
  --syn-font-weight-semibold: 600;
122
- --syn-header-border-color: var(--syn-color-neutral-400);
123
+ --syn-header-border-color: var(--syn-color-neutral-300);
123
124
  --syn-input-background-color: var(--syn-color-neutral-50);
124
125
  --syn-input-background-color-disabled: var(--syn-input-background-color);
125
126
  --syn-input-background-color-focus: var(--syn-input-background-color);
@@ -169,10 +170,10 @@
169
170
  --syn-input-readonly-color-disabled: var(--syn-color-neutral-800);
170
171
  --syn-input-readonly-color-focus: var(--syn-color-neutral-950);
171
172
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
172
- --syn-input-readonly-background-color: var(--syn-color-neutral-100);
173
- --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-100);
174
- --syn-input-readonly-background-color-focus: var(--syn-color-neutral-100);
175
- --syn-input-readonly-background-color-hover: var(--syn-color-neutral-100);
173
+ --syn-input-readonly-background-color: var(--syn-color-neutral-200);
174
+ --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-200);
175
+ --syn-input-readonly-background-color-focus: var(--syn-color-neutral-200);
176
+ --syn-input-readonly-background-color-hover: var(--syn-color-neutral-200);
176
177
  --syn-input-required-content: "*";
177
178
  --syn-input-required-content-color: var(--syn-input-label-color);
178
179
  --syn-input-required-content-offset: -2px;
package/dist/themes/sick2025_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.29.0
2
+ * @synergy-design-system/tokens version 2.30.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -19,6 +19,7 @@
19
19
  --syn-border-width-none: 0px; /** None */
20
20
  --syn-border-width-small: 1px; /** Small */
21
21
  --syn-border-width-x-large: 4px; /** X Large */
22
+ --syn-breadcrumb-color: var(--syn-typography-color-text);
22
23
  --syn-button-font-size-large: var(--syn-font-size-large);
23
24
  --syn-button-font-size-medium: var(--syn-font-size-medium);
24
25
  --syn-button-font-size-small: var(--syn-font-size-small);
@@ -98,7 +99,7 @@
98
99
  --syn-duration-normal: 250ms;
99
100
  --syn-duration-slow: 500ms;
100
101
  --syn-focus-ring-border-radius: var(--syn-border-radius-small);
101
- --syn-focus-ring-color: var(--syn-color-primary-700);
102
+ --syn-focus-ring-color: var(--syn-color-primary-500);
102
103
  --syn-focus-ring-offset: var(--syn-spacing-3x-small);
103
104
  --syn-focus-ring-style: solid;
104
105
  --syn-focus-ring-width: var(--syn-border-width-medium);
@@ -119,7 +120,7 @@
119
120
  --syn-font-weight-light: 400; /** Shoelace compatibility DO NOT USE */
120
121
  --syn-font-weight-normal: 400;
121
122
  --syn-font-weight-semibold: 600;
122
- --syn-header-border-color: #d5ccc5;
123
+ --syn-header-border-color: #e6e1dc;
123
124
  --syn-input-background-color: var(--syn-color-neutral-0);
124
125
  --syn-input-background-color-disabled: var(--syn-input-background-color);
125
126
  --syn-input-background-color-focus: var(--syn-input-background-color);
@@ -169,10 +170,10 @@
169
170
  --syn-input-readonly-color-disabled: var(--syn-color-neutral-800);
170
171
  --syn-input-readonly-color-focus: var(--syn-color-neutral-950);
171
172
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
172
- --syn-input-readonly-background-color: #f8f7f6;
173
- --syn-input-readonly-background-color-disabled: #f8f7f6;
174
- --syn-input-readonly-background-color-focus: #f8f7f6;
175
- --syn-input-readonly-background-color-hover: #f8f7f6;
173
+ --syn-input-readonly-background-color: #f2f0ed;
174
+ --syn-input-readonly-background-color-disabled: #f2f0ed;
175
+ --syn-input-readonly-background-color-focus: #f2f0ed;
176
+ --syn-input-readonly-background-color-hover: #f2f0ed;
176
177
  --syn-input-required-content: "*";
177
178
  --syn-input-required-content-color: var(--syn-input-label-color);
178
179
  --syn-input-required-content-offset: -2px;
package/package.json CHANGED
@@ -113,7 +113,7 @@
113
113
  },
114
114
  "type": "module",
115
115
  "types": "./dist/js/index.d.ts",
116
- "version": "2.30.0",
116
+ "version": "2.31.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
@@ -56,6 +56,12 @@
56
56
  "value": "4px"
57
57
  }
58
58
  },
59
+ "breadcrumb": {
60
+ "color": {
61
+ "type": "color",
62
+ "value": "{color.neutral.500}"
63
+ }
64
+ },
59
65
  "button": {
60
66
  "font-size": {
61
67
  "large": {
package/src/figma-variables/output/sick2018-light.json CHANGED
@@ -56,6 +56,12 @@
56
56
  "value": "4px"
57
57
  }
58
58
  },
59
+ "breadcrumb": {
60
+ "color": {
61
+ "type": "color",
62
+ "value": "{color.neutral.500}"
63
+ }
64
+ },
59
65
  "button": {
60
66
  "font-size": {
61
67
  "large": {
package/src/figma-variables/output/sick2025-dark.json CHANGED
@@ -56,6 +56,12 @@
56
56
  "value": "4px"
57
57
  }
58
58
  },
59
+ "breadcrumb": {
60
+ "color": {
61
+ "type": "color",
62
+ "value": "{typography.color.text}"
63
+ }
64
+ },
59
65
  "button": {
60
66
  "font-size": {
61
67
  "large": {
@@ -400,7 +406,7 @@
400
406
  },
401
407
  "color": {
402
408
  "type": "color",
403
- "value": "{color.primary.500}"
409
+ "value": "{color.primary.700}"
404
410
  },
405
411
  "offset": {
406
412
  "type": "sizing",
@@ -498,7 +504,7 @@
498
504
  "border": {
499
505
  "color": {
500
506
  "type": "color",
501
- "value": "{color.neutral.400}"
507
+ "value": "{color.neutral.300}"
502
508
  }
503
509
  }
504
510
  },
@@ -732,19 +738,19 @@
732
738
  "readonly-background": {
733
739
  "color": {
734
740
  "type": "color",
735
- "value": "{color.neutral.100}"
741
+ "value": "{color.neutral.200}"
736
742
  },
737
743
  "color-disabled": {
738
744
  "type": "color",
739
- "value": "{color.neutral.100}"
745
+ "value": "{color.neutral.200}"
740
746
  },
741
747
  "color-focus": {
742
748
  "type": "color",
743
- "value": "{color.neutral.100}"
749
+ "value": "{color.neutral.200}"
744
750
  },
745
751
  "color-hover": {
746
752
  "type": "color",
747
- "value": "{color.neutral.100}"
753
+ "value": "{color.neutral.200}"
748
754
  }
749
755
  },
750
756
  "required": {
package/src/figma-variables/output/sick2025-light.json CHANGED
@@ -56,6 +56,12 @@
56
56
  "value": "4px"
57
57
  }
58
58
  },
59
+ "breadcrumb": {
60
+ "color": {
61
+ "type": "color",
62
+ "value": "{typography.color.text}"
63
+ }
64
+ },
59
65
  "button": {
60
66
  "font-size": {
61
67
  "large": {
@@ -400,7 +406,7 @@
400
406
  },
401
407
  "color": {
402
408
  "type": "color",
403
- "value": "{color.primary.700}"
409
+ "value": "{color.primary.500}"
404
410
  },
405
411
  "offset": {
406
412
  "type": "sizing",
@@ -498,7 +504,7 @@
498
504
  "border": {
499
505
  "color": {
500
506
  "type": "color",
501
- "value": "#d5ccc5"
507
+ "value": "#e6e1dc"
502
508
  }
503
509
  }
504
510
  },
@@ -732,19 +738,19 @@
732
738
  "readonly-background": {
733
739
  "color": {
734
740
  "type": "color",
735
- "value": "#f8f7f6"
741
+ "value": "#f2f0ed"
736
742
  },
737
743
  "color-disabled": {
738
744
  "type": "color",
739
- "value": "#f8f7f6"
745
+ "value": "#f2f0ed"
740
746
  },
741
747
  "color-focus": {
742
748
  "type": "color",
743
- "value": "#f8f7f6"
749
+ "value": "#f2f0ed"
744
750
  },
745
751
  "color-hover": {
746
752
  "type": "color",
747
- "value": "#f8f7f6"
753
+ "value": "#f2f0ed"
748
754
  }
749
755
  },
750
756
  "required": {