@synergy-design-system/mcp 1.0.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 (25) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/build/static.js +5 -0
  3. package/dist/tools/asset-info.js +47 -15
  4. package/dist/tools/asset-list.js +2 -2
  5. package/dist/utilities/assets.d.ts +2 -1
  6. package/dist/utilities/assets.js +1 -1
  7. package/metadata/checksum.txt +1 -1
  8. package/metadata/packages/assets/CHANGELOG.md +7 -0
  9. package/metadata/packages/assets/README.md +3 -2
  10. package/metadata/packages/components/components/syn-radio/component.custom.styles.ts +9 -0
  11. package/metadata/packages/components/migration/migration-synergy-v3.md +144 -0
  12. package/metadata/packages/components/static/CHANGELOG.md +7 -0
  13. package/metadata/packages/tokens/CHANGELOG.md +7 -0
  14. package/metadata/packages/tokens/README.md +40 -17
  15. package/metadata/packages/tokens/dark.css +5 -5
  16. package/metadata/packages/tokens/light.css +5 -5
  17. package/metadata/packages/tokens/sick2018_dark.css +268 -0
  18. package/metadata/packages/tokens/sick2018_light.css +268 -0
  19. package/metadata/packages/tokens/sick2025_dark.css +268 -0
  20. package/metadata/packages/tokens/sick2025_light.css +268 -0
  21. package/metadata/static/components/syn-dialog/docs.md +1 -3
  22. package/metadata/static/components/syn-drawer/docs.md +1 -3
  23. package/metadata/static/migration/index.md +7 -1
  24. package/metadata/static/setup/icon-usage.md +172 -0
  25. package/package.json +4 -4
package/metadata/packages/tokens/sick2025_dark.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-dark {
8
+ color-scheme: dark;
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: #450709;
37
+ --syn-color-error-100: #6c0c0e;
38
+ --syn-color-error-200: #941013;
39
+ --syn-color-error-300: #bc1519;
40
+ --syn-color-error-400: #e6191e;
41
+ --syn-color-error-500: #f93a3f;
42
+ --syn-color-error-600: #ff696d;
43
+ --syn-color-error-700: #ffa0a2;
44
+ --syn-color-error-800: #ffcfd1;
45
+ --syn-color-error-900: #ffe3e4;
46
+ --syn-color-error-950: #fff1f1;
47
+ --syn-color-neutral-0: #000414;
48
+ --syn-color-neutral-50: #00061f;
49
+ --syn-color-neutral-100: #000a37;
50
+ --syn-color-neutral-200: #141e47;
51
+ --syn-color-neutral-300: #262f55;
52
+ --syn-color-neutral-400: #404769;
53
+ --syn-color-neutral-500: #4d5473;
54
+ --syn-color-neutral-600: #5f678e;
55
+ --syn-color-neutral-700: #777ea4;
56
+ --syn-color-neutral-800: #9298b6;
57
+ --syn-color-neutral-900: #adb2c8;
58
+ --syn-color-neutral-950: #c8ccdb;
59
+ --syn-color-neutral-1000: #e3e5ed;
60
+ --syn-color-primary-50: #0e275d;
61
+ --syn-color-primary-100: #0d3f9b;
62
+ --syn-color-primary-200: #0845c5;
63
+ --syn-color-primary-300: #005aff;
64
+ --syn-color-primary-400: #066fff;
65
+ --syn-color-primary-500: #3183fe;
66
+ --syn-color-primary-600: #5e97fc;
67
+ --syn-color-primary-700: #91bbff;
68
+ --syn-color-primary-800: #ccdeff;
69
+ --syn-color-primary-900: #dae7ff;
70
+ --syn-color-primary-950: #eff5ff;
71
+ --syn-color-success-50: #003911;
72
+ --syn-color-success-100: #026524;
73
+ --syn-color-success-200: #00852c;
74
+ --syn-color-success-300: #1a9945;
75
+ --syn-color-success-400: #34ad5c;
76
+ --syn-color-success-500: #4fc275;
77
+ --syn-color-success-600: #6ad88f;
78
+ --syn-color-success-700: #84eca7;
79
+ --syn-color-success-800: #bcf6cf;
80
+ --syn-color-success-900: #ddfbe6;
81
+ --syn-color-success-950: #f0fdf4;
82
+ --syn-color-warning-50: #442404;
83
+ --syn-color-warning-100: #74450f;
84
+ --syn-color-warning-200: #89540a;
85
+ --syn-color-warning-300: #a66c02;
86
+ --syn-color-warning-400: #d19800;
87
+ --syn-color-warning-500: #f2c500;
88
+ --syn-color-warning-600: #f6d029;
89
+ --syn-color-warning-700: #fbdb52;
90
+ --syn-color-warning-800: #ffe67c;
91
+ --syn-color-warning-900: #fff5c6;
92
+ --syn-color-warning-950: #fffbeb;
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/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/migration/index.md CHANGED
@@ -4,7 +4,13 @@ As an llm, I want you to obey to the following rules:
4
4
 
5
5
  - The migration is available as a markdown document
6
6
 
7
- The following formatting rules are used for the migration guides:
7
+ The following formatting rules are used for the list of breaking changes:
8
8
 
9
9
  - Each headline 2 (`##`) defines a major version of the new major release
10
10
  - Each headline 3 (`###`) describes a component or feature that was changed
11
+
12
+ Migration from Synergy 2.0 to Synergy 3.0 (a.k.a. Brand Update):
13
+
14
+ - There are handwritten lists of changes that highlight the differences between Synergy V2 and Synergy V3.
15
+ - The document is structured as a list of breaking changes.
16
+ - The list of breaking changes is structured into blocks that define the change and a list of migration steps.