@elastic/eui-theme-borealis 3.5.0 → 3.6.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 (17) hide show
  1. package/lib/cjs/index.js +4 -1
  2. package/lib/cjs/variables/_shadows.d.ts +8 -0
  3. package/lib/cjs/variables/_shadows.js +438 -0
  4. package/lib/esm/index.js +3 -0
  5. package/lib/esm/variables/_shadows.d.ts +8 -0
  6. package/lib/esm/variables/_shadows.js +477 -0
  7. package/lib/eui_theme_borealis_dark.json +36 -0
  8. package/lib/eui_theme_borealis_dark.json.d.ts +36 -0
  9. package/lib/eui_theme_borealis_light.json +37 -1
  10. package/lib/eui_theme_borealis_light.json.d.ts +36 -0
  11. package/package.json +2 -2
  12. package/src/mixins/_index.scss +1 -0
  13. package/src/mixins/_shadow.scss +131 -0
  14. package/src/theme_dark.scss +2 -0
  15. package/src/theme_light.scss +2 -0
  16. package/src/variables/_shadows_dark.scss +20 -0
  17. package/src/variables/_shadows_light.scss +20 -0
package/lib/cjs/index.js CHANGED
@@ -31,6 +31,7 @@ var _size = require("./variables/_size");
31
31
  var _borders = require("./variables/_borders");
32
32
  var _levels = require("./variables/_levels");
33
33
  var _typography = require("./variables/_typography");
34
+ var _shadows = require("./variables/_shadows");
34
35
  var _states = require("./variables/_states");
35
36
  var _components = require("./variables/_components");
36
37
  var _overrides = require("./variables/_overrides");
@@ -54,13 +55,15 @@ var euiThemeBorealis = exports.euiThemeBorealis = {
54
55
  animation: _animation.animation,
55
56
  breakpoint: _breakpoint.breakpoint,
56
57
  levels: _levels.levels,
58
+ shadows: _shadows.shadows,
57
59
  focus: _states.focus,
58
60
  components: _components.components,
59
61
  flags: {
60
62
  hasGlobalFocusColor: true,
61
63
  hasVisColorAdjustment: false,
62
64
  buttonVariant: 'refresh',
63
- formVariant: 'refresh'
65
+ formVariant: 'refresh',
66
+ shadowVariant: 'refresh'
64
67
  },
65
68
  overrides: _overrides.overrides
66
69
  };
