@synergy-design-system/tokens 2.22.0 → 2.23.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 +7 -0
- package/README.md +40 -17
- package/dist/js/index.d.ts +1 -1
- package/dist/js/index.js +1 -1
- package/dist/scss/_tokens.scss +1 -1
- package/dist/themes/dark.css +6 -6
- package/dist/themes/light.css +6 -6
- package/dist/themes/sick2018_dark.css +268 -0
- package/dist/themes/sick2018_light.css +268 -0
- package/dist/themes/sick2025_dark.css +268 -0
- package/dist/themes/sick2025_light.css +268 -0
- package/package.json +1 -1
- package/src/figma-variables/output/sick2018-dark.json +0 -4
- package/src/figma-variables/output/sick2018-light.json +0 -4
- package/src/figma-variables/output/sick2025-dark.json +1183 -0
- package/src/figma-variables/output/sick2025-light.json +1183 -0
|
@@ -0,0 +1,268 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @synergy-design-system/tokens version 2.22.0
|
|
3
|
+
* SICK Global UX Foundation
|
|
4
|
+
* Do not edit directly, this file was auto-generated.
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
:root, .syn-sick2025-light {
|
|
8
|
+
color-scheme: light;
|
|
9
|
+
|
|
10
|
+
--syn-border-radius-circle: 9999px;
|
|
11
|
+
--syn-border-radius-large: 8px;
|
|
12
|
+
--syn-border-radius-medium: 8px;
|
|
13
|
+
--syn-border-radius-none: 0px;
|
|
14
|
+
--syn-border-radius-pill: 9999px;
|
|
15
|
+
--syn-border-radius-small: 4px;
|
|
16
|
+
--syn-border-radius-x-large: 16px;
|
|
17
|
+
--syn-border-width-large: 3px; /** Large */
|
|
18
|
+
--syn-border-width-medium: 2px; /** Medium */
|
|
19
|
+
--syn-border-width-none: 0px; /** None */
|
|
20
|
+
--syn-border-width-small: 1px; /** Small */
|
|
21
|
+
--syn-border-width-x-large: 4px; /** X Large */
|
|
22
|
+
--syn-button-font-size-large: var(--syn-font-size-large);
|
|
23
|
+
--syn-button-font-size-medium: var(--syn-font-size-medium);
|
|
24
|
+
--syn-button-font-size-small: var(--syn-font-size-small);
|
|
25
|
+
--syn-color-accent-50: #ffffff;
|
|
26
|
+
--syn-color-accent-100: #ffffff;
|
|
27
|
+
--syn-color-accent-200: #ffffff;
|
|
28
|
+
--syn-color-accent-300: #ffffff;
|
|
29
|
+
--syn-color-accent-400: #ffffff;
|
|
30
|
+
--syn-color-accent-500: #ffffff;
|
|
31
|
+
--syn-color-accent-600: #ffffff;
|
|
32
|
+
--syn-color-accent-700: #ffffff;
|
|
33
|
+
--syn-color-accent-800: #ffffff;
|
|
34
|
+
--syn-color-accent-900: #ffffff;
|
|
35
|
+
--syn-color-accent-950: #ffffff;
|
|
36
|
+
--syn-color-error-50: #fff1f1;
|
|
37
|
+
--syn-color-error-100: #ffe3e4;
|
|
38
|
+
--syn-color-error-200: #ffcfd1;
|
|
39
|
+
--syn-color-error-300: #ffa0a2;
|
|
40
|
+
--syn-color-error-400: #ff696d;
|
|
41
|
+
--syn-color-error-500: #f93a3f;
|
|
42
|
+
--syn-color-error-600: #e6191e;
|
|
43
|
+
--syn-color-error-700: #bc1519;
|
|
44
|
+
--syn-color-error-800: #941013;
|
|
45
|
+
--syn-color-error-900: #6c0c0e;
|
|
46
|
+
--syn-color-error-950: #450709;
|
|
47
|
+
--syn-color-neutral-0: #ffffff;
|
|
48
|
+
--syn-color-neutral-50: #f2f2f2;
|
|
49
|
+
--syn-color-neutral-100: #e7e7e7;
|
|
50
|
+
--syn-color-neutral-200: #cccccc;
|
|
51
|
+
--syn-color-neutral-300: #b2b2b2;
|
|
52
|
+
--syn-color-neutral-400: #999999;
|
|
53
|
+
--syn-color-neutral-500: #868686;
|
|
54
|
+
--syn-color-neutral-600: #666666;
|
|
55
|
+
--syn-color-neutral-700: #565656;
|
|
56
|
+
--syn-color-neutral-800: #333333;
|
|
57
|
+
--syn-color-neutral-900: #1a1a1a;
|
|
58
|
+
--syn-color-neutral-950: #0d0d0d;
|
|
59
|
+
--syn-color-neutral-1000: #000000;
|
|
60
|
+
--syn-color-primary-50: #eff5ff;
|
|
61
|
+
--syn-color-primary-100: #dae7ff;
|
|
62
|
+
--syn-color-primary-200: #ccdeff;
|
|
63
|
+
--syn-color-primary-300: #91bbff;
|
|
64
|
+
--syn-color-primary-400: #5e97fc;
|
|
65
|
+
--syn-color-primary-500: #3183fe;
|
|
66
|
+
--syn-color-primary-600: #066fff;
|
|
67
|
+
--syn-color-primary-700: #005aff;
|
|
68
|
+
--syn-color-primary-800: #0845c5;
|
|
69
|
+
--syn-color-primary-900: #0d3f9b;
|
|
70
|
+
--syn-color-primary-950: #0e275d;
|
|
71
|
+
--syn-color-success-50: #f0fdf4;
|
|
72
|
+
--syn-color-success-100: #ddfbe6;
|
|
73
|
+
--syn-color-success-200: #bcf6cf;
|
|
74
|
+
--syn-color-success-300: #84eca7;
|
|
75
|
+
--syn-color-success-400: #6ad88f;
|
|
76
|
+
--syn-color-success-500: #4fc275;
|
|
77
|
+
--syn-color-success-600: #34ad5c;
|
|
78
|
+
--syn-color-success-700: #1a9945;
|
|
79
|
+
--syn-color-success-800: #00852c;
|
|
80
|
+
--syn-color-success-900: #026524;
|
|
81
|
+
--syn-color-success-950: #003911;
|
|
82
|
+
--syn-color-warning-50: #fffbeb;
|
|
83
|
+
--syn-color-warning-100: #fff5c6;
|
|
84
|
+
--syn-color-warning-200: #ffe67c;
|
|
85
|
+
--syn-color-warning-300: #fbdb52;
|
|
86
|
+
--syn-color-warning-400: #f6d029;
|
|
87
|
+
--syn-color-warning-500: #f2c500;
|
|
88
|
+
--syn-color-warning-600: #d19800;
|
|
89
|
+
--syn-color-warning-700: #a66c02;
|
|
90
|
+
--syn-color-warning-800: #89540a;
|
|
91
|
+
--syn-color-warning-900: #74450f;
|
|
92
|
+
--syn-color-warning-950: #442404;
|
|
93
|
+
--syn-dimension-base: 4px; /** to be deprecated */
|
|
94
|
+
--syn-duration-extra-fast: 50ms;
|
|
95
|
+
--syn-duration-extra-slow: 1000ms;
|
|
96
|
+
--syn-duration-fast: 150ms;
|
|
97
|
+
--syn-duration-normal: 250ms;
|
|
98
|
+
--syn-duration-slow: 500ms;
|
|
99
|
+
--syn-focus-ring-color: var(--syn-color-primary-400);
|
|
100
|
+
--syn-focus-ring-offset: var(--syn-spacing-3x-small);
|
|
101
|
+
--syn-focus-ring-style: solid;
|
|
102
|
+
--syn-focus-ring-width: var(--syn-border-width-medium);
|
|
103
|
+
--syn-font-mono: 'Roboto Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; /** Coding font */
|
|
104
|
+
--syn-font-sans: 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; /** Main font */
|
|
105
|
+
--syn-font-sans-fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif, 'apple color emoji', 'segoe ui emoji', 'segoe ui symbol'; /** System font */
|
|
106
|
+
--syn-font-serif: Georgia, 'Times New Roman', serif; /** Shoelace compatibility DO NOT USE */
|
|
107
|
+
--syn-font-size-2x-large: 32px;
|
|
108
|
+
--syn-font-size-2x-small: 11px;
|
|
109
|
+
--syn-font-size-3x-large: 40px;
|
|
110
|
+
--syn-font-size-4x-large: 52px;
|
|
111
|
+
--syn-font-size-large: 20px;
|
|
112
|
+
--syn-font-size-medium: 16px;
|
|
113
|
+
--syn-font-size-small: 14px;
|
|
114
|
+
--syn-font-size-x-large: 24px;
|
|
115
|
+
--syn-font-size-x-small: 12px;
|
|
116
|
+
--syn-font-weight-bold: 600;
|
|
117
|
+
--syn-font-weight-light: 400; /** Shoelace compatibility DO NOT USE */
|
|
118
|
+
--syn-font-weight-normal: 400;
|
|
119
|
+
--syn-font-weight-semibold: 600;
|
|
120
|
+
--syn-input-background-color: var(--syn-color-neutral-0);
|
|
121
|
+
--syn-input-background-color-disabled: var(--syn-input-background-color);
|
|
122
|
+
--syn-input-background-color-focus: var(--syn-input-background-color);
|
|
123
|
+
--syn-input-background-color-hover: var(--syn-input-background-color);
|
|
124
|
+
--syn-input-border-color: var(--syn-color-neutral-700);
|
|
125
|
+
--syn-input-border-color-disabled: var(--syn-color-neutral-700);
|
|
126
|
+
--syn-input-border-color-focus: var(--syn-color-neutral-950);
|
|
127
|
+
--syn-input-border-color-focus-error: var(--syn-color-error-700);
|
|
128
|
+
--syn-input-border-color-hover: var(--syn-color-neutral-950);
|
|
129
|
+
--syn-input-border-radius-large: var(--syn-border-radius-none);
|
|
130
|
+
--syn-input-border-radius-medium: var(--syn-border-radius-none);
|
|
131
|
+
--syn-input-border-radius-small: var(--syn-border-radius-none);
|
|
132
|
+
--syn-input-border-width: 1px;
|
|
133
|
+
--syn-input-color: var(--syn-color-neutral-950);
|
|
134
|
+
--syn-input-color-disabled: var(--syn-color-neutral-950);
|
|
135
|
+
--syn-input-color-focus: var(--syn-color-neutral-950);
|
|
136
|
+
--syn-input-color-hover: var(--syn-color-neutral-950);
|
|
137
|
+
--syn-input-disabled-opacity: 0.5;
|
|
138
|
+
--syn-input-focus-ring-color: var(--syn-color-primary-400);
|
|
139
|
+
--syn-input-focus-ring-error: var(--syn-color-error-400);
|
|
140
|
+
--syn-input-focus-ring-offset: 0px;
|
|
141
|
+
--syn-input-font-family: var(--syn-font-sans);
|
|
142
|
+
--syn-input-font-size-large: var(--syn-font-size-large);
|
|
143
|
+
--syn-input-font-size-medium: var(--syn-font-size-medium);
|
|
144
|
+
--syn-input-font-size-small: var(--syn-font-size-small);
|
|
145
|
+
--syn-input-font-weight: var(--syn-font-weight-normal);
|
|
146
|
+
--syn-input-height-large: var(--syn-spacing-3x-large);
|
|
147
|
+
--syn-input-height-medium: var(--syn-spacing-2x-large);
|
|
148
|
+
--syn-input-height-small: 36px;
|
|
149
|
+
--syn-input-help-text-color: var(--syn-color-neutral-800);
|
|
150
|
+
--syn-input-help-text-color-error: var(--syn-color-error-700);
|
|
151
|
+
--syn-input-help-text-font-size-large: var(--syn-font-size-medium);
|
|
152
|
+
--syn-input-help-text-font-size-medium: var(--syn-font-size-small);
|
|
153
|
+
--syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
|
|
154
|
+
--syn-input-icon-color: var(--syn-color-neutral-800);
|
|
155
|
+
--syn-input-icon-color-focus: var(--syn-color-neutral-800);
|
|
156
|
+
--syn-input-icon-color-hover: var(--syn-color-neutral-800);
|
|
157
|
+
--syn-input-icon-icon-clearable-color: var(--syn-color-neutral-500);
|
|
158
|
+
--syn-input-icon-icon-clearable-color-focus: var(--syn-color-neutral-500);
|
|
159
|
+
--syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-500);
|
|
160
|
+
--syn-input-label-color: var(--syn-color-neutral-950);
|
|
161
|
+
--syn-input-label-font-size-large: var(--syn-font-size-large);
|
|
162
|
+
--syn-input-label-font-size-medium: var(--syn-font-size-medium);
|
|
163
|
+
--syn-input-label-font-size-small: var(--syn-font-size-small);
|
|
164
|
+
--syn-input-letter-spacing: normal;
|
|
165
|
+
--syn-input-placeholder-color: var(--syn-color-neutral-500);
|
|
166
|
+
--syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
|
|
167
|
+
--syn-input-readonly-color: var(--syn-color-neutral-800);
|
|
168
|
+
--syn-input-readonly-color-disabled: var(--syn-color-neutral-800);
|
|
169
|
+
--syn-input-readonly-color-focus: var(--syn-color-neutral-950);
|
|
170
|
+
--syn-input-readonly-color-hover: var(--syn-color-neutral-950);
|
|
171
|
+
--syn-input-readonly-background-color: var(--syn-color-neutral-50);
|
|
172
|
+
--syn-input-readonly-background-color-disabled: var(--syn-color-neutral-50);
|
|
173
|
+
--syn-input-readonly-background-color-focus: var(--syn-color-neutral-50);
|
|
174
|
+
--syn-input-readonly-background-color-hover: var(--syn-color-neutral-50);
|
|
175
|
+
--syn-input-required-content: "*";
|
|
176
|
+
--syn-input-required-content-color: var(--syn-input-label-color);
|
|
177
|
+
--syn-input-required-content-offset: -2px;
|
|
178
|
+
--syn-input-spacing-large: var(--syn-spacing-large);
|
|
179
|
+
--syn-input-spacing-medium: var(--syn-spacing-medium);
|
|
180
|
+
--syn-input-spacing-small: var(--syn-spacing-small);
|
|
181
|
+
--syn-input-width: var(--syn-border-width-small);
|
|
182
|
+
--syn-letter-spacing-dense: normal; /** Shoelace compatibility DO NOT USE */
|
|
183
|
+
--syn-letter-spacing-denser: normal; /** Shoelace compatibility DO NOT USE */
|
|
184
|
+
--syn-letter-spacing-loose: normal; /** Shoelace compatibility DO NOT USE */
|
|
185
|
+
--syn-letter-spacing-looser: 2px; /** Shoelace compatibility DO NOT USE */
|
|
186
|
+
--syn-letter-spacing-normal: normal;
|
|
187
|
+
--syn-line-height-dense: 1.2; /** Shoelace compatibility DO NOT USE */
|
|
188
|
+
--syn-line-height-denser: 1; /** Shoelace compatibility DO NOT USE */
|
|
189
|
+
--syn-line-height-loose: 1.8; /** Shoelace compatibility DO NOT USE */
|
|
190
|
+
--syn-line-height-looser: 2.2; /** Shoelace compatibility DO NOT USE */
|
|
191
|
+
--syn-line-height-normal: 1.4; /** Shoelace compatibility DO NOT USE */
|
|
192
|
+
--syn-link-color: var(--syn-color-primary-600);
|
|
193
|
+
--syn-link-color-active: var(--syn-color-primary-950);
|
|
194
|
+
--syn-link-color-hover: var(--syn-color-primary-900);
|
|
195
|
+
--syn-link-quiet-color: var(--syn-typography-color-text);
|
|
196
|
+
--syn-link-quiet-color-active: var(--syn-color-primary-950);
|
|
197
|
+
--syn-link-quiet-color-hover: var(--syn-color-primary-900);
|
|
198
|
+
--syn-opacity-50: 0.5; /** 50% */
|
|
199
|
+
--syn-overlay-background-color: rgba(0, 0, 0, 0.5);
|
|
200
|
+
--syn-panel-background-color: var(--syn-color-neutral-0);
|
|
201
|
+
--syn-panel-border-color: var(--syn-color-neutral-300);
|
|
202
|
+
--syn-panel-border-width: var(--syn-border-width-small);
|
|
203
|
+
--syn-spacing-2x-large: 48px;
|
|
204
|
+
--syn-spacing-2x-small: 4px;
|
|
205
|
+
--syn-spacing-3x-large: 64px;
|
|
206
|
+
--syn-spacing-3x-small: 2px;
|
|
207
|
+
--syn-spacing-4x-large: 96px;
|
|
208
|
+
--syn-spacing-4x-small: 1px;
|
|
209
|
+
--syn-spacing-5x-large: 128px;
|
|
210
|
+
--syn-spacing-large: 24px;
|
|
211
|
+
--syn-spacing-medium: 16px;
|
|
212
|
+
--syn-spacing-medium-large: 20px;
|
|
213
|
+
--syn-spacing-small: 12px;
|
|
214
|
+
--syn-spacing-x-large: 32px;
|
|
215
|
+
--syn-spacing-x-small: 8px;
|
|
216
|
+
--syn-text-decoration-default: none;
|
|
217
|
+
--syn-text-decoration-underline: underline;
|
|
218
|
+
--syn-toggle-size-large: var(--syn-spacing-large);
|
|
219
|
+
--syn-toggle-size-medium: var(--syn-spacing-medium);
|
|
220
|
+
--syn-toggle-size-small: 14px;
|
|
221
|
+
--syn-tooltip-arrow-size: 9px;
|
|
222
|
+
--syn-tooltip-background-color: var(--syn-color-neutral-950);
|
|
223
|
+
--syn-tooltip-border-radius: var(--syn-border-radius-small);
|
|
224
|
+
--syn-tooltip-color: var(--syn-typography-color-text-inverted);
|
|
225
|
+
--syn-tooltip-font-family: var(--syn-font-sans);
|
|
226
|
+
--syn-tooltip-font-size: var(--syn-font-size-small);
|
|
227
|
+
--syn-tooltip-font-weight: var(--syn-font-weight-normal);
|
|
228
|
+
--syn-tooltip-line-height: var(--syn-line-height-normal);
|
|
229
|
+
--syn-tooltip-padding: var(--syn-spacing-small);
|
|
230
|
+
--syn-transition-fast: 150ms; /** Shoelace compatibility DO NOT USE */
|
|
231
|
+
--syn-transition-medium: 250ms; /** Shoelace compatibility DO NOT USE */
|
|
232
|
+
--syn-transition-slow: 500ms; /** Shoelace compatibility DO NOT USE */
|
|
233
|
+
--syn-transition-x-fast: 50ms; /** Shoelace compatibility DO NOT USE */
|
|
234
|
+
--syn-transition-x-slow: 1000ms; /** Shoelace compatibility DO NOT USE */
|
|
235
|
+
--syn-typography-color-text: var(--syn-color-neutral-950);
|
|
236
|
+
--syn-typography-color-text-inverted: var(--syn-color-neutral-0);
|
|
237
|
+
--syn-z-index-dialog: 800; /** Shoelace compatibility DO NOT USE */
|
|
238
|
+
--syn-z-index-drawer: 700; /** Shoelace compatibility DO NOT USE */
|
|
239
|
+
--syn-z-index-dropdown: 900; /** Shoelace compatibility DO NOT USE */
|
|
240
|
+
--syn-z-index-toast: 950; /** Shoelace compatibility DO NOT USE */
|
|
241
|
+
--syn-z-index-tooltip: 1000; /** Shoelace compatibility DO NOT USE */
|
|
242
|
+
--syn-shadow-medium: 0px 1px 2px 0px rgba(13, 13, 13, 0.08), 0px 1px 4px 0px rgba(13, 13, 13, 0.08), 0px 2px 8px 0px rgba(13, 13, 13, 0.08);
|
|
243
|
+
--syn-shadow-large: 0px 0px 3px 0px rgba(13, 13, 13, 0.12), 0px 2px 6px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.16);
|
|
244
|
+
--syn-shadow-x-large: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 8px 24px 0px rgba(13, 13, 13, 0.12), 0px 16px 48px 0px rgba(13, 13, 13, 0.16);
|
|
245
|
+
--syn-shadow-overflow-down: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.12), 0px 4px 12px 0px rgba(13, 13, 13, 0.16);
|
|
246
|
+
--syn-shadow-overflow-up: 0px -1px 4px 0px rgba(13, 13, 13, 0.12), 0px -3px 8px 0px rgba(13, 13, 13, 0.12), 0px -4px 12px 0px rgba(13, 13, 13, 0.16);
|
|
247
|
+
--syn-shadow-overflow-left: -1px 0px 4px 0px rgba(13, 13, 13, 0.12), -3px 0px 8px 0px rgba(13, 13, 13, 0.12), -4px 0px 12px 0px rgba(13, 13, 13, 0.16);
|
|
248
|
+
--syn-shadow-overflow-right: 1px 0px 4px 0px rgba(13, 13, 13, 0.12), 3px 0px 8px 0px rgba(13, 13, 13, 0.12), 4px 0px 12px 0px rgba(13, 13, 13, 0.16);
|
|
249
|
+
--syn-shadow-x-small: 0px 1px 2px 0px rgba(13, 13, 13, 0.04), 0px 1px 4px 0px rgba(13, 13, 13, 0.04), 0px 2px 8px 0px rgba(13, 13, 13, 0.04);
|
|
250
|
+
--syn-shadow-small: 0px 1px 2px 0px rgba(13, 13, 13, 0.06), 0px 1px 4px 0px rgba(13, 13, 13, 0.06), 0px 2px 8px 0px rgba(13, 13, 13, 0.06);
|
|
251
|
+
--syn-body-x-small-regular: 400 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
252
|
+
--syn-body-x-small-semibold: 600 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
253
|
+
--syn-body-x-small-bold: 600 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
254
|
+
--syn-body-small-regular: 400 14px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
255
|
+
--syn-body-small-semibold: 600 14px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
256
|
+
--syn-body-small-bold: 600 14px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
257
|
+
--syn-body-medium-regular: 400 16px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
258
|
+
--syn-body-medium-semibold: 600 16px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
259
|
+
--syn-body-medium-bold: 600 16px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
260
|
+
--syn-body-large-regular: 400 20px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
261
|
+
--syn-body-large-semibold: 600 20px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
262
|
+
--syn-body-large-bold: 600 20px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
263
|
+
--syn-heading-large: 600 20px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
264
|
+
--syn-heading-x-large: 600 24px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
265
|
+
--syn-heading-2x-large: 600 32px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
266
|
+
--syn-heading-3x-large: 600 40px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
267
|
+
--syn-focus-ring: var(--syn-focus-ring-style) var(--syn-focus-ring-width) var(--syn-focus-ring-color);
|
|
268
|
+
}
|
package/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.23.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",
|
|
@@ -1080,22 +1080,18 @@
|
|
|
1080
1080
|
"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
1081
|
},
|
|
1082
1082
|
"overflow-down": {
|
|
1083
|
-
"description": "Overflow Down",
|
|
1084
1083
|
"type": "shadow",
|
|
1085
1084
|
"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
1085
|
},
|
|
1087
1086
|
"overflow-up": {
|
|
1088
|
-
"description": "Overflow Up",
|
|
1089
1087
|
"type": "shadow",
|
|
1090
1088
|
"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
1089
|
},
|
|
1092
1090
|
"overflow-left": {
|
|
1093
|
-
"description": "Overflow Left",
|
|
1094
1091
|
"type": "shadow",
|
|
1095
1092
|
"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
1093
|
},
|
|
1097
1094
|
"overflow-right": {
|
|
1098
|
-
"description": "Overflow Right",
|
|
1099
1095
|
"type": "shadow",
|
|
1100
1096
|
"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
1097
|
},
|
|
@@ -1080,22 +1080,18 @@
|
|
|
1080
1080
|
"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
1081
|
},
|
|
1082
1082
|
"overflow-down": {
|
|
1083
|
-
"description": "Overflow Down",
|
|
1084
1083
|
"type": "shadow",
|
|
1085
1084
|
"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
1085
|
},
|
|
1087
1086
|
"overflow-up": {
|
|
1088
|
-
"description": "Overflow Up",
|
|
1089
1087
|
"type": "shadow",
|
|
1090
1088
|
"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
1089
|
},
|
|
1092
1090
|
"overflow-left": {
|
|
1093
|
-
"description": "Overflow Left",
|
|
1094
1091
|
"type": "shadow",
|
|
1095
1092
|
"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
1093
|
},
|
|
1097
1094
|
"overflow-right": {
|
|
1098
|
-
"description": "Overflow Right",
|
|
1099
1095
|
"type": "shadow",
|
|
1100
1096
|
"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
1097
|
},
|