@synergy-design-system/tokens 2.48.2 → 3.0.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 (16) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/README.md +2 -0
  3. package/dist/js/index.d.ts +6 -1
  4. package/dist/js/index.js +6 -1
  5. package/dist/scss/_tokens.scss +2 -1
  6. package/dist/themes/dark.css +237 -236
  7. package/dist/themes/light.css +221 -220
  8. package/dist/themes/sick2018_dark.css +4 -3
  9. package/dist/themes/sick2018_light.css +4 -3
  10. package/dist/themes/sick2025_dark.css +4 -3
  11. package/dist/themes/sick2025_light.css +4 -3
  12. package/package.json +1 -1
  13. package/src/figma-variables/output/sick2018-dark.json +16 -1
  14. package/src/figma-variables/output/sick2018-light.json +15 -0
  15. package/src/figma-variables/output/sick2025-dark.json +15 -0
  16. package/src/figma-variables/output/sick2025-light.json +15 -0
package/dist/themes/light.css CHANGED
@@ -1,41 +1,41 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.48.1
2
+ * @synergy-design-system/tokens version 2.48.2
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
6
6
 
7
- :root, .syn-sick2018-light, .syn-theme-light {
7
+ :root, .syn-sick2025-light, .syn-theme-light {
8
8
  color-scheme: light;
9
9
 
10
- --syn-alert-error-color-background: var(--syn-panel-background-color);
11
- --syn-alert-error-color-border: var(--syn-panel-border-color);
12
- --syn-alert-error-color-icon: var(--syn-color-error-600);
13
- --syn-alert-error-color-indicator: var(--syn-color-error-600);
14
- --syn-alert-informative-color-background: var(--syn-panel-background-color);
15
- --syn-alert-informative-color-border: var(--syn-panel-border-color);
16
- --syn-alert-informative-color-icon: var(--syn-color-info-600);
17
- --syn-alert-informative-color-indicator: var(--syn-color-info-600);
18
- --syn-alert-neutral-color-background: var(--syn-panel-background-color);
19
- --syn-alert-neutral-color-border: var(--syn-panel-border-color);
20
- --syn-alert-neutral-color-icon: var(--syn-color-neutral-800);
21
- --syn-alert-neutral-color-indicator: var(--syn-color-neutral-800);
22
- --syn-alert-success-color-background: var(--syn-panel-background-color);
23
- --syn-alert-success-color-border: var(--syn-panel-border-color);
24
- --syn-alert-success-color-icon: var(--syn-color-success-500);
25
- --syn-alert-success-color-indicator: var(--syn-color-success-500);
26
- --syn-alert-warning-color-background: var(--syn-panel-background-color);
27
- --syn-alert-warning-color-border: var(--syn-panel-border-color);
28
- --syn-alert-warning-color-icon: var(--syn-color-warning-400);
29
- --syn-alert-warning-color-indicator: var(--syn-color-warning-400);
30
- --syn-badge-error-color-background: var(--syn-color-error-600);
31
- --syn-badge-error-color-text: var(--syn-typography-color-text-inverted);
32
- --syn-badge-informative-color-background: var(--syn-color-info-600);
33
- --syn-badge-informative-color-text: var(--syn-typography-color-text-inverted);
34
- --syn-badge-neutral-color-background: var(--syn-color-neutral-800);
35
- --syn-badge-neutral-color-text: var(--syn-typography-color-text-inverted);
36
- --syn-badge-success-color-background: var(--syn-color-success-500);
10
+ --syn-alert-error-color-background: var(--syn-namur-error-color-background);
11
+ --syn-alert-error-color-border: var(--syn-namur-error-color-background);
12
+ --syn-alert-error-color-icon: var(--syn-typography-color-text);
13
+ --syn-alert-error-color-indicator: var(--syn-namur-error-color);
14
+ --syn-alert-informative-color-background: var(--syn-namur-info-color-background);
15
+ --syn-alert-informative-color-border: var(--syn-namur-info-color-background);
16
+ --syn-alert-informative-color-icon: var(--syn-typography-color-text);
17
+ --syn-alert-informative-color-indicator: var(--syn-namur-info-color);
18
+ --syn-alert-neutral-color-background: var(--syn-namur-neutral-color-background);
19
+ --syn-alert-neutral-color-border: var(--syn-namur-neutral-color-background);
20
+ --syn-alert-neutral-color-icon: var(--syn-typography-color-text);
21
+ --syn-alert-neutral-color-indicator: var(--syn-namur-neutral-color);
22
+ --syn-alert-success-color-background: var(--syn-namur-success-color-background);
23
+ --syn-alert-success-color-border: var(--syn-namur-success-color-background);
24
+ --syn-alert-success-color-icon: var(--syn-typography-color-text);
25
+ --syn-alert-success-color-indicator: var(--syn-namur-success-color);
26
+ --syn-alert-warning-color-background: var(--syn-namur-warning-color-background);
27
+ --syn-alert-warning-color-border: var(--syn-namur-warning-color-background);
28
+ --syn-alert-warning-color-icon: var(--syn-typography-color-text);
29
+ --syn-alert-warning-color-indicator: var(--syn-namur-warning-color);
30
+ --syn-badge-error-color-background: var(--syn-namur-error-color);
31
+ --syn-badge-error-color-text: var(--syn-typography-color-text);
32
+ --syn-badge-informative-color-background: var(--syn-namur-info-color);
33
+ --syn-badge-informative-color-text: var(--syn-typography-color-text);
34
+ --syn-badge-neutral-color-background: var(--syn-namur-neutral-color);
35
+ --syn-badge-neutral-color-text: var(--syn-typography-color-text);
36
+ --syn-badge-success-color-background: var(--syn-namur-success-color);
37
37
  --syn-badge-success-color-text: var(--syn-typography-color-text);
38
- --syn-badge-warning-color-background: var(--syn-color-warning-400);
38
+ --syn-badge-warning-color-background: var(--syn-namur-warning-color);
39
39
  --syn-badge-warning-color-text: var(--syn-typography-color-text);
40
40
  --syn-border-radius-circle: 9999px;
41
41
  --syn-border-radius-large: 8px;
@@ -49,10 +49,10 @@
49
49
  --syn-border-width-none: 0px; /** None */
50
50
  --syn-border-width-small: 1px; /** Small */
51
51
  --syn-border-width-x-large: 4px; /** X Large */
52
- --syn-breadcrumb-color: var(--syn-color-neutral-500);
53
- --syn-button-border-radius-large: var(--syn-input-border-radius-large);
54
- --syn-button-border-radius-medium: var(--syn-input-border-radius-medium);
55
- --syn-button-border-radius-small: var(--syn-input-border-radius-small);
52
+ --syn-breadcrumb-color: var(--syn-typography-color-text);
53
+ --syn-button-border-radius-large: var(--syn-border-radius-pill);
54
+ --syn-button-border-radius-medium: var(--syn-border-radius-pill);
55
+ --syn-button-border-radius-small: var(--syn-border-radius-pill);
56
56
  --syn-button-color: var(--syn-interactive-emphasis-color);
57
57
  --syn-button-color-active: var(--syn-interactive-emphasis-color-active);
58
58
  --syn-button-color-hover: var(--syn-interactive-emphasis-color-hover);
@@ -62,120 +62,120 @@
62
62
  --syn-button-font-size-large: var(--syn-font-size-large);
63
63
  --syn-button-font-size-medium: var(--syn-font-size-medium);
64
64
  --syn-button-font-size-small: var(--syn-font-size-small);
65
- --syn-button-outline-color-active: none;
66
- --syn-button-outline-color-hover: none;
67
- --syn-button-outline-color-text: var(--syn-color-primary-600);
68
- --syn-button-outline-color-text-active: var(--syn-color-primary-950);
69
- --syn-button-outline-color-text-hover: var(--syn-color-primary-900);
65
+ --syn-button-outline-color-active: var(--syn-interactive-emphasis-color-active);
66
+ --syn-button-outline-color-hover: var(--syn-interactive-emphasis-color-hover);
67
+ --syn-button-outline-color-text: var(--syn-typography-color-text);
68
+ --syn-button-outline-color-text-active: var(--syn-typography-color-text-inverted);
69
+ --syn-button-outline-color-text-hover: var(--syn-typography-color-text-inverted);
70
70
  --syn-button-text-color-text: var(--syn-button-color);
71
71
  --syn-button-text-color-text-active: var(--syn-button-color-active);
72
72
  --syn-button-text-color-text-hover: var(--syn-button-color-hover);
73
- --syn-checkbox-border-radius: var(--syn-border-radius-none);
74
- --syn-color-accent-50: #fffbea;
75
- --syn-color-accent-100: #fff2c5;
76
- --syn-color-accent-200: #ffe685;
77
- --syn-color-accent-300: #ffd246;
78
- --syn-color-accent-400: #ffbd1b;
79
- --syn-color-accent-500: #f39200;
80
- --syn-color-accent-600: #e27200;
81
- --syn-color-accent-700: #bb4d02;
82
- --syn-color-accent-800: #983b08;
83
- --syn-color-accent-900: #7c310b;
84
- --syn-color-accent-950: #481700;
85
- --syn-color-critical-50: #fffbea;
86
- --syn-color-critical-100: #fff2c5;
87
- --syn-color-critical-200: #ffe685;
88
- --syn-color-critical-300: #ffd246;
89
- --syn-color-critical-400: #ffbd1b;
90
- --syn-color-critical-500: #f39200;
91
- --syn-color-critical-600: #e27200;
92
- --syn-color-critical-700: #bb4d02;
93
- --syn-color-critical-800: #983b08;
94
- --syn-color-critical-900: #7c310b;
95
- --syn-color-critical-950: #481700;
96
- --syn-color-error-50: #fff0f2;
97
- --syn-color-error-100: #ffdee2;
98
- --syn-color-error-200: #ffc3c9;
99
- --syn-color-error-300: #ff98a4;
100
- --syn-color-error-400: #ff5d70;
101
- --syn-color-error-500: #ff2b44;
102
- --syn-color-error-600: #ea0823;
103
- --syn-color-error-700: #d0051d;
104
- --syn-color-error-800: #ab091c;
105
- --syn-color-error-900: #8d0f1e;
106
- --syn-color-error-950: #4e010a;
107
- --syn-color-info-50: #f0f9ff;
108
- --syn-color-info-100: #e0f1fe;
109
- --syn-color-info-200: #b9e5fe;
110
- --syn-color-info-300: #7cd1fd;
111
- --syn-color-info-400: #36bbfa;
112
- --syn-color-info-500: #0ca2eb;
113
- --syn-color-info-600: #007cc1;
114
- --syn-color-info-700: #0166a3;
115
- --syn-color-info-800: #065786;
116
- --syn-color-info-900: #0b486f;
117
- --syn-color-info-950: #072e4a;
73
+ --syn-checkbox-border-radius: var(--syn-border-radius-small);
74
+ --syn-color-accent-50: #e9f8ed;
75
+ --syn-color-accent-100: #d2f0dc;
76
+ --syn-color-accent-200: #bbe8c8;
77
+ --syn-color-accent-300: #a5e1b9;
78
+ --syn-color-accent-400: #83d2a3;
79
+ --syn-color-accent-500: #4fb87c;
80
+ --syn-color-accent-600: #2d9c60;
81
+ --syn-color-accent-700: #1e7d4c;
82
+ --syn-color-accent-800: #18643e;
83
+ --syn-color-accent-900: #155033;
84
+ --syn-color-accent-950: #092518;
85
+ --syn-color-critical-50: #fffbec;
86
+ --syn-color-critical-100: #fff7d3;
87
+ --syn-color-critical-200: #ffeba5;
88
+ --syn-color-critical-300: #ffdb6d;
89
+ --syn-color-critical-400: #ffbf32;
90
+ --syn-color-critical-500: #ffa80a;
91
+ --syn-color-critical-600: #ff9100;
92
+ --syn-color-critical-700: #cc6b02;
93
+ --syn-color-critical-800: #a1520b;
94
+ --syn-color-critical-900: #82450c;
95
+ --syn-color-critical-950: #462104;
96
+ --syn-color-error-50: #fff1f1;
97
+ --syn-color-error-100: #ffe3e4;
98
+ --syn-color-error-200: #ffcfd1;
99
+ --syn-color-error-300: #ffa0a2;
100
+ --syn-color-error-400: #ff696d;
101
+ --syn-color-error-500: #f93a3f;
102
+ --syn-color-error-600: #e6191e;
103
+ --syn-color-error-700: #bc1519;
104
+ --syn-color-error-800: #941013;
105
+ --syn-color-error-900: #6c0c0e;
106
+ --syn-color-error-950: #450709;
107
+ --syn-color-info-50: #effaff;
108
+ --syn-color-info-100: #dff4ff;
109
+ --syn-color-info-200: #a6e9ff;
110
+ --syn-color-info-300: #78ddff;
111
+ --syn-color-info-400: #26c9ff;
112
+ --syn-color-info-500: #06b6f1;
113
+ --syn-color-info-600: #0092ce;
114
+ --syn-color-info-700: #0075a7;
115
+ --syn-color-info-800: #02628a;
116
+ --syn-color-info-900: #085172;
117
+ --syn-color-info-950: #06334b;
118
118
  --syn-color-neutral-0: #ffffff;
119
- --syn-color-neutral-50: #f9fafb;
120
- --syn-color-neutral-100: #f2f3f6;
121
- --syn-color-neutral-200: #e8ebec;
122
- --syn-color-neutral-300: #d5dbdd;
123
- --syn-color-neutral-400: #bac2c6;
124
- --syn-color-neutral-500: #9ea9ae;
125
- --syn-color-neutral-600: #859298;
126
- --syn-color-neutral-700: #737f85;
127
- --syn-color-neutral-800: #5e676b;
128
- --syn-color-neutral-900: #4c5357;
129
- --syn-color-neutral-950: #31373a;
119
+ --syn-color-neutral-50: #f2f2f2;
120
+ --syn-color-neutral-100: #e7e7e7;
121
+ --syn-color-neutral-200: #cccccc;
122
+ --syn-color-neutral-300: #b2b2b2;
123
+ --syn-color-neutral-400: #999999;
124
+ --syn-color-neutral-500: #868686;
125
+ --syn-color-neutral-600: #666666;
126
+ --syn-color-neutral-700: #565656;
127
+ --syn-color-neutral-800: #333333;
128
+ --syn-color-neutral-900: #1a1a1a;
129
+ --syn-color-neutral-950: #0d0d0d;
130
130
  --syn-color-neutral-1000: #000000;
131
- --syn-color-primary-50: #f0f9ff;
132
- --syn-color-primary-100: #e0f1fe;
133
- --syn-color-primary-200: #b9e5fe;
134
- --syn-color-primary-300: #7cd1fd;
135
- --syn-color-primary-400: #36bbfa;
136
- --syn-color-primary-500: #0ca2eb;
137
- --syn-color-primary-600: #007cc1;
138
- --syn-color-primary-700: #0166a3;
139
- --syn-color-primary-800: #065786;
140
- --syn-color-primary-900: #0b486f;
141
- --syn-color-primary-950: #072e4a;
142
- --syn-color-primary-1000: #072e4a;
143
- --syn-color-success-50: #f5fde8;
144
- --syn-color-success-100: #e7facd;
145
- --syn-color-success-200: #d1f4a2;
146
- --syn-color-success-300: #b0eb6b;
147
- --syn-color-success-400: #93dd3e;
148
- --syn-color-success-500: #73c31f;
149
- --syn-color-success-600: #63b017;
150
- --syn-color-success-700: #437714;
151
- --syn-color-success-800: #395e16;
152
- --syn-color-success-900: #315017;
153
- --syn-color-success-950: #172c07;
154
- --syn-color-warning-50: #fefce8;
155
- --syn-color-warning-100: #fdf7c4;
156
- --syn-color-warning-200: #fcec8c;
157
- --syn-color-warning-300: #f9da4b;
158
- --syn-color-warning-400: #f5c413;
159
- --syn-color-warning-500: #e5ae0d;
160
- --syn-color-warning-600: #c68608;
161
- --syn-color-warning-700: #9e5f0a;
162
- --syn-color-warning-800: #834b10;
163
- --syn-color-warning-900: #6f3e14;
164
- --syn-color-warning-950: #411f07;
165
- --syn-details-open-rotation: 360deg;
131
+ --syn-color-primary-50: #eff5ff;
132
+ --syn-color-primary-100: #dae7ff;
133
+ --syn-color-primary-200: #ccdeff;
134
+ --syn-color-primary-300: #91bbff;
135
+ --syn-color-primary-400: #5e97fc;
136
+ --syn-color-primary-500: #3183fe;
137
+ --syn-color-primary-600: #066fff;
138
+ --syn-color-primary-700: #005aff;
139
+ --syn-color-primary-800: #0845c5;
140
+ --syn-color-primary-900: #0d3f9b;
141
+ --syn-color-primary-950: #0e275d;
142
+ --syn-color-primary-1000: #000a37;
143
+ --syn-color-success-50: #f0fdf4;
144
+ --syn-color-success-100: #ddfbe6;
145
+ --syn-color-success-200: #bcf6cf;
146
+ --syn-color-success-300: #84eca7;
147
+ --syn-color-success-400: #6ad88f;
148
+ --syn-color-success-500: #4fc275;
149
+ --syn-color-success-600: #34ad5c;
150
+ --syn-color-success-700: #1a9945;
151
+ --syn-color-success-800: #00852c;
152
+ --syn-color-success-900: #026524;
153
+ --syn-color-success-950: #003911;
154
+ --syn-color-warning-50: #fffbeb;
155
+ --syn-color-warning-100: #fff5c6;
156
+ --syn-color-warning-200: #ffe67c;
157
+ --syn-color-warning-300: #fbdb52;
158
+ --syn-color-warning-400: #f6d029;
159
+ --syn-color-warning-500: #f2c500;
160
+ --syn-color-warning-600: #d19800;
161
+ --syn-color-warning-700: #a66c02;
162
+ --syn-color-warning-800: #89540a;
163
+ --syn-color-warning-900: #74450f;
164
+ --syn-color-warning-950: #442404;
165
+ --syn-details-open-rotation: 0deg;
166
166
  --syn-dimension-base: 4px; /** to be deprecated */
167
167
  --syn-duration-extra-fast: 50ms;
168
168
  --syn-duration-extra-slow: 1000ms;
169
169
  --syn-duration-fast: 150ms;
170
170
  --syn-duration-normal: 250ms;
171
171
  --syn-duration-slow: 500ms;
172
- --syn-focus-ring-border-radius: var(--syn-border-radius-none);
173
- --syn-focus-ring-color: var(--syn-color-primary-400);
172
+ --syn-focus-ring-border-radius: var(--syn-border-radius-small);
173
+ --syn-focus-ring-color: var(--syn-color-primary-500);
174
174
  --syn-focus-ring-offset: var(--syn-spacing-3x-small);
175
175
  --syn-focus-ring-style: solid;
176
176
  --syn-focus-ring-width: var(--syn-border-width-medium);
177
177
  --syn-font-mono: 'Roboto Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; /** Coding font */
178
- --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 */
178
+ --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 */
179
179
  --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 */
180
180
  --syn-font-serif: Georgia, 'Times New Roman', serif; /** Shoelace compatibility DO NOT USE */
181
181
  --syn-font-size-2x-large: 32px;
@@ -187,33 +187,33 @@
187
187
  --syn-font-size-small: 14px;
188
188
  --syn-font-size-x-large: 24px;
189
189
  --syn-font-size-x-small: 12px;
190
- --syn-font-weight-bold: 700;
190
+ --syn-font-weight-bold: 600;
191
191
  --syn-font-weight-light: 400; /** Shoelace compatibility DO NOT USE */
192
192
  --syn-font-weight-normal: 400;
193
193
  --syn-font-weight-semibold: 600;
194
- --syn-header-border-color: var(--syn-color-neutral-400);
195
- --syn-icon-button-focus-ring-border-radius: var(--syn-border-radius-none);
194
+ --syn-header-border-color: #e6e1dc;
195
+ --syn-icon-button-focus-ring-border-radius: var(--syn-border-radius-pill);
196
196
  --syn-input-background-color: var(--syn-color-neutral-0);
197
197
  --syn-input-background-color-disabled: var(--syn-input-background-color);
198
198
  --syn-input-background-color-focus: var(--syn-input-background-color);
199
199
  --syn-input-background-color-hover: var(--syn-input-background-color);
200
- --syn-input-border-color: var(--syn-color-neutral-700);
201
- --syn-input-border-color-active: var(--syn-color-neutral-1000);
202
- --syn-input-border-color-disabled: var(--syn-color-neutral-700);
203
- --syn-input-border-color-focus: var(--syn-color-neutral-950);
204
- --syn-input-border-color-focus-error: var(--syn-color-error-700);
205
- --syn-input-border-color-hover: var(--syn-color-neutral-950);
200
+ --syn-input-border-color: var(--syn-color-neutral-950);
201
+ --syn-input-border-color-active: var(--syn-color-primary-800);
202
+ --syn-input-border-color-disabled: var(--syn-color-neutral-950);
203
+ --syn-input-border-color-focus: var(--syn-color-primary-700);
204
+ --syn-input-border-color-focus-error: var(--syn-color-error-600);
205
+ --syn-input-border-color-hover: var(--syn-color-primary-700);
206
206
  --syn-input-border-color-offset: var(--syn-panel-background-color);
207
- --syn-input-border-radius-large: var(--syn-border-radius-none);
208
- --syn-input-border-radius-medium: var(--syn-border-radius-none);
209
- --syn-input-border-radius-small: var(--syn-border-radius-none);
207
+ --syn-input-border-radius-large: var(--syn-border-radius-medium);
208
+ --syn-input-border-radius-medium: var(--syn-border-radius-medium);
209
+ --syn-input-border-radius-small: var(--syn-border-radius-medium);
210
210
  --syn-input-border-width: 1px;
211
211
  --syn-input-color: var(--syn-color-neutral-950);
212
212
  --syn-input-color-disabled: var(--syn-color-neutral-950);
213
213
  --syn-input-color-focus: var(--syn-color-neutral-950);
214
214
  --syn-input-color-hover: var(--syn-color-neutral-950);
215
215
  --syn-input-disabled-opacity: 0.5;
216
- --syn-input-focus-ring-color: var(--syn-color-primary-400);
216
+ --syn-input-focus-ring-color: var(--syn-color-primary-500);
217
217
  --syn-input-focus-ring-error: var(--syn-color-error-600);
218
218
  --syn-input-focus-ring-offset: 0px;
219
219
  --syn-input-font-family: var(--syn-font-sans);
@@ -224,23 +224,23 @@
224
224
  --syn-input-height-large: var(--syn-spacing-3x-large);
225
225
  --syn-input-height-medium: var(--syn-spacing-2x-large);
226
226
  --syn-input-height-small: 36px;
227
- --syn-input-help-text-color: var(--syn-color-neutral-800);
227
+ --syn-input-help-text-color: var(--syn-color-neutral-700);
228
228
  --syn-input-help-text-color-error: var(--syn-color-error-600);
229
229
  --syn-input-help-text-font-size-large: var(--syn-font-size-medium);
230
230
  --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
231
231
  --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
232
- --syn-input-icon-color: var(--syn-color-neutral-800);
233
- --syn-input-icon-color-hover: var(--syn-color-neutral-800);
234
- --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-600);
235
- --syn-input-icon-icon-clearable-color-active: var(--syn-color-neutral-900);
236
- --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-800);
232
+ --syn-input-icon-color: var(--syn-color-neutral-950);
233
+ --syn-input-icon-color-hover: var(--syn-color-neutral-950);
234
+ --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-500);
235
+ --syn-input-icon-icon-clearable-color-active: var(--syn-color-neutral-800);
236
+ --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-700);
237
237
  --syn-input-label-color: var(--syn-color-neutral-950);
