@depict-ai/react-ui 0.0.74 → 0.0.75

package/dist/styles/helpers/custom_input.scss

@@ -30,11 +30,11 @@
   $hovered-checkbox-checked-background-color,
   $hovered-checkbox-border,
   $hovered-radio-border,
-  $input-row-height-goal,
+  $input-row-height,
   $largest-border-on-custom-input
 ) {
   $width-and-height: calc(
-    #{$input-row-height-goal} - calc(#{$largest-border-on-custom-input} * 2)
+    #{$input-row-height} - calc(#{$largest-border-on-custom-input} * 2)
   ); // border is on both sides
   /* Customize the label (the container) */
   .input-row {
@@ -72,10 +72,10 @@
           border: $checkbox-border;
         }
         &.color {
-          padding: calc(#{$input-row-height-goal} / 2); // doesn't have border so needs more size
+          padding: calc(#{$input-row-height} / 2); // doesn't have border so needs more size
           &.outline {
             $border-width: 0.5px;
-            padding: calc(calc(#{$input-row-height-goal} - calc(#{$border-width} * 2)) / 2);
+            padding: calc(calc(#{$input-row-height} - calc(#{$border-width} * 2)) / 2);
             border: $border-width solid #868689;
           }
         }

package/dist/styles/helpers/utils.scss

@@ -20,9 +20,15 @@
 /// @param {Color} $normal-background - The color to darken or lighten
 /// @param {Percentage} $darken-factor [10%] - The amount to darken the color by
 /// @param {Percentage} $lighten-factor [10%] - The amount to lighten the color by
-@mixin highlight-background($normal-background, $darken-factor: 10%, $lighten-factor: 10%) {
+/// @param {Percentage} $saturation-factor [$darken-factor] - The amount to decrease saturation by when the color is darkened
+@mixin highlight-background(
+  $normal-background,
+  $darken-factor: 10%,
+  $lighten-factor: 10%,
+  $saturation-factor: $darken-factor
+) {
   @if color.lightness($normal-background) >= 50% {
-    background: color.adjust($normal-background, $lightness: -$darken-factor);
+    background: color.adjust($normal-background, $lightness: -$darken-factor, $saturation: -$saturation-factor);
   } @else {
     background: color.adjust($normal-background, $lightness: $lighten-factor);
   }

package/dist/styles/index.scss

@@ -1,3 +1,49 @@
-@forward "./components/PLP";
-@forward "./components/category";
-@forward "./components/search";
+@forward "./variables";
+
+@use "./components/PLP";
+@use "./components/category";
+@use "./components/search";
+
+/// Default theme for Search and Category pages
+/// To configure variables, use `@use` and `with`
+/// @param {"both" | "search" | "category"} $scope - What to generate styling for. Set this to `category` if you are only using the Category page or `search` if you are only using the Search page. If you are using both, set this to `both`.
+///
+@mixin default-theme($scope) {
+  .depict.plp {
+    button {
+      border: none; // Disable default button border
+    }
+    @include PLP.PLPResults();
+    @include PLP.ProductListingPage();
+    @include PLP.SelectedFilters();
+    @include PLP.ScrollStatus();
+    @include PLP.SortAndFilter();
+    @include PLP.SortAndFilterModal();
+    @include PLP.FloatingButtons();
+    @include PLP.SlidableItems();
+    @include PLP.PrimaryButton();
+    @include PLP.SecondaryButton();
+  }
+  @if $scope != "category" {
+    .depict.search {
+      @include search.Autocomplete();
+      @include search.CategorySuggestions();
+      @include search.InstantResults();
+      @include search.InstantCard();
+      @include search.SearchField();
+      @include search.SearchModal();
+      @include search.SearchPage();
+      @include search.SearchRecommendations();
+      @include search.ShowingResultsFor();
+    }
+  }
+  @if $scope != "search" {
+    .depict.category {
+      @include category.BreadCrumbs();
+      @include category.QuickLinks();
+      @include category.CategoryTitle();
+      @include category.CategoryPage();
+    }
+  }
+  @include PLP.Toast();
+}

package/dist/styles/variables.scss

@@ -1,61 +1,266 @@
+@use "sass:map";
+@use "sass:color";
+
 ////
 /// This is the file containing the main variables used across all styles, such as base colors, rounds and z-index
 /// Many values and variables are derived from them
 ////
 
-$brand-black: #0f0f0f;
-$brand-grey: #868689;
-$brand-dark-grey: #333335;
-$brand-light-grey: #bcbcbe;
-$brand-lighter-grey: #eeeef0;
-$brand-lightest-grey: #fafafc;
-$deprecated-grey: #e7e8e7;
+@function get-merged($map, $map2, $key) {
+  @return map.get(map.deep-merge($map, $map2), $key);
+}
+
+/// Set this to the background color of your page. It's needed for example for some things that fade into the background color (that are over another element).
+$page-background-color: white !default;
+
+$base-colors: () !default;
+$base-colors-defaults: (
+  1000: #000,
+  800: #0f0f0f,
+  600: #333335,
+  500: #868689,
+  400: #cbcbcc,
+  300: #e4e4e5,
+  200: #f3f3f5,
+  100: #fafafc,
+  0: #fff,
+  "deprecated-grey": #e7e8e7,
+);
+
+$text-icon-colors: () !default;
+$text-icon-colors-defaults: (
+  "base": (
+    "default": get-merged($base-colors-defaults, $base-colors, 800),
+    "hover": get-merged($base-colors-defaults, $base-colors, 600),
+    "pressed": get-merged($base-colors-defaults, $base-colors, 1000),
+    "disabled": get-merged($base-colors-defaults, $base-colors, 400),
+  ),
+  "neutral": (
+    "default": get-merged($base-colors-defaults, $base-colors, 600),
+    "hover": get-merged($base-colors-defaults, $base-colors, 800),
+    "pressed": get-merged($base-colors-defaults, $base-colors, 1000),
+    "disabled": get-merged($base-colors-defaults, $base-colors, 400),
+  ),
+  "subtle": (
+    "default": get-merged($base-colors-defaults, $base-colors, 500),
+    "hover": get-merged($base-colors-defaults, $base-colors, 600),
+    "pressed": get-merged($base-colors-defaults, $base-colors, 800),
+    "disabled": get-merged($base-colors-defaults, $base-colors, 400),
+  ),
+  "inverse": (
+    "default": get-merged($base-colors-defaults, $base-colors, 0),
+    "hover": get-merged($base-colors-defaults, $base-colors, 200),
+    "pressed": get-merged($base-colors-defaults, $base-colors, 300),
+    "disabled": get-merged($base-colors-defaults, $base-colors, 500),
+  ),
+);
+
+$border-colors: () !default;
+$border-colors-defaults: (
+  "base": (
+    "default": get-merged($base-colors-defaults, $base-colors, 800),
+    "hover": get-merged($base-colors-defaults, $base-colors, 600),
+    "pressed": get-merged($base-colors-defaults, $base-colors, 1000),
+    "disabled": get-merged($base-colors-defaults, $base-colors, 400),
+  ),
+  "neutral": (
+    "default": get-merged($base-colors-defaults, $base-colors, 400),
+    "hover": get-merged($base-colors-defaults, $base-colors, 500),
+    "pressed": get-merged($base-colors-defaults, $base-colors, 700),
+    "disabled": get-merged($base-colors-defaults, $base-colors, 300),
+  ),
+  "subtle": (
+    "default": get-merged($base-colors-defaults, $base-colors, 300),
+    "hover": get-merged($base-colors-defaults, $base-colors, 400),
+    "pressed": get-merged($base-colors-defaults, $base-colors, 500),
+    "disabled": get-merged($base-colors-defaults, $base-colors, 200),
+  ),
+  "inverse": (
+    "default": get-merged($base-colors-defaults, $base-colors, 0),
+    "hover": get-merged($base-colors-defaults, $base-colors, 400),
+    "pressed": get-merged($base-colors-defaults, $base-colors, 300),
+    "disabled": get-merged($base-colors-defaults, $base-colors, 500),
+  ),
+);
+
+$background-colors: () !default;
+$background-colors-defaults: (
+  "base": (
+    "default": get-merged($base-colors-defaults, $base-colors, 0),
+    "hover": get-merged($base-colors-defaults, $base-colors, 200),
+    "pressed": get-merged($base-colors-defaults, $base-colors, 300),
+    "disabled": get-merged($base-colors-defaults, $base-colors, 100),
+  ),
+  "neutral": (
+    "default": get-merged($base-colors-defaults, $base-colors, 300),
+    "hover": get-merged($base-colors-defaults, $base-colors, 400),
+    "pressed": get-merged($base-colors-defaults, $base-colors, 200),
+    "disabled": get-merged($base-colors-defaults, $base-colors, 100),
+  ),
+  "subtle": (
+    "default": get-merged($base-colors-defaults, $base-colors, 200),
+    "hover": get-merged($base-colors-defaults, $base-colors, 300),
+    "pressed": get-merged($base-colors-defaults, $base-colors, 400),
+    "disabled": get-merged($base-colors-defaults, $base-colors, 100),
+  ),
+  "inverse": (
+    "default": get-merged($base-colors-defaults, $base-colors, 800),
+    "hover": get-merged($base-colors-defaults, $base-colors, 600),
+    "pressed": get-merged($base-colors-defaults, $base-colors, 1000),
+    "disabled": get-merged($base-colors-defaults, $base-colors, 400),
+  ),
+);
+
+/// Change this to what's available in your font
+$font-weights: () !default;
+$font-weights-defaults: (
+  300: 300,
+  400: 400,
+  500: 500,
+  600: 600,
+);
+
 /// The base z-index of the modal
-$base-z-index: 5000;
+$base-z-index: 5000 !default;
 /// The z-index of the search page
-$search-page-base-z-index: 1;
+$search-page-base-z-index: 1 !default;
 /// The border radius to use. This is used in many places and not often exactly this value. Sometimes a multiple is used and if it's 0 then everything will be square
 ///
 /// Does re-assigning this variable with, for example, `PLP.$border-radius: 0` or `variables.$border-radius: 0` give an error in your IDE?
 /// Please upvote the Jetbrains issue (and maybe also comment why this is an issue for you) to get it fixed in WebStorm: https://youtrack.jetbrains.com/issue/WEB-46500
-$border-radius: 4px;
+$border-radius: 4px !default;
 
-/// Makes the PLP.all-components mixin use WhiteSortAndFilter instead of SortAndFilter
-$white: true !default;
+// The color of the progress bar below the toast that shows when it will auto-close
+$toast-progress-bar-color: map.get(
+  get-merged($text-icon-colors-defaults, $text-icon-colors, "base"),
+  "default"
+) !default;
 
-// Instant Card
-$instant-card-sales-price-color: #ff2e3e;
-$instant-card-show-price: true;
-$instant-card-show-tagline: true;
+/// Sometimes text is all uppercase in the UI. This is the default text transform used to do that that. For example, if you don't want uppercase text, you can set this to `none`
+$uppercase-text-transform: uppercase !default;
+
+$filters-configuration: () !default;
+$filters-configuration-defaults: (
+  /// How much space should be between the input rows. Input row being a checkbox/radio button and its label.
+  "spacing-between-input-rows": 10px,
+  /// How high an "input row" should try to be. Input row being a checkbox/radio button and its label. If this is smaller than the text size, it will be ignored.
+  "input-row-height-goal": 21px
+);
+
+$search-modal: () !default;
+$search-modal-defaults: (
+  /// The max width of the modal
+  /// Also used for the max width of SearchField on the search page
+  "max-width": 800px,
+  /// If the modal should snap to the top at certain screen sizes, only recommended to disable if you take care of this via JS
+  "top-snapping": true
+);
 
-// Doesn't work well in IDEs
-$g-instant-card: (
+/// Configuration for the buttons that show up when scrolling up after not being too close to the top on mobile
+$floating-buttons: () !default;
+$floating-buttons-defaults: (
+  /// The distance from the bottom of the buttons to the bottom of the screen.
+  "bottom-distance": 12px,
+  // The distance from the `$position`-side of the buttons to the `$position`-side of the screen.
+  "side-distance": 12px,
+  //The side of the screen the buttons should be aligned to. Can be "left" or "right".
+  "position": "left"
+);
+
+/// Background of the SearchField
+$search-field: () !default;
+$search-field-defaults: (
+  /// The background color of the input field, clear button and back buton
+  "background": map.get(get-merged($background-colors-defaults, $background-colors, "base"), "default"),
+  /// Border radius of the outer edges of the whole SearchField
+  "border-radius": calc(#{$border-radius} * 2.5)
+);
+
+/// Not all gaps can currently be customised using this but some of them do. If this is useful for you and you think we should make it more consistent, please let us know.
+$gaps: () !default;
+$gaps-defaults: (
+  /// The gap between the individual instant results in the modal
+  "between-instant-results": 5px,
+  /// The query suggestion part of the modal
+  "autocomplete":
+    (
+      /// The vertical gap between the "list-style items", the individual suggestions that have the full width.
+      "between-items-in-row-mode": 5px,
+      /// The vertical gap between the category and query suggestion sections
+      "between-category-and-other": 20px,
+      /// The horizontal gap between the individual query suggestions that show up in "compact" mode (multiple in the same row) when no query has been entered
+      "between-compact-suggestions": 5px
+    ),
+  /// The product listing page (PLP) overall
+  /// Note that for the gaps here not the exact values will always be used but often multiples for different places where it's appropriate.
+  "listing-page":
+    (
+      /// The spacing between the filters and content.
+      "spacing-to-filters": 12px,
+      /// The vertical gap between the different items on desktop.
+      "desktop-item-gap": 20px,
+      /// The vertical gap between the different items on mobile.
+      "mobile-item-gap": 16px,
+      /// Spacing above and below selected filters
+      "above-and-below-selected-filters":
+        (
+          "mobile": 10px,
+          "desktop": 0,
+        ),
+      /// Values specific to the search page
+      "search":
+        (
+          /// Whether to add equal spacing above the search field as below.
+          "spacing-above-search-field": true,
+          /// The factor to multiply the gaps with to get the spacing above the recommendations.
+          "gap-to-recs-factor": 3
+        )
+    )
+);
+
+/// Customize Instant Card
+$instant-card: () !default;
+$instant-card-defaults: (
   "sales-price-color": #ff2e3e,
   "show-price": true,
-  "show-subtitle": true,
+  "show-tagline": true,
 );
 
-/// Configure the styling - right now only works for three variables.
-/// This is subject to change.
-///
-/// @param {String} $instant-card-sales-price-color [null]
-///   Determines the color of the sales price in the Instant Card component
-/// @param {Boolean} $instant-card-show-price [null]
-///   Determines if the price is shown in the Instant Card component
-/// @param {Boolean} $instant-card-show-tagline [null]
-///   Determines if the tagline is shown in the Instand Card component
-@mixin configure(
-  $instant-card-sales-price-color: null,
-  $instant-card-show-price: null,
-  $instant-card-show-tagline: null
-) {
-  @if $instant-card-sales-price-color != null {
-    $instant-card-sales-price-color: $instant-card-sales-price-color !global;
-  }
-  @if $instant-card-show-price != null {
-    $instant-card-show-price: $instant-card-show-price !global;
-  }
-  @if $instant-card-show-tagline != null {
-    $instant-card-show-tagline: $instant-card-show-tagline !global;
-  }
+/// See documentation of Autocomplete mixin for explanation of these maps
+/// They allow customizing the highlighting in the query suggestions
+$autocomplete-entries-without-highlight: () !default;
+$autocomplete-entries-with-highlight: () !default;
+
+$primary-button: () !default;
+$secondary-button: () !default;
+
+/// Makes it easy to get the text color
+/// @param {"base" | "neutral" | "subtle" | "inverse"} $type - What type of color
+/// @param {"default" | "hover" | "pressed" | "disabled"} $state ["base"] - The state
+@function get-text-color($type, $state) {
+  @return map.get(get-merged($text-icon-colors-defaults, $text-icon-colors, $type), $state);
+}
+
+/// Makes it easy to get the border color
+/// @param {"base" | "neutral" | "subtle" | "inverse"} $type - What type of color
+/// @param {"default" | "hover" | "pressed" | "disabled"} $state ["base"] - The state
+@function get-border-color($type, $state) {
+  @return map.get(get-merged($border-colors-defaults, $border-colors, $type), $state);
+}
+
+/// Makes it easy to get the background color
+/// @param {"base" | "neutral" | "subtle" | "inverse"} $type - What type of color
+/// @param {"default" | "hover" | "pressed" | "disabled"} $state ["base"] - The state
+@function get-background-color($type, $state) {
+  @return map.get(get-merged($background-colors-defaults, $background-colors, $type), $state);
+}
+
+/// Makes it easy to get font weight
+/// @param {300 | 400 | 500 | 600} $type - What type of font weight to get (light, regular, medium or bold)
+@function get-font-weight($type) {
+  @return get-merged($font-weights-defaults, $font-weights, $type);
+}
+
+@function get-gap($name) {
+  @return get-merged($gaps-defaults, $gaps, $name);
 }

package/dist-server/index.d.ts

@@ -9,7 +9,7 @@ interface UseDepictSearchFieldReturn {
      */
     DepictSearchField: () => ReactElement;
 }
-export const version = "0.0.74";
+export const version = "0.0.75";
 export function DepictProvider(props: any): any;
 export function DepictSearchPage(): any;
 export function DepictCategoryPage(): any;

package/dist-server/main.js

@@ -19,7 +19,7 @@ $parcel$export(module.exports, "useDepictSearchModal", () => $41e7e5d85b5e0d49$e
 $parcel$export(module.exports, "version", () => $db7b67857900028b$export$83d89fbfd8236492);
 
 
-const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.74";
+const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.75";
 
 
 function $41e7e5d85b5e0d49$export$9fac37a9c21c2f3b(props) {

package/dist-server/module.js

@@ -3,7 +3,7 @@ import {jsx as $1RlIW$jsx} from "react/jsx-runtime";
 
 
 
-const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.74";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.75";
 
 
 function $2b1fdeb83610500f$export$9fac37a9c21c2f3b(props) {

package/locales/index.d.ts

@@ -1,2 +1,2 @@
-export type { plp_shared_i18n, search_i18n, category_i18n, Locale } from "@depict-ai/js-ui/locales";
-export { cz, de, en, da, fi, pl, fr, sv, pt, no, nl, es, it } from "@depict-ai/js-ui/locales";
+export type { plp_shared_i18n, search_i18n, category_i18n, Locale } from "@depict-ai/ui/locales";
+export { cz, de, en, da, fi, pl, fr, sv, pt, no, nl, es, it } from "@depict-ai/ui/locales";

package/locales/index.js

@@ -1 +1 @@
-export * from "@depict-ai/js-ui/locales";
+export * from "@depict-ai/ui/locales";

package/locales/require.js

@@ -1 +1 @@
-module.exports = require("@depict-ai/js-ui/locales");
+module.exports = require("@depict-ai/ui/locales");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/react-ui",
-  "version": "0.0.74",
+  "version": "0.0.75",
   "packageManager": "yarn@3.2.2",
   "source": "src/index.ts",
   "main": "dist/main.js",
@@ -90,9 +90,8 @@
     "/locales"
   ],
   "dependencies": {
-    "@depict-ai/js-ui": "^0.0.1",
-    "@depict-ai/ui": "^0.0.52",
-    "@depict-ai/utilishared": "^0.0.49",
+    "@depict-ai/ui": "^0.0.53",
+    "@depict-ai/utilishared": "^0.0.50",
     "solid-js": "^1.6.2"
   },
   "peerDependencies": {
@@ -105,7 +104,7 @@
     "@babel/preset-typescript": "latest",
     "@babel/runtime": "latest",
     "@babel/runtime-corejs3": "latest",
-    "@depict-ai/plp-styling": "^0.0.13",
+    "@depict-ai/plp-styling": "^0.0.14",
     "@jest/globals": "^29.3.1",
     "@parcel/babel-preset-env": "latest",
     "@parcel/resolver-default": "^2.8.0",

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

@@ -1,152 +0,0 @@
-@use "../../../helpers/utils";
-@use "../../../helpers/custom_input";
-@use "SortAndFilterModal";
-@use "../MorphingSign";
-@use "../../../variables";
-@use "../../../helpers/supports-hover";
-@use "SortAndFilter";
-
-/// A wrapper around SortAndFilter that styles the sorting and filtering menus for the white theme by providing a default set of white variables.
-///
-/// ### Parameters
-/// See [SortAndFilter](#undefined-mixin-SortAndFilter) for parameters.
-@mixin WhiteSortAndFilter(
-  $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,
-  $clear-all-filters-color: #fff,
-  $top-level-summary-background: transparent,
-  $hovered-top-level-summary-background: variables.$brand-lightest-grey,
-  $hovered-range-input-bg-color: variables.$brand-lighter-grey,
-  $hovered-checkbox-bg: variables.$brand-lighter-grey,
-  $hovered-checkbox-checked-background-color: variables.$brand-dark-grey,
-  $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: variables.$brand-dark-grey,
-  $filter-groups-morphing-sign-color: variables.$brand-dark-grey,
-  $filter-group-border-color: variables.$brand-light-grey,
-  $filter-group-summary-border-radius: 0px,
-  $sort-and-filter-modal-background: white,
-  $filter-group-heading-padding: 15px 10px,
-  $filter-group-summary-spacings: 0px,
-  $range-input-field-border-radius: 0px,
-  $range-input-field-border: 0.5px solid #000000,
-  $filter-group-title-bold: 500,
-  $view-more-clear-background: white,
-  $filter-collapsible-body-background: white,
-  $sort-and-filter-modal-section-title-font-weight: bold,
-  $sort-and-filter-modal-section-expanded-title-font-weight: $sort-and-filter-modal-section-title-font-weight,
-  $expanded-filter-group-border-color: variables.$brand-lighter-grey,
-  $view-more-clear-border-color: variables.$brand-lighter-grey
-) {
-  @include SortAndFilter.SortAndFilter(
-    $mobile-top-level-collapse-color,
-    $mobile-top-level-collapse-background,
-    $custom-input-checked-background,
-    $custom-input-background,
-    $custom-input-indicator-color,
-    $checkbox-background-color,
-    $checkbox-checked-background-color,
-    $checkbox-checkmark-color,
-    $checkbox-border-radius,
-    $checkbox-border,
-    $checkbox-top-offset,
-    $checkbox-left-offset,
-    $radio-border,
-    $radio-background-color,
-    $radio-selected-dot-color,
-    $radio-selected-dot-size,
-    $radio-selected-offset,
-    $separator-color,
-    $price-range-min-max-text-color,
-    $range-input-bg-color,
-    $top-level-summary-background,
-    $hovered-top-level-summary-background,
-    $hovered-range-input-bg-color,
-    $hovered-checkbox-bg,
-    $hovered-checkbox-checked-background-color,
-    $input-row-label-color,
-    $checked-input-row-label-color,
-    $input-row-label-font-weight,
-    $checked-input-row-label-font-weight,
-    $showing-selected-subfilter-count-color,
-    $filter-available-products-color,
-    $count-zero-input-row-label-color,
-    $spacing_between_input_rows,
-    $ungrouped-top-margin,
-    $hovered-checkbox-border,
-    $hovered-radio-border,
-    $sort-and-filter-button-padding,
-    $expandable-seperator-color,
-    $expandable-seperator-hover-color,
-    $expandable-seperator-height,
-    $filter-group-heading-color,
-    $filter-groups-morphing-sign-color,
-    $filter-group-summary-border-radius,
-    $sort-and-filter-modal-background,
-    $filter-group-heading-padding,
-    $filter-group-summary-spacings,
-    $range-input-field-border-radius,
-    $range-input-field-border,
-    $filter-group-title-bold,
-    $view-more-clear-background,
-    $filter-collapsible-body-background,
-    $sort-and-filter-modal-section-title-font-weight,
-    $sort-and-filter-modal-section-expanded-title-font-weight
-  );
-  .filters .body {
-    details.filter-collapsible {
-      border-top: 1px solid $filter-group-border-color;
-      &[open] {
-        & > summary {
-          border-bottom: 1px solid $expanded-filter-group-border-color;
-        }
-      }
-      .filter-collapsible-body {
-        margin-bottom: 15px;
-      }
-    }
-    .view-more-clear {
-      border-top: 1px solid $view-more-clear-border-color;
-    }
-  }
-  .filter-sort-modal details {
-    &.sorting,
-    &.filters {
-      .sort-filter-summary > .summary {
-        border-top: 1px solid #f4f4f4;
-      }
-    }
-  }
-}