@synergy-design-system/mcp 1.1.0 → 1.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 (15) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/metadata/checksum.txt +1 -1
  3. package/metadata/packages/components/migration/migration-synergy-v3.md +95 -1
  4. package/metadata/packages/tokens/CHANGELOG.md +7 -0
  5. package/metadata/packages/tokens/README.md +40 -17
  6. package/metadata/packages/tokens/dark.css +5 -5
  7. package/metadata/packages/tokens/light.css +5 -5
  8. package/metadata/packages/tokens/sick2018_dark.css +268 -0
  9. package/metadata/packages/tokens/sick2018_light.css +268 -0
  10. package/metadata/packages/tokens/sick2025_dark.css +268 -0
  11. package/metadata/packages/tokens/sick2025_light.css +268 -0
  12. package/metadata/static/components/syn-dialog/docs.md +1 -3
  13. package/metadata/static/components/syn-drawer/docs.md +1 -3
  14. package/metadata/static/setup/icon-usage.md +136 -1
  15. package/package.json +4 -4
package/metadata/packages/tokens/sick2025_light.css ADDED
@@ -0,0 +1,268 @@
1
+ /**
2
+ * @synergy-design-system/tokens version 2.22.0
3
+ * SICK Global UX Foundation
4
+ * Do not edit directly, this file was auto-generated.
5
+ */
6
+
7
+ :root, .syn-sick2025-light {
8
+ color-scheme: light;
9
+
10
+ --syn-border-radius-circle: 9999px;
11
+ --syn-border-radius-large: 8px;
12
+ --syn-border-radius-medium: 8px;
13
+ --syn-border-radius-none: 0px;
14
+ --syn-border-radius-pill: 9999px;
15
+ --syn-border-radius-small: 4px;
16
+ --syn-border-radius-x-large: 16px;
17
+ --syn-border-width-large: 3px; /** Large */
18
+ --syn-border-width-medium: 2px; /** Medium */
19
+ --syn-border-width-none: 0px; /** None */
20
+ --syn-border-width-small: 1px; /** Small */
21
+ --syn-border-width-x-large: 4px; /** X Large */
22
+ --syn-button-font-size-large: var(--syn-font-size-large);
23
+ --syn-button-font-size-medium: var(--syn-font-size-medium);
24
+ --syn-button-font-size-small: var(--syn-font-size-small);
25
+ --syn-color-accent-50: #ffffff;
26
+ --syn-color-accent-100: #ffffff;
27
+ --syn-color-accent-200: #ffffff;
28
+ --syn-color-accent-300: #ffffff;
29
+ --syn-color-accent-400: #ffffff;
30
+ --syn-color-accent-500: #ffffff;
31
+ --syn-color-accent-600: #ffffff;
32
+ --syn-color-accent-700: #ffffff;
33
+ --syn-color-accent-800: #ffffff;
34
+ --syn-color-accent-900: #ffffff;
35
+ --syn-color-accent-950: #ffffff;
36
+ --syn-color-error-50: #fff1f1;
37
+ --syn-color-error-100: #ffe3e4;
38
+ --syn-color-error-200: #ffcfd1;
39
+ --syn-color-error-300: #ffa0a2;
40
+ --syn-color-error-400: #ff696d;
41
+ --syn-color-error-500: #f93a3f;
42
+ --syn-color-error-600: #e6191e;
43
+ --syn-color-error-700: #bc1519;
44
+ --syn-color-error-800: #941013;
45
+ --syn-color-error-900: #6c0c0e;
46
+ --syn-color-error-950: #450709;
47
+ --syn-color-neutral-0: #ffffff;
48
+ --syn-color-neutral-50: #f2f2f2;
49
+ --syn-color-neutral-100: #e7e7e7;
50
+ --syn-color-neutral-200: #cccccc;
51
+ --syn-color-neutral-300: #b2b2b2;
52
+ --syn-color-neutral-400: #999999;
53
+ --syn-color-neutral-500: #868686;
54
+ --syn-color-neutral-600: #666666;
55
+ --syn-color-neutral-700: #565656;
56
+ --syn-color-neutral-800: #333333;
57
+ --syn-color-neutral-900: #1a1a1a;
58
+ --syn-color-neutral-950: #0d0d0d;
59
+ --syn-color-neutral-1000: #000000;
60
+ --syn-color-primary-50: #eff5ff;
61
+ --syn-color-primary-100: #dae7ff;
62
+ --syn-color-primary-200: #ccdeff;
63
+ --syn-color-primary-300: #91bbff;
64
+ --syn-color-primary-400: #5e97fc;
65
+ --syn-color-primary-500: #3183fe;
66
+ --syn-color-primary-600: #066fff;
67
+ --syn-color-primary-700: #005aff;
68
+ --syn-color-primary-800: #0845c5;
69
+ --syn-color-primary-900: #0d3f9b;
70
+ --syn-color-primary-950: #0e275d;
71
+ --syn-color-success-50: #f0fdf4;
72
+ --syn-color-success-100: #ddfbe6;
73
+ --syn-color-success-200: #bcf6cf;
74
+ --syn-color-success-300: #84eca7;
75
+ --syn-color-success-400: #6ad88f;
76
+ --syn-color-success-500: #4fc275;
77
+ --syn-color-success-600: #34ad5c;
78
+ --syn-color-success-700: #1a9945;
79
+ --syn-color-success-800: #00852c;
80
+ --syn-color-success-900: #026524;
81
+ --syn-color-success-950: #003911;
82
+ --syn-color-warning-50: #fffbeb;
83
+ --syn-color-warning-100: #fff5c6;
84
+ --syn-color-warning-200: #ffe67c;
85
+ --syn-color-warning-300: #fbdb52;
86
+ --syn-color-warning-400: #f6d029;
87
+ --syn-color-warning-500: #f2c500;
88
+ --syn-color-warning-600: #d19800;
89
+ --syn-color-warning-700: #a66c02;
90
+ --syn-color-warning-800: #89540a;
91
+ --syn-color-warning-900: #74450f;
92
+ --syn-color-warning-950: #442404;
93
+ --syn-dimension-base: 4px; /** to be deprecated */
94
+ --syn-duration-extra-fast: 50ms;
95
+ --syn-duration-extra-slow: 1000ms;
96
+ --syn-duration-fast: 150ms;
97
+ --syn-duration-normal: 250ms;
98
+ --syn-duration-slow: 500ms;
99
+ --syn-focus-ring-color: var(--syn-color-primary-400);
100
+ --syn-focus-ring-offset: var(--syn-spacing-3x-small);
101
+ --syn-focus-ring-style: solid;
102
+ --syn-focus-ring-width: var(--syn-border-width-medium);
103
+ --syn-font-mono: 'Roboto Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; /** Coding font */
104
+ --syn-font-sans: 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; /** Main font */
105
+ --syn-font-sans-fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif, 'apple color emoji', 'segoe ui emoji', 'segoe ui symbol'; /** System font */
106
+ --syn-font-serif: Georgia, 'Times New Roman', serif; /** Shoelace compatibility DO NOT USE */
107
+ --syn-font-size-2x-large: 32px;
108
+ --syn-font-size-2x-small: 11px;
109
+ --syn-font-size-3x-large: 40px;
110
+ --syn-font-size-4x-large: 52px;
111
+ --syn-font-size-large: 20px;
112
+ --syn-font-size-medium: 16px;
113
+ --syn-font-size-small: 14px;
114
+ --syn-font-size-x-large: 24px;
115
+ --syn-font-size-x-small: 12px;
116
+ --syn-font-weight-bold: 600;
117
+ --syn-font-weight-light: 400; /** Shoelace compatibility DO NOT USE */
118
+ --syn-font-weight-normal: 400;
119
+ --syn-font-weight-semibold: 600;
120
+ --syn-input-background-color: var(--syn-color-neutral-0);
121
+ --syn-input-background-color-disabled: var(--syn-input-background-color);
122
+ --syn-input-background-color-focus: var(--syn-input-background-color);
123
+ --syn-input-background-color-hover: var(--syn-input-background-color);
124
+ --syn-input-border-color: var(--syn-color-neutral-700);
125
+ --syn-input-border-color-disabled: var(--syn-color-neutral-700);
126
+ --syn-input-border-color-focus: var(--syn-color-neutral-950);
127
+ --syn-input-border-color-focus-error: var(--syn-color-error-700);
128
+ --syn-input-border-color-hover: var(--syn-color-neutral-950);
129
+ --syn-input-border-radius-large: var(--syn-border-radius-none);
130
+ --syn-input-border-radius-medium: var(--syn-border-radius-none);
131
+ --syn-input-border-radius-small: var(--syn-border-radius-none);
132
+ --syn-input-border-width: 1px;
133
+ --syn-input-color: var(--syn-color-neutral-950);
134
+ --syn-input-color-disabled: var(--syn-color-neutral-950);
135
+ --syn-input-color-focus: var(--syn-color-neutral-950);
136
+ --syn-input-color-hover: var(--syn-color-neutral-950);
137
+ --syn-input-disabled-opacity: 0.5;
138
+ --syn-input-focus-ring-color: var(--syn-color-primary-400);
139
+ --syn-input-focus-ring-error: var(--syn-color-error-400);
140
+ --syn-input-focus-ring-offset: 0px;
141
+ --syn-input-font-family: var(--syn-font-sans);
142
+ --syn-input-font-size-large: var(--syn-font-size-large);
143
+ --syn-input-font-size-medium: var(--syn-font-size-medium);
144
+ --syn-input-font-size-small: var(--syn-font-size-small);
145
+ --syn-input-font-weight: var(--syn-font-weight-normal);
146
+ --syn-input-height-large: var(--syn-spacing-3x-large);
147
+ --syn-input-height-medium: var(--syn-spacing-2x-large);
148
+ --syn-input-height-small: 36px;
149
+ --syn-input-help-text-color: var(--syn-color-neutral-800);
150
+ --syn-input-help-text-color-error: var(--syn-color-error-700);
151
+ --syn-input-help-text-font-size-large: var(--syn-font-size-medium);
152
+ --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
153
+ --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
154
+ --syn-input-icon-color: var(--syn-color-neutral-800);
155
+ --syn-input-icon-color-focus: var(--syn-color-neutral-800);
156
+ --syn-input-icon-color-hover: var(--syn-color-neutral-800);
157
+ --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-500);
158
+ --syn-input-icon-icon-clearable-color-focus: var(--syn-color-neutral-500);
159
+ --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-500);
160
+ --syn-input-label-color: var(--syn-color-neutral-950);
161
+ --syn-input-label-font-size-large: var(--syn-font-size-large);
162
+ --syn-input-label-font-size-medium: var(--syn-font-size-medium);
163
+ --syn-input-label-font-size-small: var(--syn-font-size-small);
164
+ --syn-input-letter-spacing: normal;
165
+ --syn-input-placeholder-color: var(--syn-color-neutral-500);
166
+ --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
167
+ --syn-input-readonly-color: var(--syn-color-neutral-800);
168
+ --syn-input-readonly-color-disabled: var(--syn-color-neutral-800);
169
+ --syn-input-readonly-color-focus: var(--syn-color-neutral-950);
170
+ --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
171
+ --syn-input-readonly-background-color: var(--syn-color-neutral-50);
172
+ --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-50);
173
+ --syn-input-readonly-background-color-focus: var(--syn-color-neutral-50);
174
+ --syn-input-readonly-background-color-hover: var(--syn-color-neutral-50);
175
+ --syn-input-required-content: "*";
176
+ --syn-input-required-content-color: var(--syn-input-label-color);
177
+ --syn-input-required-content-offset: -2px;
178
+ --syn-input-spacing-large: var(--syn-spacing-large);
179
+ --syn-input-spacing-medium: var(--syn-spacing-medium);
180
+ --syn-input-spacing-small: var(--syn-spacing-small);
181
+ --syn-input-width: var(--syn-border-width-small);
182
+ --syn-letter-spacing-dense: normal; /** Shoelace compatibility DO NOT USE */
183
+ --syn-letter-spacing-denser: normal; /** Shoelace compatibility DO NOT USE */
184
+ --syn-letter-spacing-loose: normal; /** Shoelace compatibility DO NOT USE */
185
+ --syn-letter-spacing-looser: 2px; /** Shoelace compatibility DO NOT USE */
186
+ --syn-letter-spacing-normal: normal;
187
+ --syn-line-height-dense: 1.2; /** Shoelace compatibility DO NOT USE */
188
+ --syn-line-height-denser: 1; /** Shoelace compatibility DO NOT USE */
189
+ --syn-line-height-loose: 1.8; /** Shoelace compatibility DO NOT USE */
190
+ --syn-line-height-looser: 2.2; /** Shoelace compatibility DO NOT USE */
191
+ --syn-line-height-normal: 1.4; /** Shoelace compatibility DO NOT USE */
192
+ --syn-link-color: var(--syn-color-primary-600);
193
+ --syn-link-color-active: var(--syn-color-primary-950);
194
+ --syn-link-color-hover: var(--syn-color-primary-900);
195
+ --syn-link-quiet-color: var(--syn-typography-color-text);
196
+ --syn-link-quiet-color-active: var(--syn-color-primary-950);
197
+ --syn-link-quiet-color-hover: var(--syn-color-primary-900);
198
+ --syn-opacity-50: 0.5; /** 50% */
199
+ --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
200
+ --syn-panel-background-color: var(--syn-color-neutral-0);
201
+ --syn-panel-border-color: var(--syn-color-neutral-300);
202
+ --syn-panel-border-width: var(--syn-border-width-small);
203
+ --syn-spacing-2x-large: 48px;
204
+ --syn-spacing-2x-small: 4px;
205
+ --syn-spacing-3x-large: 64px;
206
+ --syn-spacing-3x-small: 2px;
207
+ --syn-spacing-4x-large: 96px;
208
+ --syn-spacing-4x-small: 1px;
209
+ --syn-spacing-5x-large: 128px;
210
+ --syn-spacing-large: 24px;
211
+ --syn-spacing-medium: 16px;
212
+ --syn-spacing-medium-large: 20px;
213
+ --syn-spacing-small: 12px;
214
+ --syn-spacing-x-large: 32px;
215
+ --syn-spacing-x-small: 8px;
216
+ --syn-text-decoration-default: none;
217
+ --syn-text-decoration-underline: underline;
218
+ --syn-toggle-size-large: var(--syn-spacing-large);
219
+ --syn-toggle-size-medium: var(--syn-spacing-medium);
220
+ --syn-toggle-size-small: 14px;
221
+ --syn-tooltip-arrow-size: 9px;
222
+ --syn-tooltip-background-color: var(--syn-color-neutral-950);
223
+ --syn-tooltip-border-radius: var(--syn-border-radius-small);
224
+ --syn-tooltip-color: var(--syn-typography-color-text-inverted);
225
+ --syn-tooltip-font-family: var(--syn-font-sans);
226
+ --syn-tooltip-font-size: var(--syn-font-size-small);
227
+ --syn-tooltip-font-weight: var(--syn-font-weight-normal);
228
+ --syn-tooltip-line-height: var(--syn-line-height-normal);
229
+ --syn-tooltip-padding: var(--syn-spacing-small);
230
+ --syn-transition-fast: 150ms; /** Shoelace compatibility DO NOT USE */
231
+ --syn-transition-medium: 250ms; /** Shoelace compatibility DO NOT USE */
232
+ --syn-transition-slow: 500ms; /** Shoelace compatibility DO NOT USE */
233
+ --syn-transition-x-fast: 50ms; /** Shoelace compatibility DO NOT USE */
234
+ --syn-transition-x-slow: 1000ms; /** Shoelace compatibility DO NOT USE */
235
+ --syn-typography-color-text: var(--syn-color-neutral-950);
236
+ --syn-typography-color-text-inverted: var(--syn-color-neutral-0);
237
+ --syn-z-index-dialog: 800; /** Shoelace compatibility DO NOT USE */
238
+ --syn-z-index-drawer: 700; /** Shoelace compatibility DO NOT USE */
239
+ --syn-z-index-dropdown: 900; /** Shoelace compatibility DO NOT USE */
240
+ --syn-z-index-toast: 950; /** Shoelace compatibility DO NOT USE */
241
+ --syn-z-index-tooltip: 1000; /** Shoelace compatibility DO NOT USE */
242
+ --syn-shadow-medium: 0px 1px 2px 0px rgba(13, 13, 13, 0.08), 0px 1px 4px 0px rgba(13, 13, 13, 0.08), 0px 2px 8px 0px rgba(13, 13, 13, 0.08);
243
+ --syn-shadow-large: 0px 0px 3px 0px rgba(13, 13, 13, 0.12), 0px 2px 6px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.16);
244
+ --syn-shadow-x-large: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 8px 24px 0px rgba(13, 13, 13, 0.12), 0px 16px 48px 0px rgba(13, 13, 13, 0.16);
245
+ --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.12), 0px 4px 12px 0px rgba(13, 13, 13, 0.16);
246
+ --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(13, 13, 13, 0.12), 0px -3px 8px 0px rgba(13, 13, 13, 0.12), 0px -4px 12px 0px rgba(13, 13, 13, 0.16);
247
+ --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(13, 13, 13, 0.12), -3px 0px 8px 0px rgba(13, 13, 13, 0.12), -4px 0px 12px 0px rgba(13, 13, 13, 0.16);
248
+ --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(13, 13, 13, 0.12), 3px 0px 8px 0px rgba(13, 13, 13, 0.12), 4px 0px 12px 0px rgba(13, 13, 13, 0.16);
249
+ --syn-shadow-x-small: 0px 1px 2px 0px rgba(13, 13, 13, 0.04), 0px 1px 4px 0px rgba(13, 13, 13, 0.04), 0px 2px 8px 0px rgba(13, 13, 13, 0.04);
250
+ --syn-shadow-small: 0px 1px 2px 0px rgba(13, 13, 13, 0.06), 0px 1px 4px 0px rgba(13, 13, 13, 0.06), 0px 2px 8px 0px rgba(13, 13, 13, 0.06);
251
+ --syn-body-x-small-regular: 400 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
252
+ --syn-body-x-small-semibold: 600 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
253
+ --syn-body-x-small-bold: 600 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
254
+ --syn-body-small-regular: 400 14px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
255
+ --syn-body-small-semibold: 600 14px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
256
+ --syn-body-small-bold: 600 14px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
257
+ --syn-body-medium-regular: 400 16px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
258
+ --syn-body-medium-semibold: 600 16px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
259
+ --syn-body-medium-bold: 600 16px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
260
+ --syn-body-large-regular: 400 20px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
261
+ --syn-body-large-semibold: 600 20px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
262
+ --syn-body-large-bold: 600 20px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
263
+ --syn-heading-large: 600 20px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
264
+ --syn-heading-x-large: 600 24px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
265
+ --syn-heading-2x-large: 600 32px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
266
+ --syn-heading-3x-large: 600 40px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
267
+ --syn-focus-ring: var(--syn-focus-ring-style) var(--syn-focus-ring-width) var(--syn-focus-ring-color);
268
+ }
package/metadata/static/components/syn-dialog/docs.md CHANGED
@@ -5,7 +5,6 @@ Dialogs, sometimes called "modals", appear above the page and require the user's
5
5
  ```html
6
6
  <syn-dialog open="" label="Dialog">
7
7
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
8
-
9
8
  <span slot="footer"> </span>
10
9
  <syn-button
11
10
  class="default-close-icon"
@@ -15,8 +14,7 @@ Dialogs, sometimes called "modals", appear above the page and require the user's
15
14
  size="medium"
16
15
  >Close</syn-button
17
16
  >
18
- <span slot="footer"> </span>
19
- <span slot="footer"> </span>
17
+ <span slot="footer"> </span> <span slot="footer"> </span>
20
18
  </syn-dialog>
21
19
 
22
20
  <syn-button
package/metadata/static/components/syn-drawer/docs.md CHANGED
@@ -5,7 +5,6 @@ Drawers slide in from a container to expose additional options and information.
5
5
  ```html