238
238
  --syn-input-label-font-size-large: var(--syn-font-size-large);
239
239
  --syn-input-label-font-size-medium: var(--syn-font-size-medium);
240
240
  --syn-input-label-font-size-small: var(--syn-font-size-small);
241
- --syn-input-letter-spacing: var(--syn-letter-spacing-normal);
242
- --syn-input-placeholder-color: var(--syn-color-neutral-500);
243
- --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
241
+ --syn-input-letter-spacing: normal;
242
+ --syn-input-placeholder-color: var(--syn-color-neutral-700);
243
+ --syn-input-placeholder-color-disabled: var(--syn-color-neutral-700);
244
244
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
245
245
  --syn-input-readonly-background-color: var(--syn-readonly-background-color);
246
246
  --syn-input-readonly-background-color-disabled: var(--syn-readonly-background-color);
@@ -253,18 +253,18 @@
253
253
  --syn-input-spacing-medium: var(--syn-spacing-medium);
254
254
  --syn-input-spacing-small: var(--syn-spacing-small);
255
255
  --syn-input-width: var(--syn-border-width-small);
256
- --syn-interactive-background-color-active: var(--syn-color-neutral-300);
257
- --syn-interactive-background-color-hover: var(--syn-color-neutral-100);
258
- --syn-interactive-emphasis-color: var(--syn-color-primary-600);
259
- --syn-interactive-emphasis-color-active: var(--syn-color-primary-950);
260
- --syn-interactive-emphasis-color-hover: var(--syn-color-primary-900);
256
+ --syn-interactive-background-color-active: #e6e1dc;
257
+ --syn-interactive-background-color-hover: #f2f0ed;
258
+ --syn-interactive-emphasis-color: var(--syn-color-primary-700);
259
+ --syn-interactive-emphasis-color-active: var(--syn-color-primary-1000);
260
+ --syn-interactive-emphasis-color-hover: var(--syn-color-primary-950);
261
261
  --syn-interactive-quiet-color: var(--syn-color-neutral-950);
