@transfermarkt/global-styles 1.56.0 → 1.57.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/package.json
CHANGED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
@use 'sass:map';
|
|
2
|
+
@use 'sass:meta';
|
|
3
|
+
@use '../variables/figma-variables';
|
|
4
|
+
@use 'rem-calc' as *;
|
|
5
|
+
|
|
6
|
+
@function figma-value($key) {
|
|
7
|
+
$vars: figma-variables.$figma-variables;
|
|
8
|
+
$value: map.get($vars, #{$key});
|
|
9
|
+
|
|
10
|
+
@if not $value {
|
|
11
|
+
@error 'Figma variable #{$key} does not exist in figma-variables map.';
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
@while meta.type-of($value) == 'string' and map.get($vars, $value) {
|
|
15
|
+
$value: map.get($vars, $value);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
@return $value;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@function figma-rem($key) {
|
|
22
|
+
@return rem-calc(figma-value($key));
|
|
23
|
+
}
|
|
@@ -0,0 +1,492 @@
|
|
|
1
|
+
$figma-variables: (
|
|
2
|
+
// BRAND
|
|
3
|
+
// color
|
|
4
|
+
// darkblue
|
|
5
|
+
'color-darkblue-default': #00193f,
|
|
6
|
+
'color-darkblue-700': #4c5e78,
|
|
7
|
+
'color-darkblue-500': #808c9f,
|
|
8
|
+
'color-darkblue-400': #99a3b2,
|
|
9
|
+
'color-darkblue-200': #ccd1d9,
|
|
10
|
+
'color-darkblue-150': #d9dde3,
|
|
11
|
+
'color-darkblue-100': #e5e8ec,
|
|
12
|
+
'color-darkblue-50': #f2f3f5,
|
|
13
|
+
'color-darkblue-600': #66758c,
|
|
14
|
+
'color-darkblue-30': #f7f8f9,
|
|
15
|
+
|
|
16
|
+
// skyblue_old
|
|
17
|
+
'color-skyblue_old-default': #5ca6ff,
|
|
18
|
+
'color-skyblue_old-dark': #3582fc,
|
|
19
|
+
'color-skyblue_old-700': #8dc1ff,
|
|
20
|
+
'color-skyblue_old-500': #add3ff,
|
|
21
|
+
'color-skyblue_old-400': #bedbff,
|
|
22
|
+
'color-skyblue_old-200': #deedff,
|
|
23
|
+
'color-skyblue_old-150': #e7f2ff,
|
|
24
|
+
'color-skyblue_old-100': #eef6ff,
|
|
25
|
+
'color-skyblue_old-50': #f7fbff,
|
|
26
|
+
|
|
27
|
+
// mv-up
|
|
28
|
+
'color-mv-up-default': #75fba2,
|
|
29
|
+
'color-mv-up-700': #9efcbe,
|
|
30
|
+
'color-mv-up-400': #c8fdda,
|
|
31
|
+
'color-mv-up-100': #f1fff6,
|
|
32
|
+
|
|
33
|
+
// mv-down
|
|
34
|
+
'color-mv-down-default': #eb4577,
|
|
35
|
+
'color-mv-down-700': #f07ca0,
|
|
36
|
+
'color-mv-down-400': #f7b4c9,
|
|
37
|
+
'color-mv-down-100': #fdecf1,
|
|
38
|
+
|
|
39
|
+
// done-deal
|
|
40
|
+
'color-done-deal-default': #0cd97a,
|
|
41
|
+
'color-done-deal-700': #54e4a1,
|
|
42
|
+
'color-done-deal-400': #9df0ca,
|
|
43
|
+
'color-done-deal-100': #e6fbf1,
|
|
44
|
+
|
|
45
|
+
// rumour
|
|
46
|
+
'color-rumour-default': #ff9c7e,
|
|
47
|
+
'color-rumour-700': #ffb9a4,
|
|
48
|
+
'color-rumour-400': #ffd7cb,
|
|
49
|
+
'color-rumour-100': #fff5f2,
|
|
50
|
+
|
|
51
|
+
// failed-deal
|
|
52
|
+
'color-failed-deal-default': #ec376e,
|
|
53
|
+
|
|
54
|
+
// pots-gold
|
|
55
|
+
'color-pots-gold-default': #b29051,
|
|
56
|
+
|
|
57
|
+
// neutral
|
|
58
|
+
'color-neutral-black': #000,
|
|
59
|
+
'color-neutral-950': #0d0d0d,
|
|
60
|
+
'color-neutral-900': #1a1a1a,
|
|
61
|
+
'color-neutral-800': #333,
|
|
62
|
+
'color-neutral-700': #4d4d4d,
|
|
63
|
+
'color-neutral-600': #666,
|
|
64
|
+
'color-neutral-500': #888,
|
|
65
|
+
'color-neutral-400': #999,
|
|
66
|
+
'color-neutral-300': #b3b3b3,
|
|
67
|
+
'color-neutral-200': #ccc,
|
|
68
|
+
'color-neutral-100': #e6e6e6,
|
|
69
|
+
'color-neutral-50': #f2f2f2,
|
|
70
|
+
'color-neutral-25': #f8f8f8,
|
|
71
|
+
'color-neutral-white': #fff,
|
|
72
|
+
'color-neutral-white-10': #fff,
|
|
73
|
+
'color-neutral-white-5': #fff,
|
|
74
|
+
'color-neutral-white-20': #fff,
|
|
75
|
+
'color-neutral-white-30': #fff,
|
|
76
|
+
'color-neutral-white-50': #fff,
|
|
77
|
+
'color-neutral-white-40': #fff,
|
|
78
|
+
|
|
79
|
+
// green
|
|
80
|
+
'color-green-default': #90fea5,
|
|
81
|
+
'color-green-lighter': #dffcf1,
|
|
82
|
+
'color-green-darker': #1d6e4f,
|
|
83
|
+
|
|
84
|
+
// orange
|
|
85
|
+
'color-orange-default': #ffb703,
|
|
86
|
+
'color-orange-lighter': #ffd9b4,
|
|
87
|
+
'color-orange-darker': #805f10,
|
|
88
|
+
|
|
89
|
+
// red
|
|
90
|
+
'color-red-default': #ef1717,
|
|
91
|
+
'color-red-lighter': #fff1f1,
|
|
92
|
+
'color-red-darker': #c90c0c,
|
|
93
|
+
|
|
94
|
+
// lightblue
|
|
95
|
+
'color-lightblue-default': #0087ff,
|
|
96
|
+
'color-lightblue-dark': #1f62f1,
|
|
97
|
+
'color-lightblue-700': #8dc1ff,
|
|
98
|
+
'color-lightblue-500': #add3ff,
|
|
99
|
+
'color-lightblue-400': #bedbff,
|
|
100
|
+
'color-lightblue-200': #deedff,
|
|
101
|
+
'color-lightblue-150': #e7f2ff,
|
|
102
|
+
'color-lightblue-100': #eef6ff,
|
|
103
|
+
'color-lightblue-50': #f7fbff,
|
|
104
|
+
|
|
105
|
+
// type
|
|
106
|
+
// font-weight
|
|
107
|
+
'type-font-weight-regular': 'regular',
|
|
108
|
+
'type-font-weight-medium': 'medium',
|
|
109
|
+
'type-font-weight-bold': 'bold',
|
|
110
|
+
'type-font-weight-semibold': 'semibold',
|
|
111
|
+
|
|
112
|
+
// font-family
|
|
113
|
+
'type-font-family-primary': 'univia pro',
|
|
114
|
+
'type-font-family-secondary': 'source sans 3',
|
|
115
|
+
|
|
116
|
+
// scale
|
|
117
|
+
'scale-0': 0,
|
|
118
|
+
'scale-25-(1)': 1,
|
|
119
|
+
'scale-50-(2)': 2,
|
|
120
|
+
'scale-100-(4)': 4,
|
|
121
|
+
'scale-200-(8)': 8,
|
|
122
|
+
'scale-250-(10)': 10,
|
|
123
|
+
'scale-300-(12)': 12,
|
|
124
|
+
'scale-400-(16)': 16,
|
|
125
|
+
'scale-600-(24)': 24,
|
|
126
|
+
'scale-800-(32)': 32,
|
|
127
|
+
'scale-1200-(48)': 48,
|
|
128
|
+
'scale-1600-(64)': 64,
|
|
129
|
+
'scale-500-(20)': 20,
|
|
130
|
+
|
|
131
|
+
// ALIAS
|
|
132
|
+
// primary
|
|
133
|
+
'primary-default': 'color-darkblue-default',
|
|
134
|
+
'primary-700': 'color-darkblue-700',
|
|
135
|
+
'primary-500': 'color-darkblue-500',
|
|
136
|
+
'primary-400': 'color-darkblue-400',
|
|
137
|
+
'primary-200': 'color-darkblue-200',
|
|
138
|
+
'primary-150': 'color-darkblue-150',
|
|
139
|
+
'primary-100': 'color-darkblue-100',
|
|
140
|
+
'primary-50': 'color-darkblue-50',
|
|
141
|
+
'primary-600': 'color-darkblue-600',
|
|
142
|
+
'primary-30': 'color-darkblue-30',
|
|
143
|
+
|
|
144
|
+
// secondary (old)
|
|
145
|
+
'secondary-(old)-default': 'color-skyblue_old-default',
|
|
146
|
+
'secondary-(old)-dark': 'color-skyblue_old-dark',
|
|
147
|
+
'secondary-(old)-700': 'color-skyblue_old-700',
|
|
148
|
+
'secondary-(old)-500': 'color-skyblue_old-500',
|
|
149
|
+
'secondary-(old)-400': 'color-skyblue_old-400',
|
|
150
|
+
'secondary-(old)-200': 'color-skyblue_old-200',
|
|
151
|
+
'secondary-(old)-150': 'color-skyblue_old-150',
|
|
152
|
+
'secondary-(old)-100': 'color-skyblue_old-100',
|
|
153
|
+
'secondary-(old)-50': 'color-skyblue_old-50',
|
|
154
|
+
|
|
155
|
+
// neutral
|
|
156
|
+
'neutral-black': 'color-neutral-black',
|
|
157
|
+
'neutral-950': 'color-neutral-950',
|
|
158
|
+
'neutral-900': 'color-neutral-900',
|
|
159
|
+
'neutral-800': 'color-neutral-800',
|
|
160
|
+
'neutral-700': 'color-neutral-700',
|
|
161
|
+
'neutral-600': 'color-neutral-600',
|
|
162
|
+
'neutral-500': 'color-neutral-500',
|
|
163
|
+
'neutral-400': 'color-neutral-400',
|
|
164
|
+
'neutral-300': 'color-neutral-300',
|
|
165
|
+
'neutral-200': 'color-neutral-200',
|
|
166
|
+
'neutral-100': 'color-neutral-100',
|
|
167
|
+
'neutral-50': 'color-neutral-50',
|
|
168
|
+
'neutral-25': 'color-neutral-25',
|
|
169
|
+
'neutral-white': 'color-neutral-white',
|
|
170
|
+
'neutral-white-10': 'color-neutral-white-10',
|
|
171
|
+
'neutral-white-5': 'color-neutral-white-5',
|
|
172
|
+
'neutral-white-20': 'color-neutral-white-20',
|
|
173
|
+
'neutral-white-30': 'color-neutral-white-30',
|
|
174
|
+
'neutral-white-40': 'color-neutral-white-40',
|
|
175
|
+
'neutral-white-50': 'color-neutral-white-50',
|
|
176
|
+
|
|
177
|
+
// information
|
|
178
|
+
'information-default': 'color-skyblue_old-default',
|
|
179
|
+
'information-dark': 'color-skyblue_old-dark',
|
|
180
|
+
'information-light': 'color-skyblue_old-700',
|
|
181
|
+
'information-lightest': 'color-skyblue_old-100',
|
|
182
|
+
|
|
183
|
+
// success
|
|
184
|
+
'success-default': 'color-green-default',
|
|
185
|
+
'success-dark': 'color-green-darker',
|
|
186
|
+
'success-light': 'color-green-lighter',
|
|
187
|
+
|
|
188
|
+
// warning
|
|
189
|
+
'warning-default': 'color-orange-default',
|
|
190
|
+
'warning-dark': 'color-orange-darker',
|
|
191
|
+
'warning-light': 'color-orange-lighter',
|
|
192
|
+
|
|
193
|
+
// error
|
|
194
|
+
'error-default': 'color-red-default',
|
|
195
|
+
'error-dark': 'color-red-darker',
|
|
196
|
+
'error-light': 'color-red-lighter',
|
|
197
|
+
|
|
198
|
+
// highlight
|
|
199
|
+
'highlight-default': 'color-skyblue_old-default',
|
|
200
|
+
|
|
201
|
+
// border-width
|
|
202
|
+
'border-width-none': 'scale-0',
|
|
203
|
+
'border-width-min': 'scale-25-(1)',
|
|
204
|
+
'border-width-3xs': 'scale-50-(2)',
|
|
205
|
+
'border-width-2xs': 'scale-100-(4)',
|
|
206
|
+
|
|
207
|
+
// border-radius
|
|
208
|
+
'border-radius-none': 'scale-0',
|
|
209
|
+
'border-radius-xs': 'scale-200-(8)',
|
|
210
|
+
'border-radius-sm': 'scale-300-(12)',
|
|
211
|
+
'border-radius-md': 'scale-400-(16)',
|
|
212
|
+
'border-radius-3xs': 'scale-50-(2)',
|
|
213
|
+
'border-radius-2xs': 'scale-100-(4)',
|
|
214
|
+
'border-radius-lg': 'scale-500-(20)',
|
|
215
|
+
'border-radius-xl': 'scale-600-(24)',
|
|
216
|
+
|
|
217
|
+
// secondary
|
|
218
|
+
'secondary-default': 'color-lightblue-default',
|
|
219
|
+
'secondary-dark': 'color-lightblue-dark',
|
|
220
|
+
'secondary-700': 'color-lightblue-700',
|
|
221
|
+
'secondary-500': 'color-lightblue-500',
|
|
222
|
+
'secondary-400': 'color-lightblue-400',
|
|
223
|
+
'secondary-200': 'color-lightblue-200',
|
|
224
|
+
'secondary-150': 'color-lightblue-150',
|
|
225
|
+
'secondary-100': 'color-lightblue-100',
|
|
226
|
+
'secondary-50': 'color-lightblue-50',
|
|
227
|
+
|
|
228
|
+
// MAPPED
|
|
229
|
+
// text
|
|
230
|
+
'text-heading': 'primary-default',
|
|
231
|
+
'text-body': 'primary-600',
|
|
232
|
+
'text-action': 'secondary-default',
|
|
233
|
+
'text-action-hover': 'secondary-dark',
|
|
234
|
+
'text-disabled': 'secondary-400',
|
|
235
|
+
'text-information': 'primary-600',
|
|
236
|
+
'text-success': 'success-dark',
|
|
237
|
+
'text-warning': 'warning-dark',
|
|
238
|
+
'text-error': 'error-dark',
|
|
239
|
+
'text-on-action': 'neutral-white',
|
|
240
|
+
'text-on-disabled': 'neutral-white',
|
|
241
|
+
// form-field
|
|
242
|
+
'text-form-field-label': 'primary-600',
|
|
243
|
+
'text-form-field-default': 'primary-200',
|
|
244
|
+
'text-form-field-filled': 'primary-600',
|
|
245
|
+
'text-form-field-error': 'error-dark',
|
|
246
|
+
'text-form-field-disabled': 'primary-150',
|
|
247
|
+
'text-form-field-assistive-text': 'primary-500',
|
|
248
|
+
'text-form-field-assistive-text-success': 'success-dark',
|
|
249
|
+
'text-form-field-assistive-text-unmet': 'primary-500',
|
|
250
|
+
'text-form-field-link': 'secondary-default',
|
|
251
|
+
'text-form-field-link-hover': 'secondary-dark',
|
|
252
|
+
|
|
253
|
+
// tab
|
|
254
|
+
'text-tab-selected': 'secondary-default',
|
|
255
|
+
'text-tab-unselected': 'primary-400',
|
|
256
|
+
|
|
257
|
+
// banner
|
|
258
|
+
'text-banner-information': 'primary-700',
|
|
259
|
+
'text-banner-success': 'success-dark',
|
|
260
|
+
'text-banner-error': 'error-dark',
|
|
261
|
+
'text-banner-neutral': 'primary-default',
|
|
262
|
+
|
|
263
|
+
// radio-button
|
|
264
|
+
'text-radio-button-default': 'primary-600',
|
|
265
|
+
'text-radio-button-disabled': 'primary-150',
|
|
266
|
+
|
|
267
|
+
// checkbox
|
|
268
|
+
'text-checkbox-default': 'primary-600',
|
|
269
|
+
'text-checkbox-disabled': 'primary-150',
|
|
270
|
+
|
|
271
|
+
// button
|
|
272
|
+
'text-button-default': 'neutral-white',
|
|
273
|
+
'text-button-hover': 'neutral-white',
|
|
274
|
+
'text-button-disabled': 'neutral-white',
|
|
275
|
+
'text-button-secondary-default': 'secondary-default',
|
|
276
|
+
'text-button-secondary-hover': 'secondary-dark',
|
|
277
|
+
'text-button-secondary-disabled': 'secondary-400',
|
|
278
|
+
'text-button-tertiary-default': 'secondary-default',
|
|
279
|
+
'text-button-tertiary-hover': 'secondary-default',
|
|
280
|
+
'text-button-tertiary-disabled': 'secondary-400',
|
|
281
|
+
'text-button-secondary-grey-default': 'primary-default',
|
|
282
|
+
'text-button-secondary-grey-hover': 'primary-default',
|
|
283
|
+
'text-button-secondary-grey-disabled': 'primary-150',
|
|
284
|
+
'text-button-tertiary-grey-default': 'primary-default',
|
|
285
|
+
'text-button-tertiary-grey-hover': 'primary-default',
|
|
286
|
+
'text-button-tertiary-grey-disabled': 'primary-150',
|
|
287
|
+
'text-button-warning': 'neutral-white',
|
|
288
|
+
'text-button-warning-hover': 'neutral-white',
|
|
289
|
+
'text-button-warning-disabled': 'neutral-white',
|
|
290
|
+
'text-button-tertiary-warning': 'error-default',
|
|
291
|
+
'text-button-tertiary-warning-hover': 'error-dark',
|
|
292
|
+
|
|
293
|
+
// heading
|
|
294
|
+
'text-heading-default': 'primary-default',
|
|
295
|
+
|
|
296
|
+
// body
|
|
297
|
+
'text-body-default': 'primary-600',
|
|
298
|
+
'text-body-disabled': 'color-darkblue-150',
|
|
299
|
+
|
|
300
|
+
// dropdown
|
|
301
|
+
'text-dropdown-default': 'primary-600',
|
|
302
|
+
|
|
303
|
+
// link
|
|
304
|
+
'text-link-default': 'secondary-default',
|
|
305
|
+
'text-link-hover': 'secondary-dark',
|
|
306
|
+
|
|
307
|
+
// divider
|
|
308
|
+
'text-divider-default': 'primary-400',
|
|
309
|
+
|
|
310
|
+
// icon
|
|
311
|
+
'icon-secondary': 'primary-400',
|
|
312
|
+
'icon-information': 'primary-700',
|
|
313
|
+
'icon-success': 'success-dark',
|
|
314
|
+
'icon-warning': 'warning-dark',
|
|
315
|
+
'icon-error': 'error-dark',
|
|
316
|
+
'icon-disabled': 'primary-150',
|
|
317
|
+
'icon-assistive-text-unmet': 'primary-400',
|
|
318
|
+
'icon-primary': 'primary-default',
|
|
319
|
+
'icon-on-action': 'neutral-white',
|
|
320
|
+
'icon-on-action-hover': 'neutral-white',
|
|
321
|
+
'icon-on-action-disabled': 'neutral-white',
|
|
322
|
+
'icon-on-action-secondary': 'secondary-default',
|
|
323
|
+
'icon-on-action-secondary-hover': 'secondary-dark',
|
|
324
|
+
'icon-on-action-secondary-disabled': 'secondary-400',
|
|
325
|
+
'icon-on-action-tertiary': 'secondary-default',
|
|
326
|
+
'icon-on-action-tertiary-hover': 'secondary-default',
|
|
327
|
+
'icon-on-action-tertiary-disabled': 'secondary-400',
|
|
328
|
+
'icon-on-action-secondary-grey': 'primary-default',
|
|
329
|
+
'icon-on-action-secondary-grey-hover': 'primary-default',
|
|
330
|
+
'icon-on-action-secondary-grey-disabled': 'primary-150',
|
|
331
|
+
'icon-on-action-tertiary-grey': 'primary-default',
|
|
332
|
+
'icon-on-action-tertiary-grey-hover': 'primary-default',
|
|
333
|
+
'icon-on-action-tertiary-grey-disabled': 'primary-150',
|
|
334
|
+
'icon-on-action-warning': 'neutral-white',
|
|
335
|
+
'icon-on-action-warning-hover': 'neutral-white',
|
|
336
|
+
'icon-on-action-warning-disabled': 'neutral-white',
|
|
337
|
+
|
|
338
|
+
// table
|
|
339
|
+
'table-highest': 'secondary-default',
|
|
340
|
+
|
|
341
|
+
// border
|
|
342
|
+
'border-container': 'primary-50',
|
|
343
|
+
'border-container-alt': #ddd,
|
|
344
|
+
// form-field
|
|
345
|
+
'border-form-field-default': 'primary-150',
|
|
346
|
+
'border-form-field-hover': 'primary-400',
|
|
347
|
+
'border-form-field-focus': 'secondary-default',
|
|
348
|
+
'border-form-field-error': 'error-dark',
|
|
349
|
+
'border-form-field-filled': 'primary-150',
|
|
350
|
+
'border-form-field-disabled': 'primary-150',
|
|
351
|
+
|
|
352
|
+
// button
|
|
353
|
+
'border-button-default': 'secondary-default',
|
|
354
|
+
'border-button-hover': 'secondary-dark',
|
|
355
|
+
'border-button-disabled': 'secondary-400',
|
|
356
|
+
'border-button-grey-default': 'primary-150',
|
|
357
|
+
'border-button-grey-hover': 'primary-400',
|
|
358
|
+
'border-button-secondary-grey-disabled': 'primary-150',
|
|
359
|
+
|
|
360
|
+
// radio-button
|
|
361
|
+
'border-radio-button-selected': 'secondary-default',
|
|
362
|
+
'border-radio-button-unselected': 'primary-150',
|
|
363
|
+
'border-radio-button-hover': 'primary-400',
|
|
364
|
+
'border-radio-button-disabled': 'primary-150',
|
|
365
|
+
|
|
366
|
+
// checkbox
|
|
367
|
+
'border-checkbox-selected': 'secondary-default',
|
|
368
|
+
'border-checkbox-unselected': 'primary-150',
|
|
369
|
+
'border-checkbox-hover': 'primary-400',
|
|
370
|
+
'border-checkbox-disabled': 'primary-150',
|
|
371
|
+
|
|
372
|
+
// flags
|
|
373
|
+
'border-flags-default': 'primary-600',
|
|
374
|
+
|
|
375
|
+
// banner
|
|
376
|
+
'border-banner-neutral': 'primary-150',
|
|
377
|
+
|
|
378
|
+
// dropdown
|
|
379
|
+
'border-dropdown-default': 'primary-150',
|
|
380
|
+
'border-dropdown-option-hover': 'secondary-400',
|
|
381
|
+
|
|
382
|
+
// divider
|
|
383
|
+
'border-divider-default': 'primary-150',
|
|
384
|
+
|
|
385
|
+
// radius
|
|
386
|
+
// width
|
|
387
|
+
// surface
|
|
388
|
+
// page
|
|
389
|
+
'surface-page-default': 'primary-50',
|
|
390
|
+
'surface-page-lighter': 'primary-30',
|
|
391
|
+
|
|
392
|
+
// button
|
|
393
|
+
'surface-button-default': 'secondary-default',
|
|
394
|
+
'surface-button-hover': 'secondary-dark',
|
|
395
|
+
'surface-button-primary-disabled': 'secondary-400',
|
|
396
|
+
'surface-button-warning': 'error-default',
|
|
397
|
+
'surface-button-warning-hover': 'error-dark',
|
|
398
|
+
'surface-button-warning-disabled': 'error-light',
|
|
399
|
+
|
|
400
|
+
// form-field
|
|
401
|
+
'surface-form-field-default': 'neutral-white',
|
|
402
|
+
|
|
403
|
+
// banner
|
|
404
|
+
'surface-banner-information': 'secondary-100',
|
|
405
|
+
'surface-banner-success': 'success-light',
|
|
406
|
+
'surface-banner-error': 'error-light',
|
|
407
|
+
|
|
408
|
+
// tab
|
|
409
|
+
'surface-tab-selected': 'secondary-default',
|
|
410
|
+
|
|
411
|
+
// modal
|
|
412
|
+
'surface-modal-default': 'neutral-white',
|
|
413
|
+
|
|
414
|
+
// radio-button
|
|
415
|
+
'surface-radio-button-selected': 'secondary-default',
|
|
416
|
+
|
|
417
|
+
// checkbox
|
|
418
|
+
'surface-checkbox-selected': 'secondary-default',
|
|
419
|
+
|
|
420
|
+
// dropdown
|
|
421
|
+
'surface-dropdown-default': 'neutral-white',
|
|
422
|
+
'surface-dropdown-hover': 'secondary-100',
|
|
423
|
+
|
|
424
|
+
// container
|
|
425
|
+
'surface-container-default': 'neutral-white',
|
|
426
|
+
'surface-container-light': 'primary-30',
|
|
427
|
+
|
|
428
|
+
// backdrop
|
|
429
|
+
'surface-backdrop-default': 'primary-400',
|
|
430
|
+
|
|
431
|
+
// RESPONSIVE
|
|
432
|
+
// fontsize
|
|
433
|
+
// body
|
|
434
|
+
'fontsize-body-lg': 16,
|
|
435
|
+
'fontsize-body-md': 14,
|
|
436
|
+
'fontsize-body-xl': 20,
|
|
437
|
+
'fontsize-body-sm': 12,
|
|
438
|
+
'fontsize-body-xs': 10,
|
|
439
|
+
|
|
440
|
+
// headings
|
|
441
|
+
'fontsize-headings-h6': 14,
|
|
442
|
+
'fontsize-headings-h5': 20,
|
|
443
|
+
'fontsize-headings-h4': 24,
|
|
444
|
+
'fontsize-headings-h3': 32,
|
|
445
|
+
'fontsize-headings-h2': 40,
|
|
446
|
+
'fontsize-headings-h1': 48,
|
|
447
|
+
|
|
448
|
+
// line-height
|
|
449
|
+
// body
|
|
450
|
+
'line-height-body-xs': 16,
|
|
451
|
+
'line-height-body-sm': 18,
|
|
452
|
+
'line-height-body-md': 22,
|
|
453
|
+
'line-height-body-xl': 32,
|
|
454
|
+
'line-height-body-lg': 24,
|
|
455
|
+
|
|
456
|
+
// headings
|
|
457
|
+
'line-height-headings-h6': 22,
|
|
458
|
+
'line-height-headings-h5': 32,
|
|
459
|
+
'line-height-headings-h4': 36,
|
|
460
|
+
'line-height-headings-h3': 40,
|
|
461
|
+
'line-height-headings-h2': 48,
|
|
462
|
+
'line-height-headings-h1': 56,
|
|
463
|
+
|
|
464
|
+
// paragraph-spacing
|
|
465
|
+
// body
|
|
466
|
+
'paragraph-spacing-body-xs': 6,
|
|
467
|
+
'paragraph-spacing-body-sm': 8,
|
|
468
|
+
'paragraph-spacing-body-md': 10,
|
|
469
|
+
'paragraph-spacing-body-lg': 12,
|
|
470
|
+
'paragraph-spacing-body-xl': 14,
|
|
471
|
+
|
|
472
|
+
// headings
|
|
473
|
+
'paragraph-spacing-headings-h6': 10,
|
|
474
|
+
'paragraph-spacing-headings-h5': 14,
|
|
475
|
+
'paragraph-spacing-headings-h4': 16,
|
|
476
|
+
'paragraph-spacing-headings-h3': 20,
|
|
477
|
+
'paragraph-spacing-headings-h2': 24,
|
|
478
|
+
'paragraph-spacing-headings-h1': 28,
|
|
479
|
+
|
|
480
|
+
// spacing
|
|
481
|
+
'spacing-none': 'scale-0',
|
|
482
|
+
'spacing-3xs': 'scale-50-(2)',
|
|
483
|
+
'spacing-2xs': 'scale-100-(4)',
|
|
484
|
+
'spacing-xs': 'scale-200-(8)',
|
|
485
|
+
'spacing-sm': 'scale-250-(10)',
|
|
486
|
+
'spacing-md': 'scale-300-(12)',
|
|
487
|
+
'spacing-lg': 'scale-400-(16)',
|
|
488
|
+
'spacing-xl': 'scale-600-(24)',
|
|
489
|
+
'spacing-2xl': 'scale-800-(32)',
|
|
490
|
+
'spacing-3xl': 'scale-1200-(48)',
|
|
491
|
+
'spacing-4xl': 'scale-1600-(64)'
|
|
492
|
+
);
|