[develop | DONE | CHANGED]: Updated color of selected search filter labels (not purple, but portal color).

1. newSearchPage.component.html: Replaced class "uk-label-search-filter" with "uk-label-secondary" on selected search filter labels.
2. color.less: Removed color variable @search-filter-color: #B41FD0;
3. label.less: Removed custom color variables and class "uk-label-search-filter" | Updated class "uk-label-secondary".
4. explore-custom.less: Override @uk-label-secondary: @explore-color;

less/base.less

@@ -37,10 +37,6 @@
 @inverse-base-link-hover-color: @global-inverse-color;
 
 .hook-base-misc() {
-  body {
-    overflow-y: scroll;
-  }
-
 
   @media (min-width: @breakpoint-medium) {
 

less/icon.less

@@ -3,6 +3,7 @@
 @icon-button-xsmall-size: 24px;
 @icon-bg-background: @global-background;
 @icon-bg-size: @icon-button-size;
+@icon-bg-size-small: @icon-button-size*0.5;
 @icon-bg-size-medium: @icon-button-size*1.5;
 @icon-bg-size-large: @icon-button-size*2;
 
@@ -80,6 +81,23 @@
 	}
 
   /* Default circle element for SVGs */
+  .uk-icon-bg {
+    border-radius: 100px;
+    width: @icon-bg-size;
+    height: @icon-bg-size;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: @icon-bg-background;
+  }
+
+  .uk-icon-bg-small {
+    width: @icon-bg-size-small;
+    height: @icon-bg-size-small;
+  }
+  /**/
+
+  /* Default circle element for SVGs with shadow*/
   .uk-icon-bg-shadow {
     border-radius: 100px;
     width: @icon-button-size;

less/label.less

@@ -67,8 +67,12 @@
   }
 
   .uk-label-secondary {
-    background-color: @label-secondary-background;
-    color: @label-secondary-color;
-    border-color: @label-secondary-border;
+    background-color: @label-secondary-border;
+    color: @global-inverse-color;
+    border-color: @label-secondary-background;
+
+    .uk-close {
+      color: @global-inverse-color;
+    }
   }
 }

less/mixin.less

@@ -1,12 +1,12 @@
-.set-blur-background(@color: @base-body-background, @opacity: 80%) {
+.set-blur-background(@color: @base-body-background, @opacity: 80%, @blur: saturate(180%) blur(20px)) {
   &.uk-blur-background, .uk-blur-background {
     background: fade(@color, 99%);
   }
 
   @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
     &.uk-blur-background, .uk-blur-background {
-      -webkit-backdrop-filter: saturate(180%) blur(20px);
-      backdrop-filter: saturate(180%) blur(20px);
+      -webkit-backdrop-filter: @blur;
+      backdrop-filter: @blur;
       background: fade(@color, @opacity) !important;
     }
   }

less/modal.less

@@ -46,9 +46,13 @@
     & > .uk-dropdown {
       z-index: @modal-z-index + 1;
     }
+
+    & > .uk-drop {
+      z-index: @modal-z-index + 1;
+    }
   }
 
-  .uk-modal, .uk-dropdown {
+  .uk-modal, .uk-dropdown, .uk-drop {
 
     .uk-button, uk-icon-button {
       box-shadow: none !important;

less/progress.less

@@ -15,9 +15,11 @@
 @progress-circle-background-open-access: conic-gradient(@progress-bar-background-open-access  calc(var(--percentage) * 1%), @progress-background-open-access 0);
 
 @progress-semicircle-size: 120px;
+@progress-semicircle-size-small: 80px;
 @progress-semicircle-color: @global-primary-background;
 @progress-semicircle-text-font-weight: @text-bold-weight;
 @progress-semicircle-text-font-size: @global-large-font-size;
+@progress-semicircle-text-font-size-small: @global-font-size;
 @progress-semicircle-background: conic-gradient(from 0.75turn at 50% 100%, @progress-bar-background calc(var(--percentage) * 1% / 2), @progress-background calc(var(--percentage) * 1% / 2 + 0.1%));
 @progress-semicircle-background-open-access: conic-gradient(from 0.75turn at 50% 100%, @progress-bar-background-open-access calc(var(--percentage) * 1% / 2), @progress-background-open-access calc(var(--percentage) * 1% / 2 + 0.1%));
 
@@ -110,6 +112,14 @@
       }
     }
   }