262
- --syn-interactive-quiet-color-active: var(--syn-color-primary-700);
263
- --syn-interactive-quiet-color-hover: var(--syn-color-primary-600);
264
- --syn-letter-spacing-dense: -0.24px; /** Shoelace compatibility DO NOT USE */
265
- --syn-letter-spacing-denser: -0.48px; /** Shoelace compatibility DO NOT USE */
266
- --syn-letter-spacing-loose: 1.2px; /** Shoelace compatibility DO NOT USE */
267
- --syn-letter-spacing-looser: 2.4px; /** Shoelace compatibility DO NOT USE */
262
+ --syn-interactive-quiet-color-active: var(--syn-color-primary-800);
263
+ --syn-interactive-quiet-color-hover: var(--syn-color-primary-700);
264
+ --syn-letter-spacing-dense: normal; /** Shoelace compatibility DO NOT USE */
265
+ --syn-letter-spacing-denser: normal; /** Shoelace compatibility DO NOT USE */
266
+ --syn-letter-spacing-loose: normal; /** Shoelace compatibility DO NOT USE */
267
+ --syn-letter-spacing-looser: 2px; /** Shoelace compatibility DO NOT USE */
268
268
  --syn-letter-spacing-normal: normal;
269
269
  --syn-line-height-dense: 1.2; /** Shoelace compatibility DO NOT USE */