6
6
  <syn-drawer open="" label="Drawer" placement="end">
7
7
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
8
-
9
8
  <span slot="footer"> </span>
10
9
  <syn-button
11
10
  class="close-icon"
@@ -15,8 +14,7 @@ Drawers slide in from a container to expose additional options and information.
15
14
  size="medium"
16
15
  >Close</syn-button
17
16
  >
18
- <span slot="footer"> </span>
19
- <span slot="footer"> </span>
17
+ <span slot="footer"> </span> <span slot="footer"> </span>
20
18
  </syn-drawer>
21
19
 
22
20
  <syn-button
package/metadata/static/setup/icon-usage.md CHANGED
@@ -32,7 +32,8 @@ This can either be done manually or with the help of the bundler.
32
32
 
33
33
  With the upgrade to Synergy 3.0, new icons will be used.
34
34
  Those icons are already available as assets in the \`@synergy-design-system/assets\` package.
35
- When using the new icons, you have to make sure that the icons are available in the \`assets/icons/\` directory of your project as outlined below.
35
+ When using the new icons, you have to make sure that the icons are available in the \`assets/icons/\` directory of your project.
36
+ The new SICK 2025 icons will be available as `outline` and `fill` variant. `Outline` is the default icon variant and should be used in most cases. `Fill` icons have a slighty different naming. They have the same name as the `outline` icons, but with a suffix of `_fill`. If the `fill` icons should be used without the `_fill` suffix, the icon names need to be renamed. For some examples see the following subchapters.
36
37
 
37
38
  System icons come bundled with the \`@synergy-design-system/components\` package. You may switch to the new icons with the new \`setSystemIconLibrary\` utility provided.
38
39
  Please have a look at the following example to see how to switch the icon library.
@@ -58,7 +59,10 @@ For more information have a look at the [angular documentation](https://angular.
58
59
 
59
60
  Here's an example that copies the Synergy icons to the path **assets/icons/** of an angular project:
60
61
 
62
+ ##### Synergy icons SICK 2018
63
+
61
64
  ```json
