@synergy-design-system/tokens 2.23.0 → 2.25.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 +14 -0
  2. package/README.md +4 -2
  3. package/dist/js/index.d.ts +81 -1
  4. package/dist/js/index.js +81 -1
  5. package/dist/scss/_tokens.scss +17 -1
  6. package/dist/themes/dark.css +23 -7
  7. package/dist/themes/light.css +23 -7
  8. package/dist/themes/sick2018_dark.css +23 -7
  9. package/dist/themes/sick2018_light.css +23 -7
  10. package/dist/themes/sick2025_dark.css +64 -48
  11. package/dist/themes/sick2025_light.css +46 -30
  12. package/package.json +5 -1
  13. package/src/figma-variables/output/sick2018-dark.json +86 -6
  14. package/src/figma-variables/output/sick2018-light.json +86 -6
  15. package/src/figma-variables/output/sick2025-dark.json +127 -47
  16. package/src/figma-variables/output/sick2025-light.json +109 -29
package/dist/themes/sick2025_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.22.0
2
+ * @synergy-design-system/tokens version 2.24.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -96,7 +96,8 @@
96
96
  --syn-duration-fast: 150ms;
97
97
  --syn-duration-normal: 250ms;
98
98
  --syn-duration-slow: 500ms;
99
- --syn-focus-ring-color: var(--syn-color-primary-400);
99
+ --syn-focus-ring-border-radius: 4px;
100
+ --syn-focus-ring-color: var(--syn-color-primary-500);
100
101
  --syn-focus-ring-offset: var(--syn-spacing-3x-small);
101
102
  --syn-focus-ring-style: solid;
102
103
  --syn-focus-ring-width: var(--syn-border-width-medium);
@@ -117,25 +118,25 @@
117
118
  --syn-font-weight-light: 400; /** Shoelace compatibility DO NOT USE */
118
119
  --syn-font-weight-normal: 400;
119
120
  --syn-font-weight-semibold: 600;
120
- --syn-input-background-color: var(--syn-color-neutral-0);
121
+ --syn-input-background-color: var(--syn-color-neutral-50);
121
122
  --syn-input-background-color-disabled: var(--syn-input-background-color);
122
123
  --syn-input-background-color-focus: var(--syn-input-background-color);
123
124
  --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);
125
+ --syn-input-border-color: var(--syn-color-neutral-1000);
126
+ --syn-input-border-color-disabled: var(--syn-color-neutral-1000);
127
+ --syn-input-border-color-focus: var(--syn-color-primary-500);
128
+ --syn-input-border-color-focus-error: var(--syn-color-error-600);
129
+ --syn-input-border-color-hover: var(--syn-color-primary-500);
130
+ --syn-input-border-radius-large: var(--syn-border-radius-medium);
131
+ --syn-input-border-radius-medium: var(--syn-border-radius-medium);
132
+ --syn-input-border-radius-small: var(--syn-border-radius-medium);
132
133
  --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);
134
+ --syn-input-color: var(--syn-color-neutral-1000);
135
+ --syn-input-color-disabled: var(--syn-color-neutral-1000);
136
+ --syn-input-color-focus: var(--syn-color-neutral-1000);
137
+ --syn-input-color-hover: var(--syn-color-neutral-1000);
137
138
  --syn-input-disabled-opacity: 0.5;
138
- --syn-input-focus-ring-color: var(--syn-color-primary-400);
139
+ --syn-input-focus-ring-color: var(--syn-color-primary-700);
139
140
  --syn-input-focus-ring-error: var(--syn-color-error-400);
140
141
  --syn-input-focus-ring-offset: 0px;
141
142
  --syn-input-font-family: var(--syn-font-sans);
@@ -147,31 +148,31 @@
147
148
  --syn-input-height-medium: var(--syn-spacing-2x-large);
148
149
  --syn-input-height-small: 36px;
149
150
  --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-color-error: var(--syn-color-error-600);
151
152
  --syn-input-help-text-font-size-large: var(--syn-font-size-medium);
152
153
  --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
153
154
  --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);
