ESLPopup: rework styles to use CSS variables

site/src/navigation/header/header.less

@@ -85,11 +85,8 @@
   }
 
   &-share-popup.esl-popup {
-    &,
-    & > .esl-popup-arrow {
-      background: @landing-bg-color;
-      border-color: gray;
-    }
+    --esl-popup-background-color: @landing-bg-color;
+    --esl-popup-border-color: gray;
     .esl-share-list {
       margin: 0.75rem;
       gap: 0.25rem;

src/modules/esl-popup/README.md

@@ -41,3 +41,15 @@ ESLPopup extends [ESLToggleable](../esl-toggleable/README.md) you can find other
 ### Readonly Attributes
 
 - `placed-at` (string) - popup updated position relative to the trigger. In other words, this is the real position of the popup relative to the trigger after the position update in the case when 'fit' behavior is enabled
+
+### Styles
+
+ESLPopup is a non-trivial component that calculates its position depending on user settings. So for styling, it would be advisable to use the basic styles that we provide with our library. You can easily override most of the rules from the base styles. Some properties are calculated, so you can't override them directly, but it is possible to set the value through CSS variables. For now, you can use the following variables:
+
+- `--esl-popup-arrow-size` - arrow size (default '20px')
+- `--esl-popup-background-color` - background color of the popup ('#fff' by default)
+- `--esl-popup-border-color` - popup border color (default value is '#dbdbdb')
+- `--esl-popup-border-width` - border width of the popup ('1px' by default)
+- `--esl-popup-z-index` - z-index of the popup (default is '999')
+
+Or if you are using the LESS preprocessor, you can optionally use mixins instead of CSS variables. However, we would recommend using the general approach with CSS variables.

src/modules/esl-popup/core.less

@@ -1,7 +1 @@
-@import 'core.mixin.less';
-
-esl-popup:not(.esl-popup) {
-  display: none;
-}
-
-.esl-popup-init();
+@import './core/esl-popup.less';

src/modules/esl-popup/core.mixin.less

@@ -1 +1 @@
-@import './core/esl-popup.less';
+@import './core/esl-popup.mixin.less';

src/modules/esl-popup/core/esl-popup.less

@@ -1,95 +1,84 @@
-.esl-popup-arrow-init(@arrowClassName: esl-popup-arrow,
-                      @popupArrowSize: 20px,
-                      @popupBackgroundColor: #FFF,
-                      @popupBorderColor: #DBDBDB,
-                      @popupBorderWidth: 1px) {
-  @popupArrowHalf: (@popupArrowSize / 2);
-  @popupArrowShift: (
-    @popupArrowSize * 0.2071 - @popupBorderWidth
-  ); // 0.2071 = (sqrt(2) - 1) / 2  (Don't ask why, it's an axiom)
+esl-popup:not(.esl-popup) {
+  display: none;
+}
+
+.esl-popup {
+  --_border-width: var(--esl-popup-border-width, 1px);
+  --_border: var(--_border-width) solid var(--esl-popup-border-color, #dbdbdb);
+  position: absolute;
+  left: 0;
+  top: 0;
+  display: block;
+  opacity: 0;
+  visibility: hidden;
+  transition: visibility 0.5s 0.2s;
+  box-sizing: border-box;
+  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
+  border: var(--_border);
+  background: var(--esl-popup-background-color, #fff);
+  cursor: default;
+  will-change: auto;
+
+  &[open] {
+    z-index: var(--esl-popup-z-index, 999);
+    opacity: 1;
+    visibility: visible;
+    transition:
+      opacity 0.15s,
+      transform 0.2s;
+  }
 
-  .@{arrowClassName} {
+  &:not([open]) {
+    display: none;
+  }
+
+  .esl-popup-arrow {
+    --_size: var(--esl-popup-arrow-size, 20px);
+    --_half: calc(var(--_size) / 2);
+    --_shift: calc(0.2071 * var(--_size) - var(--_border-width));
+    // 0.2071 = (sqrt(2) - 1) / 2
     position: absolute;
-    top: (-@popupArrowHalf - @popupBorderWidth);
+    top: calc(-1 * var(--_half) - var(--_border-width));
     bottom: 100%;
     z-index: -1;
     transform: rotate(45deg);
-    width: @popupArrowSize;
-    height: @popupArrowSize;
-    margin-left: @popupArrowShift;
-    border-left: @popupBorderWidth solid @popupBorderColor;
-    border-top: @popupBorderWidth solid @popupBorderColor;
-    background: @popupBackgroundColor;
+    width: var(--_size);
+    height: var(--_size);
+    margin-left: var(--_shift);
+    border-left: var(--_border);
+    border-top: var(--_border);
+    background: inherit;
   }
 
   &[placed-at='top'] {
-    .@{arrowClassName} {
+    .esl-popup-arrow {
       top: auto;
-      bottom: (-@popupArrowHalf - @popupBorderWidth);
+      bottom: calc(-1 * var(--_half) - var(--_border-width));
       transform: rotate(225deg);
     }
   }
 
   &[placed-at='left'] {
-    .@{arrowClassName} {
-      right: (-@popupArrowHalf - @popupBorderWidth);
+    .esl-popup-arrow {
+      right: calc(-1 * var(--_half) - var(--_border-width));
       left: auto;
       transform: rotate(135deg);
-      margin-top: @popupArrowShift;
+      margin-top: var(--_shift);
     }
   }
 
   &[placed-at='right'] {
-    .@{arrowClassName} {
-      left: (-@popupArrowHalf - @popupBorderWidth - @popupArrowShift);
+    .esl-popup-arrow {
+      left: calc(-1 * var(--_half) - var(--_border-width) - var(--_shift));
       right: auto;
       transform: rotate(315deg);
-      margin-top: @popupArrowShift;
+      margin-top: var(--_shift);
     }
   }
 
   &.disable-arrow {
-    .@{arrowClassName} {
-      display: none;
-    }
-  }
-}
-
-.esl-popup-init(@className: esl-popup,
-                @arrowClassName: esl-popup-arrow,
-                @arrowSize: 20px,
-                @backgroundColor: #FFF,
-                @borderColor: #DBDBDB,
-                @borderWidth: 1px,
-                @zIndex: 999) {
-  .@{className} {
-    position: absolute;
-    left: 0;
-    top: 0;
-    display: block;
-    opacity: 0;
-    visibility: hidden;
-    transition: visibility 0.5s 0.2s;
-    box-sizing: border-box;
-    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
-    border: @borderWidth solid @borderColor;
-    background: @backgroundColor;
-    cursor: default;
-    will-change: auto;
-
-    &[open] {
-      z-index: @zIndex;
-      opacity: 1;
-      visibility: visible;
-      transition:
-        opacity 0.15s,
-        transform 0.2s;
-    }
-
-    &:not([open]) {
+    .esl-popup-arrow {
       display: none;
     }
-
-    .esl-popup-arrow-init(@arrowClassName, @arrowSize, @backgroundColor, @borderColor, @borderWidth);
   }
 }

src/modules/esl-popup/core/esl-popup.mixin.less

@@ -0,0 +1,95 @@
+.esl-popup-arrow-init(@arrowClassName: esl-popup-arrow,
+                      @popupArrowSize: 20px,
+                      @popupBackgroundColor: #FFF,
+                      @popupBorderColor: #DBDBDB,
+                      @popupBorderWidth: 1px) {
+  @popupArrowHalf: (@popupArrowSize / 2);
+  @popupArrowShift: (
+    @popupArrowSize * 0.2071 - @popupBorderWidth
+  ); // 0.2071 = (sqrt(2) - 1) / 2  (Don't ask why, it's an axiom)
+
+  .@{arrowClassName} {
+    position: absolute;
+    top: (-@popupArrowHalf - @popupBorderWidth);
+    bottom: 100%;
+    z-index: -1;
+    transform: rotate(45deg);
+    width: @popupArrowSize;
+    height: @popupArrowSize;
+    margin-left: @popupArrowShift;
+    border-left: @popupBorderWidth solid @popupBorderColor;
+    border-top: @popupBorderWidth solid @popupBorderColor;
+    background: @popupBackgroundColor;
+  }
+
+  &[placed-at='top'] {
+    .@{arrowClassName} {
+      top: auto;
+      bottom: (-@popupArrowHalf - @popupBorderWidth);
+      transform: rotate(225deg);
+    }
+  }
+
+  &[placed-at='left'] {
+    .@{arrowClassName} {
+      right: (-@popupArrowHalf - @popupBorderWidth);
+      left: auto;
+      transform: rotate(135deg);
+      margin-top: @popupArrowShift;
+    }
+  }
+
+  &[placed-at='right'] {
+    .@{arrowClassName} {
+      left: (-@popupArrowHalf - @popupBorderWidth - @popupArrowShift);
+      right: auto;
+      transform: rotate(315deg);
+      margin-top: @popupArrowShift;
+    }
+  }
+
+  &.disable-arrow {
+    .@{arrowClassName} {
+      display: none;
+    }
+  }
+}
+
+.esl-popup-init(@className: esl-popup,
+                @arrowClassName: esl-popup-arrow,
+                @arrowSize: 20px,
+                @backgroundColor: #FFF,
+                @borderColor: #DBDBDB,
+                @borderWidth: 1px,
+                @zIndex: 999) {
+  .@{className} {
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: block;
+    opacity: 0;
+    visibility: hidden;
+    transition: visibility 0.5s 0.2s;
+    box-sizing: border-box;
+    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
+    border: @borderWidth solid @borderColor;
+    background: @backgroundColor;
+    cursor: default;
+    will-change: auto;
+
+    &[open] {
+      z-index: @zIndex;
+      opacity: 1;
+      visibility: visible;
+      transition:
+        opacity 0.15s,
+        transform 0.2s;
+    }
+
+    &:not([open]) {
+      display: none;
+    }
+
+    .esl-popup-arrow-init(@arrowClassName, @arrowSize, @backgroundColor, @borderColor, @borderWidth);
+  }
+}