@synergy-design-system/metadata 3.1.0 → 3.2.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 (46) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/data/core/component/component:syn-icon-button.json +0 -5
  3. package/data/core/setup/setup:angular-components-module.json +1 -1
  4. package/data/core/setup/setup:angular-forms-module.json +1 -1
  5. package/data/core/setup/setup:angular-package.json +2 -2
  6. package/data/core/setup/setup:angular-validators-module.json +1 -1
  7. package/data/core/setup/setup:components-package.json +2 -2
  8. package/data/core/setup/setup:react-package.json +2 -2
  9. package/data/core/setup/setup:tokens-package.json +2 -2
  10. package/data/core/setup/setup:vue-package.json +2 -2
  11. package/data/core/token/token:tokens-figma-variables-sick2018-dark-json.json +1 -1
  12. package/data/core/token/token:tokens-figma-variables-sick2018-light-json.json +1 -1
  13. package/data/core/token/token:tokens-figma-variables-sick2025-dark-json.json +1 -1
  14. package/data/core/token/token:tokens-figma-variables-sick2025-light-json.json +1 -1
  15. package/data/core/token/token:tokens-js-index-d-ts.json +1 -1
  16. package/data/core/token/token:tokens-js-index-js.json +1 -1
  17. package/data/core/token/token:tokens-scss-tokens-scss.json +1 -1
  18. package/data/core/token/token:tokens-themes-sick2018-dark-css.json +1 -1
  19. package/data/core/token/token:tokens-themes-sick2018-light-css.json +1 -1
  20. package/data/core/token/token:tokens-themes-sick2025-dark-css.json +1 -1
  21. package/data/core/token/token:tokens-themes-sick2025-light-css.json +1 -1
  22. package/data/index.json +2 -2
  23. package/data/layers/examples/component/component:syn-icon-button.md +72 -43
  24. package/data/layers/full/component/component:syn-icon-button/components/icon-button.component.ts +10 -10
  25. package/data/layers/full/component/component:syn-icon-button/components/icon-button.styles.ts +78 -19
  26. package/data/layers/full/component/component:syn-icon-button/components/icon-button.ts +0 -1
  27. package/data/layers/full/setup/setup:angular-package/angular/CHANGELOG.md +8 -0
  28. package/data/layers/full/setup/setup:angular-package/angular/package.json +1 -1
  29. package/data/layers/full/setup/setup:components-package/components/CHANGELOG.md +13 -0
  30. package/data/layers/full/setup/setup:components-package/components/package.json +1 -1
  31. package/data/layers/full/setup/setup:react-package/react/CHANGELOG.md +8 -0
  32. package/data/layers/full/setup/setup:react-package/react/package.json +1 -1
  33. package/data/layers/full/setup/setup:tokens-package/tokens/CHANGELOG.md +2 -0
  34. package/data/layers/full/setup/setup:tokens-package/tokens/package.json +1 -1
  35. package/data/layers/full/setup/setup:vue-package/vue/CHANGELOG.md +8 -0
  36. package/data/layers/full/setup/setup:vue-package/vue/package.json +1 -1
  37. package/data/layers/full/tokens/js/index.d.ts +1 -1
  38. package/data/layers/full/tokens/js/index.js +1 -1
  39. package/data/layers/full/tokens/scss/_tokens.scss +1 -1
  40. package/data/layers/full/tokens/themes/sick2018_dark.css +1 -1
  41. package/data/layers/full/tokens/themes/sick2018_light.css +1 -1
  42. package/data/layers/full/tokens/themes/sick2025_dark.css +1 -1
  43. package/data/layers/full/tokens/themes/sick2025_light.css +1 -1
  44. package/data/manifest.json +1 -1
  45. package/package.json +4 -4
  46. package/data/layers/full/component/component:syn-icon-button/components/icon-button.custom.styles.ts +0 -79
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # Changelog
2
2
 
