@elastic/eui-theme-borealis 3.5.0 → 4.0.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.
Files changed (21) hide show
  1. package/lib/cjs/index.js +3 -4
  2. package/lib/cjs/variables/_buttons.js +4 -19
  3. package/lib/cjs/variables/_components.js +91 -96
  4. package/lib/cjs/variables/_shadows.d.ts +8 -0
  5. package/lib/cjs/variables/_shadows.js +438 -0
  6. package/lib/esm/index.js +3 -4
  7. package/lib/esm/variables/_buttons.js +2 -20
  8. package/lib/esm/variables/_components.js +0 -1
  9. package/lib/esm/variables/_shadows.d.ts +8 -0
  10. package/lib/esm/variables/_shadows.js +477 -0
  11. package/lib/eui_theme_borealis_dark.json +36 -0
  12. package/lib/eui_theme_borealis_dark.json.d.ts +36 -0
  13. package/lib/eui_theme_borealis_light.json +37 -1
  14. package/lib/eui_theme_borealis_light.json.d.ts +36 -0
  15. package/package.json +2 -2
  16. package/src/mixins/_index.scss +1 -0
  17. package/src/mixins/_shadow.scss +131 -0
  18. package/src/theme_dark.scss +2 -0
  19. package/src/theme_light.scss +2 -0
  20. package/src/variables/_shadows_dark.scss +20 -0
  21. package/src/variables/_shadows_light.scss +20 -0