155
+ --syn-input-icon-color: var(--syn-color-neutral-1000);
156
+ --syn-input-icon-color-focus: var(--syn-color-neutral-1000);
157
+ --syn-input-icon-color-hover: var(--syn-color-neutral-1000);
158
+ --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-600);
159
+ --syn-input-icon-icon-clearable-color-focus: var(--syn-color-neutral-600);
160
+ --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-600);
161
+ --syn-input-label-color: var(--syn-color-neutral-1000);
161
162
  --syn-input-label-font-size-large: var(--syn-font-size-large);
162
163
  --syn-input-label-font-size-medium: var(--syn-font-size-medium);
163
164
  --syn-input-label-font-size-small: var(--syn-font-size-small);
164
165
  --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);
166
+ --syn-input-placeholder-color: var(--syn-color-neutral-800);
167
+ --syn-input-placeholder-color-disabled: var(--syn-color-neutral-800);
167
168
  --syn-input-readonly-color: var(--syn-color-neutral-800);
168
169
  --syn-input-readonly-color-disabled: var(--syn-color-neutral-800);
169
170
  --syn-input-readonly-color-focus: var(--syn-color-neutral-950);
170
171
  --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);
172
+ --syn-input-readonly-background-color: var(--syn-color-neutral-100);
173
+ --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-100);
174
+ --syn-input-readonly-background-color-focus: var(--syn-color-neutral-100);
175
+ --syn-input-readonly-background-color-hover: var(--syn-color-neutral-100);
175
176
  --syn-input-required-content: "*";
176
177
  --syn-input-required-content-color: var(--syn-input-label-color);
177
178
  --syn-input-required-content-offset: -2px;
@@ -179,6 +180,12 @@
179
180
  --syn-input-spacing-medium: var(--syn-spacing-medium);
180
181
  --syn-input-spacing-small: var(--syn-spacing-small);
181
182
  --syn-input-width: var(--syn-border-width-small);
183
+ --syn-interactive-emphasis-color: var(--syn-color-primary-500);
184
+ --syn-interactive-emphasis-color-active: var(--syn-color-neutral-1000);
185
+ --syn-interactive-emphasis-color-hover: var(--syn-color-primary-900);
186
+ --syn-interactive-quiet-color: var(--syn-color-neutral-1000);
187
+ --syn-interactive-quiet-color-active: var(--syn-color-primary-600);
188
+ --syn-interactive-quiet-color-hover: var(--syn-color-primary-500);
182
189
  --syn-letter-spacing-dense: normal; /** Shoelace compatibility DO NOT USE */
183
190
  --syn-letter-spacing-denser: normal; /** Shoelace compatibility DO NOT USE */
184
191
  --syn-letter-spacing-loose: normal; /** Shoelace compatibility DO NOT USE */
@@ -189,16 +196,18 @@
189
196
  --syn-line-height-loose: 1.8; /** Shoelace compatibility DO NOT USE */
190
197
  --syn-line-height-looser: 2.2; /** Shoelace compatibility DO NOT USE */
191
198
  --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);
199
+ --syn-link-color: var(--syn-interactive-emphasis-color);
200
+ --syn-link-color-active: var(--syn-interactive-emphasis-color-active);
201
+ --syn-link-color-hover: var(--syn-interactive-emphasis-color-hover);
202
+ --syn-link-quiet-color: var(--syn-interactive-quiet-color);
203
+ --syn-link-quiet-color-active: var(--syn-interactive-quiet-color-active);
204
+ --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
205
+ --syn-link-underline-outline: 25%;
198
206
  --syn-opacity-50: 0.5; /** 50% */
199
207
  --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
200
- --syn-panel-background-color: var(--syn-color-neutral-0);
208
+ --syn-panel-background-color: var(--syn-color-neutral-50);
201
209
  --syn-panel-border-color: var(--syn-color-neutral-300);
210
+ --syn-panel-border-radius: var(--syn-border-radius-x-large);
202
211
  --syn-panel-border-width: var(--syn-border-width-small);
203
212
  --syn-spacing-2x-large: 48px;
204
213
  --syn-spacing-2x-small: 4px;
@@ -213,6 +222,13 @@
213
222
  --syn-spacing-small: 12px;
214
223
  --syn-spacing-x-large: 32px;
215
224
  --syn-spacing-x-small: 8px;
