@synergy-design-system/tokens 2.22.0 → 2.24.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.
- package/CHANGELOG.md +14 -0
- package/README.md +40 -17
- package/dist/js/index.d.ts +31 -1
- package/dist/js/index.js +31 -1
- package/dist/scss/_tokens.scss +7 -1
- package/dist/themes/dark.css +12 -6
- package/dist/themes/light.css +12 -6
- package/dist/themes/sick2018_dark.css +274 -0
- package/dist/themes/sick2018_light.css +274 -0
- package/dist/themes/sick2025_dark.css +274 -0
- package/dist/themes/sick2025_light.css +274 -0
- package/package.json +1 -1
- package/src/figma-variables/output/sick2018-dark.json +30 -4
- package/src/figma-variables/output/sick2018-light.json +30 -4
- package/src/figma-variables/output/sick2025-dark.json +1213 -0
- package/src/figma-variables/output/sick2025-light.json +1213 -0
|
@@ -0,0 +1,274 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @synergy-design-system/tokens version 2.23.0
|
|
3
|
+
* SICK Global UX Foundation
|
|
4
|
+
* Do not edit directly, this file was auto-generated.
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
:root, .syn-sick2025-light {
|
|
8
|
+
color-scheme: light;
|
|
9
|
+
|
|
10
|
+
--syn-border-radius-circle: 9999px;
|
|
11
|
+
--syn-border-radius-large: 8px;
|
|
12
|
+
--syn-border-radius-medium: 8px;
|
|
13
|
+
--syn-border-radius-none: 0px;
|
|
14
|
+
--syn-border-radius-pill: 9999px;
|
|
15
|
+
--syn-border-radius-small: 4px;
|
|
16
|
+
--syn-border-radius-x-large: 16px;
|
|
17
|
+
--syn-border-width-large: 3px; /** Large */
|
|
18
|
+
--syn-border-width-medium: 2px; /** Medium */
|
|
19
|
+
--syn-border-width-none: 0px; /** None */
|
|
20
|
+
--syn-border-width-small: 1px; /** Small */
|
|
21
|
+
--syn-border-width-x-large: 4px; /** X Large */
|
|
22
|
+
--syn-button-font-size-large: var(--syn-font-size-large);
|
|
23
|
+
--syn-button-font-size-medium: var(--syn-font-size-medium);
|
|
24
|
+
--syn-button-font-size-small: var(--syn-font-size-small);
|
|
25
|
+
--syn-color-accent-50: #ffffff;
|
|
26
|
+
--syn-color-accent-100: #ffffff;
|
|
27
|
+
--syn-color-accent-200: #ffffff;
|
|
28
|
+
--syn-color-accent-300: #ffffff;
|
|
29
|
+
--syn-color-accent-400: #ffffff;
|
|
30
|
+
--syn-color-accent-500: #ffffff;
|
|
31
|
+
--syn-color-accent-600: #ffffff;
|
|
32
|
+
--syn-color-accent-700: #ffffff;
|
|
33
|
+
--syn-color-accent-800: #ffffff;
|
|
34
|
+
--syn-color-accent-900: #ffffff;
|
|
35
|
+
--syn-color-accent-950: #ffffff;
|
|
36
|
+
--syn-color-error-50: #fff1f1;
|
|
37
|
+
--syn-color-error-100: #ffe3e4;
|
|
38
|
+
--syn-color-error-200: #ffcfd1;
|
|
39
|
+
--syn-color-error-300: #ffa0a2;
|
|
40
|
+
--syn-color-error-400: #ff696d;
|
|
41
|
+
--syn-color-error-500: #f93a3f;
|
|
42
|
+
--syn-color-error-600: #e6191e;
|
|
43
|
+
--syn-color-error-700: #bc1519;
|
|
44
|
+
--syn-color-error-800: #941013;
|
|
45
|
+
--syn-color-error-900: #6c0c0e;
|
|
46
|
+
--syn-color-error-950: #450709;
|
|
47
|
+
--syn-color-neutral-0: #ffffff;
|
|
48
|
+
--syn-color-neutral-50: #f2f2f2;
|
|
49
|
+
--syn-color-neutral-100: #e7e7e7;
|
|
50
|
+
--syn-color-neutral-200: #cccccc;
|
|
51
|
+
--syn-color-neutral-300: #b2b2b2;
|
|
52
|
+
--syn-color-neutral-400: #999999;
|
|
53
|
+
--syn-color-neutral-500: #868686;
|
|
54
|
+
--syn-color-neutral-600: #666666;
|
|
55
|
+
--syn-color-neutral-700: #565656;
|
|
56
|
+
--syn-color-neutral-800: #333333;
|
|
57
|
+
--syn-color-neutral-900: #1a1a1a;
|
|
58
|
+
--syn-color-neutral-950: #0d0d0d;
|
|
59
|
+
--syn-color-neutral-1000: #000000;
|
|
60
|
+
--syn-color-primary-50: #eff5ff;
|
|
61
|
+
--syn-color-primary-100: #dae7ff;
|
|
62
|
+
--syn-color-primary-200: #ccdeff;
|
|
63
|
+
--syn-color-primary-300: #91bbff;
|
|
64
|
+
--syn-color-primary-400: #5e97fc;
|
|
65
|
+
--syn-color-primary-500: #3183fe;
|
|
66
|
+
--syn-color-primary-600: #066fff;
|
|
67
|
+
--syn-color-primary-700: #005aff;
|
|
68
|
+
--syn-color-primary-800: #0845c5;
|
|
69
|
+
--syn-color-primary-900: #0d3f9b;
|
|
70
|
+
--syn-color-primary-950: #0e275d;
|
|
71
|
+
--syn-color-success-50: #f0fdf4;
|
|
72
|
+
--syn-color-success-100: #ddfbe6;
|
|
73
|
+
--syn-color-success-200: #bcf6cf;
|
|
74
|
+
--syn-color-success-300: #84eca7;
|
|
75
|
+
--syn-color-success-400: #6ad88f;
|
|
76
|
+
--syn-color-success-500: #4fc275;
|
|
77
|
+
--syn-color-success-600: #34ad5c;
|
|
78
|
+
--syn-color-success-700: #1a9945;
|
|
79
|
+
--syn-color-success-800: #00852c;
|
|
80
|
+
--syn-color-success-900: #026524;
|
|
81
|
+
--syn-color-success-950: #003911;
|
|
82
|
+
--syn-color-warning-50: #fffbeb;
|
|
83
|
+
--syn-color-warning-100: #fff5c6;
|
|
84
|
+
--syn-color-warning-200: #ffe67c;
|
|
85
|
+
--syn-color-warning-300: #fbdb52;
|
|
86
|
+
--syn-color-warning-400: #f6d029;
|
|
87
|
+
--syn-color-warning-500: #f2c500;
|
|
88
|
+
--syn-color-warning-600: #d19800;
|
|
89
|
+
--syn-color-warning-700: #a66c02;
|
|
90
|
+
--syn-color-warning-800: #89540a;
|
|
91
|
+
--syn-color-warning-900: #74450f;
|
|
92
|
+
--syn-color-warning-950: #442404;
|
|
93
|
+
--syn-dimension-base: 4px; /** to be deprecated */
|
|
94
|
+
--syn-duration-extra-fast: 50ms;
|
|
95
|
+
--syn-duration-extra-slow: 1000ms;
|
|
96
|
+
--syn-duration-fast: 150ms;
|
|
97
|
+
--syn-duration-normal: 250ms;
|
|
98
|
+
--syn-duration-slow: 500ms;
|
|
99
|
+
--syn-focus-ring-color: var(--syn-color-primary-400);
|
|
100
|
+
--syn-focus-ring-offset: var(--syn-spacing-3x-small);
|
|
101
|
+
--syn-focus-ring-style: solid;
|
|
102
|
+
--syn-focus-ring-width: var(--syn-border-width-medium);
|
|
103
|
+
--syn-font-mono: 'Roboto Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; /** Coding font */
|
|
104
|
+
--syn-font-sans: 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; /** Main font */
|
|
105
|
+
--syn-font-sans-fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif, 'apple color emoji', 'segoe ui emoji', 'segoe ui symbol'; /** System font */
|
|
106
|
+
--syn-font-serif: Georgia, 'Times New Roman', serif; /** Shoelace compatibility DO NOT USE */
|
|
107
|
+
--syn-font-size-2x-large: 32px;
|
|
108
|
+
--syn-font-size-2x-small: 11px;
|
|
109
|
+
--syn-font-size-3x-large: 40px;
|
|
110
|
+
--syn-font-size-4x-large: 52px;
|
|
111
|
+
--syn-font-size-large: 20px;
|
|
112
|
+
--syn-font-size-medium: 16px;
|
|
113
|
+
--syn-font-size-small: 14px;
|
|
114
|
+
--syn-font-size-x-large: 24px;
|
|
115
|
+
--syn-font-size-x-small: 12px;
|
|
116
|
+
--syn-font-weight-bold: 600;
|
|
117
|
+
--syn-font-weight-light: 400; /** Shoelace compatibility DO NOT USE */
|
|
118
|
+
--syn-font-weight-normal: 400;
|
|
119
|
+
--syn-font-weight-semibold: 600;
|
|
120
|
+
--syn-input-background-color: var(--syn-color-neutral-0);
|
|
121
|
+
--syn-input-background-color-disabled: var(--syn-input-background-color);
|
|
122
|
+
--syn-input-background-color-focus: var(--syn-input-background-color);
|
|
123
|
+
--syn-input-background-color-hover: var(--syn-input-background-color);
|
|
124
|
+
--syn-input-border-color: var(--syn-color-neutral-950);
|
|
125
|
+
--syn-input-border-color-disabled: var(--syn-color-neutral-950);
|
|
126
|
+
--syn-input-border-color-focus: var(--syn-color-primary-700);
|
|
127
|
+
--syn-input-border-color-focus-error: var(--syn-color-error-600);
|
|
128
|
+
--syn-input-border-color-hover: var(--syn-color-primary-700);
|
|
129
|
+
--syn-input-border-radius-large: var(--syn-border-radius-medium);
|
|
130
|
+
--syn-input-border-radius-medium: var(--syn-border-radius-medium);
|
|
131
|
+
--syn-input-border-radius-small: var(--syn-border-radius-medium);
|
|
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-500);
|
|
139
|
+
--syn-input-focus-ring-error: var(--syn-color-error-500);
|
|
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-700);
|
|
150
|
+
--syn-input-help-text-color-error: var(--syn-color-error-600);
|
|
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-950);
|
|
155
|
+
--syn-input-icon-color-focus: var(--syn-color-neutral-950);
|
|
156
|
+
--syn-input-icon-color-hover: var(--syn-color-neutral-950);
|
|
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-700);
|
|
166
|
+
--syn-input-placeholder-color-disabled: var(--syn-color-neutral-700);
|
|
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: #f8f7f6;
|
|
172
|
+
--syn-input-readonly-background-color-disabled: #f8f7f6;
|
|
173
|
+
--syn-input-readonly-background-color-focus: #f8f7f6;
|
|
174
|
+
--syn-input-readonly-background-color-hover: #f8f7f6;
|
|
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-interactive-primary-color: var(--syn-color-primary-700);
|
|
183
|
+
--syn-interactive-primary-color-active: var(--syn-color-neutral-950);
|
|
184
|
+
--syn-interactive-primary-color-hover: var(--syn-color-primary-900);
|
|
185
|
+
--syn-interactive-secondary-color: var(--syn-color-neutral-950);
|
|
186
|
+
--syn-interactive-secondary-color-active: var(--syn-color-primary-700);
|
|
187
|
+
--syn-interactive-secondary-color-hover: var(--syn-color-primary-700);
|
|
188
|
+
--syn-letter-spacing-dense: normal; /** Shoelace compatibility DO NOT USE */
|
|
189
|
+
--syn-letter-spacing-denser: normal; /** Shoelace compatibility DO NOT USE */
|
|
190
|
+
--syn-letter-spacing-loose: normal; /** Shoelace compatibility DO NOT USE */
|
|
191
|
+
--syn-letter-spacing-looser: 2px; /** Shoelace compatibility DO NOT USE */
|
|
192
|
+
--syn-letter-spacing-normal: normal;
|
|
193
|
+
--syn-line-height-dense: 1.2; /** Shoelace compatibility DO NOT USE */
|
|
194
|
+
--syn-line-height-denser: 1; /** Shoelace compatibility DO NOT USE */
|
|
195
|
+
--syn-line-height-loose: 1.8; /** Shoelace compatibility DO NOT USE */
|
|
196
|
+
--syn-line-height-looser: 2.2; /** Shoelace compatibility DO NOT USE */
|
|
197
|
+
--syn-line-height-normal: 1.4; /** Shoelace compatibility DO NOT USE */
|
|
198
|
+
--syn-link-color: var(--syn-color-primary-600);
|
|
199
|
+
--syn-link-color-active: var(--syn-color-primary-950);
|
|
200
|
+
--syn-link-color-hover: var(--syn-color-primary-900);
|
|
201
|
+
--syn-link-quiet-color: var(--syn-typography-color-text);
|
|
202
|
+
--syn-link-quiet-color-active: var(--syn-color-primary-950);
|
|
203
|
+
--syn-link-quiet-color-hover: var(--syn-color-primary-900);
|
|
204
|
+
--syn-opacity-50: 0.5; /** 50% */
|
|
205
|
+
--syn-overlay-background-color: rgba(0, 0, 0, 0.5);
|
|
206
|
+
--syn-panel-background-color: var(--syn-color-neutral-0);
|
|
207
|
+
--syn-panel-border-color: var(--syn-color-neutral-300);
|
|
208
|
+
--syn-panel-border-width: var(--syn-border-width-small);
|
|
209
|
+
--syn-spacing-2x-large: 48px;
|
|
210
|
+
--syn-spacing-2x-small: 4px;
|
|
211
|
+
--syn-spacing-3x-large: 64px;
|
|
212
|
+
--syn-spacing-3x-small: 2px;
|
|
213
|
+
--syn-spacing-4x-large: 96px;
|
|
214
|
+
--syn-spacing-4x-small: 1px;
|
|
215
|
+
--syn-spacing-5x-large: 128px;
|
|
216
|
+
--syn-spacing-large: 24px;
|
|
217
|
+
--syn-spacing-medium: 16px;
|
|
218
|
+
--syn-spacing-medium-large: 20px;
|
|
219
|
+
--syn-spacing-small: 12px;
|
|
220
|
+
--syn-spacing-x-large: 32px;
|
|
221
|
+
--syn-spacing-x-small: 8px;
|
|
222
|
+
--syn-text-decoration-default: none;
|
|
223
|
+
--syn-text-decoration-underline: underline;
|
|
224
|
+
--syn-toggle-size-large: var(--syn-spacing-large);
|
|
225
|
+
--syn-toggle-size-medium: var(--syn-spacing-medium);
|
|
226
|
+
--syn-toggle-size-small: 14px;
|
|
227
|
+
--syn-tooltip-arrow-size: 9px;
|
|
228
|
+
--syn-tooltip-background-color: var(--syn-color-neutral-950);
|
|
229
|
+
--syn-tooltip-border-radius: var(--syn-border-radius-small);
|
|
230
|
+
--syn-tooltip-color: var(--syn-typography-color-text-inverted);
|
|
231
|
+
--syn-tooltip-font-family: var(--syn-font-sans);
|
|
232
|
+
--syn-tooltip-font-size: var(--syn-font-size-small);
|
|
233
|
+
--syn-tooltip-font-weight: var(--syn-font-weight-normal);
|
|
234
|
+
--syn-tooltip-line-height: var(--syn-line-height-normal);
|
|
235
|
+
--syn-tooltip-padding: var(--syn-spacing-small);
|
|
236
|
+
--syn-transition-fast: 150ms; /** Shoelace compatibility DO NOT USE */
|
|
237
|
+
--syn-transition-medium: 250ms; /** Shoelace compatibility DO NOT USE */
|
|
238
|
+
--syn-transition-slow: 500ms; /** Shoelace compatibility DO NOT USE */
|
|
239
|
+
--syn-transition-x-fast: 50ms; /** Shoelace compatibility DO NOT USE */
|
|
240
|
+
--syn-transition-x-slow: 1000ms; /** Shoelace compatibility DO NOT USE */
|
|
241
|
+
--syn-typography-color-text: var(--syn-color-neutral-950);
|
|
242
|
+
--syn-typography-color-text-inverted: var(--syn-color-neutral-0);
|
|
243
|
+
--syn-z-index-dialog: 800; /** Shoelace compatibility DO NOT USE */
|
|
244
|
+
--syn-z-index-drawer: 700; /** Shoelace compatibility DO NOT USE */
|
|
245
|
+
--syn-z-index-dropdown: 900; /** Shoelace compatibility DO NOT USE */
|
|
246
|
+
--syn-z-index-toast: 950; /** Shoelace compatibility DO NOT USE */
|
|
247
|
+
--syn-z-index-tooltip: 1000; /** Shoelace compatibility DO NOT USE */
|
|
248
|
+
--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);
|
|
249
|
+
--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);
|
|
250
|
+
--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);
|
|
251
|
+
--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);
|
|
252
|
+
--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);
|
|
253
|
+
--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);
|
|
254
|
+
--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);
|
|
255
|
+
--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);
|
|
256
|
+
--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);
|
|
257
|
+
--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';
|
|
258
|
+
--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';
|
|
259
|
+
--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';
|
|
260
|
+
--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';
|
|
261
|
+
--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';
|
|
262
|
+
--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';
|
|
263
|
+
--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';
|
|
264
|
+
--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';
|
|
265
|
+
--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';
|
|
266
|
+
--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';
|
|
267
|
+
--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';
|
|
268
|
+
--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';
|
|
269
|
+
--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';
|
|
270
|
+
--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';
|
|
271
|
+
--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';
|
|
272
|
+
--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';
|
|
273
|
+
--syn-focus-ring: var(--syn-focus-ring-style) var(--syn-focus-ring-width) var(--syn-focus-ring-color);
|
|
274
|
+
}
|
package/package.json
CHANGED
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
},
|
|
113
113
|
"type": "module",
|
|
114
114
|
"types": "./dist/js/index.d.ts",
|
|
115
|
-
"version": "2.
|
|
115
|
+
"version": "2.24.0",
|
|
116
116
|
"scripts": {
|
|
117
117
|
"build": "pnpm clean && node scripts/build.js",
|
|
118
118
|
"build:figma": "pnpm run build:variables && pnpm run build:styles",
|
|
@@ -766,6 +766,36 @@
|
|
|
766
766
|
"value": "{border-width.small}"
|
|
767
767
|
}
|
|
768
768
|
},
|
|
769
|
+
"interactive": {
|
|
770
|
+
"primary": {
|
|
771
|
+
"color": {
|
|
772
|
+
"type": "color",
|
|
773
|
+
"value": "{color.primary.600}"
|
|
774
|
+
},
|
|
775
|
+
"color-active": {
|
|
776
|
+
"type": "color",
|
|
777
|
+
"value": "{color.neutral.950}"
|
|
778
|
+
},
|
|
779
|
+
"color-hover": {
|
|
780
|
+
"type": "color",
|
|
781
|
+
"value": "{color.primary.900}"
|
|
782
|
+
}
|
|
783
|
+
},
|
|
784
|
+
"secondary": {
|
|
785
|
+
"color": {
|
|
786
|
+
"type": "color",
|
|
787
|
+
"value": "{color.neutral.950}"
|
|
788
|
+
},
|
|
789
|
+
"color-active": {
|
|
790
|
+
"type": "color",
|
|
791
|
+
"value": "{color.primary.600}"
|
|
792
|
+
},
|
|
793
|
+
"color-hover": {
|
|
794
|
+
"type": "color",
|
|
795
|
+
"value": "{color.primary.600}"
|
|
796
|
+
}
|
|
797
|
+
}
|
|
798
|
+
},
|
|
769
799
|
"letter-spacing": {
|
|
770
800
|
"dense": {
|
|
771
801
|
"description": "Shoelace compatibility DO NOT USE",
|
|
@@ -1080,22 +1110,18 @@
|
|
|
1080
1110
|
"value": "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)"
|
|
1081
1111
|
},
|
|
1082
1112
|
"overflow-down": {
|
|
1083
|
-
"description": "Overflow Down",
|
|
1084
1113
|
"type": "shadow",
|
|
1085
1114
|
"value": "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)"
|
|
1086
1115
|
},
|
|
1087
1116
|
"overflow-up": {
|
|
1088
|
-
"description": "Overflow Up",
|
|
1089
1117
|
"type": "shadow",
|
|
1090
1118
|
"value": "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)"
|
|
1091
1119
|
},
|
|
1092
1120
|
"overflow-left": {
|
|
1093
|
-
"description": "Overflow Left",
|
|
1094
1121
|
"type": "shadow",
|
|
1095
1122
|
"value": "-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)"
|
|
1096
1123
|
},
|
|
1097
1124
|
"overflow-right": {
|
|
1098
|
-
"description": "Overflow Right",
|
|
1099
1125
|
"type": "shadow",
|
|
1100
1126
|
"value": "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)"
|
|
1101
1127
|
},
|
|
@@ -766,6 +766,36 @@
|
|
|
766
766
|
"value": "{border-width.small}"
|
|
767
767
|
}
|
|
768
768
|
},
|
|
769
|
+
"interactive": {
|
|
770
|
+
"primary": {
|
|
771
|
+
"color": {
|
|
772
|
+
"type": "color",
|
|
773
|
+
"value": "{color.primary.600}"
|
|
774
|
+
},
|
|
775
|
+
"color-active": {
|
|
776
|
+
"type": "color",
|
|
777
|
+
"value": "{color.neutral.950}"
|
|
778
|
+
},
|
|
779
|
+
"color-hover": {
|
|
780
|
+
"type": "color",
|
|
781
|
+
"value": "{color.primary.900}"
|
|
782
|
+
}
|
|
783
|
+
},
|
|
784
|
+
"secondary": {
|
|
785
|
+
"color": {
|
|
786
|
+
"type": "color",
|
|
787
|
+
"value": "{color.neutral.950}"
|
|
788
|
+
},
|
|
789
|
+
"color-active": {
|
|
790
|
+
"type": "color",
|
|
791
|
+
"value": "{color.primary.600}"
|
|
792
|
+
},
|
|
793
|
+
"color-hover": {
|
|
794
|
+
"type": "color",
|
|
795
|
+
"value": "{color.primary.600}"
|
|
796
|
+
}
|
|
797
|
+
}
|
|
798
|
+
},
|
|
769
799
|
"letter-spacing": {
|
|
770
800
|
"dense": {
|
|
771
801
|
"description": "Shoelace compatibility DO NOT USE",
|
|
@@ -1080,22 +1110,18 @@
|
|
|
1080
1110
|
"value": "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)"
|
|
1081
1111
|
},
|
|
1082
1112
|
"overflow-down": {
|
|
1083
|
-
"description": "Overflow Down",
|
|
1084
1113
|
"type": "shadow",
|
|
1085
1114
|
"value": "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)"
|
|
1086
1115
|
},
|
|
1087
1116
|
"overflow-up": {
|
|
1088
|
-
"description": "Overflow Up",
|
|
1089
1117
|
"type": "shadow",
|
|
1090
1118
|
"value": "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)"
|
|
1091
1119
|
},
|
|
1092
1120
|
"overflow-left": {
|
|
1093
|
-
"description": "Overflow Left",
|
|
1094
1121
|
"type": "shadow",
|
|
1095
1122
|
"value": "-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)"
|
|
1096
1123
|
},
|
|
1097
1124
|
"overflow-right": {
|
|
1098
|
-
"description": "Overflow Right",
|
|
1099
1125
|
"type": "shadow",
|
|
1100
1126
|
"value": "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)"
|
|
1101
1127
|
},
|