@eui/styles 19.3.3-snapshot-1754582255784 → 19.3.3-snapshot-1754655052849

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,455 @@
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
+ );