270
270
  --syn-line-height-denser: 1; /** Shoelace compatibility DO NOT USE */
@@ -275,50 +275,51 @@
275
275
  --syn-link-color-active: var(--syn-interactive-emphasis-color-active);
276
276
  --syn-link-color-hover: var(--syn-interactive-emphasis-color-hover);
277
277
  --syn-link-quiet-color: var(--syn-interactive-quiet-color);
278
- --syn-link-quiet-color-active: var(--syn-interactive-emphasis-color-active);
278
+ --syn-link-quiet-color-active: var(--syn-interactive-quiet-color-active);
279
279
  --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
280
- --syn-link-underline-outline: 7%;
281
- --syn-logo-color: var(--syn-color-primary-600);
280
+ --syn-link-underline-outline: 25%;
281
+ --syn-logo-color: var(--syn-color-primary-700);
282
282
  --syn-namur-color-border: var(--syn-color-neutral-950);
283
283
  --syn-namur-critical-color: var(--syn-color-critical-600);
284
284
  --syn-namur-critical-color-background: var(--syn-color-critical-100);
285
285
  --syn-namur-error-color: var(--syn-color-error-500);
286
286
  --syn-namur-error-color-background: var(--syn-color-error-100);
287
287
  --syn-namur-icon-color: var(--syn-color-neutral-950);