+
+  .uk-progress-semicircle-small[percentage] {
+    width: @progress-semicircle-size-small;
+
+    &::after {
+      font-size: @progress-semicircle-text-font-size-small;
+    }
+  }
 }
 
 @inverse-progress-background: @inverse-global-color;

less/subnav.less

@@ -1,10 +1,14 @@
 @subnav-item-font-size: @global-small-font-size;
+@subnav-item-font-size-small: @global-xsmall-font-size;
 @subnav-item-line-height: 17px;
 @subnav-item-font-weight: 400;
+@subnav-item-max-width: @width-medium-width;
 
 /* Pills */
 @subnav-pill-item-padding-vertical: 10px;
 @subnav-pill-item-padding-horizontal: 20px;
+@subnav-pill-item-padding-vertical-small: (@subnav-pill-item-padding-vertical / 2);
+@subnav-pill-item-padding-horizontal-small: (@subnav-pill-item-padding-horizontal / 2);
 @subnav-pill-item-border-radius: 60px;
 @subnav-pill-item-background: transparent;
 @subnav-pill-item-color: @global-primary-background;
@@ -21,7 +25,9 @@
 /* Pills alt*/
 @subnav-pill-alt-item-padding-vertical: 10px;
 @subnav-pill-alt-item-padding-horizontal: 20px;
-@subnav-pill-alt-item-border-radius: 24px;
+@subnav-pill-alt-item-padding-vertical-small: (@subnav-pill-alt-item-padding-vertical / 2);
+@subnav-pill-alt-item-padding-horizontal-small: (@subnav-pill-alt-item-padding-horizontal / 2);
+@subnav-pill-alt-item-border-radius: @global-xlarge-border-radius;
 @subnav-pill-alt-item-color: @global-color;
 @subnav-pill-alt-item-hover-color: @global-secondary-background;
 @subnav-pill-alt-item-active-font-weight: 600;
@@ -34,6 +40,9 @@
   font-size: @subnav-item-font-size;
   font-weight: @subnav-item-font-weight;
   line-height: @subnav-item-line-height;
+  max-width: @subnav-item-max-width;
+
+  & > *:extend(.uk-text-truncate) {}
 }
 
 .hook-subnav-pill-item() {
@@ -72,13 +81,20 @@
       background-image: @subnav-pill-alt-item-active-background-gradient;
     }
   }
-}
 
-/* Inverse */
-@inverse-subnav-pill-alt-box-shadow: @inverse-global-large-box-shadow;
+  .uk-subnav.uk-subnav-pill.uk-subnav-small {
 
-.hook-inverse-misc() {
-  .uk-subnav.uk-subnav-pill-alt {
-    box-shadow: @inverse-subnav-pill-alt-box-shadow;
+    & > * > * {
+      font-size: @subnav-item-font-size-small;
+      padding: @subnav-pill-item-padding-vertical-small @subnav-pill-item-padding-horizontal-small;
+    }
+  }
+
+  .uk-subnav.uk-subnav-pill-alt.uk-subnav-small {
+
+    & > * > * {
+      font-size: @subnav-item-font-size-small;
+      padding: @subnav-pill-alt-item-padding-vertical-small @subnav-pill-alt-item-padding-horizontal-small;
+    }
   }
 }

less/utility.less

@@ -1,6 +1,8 @@
 @dropcap-font-size: @global-line-height * 3;
 @border-rounded-border-radius: @global-border-radius;
 @border-rounded-small-border-radius: @global-small-border-radius;
+@border-rounded-xlarge-border-radius: @global-xlarge-border-radius;
+
 
 @border-width: @global-border-width;
 @border-color: @global-border;
@@ -49,6 +51,10 @@
   .uk-border-rounded-small {
     border-radius: @border-rounded-small-border-radius;
   }
+  
+  .uk-border-rounded-xlarge {
+    border-radius: @border-rounded-xlarge-border-radius;
+  }
 }
 
 /* Inverse */

less/variables.less

@@ -36,6 +36,7 @@
 @global-border: @muted-color;
 @global-border-radius: 6px;
 @global-small-border-radius: 4px;
+@global-xlarge-border-radius: 4 * @global-border-radius;
 
 /* Shadows*/
 @global-default-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);