package/lib/cjs/variables/_shadows.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import { type _EuiThemeShadows, type _EuiThemeShadowPrimitives } from '@elastic/eui-theme-common';
2
+ /**
3
+ * This structure holds "primitives" (or actual design tokens as they
4
+ * would be stored in a design token repository).
5
+ * Not exposing them in the theme object is intentional.
6
+ */
7
+ export declare const shadowPrimitives: _EuiThemeShadowPrimitives;
8
+ export declare const shadows: _EuiThemeShadows;
package/lib/cjs/variables/_shadows.js ADDED
@@ -0,0 +1,438 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.shadows = exports.shadowPrimitives = void 0;
7
+ var _euiThemeCommon = require("@elastic/eui-theme-common");
8
+ var _semantic_colors = require("./colors/_semantic_colors");
9
+ var _primitive_colors = require("./colors/_primitive_colors");
10
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
11
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
12
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
13
+ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
14
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
15
+ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /*
16
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
17
+ * or more contributor license agreements. Licensed under the Elastic License
18
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
19
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
20
+ * Side Public License, v 1.
21
+ */
22
+ /**
23
+ * This structure holds "primitives" (or actual design tokens as they
24
+ * would be stored in a design token repository).
25
+ * Not exposing them in the theme object is intentional.
26
+ */
27
+ var shadowPrimitives = exports.shadowPrimitives = {
28
+ xs: {
29
+ light: [{
30
+ opacity: 0.16,
31
+ x: 0,
32
+ y: 0,
33
+ blur: 2,
34
+ spread: 0
35
+ }, {
36
+ opacity: 0.06,
37
+ x: 0,
38
+ y: 1,
39
+ blur: 4,
40
+ spread: 0
41
+ }, {
42
+ opacity: 0.04,
43
+ x: 0,
44
+ y: 2,
45
+ blur: 8,
46
+ spread: 0
47
+ }],
48
+ dark: [{
49
+ opacity: 1,
50
+ x: 0,
51
+ y: 0,
52
+ blur: 0,
53
+ spread: 1
54
+ }, {
55
+ opacity: 0.4,
56
+ x: 0,
57
+ y: 1,
58
+ blur: 4,
59
+ spread: 0
60
+ }, {
61
+ opacity: 0.24,
62
+ x: 0,
63
+ y: 2,
64
+ blur: 8,
65
+ spread: 0
66
+ }]
67
+ },
68
+ s: {
69
+ light: [{
70
+ opacity: 0.16,
71
+ x: 0,
72
+ y: 0,
73
+ blur: 2,
74
+ spread: 0
75
+ }, {
76
+ opacity: 0.08,
77
+ x: 0,
78
+ y: 2,
79
+ blur: 7,
80
+ spread: 0
81
+ }, {
82
+ opacity: 0.05,
83
+ x: 0,
84
+ y: 4,
85
+ blur: 11,
86
+ spread: 0
87
+ }],
88
+ dark: [{
89
+ opacity: 1,
90
+ x: 0,
91
+ y: 0,
92
+ blur: 0,
93
+ spread: 1
94
+ }, {
95
+ opacity: 0.46,
96
+ x: 0,
97
+ y: 2,
98
+ blur: 7,
99
+ spread: 0
100
+ }, {
101
+ opacity: 0.26,
102
+ x: 0,
103
+ y: 4,
104
+ blur: 11,
105
+ spread: 0
106
+ }]
107
+ },
108
+ m: {
109
+ light: [{
110
+ opacity: 0.16,
111
+ x: 0,
112
+ y: 0,
113
+ blur: 2,
114
+ spread: 0
115
+ }, {
116
+ opacity: 0.1,
117
+ x: 0,
118
+ y: 3,
119
+ blur: 10,
120
+ spread: 0
121
+ }, {
122
+ opacity: 0.06,
123
+ x: 0,
124
+ y: 6,
125
+ blur: 14,
126
+ spread: 0
127
+ }],
128
+ dark: [{
129
+ opacity: 1,
130
+ x: 0,
131
+ y: 0,
132
+ blur: 0,
133
+ spread: 1
134
+ }, {
135
+ opacity: 0.52,
136
+ x: 0,
137
+ y: 3,
138
+ blur: 10,
139
+ spread: 0
140
+ }, {
141
+ opacity: 0.28,
142
+ x: 0,
143
+ y: 6,
144
+ blur: 14,
145
+ spread: 0
146
+ }]
147
+ },
148
+ l: {
149
+ light: [{
150
+ opacity: 0.16,
151
+ x: 0,
152
+ y: 0,
153
+ blur: 2,
154
+ spread: 0
155
+ }, {
156
+ opacity: 0.12,
157
+ x: 0,
158
+ y: 4,
159
+ blur: 13,
160
+ spread: 0
161
+ }, {
162
+ opacity: 0.07,
163
+ x: 0,
164
+ y: 8,
165
+ blur: 17,
166
+ spread: 0
167
+ }],
168
+ dark: [{
169
+ opacity: 1,
170
+ x: 0,
171
+ y: 0,
172
+ blur: 0,
173
+ spread: 1
174
+ }, {
175
+ opacity: 0.58,
176
+ x: 0,
177
+ y: 4,
178
+ blur: 13,
179
+ spread: 0
180
+ }, {
181
+ opacity: 0.3,
182
+ x: 0,
183
+ y: 8,
184
+ blur: 17,
185
+ spread: 0
186
+ }]
187
+ },
188
+ xl: {
189
+ light: [{
190
+ opacity: 0.16,
191
+ x: 0,
192
+ y: 0,
193
+ blur: 2,
194
+ spread: 0
195
+ }, {
196
+ opacity: 0.14,
197
+ x: 0,
198
+ y: 5,
199
+ blur: 16,
200
+ spread: 0
201
+ }, {
202
+ opacity: 0.08,
203
+ x: 0,
204
+ y: 10,
205
+ blur: 20,
206
+ spread: 0
207
+ }],
208
+ dark: [{
209
+ opacity: 1,
210
+ x: 0,
211
+ y: 0,
212
+ blur: 0,
213
+ spread: 1
214
+ }, {
215
+ opacity: 0.64,
216
+ x: 0,
217
+ y: 5,
218
+ blur: 16,
219
+ spread: 0
220
+ }, {
221
+ opacity: 0.32,
222
+ x: 0,
223
+ y: 10,
224
+ blur: 20,
225
+ spread: 0
226
+ }]
227
+ },
228
+ xxl: {
229
+ light: [{
230
+ opacity: 0.16,
231
+ x: 0,
232
+ y: 0,
233
+ blur: 2,
234
+ spread: 0
235
+ }, {
236
+ opacity: 0.16,
237
+ x: 0,
238
+ y: 6,
239
+ blur: 19,
240
+ spread: 0
241
+ }, {
242
+ opacity: 0.09,
243
+ x: 0,
244
+ y: 12,
245
+ blur: 23,
246
+ spread: 0
247
+ }],
248
+ dark: [{
249
+ opacity: 1,
250
+ x: 0,
251
+ y: 0,
252
+ blur: 0,
253
+ spread: 1
254
+ }, {
255
+ opacity: 0.7,
256
+ x: 0,
257
+ y: 6,
258
+ blur: 19,
259
+ spread: 0
260
+ }, {
261
+ opacity: 0.34,
262
+ x: 0,
263
+ y: 12,
264
+ blur: 23,
265
+ spread: 0
266
+ }]
267
+ },
268
+ flat: {
269
+ light: [],
270
+ dark: []
271
+ }
272
+ };
273
+ var shadowColorsLight = {
274
+ colors: {
275
+ base: _semantic_colors.SEMANTIC_COLORS.shade120
276
+ }
277
+ };
278
+ var shadowsLight = _objectSpread(_objectSpread({}, shadowColorsLight), {}, {
279
+ xs: {
280
+ down: (0, _euiThemeCommon.formatMultipleBoxShadow)(shadowPrimitives.xs.light, {
281
+ color: shadowColorsLight.colors.base
282
+ }),
283
+ up: (0, _euiThemeCommon.formatMultipleBoxShadow)(shadowPrimitives.xs.light, {
284
+ direction: 'up',
285
+ color: shadowColorsLight.colors.base
286
+ })
287
+ },
288
+ s: {
289
+ down: (0, _euiThemeCommon.formatMultipleBoxShadow)(shadowPrimitives.s.light, {
290
+ color: shadowColorsLight.colors.base
291
+ }),
292
+ up: (0, _euiThemeCommon.formatMultipleBoxShadow)(shadowPrimitives.s.light, {
293
+ direction: 'up',
294
+ color: shadowColorsLight.colors.base
295
+ })
296
+ },
297
+ m: {
298
+ down: (0, _euiThemeCommon.formatMultipleBoxShadow)(shadowPrimitives.m.light, {
299
+ color: shadowColorsLight.colors.base
300
+ }),
301
+ up: (0, _euiThemeCommon.formatMultipleBoxShadow)(shadowPrimitives.m.light, {
302
+ direction: 'up',
303
+ color: shadowColorsLight.colors.base
304
+ })
305
+ },
306
+ l: {
307
+ down: (0, _euiThemeCommon.formatMultipleBoxShadow)(shadowPrimitives.l.light, {
308
+ color: shadowColorsLight.colors.base
309
+ }),
310
+ up: (0, _euiThemeCommon.formatMultipleBoxShadow)(shadowPrimitives.l.light, {
311
+ direction: 'up',
312
+ color: shadowColorsLight.colors.base
313
+ })
314
+ },
315
+ xl: {
316
+ down: (0, _euiThemeCommon.formatMultipleBoxShadow)(shadowPrimitives.xl.light, {
317
+ color: shadowColorsLight.colors.base
318
+ }),
319
+ up: (0, _euiThemeCommon.formatMultipleBoxShadow)(shadowPrimitives.xl.light, {
320
+ direction: 'up',
321
+ color: shadowColorsLight.colors.base
322
+ })
323
+ },
324
+ hover: {
325
+ base: {
326
+ down: (0, _euiThemeCommon.formatMultipleBoxShadow)(shadowPrimitives.s.light, {
327
+ color: shadowColorsLight.colors.base
328
+ }),
329
+ up: (0, _euiThemeCommon.formatMultipleBoxShadow)(shadowPrimitives.s.light, {
330
+ direction: 'up',
331
+ color: shadowColorsLight.colors.base
332
+ })
333
+ },
334
+ xl: {
335
+ down: (0, _euiThemeCommon.formatMultipleBoxShadow)(shadowPrimitives.xxl.light, {
336
+ color: shadowColorsLight.colors.base
337
+ }),
338
+ up: (0, _euiThemeCommon.formatMultipleBoxShadow)(shadowPrimitives.xxl.light, {
339
+ direction: 'up',
340
+ color: shadowColorsLight.colors.base
341
+ })
342
+ }
343
+ },
344
+ flat: {
345
+ down: (0, _euiThemeCommon.formatMultipleBoxShadow)(shadowPrimitives.xs.light, {
346
+ color: shadowColorsLight.colors.base
347
+ }),
348
+ up: (0, _euiThemeCommon.formatMultipleBoxShadow)(shadowPrimitives.xs.light, {
349
+ direction: 'up',
350
+ color: shadowColorsLight.colors.base
351
+ })
352
+ }
353
+ });
354
+ var shadowColorsDark = {
355
+ colors: {
356
+ base: _primitive_colors.PRIMITIVE_COLORS.black
357
+ }
358
+ };
359
+ var shadowsDark = _objectSpread(_objectSpread({}, shadowColorsDark), {}, {
360
+ xs: {
361
+ down: (0, _euiThemeCommon.formatMultipleBoxShadow)(shadowPrimitives.xs.dark.slice(1), {
362
+ color: shadowColorsDark.colors.base
363
+ }),
364
+ up: (0, _euiThemeCommon.formatMultipleBoxShadow)(shadowPrimitives.xs.dark.slice(1), {
365
+ direction: 'up',
366
+ color: shadowColorsDark.colors.base
367
+ })
368
+ },
369
+ s: {
370
+ down: (0, _euiThemeCommon.formatMultipleBoxShadow)(shadowPrimitives.s.dark.slice(1), {
371
+ color: shadowColorsDark.colors.base
372
+ }),
373
+ up: (0, _euiThemeCommon.formatMultipleBoxShadow)(shadowPrimitives.s.dark.slice(1), {
374
+ direction: 'up',
375
+ color: shadowColorsDark.colors.base
376
+ })
377
+ },
378
+ m: {
379
+ down: (0, _euiThemeCommon.formatMultipleBoxShadow)(shadowPrimitives.m.dark.slice(1), {
380
+ color: shadowColorsDark.colors.base
381
+ }),
382
+ up: (0, _euiThemeCommon.formatMultipleBoxShadow)(shadowPrimitives.m.dark.slice(1), {
383
+ direction: 'up',
384
+ color: shadowColorsDark.colors.base
385
+ })
386
+ },
387
+ l: {
388
+ down: (0, _euiThemeCommon.formatMultipleBoxShadow)(shadowPrimitives.l.dark.slice(1), {
389
+ color: shadowColorsDark.colors.base
390
+ }),
391
+ up: (0, _euiThemeCommon.formatMultipleBoxShadow)(shadowPrimitives.l.dark.slice(1), {
392
+ direction: 'up',
393
+ color: shadowColorsDark.colors.base
394
+ })
395
+ },
396
+ xl: {
397
+ down: (0, _euiThemeCommon.formatMultipleBoxShadow)(shadowPrimitives.xl.dark.slice(1), {
398
+ color: shadowColorsDark.colors.base
399
+ }),
400
+ up: (0, _euiThemeCommon.formatMultipleBoxShadow)(shadowPrimitives.xl.dark.slice(1), {
401
+ direction: 'up',
402
+ color: shadowColorsDark.colors.base
403
+ })
404
+ },
405
+ hover: {
406
+ base: {
407
+ down: (0, _euiThemeCommon.formatMultipleBoxShadow)(shadowPrimitives.s.dark.slice(1), {
408
+ color: shadowColorsDark.colors.base
409
+ }),
410
+ up: (0, _euiThemeCommon.formatMultipleBoxShadow)(shadowPrimitives.s.dark.slice(1), {
411
+ direction: 'up',
412
+ color: shadowColorsDark.colors.base
413
+ })
414
+ },
415
+ xl: {
416
+ down: (0, _euiThemeCommon.formatMultipleBoxShadow)(shadowPrimitives.xxl.dark.slice(1), {
417
+ color: shadowColorsDark.colors.base
418
+ }),
419
+ up: (0, _euiThemeCommon.formatMultipleBoxShadow)(shadowPrimitives.xxl.dark.slice(1), {
420
+ direction: 'up',
421
+ color: shadowColorsDark.colors.base
422
+ })
423
+ }
424
+ },
425
+ flat: {
426
+ down: (0, _euiThemeCommon.formatMultipleBoxShadow)(shadowPrimitives.xs.dark.slice(1), {
427
+ color: shadowColorsDark.colors.base
428
+ }),
429
+ up: (0, _euiThemeCommon.formatMultipleBoxShadow)(shadowPrimitives.xs.dark.slice(1), {
430
+ direction: 'up',
431
+ color: shadowColorsDark.colors.base
432
+ })
433
+ }
434
+ });
435
+ var shadows = exports.shadows = {
436
+ LIGHT: shadowsLight,
437
+ DARK: shadowsDark
438
+ };
package/lib/esm/index.js CHANGED
@@ -13,6 +13,7 @@ import { base, size } from './variables/_size';
13
13
  import { border } from './variables/_borders';