288
- --syn-namur-info-color: var(--syn-color-info-500);
288
+ --syn-namur-info-color: var(--syn-color-info-400);
289
289
  --syn-namur-info-color-background: var(--syn-color-info-100);
290
- --syn-namur-neutral-color: var(--syn-color-neutral-400);
291
- --syn-namur-neutral-color-background: var(--syn-color-neutral-200);
290
+ --syn-namur-neutral-color: #d5ccc5;
291
+ --syn-namur-neutral-color-background: #e6e1dc;
292
292
  --syn-namur-success-color: var(--syn-color-success-500);
293
293
  --syn-namur-success-color-background: var(--syn-color-success-100);
294
- --syn-namur-warning-color: var(--syn-color-warning-400);
294
+ --syn-namur-warning-color: var(--syn-color-warning-500);
295
295
  --syn-namur-warning-color-background: var(--syn-color-warning-100);
296
296
  --syn-opacity-50: 0.5; /** 50% */
297
- --syn-option-background-color-active: var(--syn-color-primary-600);
298
- --syn-option-background-color-hover: var(--syn-color-neutral-100);
299
- --syn-option-check-color: var(--syn-color-primary-600);
297
+ --syn-option-background-color-active: var(--syn-interactive-emphasis-color-active);
298
+ --syn-option-background-color-hover: var(--syn-interactive-emphasis-color-hover);
299
+ --syn-option-check-color: var(--syn-interactive-quiet-color);
300
300
  --syn-option-check-color-active: var(--syn-color-neutral-0);
