@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/sick2018_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-sick2018-light, .syn-theme-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: #fffbea;
26
+ --syn-color-accent-100: #fff2c5;
27
+ --syn-color-accent-200: #ffe685;
28
+ --syn-color-accent-300: #ffd246;
29
+ --syn-color-accent-400: #ffbd1b;
30
+ --syn-color-accent-500: #f39200;
31
+ --syn-color-accent-600: #e27200;
32
+ --syn-color-accent-700: #bb4d02;
33
+ --syn-color-accent-800: #983b08;
34
+ --syn-color-accent-900: #7c310b;
35
+ --syn-color-accent-950: #481700;
36
+ --syn-color-error-50: #fff0f2;
37
+ --syn-color-error-100: #ffdee2;
38
+ --syn-color-error-200: #ffc3c9;
39
+ --syn-color-error-300: #ff98a4;
40
+ --syn-color-error-400: #ff5d70;
41
+ --syn-color-error-500: #ff2b44;
42
+ --syn-color-error-600: #ea0823;
43
+ --syn-color-error-700: #d0051d;
44
+ --syn-color-error-800: #ab091c;
45
+ --syn-color-error-900: #8d0f1e;
46
+ --syn-color-error-950: #4e010a;
47
+ --syn-color-neutral-0: #ffffff;
48
+ --syn-color-neutral-50: #f9fafb;
49
+ --syn-color-neutral-100: #f2f3f6;
50
+ --syn-color-neutral-200: #e8ebec;
51
+ --syn-color-neutral-300: #d5dbdd;
52
+ --syn-color-neutral-400: #bac2c6;
53
+ --syn-color-neutral-500: #9ea9ae;
54
+ --syn-color-neutral-600: #859298;
55
+ --syn-color-neutral-700: #737f85;
56
+ --syn-color-neutral-800: #5e676b;
57
+ --syn-color-neutral-900: #4c5357;
58
+ --syn-color-neutral-950: #31373a;
59
+ --syn-color-neutral-1000: #000000;
60
+ --syn-color-primary-50: #f0f9ff;
61
+ --syn-color-primary-100: #e0f1fe;
62
+ --syn-color-primary-200: #b9e5fe;
63
+ --syn-color-primary-300: #7cd1fd;
64
+ --syn-color-primary-400: #36bbfa;
65
+ --syn-color-primary-500: #0ca2eb;
66
+ --syn-color-primary-600: #007cc1;
67
+ --syn-color-primary-700: #0166a3;
68
+ --syn-color-primary-800: #065786;
69
+ --syn-color-primary-900: #0b486f;
70
+ --syn-color-primary-950: #072e4a;
71
+ --syn-color-success-50: #f5fde8;
72
+ --syn-color-success-100: #e7facd;
73
+ --syn-color-success-200: #d1f4a2;
74
+ --syn-color-success-300: #b0eb6b;
75
+ --syn-color-success-400: #93dd3e;
76
+ --syn-color-success-500: #73c31f;
77
+ --syn-color-success-600: #63b017;
78
+ --syn-color-success-700: #437714;
79
+ --syn-color-success-800: #395e16;
80
+ --syn-color-success-900: #315017;
81
+ --syn-color-success-950: #172c07;
82
+ --syn-color-warning-50: #fefce8;
83
+ --syn-color-warning-100: #fdf7c4;
84
+ --syn-color-warning-200: #fcec8c;
85
+ --syn-color-warning-300: #f9da4b;
86
+ --syn-color-warning-400: #f5c413;
87
+ --syn-color-warning-500: #e5ae0d;
88
+ --syn-color-warning-600: #c68608;
89
+ --syn-color-warning-700: #9e5f0a;
90
+ --syn-color-warning-800: #834b10;
91
+ --syn-color-warning-900: #6f3e14;
92
+ --syn-color-warning-950: #411f07;
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: 'Open Sans', -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: 700;
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: var(--syn-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: -0.24px; /** Shoelace compatibility DO NOT USE */
183
+ --syn-letter-spacing-denser: -0.48px; /** Shoelace compatibility DO NOT USE */
184
+ --syn-letter-spacing-loose: 1.2px; /** Shoelace compatibility DO NOT USE */
185
+ --syn-letter-spacing-looser: 2.4px; /** 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(49, 55, 58, 0.08), 0px 1px 4px 0px rgba(49, 55, 58, 0.08), 0px 2px 8px 0px rgba(49, 55, 58, 0.08);
243
+ --syn-shadow-large: 0px 0px 3px 0px rgba(49, 55, 58, 0.12), 0px 2px 6px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.16);
244
+ --syn-shadow-x-large: 0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 8px 24px 0px rgba(49, 55, 58, 0.12), 0px 16px 48px 0px rgba(49, 55, 58, 0.16);
245
+ --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.12), 0px 4px 12px 0px rgba(49, 55, 58, 0.16);
246
+ --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(49, 55, 58, 0.12), 0px -3px 8px 0px rgba(49, 55, 58, 0.12), 0px -4px 12px 0px rgba(49, 55, 58, 0.16);
247
+ --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(49, 55, 58, 0.12), -3px 0px 8px 0px rgba(49, 55, 58, 0.12), -4px 0px 12px 0px rgba(49, 55, 58, 0.16);
248
+ --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(49, 55, 58, 0.12), 3px 0px 8px 0px rgba(49, 55, 58, 0.12), 4px 0px 12px 0px rgba(49, 55, 58, 0.16);
249
+ --syn-shadow-x-small: 0px 1px 2px 0px rgba(49, 55, 58, 0.04), 0px 1px 4px 0px rgba(49, 55, 58, 0.04), 0px 2px 8px 0px rgba(49, 55, 58, 0.04);
250
+ --syn-shadow-small: 0px 1px 2px 0px rgba(49, 55, 58, 0.06), 0px 1px 4px 0px rgba(49, 55, 58, 0.06), 0px 2px 8px 0px rgba(49, 55, 58, 0.06);
251
+ --syn-body-x-small-regular: 400 12px/1.4 'Open Sans', -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 'Open Sans', -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: 700 12px/1.4 'Open Sans', -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 'Open Sans', -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 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
256
+ --syn-body-small-bold: 700 14px/1.4 'Open Sans', -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 'Open Sans', -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 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
259
+ --syn-body-medium-bold: 700 16px/1.4 'Open Sans', -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 'Open Sans', -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 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
262
+ --syn-body-large-bold: 700 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
263
+ --syn-heading-large: 700 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
264
+ --syn-heading-x-large: 700 24px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
265
+ --syn-heading-2x-large: 700 32px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
266
+ --syn-heading-3x-large: 700 40px/1.2 'Open Sans', -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_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
+ }