@depict-ai/react-ui 0.0.74 → 0.0.75

package/dist/styles/components/PLP/SortAndFilter/SortAndFilter.scss

@@ -9,118 +9,52 @@
 @use "sass:map";
 
 /// Mixin that styles the sorting and filtering menus.
-/// The way this is configured is soon going to be subject to change, therefore the parameters are not argumented.
-/// @param {Color} $mobile-top-level-collapse-color [variables.$brand-black] -
-/// @param {Color} $mobile-top-level-collapse-background [#fff] -
-/// @param {Color} $custom-input-checked-background [#fff] -
-/// @param {Color} $custom-input-background [#fff] -
-/// @param {Color} $custom-input-indicator-color [variables.$brand-black] -
-/// @param {Color} $checkbox-background-color [#fff] -
-/// @param {Color} $checkbox-checked-background-color [variables.$brand-black] -
-/// @param {Color} $checkbox-checkmark-color [#fff] -
-/// @param {Number with size unit} $checkbox-border-radius [if(variables.$border-radius == 0, 0, if(variables.$border-radius == 0px, 0, 2px))] -
-/// @param {Border} $checkbox-border [1px solid variables.$brand-dark-grey] -
-/// @param {Number with size unit} $checkbox-top-offset [0px] -
-/// @param {Number with size unit} $checkbox-left-offset [0px] -
-/// @param {Border} $radio-border [1px solid variables.$brand-dark-grey] -
-/// @param {Color} $radio-background-color [#fff] -
-/// @param {Color} $radio-selected-dot-color [variables.$brand-black] -
-/// @param {Number with size unit} $radio-selected-dot-size [14px] -
-/// @param {Number with size unit} $radio-selected-offset [0px] -
-/// @param {Color} $separator-color [variables.$brand-dark-grey] -
-/// @param {Color} $price-range-min-max-text-color [variables.$brand-dark-grey] -
-/// @param {Color} $range-input-bg-color [variables.$brand-lightest-grey] -
-/// @param {Color} $top-level-summary-background [variables.$brand-black] -
-/// @param {Color} $hovered-top-level-summary-background [variables.$brand-dark-grey] -
-/// @param {Color} $hovered-range-input-bg-color [variables.$brand-lighter-grey] -
-/// @param {Color} $hovered-checkbox-bg [variables.$brand-lighter-grey] -
-/// @param {false | Color} $hovered-checkbox-checked-background-color [false] -
-/// @param {Color} $input-row-label-color [variables.$brand-dark-grey] -
-/// @param {Color} $checked-input-row-label-color [#000] -
-/// @param {Number} $input-row-label-font-weight [400] -
-/// @param {Number} $checked-input-row-label-font-weight [500] -
-/// @param {Color} $showing-selected-subfilter-count-color [variables.$brand-grey] -
-/// @param {Color} $filter-available-products-color [variables.$brand-grey] -
-/// @param {Color} $count-zero-input-row-label-color [rgb(194, 194, 194)] -
-/// @param {Number with size unit} $spacing_between_input_rows [10px] -
-/// @param {Number with size unit} $ungrouped-top-margin [25px] -
-/// @param {Border} $hovered-checkbox-border [2px solid variables.$brand-black] -
-/// @param {Border} $hovered-radio-border [2px solid variables.$brand-black] -
-/// @param {Padding} $sort-and-filter-button-padding [10px 20px] -
-/// @param {Color} $expandable-seperator-color [variables.$brand-lightest-grey] -
-/// @param {Color} $expandable-seperator-hover-color [variables.$brand-lighter-grey] -
-/// @param {Number with size unit} $expandable-seperator-height [1px] -
-/// @param {Color} $filter-group-heading-color [#fff] -
-/// @param {Color} $filter-groups-morphing-sign-color [#fff] -
-/// @param {Number with size unit} $filter-group-summary-border-radius [4px] -
-/// @param {Color} $sort-and-filter-modal-background [variables.$brand-lighter-grey] -
-/// @param {Number with size unit} $filter-group-heading-padding [10px] -
-/// @param {Number with size unit} $filter-group-summary-spacings [10px] -
-/// @param {Number with size unit} $range-input-field-border-radius [4px] -
-/// @param {Border} $range-input-field-border [none] -
-/// @param {false | Number} $filter-group-title-bold [false] -
-/// @param {Color} $view-more-clear-background [rgb(253, 253, 253)] -
-/// @param {Color} $filter-collapsible-body-background [rgb(238, 238, 240)] -
-/// @param {Number | Boolean} $sort-and-filter-modal-section-title-font-weight [false] -
-/// @param {Number | Boolean} $sort-and-filter-modal-section-expanded-title-font-weight [$sort-and-filter-modal-section-title-font-weight] -
-
-@mixin SortAndFilter(
-  $mobile-top-level-collapse-color: variables.$brand-black,
-  $mobile-top-level-collapse-background: #fff,
-  $custom-input-checked-background: #fff,
-  $custom-input-background: #fff,
-  $custom-input-indicator-color: variables.$brand-black,
-  $checkbox-background-color: #fff,
-  $checkbox-checked-background-color: variables.$brand-black,
-  $checkbox-checkmark-color: #fff,
-  $checkbox-border-radius: if(variables.$border-radius == 0, 0, if(variables.$border-radius == 0px, 0, 2px)),
-  // if global border radius is 0 or 0px, don't round input fields in their default value
-  $checkbox-border: 1px solid variables.$brand-dark-grey,
-  $checkbox-top-offset: 0px,
-  $checkbox-left-offset: 0px,
-  $radio-border: 1px solid variables.$brand-dark-grey,
-  $radio-background-color: #fff,
-  $radio-selected-dot-color: variables.$brand-black,
-  $radio-selected-dot-size: 14px,
-  $radio-selected-offset: 0px,
-  $separator-color: variables.$brand-dark-grey,
-  $price-range-min-max-text-color: variables.$brand-dark-grey,
-  $range-input-bg-color: variables.$brand-lightest-grey,
-  $top-level-summary-background: variables.$brand-black,
-  $hovered-top-level-summary-background: variables.$brand-dark-grey,
-  $hovered-range-input-bg-color: variables.$brand-lighter-grey,
-  $hovered-checkbox-bg: variables.$brand-lighter-grey,
-  $hovered-checkbox-checked-background-color: false,
-  $input-row-label-color: variables.$brand-dark-grey,
-  $checked-input-row-label-color: #000,
-  $input-row-label-font-weight: 400,
-  $checked-input-row-label-font-weight: 500,
-  $showing-selected-subfilter-count-color: variables.$brand-grey,
-  $filter-available-products-color: variables.$brand-grey,
-  $count-zero-input-row-label-color: rgb(194, 194, 194),
-  $spacing_between_input_rows: 10px,
-  $ungrouped-top-margin: 25px,
-  $hovered-checkbox-border: 2px solid variables.$brand-black,
-  $hovered-radio-border: 2px solid variables.$brand-black,
-  $sort-and-filter-button-padding: 10px 20px,
-  $expandable-seperator-color: variables.$brand-lightest-grey,
-  $expandable-seperator-hover-color: variables.$brand-lighter-grey,
-  $expandable-seperator-height: 1px,
-  $filter-group-heading-color: #fff,
-  $filter-groups-morphing-sign-color: #fff,
-  $filter-group-summary-border-radius: 4px,
-  $sort-and-filter-modal-background: variables.$brand-lighter-grey,
-  $filter-group-heading-padding: 10px,
-  $filter-group-summary-spacings: 10px,
-  $range-input-field-border-radius: 4px,
-  $range-input-field-border: none,
-  $filter-group-title-bold: false,
-  $view-more-clear-background: rgb(253, 253, 253),
-  $filter-collapsible-body-background: rgb(238, 238, 240),
-  $sort-and-filter-modal-section-title-font-weight: false,
-  $sort-and-filter-modal-section-expanded-title-font-weight: $sort-and-filter-modal-section-title-font-weight
-) {
-  $input-row-height-goal: max(21px, 1em); // if text gets bigger we have to get bigger too to not cut off the text
+
+$brand-black: variables.get-merged(variables.$base-colors-defaults, variables.$base-colors, 800);
+$brand-dark-grey: variables.get-merged(variables.$base-colors-defaults, variables.$base-colors, 600);
+$brand-grey: variables.get-merged(variables.$base-colors-defaults, variables.$base-colors, 400);
+$brand-light-grey: variables.get-merged(variables.$base-colors-defaults, variables.$base-colors, 300);
+$brand-lighter-grey: variables.get-merged(variables.$base-colors-defaults, variables.$base-colors, 200);
+$brand-lightest-grey: variables.get-merged(variables.$base-colors-defaults, variables.$base-colors, 100);
+$deprecated-grey: variables.get-merged(variables.$base-colors-defaults, variables.$base-colors, "deprecated-grey");
+
+// Mega hack right now, we want to wait on Vicki's redesign of this
+
+$custom-input-checked-background: #fff;
+$custom-input-background: #fff;
+$custom-input-indicator-color: $brand-black;
+$checkbox-background-color: #fff;
+$checkbox-checked-background-color: $brand-black;
+$checkbox-checkmark-color: #fff;
+$checkbox-border-radius: if(variables.$border-radius == 0, 0, if(variables.$border-radius == 0px, 0, 2px));
+// if global border radius is 0 or 0px, don't round input fields in their default value
+$checkbox-border: 1px solid $brand-dark-grey;
+$checkbox-top-offset: 0px;
+$checkbox-left-offset: 0px;
+$radio-border: 1px solid $brand-dark-grey;
+$radio-background-color: #fff;
+$radio-selected-dot-color: $brand-black;
+$radio-selected-dot-size: 14px;
+$radio-selected-offset: 0px;
+$hovered-checkbox-bg: $brand-lighter-grey;
+$hovered-checkbox-checked-background-color: $brand-dark-grey;
+$hovered-checkbox-border: 2px solid $brand-black;
+$hovered-radio-border: 2px solid $brand-black;
+
+@mixin SortAndFilter() {
+  $spacing_between_input_rows: variables.get-merged(
+    variables.$filters-configuration-defaults,
+    variables.$filters-configuration,
+    "spacing-between-input-rows"
+  );
+  $input-row-height: max(
+    variables.get-merged(
+      variables.$filters-configuration-defaults,
+      variables.$filters-configuration,
+      "input-row-height-goal"
+    ),
+    1em
+  ); // if text gets bigger we have to get bigger too to not cut off the text
   // it was meant to be 20px but there was a bug so I'm setting it to 21px now so it doesn't change
   $count-distance-to-right: 30px;
   $largest-border-on-custom-input: max(
@@ -154,7 +88,6 @@
   .sorting-attributes,
   .sorting-direction {
     padding: 10px;
-    background: white;
     display: flex;
     flex-direction: column;
     @include utils.flex-gap(10px, "column nowrap");
@@ -164,6 +97,7 @@
     .outer {
       margin-top: -5px;
     }
+
     .inner {
       display: flex;
       justify-content: flex-end;
@@ -174,13 +108,14 @@
       padding-top: 5px;
       // hack around having to have overflow: hidden for embedded_num_products but still wanting to be able to see the overflowing number of filters badge
     }
+
     &.fake .toggle-button {
       transition: none;
     }
+
     .toggle-button {
       white-space: nowrap;
       @include utils.flex-gap(5px, "row nowrap");
-      padding: $sort-and-filter-button-padding;
       position: relative;
 
       svg path {
@@ -199,7 +134,7 @@
       right: -4px;
       top: -4px;
       background: black;
-      color: white;
+      color: #fff;
       border-radius: 13px;
       width: 20px;
       line-height: 1;
@@ -211,6 +146,7 @@
       font-size: 12px;
       z-index: calc(#{variables.$search-page-base-z-index} + 1);
     }
+
     .open-filters-button-container {
       position: relative;
     }
@@ -249,19 +185,23 @@
       $hovered-checkbox-checked-background-color,
       $hovered-checkbox-border,
       $hovered-radio-border,
-      $input-row-height-goal,
+      $input-row-height,
       $largest-border-on-custom-input
     );
   }
   .filters {
     .body {
-      & > * {
-        // WhiteSortAndFilter wants to add a border above the space here which is why we're not using utils.flex-gap / margins
-        &:not(:first-child) {
-          padding-top: calc($filter-group-summary-spacings * 0.5);
-        }
-        &:not(:last-child) {
-          padding-bottom: calc($filter-group-summary-spacings * 0.5);
+      $filter-group-summary-spacings: false; // Set to px value if space is wanted between the filter group
+      @if $filter-group-summary-spacings {
+        & > * {
+          // WhiteSortAndFilter wants to add a border above the space here which is why we're not using utils.flex-gap / margins
+          &:not(:first-child) {
+            padding-top: calc($filter-group-summary-spacings * 0.5);
+          }
+
+          &:not(:last-child) {
+            padding-bottom: calc($filter-group-summary-spacings * 0.5);
+          }
         }
       }
 
@@ -270,43 +210,49 @@
         padding-bottom: calc(#{$spacing_between_input_rows} / 2);
         padding-top: calc(#{$spacing_between_input_rows} / 2);
         justify-content: space-between;
+
         &,
         & > .left {
           align-items: center;
           display: flex;
         }
+
         .text {
           //line-height: 1.8; /** Fix for ÅÄÖ getting cut-off **/
-          line-height: $input-row-height-goal; // Sorry ÅÄÖ, hope you survive this
+          line-height: $input-row-height; // Sorry ÅÄÖ, hope you survive this
           display: -webkit-box;
           text-overflow: ellipsis;
           white-space: pre-line;
           overflow-wrap: anywhere;
-          color: $input-row-label-color;
+          color: variables.get-text-color("neutral", "default");
           -webkit-box-orient: vertical;
           -webkit-line-clamp: 1;
           overflow: hidden;
-          font-weight: $input-row-label-font-weight;
           word-break: break-word;
+          font-weight: variables.get-font-weight(400);
         }
+
         *:checked,
         .fake-checked {
           & ~ .text {
-            color: $checked-input-row-label-color;
-            font-weight: $checked-input-row-label-font-weight;
+            color: variables.get-text-color("neutral", "pressed");
+            font-weight: variables.get-merged(variables.$font-weights-defaults, variables.$font-weights, 500);
           }
         }
+
         &.count-0 * + .text {
-          color: $count-zero-input-row-label-color;
+          color: variables.get-text-color("subtle", "default");
         }
       }
+
       .input-row,
       .hierarchical .checkbox-details.expandable .category-parent {
         .count {
-          color: $filter-available-products-color;
-          font-weight: 400;
+          color: variables.get-text-color("subtle", "default");
+          font-weight: variables.get-merged(variables.$font-weights-defaults, variables.$font-weights, 400);
         }
       }
+
       .input-row:hover .count {
         color: black;
       }
@@ -315,79 +261,104 @@
         display: flex;
         align-items: center;
         @include utils.flex-gap(10px, "row nowrap");
+
         .show-selected {
           display: flex;
           @include utils.flex-gap(5px, "row nowrap");
           align-items: center;
-          color: $showing-selected-subfilter-count-color;
-          fill: $showing-selected-subfilter-count-color;
+          color: variables.get-text-color("subtle", "default");
+          fill: variables.get-text-color("subtle", "default");
+
           span {
             line-height: 1;
           }
         }
       }
+
       .ungrouped {
-        margin-top: $ungrouped-top-margin;
+        /// Spacing above filters that aren't in a group
+        margin-top: 25px;
       }
 
       .clear-all-filters {
         margin-top: 5px;
         font-weight: 400;
         padding: 0.7em;
-        text-transform: uppercase;
+        text-transform: variables.$uppercase-text-transform;
         font-size: 1.1em;
       }
 
       details {
         summary {
           list-style: none;
+
           &::-webkit-details-marker {
             display: none;
           }
+
           cursor: pointer;
+
           & > .summary {
             display: flex;
             justify-content: space-between;
             align-items: center;
           }
         }
+
         &.filter-collapsible {
+          border-top: 1px solid variables.get-border-color("neutral", "default");
+
           .filter-group-summary {
-            background: $top-level-summary-background;
-            border-radius: $filter-group-summary-border-radius;
+            //border-radius: $filter-group-summary-border-radius;
 
             &:focus {
               outline: none;
             }
+
             &:focus-visible {
-              background: $hovered-top-level-summary-background;
+              background: variables.get-background-color("base", "hover");
             }
+
             @include supports-hover.supports-hover() {
               &:hover {
-                background: $hovered-top-level-summary-background;
+                background: variables.get-background-color("base", "hover");
               }
             }
+
+            &:active {
+              @include utils.highlight-background(
+                variables.get-background-color("base", "hover"),
+                2%,
+                2%
+              ); // need real subtle here so we use the illegal mixin
+            }
+
             & > .summary {
-              color: $filter-group-heading-color;
-              padding: $filter-group-heading-padding;
-              & > span {
-                @if $filter-group-title-bold {
-                  font-weight: $filter-group-title-bold;
-                }
-              }
+              color: variables.get-text-color("neutral", "default");
+              padding: 15px 10px;
+
               & > svg {
                 transform: rotate(270deg);
               }
             }
           }
+
           &[open] .filter-group-summary {
-            border-radius: $filter-group-summary-border-radius $filter-group-summary-border-radius 0px 0px;
+            //border-radius: $filter-group-summary-border-radius $filter-group-summary-border-radius 0px 0px;
+            border-bottom: 1px solid variables.get-border-color("subtle", "default");
+
+            & > .summary {
+              & > span {
+                // Make filter group title medium when expanded
+                font-weight: variables.get-merged(variables.$font-weights-defaults, variables.$font-weights, 500);
+              }
+            }
           }
         }
       }
 
       .filter-collapsible-body {
-        background: $filter-collapsible-body-background;
+        margin-bottom: 15px;
         display: flex;
         flex-direction: column;
         @include utils.flex-gap(1px, "column nowrap");
@@ -395,7 +366,7 @@
         overflow: hidden;
 
         .view-more-clear {
-          background: $view-more-clear-background;
+          border-top: 1px solid variables.get-border-color("subtle", "default");
           display: flex;
           justify-content: space-between;
           $gap: 10px;
@@ -403,6 +374,7 @@
           .clear-group {
             @include utils.flex-gap(calc($gap - calc(calc(21.064px - 8.42px) / 2)), "row nowrap");
             margin-left: auto;
+
             svg {
               width: 11px;
               height: 12px;
@@ -412,6 +384,7 @@
           .expand-filter {
             margin-right: auto;
             @include utils.flex-gap($gap, "row nowrap");
+
             &.expanded svg {
               clip-path: polygon(20% 48%, 80% 48%, 80% 50.8%, 20% 50.8%);
               transform: scale(1.6);
@@ -430,12 +403,13 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            text-transform: uppercase;
+            text-transform: variables.$uppercase-text-transform;
             svg {
               path {
                 fill: black;
               }
             }
+
             &:focus-visible {
               outline: none;
               filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
@@ -444,17 +418,18 @@
         }
 
         .filter-part {
-          background: white;
           padding: 15px 10px 20px 10px;
           display: flex;
           flex-direction: column;
           @include utils.flex-gap(10px, "column nowrap");
         }
       }
+
       *:not(.ungrouped) > form {
         margin-bottom: calc(-1 * calc(#{$spacing_between_input_rows} / 2));
         margin-top: calc(-1 * calc(#{$spacing_between_input_rows} / 2));
       }
+
       .hierarchical {
         margin-left: -20px;
 
@@ -469,6 +444,8 @@
 
           &.expandable {
             position: relative;
+            $expandable-separator-height: 1px;
+            $expandable-separator-hover-change-factor: 20%;
 
             & summary {
               &:before,
@@ -477,18 +454,18 @@
                 content: "";
                 position: absolute;
                 right: 0;
-                background: $expandable-seperator-color;
-                height: $expandable-seperator-height;
+                height: $expandable-separator-height;
                 width: calc(100% - 20px); // Reduce for padding
+                background: variables.get-background-color("base", "disabled");
               }
 
               &:before {
                 // so that two adjacent separators merge into each other
-                top: calc(-0.5 * #{$expandable-seperator-height});
+                top: calc(-0.5 * #{$expandable-separator-height});
               }
 
               &:after {
-                bottom: calc(-0.5 * #{$expandable-seperator-height});
+                bottom: calc(-0.5 * #{$expandable-separator-height});
               }
 
               @include supports-hover.supports-hover() {
@@ -496,16 +473,17 @@
                 .input-row:hover ~ details > & {
                   &:after,
                   &:before {
-                    background: $expandable-seperator-hover-color;
+                    background: variables.get-background-color("subtle", "hover");
                     z-index: 1;
                   }
                 }
               }
+
               &:focus-visible,
               .input-row ~ details:focus-visible > & {
                 &:after,
                 &:before {
-                  background: $expandable-seperator-hover-color;
+                  background: variables.get-background-color("subtle", "hover");
                   z-index: 1;
                 }
               }
@@ -515,21 +493,25 @@
               position: absolute;
               padding-right: 30px;
             }
+
             & > details {
               &:not([open]),
               &[open] > .category-parent > .summary {
                 padding-top: calc(#{$spacing_between_input_rows} / 2);
                 padding-bottom: calc(#{$spacing_between_input_rows} / 2);
               }
+
               .category-parent {
                 &:focus {
                   outline: none;
                   box-shadow: none;
                 }
+
                 &:focus-visible {
                   outline: none;
                   box-shadow: none;
                 }
+
                 @supports selector(:focus-visible) {
                   &:not(:focus-visible) {
                     @include supports-hover.supports-hover() {
@@ -541,20 +523,24 @@
                       @include default_morphing_sign_in_expandable();
                     }
                   }
+
                   @include supports-hover.supports-hover() {
                     &:hover {
                       .morphing-sign {
                         transform: scale(1.5);
                       }
+
                       .count {
                         color: black;
                       }
                     }
                   }
+
                   &:focus-visible {
                     .count {
                       color: black;
                     }
+
                     .morphing-sign {
                       transform: scale(1.5);
                     }
@@ -569,6 +555,7 @@
                       .morphing-sign {
                         transform: scale(1.5);
                       }
+
                       .count {
                         color: black;
                       }
@@ -578,18 +565,22 @@
                     @include default_morphing_sign_in_expandable();
                   }
                 }
+
                 & > .summary {
                   justify-content: flex-end;
-                  $morphing-sign-width: #{$input-row-height-goal};
+                  $morphing-sign-width: #{$input-row-height};
+
                   .count {
                     margin-right: calc(#{$count-distance-to-right} - #{$morphing-sign-width});
                   }
+
                   .morphing-sign {
                     // same as custom inputs
                     width: $morphing-sign-width;
                     transition-duration: 150ms;
                     transition-timing-function: ease-in-out;
                     height: $morphing-sign-width;
+
                     span {
                       background: black;
                       transition-duration: 150ms;
@@ -602,6 +593,7 @@
           }
         }
       }
+
       .range {
         .input-group {
           width: 100%;
@@ -609,14 +601,15 @@
           // use paddings to not confuse useExpandingContainer
           padding-top: 10px;
           padding-bottom: 25px;
+
           .field {
             display: flex;
             width: 100%;
             align-items: center;
+
             input {
-              border: $range-input-field-border;
-              border-radius: $range-input-field-border-radius;
-              background: $range-input-bg-color;
+              border: 0.5px solid variables.get-border-color("base", "default");
+              background: variables.get-background-color("base", "disabled");
               transition-duration: 50ms;
               padding-top: 8px;
               padding-bottom: 8px;
@@ -624,20 +617,24 @@
               outline: none;
               text-align: center;
               -moz-appearance: textfield;
+
               &:focus-visible {
-                background: $hovered-range-input-bg-color;
+                background: variables.get-background-color("base", "hover");
               }
+
               @include supports-hover.supports-hover() {
                 &:hover {
-                  background: $hovered-range-input-bg-color;
+                  background: variables.get-background-color("base", "hover");
                 }
               }
+
               &::-webkit-outer-spin-button,
               &::-webkit-inner-spin-button {
                 -webkit-appearance: none;
               }
             }
           }
+
           .separator {
             flex-basis: 25px;
             flex-shrink: 0;
@@ -645,7 +642,7 @@
             font-size: 19px;
             align-items: center;
             justify-content: center;
-            color: $separator-color;
+            color: variables.get-text-color("neutral", "default");
           }
         }
 
@@ -654,17 +651,20 @@
           position: relative;
           background: #ddd;
           border-radius: 5px;
+
           .progress {
             height: 100%;
             left: 25%;
             right: 25%;
             position: absolute;
             border-radius: 5px;
-            background: variables.$brand-black;
+            background: variables.get-background-color("inverse", "default");
           }
         }
+
         .range-group {
           position: relative;
+
           input {
             position: absolute;
             width: 100%;
@@ -675,25 +675,29 @@
             pointer-events: none;
             -webkit-appearance: none;
             -moz-appearance: none;
+
             &:focus {
               outline: none;
             }
+
             $thumb_size: 20px;
+
             &::-webkit-slider-thumb {
               cursor: pointer;
               height: $thumb_size;
               width: $thumb_size;
               border-radius: 50%;
-              background: variables.$brand-black;
+              background: variables.get-background-color("inverse", "default");
               @include supports-hover.supports-hover() {
                 &:hover {
-                  background: variables.$brand-dark-grey;
+                  background: variables.get-background-color("inverse", "hover");
                 }
               }
               pointer-events: auto;
               -webkit-appearance: none;
               box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
             }
+
             &::-moz-range-thumb {
               // TODO: overflows to the left
               cursor: pointer;
@@ -701,22 +705,24 @@
               width: $thumb_size;
               border: none;
               border-radius: 50%;
-              background: variables.$brand-black;
+              background: variables.get-background-color("base", "default");
               @include supports-hover.supports-hover() {
                 &:hover {
-                  background: variables.$brand-dark-grey;
+                  background: variables.get-background-color("inverse", "hover");
                 }
               }
               pointer-events: auto;
               -moz-appearance: none;
               box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
             }
+
             &:focus-visible {
               &::-webkit-slider-thumb {
-                background: variables.$brand-grey;
+                background: variables.get-background-color("inverse", "hover");
               }
+
               &::-moz-range-thumb {
-                background: variables.$brand-grey;
+                background: variables.get-background-color("inverse", "hover");
               }
             }
           }
@@ -726,29 +732,34 @@
           padding-top: 10px;
           display: flex;
           justify-content: space-between;
-          color: $price-range-min-max-text-color;
+          color: variables.get-text-color("neutral", "default");
         }
       }
+
       .checkbox-grid {
         display: flex;
         flex-wrap: wrap;
         @include utils.flex-gap(10px, "row wrap");
+
         .major,
         .minor {
           padding: 5px 10px;
+
           &.minor {
             border: 1px solid #d5d5d5;
           }
         }
       }
+
       @include CheckboxColor();
     }
   }
   .sorting {
     .body {
-      background: rgb(238, 238, 240);
       @include utils.flex-gap(1px, "column nowrap");
       line-height: 1;
+      color: variables.get-text-color("neutral", "default");
+
       .input-row {
         align-items: center;
         justify-content: flex-start;
@@ -757,14 +768,7 @@
     }
   }
 
-  @include MorphingSign.MorphingSign($filter-groups-morphing-sign-color);
-  @include SortAndFilterModal.SortAndFilterModal(
-    $mobile-top-level-collapse-color,
-    $mobile-top-level-collapse-background,
-    $sort-and-filter-modal-background: $sort-and-filter-modal-background,
-    $title-font-weight: $sort-and-filter-modal-section-title-font-weight,
-    $expanded-title-font-weight: $sort-and-filter-modal-section-expanded-title-font-weight
-  );
+  @include MorphingSign.MorphingSign();
 
   @content;
 }
@@ -772,7 +776,7 @@
 @mixin default_morphing_sign_in_expandable {
   .morphing-sign {
     span {
-      background: #333333;
+      background: variables.get-background-color("inverse", "hover");
 
       &:first-child {
         width: 5%;