301
- --syn-option-check-color-hover: var(--syn-color-primary-600);
301
+ --syn-option-check-color-hover: var(--syn-color-neutral-0);
302
302
  --syn-option-color: var(--syn-typography-color-text);
303
303
  --syn-option-color-active: var(--syn-typography-color-text-inverted);
304
- --syn-option-color-hover: var(--syn-typography-color-text);
305
- --syn-option-icon-color: var(--syn-input-icon-color);
304
+ --syn-option-color-hover: var(--syn-typography-color-text-inverted);
305
+ --syn-option-icon-color: var(--syn-interactive-quiet-color);
306
306
  --syn-option-icon-color-active: var(--syn-color-neutral-0);
307
- --syn-option-icon-color-hover: var(--syn-input-icon-color-hover);
308
- --syn-overlay-background-blur: 0px;
309
- --syn-overlay-background-color: rgba(49, 55, 58, 0.5);
310
- --syn-page-background: var(--syn-color-neutral-100);
307
+ --syn-option-icon-color-hover: var(--syn-color-neutral-0);
308
+ --syn-overlay-background-blur: 8px;
309
+ --syn-overlay-background-color: rgba(0, 5, 26, 0.3);
310
+ --syn-page-background: #f8f7f6; /** Will be DEPRECATED */
311
+ --syn-page-background-color: #f8f7f6;
311
312
  --syn-panel-background-color: var(--syn-color-neutral-0);
