@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/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);