@depict-ai/react-ui 0.0.74 → 0.0.76

package/dist/module.js

@@ -1,16 +1,15 @@
 import {add_to_version_info as $TZSbU$add_to_version_info, catchify as $TZSbU$catchify, observer as $TZSbU$observer, history_replacer as $TZSbU$history_replacer, queueMacroTask as $TZSbU$queueMacroTask, href_change_ipns as $TZSbU$href_change_ipns, ContainedPlaceholderImage as $TZSbU$ContainedPlaceholderImage, Placeholder as $TZSbU$Placeholder} from "@depict-ai/utilishared";
-import {CategoryTitle as $43099132aad1ceb6$re_export$CategoryTitle, EmbeddedNumProducts as $43099132aad1ceb6$re_export$EmbeddedNumProducts, DepictSearch as $TZSbU$DepictSearch, DepictCategory as $TZSbU$DepictCategory, DepictSearchPage as $TZSbU$DepictSearchPage, DepictCategoryPage as $TZSbU$DepictCategoryPage, BreadCrumbs as $TZSbU$BreadCrumbs, QuickLinks as $TZSbU$QuickLinks, OpenModalWithAlignment as $TZSbU$OpenModalWithAlignment, SearchField as $TZSbU$SearchField} from "@depict-ai/js-ui";
+import {CategoryTitle as $43099132aad1ceb6$re_export$CategoryTitle, embedded_num_products as $43099132aad1ceb6$re_export$EmbeddedNumProducts, DepictSearch as $TZSbU$DepictSearch, DepictCategory as $TZSbU$DepictCategory, get_search_query_updating_blocked_signal as $TZSbU$get_search_query_updating_blocked_signal, SearchPage as $TZSbU$SearchPage, CategoryPage as $TZSbU$CategoryPage, BreadCrumbs as $TZSbU$BreadCrumbs, QuickLinks as $TZSbU$QuickLinks, open_modal_with_alignment as $TZSbU$open_modal_with_alignment, SearchField as $TZSbU$SearchField} from "@depict-ai/ui";
 import {createRoot as $TZSbU$createRoot, untrack as $TZSbU$untrack, createSignal as $TZSbU$createSignal, createComponent as $TZSbU$createComponent, Show as $TZSbU$Show, onCleanup as $TZSbU$onCleanup, createComputed as $TZSbU$createComputed} from "solid-js";
 import {createElement as $TZSbU$createElement, Fragment as $TZSbU$Fragment, useState as $TZSbU$useState, useRef as $TZSbU$useRef, useEffect as $TZSbU$useEffect, forwardRef as $TZSbU$forwardRef} from "react";
-import {en as $TZSbU$en} from "@depict-ai/js-ui/locales";
+import {en as $TZSbU$en} from "@depict-ai/ui/locales";
 import {render as $TZSbU$render} from "solid-js/web";
 import {jsx as $TZSbU$jsx} from "react/jsx-runtime";
 import {createPortal as $TZSbU$createPortal} from "react-dom";
-import {get_search_query_updating_blocked_signal as $TZSbU$get_search_query_updating_blocked_signal} from "@depict-ai/ui";
 
 /*! Depict.ai search and product listing react SDK wrapper */ // This is where the actual source of your React stuff should live
 // Note, if you add an export here, also add one in src-server/main.ts
-const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.74";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.76";
 
 
 