package/lib/esm/variables/_shadows.js ADDED
@@ -0,0 +1,477 @@
1
+ /*
2
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3
+ * or more contributor license agreements. Licensed under the Elastic License
4
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
5
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
6
+ * Side Public License, v 1.
7
+ */
8
+ import { formatMultipleBoxShadow, } from '@elastic/eui-theme-common';
9
+ import { SEMANTIC_COLORS } from './colors/_semantic_colors';
10
+ import { PRIMITIVE_COLORS } from './colors/_primitive_colors';
11
+ /**
12
+ * This structure holds "primitives" (or actual design tokens as they
13
+ * would be stored in a design token repository).
14
+ * Not exposing them in the theme object is intentional.
15
+ */
16
+ export const shadowPrimitives = {
17
+ xs: {
18
+ light: [
19
+ {
20
+ opacity: 0.16,
21
+ x: 0,
22
+ y: 0,
23
+ blur: 2,
24
+ spread: 0,
25
+ },
26
+ {
27
+ opacity: 0.06,
28
+ x: 0,
29
+ y: 1,
30
+ blur: 4,
31
+ spread: 0,
32
+ },
33
+ {
34
+ opacity: 0.04,
35
+ x: 0,
36
+ y: 2,
37
+ blur: 8,
38
+ spread: 0,
39
+ },
40
+ ],
41
+ dark: [
42
+ {
43
+ opacity: 1,
44
+ x: 0,
45
+ y: 0,
46
+ blur: 0,
47
+ spread: 1,
48
+ },
49
+ {
50
+ opacity: 0.4,
51
+ x: 0,
52
+ y: 1,
53
+ blur: 4,
54
+ spread: 0,
55
+ },
56
+ {
57
+ opacity: 0.24,
58
+ x: 0,
59
+ y: 2,
60
+ blur: 8,
61
+ spread: 0,
62
+ },
63
+ ],
64
+ },
65
+ s: {
66
+ light: [
67
+ {
68
+ opacity: 0.16,
69
+ x: 0,
70
+ y: 0,
71
+ blur: 2,
72
+ spread: 0,
73
+ },
74
+ {
75
+ opacity: 0.08,
76
+ x: 0,
77
+ y: 2,
78
+ blur: 7,
79
+ spread: 0,
80
+ },
81
+ {
82
+ opacity: 0.05,
83
+ x: 0,
84
+ y: 4,
85
+ blur: 11,
86
+ spread: 0,
87
+ },
88
+ ],
89
+ dark: [
90
+ {
91
+ opacity: 1,
92
+ x: 0,
93
+ y: 0,
94
+ blur: 0,
95
+ spread: 1,
96
+ },
97
+ {
98
+ opacity: 0.46,
99
+ x: 0,
100
+ y: 2,
101
+ blur: 7,
102
+ spread: 0,
103
+ },
104
+ {
105
+ opacity: 0.26,
106
+ x: 0,
107
+ y: 4,
108
+ blur: 11,
109
+ spread: 0,
110
+ },
111
+ ],
112
+ },
113
+ m: {
114
+ light: [
115
+ {
116
+ opacity: 0.16,
117
+ x: 0,
118
+ y: 0,
119
+ blur: 2,
120
+ spread: 0,
121
+ },
122
+ {
123
+ opacity: 0.1,
124
+ x: 0,
125
+ y: 3,
126
+ blur: 10,
127
+ spread: 0,
128
+ },
129
+ {
130
+ opacity: 0.06,
131
+ x: 0,
132
+ y: 6,
133
+ blur: 14,
134
+ spread: 0,
135
+ },
136
+ ],
137
+ dark: [
138
+ {
139
+ opacity: 1,
140
+ x: 0,
141
+ y: 0,
142
+ blur: 0,
143
+ spread: 1,
144
+ },
145
+ {
146
+ opacity: 0.52,
147
+ x: 0,
148
+ y: 3,
149
+ blur: 10,
150
+ spread: 0,
151
+ },
152
+ {
153
+ opacity: 0.28,
154
+ x: 0,
155
+ y: 6,
156
+ blur: 14,
157
+ spread: 0,
158
+ },
159
+ ],
160
+ },
161
+ l: {
162
+ light: [
163
+ {
164
+ opacity: 0.16,
165
+ x: 0,
166
+ y: 0,
167
+ blur: 2,
168
+ spread: 0,
169
+ },
170
+ {
171
+ opacity: 0.12,
172
+ x: 0,
173
+ y: 4,
174
+ blur: 13,
175
+ spread: 0,
176
+ },
177
+ {
178
+ opacity: 0.07,
179
+ x: 0,
180
+ y: 8,
181
+ blur: 17,
182
+ spread: 0,
183
+ },
184
+ ],
185
+ dark: [
186
+ {
187
+ opacity: 1,
188
+ x: 0,
189
+ y: 0,
190
+ blur: 0,
191
+ spread: 1,
192
+ },
193
+ {
194
+ opacity: 0.58,
195
+ x: 0,
196
+ y: 4,
197
+ blur: 13,
198
+ spread: 0,
199
+ },
200
+ {
201
+ opacity: 0.3,
202
+ x: 0,
203
+ y: 8,
204
+ blur: 17,
205
+ spread: 0,
206
+ },
207
+ ],
208
+ },
209
+ xl: {
210
+ light: [
211
+ {
212
+ opacity: 0.16,
213
+ x: 0,
214
+ y: 0,
215
+ blur: 2,
216
+ spread: 0,
217
+ },
218
+ {
219
+ opacity: 0.14,
220
+ x: 0,
221
+ y: 5,
222
+ blur: 16,
223
+ spread: 0,
224
+ },
225
+ {
226
+ opacity: 0.08,
227
+ x: 0,
228
+ y: 10,
229
+ blur: 20,
230
+ spread: 0,
231
+ },
232
+ ],
233
+ dark: [
234
+ {
235
+ opacity: 1,
236
+ x: 0,
237
+ y: 0,
238
+ blur: 0,
239
+ spread: 1,
240
+ },
241
+ {
242
+ opacity: 0.64,
243
+ x: 0,
244
+ y: 5,
245
+ blur: 16,
246
+ spread: 0,
247
+ },
248
+ {
249
+ opacity: 0.32,
250
+ x: 0,
251
+ y: 10,
252
+ blur: 20,
253
+ spread: 0,
254
+ },
255
+ ],
256
+ },
257
+ xxl: {
258
+ light: [
259
+ {
260
+ opacity: 0.16,
261
+ x: 0,
262
+ y: 0,
263
+ blur: 2,
264
+ spread: 0,
265
+ },
266
+ {
267
+ opacity: 0.16,
268
+ x: 0,
269
+ y: 6,
270
+ blur: 19,
271
+ spread: 0,
272
+ },
273
+ {
274
+ opacity: 0.09,
275
+ x: 0,
276
+ y: 12,
277
+ blur: 23,
278
+ spread: 0,
279
+ },
280
+ ],
281
+ dark: [
282
+ {
283
+ opacity: 1,
284
+ x: 0,
285
+ y: 0,
286
+ blur: 0,
287
+ spread: 1,
288
+ },
289
+ {
290
+ opacity: 0.7,
291
+ x: 0,
292
+ y: 6,
293
+ blur: 19,
294
+ spread: 0,
295
+ },
296
+ {
297
+ opacity: 0.34,
298
+ x: 0,
299
+ y: 12,
300
+ blur: 23,
301
+ spread: 0,
302
+ },
303
+ ],
304
+ },
305
+ flat: {
306
+ light: [],
307
+ dark: [],
308
+ },
309
+ };
310
+ const shadowColorsLight = {
311
+ colors: {
312
+ base: SEMANTIC_COLORS.shade120,
313
+ },
314
+ };
315
+ const shadowsLight = {
316
+ ...shadowColorsLight,
317
+ xs: {
318
+ down: formatMultipleBoxShadow(shadowPrimitives.xs.light, {
319
+ color: shadowColorsLight.colors.base,
320
+ }),
321
+ up: formatMultipleBoxShadow(shadowPrimitives.xs.light, {
322
+ direction: 'up',
323
+ color: shadowColorsLight.colors.base,
324
+ }),
325
+ },
326
+ s: {
327
+ down: formatMultipleBoxShadow(shadowPrimitives.s.light, {
328
+ color: shadowColorsLight.colors.base,
329
+ }),
330
+ up: formatMultipleBoxShadow(shadowPrimitives.s.light, {
331
+ direction: 'up',
332
+ color: shadowColorsLight.colors.base,
333
+ }),
334
+ },
335
+ m: {
336
+ down: formatMultipleBoxShadow(shadowPrimitives.m.light, {
337
+ color: shadowColorsLight.colors.base,
338
+ }),
339
+ up: formatMultipleBoxShadow(shadowPrimitives.m.light, {
340
+ direction: 'up',
341
+ color: shadowColorsLight.colors.base,
342
+ }),
343
+ },
344
+ l: {
345
+ down: formatMultipleBoxShadow(shadowPrimitives.l.light, {
346
+ color: shadowColorsLight.colors.base,
347
+ }),
348
+ up: formatMultipleBoxShadow(shadowPrimitives.l.light, {
349
+ direction: 'up',
350
+ color: shadowColorsLight.colors.base,
351
+ }),
352
+ },
353
+ xl: {
354
+ down: formatMultipleBoxShadow(shadowPrimitives.xl.light, {
355
+ color: shadowColorsLight.colors.base,
356
+ }),
357
+ up: formatMultipleBoxShadow(shadowPrimitives.xl.light, {
358
+ direction: 'up',
359
+ color: shadowColorsLight.colors.base,
360
+ }),
361
+ },
362
+ hover: {
363
+ base: {
364
+ down: formatMultipleBoxShadow(shadowPrimitives.s.light, {
365
+ color: shadowColorsLight.colors.base,
366
+ }),
367
+ up: formatMultipleBoxShadow(shadowPrimitives.s.light, {
368
+ direction: 'up',
369
+ color: shadowColorsLight.colors.base,
370
+ }),
371
+ },
372
+ xl: {
373
+ down: formatMultipleBoxShadow(shadowPrimitives.xxl.light, {
374
+ color: shadowColorsLight.colors.base,
375
+ }),
376
+ up: formatMultipleBoxShadow(shadowPrimitives.xxl.light, {
377
+ direction: 'up',
378
+ color: shadowColorsLight.colors.base,
379
+ }),
380
+ },
381
+ },
382
+ flat: {
383
+ down: formatMultipleBoxShadow(shadowPrimitives.xs.light, {
384
+ color: shadowColorsLight.colors.base,
385
+ }),
386
+ up: formatMultipleBoxShadow(shadowPrimitives.xs.light, {
387
+ direction: 'up',
388
+ color: shadowColorsLight.colors.base,
389
+ }),
390
+ },
391
+ };
392
+ const shadowColorsDark = {
393
+ colors: {
394
+ base: PRIMITIVE_COLORS.black,
395
+ },
396
+ };
397
+ const shadowsDark = {
398
+ ...shadowColorsDark,
399
+ xs: {
400
+ down: formatMultipleBoxShadow(shadowPrimitives.xs.dark.slice(1), {
401
+ color: shadowColorsDark.colors.base,
402
+ }),
403
+ up: formatMultipleBoxShadow(shadowPrimitives.xs.dark.slice(1), {
404
+ direction: 'up',
405
+ color: shadowColorsDark.colors.base,
406
+ }),
407
+ },
408
+ s: {
409
+ down: formatMultipleBoxShadow(shadowPrimitives.s.dark.slice(1), {
410
+ color: shadowColorsDark.colors.base,
411
+ }),
412
+ up: formatMultipleBoxShadow(shadowPrimitives.s.dark.slice(1), {
413
+ direction: 'up',
414
+ color: shadowColorsDark.colors.base,
415
+ }),
416
+ },
417
+ m: {
418
+ down: formatMultipleBoxShadow(shadowPrimitives.m.dark.slice(1), {
419
+ color: shadowColorsDark.colors.base,
420
+ }),
421
+ up: formatMultipleBoxShadow(shadowPrimitives.m.dark.slice(1), {
422
+ direction: 'up',
423
+ color: shadowColorsDark.colors.base,
424
+ }),
425
+ },
426
+ l: {
427
+ down: formatMultipleBoxShadow(shadowPrimitives.l.dark.slice(1), {
428
+ color: shadowColorsDark.colors.base,
429
+ }),
430
+ up: formatMultipleBoxShadow(shadowPrimitives.l.dark.slice(1), {
431
+ direction: 'up',
432
+ color: shadowColorsDark.colors.base,
433
+ }),
434
+ },
435
+ xl: {
436
+ down: formatMultipleBoxShadow(shadowPrimitives.xl.dark.slice(1), {
437
+ color: shadowColorsDark.colors.base,
438
+ }),
439
+ up: formatMultipleBoxShadow(shadowPrimitives.xl.dark.slice(1), {
440
+ direction: 'up',
441
+ color: shadowColorsDark.colors.base,
442
+ }),
443
+ },
444
+ hover: {
445
+ base: {
446
+ down: formatMultipleBoxShadow(shadowPrimitives.s.dark.slice(1), {
447
+ color: shadowColorsDark.colors.base,
448
+ }),
449
+ up: formatMultipleBoxShadow(shadowPrimitives.s.dark.slice(1), {
450
+ direction: 'up',
451
+ color: shadowColorsDark.colors.base,
452
+ }),
453
+ },
454
+ xl: {
455
+ down: formatMultipleBoxShadow(shadowPrimitives.xxl.dark.slice(1), {
456
+ color: shadowColorsDark.colors.base,
457
+ }),
458
+ up: formatMultipleBoxShadow(shadowPrimitives.xxl.dark.slice(1), {
459
+ direction: 'up',
460
+ color: shadowColorsDark.colors.base,
461
+ }),
462
+ },
463
+ },
464
+ flat: {
465
+ down: formatMultipleBoxShadow(shadowPrimitives.xs.dark.slice(1), {
466
+ color: shadowColorsDark.colors.base,
467
+ }),
468
+ up: formatMultipleBoxShadow(shadowPrimitives.xs.dark.slice(1), {
469
+ direction: 'up',
470
+ color: shadowColorsDark.colors.base,
471
+ }),
472
+ },
473
+ };
474
+ export const shadows = {
475
+ LIGHT: shadowsLight,
476
+ DARK: shadowsDark,
477
+ };
package/lib/eui_theme_borealis_dark.json CHANGED
@@ -136,6 +136,42 @@
136
136
  },