14
14
  import { levels } from './variables/_levels';
15
15
  import { font } from './variables/_typography';
16
+ import { shadows } from './variables/_shadows';
16
17
  import { focus } from './variables/_states';
17
18
  import { components } from './variables/_components';
18
19
  import { overrides } from './variables/_overrides';
@@ -29,6 +30,7 @@ export const euiThemeBorealis = {
29
30
  animation,
30
31
  breakpoint,
31
32
  levels,
33
+ shadows,
32
34
  focus,
33
35
  components,
34
36
  flags: {
@@ -36,6 +38,7 @@ export const euiThemeBorealis = {
36
38
  hasVisColorAdjustment: false,
37
39
  buttonVariant: 'refresh',
38
40
  formVariant: 'refresh',
41
+ shadowVariant: 'refresh',
39
42
  },
40
43
  overrides,
41
44
  };
package/lib/esm/variables/_shadows.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import { type _EuiThemeShadows, type _EuiThemeShadowPrimitives } from '@elastic/eui-theme-common';
2
+ /**
3
+ * This structure holds "primitives" (or actual design tokens as they
4
+ * would be stored in a design token repository).
5
+ * Not exposing them in the theme object is intentional.
6
+ */
7
+ export declare const shadowPrimitives: _EuiThemeShadowPrimitives;
8
+ export declare const shadows: _EuiThemeShadows;
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": "3.6.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": "5.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'
package/src/mixins/_shadow.scss ADDED
@@ -0,0 +1,131 @@
1
+ @function shadowOpacity($opacity) {
2
+ @if (lightness($euiColorTextParagraph) < 50) {
3
+ @return $opacity * 1;
4
+ } @else {
5
+ @return $opacity * 2.5;
6
+ }
7
+ }
8
+
9
+ @function _colorMode() {
10
+ @if (lightness($euiColorTextParagraph) < 50) {
11
+ @return 'light';
12
+ } @else {
13
+ @return 'dark';
14
+ }
15
+ }
16
+
17
+ // "xs"
18
+ @mixin euiSlightShadow($color: $euiShadowColor) {
19
+ @if _colorMode() == 'light' {
20
+ box-shadow:
21
+ 0px 0px 2px 0px hsl(from $euiShadowColor h s l / 0.16),
22
+ 0px 1px 4px 0px hsl(from $euiShadowColor h s l / 0.06),
23
+ 0px 2px 8px 0px hsl(from $euiShadowColor h s l / 0.04);
24
+ } @else {
25
+ box-shadow:
26
+ 0px 1px 4px 0px hsl(from $euiShadowColor h s l / 0.4),
27
+ 0px 2px 8px 0px hsl(from $euiShadowColor h s l/ 0.24);
28
+ }
29
+ }
30
+
31
+ @mixin euiBottomShadowSmall($color: $euiShadowColor) {
32
+ @if _colorMode == 'light' {
33
+ box-shadow:
34
+ 0px 0px 2px 0px hsl(from $euiShadowColor h s l / 0.16),
35
+ 0px 2px 7px 0px hsl(from $euiShadowColor h s l / 0.08),
36
+ 0px 4px 11px 0px hsl(from $euiShadowColor h s l / 0.05);
37
+ } @else {
38
+ box-shadow:
39
+ 0px 2px 7px 0px hsl(from $euiShadowColor h s l / 0.46),
40
+ 0px 4px 11px 0px hsl(from $euiShadowColor h s l / 0.26);
41
+ }
42
+ }
43
+
44
+ @mixin euiBottomShadowMedium($color: $euiShadowColor) {
45
+ @if _colorMode == 'light' {
46
+ box-shadow:
47
+ 0px 0px 2px 0px hsl(from $euiShadowColor h s l / 0.16),
48
+ 0px 3px 10px 0px hsl(from $euiShadowColor h s l / 0.1),
49
+ 0px 6px 14px 0px hsl(from $euiShadowColor h s l / 0.06);
50
+ } @else {
51
+ box-shadow:
52
+ 0px 3px 10px 0px hsl(from $euiShadowColor h s l / 0.52),
53
+ 0px 6px 14px 0px hsl(from $euiShadowColor h s l / 0.28);
54
+ }
55
+ }
56
+
57
+ @mixin euiBottomShadowFlat($color: $euiShadowColor) {
58
+ @include euiSlightShadow($color);
59
+ }
60
+
61
+ @mixin euiBottomShadow($color: $euiShadowColor) {
62
+ @include euiBottomShadowMedium($color);
63
+ }
64
+
65
+ @mixin euiBottomShadowLarge(
66
+ $color: $euiShadowColor,
67
+ $opacity: 0,
68
+ $reverse: false
69
+ ) {
70
+ @if ($reverse) {
71
+ @if _colorMode == 'light' {
72
+ box-shadow:
73
+ 0px 0px 2px 0px hsl(from $euiShadowColor h s l / 0.16),
74
+ 0px -4px 13px 0px hsl(from $euiShadowColor h s l / 0.12),
75
+ 0px -8px 17px 0px hsl(from $euiShadowColor h s l / 0.07);
76
+ } @else {
77
+ box-shadow:
78
+ 0px -4px 13px 0px hsl(from $euiShadowColor h s l / 0.58),
79
+ 0px -8px 17px 0px hsl(from $euiShadowColor h s l / 0.3);
80
+ }
81
+ } @else {
82
+ @if _colorMode == 'light' {
83
+ box-shadow:
84
+ 0px 0px 2px 0px hsl(from $euiShadowColor h s l / 0.16),
85
+ 0px 4px 13px 0px hsl(from $euiShadowColor h s l / 0.12),
86
+ 0px 8px 17px 0px hsl(from $euiShadowColor h s l / 0.07);
87
+ } @else {
88
+ box-shadow:
89
+ 0px 4px 13px 0px hsl(from $euiShadowColor h s l / 0.58),
90
+ 0px 8px 17px 0px hsl(from $euiShadowColor h s l / 0.3);
91
+ }
92
+ }
93
+ }
94
+
95
+ // Not part of the Borealis shadow spec, used in scroll utilities
96
+
97
+ // stylelint-disable color-named
98
+ @mixin euiOverflowShadow($direction: 'y', $side: 'both') {
99
+ $hideHeight: $euiScrollBarCornerThin * 1.25;
100
+ $gradient: null;
101
+ $gradientStart:
102
+ transparentize(red, .9) 0%,
103
+ transparentize(red, 0) $hideHeight;
104
+ $gradientEnd:
105
+ transparentize(red, 0) calc(100% - #{$hideHeight}),
106
+ transparentize(red, .9) 100%;
107
+ @if ($side == 'both' or $side == 'start' or $side == 'end') {
108
+ @if ($side == 'both') {
109
+ $gradient: $gradientStart, $gradientEnd;
110
+ } @else if ($side == 'start') {
111
+ $gradient: $gradientStart;
112
+ } @else {
113
+ $gradient: $gradientEnd;
114
+ }
115
+ } @else {
116
+ @warn "euiOverflowShadow() expects side to be 'both', 'start' or 'end' but got '#{$side}'";
117
+ }
118
+
119
+ @if ($direction == 'y') {
120
+ mask-image: linear-gradient(to bottom, #{$gradient});
121
+ } @else if ($direction == 'x') {
122
+ mask-image: linear-gradient(to right, #{$gradient});
123
+ } @else {
124
+ @warn "euiOverflowShadow() expects direction to be 'y' or 'x' but got '#{$direction}'";
125
+ }
126
+
127
+ // Chrome+Edge has a very bizarre edge case bug where `mask-image` stops working
128
+ // This workaround forces a stacking context on the scrolling container, which
129
+ // hopefully addresses the bug. @see https://github.com/elastic/eui/pull/7855
130
+ transform: translateZ(0);
131
+ }
package/src/theme_dark.scss CHANGED
@@ -2,8 +2,10 @@
2
2
  // color mode specific variables
3
3
  @import './variables/colors/colors_vis_dark';
4
4
  @import './variables/colors/colors_dark';
5
+ @import './variables/shadows_dark';
5
6
 
6
7
 
7
8
  // Global styling
8
9
  @import './variables/index';
10
+ @import 'mixins/index';
9
11
  @import 'node_modules/@elastic/eui-theme-common/src/global_styling/index';
package/src/theme_light.scss CHANGED
@@ -1,8 +1,10 @@
1
1
  // color mode specific variables
2
2
  @import './variables/colors/colors_vis_light';
3
3
  @import './variables/colors/colors_light';
4
+ @import './variables/shadows_light';
4
5
 
5
6
 
6
7
  // Global styling
7
8
  @import './variables/index';
9
+ @import 'mixins/index';
8
10
  @import 'node_modules/@elastic/eui-theme-common/src/global_styling/index';
package/src/variables/_shadows_dark.scss ADDED
@@ -0,0 +1,20 @@
1
+ // Shadows
2
+ $euiShadowColor: $euiColorInk !default;
3
+
4
+ $euiShadowDownXS: 0px 1px 4px 0px hsla(from $euiShadowColor h s l / 0.4), 0px 2px 8px 0px hsla(from $euiShadowColor h s l / 0.24);
5
+ $euiShadowDownS: 0px 2px 7px 0px hsla(from $euiShadowColor h s l / 0.46), 0px 4px 11px 0px hsla(from $euiShadowColor h s l / 0.26);
6
+ $euiShadowDownM: 0px 3px 10px 0px hsla(from $euiShadowColor h s l / 0.52), 0px 6px 14px 0px hsla(from $euiShadowColor h s l / 0.28);
7
+ $euiShadowDownL: 0px 4px 13px 0px hsla(from $euiShadowColor h s l / 0.58), 0px 8px 17px 0px hsla(from $euiShadowColor h s l / 0.3);
8
+ $euiShadowDownXL: 0px 5px 16px 0px hsla(from $euiShadowColor h s l / 0.64), 0px 10px 20px 0px hsla(from $euiShadowColor h s l / 0.32);
9
+
10
+ $euiShadowUpXS: 0px 1px 4px 0px hsla(from $euiShadowColor h s l / 0.4), 0px -2px 8px 0px hsla(from $euiShadowColor h s l / 0.24);
11
+ $euiShadowUpS: 0px 2px 7px 0px hsla(from $euiShadowColor h s l / 0.46), 0px -4px 11px 0px hsla(from $euiShadowColor h s l / 0.26);
12
+ $euiShadowUpM: 0px 3px 10px 0px hsla(from $euiShadowColor h s l / 0.52), 0px -6px 14px 0px hsla(from $euiShadowColor h s l / 0.28);
13
+ $euiShadowUpL: 0px 4px 13px 0px hsla(from $euiShadowColor h s l / 0.58), 0px -8px 17px 0px hsla(from $euiShadowColor h s l / 0.3);
14
+ $euiShadowUpXL: 0px 5px 16px 0px hsla(from $euiShadowColor h s l / 0.64), 0px -10px 20px 0px hsla(from $euiShadowColor h s l / 0.32);
15
+
16
+ $euiShadowHoverDown: 0px 2px 7px 0px hsla(from $euiShadowColor h s l / 0.46), 0px 4px 11px 0px hsla(from $euiShadowColor h s l / 0.26);
17
+ $euiShadowHoverXLDown: 0px 6px 19px 0px hsla(from $euiShadowColor h s l / 0.7), 0px 12px 23px 0px hsla(from $euiShadowColor h s l / 0.34);
18
+
19
+ $euiShadowHoverUp: 0px -2px 7px 0px hsla(from $euiShadowColor h s l / 0.46), 0px -4px 11px 0px hsla(from $euiShadowColor h s l / 0.26);
20
+ $euiShadowHoverXLUp: 0px -6px 19px 0px hsla(from $euiShadowColor h s l / 0.7), 0px -12px 23px 0px hsla(from $euiShadowColor h s l / 0.34);
package/src/variables/_shadows_light.scss ADDED
@@ -0,0 +1,20 @@
1
+ // Shadows
2
+ $euiShadowColor: $euiColorShade120 !default;
3
+
4
+ $euiShadowDownXS: 0px 0px 2px 0px hsl(from $euiShadowColor h s l / 0.16), 0px 1px 4px 0px hsl(from $euiShadowColor h s l / 0.06), 0px 2px 8px 0px hsl(from $euiShadowColor h s l / 0.04);
5
+ $euiShadowDownS: 0px 0px 2px 0px hsl(from $euiShadowColor h s l / 0.16), 0px 2px 7px 0px hsl(from $euiShadowColor h s l / 0.08), 0px 4px 11px 0px hsl(from $euiShadowColor h s l / 0.05);
6
+ $euiShadowDownM: 0px 0px 2px 0px hsl(from $euiShadowColor h s l / 0.16), 0px 3px 10px 0px hsl(from $euiShadowColor h s l / 0.1), 0px 6px 14px 0px hsl(from $euiShadowColor h s l / 0.06);
7
+ $euiShadowDownL: 0px 0px 2px 0px hsl(from $euiShadowColor h s l / 0.16), 0px 4px 13px 0px hsl(from $euiShadowColor h s l / 0.12), 0px 8px 17px 0px hsl(from $euiShadowColor h s l / 0.07);
8
+ $euiShadowDownXL: 0px 0px 2px 0px hsl(from $euiShadowColor h s l / 0.16), 0px 5px 16px 0px hsl(from $euiShadowColor h s l / 0.14), 0px 10px 20px 0px hsl(from $euiShadowColor h s l / 0.08);
9
+
10
+ $euiShadowUpXS: 0px 0px 2px 0px hsl(from $euiShadowColor h s l / 0.16), 0px -1px 4px 0px hsl(from $euiShadowColor h s l / 0.06), 0px -2px 8px 0px hsl(from $euiShadowColor h s l / 0.04);
11
+ $euiShadowUpS: 0px 0px 2px 0px hsl(from $euiShadowColor h s l / 0.16), 0px -2px 7px 0px hsl(from $euiShadowColor h s l / 0.08), 0px -4px 11px 0px hsl(from $euiShadowColor h s l / 0.05);
12
+ $euiShadowUpM: 0px 0px 2px 0px hsl(from $euiShadowColor h s l / 0.16), 0px -3px 10px 0px hsl(from $euiShadowColor h s l / 0.1), 0px -6px 14px 0px hsl(from $euiShadowColor h s l / 0.06);
13
+ $euiShadowUpL: 0px 0px 2px 0px hsl(from $euiShadowColor h s l / 0.16), 0px -4px 13px 0px hsl(from $euiShadowColor h s l / 0.12), 0px -8px 17px 0px hsl(from $euiShadowColor h s l / 0.07);
14
+ $euiShadowUpXL: 0px 0px 2px 0px hsl(from $euiShadowColor h s l / 0.16), 0px -5px 16px 0px hsl(from $euiShadowColor h s l / 0.14), 0px -10px 20px 0px hsl(from $euiShadowColor h s l / 0.08);
15
+
16
+ $euiShadowHoverDown: 0px 0px 2px 0px hsla(from $euiShadowColor h s l / 0.16), 0px 2px 7px 0px hsla(from $euiShadowColor h s l / 0.08), 0px 4px 11px 0px hsla(from $euiShadowColor h s l / 0.05);
17
+ $euiShadowHoverXLDown: 0px 0px 2px 0px hsl(from $euiShadowColor h s l/ 0.16), 0px 6px 19px 0px hsl(from $euiShadowColor h s l / 0.16), 0px 12px 23px 0px hsl(from $euiShadowColor h s l / 0.09);
18
+
19
+ $euiShadowHoverUp: 0px 0px 2px 0px hsla(from $euiShadowColor h s l / 0.16), 0px -2px 7px 0px hsla(from $euiShadowColor h s l / 0.08), 0px -4px 11px 0px hsla(from $euiShadowColor h s l / 0.05);
20
+ $euiShadowHoverXLUp: 0px 0px 2px 0px hsl(from $euiShadowColor h s l/ 0.16), 0px -6px 19px 0px hsl(from $euiShadowColor h s l / 0.16), 0px -12px 23px 0px hsl(from $euiShadowColor h s l / 0.09);