@synergy-design-system/styles 1.7.1 → 1.8.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 +14 -0
  2. package/dist/index.css +16 -25
  3. package/dist/link-list.css +1 -1
  4. package/dist/link.css +3 -1
  5. package/dist/tables/table-cell.css +13 -25
  6. package/dist/tables.css +14 -25
  7. package/dist/typography.css +1 -1
  8. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ # [@synergy-design-system/styles-v1.8.0](https://github.com/synergy-design-system/synergy-design-system/compare/styles/1.7.2...styles/1.8.0) (2025-09-23)
2
+
3
+
4
+ ### Features
5
+
6
+ * ✨ CD update for syn-spinner, syn-textarea, syn-link, syn-table ([#1010](https://github.com/synergy-design-system/synergy-design-system/issues/1010)) ([c472bab](https://github.com/synergy-design-system/synergy-design-system/commit/c472bab888e5fb9efd368456e1b8f60953970b63))
7
+
8
+ # [@synergy-design-system/styles-v1.7.2](https://github.com/synergy-design-system/synergy-design-system/compare/styles/1.7.1...styles/1.7.2) (2025-06-20)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * 🐛 Upgrade packages to latest versions ([#905](https://github.com/synergy-design-system/synergy-design-system/issues/905)) ([64de3cd](https://github.com/synergy-design-system/synergy-design-system/commit/64de3cd72f7ab3c7eeb727a9de85d9d980b27055))
14
+
1
15
  # [@synergy-design-system/styles-v1.7.1](https://github.com/synergy-design-system/synergy-design-system/compare/styles/1.7.0...styles/1.7.1) (2025-03-31)
2
16
 
3
17
 
package/dist/index.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/styles version 1.7.0
2
+ * @synergy-design-system/styles version 1.7.2
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
  /**
@@ -23,6 +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
27
  }
27
28
  .syn-link:has(syn-icon) {
28
29
  align-items: center;
@@ -39,6 +40,7 @@
39
40
  color: var(--syn-link-color-active);
40
41
  }
41
42
  .syn-link:not(.syn-link--disabled):focus-visible {
43
+ border-radius: var(--syn-focus-ring-border-radius);
42
44
  outline: var(--syn-focus-ring);
43
45
  outline-offset: var(--syn-focus-ring-offset);
44
46
  }
@@ -204,7 +206,7 @@ a.syn-link:not([href]) {
204
206
  .syn-table--default td,
205
207
  .syn-table--alternating td,
206
208
  .syn-table--border td {
207
- background-color: var(--syn-color-neutral-0);
209
+ background-color: var(--syn-table-background-color, var(--syn-color-neutral-0));
208
210
  color: var(--syn-typography-color-text);
209
211
  font: var(--syn-body-small-regular);
210
212
  height: var(--syn-spacing-large);
@@ -214,29 +216,29 @@ a.syn-link:not([href]) {
214
216
  }
215
217
  .syn-table-cell--alternating,
216
218
  .syn-table--alternating tr:nth-child(even) > td {
217
- background-color: var(--syn-color-neutral-50);
219
+ background-color: var(--syn-table-background-color-alternating, var(--syn-color-neutral-50));
218
220
  }
219
221
  /* Border */
220
222
  .syn-table-cell--border-start {
221
- border-inline-start: var(--syn-border-width-small) solid var(--syn-color-neutral-300);
223
+ border-inline-start: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
222
224
  }
223
225
  .syn-table-cell--border-end,
224
226
  .syn-table--border tr > td:not(:last-child) {
225
- border-inline-end: var(--syn-border-width-small) solid var(--syn-color-neutral-300);
227
+ border-inline-end: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
226
228
  }
227
229
  .syn-table-cell--border-top {
228
- border-top: var(--syn-border-width-small) solid var(--syn-color-neutral-300);
230
+ border-top: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
229
231
  }
230
232
  .syn-table-cell--border-bottom,
231
233
  .syn-table--border tr:not(:last-child) > td {
232
- border-bottom: var(--syn-border-width-small) solid var(--syn-color-neutral-300);
234
+ border-bottom: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
233
235
  }
234
236
  /* Header */
235
237
  .syn-table-cell--header,
236
238
  .syn-table--default th,
237
239
  .syn-table--alternating th,
238
240
  .syn-table--border th {
239
- background-color: var(--syn-color-neutral-200);
241
+ background-color: var(--syn-table-background-color-header, var(--syn-color-neutral-200));
240
242
  color: var(--syn-typography-color-text);
241
243
  font: var(--syn-body-small-semibold);
242
244
  height: var(--syn-spacing-large);
@@ -249,9 +251,8 @@ a.syn-link:not([href]) {
249
251
  .syn-table-cell--shadow-top::after,
250
252
  .syn-table-cell--shadow-start::after,
251
253
  .syn-table-cell--shadow-end::after {
252
- /* Fallback for no color-mix support */
253
- --shadow-start: rgb(49 55 58 / 0%) ;
254
- --shadow-end: rgb(49 55 58 / 15%);
254
+ --shadow-start: var(--syn-table-shadow-start, rgb(49 55 58 / 15%));
255
+ --shadow-end: var(--syn-table-shadow-end, rgb(49 55 58 / 0%));
255
256
 
256
257
  content: '';
257
258
  opacity: 0;
@@ -261,16 +262,6 @@ a.syn-link:not([href]) {
261
262
  transition-property: opacity;
262
263
  transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
263
264
  }
264
- /* I can not use var(--syn-color-neutral-950) here for some reason and therefore `grey`is used. If doing this, the fallback will not be used */
265
- @supports (background: color-mix(in srgb, grey 0%, transparent)) {
266
- .syn-table-cell--shadow-bottom::after,
267
- .syn-table-cell--shadow-top::after,
268
- .syn-table-cell--shadow-start::after,
269
- .syn-table-cell--shadow-end::after {
270
- --shadow-start: color-mix(in srgb, var(--syn-color-neutral-950) 0%, transparent);
271
- --shadow-end: color-mix(in srgb, var(--syn-color-neutral-950) 15%, transparent);
272
- }
273
- }
274
265
  .syn-table-cell--shadow-bottom::after,
275
266
  .syn-table-cell--shadow-top::after {
276
267
  height: var(--syn-spacing-x-small);
@@ -284,23 +275,23 @@ a.syn-link:not([href]) {
284
275
  width: var(--syn-spacing-x-small);
285
276
  }
286
277
  .syn-table-cell--shadow-bottom::after {
287
- background: linear-gradient(0deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
278
+ background: linear-gradient(180deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
288
279
  bottom: calc(var(--syn-spacing-x-small) * -1);
289
280
  }
290
281
  .syn-table-cell--shadow-top::after {
291
- background: linear-gradient(180deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
282
+ background: linear-gradient(0deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
292
283
  top: calc(var(--syn-spacing-x-small) * -1);
293
284
  }
294
285
  .syn-table-cell--shadow-start::after,
295
286
  :dir(rtl) .syn-table-cell--shadow-end::after {
296
- background: linear-gradient(90deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
287
+ background: linear-gradient(270deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
297
288
  left: calc(var(--syn-spacing-x-small) * -1);
298
289
  right: unset;
299
290
  }
300
291
  /* stylelint-disable-next-line no-descending-specificity */
301
292
  .syn-table-cell--shadow-end::after,
302
293
  :dir(rtl) .syn-table-cell--shadow-start::after {
303
- background: linear-gradient(270deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
294
+ background: linear-gradient(90deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
304
295
  left: unset;
305
296
  right: calc(var(--syn-spacing-x-small) * -1);
306
297
  }
package/dist/link-list.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/styles version 1.7.0
2
+ * @synergy-design-system/styles version 1.7.2
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.7.0
2
+ * @synergy-design-system/styles version 1.7.2
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
  /**
@@ -23,6 +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
27
  }
27
28
  .syn-link:has(syn-icon) {
28
29
  align-items: center;
@@ -39,6 +40,7 @@
39
40
  color: var(--syn-link-color-active);
40
41
  }
41
42
  .syn-link:not(.syn-link--disabled):focus-visible {
43
+ border-radius: var(--syn-focus-ring-border-radius);
42
44
  outline: var(--syn-focus-ring);
43
45
  outline-offset: var(--syn-focus-ring-offset);
44
46
  }
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-color-neutral-0);
19
+ background-color: var(--syn-table-background-color, var(--syn-color-neutral-0));
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-color-neutral-50);
30
+ background-color: var(--syn-table-background-color-alternating, var(--syn-color-neutral-50));
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-color-neutral-300);
35
+ border-inline-start: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
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-color-neutral-300);
40
+ border-inline-end: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
41
41
  }
42
42
 
43
43
  .syn-table-cell--border-top {
44
- border-top: var(--syn-border-width-small) solid var(--syn-color-neutral-300);
44
+ border-top: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
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-color-neutral-300);
49
+ border-bottom: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
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-color-neutral-200);
58
+ background-color: var(--syn-table-background-color-header, var(--syn-color-neutral-200));
59
59
  color: var(--syn-typography-color-text);
60
60
  font: var(--syn-body-small-semibold);
61
61
  height: var(--syn-spacing-large);
@@ -69,9 +69,8 @@
69
69
  .syn-table-cell--shadow-top::after,
70
70
  .syn-table-cell--shadow-start::after,
71
71
  .syn-table-cell--shadow-end::after {
72
- /* Fallback for no color-mix support */
73
- --shadow-start: rgb(49 55 58 / 0%) ;
74
- --shadow-end: rgb(49 55 58 / 15%);
72
+ --shadow-start: var(--syn-table-shadow-start, rgb(49 55 58 / 15%));
73
+ --shadow-end: var(--syn-table-shadow-end, rgb(49 55 58 / 0%));
75
74
 
76
75
  content: '';
77
76
  opacity: 0;
@@ -82,17 +81,6 @@
82
81
  transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
83
82
  }
84
83
 
85
- /* I can not use var(--syn-color-neutral-950) here for some reason and therefore `grey`is used. If doing this, the fallback will not be used */
86
- @supports (background: color-mix(in srgb, grey 0%, transparent)) {
87
- .syn-table-cell--shadow-bottom::after,
88
- .syn-table-cell--shadow-top::after,
89
- .syn-table-cell--shadow-start::after,
90
- .syn-table-cell--shadow-end::after {
91
- --shadow-start: color-mix(in srgb, var(--syn-color-neutral-950) 0%, transparent);
92
- --shadow-end: color-mix(in srgb, var(--syn-color-neutral-950) 15%, transparent);
93
- }
94
- }
95
-
96
84
  .syn-table-cell--shadow-bottom::after,
97
85
  .syn-table-cell--shadow-top::after {
98
86
  height: var(--syn-spacing-x-small);
@@ -108,18 +96,18 @@
108
96
  }
109
97
 
110
98
  .syn-table-cell--shadow-bottom::after {
111
- background: linear-gradient(0deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
99
+ background: linear-gradient(180deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
112
100
  bottom: calc(var(--syn-spacing-x-small) * -1);
113
101
  }
114
102
 
115
103
  .syn-table-cell--shadow-top::after {
116
- background: linear-gradient(180deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
104
+ background: linear-gradient(0deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
117
105
  top: calc(var(--syn-spacing-x-small) * -1);
118
106
  }
119
107
 
120
108
  .syn-table-cell--shadow-start::after,
121
109
  :dir(rtl) .syn-table-cell--shadow-end::after {
122
- background: linear-gradient(90deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
110
+ background: linear-gradient(270deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
123
111
  left: calc(var(--syn-spacing-x-small) * -1);
124
112
  right: unset;
125
113
  }
@@ -127,7 +115,7 @@
127
115
  /* stylelint-disable-next-line no-descending-specificity */
128
116
  .syn-table-cell--shadow-end::after,
129
117
  :dir(rtl) .syn-table-cell--shadow-start::after {
130
- background: linear-gradient(270deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
118
+ background: linear-gradient(90deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
131
119
  left: unset;
132
120
  right: calc(var(--syn-spacing-x-small) * -1);
133
121
  }
package/dist/tables.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/styles version 1.7.0
2
+ * @synergy-design-system/styles version 1.7.2
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-color-neutral-0);
41
+ background-color: var(--syn-table-background-color, var(--syn-color-neutral-0));
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-color-neutral-50);
51
+ background-color: var(--syn-table-background-color-alternating, var(--syn-color-neutral-50));
52
52
  }
53
53
  /* Border */
54
54
  .syn-table-cell--border-start {
55
- border-inline-start: var(--syn-border-width-small) solid var(--syn-color-neutral-300);
55
+ border-inline-start: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
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-color-neutral-300);
59
+ border-inline-end: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
60
60
  }
61
61
  .syn-table-cell--border-top {
62
- border-top: var(--syn-border-width-small) solid var(--syn-color-neutral-300);
62
+ border-top: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
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-color-neutral-300);
66
+ border-bottom: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
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-color-neutral-200);
73
+ background-color: var(--syn-table-background-color-header, var(--syn-color-neutral-200));
74
74
  color: var(--syn-typography-color-text);
75
75
  font: var(--syn-body-small-semibold);
76
76
  height: var(--syn-spacing-large);
@@ -83,9 +83,8 @@
83
83
  .syn-table-cell--shadow-top::after,
84
84
  .syn-table-cell--shadow-start::after,
85
85
  .syn-table-cell--shadow-end::after {
86
- /* Fallback for no color-mix support */
87
- --shadow-start: rgb(49 55 58 / 0%) ;
88
- --shadow-end: rgb(49 55 58 / 15%);
86
+ --shadow-start: var(--syn-table-shadow-start, rgb(49 55 58 / 15%));
87
+ --shadow-end: var(--syn-table-shadow-end, rgb(49 55 58 / 0%));
89
88
 
90
89
  content: '';
91
90
  opacity: 0;
@@ -95,16 +94,6 @@
95
94
  transition-property: opacity;
96
95
  transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
97
96
  }
98
- /* I can not use var(--syn-color-neutral-950) here for some reason and therefore `grey`is used. If doing this, the fallback will not be used */
99
- @supports (background: color-mix(in srgb, grey 0%, transparent)) {
100
- .syn-table-cell--shadow-bottom::after,
101
- .syn-table-cell--shadow-top::after,
102
- .syn-table-cell--shadow-start::after,
103
- .syn-table-cell--shadow-end::after {
104
- --shadow-start: color-mix(in srgb, var(--syn-color-neutral-950) 0%, transparent);
105
- --shadow-end: color-mix(in srgb, var(--syn-color-neutral-950) 15%, transparent);
106
- }
107
- }
108
97
  .syn-table-cell--shadow-bottom::after,
109
98
  .syn-table-cell--shadow-top::after {
110
99
  height: var(--syn-spacing-x-small);
@@ -118,23 +107,23 @@
118
107
  width: var(--syn-spacing-x-small);
119
108
  }
120
109
  .syn-table-cell--shadow-bottom::after {
121
- background: linear-gradient(0deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
110
+ background: linear-gradient(180deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
122
111
  bottom: calc(var(--syn-spacing-x-small) * -1);
123
112
  }
124
113
  .syn-table-cell--shadow-top::after {
125
- background: linear-gradient(180deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
114
+ background: linear-gradient(0deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
126
115
  top: calc(var(--syn-spacing-x-small) * -1);
127
116
  }
128
117
  .syn-table-cell--shadow-start::after,
129
118
  :dir(rtl) .syn-table-cell--shadow-end::after {
130
- background: linear-gradient(90deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
119
+ background: linear-gradient(270deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
131
120
  left: calc(var(--syn-spacing-x-small) * -1);
132
121
  right: unset;
133
122
  }
134
123
  /* stylelint-disable-next-line no-descending-specificity */
135
124
  .syn-table-cell--shadow-end::after,
136
125
  :dir(rtl) .syn-table-cell--shadow-start::after {
137
- background: linear-gradient(270deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
126
+ background: linear-gradient(90deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
138
127
  left: unset;
139
128
  right: calc(var(--syn-spacing-x-small) * -1);
140
129
  }
package/dist/typography.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/styles version 1.7.0
2
+ * @synergy-design-system/styles version 1.7.2
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
  /**
package/package.json CHANGED
@@ -80,7 +80,7 @@
80
80
  "directory": "packages/styles"
81
81
  },
82
82
  "type": "module",
83
- "version": "1.7.1",
83
+ "version": "1.8.0",
84
84
  "devDependencies": {
85
85
  "@semantic-release/changelog": "^6.0.3",
86
86
  "@semantic-release/exec": "^6.0.3",
@@ -89,19 +89,19 @@
89
89
  "eslint": "^8.57.1",
90
90
  "globby": "^14.1.0",
91
91
  "ora": "^8.2.0",
92
- "postcss": "^8.5.3",
92
+ "postcss": "^8.5.6",
93
93
  "postcss-cli": "^11.0.1",
94
94
  "postcss-header": "^3.0.3",
95
- "postcss-import": "^16.1.0",
95
+ "postcss-import": "^16.1.1",
96
96
  "prettier": "^3.5.3",
97
97
  "semantic-release": "^19.0.5",
98
98
  "semantic-release-monorepo": "^7.0.8",
99
- "stylelint": "^16.17.0",
99
+ "stylelint": "^16.20.0",
100
100
  "@synergy-design-system/eslint-config-syn": "^0.1.0",
101
101
  "@synergy-design-system/stylelint-config-syn": "^0.1.0"
102
102
  },
103
103
  "peerDependencies": {
104
- "@synergy-design-system/tokens": "^2.18.1"
104
+ "@synergy-design-system/tokens": "^2.25.0"
105
105
  },
106
106
  "scripts": {
107
107
  "start": "pnpm build",