225
+ --syn-spinner-opacity: 0.4;
226
+ --syn-table-background-color: var(--syn-panel-background-color);
227
+ --syn-table-background-color-alternating: var(--syn-color-neutral-100);
228
+ --syn-table-background-color-header: var(--syn-color-neutral-200);
229
+ --syn-table-border-color: var(--syn-color-neutral-300);
230
+ --syn-table-shadow-end: rgba(0, 0, 0, 0);
231
+ --syn-table-shadow-start: rgba(0, 0, 0, 0.8);
216
232
  --syn-text-decoration-default: none;
217
233
  --syn-text-decoration-underline: underline;
218
234
  --syn-toggle-size-large: var(--syn-spacing-large);
@@ -232,22 +248,22 @@
232
248
  --syn-transition-slow: 500ms; /** Shoelace compatibility DO NOT USE */
233
249
  --syn-transition-x-fast: 50ms; /** Shoelace compatibility DO NOT USE */
234
250
  --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);
251
+ --syn-typography-color-text: var(--syn-color-neutral-1000);
252
+ --syn-typography-color-text-inverted: var(--syn-color-neutral-50);
237
253
  --syn-z-index-dialog: 800; /** Shoelace compatibility DO NOT USE */
238
254
  --syn-z-index-drawer: 700; /** Shoelace compatibility DO NOT USE */
239
255
  --syn-z-index-dropdown: 900; /** Shoelace compatibility DO NOT USE */
240
256
  --syn-z-index-toast: 950; /** Shoelace compatibility DO NOT USE */
241
257
  --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);
258
+ --syn-shadow-medium: 0px 1px 2px 0px rgba(0, 0, 0, 0.08), 0px 1px 4px 0px rgba(0, 0, 0, 0.08), 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
259
+ --syn-shadow-large: 0px 0px 3px 0px rgba(0, 0, 0, 0.12), 0px 2px 6px 0px rgba(0, 0, 0, 0.12), 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
260
+ --syn-shadow-x-large: 0px 1px 4px 0px rgba(0, 0, 0, 0.12), 0px 8px 24px 0px rgba(0, 0, 0, 0.12), 0px 16px 48px 0px rgba(0, 0, 0, 0.16);
261
+ --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(0, 0, 0, 0.12), 0px 3px 8px 0px rgba(0, 0, 0, 0.12), 0px 4px 12px 0px rgba(0, 0, 0, 0.16);
262
+ --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(0, 0, 0, 0.12), 0px -3px 8px 0px rgba(0, 0, 0, 0.12), 0px -4px 12px 0px rgba(0, 0, 0, 0.16);
263
+ --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(0, 0, 0, 0.12), -3px 0px 8px 0px rgba(0, 0, 0, 0.12), -4px 0px 12px 0px rgba(0, 0, 0, 0.16);
264
+ --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(0, 0, 0, 0.12), 3px 0px 8px 0px rgba(0, 0, 0, 0.12), 4px 0px 12px 0px rgba(0, 0, 0, 0.16);
265
+ --syn-shadow-x-small: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 4px 0px rgba(0, 0, 0, 0.04), 0px 2px 8px 0px rgba(0, 0, 0, 0.04);
266
+ --syn-shadow-small: 0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 8px 0px rgba(0, 0, 0, 0.06);
251
267
  --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
268
  --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
269
  --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';
package/dist/themes/sick2025_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.22.0
2
+ * @synergy-design-system/tokens version 2.24.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -96,7 +96,8 @@
96
96
  --syn-duration-fast: 150ms;
97
97
  --syn-duration-normal: 250ms;
98
98
  --syn-duration-slow: 500ms;
99
- --syn-focus-ring-color: var(--syn-color-primary-400);
99
+ --syn-focus-ring-border-radius: 4px;
100
+ --syn-focus-ring-color: var(--syn-color-primary-700);
100
101
  --syn-focus-ring-offset: var(--syn-spacing-3x-small);
101
102
  --syn-focus-ring-style: solid;
102
103
  --syn-focus-ring-width: var(--syn-border-width-medium);
@@ -121,22 +122,22 @@
121
122
  --syn-input-background-color-disabled: var(--syn-input-background-color);
122
123
  --syn-input-background-color-focus: var(--syn-input-background-color);
123
124
  --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);