137
137
  "euiBreakpointKeys": "'xs', 's', 'm', 'l', 'xl'",
138
138
  "euiShadowColor": "#000000",
139
+ "euiShadows": {
140
+ "xs": {
141
+ "down": "0px 1px 4px 0px hsla(0,0%,0%,0.4), 0px 2px 8px 0px hsla(0,0%,0%,0.24)",
142
+ "up": "0px 1px 4px 0px hsla(0,0%,0%,0.4), 0px -2px 8px 0px hsla(0,0%,0%,0.24)"
143
+ },
144
+ "s":{
145
+ "down": "0px 2px 7px 0px hsla(0,0%,0%,0.46), 0px 4px 11px 0px hsla(0,0%,0%,0.26)",
146
+ "up": "0px 2px 7px 0px hsla(0,0%,0%,0.46), 0px -4px 11px 0px hsla(0,0%,0%,0.26)"
147
+ },
148
+ "m": {
149
+ "down": "0px 3px 10px 0px hsla(0,0%,0%,0.52), 0px 6px 14px 0px hsla(0,0%,0%,0.28)",
150
+ "up": "0px 3px 10px 0px hsla(0,0%,0%,0.52), 0px -6px 14px 0px hsla(0,0%,0%,0.28)"
151
+ },
152
+ "l": {
153
+ "down": "0px 4px 13px 0px hsla(0,0%,0%,0.58), 0px 8px 17px 0px hsla(0,0%,0%,0.3)",
154
+ "up": "0px 4px 13px 0px hsla(0,0%,0%,0.58), 0px -8px 17px 0px hsla(0,0%,0%,0.3)"
155
+ },
156
+ "xl": {
157
+ "down": "0px 5px 16px 0px hsla(0,0%,0%,0.64), 0px 10px 20px 0px hsla(0,0%,0%,0.32)",
158
+ "up": "0px 5px 16px 0px hsla(0,0%,0%,0.64), 0px -10px 20px 0px hsla(0,0%,0%,0.32)"
159
+ },
160
+ "hover": {
161
+ "base": {
162
+ "down": "0px 2px 7px 0px hsla(0,0%,0%,0.46), 0px 4px 11px 0px hsla(0,0%,0%,0.26)",
163
+ "up": "0px -2px 7px 0px hsla(0,0%,0%,0.46), 0px -4px 11px 0px hsla(0,0%,0%,0.26)"
164
+ },
165
+ "xl": {
166
+ "down": "0px 6px 19px 0px hsla(0,0%,0%,0.7), 0px 12px 23px 0px hsla(0,0%,0%,0.34)",
167
+ "up": "0px -6px 19px 0px hsla(0,0%,0%,0.7), 0px -12px 23px 0px hsla(0,0%,0%,0.34)"
168
+ }
169
+ },
170
+ "flat": {
171
+ "down": "0px 1px 4px 0px hsla(0,0%,0%,0.4), 0px 2px 8px 0px hsla(0,0%,0%,0.24)",
172
+ "up": "0px 1px 4px 0px hsla(0,0%,0%,0.4), 0px -2px 8px 0px hsla(0,0%,0%,0.24)"
173
+ }
174
+ },
139
175
  "euiSize": "16px",
