@synergy-design-system/styles 1.9.1 → 2.0.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 (8) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/dist/index.css +9 -9
  3. package/dist/link-list.css +1 -1
  4. package/dist/link.css +2 -2
  5. package/dist/tables/table-cell.css +7 -7
  6. package/dist/tables.css +8 -8
  7. package/dist/typography.css +1 -1
  8. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,31 @@
1
1
  # Changelog
2
2
 
3
+ ## 2.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [#1160](https://github.com/synergy-design-system/synergy-design-system/pull/1160) [`669cbcb`](https://github.com/synergy-design-system/synergy-design-system/commit/669cbcb9cccce72134beac99ac12a2591f3e3c74) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-02-02
8
+
9
+ feat: 💥 Removal of variable fallbacks and token alignment
10
+
11
+ This release removes the compatibility layer that was introduced in Synergy v2 to support misaligned versions between styles and tokens packages.
12
+
13
+ **Key Changes:**
14
+ - **Breaking:** Variable fallbacks removed - all CSS custom property fallbacks have been eliminated to reduce bundle size
15
+ - **Breaking:** Token package alignment - styles now has a `peerDependency` on `@synergy-design-system/tokens@^3.0.0`
16
+ - Improved bundle size due to removal of fallback compatibility layer
17
+
18
+ **Migration Steps:**
19
+ - Ensure you're using the latest version of `@synergy-design-system/tokens` (v3.0.0 or higher)
20
+ - The tokens package is now automatically installed as a peer dependency
21
+
22
+ For detailed migration instructions, please refer to the [breaking changes documentation](https://synergy-design-system.github.io/?path=/docs/packages-styles-breaking-changes--docs).
23
+
24
+ ### Patch Changes
25
+
26
+ - Updated dependencies [[`669cbcb`](https://github.com/synergy-design-system/synergy-design-system/commit/669cbcb9cccce72134beac99ac12a2591f3e3c74)]:
27
+ - @synergy-design-system/tokens@3.0.0
28
+
3
29
  ## 1.9.1
4
30
 
5
31
  ### Patch Changes
package/dist/index.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/styles version 1.9.0
2
+ * @synergy-design-system/styles version 1.9.1
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
  /**
@@ -23,7 +23,7 @@
23
23
  font-family: var(--syn-font-sans);
24
24
  font-size: var(--syn-link-font-size);
25
25
  text-decoration: underline;
26
- text-underline-offset: var(--syn-link-underline-outline, initial);
26
+ text-underline-offset: var(--syn-link-underline-outline);
27
27
  }
28
28
  .syn-link:has(syn-icon) {
29
29
  align-items: center;
@@ -206,7 +206,7 @@ a.syn-link:not([href]) {
206
206
  .syn-table--default td,
207
207
  .syn-table--alternating td,
208
208
  .syn-table--border td {
209
- background-color: var(--syn-table-background-color, var(--syn-color-neutral-0));
209
+ background-color: var(--syn-table-background-color);
210
210
  color: var(--syn-typography-color-text);
211
211
  font: var(--syn-body-small-regular);
212
212
  height: var(--syn-spacing-large);
@@ -216,29 +216,29 @@ a.syn-link:not([href]) {
216
216
  }
217
217
  .syn-table-cell--alternating,
218
218
  .syn-table--alternating tr:nth-child(even) > td {
219
- background-color: var(--syn-table-background-color-alternating, var(--syn-color-neutral-50));
219
+ background-color: var(--syn-table-background-color-alternating);
220
220
  }
221
221
  /* Border */
222
222
  .syn-table-cell--border-start {
223
- border-inline-start: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
223
+ border-inline-start: var(--syn-border-width-small) solid var(--syn-table-border-color);
224
224
  }
225
225
  .syn-table-cell--border-end,
226
226
  .syn-table--border tr > td:not(:last-child) {
227
- border-inline-end: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
227
+ border-inline-end: var(--syn-border-width-small) solid var(--syn-table-border-color);
228
228
  }
229
229
  .syn-table-cell--border-top {
230
- border-top: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
230
+ border-top: var(--syn-border-width-small) solid var(--syn-table-border-color);
231
231
  }
232
232
  .syn-table-cell--border-bottom,
233
233
  .syn-table--border tr:not(:last-child) > td {
234
- border-bottom: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
234
+ border-bottom: var(--syn-border-width-small) solid var(--syn-table-border-color);
235
235
  }
236
236
  /* Header */
237
237
  .syn-table-cell--header,
238
238
  .syn-table--default th,
239
239
  .syn-table--alternating th,
240
240
  .syn-table--border th {
241
- background-color: var(--syn-table-background-color-header, var(--syn-color-neutral-200));
241
+ background-color: var(--syn-table-background-color-header);
242
242
  color: var(--syn-typography-color-text);
243
243
  font: var(--syn-body-small-semibold);
244
244
  height: var(--syn-spacing-large);
package/dist/link-list.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/styles version 1.9.0
2
+ * @synergy-design-system/styles version 1.9.1
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
  /**
package/dist/link.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/styles version 1.9.0
2
+ * @synergy-design-system/styles version 1.9.1
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
  /**
@@ -23,7 +23,7 @@
23
23
  font-family: var(--syn-font-sans);
24
24
  font-size: var(--syn-link-font-size);
25
25
  text-decoration: underline;
26
- text-underline-offset: var(--syn-link-underline-outline, initial);
26
+ text-underline-offset: var(--syn-link-underline-outline);
27
27
  }
28
28
  .syn-link:has(syn-icon) {
29
29
  align-items: center;
package/dist/tables/table-cell.css CHANGED
@@ -16,7 +16,7 @@
16
16
  .syn-table--default td,
17
17
  .syn-table--alternating td,
18
18
  .syn-table--border td {
19
- background-color: var(--syn-table-background-color, var(--syn-color-neutral-0));
19
+ background-color: var(--syn-table-background-color);
20
20
  color: var(--syn-typography-color-text);
21
21
  font: var(--syn-body-small-regular);
22
22
  height: var(--syn-spacing-large);
@@ -27,26 +27,26 @@
27
27
 
28
28
  .syn-table-cell--alternating,
29
29
  .syn-table--alternating tr:nth-child(even) > td {
30
- background-color: var(--syn-table-background-color-alternating, var(--syn-color-neutral-50));
30
+ background-color: var(--syn-table-background-color-alternating);
31
31
  }
32
32
 
33
33
  /* Border */
34
34
  .syn-table-cell--border-start {
35
- border-inline-start: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
35
+ border-inline-start: var(--syn-border-width-small) solid var(--syn-table-border-color);
36
36
  }
37
37
 
38
38
  .syn-table-cell--border-end,
39
39
  .syn-table--border tr > td:not(:last-child) {
40
- border-inline-end: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
40
+ border-inline-end: var(--syn-border-width-small) solid var(--syn-table-border-color);
41
41
  }
42
42
 
43
43
  .syn-table-cell--border-top {
44
- border-top: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
44
+ border-top: var(--syn-border-width-small) solid var(--syn-table-border-color);
45
45
  }
46
46
 
47
47
  .syn-table-cell--border-bottom,
48
48
  .syn-table--border tr:not(:last-child) > td {
49
- border-bottom: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
49
+ border-bottom: var(--syn-border-width-small) solid var(--syn-table-border-color);
50
50
  }
51
51
 
52
52
 
@@ -55,7 +55,7 @@
55
55
  .syn-table--default th,
56
56
  .syn-table--alternating th,
57
57
  .syn-table--border th {
58
- background-color: var(--syn-table-background-color-header, var(--syn-color-neutral-200));
58
+ background-color: var(--syn-table-background-color-header);
59
59
  color: var(--syn-typography-color-text);
60
60
  font: var(--syn-body-small-semibold);
61
61
  height: var(--syn-spacing-large);
package/dist/tables.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/styles version 1.9.0
2
+ * @synergy-design-system/styles version 1.9.1
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
  /**
@@ -38,7 +38,7 @@
38
38
  .syn-table--default td,
39
39
  .syn-table--alternating td,
40
40
  .syn-table--border td {
41
- background-color: var(--syn-table-background-color, var(--syn-color-neutral-0));
41
+ background-color: var(--syn-table-background-color);
42
42
  color: var(--syn-typography-color-text);
43
43
  font: var(--syn-body-small-regular);
44
44
  height: var(--syn-spacing-large);
@@ -48,29 +48,29 @@
48
48
  }
49
49
  .syn-table-cell--alternating,
50
50
  .syn-table--alternating tr:nth-child(even) > td {
51
- background-color: var(--syn-table-background-color-alternating, var(--syn-color-neutral-50));
51
+ background-color: var(--syn-table-background-color-alternating);
52
52
  }
53
53
  /* Border */
54
54
  .syn-table-cell--border-start {
55
- border-inline-start: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
55
+ border-inline-start: var(--syn-border-width-small) solid var(--syn-table-border-color);
56
56
  }
57
57
  .syn-table-cell--border-end,
58
58
  .syn-table--border tr > td:not(:last-child) {
59
- border-inline-end: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
59
+ border-inline-end: var(--syn-border-width-small) solid var(--syn-table-border-color);
60
60
  }
61
61
  .syn-table-cell--border-top {
62
- border-top: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
62
+ border-top: var(--syn-border-width-small) solid var(--syn-table-border-color);
63
63
  }
64
64
  .syn-table-cell--border-bottom,
65
65
  .syn-table--border tr:not(:last-child) > td {
66
- border-bottom: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
66
+ border-bottom: var(--syn-border-width-small) solid var(--syn-table-border-color);
67
67
  }
68
68
  /* Header */
69
69
  .syn-table-cell--header,
70
70
  .syn-table--default th,
71
71
  .syn-table--alternating th,
72
72
  .syn-table--border th {
73
- background-color: var(--syn-table-background-color-header, var(--syn-color-neutral-200));
73
+ background-color: var(--syn-table-background-color-header);
74
74
  color: var(--syn-typography-color-text);
75
75
  font: var(--syn-body-small-semibold);
76
76
  height: var(--syn-spacing-large);
package/dist/typography.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/styles version 1.9.0
2
+ * @synergy-design-system/styles version 1.9.1
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
  /**
package/package.json CHANGED
@@ -29,7 +29,7 @@
29
29
  "directory": "packages/styles"
30
30
  },
31
31
  "type": "module",
32
- "version": "1.9.1",
32
+ "version": "2.0.0",
33
33
  "devDependencies": {
34
34
  "del": "^8.0.1",
35
35
  "eslint": "^9.39.2",
@@ -45,7 +45,7 @@
45
45
  "@synergy-design-system/stylelint-config-syn": "^0.1.0"
46
46
  },
47
47
  "peerDependencies": {
48
- "@synergy-design-system/tokens": "^2.48.2"
48
+ "@synergy-design-system/tokens": "^3.0.0"
49
49
  },
50
50
  "scripts": {
51
51
  "start": "pnpm build",