125
+ --syn-input-border-color: var(--syn-color-neutral-950);
126
+ --syn-input-border-color-disabled: var(--syn-color-neutral-950);
127
+ --syn-input-border-color-focus: var(--syn-color-primary-700);
128
+ --syn-input-border-color-focus-error: var(--syn-color-error-600);
129
+ --syn-input-border-color-hover: var(--syn-color-primary-700);
130
+ --syn-input-border-radius-large: var(--syn-border-radius-medium);
131
+ --syn-input-border-radius-medium: var(--syn-border-radius-medium);
132
+ --syn-input-border-radius-small: var(--syn-border-radius-medium);
132
133
  --syn-input-border-width: 1px;
133
134
  --syn-input-color: var(--syn-color-neutral-950);
134
135
  --syn-input-color-disabled: var(--syn-color-neutral-950);
135
136
  --syn-input-color-focus: var(--syn-color-neutral-950);
136
137
  --syn-input-color-hover: var(--syn-color-neutral-950);
137
138
  --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);
139
+ --syn-input-focus-ring-color: var(--syn-color-primary-500);
140
+ --syn-input-focus-ring-error: var(--syn-color-error-500);
140
141
  --syn-input-focus-ring-offset: 0px;
141
142
  --syn-input-font-family: var(--syn-font-sans);
142
143
  --syn-input-font-size-large: var(--syn-font-size-large);
@@ -146,14 +147,14 @@
146
147
  --syn-input-height-large: var(--syn-spacing-3x-large);
147
148
  --syn-input-height-medium: var(--syn-spacing-2x-large);
148
149
  --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);
150
+ --syn-input-help-text-color: var(--syn-color-neutral-700);
151
+ --syn-input-help-text-color-error: var(--syn-color-error-600);
151
152
  --syn-input-help-text-font-size-large: var(--syn-font-size-medium);
152
153
  --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
153
154
  --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);
155
+ --syn-input-icon-color: var(--syn-color-neutral-950);
156
+ --syn-input-icon-color-focus: var(--syn-color-neutral-950);
157
+ --syn-input-icon-color-hover: var(--syn-color-neutral-950);
157
158
  --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-500);
158
159
  --syn-input-icon-icon-clearable-color-focus: var(--syn-color-neutral-500);
159
160
  --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-500);
@@ -162,16 +163,16 @@
162
163
  --syn-input-label-font-size-medium: var(--syn-font-size-medium);
163
164
  --syn-input-label-font-size-small: var(--syn-font-size-small);
164
165
  --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);
166
+ --syn-input-placeholder-color: var(--syn-color-neutral-700);
167
+ --syn-input-placeholder-color-disabled: var(--syn-color-neutral-700);
167
168
  --syn-input-readonly-color: var(--syn-color-neutral-800);
168
169
  --syn-input-readonly-color-disabled: var(--syn-color-neutral-800);
169
170
  --syn-input-readonly-color-focus: var(--syn-color-neutral-950);
170
171
  --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);
172
+ --syn-input-readonly-background-color: #f8f7f6;
173
+ --syn-input-readonly-background-color-disabled: #f8f7f6;
174
+ --syn-input-readonly-background-color-focus: #f8f7f6;
175
+ --syn-input-readonly-background-color-hover: #f8f7f6;
175
176
  --syn-input-required-content: "*";
176
177
  --syn-input-required-content-color: var(--syn-input-label-color);
177
178
  --syn-input-required-content-offset: -2px;
@@ -179,6 +180,12 @@
179
180
  --syn-input-spacing-medium: var(--syn-spacing-medium);
180
181
  --syn-input-spacing-small: var(--syn-spacing-small);
181
182
  --syn-input-width: var(--syn-border-width-small);
183
+ --syn-interactive-emphasis-color: var(--syn-color-primary-700);
184
+ --syn-interactive-emphasis-color-active: var(--syn-color-neutral-950);
185
+ --syn-interactive-emphasis-color-hover: var(--syn-color-primary-900);
186
+ --syn-interactive-quiet-color: var(--syn-color-neutral-950);
187
+ --syn-interactive-quiet-color-active: var(--syn-color-primary-800);
188
+ --syn-interactive-quiet-color-hover: var(--syn-color-primary-700);
182
189
  --syn-letter-spacing-dense: normal; /** Shoelace compatibility DO NOT USE */
183
190
  --syn-letter-spacing-denser: normal; /** Shoelace compatibility DO NOT USE */