65
+ // angular.json
62
66
  "assets": [
63
67
  {
64
68
  "glob": "**/*",
@@ -68,12 +72,56 @@ Here's an example that copies the Synergy icons to the path **assets/icons/** of
68
72
  ],
69
73
  ```
70
74
 
75
+ ```html
76
+ <!-- Usage -->
77
+ <syn-icon name="wallpaper"> <syn-icon /></syn-icon>
78
+ ```
79
+
80
+ ##### Synergy icons SICK 2025 outline
81
+
82
+ ```json
83
+ // angular.json
84
+ "assets": [
85
+ {
86
+ "glob": "**/*",
87
+ "input": "./node_modules/@synergy-design-system/assets/src/sick2025/outline",
88
+ "output": "/assets/icons"
89
+ }
90
+ ],
91
+ ```
92
+
93
+ ```html
94
+ <!-- Usage -->
95
+ <syn-icon name="wallpaper"> <syn-icon /></syn-icon>
96
+ ```
97
+
98
+ ##### Synergy icons SICK 2025 fill
99
+
100
+ ```json
101
+ // angular.json
102
+ "assets": [
103
+ {
104
+ "glob": "**/*",
105
+ "input": "./node_modules/@synergy-design-system/assets/src/sick2025/fill",
106
+ "output": "/assets/icons"
107
+ }
108
+ ],
109
+ ```
110
+
111
+ ```html
112
+ <!-- Usage -->
113
+ <syn-icon name="wallpaper_fill"> <syn-icon /></syn-icon>
114
+ ```
115
+
71
116
  #### Vite
72
117
 
73
118
  Including assets from another library in vite project can be achieved via using the [vite-plugin-static-copy plugin](https://www.npmjs.com/package/vite-plugin-static-copy).
74
119
  Here's an example with adapted vite.config.ts that copies the Synergy icons to the path **assets/icons/** of a vite project:
75
120
 
121
+ ##### Synergy icons SICK 2018
122
+
76
123
  ```js
124
+ // Vite config
77
125
  import { defineConfig } from "vite";
78
126
  import { viteStaticCopy } from "vite-plugin-static-copy";
79
127
 
@@ -91,6 +139,93 @@ export default defineConfig({
91
139
  });
92
140
  ```
93
141
 
142
+ ```html
143
+ <!-- Usage -->
144
+ <syn-icon name="wallpaper"> <syn-icon /></syn-icon>
145
+ ```
146
+
147
+ ##### Synergy icons SICK 2025 outline
148
+
149
+ ```js
150
+ // Vite config
151
+ import { defineConfig } from "vite";
152
+ import { viteStaticCopy } from "vite-plugin-static-copy";
153
+
154
+ export default defineConfig({
155
+ plugins: [
156
+ viteStaticCopy({
157
+ targets: [
158
+ {
159
+ src: "node_modules/@synergy-design-system/assets/src/sick2025/outline/*",
160
+ dest: "./assets/icons/",
161
+ },
162
+ ],
163
+ }),
164
+ ],
165
+ });
166
+ ```
167
+
168
+ ```html
169
+ <!-- Usage -->
170
+ <syn-icon name="wallpaper"> <syn-icon /></syn-icon>
171
+ ```
172
+
173
+ ##### Synergy icons SICK 2025 fill
174
+
175
+ Usage with `_fill` suffix:
176
+
177
+ ```js
178
+ // Vite config
179
+ import { defineConfig } from "vite";
180
+ import { viteStaticCopy } from "vite-plugin-static-copy";
181
+
182
+ export default defineConfig({
183
+ plugins: [
184
+ viteStaticCopy({
185
+ targets: [
186
+ {
187
+ src: "node_modules/@synergy-design-system/assets/src/sick2025/fill/*",
188
+ dest: "./assets/icons/",
189
+ },
190
+ ],
191
+ }),
192
+ ],
193
+ });
194
+ ```
195
+
196
+ ```html
197
+ <!-- Usage -->
198
+ <syn-icon name="wallpaper_fill"> <syn-icon /></syn-icon>
199
+ ```
200
+
201
+ Usage without `_fill` suffix by renaming files:
202
+
203
+ ```js
204
+ // Vite config
205
+ import { defineConfig } from "vite";
206
+ import { viteStaticCopy } from "vite-plugin-static-copy";
207
+
208
+ export default defineConfig({
209
+ plugins: [
210
+ viteStaticCopy({
211
+ targets: [
212
+ {
213
+ src: "node_modules/@synergy-design-system/assets/src/sick2025/fill/*",
214
+ dest: "./assets/icons/",
215
+ rename: (name, extension) =>
216
+ `${name.replace(/_fill$/, "")}.${extension}`,
217
+ },
218
+ ],
219
+ }),
220
+ ],
221
+ });
222
+ ```
223
+
224
+ ```html
225
+ <!-- Usage -->
226
+ <syn-icon name="wallpaper"> <syn-icon /></syn-icon>
227
+ ```
228
+
94
229
  ### How to use a custom icon library
95
230
 
96
231
  To register an additional icon library, use the `registerIconLibrary()` function that's exported from `utilities/icon-library.js`.
package/package.json CHANGED
@@ -30,11 +30,11 @@
30
30
  "semantic-release-monorepo": "7.0.5",
31
31
  "ts-jest": "^29.4.0",
32
32
  "typescript": "^5.8.3",
33
+ "@synergy-design-system/docs": "0.1.0",
33
34
  "@synergy-design-system/components": "2.40.0",
35
+ "@synergy-design-system/styles": "1.7.2",
34
36
  "@synergy-design-system/eslint-config-syn": "^0.1.0",
35
- "@synergy-design-system/docs": "0.1.0",
36
- "@synergy-design-system/tokens": "^2.22.0",
37
- "@synergy-design-system/styles": "1.7.2"
37
+ "@synergy-design-system/tokens": "^2.23.0"
38
38
  },
39
39
  "exports": {
40
40
  ".": {
@@ -119,7 +119,7 @@
119
119
  "directory": "packages/mcp"
120
120
  },
121
121
  "type": "module",
122
- "version": "1.1.0",
122
+ "version": "1.2.0",
123
123
  "scripts": {
124
124
  "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
125
125
  "build:all": "pnpm run build && pnpm run build:storybook",