140
176
  "euiSizeXS": "4px",
141
177
  "euiSizeS": "8px",
package/lib/eui_theme_borealis_dark.json.d.ts CHANGED
@@ -137,6 +137,42 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_dark.json' {
137
137
  };
138
138
  euiBreakpointKeys: string;
139
139
  euiShadowColor: string;
140
+ euiShadows: {
141
+ xs: {
142
+ down: string;
143
+ up: string;
144
+ };
145
+ s: {
146
+ down: string;
147
+ up: string;
148
+ };
149
+ m: {
150
+ down: string;
151
+ up: string;
152
+ };
153
+ l: {
154
+ down: string;
155
+ up: string;
156
+ };
157
+ xl: {
158
+ down: string;
159
+ up: string;
160
+ };
161
+ hover: {
162
+ base: {
163
+ down: string;
164
+ up: string;
165
+ };
166
+ xl: {
167
+ down: string;
168
+ up: string;
169
+ };
170
+ };
171
+ flat: {
172
+ down: string;
173
+ up: string;
174
+ };
175
+ };
140
176
  euiSize: string;
141
177
  euiSizeXS: string;
142
178
  euiSizeS: string;
package/lib/eui_theme_borealis_light.json CHANGED
@@ -135,7 +135,43 @@
135
135
  "xl": "1200px"