3
+ ## 3.2.0
4
+
5
+ ### Patch Changes
6
+
7
+ - [#1267](https://github.com/synergy-design-system/synergy-design-system/pull/1267) [`2444517`](https://github.com/synergy-design-system/synergy-design-system/commit/2444517aaedc22b115d9572dd14d47c43189ec5d) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-04-29
8
+
9
+ fix: 🐛 `<syn-icon-button>` is not visible when `disabled` in dark mode ([#1257](https://github.com/synergy-design-system/synergy-design-system/issues/1257))
10
+
11
+ This release fixes an issue where disabled `<syn-icon-button>` components were appearing too light in dark mode, making them difficult to see. The disabled state styling now properly contrasts with the dark background.
12
+
3
13
  ## 3.1.0
4
14
 
5
15
  ### Minor Changes
package/data/core/component/component:syn-icon-button.json CHANGED
@@ -157,10 +157,6 @@
157
157
  "layer": "full",
158
158
  "path": "layers/full/component/component:syn-icon-button/components/icon-button.component.ts"
159
159
  },
160
- {
161
- "layer": "full",
162
- "path": "layers/full/component/component:syn-icon-button/components/icon-button.custom.styles.ts"
163
- },
164
160
  {
165
161
  "layer": "full",
166
162
  "path": "layers/full/component/component:syn-icon-button/components/icon-button.styles.ts"
@@ -205,7 +201,6 @@
205
201
  "sources": [
206
202
  "packages/angular/components/icon-button/icon-button.component.ts",
207
203
  "packages/components/src/components/icon-button/icon-button.component.ts",
208
- "packages/components/src/components/icon-button/icon-button.custom.styles.ts",
209
204
  "packages/components/src/components/icon-button/icon-button.styles.ts",
210
205
  "packages/components/src/components/icon-button/icon-button.ts",
211
206
  "packages/react/src/components/icon-button.ts",
package/data/core/setup/setup:angular-components-module.json CHANGED
@@ -21,7 +21,7 @@
21
21
  "name": "Angular Components Module",
22
22
  "package": "angular",
23
23
  "relations": [],
24
- "since": "3.13.0",
24
+ "since": "3.13.1",
25
25
  "sources": [
26
26
  "packages/angular/modules/synergy/synergy.module.ts",
27
27
  "packages/angular/components/index.ts"
package/data/core/setup/setup:angular-forms-module.json CHANGED
@@ -22,7 +22,7 @@
22
22
  "name": "Angular Forms Module",
23
23
  "package": "angular",
24
24
  "relations": [],
25
- "since": "3.13.0",
25
+ "since": "3.13.1",
26
26
  "sources": [
27
27
  "packages/angular/modules/forms/forms.module.ts"
28
28
  ],
package/data/core/setup/setup:angular-package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "custom": {
3
3
  "framework": "angular",
4
4
  "packageName": "@synergy-design-system/angular",
5
- "packageVersion": "3.13.0",
5
+ "packageVersion": "3.13.1",
6
6
  "subpathExports": [
7
7
  ".",
8
8
  "./components/*",
@@ -39,7 +39,7 @@
39
39
  "name": "Angular Framework Package",
40
40
  "package": "angular",
41
41
  "relations": [],
42
- "since": "3.13.0",
42
+ "since": "3.13.1",
43
43
  "sources": [
44
44
  "packages/angular/README.md",
45
45
  "packages/angular/CHANGELOG.md",
package/data/core/setup/setup:angular-validators-module.json CHANGED
@@ -22,7 +22,7 @@
22
22
  "name": "Angular Validators Module",
23
23
  "package": "angular",
24
24
  "relations": [],
25
- "since": "3.13.0",
25
+ "since": "3.13.1",
26
26
  "sources": [
27
27
  "packages/angular/directives/validators/validators.ts"
28
28
  ],
package/data/core/setup/setup:components-package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "custom": {
3
3
  "packageName": "@synergy-design-system/components",
4
- "packageVersion": "3.13.0"
4
+ "packageVersion": "3.13.1"
5
5
  },
6
6
  "id": "setup:components-package",
7
7
  "kind": "setup",
@@ -40,7 +40,7 @@
40
40
  "name": "Components Package",
41
41
  "package": "components",
42
42
  "relations": [],
43
- "since": "3.13.0",
43
+ "since": "3.13.1",
44
44
  "sources": [
45
45
  "packages/components/README.md",
46
46
  "packages/components/CHANGELOG.md",
package/data/core/setup/setup:react-package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "custom": {
3
3
  "framework": "react",
4
4
  "packageName": "@synergy-design-system/react",
5
- "packageVersion": "3.13.0",
5
+ "packageVersion": "3.13.1",
6
6
  "subpathExports": [
7
7
  ".",
8
8
  "./components/*",
@@ -42,7 +42,7 @@
42
42
  "name": "React Framework Package",
43
43
  "package": "react",
44
44
  "relations": [],
45
- "since": "3.13.0",
45
+ "since": "3.13.1",
46
46
  "sources": [
47
47
  "packages/react/README.md",
48
48
  "packages/react/CHANGELOG.md",
package/data/core/setup/setup:tokens-package.json CHANGED
@@ -24,7 +24,7 @@
24
24
  "./themes/*"
25
25
  ],
26
26
  "packageName": "@synergy-design-system/tokens",
27
- "packageVersion": "3.13.0"
27
+ "packageVersion": "3.13.1"
28
28
  },
29
29
  "id": "setup:tokens-package",
30
30
  "kind": "setup",
@@ -51,7 +51,7 @@
51
51
  "name": "Tokens Package",
52
52
  "package": "tokens",
53
53
  "relations": [],
54
- "since": "3.13.0",
54
+ "since": "3.13.1",
55
55
  "sources": [
56
56
  "packages/tokens/BREAKING_CHANGES.md",
57
57
  "packages/tokens/CHANGELOG.md",
package/data/core/setup/setup:vue-package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "custom": {
3
3
  "framework": "vue",
4
4
  "packageName": "@synergy-design-system/vue",
5
- "packageVersion": "3.13.0"
5
+ "packageVersion": "3.13.1"
6
6
  },
7
7
  "id": "setup:vue-package",
8
8
  "kind": "setup",
@@ -33,7 +33,7 @@
33
33
  "name": "Vue Framework Package",
34
34
  "package": "vue",
35
35
  "relations": [],
36
- "since": "3.13.0",
36
+ "since": "3.13.1",
37
37
  "sources": [
38
38
  "packages/vue/README.md",
39
39
  "packages/vue/CHANGELOG.md",
package/data/core/token/token:tokens-figma-variables-sick2018-dark-json.json CHANGED
@@ -18,7 +18,7 @@
18
18
  "name": "sick2018-dark.json",
19
19
  "package": "tokens",
20
20
  "relations": [],
21
- "since": "3.13.0",
21
+ "since": "3.13.1",
22
22
  "sources": [
23
23
  "packages/tokens/src/figma-variables/output/sick2018-dark.json"
24
24
  ],
package/data/core/token/token:tokens-figma-variables-sick2018-light-json.json CHANGED
@@ -18,7 +18,7 @@
18
18
  "name": "sick2018-light.json",
19
19
  "package": "tokens",
20
20
  "relations": [],
21
- "since": "3.13.0",
21
+ "since": "3.13.1",
22
22
  "sources": [
23
23
  "packages/tokens/src/figma-variables/output/sick2018-light.json"
24
24
  ],
package/data/core/token/token:tokens-figma-variables-sick2025-dark-json.json CHANGED
@@ -18,7 +18,7 @@
18
18
  "name": "sick2025-dark.json",
19
19
  "package": "tokens",
20
20
  "relations": [],
21
- "since": "3.13.0",
21
+ "since": "3.13.1",
22
22
  "sources": [
23
23
  "packages/tokens/src/figma-variables/output/sick2025-dark.json"
24
24
  ],
package/data/core/token/token:tokens-figma-variables-sick2025-light-json.json CHANGED
@@ -18,7 +18,7 @@
18
18
  "name": "sick2025-light.json",
19
19
  "package": "tokens",
20
20
  "relations": [],
21
- "since": "3.13.0",
21
+ "since": "3.13.1",
22
22
  "sources": [
23
23
  "packages/tokens/src/figma-variables/output/sick2025-light.json"
24
24
  ],
package/data/core/token/token:tokens-js-index-d-ts.json CHANGED
@@ -17,7 +17,7 @@
17
17
  "name": "index.d.ts",
18
18
  "package": "tokens",
19
19
  "relations": [],
20
- "since": "3.13.0",
20
+ "since": "3.13.1",
21
21
  "sources": [
22
22
  "packages/tokens/dist/js/index.d.ts"
23
23
  ],
package/data/core/token/token:tokens-js-index-js.json CHANGED
@@ -17,7 +17,7 @@
17
17
  "name": "index.js",
18
18
  "package": "tokens",
19
19
  "relations": [],
20
- "since": "3.13.0",
20
+ "since": "3.13.1",
21
21
  "sources": [
22
22
  "packages/tokens/dist/js/index.js"
23
23
  ],
package/data/core/token/token:tokens-scss-tokens-scss.json CHANGED
@@ -17,7 +17,7 @@
17
17
  "name": "_tokens.scss",
18
18
  "package": "tokens",
19
19
  "relations": [],
20
- "since": "3.13.0",
20
+ "since": "3.13.1",
21
21
  "sources": [
22
22
  "packages/tokens/dist/scss/_tokens.scss"
23
23
  ],
package/data/core/token/token:tokens-themes-sick2018-dark-css.json CHANGED
@@ -18,7 +18,7 @@
18
18
  "name": "sick2018_dark.css",
19
19
  "package": "tokens",
20
20
  "relations": [],
21
- "since": "3.13.0",
21
+ "since": "3.13.1",
22
22
  "sources": [
23
23
  "packages/tokens/dist/themes/sick2018_dark.css"
24
24
  ],
package/data/core/token/token:tokens-themes-sick2018-light-css.json CHANGED
@@ -18,7 +18,7 @@
18
18
  "name": "sick2018_light.css",
19
19
  "package": "tokens",
20
20
  "relations": [],
21
- "since": "3.13.0",
21
+ "since": "3.13.1",
22
22
  "sources": [
23
23
  "packages/tokens/dist/themes/sick2018_light.css"
24
24
  ],
package/data/core/token/token:tokens-themes-sick2025-dark-css.json CHANGED
@@ -18,7 +18,7 @@
18
18
  "name": "sick2025_dark.css",
19
19
  "package": "tokens",
20
20
  "relations": [],
21
- "since": "3.13.0",
21
+ "since": "3.13.1",
22
22
  "sources": [
23
23
  "packages/tokens/dist/themes/sick2025_dark.css"
24
24
  ],
package/data/core/token/token:tokens-themes-sick2025-light-css.json CHANGED
@@ -18,7 +18,7 @@
18
18
  "name": "sick2025_light.css",
19
19
  "package": "tokens",
20
20
  "relations": [],
21
- "since": "3.13.0",
21
+ "since": "3.13.1",
22
22
  "sources": [
23
23
  "packages/tokens/dist/themes/sick2025_light.css"
24
24
  ],
package/data/index.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "builtAt": "2026-04-29T12:24:03.622Z",
2
+ "builtAt": "2026-04-29T13:20:40.658Z",
3
3
  "entities": [
4
4
  {
5
5
  "corePath": "data/core/asset/asset:sick2018-icons.json",
@@ -491,7 +491,7 @@
491
491
  "kind": "component",
492
492
  "layers": {
493
493
  "examples": 1,
494
- "full": 8,
494
+ "full": 7,
495
495
  "interface": 2
496
496
  },
497
497
  "name": "syn-icon-button",
package/data/layers/examples/component/component:syn-icon-button.md CHANGED
@@ -17,24 +17,26 @@ Icons buttons are simple, icon-only buttons that can be used for actions and in
17
17
  Use the size attribute to change a icon-button size.
18
18
 
19
19
  ```html
20
- <syn-icon-button
21
- name="wallpaper"
22
- label="Wallpaper"
23
- color="neutral"
24
- size="small"
25
- ></syn-icon-button>
26
- <syn-icon-button
27
- name="wallpaper"
28
- label="Wallpaper"
29
- color="neutral"
30
- size="medium"
31
- ></syn-icon-button>
32
- <syn-icon-button
33
- name="wallpaper"
34
- label="Wallpaper"
35
- color="neutral"
36
- size="large"
37
- ></syn-icon-button>
20
+ <div style="align-items: end; display: flex; gap: var(--syn-spacing-large)">
21
+ <syn-icon-button
22
+ name="wallpaper"
23
+ label="Wallpaper"
24
+ color="neutral"
25
+ size="small"
26
+ ></syn-icon-button>
27
+ <syn-icon-button
28
+ name="wallpaper"
29
+ label="Wallpaper"
30
+ color="neutral"
31
+ size="medium"
32
+ ></syn-icon-button>
33
+ <syn-icon-button
34
+ name="wallpaper"
35
+ label="Wallpaper"
36
+ color="neutral"
37
+ size="large"
38
+ ></syn-icon-button>
39
+ </div>
38
40
  ```
39
41
 
40
42
  ---
@@ -44,18 +46,20 @@ Use the size attribute to change a icon-button size.
44
46
  The Icon button can have two color variants, Primary or Neutral Color.
45
47
 
46
48
  ```html
47
- <syn-icon-button
48
- name="wallpaper"
49
- label="Wallpaper"
50
- color="neutral"
51
- size="medium"
52
- ></syn-icon-button>
53
- <syn-icon-button
54
- name="wallpaper"
55
- label="Wallpaper"
56
- color="primary"
57
- size="medium"
58
- ></syn-icon-button>
49
+ <div style="align-items: center; display: flex; gap: var(--syn-spacing-large)">
50
+ <syn-icon-button
51
+ name="wallpaper"
52
+ label="Wallpaper"
53
+ color="neutral"
54
+ size="medium"
55
+ ></syn-icon-button>
56
+ <syn-icon-button
57
+ name="wallpaper"
58
+ label="Wallpaper"
59
+ color="primary"
60
+ size="medium"
61
+ ></syn-icon-button>
62
+ </div>
59
63
  ```
60
64
 
61
65
  ---
@@ -82,13 +86,22 @@ It’s often helpful to have a button that works like a link. This is possible b
82
86
  Use the disabled attribute to disable the icon button.
83
87
 
84
88
  ```html
85
- <syn-icon-button
86
- name="wallpaper"
87
- label="Wallpaper"
88
- color="neutral"
89
- disabled=""
90
- size="medium"
91
- ></syn-icon-button>
89
+ <div style="align-items: center; display: flex; gap: var(--syn-spacing-large)">
90
+ <syn-icon-button
91
+ name="wallpaper"
92
+ label="Wallpaper"
93
+ color="neutral"
94
+ disabled=""
95
+ size="medium"
96
+ ></syn-icon-button>
97
+ <syn-icon-button
98
+ name="wallpaper"
99
+ label="Wallpaper"
100
+ color="primary"
101
+ disabled=""
102
+ size="medium"
103
+ ></syn-icon-button>
104
+ </div>
92
105
  ```
93
106
 
94
107
  ---
@@ -99,12 +112,28 @@ The focus event gives the user feedback that the icon-button has been focused by
99
112
 
100
113
  ```html
101
114
  <div style="padding: 5px">
102
- <syn-icon-button
103
- name="wallpaper"
104
- label="Wallpaper"
105
- color="neutral"
106
- size="medium"
107
- ></syn-icon-button>
115
+ <div
116
+ style="align-items: center; display: flex; gap: var(--syn-spacing-large)"
117
+ >
118
+ <syn-icon-button
119
+ name="wallpaper"
120
+ label="Wallpaper"
121
+ color="neutral"
122
+ size="small"
123
+ ></syn-icon-button>
124
+ <syn-icon-button
125
+ name="wallpaper"
126
+ label="Wallpaper"
127
+ color="neutral"
128
+ size="medium"
129
+ ></syn-icon-button>
130
+ <syn-icon-button
131
+ name="wallpaper"
132
+ label="Wallpaper"
133
+ color="neutral"
134
+ size="large"
135
+ ></syn-icon-button>
136
+ </div>
108
137
  </div>
109
138
  ```
110
139
 
package/data/layers/full/component/component:syn-icon-button/components/icon-button.component.ts CHANGED
@@ -1,4 +1,4 @@
1
- /* eslint-disable */
1
+ import type { CSSResultGroup } from 'lit';
2
2
  import { classMap } from 'lit/directives/class-map.js';
3
3
  import { html, literal } from 'lit/static-html.js';
4
4
  import { ifDefined } from 'lit/directives/if-defined.js';
@@ -7,8 +7,6 @@ import componentStyles from '../../styles/component.styles.js';
7
7
  import SynergyElement from '../../internal/synergy-element.js';
8
8
  import SynIcon from '../icon/icon.component.js';
9
9
  import styles from './icon-button.styles.js';
10
- import customStyles from './icon-button.custom.styles.js';
11
- import type { CSSResultGroup } from 'lit';
12
10
  import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
13
11
 
14
12
  /**
@@ -26,7 +24,8 @@ import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator
26
24
  */
27
25
  @enableDefaultSettings('SynIconButton')
28
26
  export default class SynIconButton extends SynergyElement {
29
- static styles: CSSResultGroup = [componentStyles, styles, customStyles];
27
+ static styles: CSSResultGroup = [componentStyles, styles];
28
+
30
29
  static dependencies = { 'syn-icon': SynIcon };
31
30
 
32
31
  @query('.icon-button') button: HTMLButtonElement | HTMLLinkElement;
@@ -67,10 +66,10 @@ export default class SynIconButton extends SynergyElement {
67
66
  * The color of the icon button.
68
67
  * The default "currentColor" makes it possible to easily style the icon button from outside without any CSS variables.
69
68
  */
70
- @property({ reflect: true }) color: 'currentColor' | 'primary' | 'neutral' = 'currentColor';
69
+ @property({ reflect: true }) color: 'currentColor' | 'primary' | 'neutral' = 'currentColor';
71
70
 
72
71
  /** Disables the button. */
73
- @property({ type: Boolean, reflect: true }) disabled = false;
72
+ @property({ reflect: true, type: Boolean }) disabled = false;
74
73
 
75
74
  private handleBlur() {
76
75
  this.hasFocus = false;
@@ -104,11 +103,12 @@ export default class SynIconButton extends SynergyElement {
104
103
  this.button.blur();
105
104
  }
106
105
 
106
+ // eslint-disable-next-line complexity
107
107
  render() {
108
- const isLink = this.href ? true : false;
108
+ const isLink = !!this.href;
109
109
  const tag = isLink ? literal`a` : literal`button`;
110
110
 
111
- /* eslint-disable lit/binding-positions, lit/no-invalid-html */
111
+ /* eslint-disable lit/binding-positions, lit/no-invalid-html, @typescript-eslint/unbound-method */
112
112
  return html`
113
113
  <${tag}
114
114
  part="base"
@@ -116,9 +116,9 @@ export default class SynIconButton extends SynergyElement {
116
116
  'icon-button': true,
117
117
  'icon-button--disabled': !isLink && this.disabled,
118
118
  'icon-button--focused': this.hasFocus,
119
- 'icon-button--small': this.size === 'small',
120
- 'icon-button--medium': this.size === 'medium',
121
119
  'icon-button--large': this.size === 'large',
120
+ 'icon-button--medium': this.size === 'medium',
121
+ 'icon-button--small': this.size === 'small',
122
122
  })}
123
123
  ?disabled=${ifDefined(isLink ? undefined : this.disabled)}
124
124
  type=${ifDefined(isLink ? undefined : 'button')}
package/data/layers/full/component/component:syn-icon-button/components/icon-button.styles.ts CHANGED
@@ -1,26 +1,36 @@
1
- /* eslint-disable */
2
1
  import { css } from 'lit';
3
2
 
4
3
  export default css`
5
- /* stylelint-disable */
6
4
  :host {
7
- display: inline-block;
8
5
  color: var(--syn-color-neutral-600);
6
+ display: inline-block;
9
7
  }
10
8
 
11
9
  .icon-button {
12
- flex: 0 0 auto;
13
- display: flex;
14
10
  align-items: center;
11
+ /* stylelint-disable-next-line property-no-vendor-prefix */
12
+ -webkit-appearance: none;
13
+ appearance: none;
15
14
  background: none;
16
15
  border: none;
17
- border-radius: var(--syn-border-radius-medium);
16
+ border-radius: 0;
17
+ color: currentColor;
18
+ cursor: pointer;
19
+ display: flex;
20
+ flex: 0 0 auto;
18
21
  font-size: inherit;
19
- color: inherit;
20
22
  padding: var(--syn-spacing-x-small);
21
- cursor: pointer;
22
23
  transition: var(--syn-transition-x-fast) color;
23
- -webkit-appearance: none;
24
+ }
25
+
26
+ .icon-button:focus {
27
+ outline: none;
28
+ }
29
+
30
+ .icon-button:focus-visible {
31
+ border-radius: var(--syn-icon-button-focus-ring-border-radius); /* Remove round borders */
32
+ outline: var(--syn-focus-ring);
33
+ outline-offset: var(--syn-focus-ring-offset);
24
34
  }
25
35
 
26
36
  .icon-button:hover:not(.icon-button--disabled),
@@ -32,21 +42,70 @@ export default css`
32
42
  color: var(--syn-color-primary-700);
33
43
  }
34
44
 
35
- .icon-button:focus {
36
- outline: none;
37
- }
38
-
39
45
  .icon-button--disabled {
40
- opacity: 0.5;
41
46
  cursor: not-allowed;
42
- }
43
-
44
- .icon-button:focus-visible {
45
- outline: var(--syn-focus-ring);
46
- outline-offset: var(--syn-focus-ring-offset);
47
+ opacity: var(--syn-input-disabled-opacity); /* #429: Use token for opacity */
47
48
  }
48
49
 
49
50
  .icon-button__icon {
50
51
  pointer-events: none;
51
52
  }
53
+
54
+ /* Colors */
55
+ :host([color="currentColor"]) {
56
+ color: currentColor;
57
+ }
58
+
59
+ :host([color="primary"]),
60
+ :host([color="primary"]) .icon-button:focus-visible:not(.icon-button--disabled) {
61
+ color: var(--syn-interactive-emphasis-color);
62
+ }
63
+
64
+ :host([color="primary"]) .icon-button:hover:not(.icon-button--disabled) {
65
+ color: var(--syn-interactive-emphasis-color-hover);
66
+ }
67
+
68
+ :host([color="primary"]) .icon-button:active:not(.icon-button--disabled) {
69
+ color: var(--syn-interactive-emphasis-color-active);
70
+ }
71
+
72
+ :host([color="neutral"]) {
73
+ color: var(--syn-interactive-quiet-color);
74
+ }
75
+
76
+ :host([color="neutral"]) .icon-button:hover:not(.icon-button--disabled) {
77
+ color: var(--syn-interactive-quiet-color-hover);
78
+ }
79
+
80
+ :host([color="neutral"]) .icon-button:active:not(.icon-button--disabled) {
81
+ color: var(--syn-interactive-quiet-color-active);
82
+ }
83
+
84
+ :host([color="neutral"]) .icon-button:focus-visible:not(.icon-button--disabled):not(:hover) {
85
+ color: var(--syn-interactive-quiet-color);
86
+ }
87
+
88
+ /* Sizes */
89
+ .icon-button--small {
90
+ font-size: var(--syn-font-size-medium);
91
+ }
92
+
93
+ .icon-button--medium {
94
+ font-size: var(--syn-font-size-x-large);
95
+ }
96
+
97
+ .icon-button--large {
98
+ font-size: var(--syn-font-size-2x-large);
99
+ }
100
+
101
+ /* Force user to set "label" prop */
102
+ .icon-button[aria-label=""] {
103
+ border: var(--syn-border-width-large) var(--syn-color-error-600) solid;
104
+ }
105
+
106
+ .icon-button[aria-label=""]::after {
107
+ content: "Set label prop for a11y to get rid of this text and border!";
108
+ font-size: var(--syn-font-size-2x-small);
109
+ margin-left: var(--syn-spacing-2x-small);
110
+ }
52
111
  `;
package/data/layers/full/component/component:syn-icon-button/components/icon-button.ts CHANGED
@@ -1,4 +1,3 @@
1
- /* eslint-disable */
2
1
  import SynIconButton from './icon-button.component.js';
3
2
 
4
3
  export * from './icon-button.component.js';
package/data/layers/full/setup/setup:angular-package/angular/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @synergy-design-system/angular
2
2
 
3
+ ## 3.13.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [[`2444517`](https://github.com/synergy-design-system/synergy-design-system/commit/2444517aaedc22b115d9572dd14d47c43189ec5d)]:
8
+ - @synergy-design-system/components@3.13.1
9
+ - @synergy-design-system/tokens@3.13.1
10
+
3
11
  ## 3.13.0
4
12
 
5
13
  ### Patch Changes
package/data/layers/full/setup/setup:angular-package/angular/package.json CHANGED
@@ -22,7 +22,7 @@
22
22
  "url": "https://github.com/synergy-design-system/synergy-design-system.git",
23
23
  "directory": "packages/angular"
24
24
  },
25
- "version": "3.13.0",
25
+ "version": "3.13.1",
26
26
  "scripts": {
27
27
  "_build": "pnpm _clean && ng-packagr -c tsconfig.lib.json && pnpm _after-build",
28
28
  "_clean": "rm -rf ../_private/angular-demo/.angular",
package/data/layers/full/setup/setup:components-package/components/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # Changelog
2
2
 
3
+ ## 3.13.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#1267](https://github.com/synergy-design-system/synergy-design-system/pull/1267) [`2444517`](https://github.com/synergy-design-system/synergy-design-system/commit/2444517aaedc22b115d9572dd14d47c43189ec5d) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-04-29
8
+
9
+ fix: 🐛 `<syn-icon-button>` is not visible when `disabled` in dark mode ([#1257](https://github.com/synergy-design-system/synergy-design-system/issues/1257))
10
+
11
+ This release fixes an issue where disabled `<syn-icon-button>` components were appearing too light in dark mode, making them difficult to see. The disabled state styling now properly contrasts with the dark background.
12
+
13
+ - Updated dependencies []:
14
+ - @synergy-design-system/tokens@3.13.1
15
+
3
16
  ## 3.13.0
4
17
 
5
18
  ### Patch Changes
package/data/layers/full/setup/setup:components-package/components/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "url": "https://www.sick.com"
5
5
  },
6
6
  "name": "@synergy-design-system/components",
7
- "version": "3.13.0",
7
+ "version": "3.13.1",
8
8
  "description": "",
9
9
  "repository": {
10
10
  "type": "git",
package/data/layers/full/setup/setup:react-package/react/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @synergy-design-system/react
2
2
 
3
+ ## 3.13.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [[`2444517`](https://github.com/synergy-design-system/synergy-design-system/commit/2444517aaedc22b115d9572dd14d47c43189ec5d)]:
8
+ - @synergy-design-system/components@3.13.1
9
+ - @synergy-design-system/tokens@3.13.1
10
+
3
11
  ## 3.13.0
4
12
 
5
13
  ### Patch Changes
package/data/layers/full/setup/setup:react-package/react/package.json CHANGED
@@ -43,7 +43,7 @@
43
43
  "directory": "packages/react"
44
44
  },
45
45
  "type": "module",
46
- "version": "3.13.0",
46
+ "version": "3.13.1",
47
47
  "devDependencies": {
48
48
  "@types/react": "^19.2.14",
49
49
  "react": "^19.2.5"
package/data/layers/full/setup/setup:tokens-package/tokens/CHANGELOG.md CHANGED
@@ -1,5 +1,7 @@
1
1
  # Changelog
2
2
 
3
+ ## 3.13.1
4
+
3
5
  ## 3.13.0
4
6
 
5
7
  ### Minor Changes
package/data/layers/full/setup/setup:tokens-package/tokens/package.json CHANGED
@@ -77,5 +77,5 @@
77
77
  },
78
78
  "type": "module",
79
79
  "types": "./dist/js/index.d.ts",
80
- "version": "3.13.0"
80
+ "version": "3.13.1"
81
81
  }
package/data/layers/full/setup/setup:vue-package/vue/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @synergy-design-system/vue
2
2
 
3
+ ## 3.13.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [[`2444517`](https://github.com/synergy-design-system/synergy-design-system/commit/2444517aaedc22b115d9572dd14d47c43189ec5d)]:
8
+ - @synergy-design-system/components@3.13.1
9
+ - @synergy-design-system/tokens@3.13.1
10
+
3
11
  ## 3.13.0
4
12
 
5
13
  ### Patch Changes
package/data/layers/full/setup/setup:vue-package/vue/package.json CHANGED
@@ -43,7 +43,7 @@
43
43
  "directory": "packages/vue"
44
44
  },
45
45
  "type": "module",
46
- "version": "3.13.0",
46
+ "version": "3.13.1",
47
47
  "devDependencies": {
48
48
  "@vitejs/plugin-vue": "^6.0.6",
49
49
  "@vue/tsconfig": "^0.9.1",
package/data/layers/full/tokens/js/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 3.13.0
2
+ * @synergy-design-system/tokens version 3.13.1
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
package/data/layers/full/tokens/js/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 3.13.0
2
+ * @synergy-design-system/tokens version 3.13.1
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
package/data/layers/full/tokens/scss/_tokens.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 3.13.0
2
+ * @synergy-design-system/tokens version 3.13.1
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
  $SynAlertErrorColorBackground: var(--syn-alert-error-color-background) !default;
package/data/layers/full/tokens/themes/sick2018_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 3.13.0
2
+ * @synergy-design-system/tokens version 3.13.1
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
package/data/layers/full/tokens/themes/sick2018_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 3.13.0
2
+ * @synergy-design-system/tokens version 3.13.1
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
package/data/layers/full/tokens/themes/sick2025_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 3.13.0
2
+ * @synergy-design-system/tokens version 3.13.1
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
package/data/layers/full/tokens/themes/sick2025_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 3.13.0
2
+ * @synergy-design-system/tokens version 3.13.1
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
package/data/manifest.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "builtAt": "2026-04-29T12:24:03.623Z",
2
+ "builtAt": "2026-04-29T13:20:40.659Z",
3
3
  "sources": [
4
4
  {
5
5
  "entityCount": 4,
package/package.json CHANGED
@@ -19,12 +19,12 @@
19
19
  "serve-handler": "^6.1.7",
20
20
  "typescript": "^5.9.3",
21
21
  "zod": "^4.3.6",
22
- "@synergy-design-system/components": "3.13.0",
23
22
  "@synergy-design-system/eslint-config-syn": "^0.1.0",
24
- "@synergy-design-system/fonts": "1.0.6",
25
23
  "@synergy-design-system/docs": "0.1.0",
24
+ "@synergy-design-system/components": "3.13.1",
26
25
  "@synergy-design-system/styles": "2.1.0",
27
- "@synergy-design-system/tokens": "^3.13.0"
26
+ "@synergy-design-system/tokens": "^3.13.1",
27
+ "@synergy-design-system/fonts": "1.0.6"
28
28
  },
29
29
  "exports": {
30
30
  ".": {
@@ -65,7 +65,7 @@
65
65
  },
66
66
  "types": "./dist/index.d.ts",
67
67
  "type": "module",
68
- "version": "3.1.0",
68
+ "version": "3.2.0",
69
69
  "scripts": {
70
70
  "build:all": "METADATA_LOG_LEVEL=info pnpm run build:ts && RUN_STORYBOOK_SCRAPER=true pnpm run build:data",
71
71
  "build": "METADATA_LOG_LEVEL=info pnpm run build:ts && pnpm run build:data",
package/data/layers/full/component/component:syn-icon-button/components/icon-button.custom.styles.ts DELETED
@@ -1,79 +0,0 @@
1
- import { css } from 'lit';
2
-
3
- export default css`
4
- .icon-button {
5
- border-radius: 0;
6
- color: currentColor;
7
- font-size: inherit;
8
- }
9
-
10
- .icon-button--disabled {
11
- color: var(--syn-color-neutral-400);
12
-
13
- /** #429: Use token for opacity */
14
- opacity: var(--syn-input-disabled-opacity);
15
- }
16
-
17
- /* Remove round borders */
18
- .icon-button:focus-visible {
19
- border-radius: var(--syn-icon-button-focus-ring-border-radius);
20
- }
21
-
22
- /* Colors */
23
- :host([color="currentColor"]) {
24
- color: currentColor;
25
- }
26
-
27
- :host([color="primary"]),
28
- :host([color="primary"]) .icon-button:focus-visible:not(.icon-button--disabled) {
29
- color: var(--syn-interactive-emphasis-color);
30
- }
31
-
32
- :host([color="primary"]) .icon-button:hover:not(.icon-button--disabled) {
33
- color: var(--syn-interactive-emphasis-color-hover);
34
- }
35
-
36
- :host([color="primary"]) .icon-button:active:not(.icon-button--disabled) {
37
- color: var(--syn-interactive-emphasis-color-active);
38
- }
39
-
40
- :host([color="neutral"]) {
41
- color: var(--syn-interactive-quiet-color);
42
- }
43
-
44
- :host([color="neutral"]) .icon-button:hover:not(.icon-button--disabled) {
45
- color: var(--syn-interactive-quiet-color-hover);
46
- }
47
-
48
- :host([color="neutral"]) .icon-button:active:not(.icon-button--disabled) {
49
- color: var(--syn-interactive-quiet-color-active);
50
- }
51
-
52
- :host([color="neutral"]) .icon-button:focus-visible:not(.icon-button--disabled):not(:hover) {
53
- color: var(--syn-interactive-quiet-color);
54
- }
55
-
56
- /* Sizes */
57
- .icon-button--small {
58
- font-size: var(--syn-font-size-medium);
59
- }
60
-
61
- .icon-button--medium {
62
- font-size: var(--syn-font-size-x-large);
63
- }
64
-
65
- .icon-button--large {
66
- font-size: var(--syn-font-size-2x-large);
67
- }
68
-
69
- /* Force user to set "label" prop */
70
- .icon-button[aria-label=""] {
71
- border: var(--syn-border-width-large) var(--syn-color-error-600) solid;
72
- }
73
-
74
- .icon-button[aria-label=""]::after {
75
- content: "Set label prop for a11y to get rid of this text and border!";
76
- font-size: var(--syn-font-size-2x-small);
77
- margin-left: var(--syn-spacing-2x-small);
78
- }
79
- `;