184
191
  --syn-letter-spacing-loose: normal; /** Shoelace compatibility DO NOT USE */
@@ -189,16 +196,18 @@
189
196
  --syn-line-height-loose: 1.8; /** Shoelace compatibility DO NOT USE */
190
197
  --syn-line-height-looser: 2.2; /** Shoelace compatibility DO NOT USE */
191
198
  --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);
199
+ --syn-link-color: var(--syn-interactive-emphasis-color);
200
+ --syn-link-color-active: var(--syn-interactive-emphasis-color-active);
201
+ --syn-link-color-hover: var(--syn-interactive-emphasis-color-hover);
202
+ --syn-link-quiet-color: var(--syn-interactive-quiet-color);
203
+ --syn-link-quiet-color-active: var(--syn-interactive-quiet-color-active);
204
+ --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
205
+ --syn-link-underline-outline: 25%;
198
206
  --syn-opacity-50: 0.5; /** 50% */
199
207
  --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
200
208
  --syn-panel-background-color: var(--syn-color-neutral-0);
201
- --syn-panel-border-color: var(--syn-color-neutral-300);
209
+ --syn-panel-border-color: #e6e1dc;
210
+ --syn-panel-border-radius: var(--syn-border-radius-x-large);
202
211
  --syn-panel-border-width: var(--syn-border-width-small);
203
212
  --syn-spacing-2x-large: 48px;
204
213
  --syn-spacing-2x-small: 4px;
@@ -213,6 +222,13 @@
213
222
  --syn-spacing-small: 12px;
214
223
  --syn-spacing-x-large: 32px;
215
224
  --syn-spacing-x-small: 8px;
225
+ --syn-spinner-opacity: 0.16;
226
+ --syn-table-background-color: var(--syn-panel-background-color);
227
+ --syn-table-background-color-alternating: #f8f7f6;
228
+ --syn-table-background-color-header: #f2f0ed;
229
+ --syn-table-border-color: #e6e1dc;
230
+ --syn-table-shadow-end: rgba(13, 13, 13, 0);
231
+ --syn-table-shadow-start: rgba(13, 13, 13, 0.16);
216
232
  --syn-text-decoration-default: none;
217
233
  --syn-text-decoration-underline: underline;
218
234
  --syn-toggle-size-large: var(--syn-spacing-large);
package/package.json CHANGED
@@ -5,6 +5,7 @@
5
5
  },
6
6
  "description": "Design tokens for Synergy, the SICK Design System",
7
7
  "devDependencies": {
8
+ "@dotenvx/dotenvx": "^1.44.2",
8
9
  "@figma-export/cli": "^6.2.2",
9
10
  "@figma-export/types": "^6.2.2",
10
11
  "@figma/rest-api-spec": "^0.31.0",
@@ -112,9 +113,11 @@
112
113
  },
113
114
  "type": "module",
114
115
  "types": "./dist/js/index.d.ts",
115
- "version": "2.23.0",
116
+ "version": "2.25.0",
116
117
  "scripts": {
117
118
  "build": "pnpm clean && node scripts/build.js",
119
+ "build:all": "dotenvx -q run pnpm build:_all",
120
+ "build:_all": "pnpm clean && pnpm fetch:figma && pnpm build:figma && pnpm build",
118
121
  "build:figma": "pnpm run build:variables && pnpm run build:styles",
119
122
  "build:variables": "node scripts/figma/transform-tokens.js",
120
123
  "build:styles": "node scripts/figma/transform-styles.js",
@@ -129,6 +132,7 @@
129
132
  "format.eslint": "pnpm lint:js --fix",
130
133
  "start": "pnpm build",
131
134
  "compare": "pnpm build && node test/test-css-variables.js",
135
+ "test": "pnpm compare",
132
136
  "release": "semantic-release --tagFormat 'tokens/${version}' -e semantic-release-monorepo",
133
137
  "release.dry": "semantic-release --dry-run --tagFormat 'tokens/${version}' -e semantic-release-monorepo"
134
138
  }
package/src/figma-variables/output/sick2018-dark.json CHANGED
@@ -388,6 +388,10 @@
388
388
  }
389
389
  },
390
390
  "focus-ring": {
391
+ "border-radius": {
392
+ "type": "sizing",
393
+ "value": "0px"
394
+ },
391
395
  "color": {
392
396
  "type": "color",
393
397
  "value": "{color.primary.400}"
@@ -766,6 +770,36 @@
766
770
  "value": "{border-width.small}"
767
771
  }
768
772
  },