136
136
  },
137
137
  "euiBreakpointKeys": "'xs', 's', 'm', 'l', 'xl'",
138
- "euiShadowColor": "#000000",
138
+ "euiShadowColor": "#2B394F",
139
+ "euiShadows": {
140
+ "xs": {
141
+ "down": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 1px 4px 0px hsl(216.67deg 29.51% 23.92% / 0.06), 0px 2px 8px 0px hsl(216.67deg 29.51% 23.92% / 0.04)",
142
+ "up": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -1px 4px 0px hsl(216.67deg 29.51% 23.92% / 0.06), 0px -2px 8px 0px hsl(216.67deg 29.51% 23.92% / 0.04)"
143
+ },
144
+ "s": {
145
+ "down": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 2px 7px 0px hsl(216.67deg 29.51% 23.92% / 0.08), 0px 4px 11px 0px hsl(216.67deg 29.51% 23.92% / 0.05)",
146
+ "up": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -2px 7px 0px hsl(216.67deg 29.51% 23.92% / 0.08), 0px -4px 11px 0px hsl(216.67deg 29.51% 23.92% / 0.05)"
147
+ },
148
+ "m": {
149
+ "down": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 3px 10px 0px hsl(216.67deg 29.51% 23.92% / 0.1), 0px 6px 14px 0px hsl(216.67deg 29.51% 23.92% / 0.06)",
150
+ "up": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -3px 10px 0px hsl(216.67deg 29.51% 23.92% / 0.1), 0px -6px 14px 0px hsl(216.67deg 29.51% 23.92% / 0.06)"
151
+ },
152
+ "l": {
153
+ "down": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 4px 13px 0px hsl(216.67deg 29.51% 23.92% / 0.12), 0px 8px 17px 0px hsl(216.67deg 29.51% 23.92% / 0.07)",
154
+ "up": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -4px 13px 0px hsl(216.67deg 29.51% 23.92% / 0.12), 0px -8px 17px 0px hsl(216.67deg 29.51% 23.92% / 0.07)"
155
+ },
156
+ "xl": {
157
+ "down": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 5px 16px 0px hsl(216.67deg 29.51% 23.92% / 0.14), 0px 10px 20px 0px hsl(216.67deg 29.51% 23.92% / 0.08)",
158
+ "up": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -5px 16px 0px hsl(216.67deg 29.51% 23.92% / 0.14), 0px -10px 20px 0px hsl(216.67deg 29.51% 23.92% / 0.08)"
159
+ },
160
+ "hover": {
161
+ "base": {
162
+ "down": "0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px 2px 7px 0px hsla(216.67,29.51%,23.92%,0.08), 0px 4px 11px 0px hsla(216.67,29.51%,23.92%,0.05)",
163
+ "up": "0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px -2px 7px 0px hsla(216.67,29.51%,23.92%,0.08), 0px -4px 11px 0px hsla(216.67,29.51%,23.92%,0.05)"
164
+ },
165
+ "xl": {
166
+ "down": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 6px 19px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 12px 23px 0px hsl(216.67deg 29.51% 23.92% / 0.09)",
167
+ "up": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -6px 19px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -12px 23px 0px hsl(216.67deg 29.51% 23.92% / 0.09)"
168
+ }
169
+ },
170
+ "flat": {
171
+ "down": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 1px 4px 0px hsl(216.67deg 29.51% 23.92% / 0.06), 0px 2px 8px 0px hsl(216.67deg 29.51% 23.92% / 0.04)",
172
+ "up": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -1px 4px 0px hsl(216.67deg 29.51% 23.92% / 0.06), 0px -2px 8px 0px hsl(216.67deg 29.51% 23.92% / 0.04)"
173
+ }
174
+ },
139
175
  "euiSize": "16px",