312
- --syn-panel-border-color: var(--syn-color-neutral-300);
313
+ --syn-panel-border-color: #e6e1dc;
313
314
  --syn-panel-border-radius: var(--syn-border-radius-medium);
314
315
  --syn-panel-border-width: var(--syn-border-width-small);
315
- --syn-progress-indicator-color: var(--syn-color-primary-600);
316
- --syn-progress-track-color: var(--syn-color-neutral-200);
317
- --syn-range-color-inactive: var(--syn-color-neutral-200);
318
- --syn-range-error-color: var(--syn-color-error-700);
319
- --syn-range-tick-color: var(--syn-color-neutral-400);
316
+ --syn-progress-indicator-color: var(--syn-color-primary-700);
317
+ --syn-progress-track-color: var(--syn-color-neutral-100);
318
+ --syn-range-color-inactive: var(--syn-color-neutral-100);
319
+ --syn-range-error-color: var(--syn-color-error-600);
320
+ --syn-range-tick-color: var(--syn-color-neutral-500);
320
321
  --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
321
- --syn-readonly-background-color: var(--syn-color-neutral-300);
322
+ --syn-readonly-background-color: #e6e1dc;
322
323
  --syn-spacing-1-5x-large: 40px;
323
324
  --syn-spacing-2x-large: 48px;
324
325
  --syn-spacing-2x-small: 4px;
@@ -341,11 +342,11 @@
341
342
  --syn-switch-width-medium: var(--syn-spacing-1-5x-large);
342
343
  --syn-switch-width-small: var(--syn-spacing-x-large);
343
344
  --syn-table-background-color: var(--syn-panel-background-color);