@@ -178,10 +177,11 @@ function $5376eb2a386cd90d$export$9fac37a9c21c2f3b(props) {
         const { search: search , category: category  } = (0, $42858f023ef23dab$export$8e769ad4338a911e);
         const [get_search_page_path, set_search_page_path] = (0, $42858f023ef23dab$export$8e769ad4338a911e).search_page_path_;
         set_search_page_path($5376eb2a386cd90d$var$ensure_correct_formatting(searchPagePath));
-        const on_navigation = typeof window?.next?.router !== "undefined" || navigateFunction ? (new_relative_url)=>{
+        if (typeof window?.next?.router === "undefined" && !navigateFunction) throw new Error("You must provide a navigateFunction when not using Next.js.");
+        const on_navigation = (new_relative_url)=>{
             if (navigateFunction) navigateFunction(new_relative_url);
             else (0, $7216ca4c8308a0f9$export$599d4515591ef232)(new_relative_url);
-        } : undefined;
+        };
         if (!search) (0, $TZSbU$createRoot)(()=>(0, $42858f023ef23dab$export$8e769ad4338a911e).search = new (0, $TZSbU$DepictSearch)({
                 search_query_url_param_name: urlParamName,
                 market: market,
@@ -226,7 +226,7 @@ function $5376eb2a386cd90d$var$ensure_correct_formatting(path) {
 
 
 
-const $4db0e2f013fc5124$export$3f4580d6398c5027 = /*#__PURE__*/ (0, $TZSbU$forwardRef)((_, ref)=>{
+const $421f32789b6f111f$export$80e99ee6b29cadd2 = /*#__PURE__*/ (0, $TZSbU$forwardRef)((_, ref)=>{
     return /*#__PURE__*/ (0, $TZSbU$createElement)("div", {
         className: "depict aligner",
         style: {
@@ -242,7 +242,7 @@ const $4db0e2f013fc5124$export$3f4580d6398c5027 = /*#__PURE__*/ (0, $TZSbU$forwa
 
 
 
-function $4a678f0c87b12e78$export$210723f5a54a7028(props) {
+function $4a678f0c87b12e78$export$a54ec244c8863715(props) {
     return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)((0, $c83ba9ab79386687$export$e5139bbbb9a05035)($4a678f0c87b12e78$var$SolidSearchPage), props);
 }
 function $4a678f0c87b12e78$var$SolidSearchPage(props, set_portals) {
@@ -261,7 +261,7 @@ function $4a678f0c87b12e78$var$SolidSearchPage(props, set_portals) {
         update_updating_blocked_signal();
     });
     const component_portals = new Set();
-    return (0, $TZSbU$DepictSearchPage)({
+    return (0, $TZSbU$SearchPage)({
         // Default config goes here
         include_input_field: props.includeInputField ?? true,
         cols_at_size: props.columnsAtSize ?? [
@@ -296,7 +296,7 @@ function $4a678f0c87b12e78$var$SolidSearchPage(props, set_portals) {
 
 
 let $48d7f568740a317d$var$render_cb;
-function $48d7f568740a317d$export$d87c61cecb2edf0d(props) {
+function $48d7f568740a317d$export$f7d2f673fc2f091d(props) {
     return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)((0, $c83ba9ab79386687$export$e5139bbbb9a05035)($48d7f568740a317d$var$SolidCategoryPage), props, "div", {}, (props)=>$48d7f568740a317d$var$render_cb?.(props));
 }
 function $48d7f568740a317d$var$SolidCategoryPage(props, set_portals) {
@@ -310,7 +310,7 @@ function $48d7f568740a317d$var$SolidCategoryPage(props, set_portals) {
     };
     $48d7f568740a317d$var$render_cb(props);
     const component_portals = new Set();
-    const category = ()=>(0, $TZSbU$DepictCategoryPage)({
+    const category = ()=>(0, $TZSbU$CategoryPage)({
             depict_category: depict_category,
             cols_at_size: props.columnsAtSize ?? [
                 [
@@ -398,16 +398,16 @@ const $cbd250061abf11cb$export$89c6019e4baa40b1 = ({ width: width , height: heig
 
 
 
-const $5e26376d86621891$export$d69d8daa20eae175 = (createOpenModalParams)=>{
+const $41cab674edff4277$export$d69d8daa20eae175 = (createOpenModalParams)=>{
     const { globalState: globalState , location: location = "centered" , alignerRef: alignerRef  } = createOpenModalParams;
     const openModal = ()=>{
         if (globalState.search) {
-            if (location === "aligned" && alignerRef?.current) (0, $TZSbU$OpenModalWithAlignment)({
+            if (location === "aligned" && alignerRef?.current) (0, $TZSbU$open_modal_with_alignment)({
                 "element": alignerRef.current,
                 "location": location,
                 "search": globalState.search
             });
-            else (0, $TZSbU$OpenModalWithAlignment)({
+            else (0, $TZSbU$open_modal_with_alignment)({
                 "location": "centered",
                 "search": globalState.search
             });
@@ -417,8 +417,8 @@ const $5e26376d86621891$export$d69d8daa20eae175 = (createOpenModalParams)=>{
 };
 
 
-function $cfa72c75e6cf6901$export$cc1e9aaf280afdcb(params = {}) {
-    const open = (0, $5e26376d86621891$export$d69d8daa20eae175)({
+function $70344e5e0d0fea06$export$912994940e660d32(params = {}) {
+    const open = (0, $41cab674edff4277$export$d69d8daa20eae175)({
         globalState: $42858f023ef23dab$export$8e769ad4338a911e,
         ...params
     });
@@ -431,7 +431,7 @@ function $cfa72c75e6cf6901$export$cc1e9aaf280afdcb(params = {}) {
 
 
 
-const $a732d80ca44c466d$export$bde46b5bb6287cea = (props)=>{
+const $cdd7408b22d1586a$export$bde46b5bb6287cea = (props)=>{
     const ReactSearchField = ()=>{
         return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)((0, $c83ba9ab79386687$export$e5139bbbb9a05035)(()=>(0, $TZSbU$SearchField)({
                 depict_search: (0, $42858f023ef23dab$export$8e769ad4338a911e).search,
@@ -442,12 +442,12 @@ const $a732d80ca44c466d$export$bde46b5bb6287cea = (props)=>{
 };
 
 
-const $e3ccaca62718bae4$export$45080d603eda647c = (props)=>{
-    const SearchField = (0, $a732d80ca44c466d$export$bde46b5bb6287cea)({
+const $2b886cf548a4775c$export$9bb30bbe003b82e0 = (props)=>{
+    const SearchField = (0, $cdd7408b22d1586a$export$bde46b5bb6287cea)({
         alignerRef: props?.alignerRef
     });
     return {
-        DepictSearchField: SearchField
+        SearchField: SearchField
     };
 };
 
@@ -473,4 +473,4 @@ const $97603d19204ec48d$export$b8a61e5c71402559 = {
 (0, $TZSbU$add_to_version_info)("react-ui", (0, $c9c4d066f9a5b51b$export$83d89fbfd8236492));
 
 
-export {$b68a14248b7ef667$export$466cdc317043f6cb as QuickLinks, $f866f7ed9f751af4$export$5646050d516e06bc as BreadCrumbs, $4db0e2f013fc5124$export$3f4580d6398c5027 as DepictAligner, $5376eb2a386cd90d$export$9fac37a9c21c2f3b as DepictProvider, $48d7f568740a317d$export$d87c61cecb2edf0d as DepictCategoryPage, $4a678f0c87b12e78$export$210723f5a54a7028 as DepictSearchPage, $f446a84f85ba06f6$export$3f37af283f8fb843 as ImagePlaceholder, $cbd250061abf11cb$export$89c6019e4baa40b1 as TextPlaceholder, $cfa72c75e6cf6901$export$cc1e9aaf280afdcb as useDepictSearchModal, $e3ccaca62718bae4$export$45080d603eda647c as useDepictSearchField, $43099132aad1ceb6$re_export$CategoryTitle as CategoryTitle, $43099132aad1ceb6$re_export$EmbeddedNumProducts as EmbeddedNumProducts, $c9c4d066f9a5b51b$export$83d89fbfd8236492 as version, $97603d19204ec48d$export$b8a61e5c71402559 as Navigation};
+export {$b68a14248b7ef667$export$466cdc317043f6cb as QuickLinks, $f866f7ed9f751af4$export$5646050d516e06bc as BreadCrumbs, $421f32789b6f111f$export$80e99ee6b29cadd2 as ComponentAligner, $5376eb2a386cd90d$export$9fac37a9c21c2f3b as DepictProvider, $48d7f568740a317d$export$f7d2f673fc2f091d as CategoryPage, $4a678f0c87b12e78$export$a54ec244c8863715 as SearchPage, $f446a84f85ba06f6$export$3f37af283f8fb843 as ImagePlaceholder, $cbd250061abf11cb$export$89c6019e4baa40b1 as TextPlaceholder, $70344e5e0d0fea06$export$912994940e660d32 as useSearchModal, $2b886cf548a4775c$export$9bb30bbe003b82e0 as useSearchField, $43099132aad1ceb6$re_export$CategoryTitle as CategoryTitle, $43099132aad1ceb6$re_export$EmbeddedNumProducts as EmbeddedNumProducts, $c9c4d066f9a5b51b$export$83d89fbfd8236492 as version, $97603d19204ec48d$export$b8a61e5c71402559 as Navigation};

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

@@ -4,17 +4,15 @@
 @use "sass:color";
 @use "sass:map";
 
-$primary-button-overrides: ();
-$secondary-button-overrides: ();
-
 /// Used to get the current properties of the primary button. (`Buttons.$primary-button-overrides` merged into the default properties.) This is so that parts of the button styling can be re-used in other mixins in the state they were in as the mixins get called.
 /// @example
 ///  filter: map.get(Buttons.get-primary-button-properties(), "focus-visible-filter");
 @function get-primary-button-properties() {
   $primary-button-properties: (
-    "background": variables.$brand-black,
-    "color": #fff,
-    // so that the page doesn't jump when there's half a border when switching between having sort and filters open (the buttons switch between pimary and secondary)
+    "background": variables.get-background-color("inverse", "default"),
+    "hover-background": variables.get-background-color("inverse", "hover"),
+    "active-background": variables.get-background-color("inverse", "pressed"),
+    "color": variables.get-text-color("inverse", "default"),
     "border": 1px solid transparent,
     "border-radius": variables.$border-radius,
     "hover-filter": drop-shadow(-2px -2px 4px rgba(255, 255, 255, 0.25)) drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.15)),
@@ -22,7 +20,7 @@ $secondary-button-overrides: ();
     "focus-visible-filter": drop-shadow(2px 2px 4px rgba(65, 143, 195, 0.8))
       drop-shadow(-2px -2px 4px rgba(65, 143, 195, 0.8)),
   );
-  @return map.merge($primary-button-properties, $primary-button-overrides);
+  @return map.deep-merge($primary-button-properties, variables.$primary-button);
 }
 
 /// Used to get the current properties of the secondary button. (`Buttons.$secondary-button-overrides` merged into the default properties.) This is so that parts of the button styling can be re-used in other mixins in the state they were in as the mixins get called.
@@ -30,40 +28,25 @@ $secondary-button-overrides: ();
 ///  filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
 @function get-secondary-button-properties() {
   $secondary-button-properties: (
-    "background": variables.$brand-lightest-grey,
-    "color": variables.$brand-dark-grey,
-    "border": 1px solid variables.$brand-black,
+    "background": variables.get-background-color("base", "default"),
+    "hover-background": variables.get-background-color("base", "hover"),
+    "active-background": variables.get-background-color("base", "pressed"),
+    "color": variables.get-text-color("base", "default"),
+    "border": variables.get-border-color("base", "default") 1px solid,
     "border-radius": variables.$border-radius,
     "hover-filter": drop-shadow(-2px -2px 4px rgba(255, 255, 255, 0.25)) drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.15)),
     "active-filter": drop-shadow(2px 2px 4px rgba(255, 255, 255, 0.25)) drop-shadow(-2px -2px 4px rgba(0, 0, 0, 0.15)),
     "focus-visible-filter": drop-shadow(-2px -2px 4px rgba(65, 143, 195, 0.8))
       drop-shadow(2px 2px 4px rgba(65, 143, 195, 0.8)),
   );
-  @return map.merge($secondary-button-properties, $secondary-button-overrides);
+  @return map.deep-merge($secondary-button-properties, variables.$secondary-button);
 }
 
 /// Generates styling for our primary buttons, including hover, active and focus-visible states
-///
-/// *Please only provide options to this mixin if you want to create styling for just a specific button.*
-///
-/// This mixin and the SecondaryButton mixin are currently specialties in how they get customised using maps. Everything that isn't customised using maps is subject to change in the future.
-////
-/// *For generally changing how the buttons look, override the $primary-button-overrides map with a custom map containing the properties you want to change.*
-/// See the example below.
-/// @example
-///   // To override styling (see explanation in description)
-///   Buttons.$primary-button-overrides: ("background": #3f322a, "color": rgb(240,240,240));
-/// @param {Color} $background [map.get(get-primary-button-properties(), "background")] - The background color of the button. From this color other button states will be automatically inferred by lightening or darkening it.
-///
-/// @param {Color} $color [map.get(get-primary-button-properties(), "color")] - The color of the button text
-/// @param {Border} $border [map.get(get-primary-button-properties(), "border")] - The button border
-/// @param {Number with unit} $border-radius [map.get(get-primary-button-properties(), "border-radius")] - The button border radius
-/// @param {Filter} $hover-filter [map.get(get-primary-button-properties(), "hover-filter")] - The filter to apply on hover
-/// @param {Filter} $active-filter [map.get(get-primary-button-properties(), "active-filter")] - The filter to apply on active
-/// @param {Filter} $focus-visible-filter [map.get(get-primary-button-properties(), "focus-visible-filter")] - The filter to apply on focus-visible (when the button is focused using keyboard navigation)
-
 @mixin PrimaryButton(
   $background: map.get(get-primary-button-properties(), "background"),
+  $hover-background: map.get(get-primary-button-properties(), "hover-background"),
+  $active-background: map.get(get-primary-button-properties(), "active-background"),
   $color: map.get(get-primary-button-properties(), "color"),
   $border: map.get(get-primary-button-properties(), "border"),
   $border-radius: map.get(get-primary-button-properties(), "border-radius"),
@@ -71,10 +54,11 @@ $secondary-button-overrides: ();
   $active-filter: map.get(get-primary-button-properties(), "active-filter"),
   $focus-visible-filter: map.get(get-primary-button-properties(), "focus-visible-filter")
 ) {
-  // not using button.primary since that's 100% going to conflict with existing declarations on sites
   button.major {
     @include Button(
       $background,
+      $hover-background,
+      $active-background,
       $color,
       $border,
       $border-radius,
@@ -88,27 +72,11 @@ $secondary-button-overrides: ();
 }
 
 /// Generates styling for our secondary buttons, including hover, active and focus-visible states
-///
-/// *Please only provide options to this mixin if you want to create styling for just a specific button.*
-///
-/// This mixin and the SecondaryButton mixin are currently specialties in how they get customised using maps. Everything that isn't customised using maps is subject to change in the future.
-////
-/// *For generally changing how the buttons look, override the $secondary-button-overrides map with a custom map containing the properties you want to change.*
-/// See the example below.
-/// @example
-///   // To override styling (see explanation in description)
-///   Buttons.$secondary-button-overrides: ("border": 1px solid #afafaf, "background": white);
-/// @param {Color} $background [map.get(get-secondary-button-properties(), "background")] - The background color of the button. From this color other button states will be automatically inferred by lightening or darkening it.
-///
-/// @param {Color} $color [map.get(get-secondary-button-properties(), "color")] - The color of the button text
-/// @param {Border} $border [map.get(get-secondary-button-properties(), "border")] - The button border
-/// @param {Number with unit} $border-radius [map.get(get-secondary-button-properties(), "border-radius")] - The button border radius
-/// @param {Filter} $hover-filter [map.get(get-secondary-button-properties(), "hover-filter")] - The filter to apply on hover
-/// @param {Filter} $active-filter [map.get(get-secondary-button-properties(), "active-filter")] - The filter to apply on active
-/// @param {Filter} $focus-visible-filter [map.get(get-secondary-button-properties(), "focus-visible-filter")] - The filter to apply on focus-visible (when the button is focused using keyboard navigation)
 
 @mixin SecondaryButton(
   $background: map.get(get-secondary-button-properties(), "background"),
+  $hover-background: map.get(get-secondary-button-properties(), "hover-background"),
+  $active-background: map.get(get-secondary-button-properties(), "active-background"),
   $color: map.get(get-secondary-button-properties(), "color"),
   $border: map.get(get-secondary-button-properties(), "border"),
   $border-radius: map.get(get-secondary-button-properties(), "border-radius"),
@@ -116,10 +84,11 @@ $secondary-button-overrides: ();
   $active-filter: map.get(get-secondary-button-properties(), "active-filter"),
   $focus-visible-filter: map.get(get-secondary-button-properties(), "focus-visible-filter")
 ) {
-  // not using button.secondary since that's 100% going to conflict with existing declarations on sites
   button.minor {
     @include Button(
       $background,
+      $hover-background,
+      $active-background,
       $color,
       $border,
       $border-radius,
@@ -134,6 +103,8 @@ $secondary-button-overrides: ();
 
 @mixin Button(
   $background,
+  $hover-background,
+  $active-background,
   $color,
   $border,
   $border-radius,
@@ -163,19 +134,19 @@ $secondary-button-overrides: ();
   @include supports-hover.supports-hover() {
     &:hover {
       filter: $hover-filter;
-      @include utils.highlight-background($normal-background: $background);
+      background: $hover-background;
     }
   }
   &:active {
     filter: $active-filter;
-    @include utils.highlight-background($normal-background: $background, $darken-factor: 10%, $lighten-factor: 20%);
+    background: $active-background;
   }
   &:focus {
     outline-style: none;
   }
   &:focus-visible {
     filter: $focus-visible-filter;
-    @include utils.highlight-background($normal-background: $background);
+    background: $hover-background;
   }
   @content;
 }

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

@@ -1,4 +1,6 @@
-@mixin MorphingSign($color: #fff) {
+@use "../../variables";
+
+@mixin MorphingSign() {
   .morphing-sign {
     /* https://stackoverflow.com/a/38136283 */
     border: 0;
@@ -8,7 +10,7 @@
 
     span {
       position: absolute;
-      background: $color;
+      background: variables.get-text-color("neutral", "default");
       border-radius: 2px;
     }
 

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

@@ -10,7 +10,7 @@
     flex-direction: column;
 
     .no-results {
-      background: white;
+      background: variables.$page-background-color;
       padding: 40px;
       display: flex;
       justify-content: flex-start;

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

@@ -1,14 +1,15 @@
 @use "../../helpers/utils";
+@use "../../variables";
+@use "sass:map";
 
 /// Styling that ties together the different components that are common to both Category and Search pages. Mainly takes care of margins and paddings but also sets the styling for .cards which is in both PLPResults and SearchRecommendations.
 ///
 /// Note that for the gaps not the exact values will always be used but often multiples for different places where it's appropriate.
-///
-/// @param {Number with size unit} $spacing-to-filters [12px] - The spacing between the filters and content.
-/// @param {Number with size unit} $desktop-item-gap [20px] - The vertical gap between the different items on desktop.
-/// @param {Number with size unit} $mobile-item-gap [16px] - The vertical gap between the different items on mobile.
 
-@mixin ProductListingPage($spacing-to-filters: 12px, $desktop-item-gap: 20px, $mobile-item-gap: 16px) {
+@mixin ProductListingPage() {
+  $spacing-to-filters: map.get(variables.get-gap("listing-page"), "spacing-to-filters");
+  $desktop-item-gap: map.get(variables.get-gap("listing-page"), "desktop-item-gap");
+  $mobile-item-gap: map.get(variables.get-gap("listing-page"), "mobile-item-gap");
   .listing-page {
     padding: $desktop-item-gap calc(#{$desktop-item-gap} / 2);
     @include mobile_sizes() {
@@ -65,24 +66,21 @@
 ///
 /// Note that for the gaps not the exact values will always be used but often multiples for different places where it's appropriate.
 ///
-/// @param {Number with size unit} $spacing-to-filters [12px] - The spacing between the filters and content.
-/// @param {Number with size unit} $desktop-item-gap [20px] - The vertical gap between the different items on desktop.
-/// @param {Number with size unit} $mobile-item-gap [16px] - The vertical gap between the different items on mobile.
-/// @param {Boolean} $spacing-above-search-field [true] - Whether to add equal spacing above the search field as below.
-/// @param {Number with size unit} $search-field-width [800px] - The max width of the search field field (if present)
-/// @param {Number} $gaps-to-recs-factor [3] - The factor to multiply the gaps with to get the spacing above the recommendations.
 
-@mixin SearchPage(
-  $spacing-to-filters: 12px,
-  $desktop-item-gap: 20px,
-  $mobile-item-gap: 16px,
-  $spacing-above-search-field: true,
-  $search-field-width: 800px,
-  $gap-to-recs-factor: 3
-) {
+@mixin SearchPage() {
+  $spacing-to-filters: map.get(variables.get-gap("listing-page"), "spacing-to-filters");
+  $desktop-item-gap: map.get(variables.get-gap("listing-page"), "desktop-item-gap");
+  $mobile-item-gap: map.get(variables.get-gap("listing-page"), "mobile-item-gap");
+  $gap-to-recs-factor: map.get(map.get(variables.get-gap("listing-page"), "search"), "gap-to-recs-factor");
+  $spacing-above-search-field: map.get(
+    map.get(variables.get-gap("listing-page"), "search"),
+    "spacing-above-search-field"
+  );
+
   .listing-page {
     .search-field {
-      width: min(100%, $search-field-width);
+      $max-width: variables.get-merged(variables.$search-modal-defaults, variables.$search-modal, "max-width");
+      width: min(100%, $max-width);
       align-self: center;
 
       @if $spacing-above-search-field {
@@ -143,11 +141,10 @@
 
 /// Styling that ties together the different components on the CategoryPage. Mainly takes care of margins and paddings.
 ///
-/// @param {Number with size unit} $spacing-to-filters [12px] - The spacing between the filters and content.
-/// @param {Number with size unit} $desktop-item-gap [20px] - The vertical gap between the different items on desktop.
-/// @param {Number with size unit} $mobile-item-gap [16px] - The vertical gap between the different items on mobile.
 
-@mixin CategoryPage($spacing-to-filters: 12px, $desktop-item-gap: 20px, $mobile-item-gap: 16px) {
+@mixin CategoryPage() {
+  $desktop-item-gap: map.get(variables.get-gap("listing-page"), "desktop-item-gap");
+  $mobile-item-gap: map.get(variables.get-gap("listing-page"), "mobile-item-gap");
   .listing-page {
     .quicklinks,
     .crumbs {

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

@@ -4,13 +4,9 @@
 ///
 /// If you too think that blurring the background would look great here, please take a minute to upvote this chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1382360
 ///
-/// @param {Color} $scroll-status-background [rgba(100, 100, 100, 0.9)] - The background color of the scroll status. I recommend setting a slightly transparent color.
 /// @param {Number with size unit} $border-radius [variables.$border-radius * 5] - The border-radius of the scroll status.
 
-@mixin ScrollStatus(
-  $scroll-status-background: rgba(100, 100, 100, 0.9),
-  $border-radius: calc(#{variables.$border-radius} * 5)
-) {
+@mixin ScrollStatus() {
   .scroll-status {
     pointer-events: none;
     position: sticky;
@@ -21,11 +17,12 @@
     z-index: calc(#{variables.$base-z-index} + 4);
     align-items: center;
     opacity: 0;
+
     .text {
-      background: $scroll-status-background;
-      color: white;
+      background: rgba(variables.get-background-color("inverse", "hover"), 0.75);
+      color: variables.get-text-color("inverse", "default");
       padding: 10px 20px;
-      border-radius: $border-radius;
+      border-radius: calc(#{variables.$border-radius} * 5);
     }
   }
 }

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

@@ -1,36 +1,36 @@
 @use "../../variables";
 @use "../../helpers/utils";
 @use "../../helpers/supports-hover";
-@use "./Buttons";
+@use "Buttons";
+@use "ProductListingPage";
 @use "sass:map";
 
 /// Mixin that styles the SelectedFilters component, which is the component that shows the selected filters if both the sorting and filtering menus are currently hidden.
-/// @param {Number with size unit} $border-radius [variables.$border-radius] - A local override of the border-radius variable.
-/// @param {String} $title-color [variables.$brand-black] - The color of the text that says "Filters:" (the key of this string is `selected_filters_title_` in the locale files).
-/// @param {String} $filter-title-transform [uppercase] - text-transform for the aforementioned "Filters:" string
-/// @param {Number with size unit} $margin-on-desktop [0px] - Margin above/below SelectedFilters on desktop. This is set here because ExpandingContainer, our expanding component, gets confused when the margin isn't precisely on this element. Otherwise this value would be in ProductListingPage.scss.
-/// @param {Boolean} $set-border-on-crumbs [true] - Whether to set a border on the "crumbs" (a crumb is one selected filter).
 
-@mixin SelectedFilters(
-  $border-radius: variables.$border-radius,
-  $title-color: variables.$brand-black,
-  $filter-title-transform: uppercase,
-  $margin-on-desktop: 0px,
-  $set-border-on-crumbs: true
-) {
+@mixin SelectedFilters() {
   .listing-page .selected-filters {
     .inner {
       // this is in here because it's an ExpandingContainer and the animation gets borked otherwise
-      margin-top: 10px;
-      margin-bottom: 10px;
+      $margin-on-desktop: map.get(
+        map.get(variables.get-gap("listing-page"), "above-and-below-selected-filters"),
+        "desktop"
+      );
+      $margin-on-mobile: map.get(
+        map.get(variables.get-gap("listing-page"), "above-and-below-selected-filters"),
+        "mobile"
+      );
+      margin-top: $margin-on-desktop;
+      margin-bottom: $margin-on-desktop;
       display: flex;
       align-items: center;
+
       .title {
         margin-right: 10px;
       }
-      @media (min-width: 652px) {
-        margin-top: $margin-on-desktop;
-        margin-bottom: $margin-on-desktop;
+
+      @include ProductListingPage.mobile_sizes() {
+        margin-top: $margin-on-mobile;
+        margin-bottom: $margin-on-mobile;
       }
 
       .title {
@@ -38,8 +38,8 @@
           display: none;
         }
         font-size: 1.1em;
-        text-transform: $filter-title-transform;
-        color: $title-color;
+        text-transform: variables.$uppercase-text-transform;
+        color: variables.get-text-color("base", "default");
       }
 
       .depict-slider {
@@ -47,18 +47,16 @@
         width: unset;
 
         .clear-filter {
-          @if $set-border-on-crumbs {
-            border: 1px solid map.get(Buttons.get-primary-button-properties(), "background");
-          }
+          border: 1px solid map.get(Buttons.get-primary-button-properties(), "background");
+
           svg {
             width: 12.64px;
             height: 12.64px;
           }
         }
+
         .clear-all-filters {
-          @if $set-border-on-crumbs {
-            border: map.get(Buttons.get-secondary-button-properties(), "border");
-          }
+          border: map.get(Buttons.get-secondary-button-properties(), "border");
         }
 
         .clear-filter,
@@ -70,12 +68,13 @@
           display: flex;
           @include utils.flex-gap(5px, "row nowrap");
           align-items: center;
-          border-radius: $border-radius;
+          border-radius: variables.$border-radius;
           font-size: 1em;
           line-height: 1;
           cursor: pointer;
         }
       }
+
       @content;
     }
   }

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

@@ -1,6 +1,6 @@
 // @use "../../../rendering/slider_button_positioning";
 @use "../../helpers/utils";
-@use "../../components/PLP/Buttons";
+@use "Buttons";
 @use "../../variables";
 @use "../../helpers/supports-hover";
 @use "sass:map";
@@ -52,10 +52,7 @@
 /// Most of the times SlidableItems is used for items laid out horizontally that do not fit the screen width.
 ///
 /// Examples are the QuickLinks (used to navigate sideways or downwards in the category tree) and the SelectedFilters (if not all selected filters fit on the screen).
-/// @param {Color} $fade-to [variables.$brand-lighter-grey] - The color the slider buttons fade to, set this to the background color behind the slider.
-/// @param {Color} fade-from [transparent] - The color the slider buttons fade from, you probably want to leave this at transparent.
-@mixin SlidableItems($fade-to: variables.$brand-lighter-grey, $fade-from: rgba(238, 238, 240, 0)) {
-  // TODO: we could probably infer these colours (and maybe some more) if we add some global background color variable
+@mixin SlidableItems() {
   .depict-slider {
     width: 100%;
     position: relative;
@@ -84,7 +81,7 @@
       padding-left: 0;
       padding-bottom: 0;
       width: 26px;
-      background: linear-gradient(270deg, $fade-to 50%, $fade-from 105%);
+      background: linear-gradient(270deg, variables.$page-background-color 50%, transparent 105%);
       display: flex;
       align-items: center;
       justify-content: flex-end;