140
176
  "euiSizeXS": "4px",
141
177
  "euiSizeS": "8px",
package/lib/eui_theme_borealis_light.json.d.ts CHANGED
@@ -137,6 +137,42 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json' {
137
137
  };
138
138
  euiBreakpointKeys: string;
139
139
  euiShadowColor: string;
140
+ euiShadows: {
141
+ xs: {
142
+ down: string;
143
+ up: string;
144
+ };
145
+ s: {
146
+ down: string;
147
+ up: string;
148
+ };
149
+ m: {
150
+ down: string;
151
+ up: string;
152
+ };
153
+ l: {
154
+ down: string;
155
+ up: string;
156
+ };
157
+ xl: {
158
+ down: string;
159
+ up: string;
160
+ };
161
+ hover: {
162
+ base: {
163
+ down: string;
164
+ up: string;
165
+ };
166
+ xl: {
167
+ down: string;
168
+ up: string;
169
+ };
170
+ };
171
+ flat: {
172
+ down: string;
173
+ up: string;
174
+ };
175
+ };
140
176
  euiSize: string;
141
177
  euiSizeXS: string;
142
178
  euiSizeS: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elastic/eui-theme-borealis",
3
- "version": "3.5.0",
3
+ "version": "4.0.0",
4
4
  "description": "A visual theme for EUI",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "scripts": {
@@ -33,7 +33,7 @@
33
33
  "@babel/preset-env": "^7.21.5",
34
34
  "@babel/preset-react": "^7.18.6",
35
35
  "@babel/preset-typescript": "^7.21.5",
36
- "@elastic/eui-theme-common": "4.0.0",
36
+ "@elastic/eui-theme-common": "6.0.0",
37
37
  "@types/chroma-js": "^2.4.0",
38
38
  "@types/jest": "^29.5.12",
39
39
  "@types/prettier": "2.7.3",
package/src/mixins/_index.scss ADDED
@@ -0,0 +1 @@
1
+ @import 'shadow'