344
- --syn-table-background-color-alternating: var(--syn-color-neutral-50);
345
- --syn-table-background-color-header: var(--syn-color-neutral-200);
346
- --syn-table-border-color: var(--syn-color-neutral-300);
347
- --syn-table-shadow-end: rgba(49, 55, 58, 0);
348
- --syn-table-shadow-start: rgba(49, 55, 58, 0.16);
345
+ --syn-table-background-color-alternating: #f8f7f6;
346
+ --syn-table-background-color-header: #f2f0ed;
347
+ --syn-table-border-color: #e6e1dc;
348
+ --syn-table-shadow-end: rgba(13, 13, 13, 0);
349
+ --syn-table-shadow-start: rgba(13, 13, 13, 0.16);
349
350
  --syn-text-decoration-default: none;
350
351
  --syn-text-decoration-underline: underline;
351
352
  --syn-toggle-size-large: var(--syn-spacing-large);
@@ -372,30 +373,30 @@
372
373
  --syn-z-index-dropdown: 900; /** Shoelace compatibility DO NOT USE */
373
374
  --syn-z-index-toast: 950; /** Shoelace compatibility DO NOT USE */
374
375
  --syn-z-index-tooltip: 1000; /** Shoelace compatibility DO NOT USE */
375
- --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);
376
- --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);
377
- --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);
378
- --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);
379
- --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);
380
- --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);
381
- --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);
382
- --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);
383
- --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);
384
- --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';
385
- --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';
386
- --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';
387
- --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';
388
- --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';
389
- --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';
390
- --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';
391
- --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';
392
- --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';
393
- --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';
394
- --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';
395
- --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';
396
- --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';
397
- --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';
398
- --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';
399
- --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';
376
+ --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);
377
+ --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);
378
+ --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);
379
+ --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);
380
+ --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);
381
+ --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);
382
+ --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);
383
+ --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);
384
+ --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);
385
+ --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';
386
+ --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';
387
+ --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';
388
+ --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';
389
+ --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';
390
+ --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';
391
+ --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';
392
+ --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';
393
+ --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';
394
+ --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';
395
+ --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';
396
+ --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';
397
+ --syn-heading-large: 400 22px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
398
+ --syn-heading-x-large: 400 28px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
399
+ --syn-heading-2x-large: 400 34px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
400
+ --syn-heading-3x-large: 400 40px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
400
401
  --syn-focus-ring: var(--syn-focus-ring-style) var(--syn-focus-ring-width) var(--syn-focus-ring-color);
401
402
  }
package/dist/themes/sick2018_dark.css CHANGED
@@ -1,10 +1,10 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.48.1
2
+ * @synergy-design-system/tokens version 2.48.2
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
6
6
 
7
- :root, .syn-sick2018-dark, .syn-theme-dark {
7
+ :root, .syn-sick2018-dark {
8
8
  color-scheme: dark;
9
9
 
10
10
  --syn-alert-error-color-background: var(--syn-panel-background-color);
@@ -307,7 +307,8 @@
307
307
  --syn-option-icon-color-hover: var(--syn-typography-color-text);
308
308
  --syn-overlay-background-blur: 0px;
309
309
  --syn-overlay-background-color: rgba(49, 55, 58, 0.5);
310
- --syn-page-background: var(--syn-color-neutral-50);
310
+ --syn-page-background: var(--syn-color-neutral-50); /** Will be DEPRECATED */
311
+ --syn-page-background-color: var(--syn-color-neutral-50);
311
312
  --syn-panel-background-color: var(--syn-color-neutral-0);
312
313
  --syn-panel-border-color: var(--syn-color-neutral-300);
313
314
  --syn-panel-border-radius: var(--syn-border-radius-medium);
package/dist/themes/sick2018_light.css CHANGED
@@ -1,10 +1,10 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.48.1
2
+ * @synergy-design-system/tokens version 2.48.2
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
6
6
 
7
- :root, .syn-sick2018-light, .syn-theme-light {
7
+ :root, .syn-sick2018-light {
8
8
  color-scheme: light;
9
9
 
10
10
  --syn-alert-error-color-background: var(--syn-panel-background-color);
@@ -307,7 +307,8 @@
307
307
  --syn-option-icon-color-hover: var(--syn-input-icon-color-hover);
308
308
  --syn-overlay-background-blur: 0px;
309
309
  --syn-overlay-background-color: rgba(49, 55, 58, 0.5);
310
- --syn-page-background: var(--syn-color-neutral-100);
310
+ --syn-page-background: var(--syn-color-neutral-100); /** Will be DEPRECATED */
311
+ --syn-page-background-color: var(--syn-color-neutral-100);
311
312
  --syn-panel-background-color: var(--syn-color-neutral-0);
312
313
  --syn-panel-border-color: var(--syn-color-neutral-300);
313
314
  --syn-panel-border-radius: var(--syn-border-radius-medium);