@eui/styles 19.3.3-snapshot-1754667754469 → 21.0.0-alpha.2

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.
@@ -1,455 +0,0 @@
1
- // COLORS
2
-
3
- // eUI DEFAULT NEUTRAL
4
- $eui-neutral-160: #131313;
5
- $eui-neutral-140: #1d1d1d;
6
- $eui-neutral-120: #262626;
7
- $eui-neutral-110: #2b2b2b;
8
- $eui-neutral-100: #303030;
9
- $eui-neutral-80: #595959;
10
- $eui-neutral-60: #838383;
11
- $eui-neutral-40: #acacac;
12
- $eui-neutral-20: #d6d6d6;
13
- $eui-neutral-10: #eaeaea;
14
- $eui-neutral-5: #f5f5f5;
15
- $eui-neutral-2: #fcfcfc;
16
- $eui-neutral-0: #fff;
17
-
18
- // eui DEFAULT ACCENT (ec-yellow)
19
- $eui-accent-160: #432105;
20
- $eui-accent-140: #734110;
21
- $eui-accent-120: #a46704;
22
- $eui-accent-110: #ce9100;
23
- $eui-accent-100: #efbc03;
24
- $eui-accent-80: #ffd617;
25
- $eui-accent-60: #ffe843;
26
- $eui-accent-40: #fff587;
27
- $eui-accent-20: #fffbc2;
28
- $eui-accent-10: #fefde8;
29
- $eui-accent-5: #fffcf7;
30
- $eui-accent-0: #fff;
31
-
32
-
33
-
34
- // ECL v5 default branding
35
- $ecl-blue-navy-50: #f5f5fa;
36
- $ecl-blue-navy-100: #f0f0f8;
37
- $ecl-blue-navy-200: #d9d9ec;
38
- $ecl-blue-navy-300: #bfbfe0;
39
- $ecl-blue-navy-400: #a0a0d1;
40
- $ecl-blue-navy-500: #8c8cc7;
41
- $ecl-blue-navy-600: #4545a4;
42
- $ecl-blue-navy-700: #000083;
43
- $ecl-blue-navy-800: #000069;
44
- $ecl-blue-navy-900: #00002e;
45
- $ecl-blue-navy-950: #000022; // ADDED for eUI 120 mapping
46
-
47
- $primary-blue-25: #f8f9ff;
48
- $primary-blue-50: #f0f4fe;
49
- $primary-blue-75: #e6ecfc;
50
- $primary-blue-100: #dce5fd;
51
- $primary-blue-200: #c2d2fb;
52
- $primary-blue-300: #98b6f8;
53
- $primary-blue-400: #5e88f1;
54
- $primary-blue-500: #3860ed;
55
- $primary-blue-600: #2d49e3;
56
- $primary-blue-700: #2537d0;
57
- $primary-blue-800: #242ea9;
58
- $primary-blue-900: #232c85;
59
- $primary-blue-950: #1a1d51;
60
-
61
- $primary-yellow-50: #fff9ed;
62
- $primary-yellow-100: #fff1d4;
63
- $primary-yellow-200: #ffdfa9;
64
- $primary-yellow-300: #ffbe5c;
65
- $primary-yellow-400: #fea439;
66
- $primary-yellow-500: #fc8713;
67
- $primary-yellow-600: #ed6c09;
68
- $primary-yellow-700: #c55109;
69
- $primary-yellow-800: #9c4010;
70
- $primary-yellow-900: #7e3610;
71
- $primary-yellow-950: #441a06;
72
-
73
- // $primary-neutral-25: #fafafb;
74
- // $primary-neutral-50: #f6f7f9;
75
- // $primary-neutral-100: #e9ebee;
76
- // $primary-neutral-200: #d9dce2;
77
- // $primary-neutral-300: #bec3ce;
78
- // $primary-neutral-400: #a4abb9;
79
- // $primary-neutral-500: #8a92a3;
80
- // $primary-neutral-600: #646e83;
81
- // $primary-neutral-700: #576278;
82
- // $primary-neutral-800: #3f4a62;
83
- // $primary-neutral-900: #26324b;
84
- // $primary-neutral-950: #1e283c;
85
-
86
- $alert-error-50: #fef2f3;
87
- $alert-error-100: #ffc9cc;
88
- $alert-error-200: #ffc9cc;
89
- $alert-error-300: #fda4a9;
90
- $alert-error-400: #fa6f76;
91
- $alert-error-500: #f1424b;
92
- $alert-error-600: #df232d;
93
- $alert-error-700: #ae1820;
94
- $alert-error-800: #9b1920;
95
- $alert-error-900: #801c21;
96
- $alert-error-950: #46090c;
97
-
98
- $alert-warning-50: #fefbe8;
99
- $alert-warning-100: #fff7c2;
100
- $alert-warning-200: #ffed89;
101
- $alert-warning-300: #ffdb45;
102
- $alert-warning-400: #fcc614;
103
- $alert-warning-500: #e3ac00;
104
- $alert-warning-600: #bf8c00;
105
- $alert-warning-700: #956e00;
106
- $alert-warning-800: #795d00;
107
- $alert-warning-900: #5e4a00;
108
- $alert-warning-950: #352b00;
109
-
110
- $alert-success-50: #f1fcf3;
111
- $alert-success-100: #defae5;
112
- $alert-success-200: #bef4cc;
113
- $alert-success-300: #8ce9a6;
114
- $alert-success-400: #52d676;
115
- $alert-success-500: #2bbc53;
116
- $alert-success-600: #1e9b41;
117
- $alert-success-700: #1d833b;
118
- $alert-success-800: #1a612f;
119
- $alert-success-900: #184f29;
120
- $alert-success-950: #072c13;
121
-
122
- $alert-info-50: #f0f9ff;
123
- $alert-info-100: #dff1ff;
124
- $alert-info-200: #b9e4fe;
125
- $alert-info-300: #7bd0fe;
126
- $alert-info-400: #34b8fc;
127
- $alert-info-500: #0aa0ed;
128
- $alert-info-600: #007acb;
129
- $alert-info-700: #006ab5;
130
- $alert-info-800: #005288;
131
- $alert-info-900: #004370;
132
- $alert-info-950: #002a4a;
133
-
134
-
135
- $color-map: (
136
- branding: (
137
- 120: $ecl-blue-navy-950,
138
- 110: $ecl-blue-navy-950,
139
- 100: $ecl-blue-navy-900,
140
- 80: $ecl-blue-navy-800,
141
- 60: $ecl-blue-navy-700,
142
- 40: $ecl-blue-navy-600,
143
- 20: $ecl-blue-navy-500,
144
- 10: $ecl-blue-navy-400,
145
- 5: $ecl-blue-navy-300,
146
- 2: $ecl-blue-navy-200,
147
- 0: $ecl-blue-navy-100,
148
- ),
149
- primary: (
150
- 160: $primary-blue-950,
151
- 140: $primary-blue-900,
152
- 120: $primary-blue-700,
153
- 110: $primary-blue-600,
154
- 100: $primary-blue-500,
155
- 80: $primary-blue-400,
156
- 60: $primary-blue-300,
157
- 40: $primary-blue-200,
158
- 20: $primary-blue-100,
159
- 10: $primary-blue-75,
160
- 5: $primary-blue-50,
161
- 0: $primary-blue-25
162
- ),
163
- neutral: (
164
- 160: $eui-neutral-160,
165
- 140: $eui-neutral-140,
166
- 120: $eui-neutral-120,
167
- 110: $eui-neutral-110,
168
- 100: $eui-neutral-100,
169
- 80: $eui-neutral-80,
170
- 60: $eui-neutral-60,
171
- 40: $eui-neutral-40,
172
- 20: $eui-neutral-20,
173
- 10: $eui-neutral-10,
174
- 5: $eui-neutral-5,
175
- 2: $eui-neutral-2,
176
- 0: $eui-neutral-0
177
- ),
178
- accent: (
179
- 160: $eui-accent-160,
180
- 140: $eui-accent-140,
181
- 120: $eui-accent-120,
182
- 110: $eui-accent-110,
183
- 100: $eui-accent-100,
184
- 80: $eui-accent-80,
185
- 60: $eui-accent-60,
186
- 40: $eui-accent-40,
187
- 20: $eui-accent-20,
188
- 10: $eui-accent-10,
189
- 5: $eui-accent-5,
190
- 0: $eui-accent-0
191
- ),
192
- info: (
193
- 160: $alert-info-950,
194
- 140: $alert-info-900,
195
- 120: $alert-info-800,
196
- 110: $alert-info-700,
197
- 100: $alert-info-600,
198
- 80: $alert-info-500,
199
- 60: $alert-info-500,
200
- 40: $alert-info-400,
201
- 20: $alert-info-300,
202
- 10: $alert-info-200,
203
- 5: $alert-info-100,
204
- 0: $alert-info-50
205
- ),
206
- success: (
207
- 160: $alert-success-950,
208
- 140: $alert-success-900,
209
- 120: $alert-success-800,
210
- 110: $alert-success-700,
211
- 100: $alert-success-600,
212
- 80: $alert-success-500,
213
- 60: $alert-success-500,
214
- 40: $alert-success-400,
215
- 20: $alert-success-300,
216
- 10: $alert-success-200,
217
- 5: $alert-success-100,
218
- 0: $alert-success-50
219
- ),
220
- warning: (
221
- 160: $alert-warning-950,
222
- 140: $alert-warning-900,
223
- 120: $alert-warning-800,
224
- 110: $alert-warning-700,
225
- 100: $alert-warning-600,
226
- 80: $alert-warning-500,
227
- 60: $alert-warning-500,
228
- 40: $alert-warning-400,
229
- 20: $alert-warning-300,
230
- 10: $alert-warning-200,
231
- 5: $alert-warning-100,
232
- 0: $alert-warning-50
233
- ),
234
- danger: (
235
- 160: $alert-error-950,
236
- 140: $alert-error-900,
237
- 120: $alert-error-800,
238
- 110: $alert-error-700,
239
- 100: $alert-error-600,
240
- 80: $alert-error-500,
241
- 60: $alert-error-500,
242
- 40: $alert-error-400,
243
- 20: $alert-error-300,
244
- 10: $alert-error-200,
245
- 5: $alert-error-100,
246
- 0: $alert-error-50
247
- ),
248
- cta: (
249
- 160: $primary-yellow-950,
250
- 140: $primary-yellow-900,
251
- 120: $primary-yellow-800,
252
- 110: $primary-yellow-700,
253
- 100: $primary-yellow-600,
254
- 80: $primary-yellow-500,
255
- 60: $primary-yellow-500,
256
- 40: $primary-yellow-400,
257
- 20: $primary-yellow-300,
258
- 10: $primary-yellow-200,
259
- 5: $primary-yellow-100,
260
- 0: $primary-yellow-50
261
- )
262
- );
263
-
264
-
265
- // TYPOGRAPHY
266
-
267
- $font-weight-map: (
268
- 'regular': 400,
269
- 'medium': 500,
270
- 'semi-bold': 600,
271
- 'bold': 700
272
- );
273
-
274
- $font-map: (
275
- 'display': (
276
- 'm': (
277
- 'desktop': (
278
- 'size': 3rem,
279
- 'line-height': 3.5rem
280
- ),
281
- 'tablet': (
282
- 'size': 2.75rem,
283
- 'line-height': 3.25rem
284
- ),
285
- 'mobile': (
286
- 'size': 2rem,
287
- 'line-height': 2.25rem
288
- )
289
- )
290
- ),
291
- 'title': (
292
- 'xl': (
293
- 'desktop': (
294
- 'size': 2.5rem,
295
- 'line-height': 3rem
296
- ),
297
- 'tablet': (
298
- 'size': 2rem,
299
- 'line-height': 2.75rem
300
- ),
301
- 'mobile': (
302
- 'size': 1.75rem,
303
- 'line-height': 2.5rem
304
- )
305
- ),
306
- 'xs': (
307
- 'desktop': (
308
- 'size': 1.25rem,
309
- 'line-height': 1.75rem
310
- ),
311
- 'tablet': (
312
- 'size': 1.25rem,
313
- 'line-height': 1.75rem
314
- ),
315
- 'mobile': (
316
- 'size': 1.2rem,
317
- 'line-height': 1.5rem
318
- )
319
- ),
320
- '2xs': (
321
- 'desktop': (
322
- 'size': 1rem,
323
- 'line-height': 1.5rem
324
- ),
325
- 'tablet': (
326
- 'size': 1rem,
327
- 'line-height': 1.5rem
328
- ),
329
- 'mobile': (
330
- 'size': 1rem,
331
- 'line-height': 1.5rem
332
- )
333
- )
334
- ),
335
- 'card-title': (
336
- 'm': (
337
- 'desktop': (
338
- 'size': 1.125rem,
339
- 'line-height': 1.5rem
340
- ),
341
- 'tablet': (
342
- 'size': 1.125rem,
343
- 'line-height': 1.5rem
344
- ),
345
- 'mobile': (
346
- 'size': 1.125rem,
347
- 'line-height': 1.5rem
348
- )
349
- )
350
- ),
351
- 'label': (
352
- 'm': (
353
- 'desktop': (
354
- 'size': 0.875rem,
355
- 'line-height': 1.25rem
356
- ),
357
- 'tablet': (
358
- 'size': 0.875rem,
359
- 'line-height': 1.25rem
360
- ),
361
- 'mobile': (
362
- 'size': 0.875rem,
363
- 'line-height': 1.25rem
364
- )
365
- ),
366
- 'l': (
367
- 'desktop': (
368
- 'size': 1rem,
369
- 'line-height': 1.5rem
370
- ),
371
- 'tablet': (
372
- 'size': 1rem,
373
- 'line-height': 1.5rem
374
- ),
375
- 'mobile': (
376
- 'size': 1rem,
377
- 'line-height': 1.5rem
378
- )
379
- )
380
- ),
381
- 'body': (
382
- 's': (
383
- 'desktop': (
384
- 'size': 0.875rem,
385
- 'line-height': 1.25rem
386
- ),
387
- 'tablet': (
388
- 'size': 0.875rem,
389
- 'line-height': 1.25rem
390
- ),
391
- 'mobile': (
392
- 'size': 0.875rem,
393
- 'line-height': 1.25rem
394
- )
395
- ),
396
- 'm': (
397
- 'desktop': (
398
- 'size': 1rem,
399
- 'line-height': 1.5rem
400
- ),
401
- 'tablet': (
402
- 'size': 1rem,
403
- 'line-height': 1.5rem
404
- ),
405
- 'mobile': (
406
- 'size': 1rem,
407
- 'line-height': 1.5rem
408
- )
409
- ),
410
- 'l': (
411
- 'desktop': (
412
- 'size': 1.25rem,
413
- 'line-height': 1.75rem
414
- ),
415
- 'tablet': (
416
- 'size': 1.25rem,
417
- 'line-height': 1.75rem
418
- ),
419
- 'mobile': (
420
- 'size': 1.25rem,
421
- 'line-height': 1.75rem
422
- )
423
- ),
424
- 'xl': (
425
- 'desktop': (
426
- 'size': 1.5rem,
427
- 'line-height': 2rem
428
- ),
429
- 'tablet': (
430
- 'size': 1.5rem,
431
- 'line-height': 2rem
432
- ),
433
- 'mobile': (
434
- 'size': 1.5rem,
435
- 'line-height': 2rem
436
- )
437
- )
438
- ),
439
- 'microcopy': (
440
- 'm': (
441
- 'desktop': (
442
- 'size': 0.75rem,
443
- 'line-height': 1rem
444
- ),
445
- 'tablet': (
446
- 'size': 0.75rem,
447
- 'line-height': 1rem
448
- ),
449
- 'mobile': (
450
- 'size': 0.75rem,
451
- 'line-height': 1rem
452
- )
453
- )
454
- )
455
- );