773
+ "interactive": {
774
+ "emphasis": {
775
+ "color": {
776
+ "type": "color",
777
+ "value": "{color.primary.600}"
778
+ },
779
+ "color-active": {
780
+ "type": "color",
781
+ "value": "{color.primary.950}"
782
+ },
783
+ "color-hover": {
784
+ "type": "color",
785
+ "value": "{color.primary.900}"
786
+ }
787
+ },
788
+ "quiet": {
789
+ "color": {
790
+ "type": "color",
791
+ "value": "{color.neutral.950}"
792
+ },
793
+ "color-active": {
794
+ "type": "color",
795
+ "value": "{color.primary.700}"
796
+ },
797
+ "color-hover": {
798
+ "type": "color",
799
+ "value": "{color.primary.600}"
800
+ }
801
+ }
802
+ },
769
803
  "letter-spacing": {
770
804
  "dense": {
771
805
  "description": "Shoelace compatibility DO NOT USE",
@@ -822,29 +856,33 @@
822
856
  "link": {
823
857
  "color": {
824
858
  "type": "color",
825
- "value": "{color.primary.600}"
859
+ "value": "{interactive.emphasis.color}"
826
860
  },
827
861
  "color-active": {
828
862
  "type": "color",
829
- "value": "{color.primary.950}"
863
+ "value": "{interactive.emphasis.color-active}"
830
864
  },
831
865
  "color-hover": {
832
866
  "type": "color",
833
- "value": "{color.primary.900}"
867
+ "value": "{interactive.emphasis.color-hover}"
834
868
  },
835
869
  "quiet": {
836
870
  "color": {
837
871
  "type": "color",
838
- "value": "{typography.color.text}"
872
+ "value": "{interactive.quiet.color}"
839
873
  },
840
874
  "color-active": {
841
875
  "type": "color",
842
- "value": "{color.primary.950}"
876
+ "value": "{interactive.quiet.color-active}"
843
877
  },
844
878
  "color-hover": {
845
879
  "type": "color",
846
- "value": "{color.primary.900}"
880
+ "value": "{interactive.quiet.color-hover}"
847
881
  }
882
+ },
883
+ "underline-outline": {
884
+ "type": "string",
885
+ "value": "7%"
848
886
  }
849
887
  },
850
888
  "opacity": {
@@ -874,6 +912,10 @@
874
912
  "type": "color",
875
913
  "value": "{color.neutral.300}"
876
914
  },
915
+ "radius": {
916
+ "type": "sizing",
917
+ "value": "{border-radius.medium}"
918
+ },
877
919
  "width": {
878
920
  "type": "sizing",
879
921
  "value": "{border-width.small}"
@@ -934,6 +976,44 @@
934
976
  "value": "8px"
935
977
  }
936
978
  },
979
+ "spinner": {
980
+ "opacity": {
981
+ "type": "opacity",
982
+ "value": "16%"
983
+ }
984
+ },
985
+ "table": {
986
+ "background": {
987
+ "color": {
988
+ "type": "color",
989
+ "value": "{panel.background.color}"
990
+ },
991
+ "color-alternating": {
992
+ "type": "color",
993
+ "value": "{color.neutral.50}"
994
+ },
995
+ "color-header": {
996
+ "type": "color",
997
+ "value": "{color.neutral.200}"
998
+ }
999
+ },
1000
+ "border": {
1001
+ "color": {
1002
+ "type": "color",
1003
+ "value": "{color.neutral.300}"
1004
+ }
1005
+ },
1006
+ "shadow": {
1007
+ "end": {
1008
+ "type": "color",
1009
+ "value": "rgba(49, 55, 58, 0.00)"
1010
+ },
1011
+ "start": {
1012
+ "type": "color",
1013
+ "value": "rgba(49, 55, 58, 0.16)"
1014
+ }
1015
+ }
1016
+ },
937
1017
  "text-decoration": {
938
1018
  "default": {
939
1019
  "type": "string",
package/src/figma-variables/output/sick2018-light.json CHANGED
@@ -388,6 +388,10 @@
388
388
  }
389
389
  },
390
390
  "focus-ring": {
391
+ "border-radius": {
392
+ "type": "sizing",
393
+ "value": "0px"
394
+ },
391
395
  "color": {
392
396
  "type": "color",
393
397
  "value": "{color.primary.400}"
@@ -766,6 +770,36 @@
766
770
  "value": "{border-width.small}"
767
771
  }
768
772
  },
773
+ "interactive": {
774
+ "emphasis": {
775
+ "color": {
776
+ "type": "color",
777
+ "value": "{color.primary.600}"
778
+ },
779
+ "color-active": {
780
+ "type": "color",
781
+ "value": "{color.primary.950}"
782
+ },
783
+ "color-hover": {
784
+ "type": "color",
785
+ "value": "{color.primary.900}"
786
+ }
787
+ },
788
+ "quiet": {
789
+ "color": {
790
+ "type": "color",
791
+ "value": "{color.neutral.950}"
792
+ },
793
+ "color-active": {
794
+ "type": "color",
795
+ "value": "{color.primary.700}"
796
+ },
797
+ "color-hover": {
798
+ "type": "color",
799
+ "value": "{color.primary.600}"
800
+ }
801
+ }
802
+ },
769
803
  "letter-spacing": {
770
804
  "dense": {
771
805
  "description": "Shoelace compatibility DO NOT USE",
@@ -822,29 +856,33 @@
822
856
  "link": {
823
857
  "color": {
824
858
  "type": "color",
825
- "value": "{color.primary.600}"
859
+ "value": "{interactive.emphasis.color}"
826
860
  },
827
861
  "color-active": {
828
862
  "type": "color",
829
- "value": "{color.primary.950}"
863
+ "value": "{interactive.emphasis.color-active}"
830
864
  },
831
865
  "color-hover": {
832
866
  "type": "color",
833
- "value": "{color.primary.900}"
867
+ "value": "{interactive.emphasis.color-hover}"
834
868
  },
835
869
  "quiet": {
836
870
  "color": {
837
871
  "type": "color",
838
- "value": "{typography.color.text}"
872
+ "value": "{interactive.quiet.color}"
839
873
  },
840
874
  "color-active": {
841
875
  "type": "color",
842
- "value": "{color.primary.950}"
876
+ "value": "{interactive.emphasis.color-active}"
843
877
  },
844
878
  "color-hover": {
845
879
  "type": "color",
846
- "value": "{color.primary.900}"
880
+ "value": "{interactive.quiet.color-hover}"
847
881
  }
882
+ },
883
+ "underline-outline": {
884
+ "type": "string",
885
+ "value": "7%"
848
886
  }
849
887
  },
850
888
  "opacity": {
@@ -874,6 +912,10 @@
874
912
  "type": "color",
875
913
  "value": "{color.neutral.300}"
876
914
  },
915
+ "radius": {
916
+ "type": "sizing",
917
+ "value": "{border-radius.medium}"
918
+ },
877
919
  "width": {
878
920
  "type": "sizing",
879
921
  "value": "{border-width.small}"
@@ -934,6 +976,44 @@
934
976
  "value": "8px"
935
977
  }
936
978
  },
979
+ "spinner": {
980
+ "opacity": {
981
+ "type": "opacity",
982
+ "value": "16%"
983
+ }
984
+ },
985
+ "table": {
986
+ "background": {
987
+ "color": {
988
+ "type": "color",
989
+ "value": "{panel.background.color}"
990
+ },
991
+ "color-alternating": {
992
+ "type": "color",
993
+ "value": "{color.neutral.50}"
994
+ },
995
+ "color-header": {
996
+ "type": "color",
997
+ "value": "{color.neutral.200}"
998
+ }
999
+ },
1000
+ "border": {
1001
+ "color": {
1002
+ "type": "color",
1003
+ "value": "{color.neutral.300}"
1004
+ }
1005
+ },
1006
+ "shadow": {
1007
+ "end": {
1008
+ "type": "color",
1009
+ "value": "rgba(49, 55, 58, 0.00)"
1010
+ },
1011
+ "start": {
1012
+ "type": "color",
1013
+ "value": "rgba(49, 55, 58, 0.16)"
1014
+ }
1015
+ }
1016
+ },
937
1017
  "text-decoration": {
938
1018
  "default": {
939
1019
  "type": "string",