Feature/web/sticky tool

style/web/components/sticky-tool/_index.less

@@ -14,6 +14,12 @@
   border: @sticky-tool-border;
   box-shadow: @sticky-tool-shadow;
 
+  &-popup-content {
+    box-shadow: @sticky-tool-popup-shadow;
+    font-size: @sticky-tool-popup-font-size;
+    color: @sticky-tool-popup-color;
+  }
+
   .sticky-item-basic();
 
   &--square {

style/web/components/sticky-tool/_mixin.less

@@ -5,6 +5,7 @@
     margin: @sticky-item-margin;
     text-align: center;
     font-size: @sticky-item-font-size;
+    color: @sticky-item-text-color;
 
     &:hover {
       cursor: pointer;
@@ -19,6 +20,7 @@
         width: @sticky-item-icon-size;
         height: @sticky-item-icon-size;
         margin: @sticky-item-icon-margin-normal;
+        color: @sticky-item-icon-color;
       }
     }
 
@@ -30,6 +32,7 @@
         width: @sticky-item-icon-size;
         height: @sticky-item-icon-size;
         margin: @sticky-item-icon-margin-compact;
+        color: @sticky-item-icon-color;
       }
     }
 

style/web/components/sticky-tool/_var.less

@@ -15,6 +15,9 @@
 @sticky-tool-background: @bg-color-container;
 @sticky-tool-border: @component-border;
 @sticky-tool-shadow:  @shadow-3;
+@sticky-tool-popup-shadow: @shadow-3;
+@sticky-tool-popup-font-size: @font-size-s;
+@sticky-tool-popup-color: @text-color-secondary;
 
 // sticky-tool shape=square
 @sticky-tool-border-radius-square: @border-radius-medium;
@@ -30,7 +33,10 @@
 @sticky-item-label-height: @comp-size-xxs;
 @sticky-item-label-margin-top: @comp-margin-xxs;
 @sticky-item-font-size: @font-size-s;
+@sticky-item-text-color: @text-color-secondary;
 @sticky-item-icon-size: @icon-l;
+@sticky-item-icon-color: @text-color-primary;
+
 // sticky-tool type=normal
 @sticky-item-size-normal: @comp-size-xxxl;
 @sticky-item-icon-margin-normal: @comp-margin-s @comp-margin-l 0 @comp-margin-l;