@synergy-design-system/tokens 0.1.0 → 1.0.0-main.10

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.
@@ -0,0 +1,18 @@
1
+ {
2
+ "button": {
3
+ "font-size": {
4
+ "small": {
5
+ "value": "{font-size.x-small}",
6
+ "type": "fontSizes"
7
+ },
8
+ "medium": {
9
+ "value": "{font-size.medium}",
10
+ "type": "fontSizes"
11
+ },
12
+ "large": {
13
+ "value": "{font-size.large}",
14
+ "type": "fontSizes"
15
+ }
16
+ }
17
+ }
18
+ }
@@ -0,0 +1,16 @@
1
+ {
2
+ "focus-ring": {
3
+ "color": {
4
+ "value": "{primary.400}",
5
+ "type": "color"
6
+ },
7
+ "width": {
8
+ "value": "{border-width.medium}",
9
+ "type": "borderWidth"
10
+ },
11
+ "offset": {
12
+ "value": "{spacing.3x-small}",
13
+ "type": "spacing"
14
+ }
15
+ }
16
+ }
@@ -0,0 +1,266 @@
1
+ {
2
+ "input": {
3
+ "color": {
4
+ "value": "{neutral.950}",
5
+ "type": "color"
6
+ },
7
+ "color-hover": {
8
+ "value": "{neutral.950}",
9
+ "type": "color"
10
+ },
11
+ "color-focus": {
12
+ "value": "{neutral.950}",
13
+ "type": "color"
14
+ },
15
+ "color-disabled": {
16
+ "value": "{neutral.950}",
17
+ "type": "color"
18
+ },
19
+ "background": {
20
+ "color": {
21
+ "value": "{neutral.0}",
22
+ "type": "color"
23
+ },
24
+ "color-hover": {
25
+ "value": "{input.background.color}",
26
+ "type": "color"
27
+ },
28
+ "color-focus": {
29
+ "value": "{input.background.color}",
30
+ "type": "color"
31
+ },
32
+ "color-disabled": {
33
+ "value": "{input.background.color}",
34
+ "type": "color"
35
+ }
36
+ },
37
+ "border": {
38
+ "color": {
39
+ "value": "{neutral.700}",
40
+ "type": "color"
41
+ },
42
+ "color-hover": {
43
+ "value": "{neutral.950}",
44
+ "type": "color"
45
+ },
46
+ "color-focus": {
47
+ "value": "{neutral.950}",
48
+ "type": "color"
49
+ },
50
+ "color-disables": {
51
+ "value": "{neutral.700}",
52
+ "type": "color"
53
+ },
54
+ "radius-small": {
55
+ "value": "{border-radius.none}",
56
+ "type": "borderRadius"
57
+ },
58
+ "radius-medium": {
59
+ "value": "{border-radius.none}",
60
+ "type": "borderRadius"
61
+ },
62
+ "radius-large": {
63
+ "value": "{border-radius.none}",
64
+ "type": "borderRadius"
65
+ },
66
+ "color-focus-error": {
67
+ "value": "{error.700}",
68
+ "type": "color"
69
+ }
70
+ },
71
+ "width": {
72
+ "value": "{border-width.small}",
73
+ "type": "borderWidth"
74
+ },
75
+ "icon": {
76
+ "color": {
77
+ "value": "{neutral.800}",
78
+ "type": "color"
79
+ },
80
+ "color-hover": {
81
+ "value": "{neutral.800}",
82
+ "type": "color"
83
+ },
84
+ "color-focus": {
85
+ "value": "{neutral.800}",
86
+ "type": "color"
87
+ },
88
+ "icon-clearable": {
89
+ "color": {
90
+ "value": "{gray.500}",
91
+ "type": "color"
92
+ },
93
+ "color-hover": {
94
+ "value": "{gray.500}",
95
+ "type": "color"
96
+ },
97
+ "color-focus": {
98
+ "value": "{gray.500}",
99
+ "type": "color"
100
+ }
101
+ }
102
+ },
103
+ "placeholder": {
104
+ "color": {
105
+ "value": "{neutral.500}",
106
+ "type": "color"
107
+ },
108
+ "color-disabled": {
109
+ "value": "{neutral.500}",
110
+ "type": "color"
111
+ }
112
+ },
113
+ "required-content": {
114
+ "value": "*",
115
+ "type": "text",
116
+ "color": {
117
+ "value": "{input.label.color}",
118
+ "type": "color"
119
+ }
120
+ },
121
+ "required-content-offset": {
122
+ "value": "-2px",
123
+ "type": "spacing"
124
+ },
125
+ "label": {
126
+ "color": {
127
+ "value": "{neutral.950}",
128
+ "type": "color"
129
+ },
130
+ "font-size": {
131
+ "small": {
132
+ "value": "{font-size.small}",
133
+ "type": "fontSizes"
134
+ },
135
+ "medium": {
136
+ "value": "{font-size.medium}",
137
+ "type": "fontSizes"
138
+ },
139
+ "large": {
140
+ "value": "{font-size.large}",
141
+ "type": "fontSizes"
142
+ }
143
+ }
144
+ },
145
+ "spacing": {
146
+ "small": {
147
+ "value": "{spacing.small}",
148
+ "type": "spacing"
149
+ },
150
+ "medium": {
151
+ "value": "{spacing.medium}",
152
+ "type": "spacing"
153
+ },
154
+ "large": {
155
+ "value": "{spacing.large}",
156
+ "type": "spacing"
157
+ }
158
+ },
159
+ "focus-ring": {
160
+ "color": {
161
+ "value": "{primary.400}",
162
+ "type": "color"
163
+ },
164
+ "offset": {
165
+ "value": "0",
166
+ "type": "spacing"
167
+ },
168
+ "error": {
169
+ "value": "{error.400}",
170
+ "type": "color"
171
+ }
172
+ },
173
+ "disabled-opacity": {
174
+ "value": "50%",
175
+ "type": "opacity"
176
+ },
177
+ "readonly-background": {
178
+ "color": {
179
+ "value": "{neutral.50}",
180
+ "type": "color"
181
+ },
182
+ "color-hover": {
183
+ "value": "{neutral.50}",
184
+ "type": "color"
185
+ },
186
+ "color-focus": {
187
+ "value": "{neutral.50}",
188
+ "type": "color"
189
+ },
190
+ "color-disabled": {
191
+ "value": "{neutral.50}",
192
+ "type": "color"
193
+ }
194
+ },
195
+ "help-text": {
196
+ "color": {
197
+ "value": "{neutral.800}",
198
+ "type": "color"
199
+ },
200
+ "color-error": {
201
+ "value": "{error.700}",
202
+ "type": "color"
203
+ },
204
+ "font-size": {
205
+ "small": {
206
+ "value": "{font-size.x-small}",
207
+ "type": "fontSizes"
208
+ },
209
+ "medium": {
210
+ "value": "{font-size.small}",
211
+ "type": "fontSizes"
212
+ },
213
+ "large": {
214
+ "value": "{font-size.medium}",
215
+ "type": "fontSizes"
216
+ }
217
+ }
218
+ },
219
+ "height": {
220
+ "small": {
221
+ "value": "{spacing.x-large}",
222
+ "type": "spacing"
223
+ },
224
+ "medium": {
225
+ "value": "{spacing.2x-large}",
226
+ "type": "spacing"
227
+ },
228
+ "large": {
229
+ "value": "{spacing.3x-large}",
230
+ "type": "spacing"
231
+ }
232
+ },
233
+ "readonly": {
234
+ "color": {
235
+ "value": "{neutral.800}",
236
+ "type": "color"
237
+ },
238
+ "color-disabled": {
239
+ "value": "{neutral.800}",
240
+ "type": "color"
241
+ },
242
+ "color-hover": {
243
+ "value": "{neutral.950}",
244
+ "type": "color"
245
+ },
246
+ "color-focus": {
247
+ "value": "{neutral.950}",
248
+ "type": "color"
249
+ }
250
+ },
251
+ "font-size": {
252
+ "small": {
253
+ "value": "{font-size.small}",
254
+ "type": "fontSizes"
255
+ },
256
+ "medium": {
257
+ "value": "{font-size.medium}",
258
+ "type": "fontSizes"
259
+ },
260
+ "large": {
261
+ "value": "{font-size.large}",
262
+ "type": "fontSizes"
263
+ }
264
+ }
265
+ }
266
+ }
@@ -0,0 +1,16 @@
1
+ {
2
+ "size": {
3
+ "small": {
4
+ "value": "14px",
5
+ "type": "spacing"
6
+ },
7
+ "medium": {
8
+ "value": "{spacing.medium}",
9
+ "type": "spacing"
10
+ },
11
+ "large": {
12
+ "value": "{spacing.large}",
13
+ "type": "spacing"
14
+ }
15
+ }
16
+ }
@@ -1,158 +0,0 @@
1
-
2
- // @synergy-design-system/tokens version 1.0.0
3
- // SICK Global UX Foundation
4
- // Do not edit directly
5
- // Generated on Thu, 19 Oct 2023 07:27:13 GMT
6
-
7
- $syn-input-focus-ring-offset: 0 !default;
8
- $syn-input-required-content-offset: -2px !default;
9
- $syn-input-required-content: * !default;
10
- $syn-font-sans-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif !default;
11
- $syn-border-width-x-large: 4px !default;
12
- $syn-border-width-large: 3px !default;
13
- $syn-border-width-medium: 2px !default;
14
- $syn-border-width-small: 1px !default;
15
- $syn-border-width-none: 0px !default;
16
- $syn-dimension-base: 4px !default;
17
- $syn-border-radius-circle: 9999px !default;
18
- $syn-border-radius-pill: 9999px !default;
19
- $syn-border-radius-none: 0px !default;
20
- $syn-font-mono: Roboto Mono !default;
21
- $syn-font-sans: Open Sans !default;
22
- $syn-font-weight-bold: 700 !default;
23
- $syn-font-weight-semibold: 600 !default;
24
- $syn-font-weight-normal: 400 !default;
25
- $syn-line-height-looser: 220% !default;
26
- $syn-line-height-loose: 180% !default;
27
- $syn-line-height-normal: 140% !default;
28
- $syn-line-height-dense: 120% !default;
29
- $syn-line-height-denser: 100% !default;
30
- $syn-duration-extra-slow: 500ms !default;
31
- $syn-duration-slow: 350ms !default;
32
- $syn-duration-normal: 250ms !default;
33
- $syn-duration-fast: 150ms !default;
34
- $syn-duration-extra-fast: 90ms !default;
35
- $syn-font-size-3x-large: 40px !default;
36
- $syn-font-size-2x-large: 32px !default;
37
- $syn-font-size-x-large: 24px !default;
38
- $syn-font-size-large: 20px !default;
39
- $syn-font-size-medium: 16px !default;
40
- $syn-font-size-small: 14px !default;
41
- $syn-font-size-x-small: 12px !default;
42
- $syn-font-size-2x-small: 10px !default;
43
- $--syn-color-input-focus-ring-color: $syn-color-blue-700 !default;
44
- $--syn-input-width: $syn-border-width-small !default;
45
- $--syn-input-border-radius-large: $syn-border-radius-none !default;
46
- $--syn-input-border-radius-medium: $syn-border-radius-none !default;
47
- $--syn-input-border-radius-small: $syn-border-radius-none !default;
48
- $--syn-focus-ring-width: $syn-border-width-small !default;
49
- $--syn-spacing-5x-large: $syn-dimension-base*32 !default;
50
- $--syn-spacing-4x-large: $syn-dimension-base*24 !default;
51
- $--syn-spacing-3x-large: $syn-dimension-base*16 !default;
52
- $--syn-spacing-2x-large: $syn-dimension-base*12 !default;
53
- $--syn-spacing-x-large: $syn-dimension-base*8 !default;
54
- $--syn-spacing-large: $syn-dimension-base*6 !default;
55
- $--syn-spacing-medium: $syn-dimension-base*4 !default;
56
- $--syn-spacing-small: $syn-dimension-base*3 !default;
57
- $--syn-spacing-x-small: $syn-dimension-base*2 !default;
58
- $--syn-spacing-2x-small: $syn-dimension-base*1 !default;
59
- $--syn-spacing-3x-small: $syn-dimension-base/2 !default;
60
- $--syn-spacing-4x-small: $syn-dimension-base/4 !default;
61
- $--syn-color-neutral-1000: $syn-color-black !default;
62
- $--syn-color-neutral-950: $syn-color-gray-950 !default;
63
- $--syn-color-neutral-900: $syn-color-gray-900 !default;
64
- $--syn-color-neutral-800: $syn-color-gray-800 !default;
65
- $--syn-color-neutral-700: $syn-color-gray-700 !default;
66
- $--syn-color-neutral-600: $syn-color-gray-600 !default;
67
- $--syn-color-neutral-500: $syn-color-gray-500 !default;
68
- $--syn-color-neutral-400: $syn-color-gray-400 !default;
69
- $--syn-color-neutral-300: $syn-color-gray-300 !default;
70
- $--syn-color-neutral-200: $syn-color-gray-200 !default;
71
- $--syn-color-neutral-100: $syn-color-gray-100 !default;
72
- $--syn-color-neutral-50: $syn-color-gray-50 !default;
73
- $--syn-color-neutral-0: $syn-color-white !default;
74
- $--syn-color-accent-950: $syn-color-orange-950 !default;
75
- $--syn-color-accent-900: $syn-color-orange-900 !default;
76
- $--syn-color-accent-800: $syn-color-orange-800 !default;
77
- $--syn-color-accent-700: $syn-color-orange-700 !default;
78
- $--syn-color-accent-600: $syn-color-orange-600 !default;
79
- $--syn-color-accent-500: $syn-color-orange-500 !default;
80
- $--syn-color-accent-400: $syn-color-orange-400 !default;
81
- $--syn-color-accent-300: $syn-color-orange-300 !default;
82
- $--syn-color-accent-200: $syn-color-orange-200 !default;
83
- $--syn-color-accent-100: $syn-color-orange-100 !default;
84
- $--syn-color-accent-50: $syn-color-orange-50 !default;
85
- $--syn-color-error-950: $syn-color-red-950 !default;
86
- $--syn-color-error-900: $syn-color-red-900 !default;
87
- $--syn-color-error-800: $syn-color-red-800 !default;
88
- $--syn-color-error-700: $syn-color-red-700 !default;
89
- $--syn-color-error-600: $syn-color-red-600 !default;
90
- $--syn-color-error-500: $syn-color-red-500 !default;
91
- $--syn-color-error-400: $syn-color-red-400 !default;
92
- $--syn-color-error-300: $syn-color-red-300 !default;
93
- $--syn-color-error-200: $syn-color-red-200 !default;
94
- $--syn-color-error-100: $syn-color-red-100 !default;
95
- $--syn-color-error-50: $syn-color-red-50 !default;
96
- $--syn-color-warning-950: $syn-color-yellow-950 !default;
97
- $--syn-color-warning-900: $syn-color-yellow-900 !default;
98
- $--syn-color-warning-800: $syn-color-yellow-800 !default;
99
- $--syn-color-warning-700: $syn-color-yellow-700 !default;
100
- $--syn-color-warning-600: $syn-color-yellow-600 !default;
101
- $--syn-color-warning-500: $syn-color-yellow-500 !default;
102
- $--syn-color-warning-400: $syn-color-yellow-400 !default;
103
- $--syn-color-warning-300: $syn-color-yellow-300 !default;
104
- $--syn-color-warning-200: $syn-color-yellow-200 !default;
105
- $--syn-color-warning-100: $syn-color-yellow-100 !default;
106
- $--syn-color-warning-50: $syn-color-yellow-50 !default;
107
- $--syn-color-success-950: $syn-color-green-950 !default;
108
- $--syn-color-success-900: $syn-color-green-900 !default;
109
- $--syn-color-success-800: $syn-color-green-800 !default;
110
- $--syn-color-success-700: $syn-color-green-700 !default;
111
- $--syn-color-success-600: $syn-color-green-600 !default;
112
- $--syn-color-success-500: $syn-color-green-500 !default;
113
- $--syn-color-success-400: $syn-color-green-400 !default;
114
- $--syn-color-success-300: $syn-color-green-300 !default;
115
- $--syn-color-success-200: $syn-color-green-200 !default;
116
- $--syn-color-success-100: $syn-color-green-100 !default;
117
- $--syn-color-success-50: $syn-color-green-50 !default;
118
- $--syn-color-primary-950: $syn-color-blue-950 !default;
119
- $--syn-color-primary-900: $syn-color-blue-900 !default;
120
- $--syn-color-primary-800: $syn-color-blue-800 !default;
121
- $--syn-color-primary-700: $syn-color-blue-700 !default;
122
- $--syn-color-primary-600: $syn-color-blue-600 !default;
123
- $--syn-color-primary-500: $syn-color-blue-500 !default;
124
- $--syn-color-primary-400: $syn-color-blue-400 !default;
125
- $--syn-color-primary-300: $syn-color-blue-300 !default;
126
- $--syn-color-primary-200: $syn-color-blue-200 !default;
127
- $--syn-color-primary-100: $syn-color-blue-100 !default;
128
- $--syn-color-primary-50: $syn-color-blue-50 !default;
129
- $--syn-input-spacing-large: $--syn-spacing-large !default;
130
- $--syn-input-spacing-medium: $--syn-spacing-medium !default;
131
- $--syn-input-spacing-small: $--syn-spacing-small !default;
132
- $--syn-color-input-label-color: $--syn-color-neutral-950 !default;
133
- $--syn-color-input-placeholder-color-disabled: $--syn-color-neutral-600 !default;
134
- $--syn-color-input-placeholder-color: $--syn-color-neutral-500 !default;
135
- $--syn-color-input-icon-color-focus: $--syn-color-neutral-600 !default;
136
- $--syn-color-input-icon-color-hover: $--syn-color-neutral-600 !default;
137
- $--syn-color-input-icon-color: $--syn-color-neutral-500 !default;
138
- $--syn-color-input-border-color-disables: $--syn-color-neutral-300 !default;
139
- $--syn-color-input-border-color-focus: $--syn-color-primary-500 !default;
140
- $--syn-color-input-border-color-hover: $--syn-color-neutral-400 !default;
141
- $--syn-color-input-border-color: $--syn-color-neutral-300 !default;
142
- $--syn-color-input-background-color-disabled: $--syn-color-neutral-100 !default;
143
- $--syn-color-input-background-color: $--syn-color-neutral-0 !default;
144
- $--syn-color-input-color-disabled: $--syn-color-neutral-900 !default;
145
- $--syn-color-input-color-focus: $--syn-color-neutral-700 !default;
146
- $--syn-color-input-color-hover: $--syn-color-neutral-700 !default;
147
- $--syn-color-input-color: $--syn-color-neutral-700 !default;
148
- $--syn-focus-ring-offset: $--syn-spacing-4x-small !default;
149
- $--syn-color-focus-ring-color: $--syn-color-primary-600 !default;
150
- $syn-shadow-overflow-right: [object Object],[object Object],[object Object] !default;
151
- $syn-shadow-overflow-left: [object Object],[object Object],[object Object] !default;
152
- $syn-shadow-overflow-up: [object Object],[object Object],[object Object] !default;
153
- $syn-shadow-overflow-down: [object Object],[object Object],[object Object] !default;
154
- $syn-shadow-large: [object Object],[object Object],[object Object] !default;
155
- $syn-shadow-medium: [object Object],[object Object],[object Object] !default;
156
- $syn-shadow-small: [object Object],[object Object],[object Object] !default;
157
- $--syn-color-input-background-color-focus: $--syn-color-input-background-color !default;
158
- $--syn-color-input-background-color-hover: $--syn-color-input-background-color !default;