@depict-ai/react-ui 0.0.74 → 0.0.75

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

@@ -1,16 +1,15 @@
 @use "../../../variables";
 @use "../../../helpers/utils";
+@use "sass:map";
 
 /// Mobile modal - taking arguments from SortAndFilter mixin so see SortAndFilter docs for more info
-@mixin SortAndFilterModal(
-  $mobile-top-level-collapse-color,
-  $mobile-top-level-collapse-background,
-  $close-icon-color: #fff,
-  $some-text-color: variables.$brand-dark-grey,
-  $sort-and-filter-modal-background: variables.$brand-lighter-grey,
-  $title-font-weight: false,
-  $expanded-title-font-weight: $title-font-weight
-) {
+@mixin SortAndFilterModal() {
+  $title-font-weight: variables.get-merged(variables.$font-weights-defaults, variables.$font-weights, 400);
+  $expanded-title-font-weight: variables.get-merged(variables.$font-weights-defaults, variables.$font-weights, 600);
+  $sort-and-filter-modal-background: #fff;
+  $mobile-top-level-collapse-background: $sort-and-filter-modal-background;
+  $mobile-top-level-collapse-color: variables.get-text-color("base", "default");
+
   .depict-filter-sort-modal-backdrop {
     @include utils.modal-backdrop($background: rgba(0, 0, 0, 0.7), $z-index: variables.$base-z-index);
     will-change: opacity;
@@ -31,7 +30,7 @@
     svg {
       transform: scale(0.6646);
       path {
-        fill: $close-icon-color;
+        fill: #fff;
       }
     }
   }
@@ -61,6 +60,7 @@
           }
         }
         .sort-filter-summary > .summary {
+          border-top: 1px solid #f4f4f4;
           cursor: pointer;
           box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
           color: $mobile-top-level-collapse-color;
@@ -95,13 +95,12 @@
       overflow-y: auto;
       display: flex;
       flex-direction: column;
-      background: $sort-and-filter-modal-background;
       @include utils.flex-gap(2px, "column nowrap");
     }
     .filters,
     .sorting {
       .body {
-        color: $some-text-color;
+        color: variables.get-text-color("neutral", "default");
       }
       & > summary {
         .morphing-sign span {

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

@@ -3,21 +3,23 @@
 
 /// Toast is a small, unobtrusive, banner that appears at the bottom of the page when we clear their filters when going sideways in the category tree (or they do it manually). The Toast has a button that allows them to get their filters back (restore them) in case they want it back.
 /// It's a general component otherwise and might also be used for other messages.
-/// @param {Number} $z-index [variables.$base-z-index * 5] - The z-index of the Toast.
-/// @param {Color} $progress-bar-color [variables.$brand-dark-grey] - The color of the progress bar below the toast that shows when it will auto-close.
 
-@mixin Toast($z-index: calc(#{variables.$base-z-index} + 5), $progress-bar-color: variables.$brand-dark-grey) {
+@mixin Toast() {
   .depict.plp.toast {
     position: fixed;
     bottom: 10px;
     left: 50%;
     transform: translateX(-50%);
-    z-index: $z-index;
+    z-index: calc(#{variables.$base-z-index} + 5);
     background: white;
     box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);
     padding: 10px 20px;
     border-radius: variables.$border-radius;
-    border-image-source: linear-gradient(90deg, $progress-bar-color 0%, $progress-bar-color 100%);
+    border-image-source: linear-gradient(
+      90deg,
+      variables.$toast-progress-bar-color 0%,
+      variables.$toast-progress-bar-color 100%
+    );
     border-image-slice: 0 0 100% 0;
     border-bottom-style: solid;
     border-bottom-width: 2px; // doesn't show in chrome sometimes without
@@ -47,7 +49,7 @@
     }
 
     & {
-      color: variables.$brand-dark-grey;
+      color: variables.get-text-color("base", "default");
     }
     button {
       padding: 5px 20px;

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

@@ -1,51 +1,15 @@
 @use "sass:meta";
 
-// Component style mixins
-@use "../../variables";
-@use "SelectedFilters";
-@use "ScrollStatus";
-@use "SlidableItems";
-@use "PLPResults";
-@use "SortAndFilter/SortAndFilter";
-@use "SortAndFilter/WhiteSortAndFilter";
-@use "SortAndFilter/FloatingButtons";
-@use "Toast";
-@use "ProductListingPage";
-@use "Buttons";
+/// Component style mixins for PLP
+/// PLP encompasses both Search and Category page, so you will always need to include these mixins.
 
 @forward "SelectedFilters";
 @forward "ScrollStatus";
 @forward "SlidableItems";
 @forward "PLPResults";
 @forward "SortAndFilter/SortAndFilter";
-@forward "SortAndFilter/WhiteSortAndFilter";
+@forward "SortAndFilter/SortAndFilterModal";
 @forward "SortAndFilter/FloatingButtons";
 @forward "Toast";
 @forward "ProductListingPage";
 @forward "Buttons";
-
-/// Default variables
-@forward "../../variables";
-
-/// Load all PLP mixins with default values. PLP encompasses both Search and Category page, so you will always need to include the mixins that this includes somehow. If only minor theming is needed styles in variables.scss can be
-/// reassigned: https://sass-lang.com/documentation/at-rules/use#reassigning-variables
-/// If more control is needed use these mixins separately and pass custom params
-
-@mixin all-PLP-components() {
-  .depict.plp {
-    @include PLPResults.PLPResults();
-    @include ProductListingPage.ProductListingPage();
-    @include SelectedFilters.SelectedFilters();
-    @include ScrollStatus.ScrollStatus();
-    @if variables.$white {
-      @include WhiteSortAndFilter.WhiteSortAndFilter();
-    } @else {
-      @include SortAndFilter.SortAndFilter();
-    }
-    @include FloatingButtons.FloatingButtons();
-    @include SlidableItems.SlidableItems();
-    @include Buttons.PrimaryButton();
-    @include Buttons.SecondaryButton();
-  }
-  @include Toast.Toast();
-}

package/dist/styles/components/category/BreadCrumbs.scss

@@ -1,32 +1,25 @@
 @use "../../variables";
 
 /// BreadCrumbs is the trail of links that shows the user where they are in the site hierarchy and allows them to go back up the tree. Often BreadCrumbs are located at the top of the page.
-/// @param {Color} $color [variables.$brand-dark-grey] - The color of the text.
-/// @param {Color} $separator-color [variables.$brand-grey] - The color of the separator between the links.
-/// @param {Color} $selected-color [variables.$brand-black] - The color of the last link in the trail (the one that is selected).
 
-@mixin BreadCrumbs(
-  $color: variables.$brand-dark-grey,
-  $separator-color: variables.$brand-grey,
-  $selected-color: variables.$brand-black
-) {
+@mixin BreadCrumbs() {
   .crumbs {
     display: flex;
     flex-wrap: wrap;
     .crumb {
-      color: $color;
+      color: variables.get-text-color("neutral", "default");
       &:hover {
         text-decoration: underline;
       }
       &:last-of-type {
-        color: $selected-color;
+        color: variables.get-text-color("base", "default");
         font-weight: 500;
       }
     }
     .separator {
       margin-left: 10px;
       margin-right: 10px;
-      color: $separator-color;
+      color: variables.get-text-color("subtle", "default");
     }
   }
 }

package/dist/styles/components/category/CategoryTitle.scss

@@ -5,15 +5,8 @@
 /// CategoryTitle is the component that shows the title of the current category along with the number of products in it.
 /// This component is optional. When setting up the SDK in TypeScript you can choose between using this component (CategoryTitle) or embedded_num_products which will just show the number of products in the category and allow you to add a title outside of the category page yourself.
 /// You only need to call the mixin if you're using the CategoryTitle component.
-/// @param {Number} $title-font-weight [700] - The font weight of the title
-/// @param {Number} $explanation-font-weight [500] - The font weight of the dash, number of products and "products" string
-/// @param {Color} $explanation-color [variables.$brand-grey] - The color of the dash, number of products and "products" string
 
-@mixin CategoryTitle(
-  $title-font-weight: 700,
-  $explanation-font-weight: 500,
-  $explanation-color: variables.$brand-grey
-) {
+@mixin CategoryTitle() {
   .category-title {
     overflow-wrap: anywhere;
     font-size: 1.5em;
@@ -26,12 +19,12 @@
     }
     .title {
       margin-right: 10px;
-      font-weight: $title-font-weight;
+      font-weight: 700;
       font-size: inherit;
     }
     .explanation {
-      color: $explanation-color;
-      font-weight: $explanation-font-weight;
+      color: variables.get-text-color("subtle", "default");
+      font-weight: 500;
       .product-count {
         margin-left: 10px;
       }

package/dist/styles/components/category/QuickLinks.scss

@@ -7,72 +7,49 @@
 
 /// The QuickLinks show the quick links to the subcategories or sibling categories of the current category.
 /// It enables to user to navigate to a subcategory or sibling category without having to go back to the category page.
-/// @param {Color} $background [white] - The background color of the individual quick links
-/// @param {Border | false} $border-radius [false] - Border radius override of the individual quick links. Set to false to use default border radius.
-/// @param {Color} $selected-background [map.get(Buttons.get-primary-button-properties(), "background")] - Background of the currently selected quick link
-/// @param {Color | false} $hovered-background [false] - Override background of the quick link when hovered. Set to false to automatically infer it.
 
-@mixin QuickLinks(
-  $background: white,
-  $border-radius: false,
-  $selected-background: map.get(Buttons.get-primary-button-properties(), "background"),
-  $hovered-background: false
-) {
+@mixin QuickLinks() {
   .quicklinks {
     overflow: hidden;
     .quicklink {
       white-space: nowrap;
       padding: 10px 20px;
-      background: $background;
-      color: variables.$brand-black;
+      background: variables.get-background-color("base", "default");
+      color: variables.get-text-color("base", "default");
       transition: all 75ms ease-in-out;
-      @if $border-radius {
-        border-radius: $border-radius;
-      } @else {
-        border-radius: variables.$border-radius;
-      }
+      border-radius: variables.$border-radius;
+      border: 1px solid variables.get-border-color("neutral", "default");
       &:focus {
         outline: none;
       }
       @include supports-hover.supports-hover() {
         &:hover {
-          @if $hovered-background {
-            background: $hovered-background;
-          } @else {
-            @include utils.highlight-background($normal-background: $background);
-          }
+          background: variables.get-background-color("base", "hover");
         }
       }
       &:focus-visible {
-        @if $hovered-background {
-          background: $hovered-background;
-        } @else {
-          @include utils.highlight-background($normal-background: $background);
-        }
+        background: variables.get-background-color("base", "hover");
         filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
       }
       &:active {
-        @include utils.highlight-background($normal-background: $background, $darken-factor: 10%, $lighten-factor: 20%);
+        background: variables.get-background-color("base", "pressed");
       }
       &.selected {
-        color: white;
-        background: $selected-background;
+        color: variables.get-text-color("inverse", "default");
+        background: variables.get-background-color("inverse", "default");
+        border: 1px solid transparent;
         @include supports-hover.supports-hover() {
           &:hover {
             // should we have this? since it's selected, nothing will happen when clicked
-            @include utils.highlight-background($normal-background: $selected-background);
+            background: variables.get-background-color("inverse", "hover");
           }
         }
         &:focus-visible {
-          @include utils.highlight-background($normal-background: $selected-background);
+          background: variables.get-background-color("inverse", "hover");
           filter: map.get(Buttons.get-primary-button-properties(), "focus-visible-filter");
         }
         &:active {
-          @include utils.highlight-background(
-            $normal-background: $selected-background,
-            $darken-factor: 10%,
-            $lighten-factor: 20%
-          );
+          background: variables.get-background-color("inverse", "pressed");
         }
       }
     }

package/dist/styles/components/category/index.scss

@@ -1,23 +1,7 @@
-// Component style mixins
-@use "BreadCrumbs";
-@use "QuickLinks";
-@use "CategoryTitle";
-@use "../PLP/ProductListingPage";
+/// Component style mixins for Category styling
+/// Don't forget to also include PLP styling
 
 @forward "BreadCrumbs";
 @forward "QuickLinks";
 @forward "CategoryTitle";
 @forward "../PLP/ProductListingPage";
-
-/// Load all category page mixins with default values. If only minor theming is needed styles in variables.scss can be
-/// reassigned: https://sass-lang.com/documentation/at-rules/use#reassigning-variables.
-/// The variables are forwarded from PLP/index.scss.
-/// If more control is needed use these mixins separately and pass custom params.
-@mixin all-category-components() {
-  .depict.category {
-    @include BreadCrumbs.BreadCrumbs();
-    @include QuickLinks.QuickLinks();
-    @include CategoryTitle.CategoryTitle();
-    @include ProductListingPage.CategoryPage();
-  }
-}

package/dist/styles/components/search/Autocomplete.scss

@@ -25,14 +25,6 @@
 /// <li><b>Toned down part:</b><br />
 /// The styling for the part of the suggestion that is not highlighted. This is the part of the suggestion that the user has already typed.</li></ol></li></ol>
 ///
-/// @param {Color} $background [white] background color on the individual suggestion items
-/// @param {Color} $selected-background [#ffffff80] background color on the individual suggestion items when they are selected (hovered or selected by keyboard navigating (up/down arrows))
-/// @param {Color} $icon-color [variables.$brand-black] - color of the clock, search and clear icon
-/// @param {Number with size unit} $autocomplete-gap-between-items-in-row-mode [5px] - The vertical gap between the "list-style items", the individual suggestions that have the full width.
-/// @param {Number with size unit} $autocomplete-gap-between-category-and-other [20px]- The vertical gap between the category and query suggestion sections
-/// @param {Number with size unit} $autocomplete-gap-between-compact-suggestions [$autocomplete-gap-between-items-in-row-mode] - 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
-/// @param {Color} $heading-color [variables.$brand-dark-grey] - The color of the heading of both the previous searches and the suggestions (all headings in the Autocomplete section)
-/// @param {Number} $heading-font-weight [700] - The font weight of all headings in the Autocomplete section
 /// @param {Map} $entries-without-highlight [("color": variables.$brand-dark-grey, "font-weight": 400)] - Map between *any* CSS property key to CSS value. The styling for the entries where nothing is highlighted, see the explanation above.
 /// @param {Map} $entries-with-highlight [(
 ///    "highlighted-part": (
@@ -68,67 +60,63 @@
 ///  );
 
 @mixin Autocomplete(
-  $background: white,
-  $selected-background: #ffffff80,
-  $icon-color: variables.$brand-black,
-  $autocomplete-gap-between-items-in-row-mode: 5px,
-  $autocomplete-gap-between-category-and-other: 20px,
-  $autocomplete-gap-between-compact-suggestions: $autocomplete-gap-between-items-in-row-mode,
-  $heading-color: variables.$brand-dark-grey,
-  $heading-font-weight: 700,
-  $entries-without-highlight: (),
-  $entries-with-highlight: ()
+  $entries-without-highlight: variables.$autocomplete-entries-without-highlight,
+  $entries-with-highlight: variables.$autocomplete-entries-with-highlight
 ) {
   $entries-without-highlight-defaults: (
-    "color": variables.$brand-dark-grey,
-    "font-weight": 400,
+    "color": variables.get-text-color("neutral", "default"),
+    "font-weight": variables.get-font-weight(400),
   );
   $entries-with-highlight-defaults: (
     "highlighted-part": (
-      "color": variables.$brand-dark-grey,
-      "font-weight": 500,
+      "color": variables.get-text-color("neutral", "default"),
+      "font-weight": variables.get-font-weight(500),
     ),
     "toned-down-part": (
-      "color": variables.$brand-dark-grey,
-      "font-weight": 400,
+      "color": variables.get-text-color("neutral", "default") y,
+      "font-weight": variables.get-font-weight(400),
     ),
   );
-  $merged-entries-without-highlight: map.merge($entries-without-highlight-defaults, $entries-without-highlight);
-  $merged-entries-with-highlight: map.merge($entries-with-highlight-defaults, $entries-with-highlight);
-  @include PreviousSearches.PreviousSearches(
-    $icon-color: $icon-color,
-    $item-color: map.get($merged-entries-without-highlight, "color"),
-    $gap-between-items: $autocomplete-gap-between-items-in-row-mode
-  );
+  $merged-entries-without-highlight: map.deep-merge($entries-without-highlight-defaults, $entries-without-highlight);
+  $merged-entries-with-highlight: map.deep-merge($entries-with-highlight-defaults, $entries-with-highlight);
+  @include PreviousSearches.PreviousSearches();
   .previous-searches,
   .suggestions {
     .text {
       font-size: 16px;
-      font-weight: $heading-font-weight;
-      color: $heading-color;
+      font-weight: variables.get-font-weight(700);
+      color: variables.get-text-color("neutral", "default");
       margin-top: 0;
     }
     .item,
     .suggestion {
-      background: $background;
+      background: variables.get-background-color("base", "default");
       &.selected {
-        background: $selected-background;
+        background: variables.get-background-color("neutral", "default");
       }
 
       &:focus-visible {
         outline: none;
         filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
       }
+
+      &:active {
+        background: variables.get-background-color("subtle", "pressed");
+      }
+
+      @each $property, $value in $merged-entries-without-highlight {
+        #{$property}: $value;
+      }
     }
   }
   .suggestions {
     display: flex;
     flex-direction: column;
-    @include utils.flex-gap($autocomplete-gap-between-category-and-other, "column nowrap");
+    @include utils.flex-gap(map.get(variables.get-gap("autocomplete"), "between-category-and-other"), "column nowrap");
 
     &:not(.compact) > .suggestion-container,
     &.compact > .suggestion-container:not(.query) {
-      @include utils.flex-gap($autocomplete-gap-between-items-in-row-mode, "column nowrap");
+      @include utils.flex-gap(map.get(variables.get-gap("autocomplete"), "between-items-in-row-mode"), "column nowrap");
     }
     .suggestion-container {
       display: flex;
@@ -142,9 +130,6 @@
         overflow-wrap: anywhere;
         align-items: center;
         border-radius: variables.$border-radius;
-        @each $property, $value in $merged-entries-without-highlight {
-          #{$property}: $value;
-        }
 
         padding: 10px 20px;
 
@@ -154,7 +139,7 @@
           svg {
             transform: scale(0.6) translate(-6.9px, -7.2px);
             path {
-              fill: $icon-color;
+              fill: variables.get-text-color("neutral", "default");
             }
           }
         }
@@ -191,7 +176,7 @@
     &.compact > .suggestion-container.query {
       flex-direction: row;
       flex-wrap: wrap;
-      @include utils.flex-gap($autocomplete-gap-between-compact-suggestions, "row wrap");
+      @include utils.flex-gap(map.get(variables.get-gap("autocomplete"), "between-compact-suggestions"), "row wrap");
     }
   }
 }

package/dist/styles/components/search/CategorySuggestions.scss

@@ -3,22 +3,7 @@
 @use "../../variables";
 
 /// CategorySuggestions is the component that displays suggested Categories on the SearchPage, above the results.
-/// @param {Color} $card-background [white] - The background color of individual category "cards"
-/// @param {false | Color} $hovered-card-background [false] - The background color of individual category "cards" when hovered. If false, a color is automatically obtained by lightening or darkening `$card-background`.
-/// @param {Border | false} $card-border [false] - The border of individual category "cards". If false, no border is applied.
-/// @param {Number with size unit} $card-border-radius [variables.$border-radius] - The border radius of individual category "cards"
-/// @param {Number} $title-font-weight [420] - The font weight of the text on the category "cards"
-/// @param {Number} $parent-title-font-weight [400] - The font weight of the text on the category "cards" that is the parent of proposed category (not always displayed)
-/// @param {Boolean} $thin [true] - If true, the category title and parent category title are displayed besides each other (in the same row).
-@mixin CategorySuggestions(
-  $card-background: white,
-  $hovered-card-background: false,
-  $card-border: false,
-  $card-border-radius: variables.$border-radius,
-  $title-font-weight: 420,
-  $parent-title-font-weight: 400,
-  $thin: true
-) {
+@mixin CategorySuggestions() {
   .category-suggestions {
     display: flex;
 
@@ -28,48 +13,34 @@
     }
 
     .title {
-      font-weight: $title-font-weight;
+      font-weight: variables.get-font-weight(500);
     }
     .category-suggestion {
-      background: $card-background;
+      background: variables.get-background-color("base", "default");
       transition: background 100ms ease-in-out;
 
-      &:focus {
-        @if $hovered-card-background {
-          background: $hovered-card-background;
-        } @else {
-          @include utils.highlight-background($normal-background: $card-background);
-        }
+      &:focus-visible {
+        background: variables.get-background-color("base", "hover");
       }
       @include supports-hover.supports-hover() {
         &:hover {
-          @if $hovered-card-background {
-            background: $hovered-card-background;
-          } @else {
-            @include utils.highlight-background($normal-background: $card-background);
-          }
+          background: variables.get-background-color("base", "hover");
         }
       }
-      border-radius: $card-border-radius;
-      @if $card-border {
-        border: $card-border;
+      &:active {
+        background: variables.get-background-color("base", "pressed");
       }
+      border: 1px solid variables.get-border-color("subtle", "default");
       padding: 10px 20px;
-      color: black;
+      color: variables.get-text-color("base", "default");
       display: flex;
       height: 100%;
       align-items: center;
-      @if $thin {
-        justify-content: space-between;
-        @include utils.flex-gap(10px, "row nowrap");
-      } @else {
-        justify-content: center;
-        flex-direction: column;
-        @include utils.flex-gap(10px, "column nowrap");
-      }
+      justify-content: space-between;
+      @include utils.flex-gap(10px, "row nowrap");
 
       .parent-title {
-        font-weight: $parent-title-font-weight;
+        font-weight: variables.get-font-weight(300);
       }
 
       & > * {

package/dist/styles/components/search/InstantCard.scss

@@ -2,15 +2,8 @@
 @use "../../variables";
 
 /// Mixin that styles the idividual product cards in the InstantResults in the SearchModal
-/// @param {Color} $instant-card-sales-price-color [$instant-card-sales-price-color] - The color of the sales price
-/// @param {Boolean} $instant-card-show-price [true] - Whether to show the price
-/// @param {Boolean} $instant-card-show-tagline [true] - Whether to show the tagline (this can be different things depending on what backend sends)
 
-@mixin InstantCard(
-  $instant-card-sales-price-color: variables.$instant-card-sales-price-color,
-  $instant-card-show-price: variables.$instant-card-show-price,
-  $instant-card-show-tagline: variables.$instant-card-show-tagline
-) {
+@mixin InstantCard() {
   .instant-results {
     .instant-card {
       $card-gap: 1.5vw;
@@ -65,7 +58,7 @@
             word-break: break-word;
           }
 
-          @if $instant-card-show-tagline {
+          @if variables.get-merged(variables.$instant-card-defaults, variables.$instant-card, "show-tagline") {
             .tagline {
               font-size: 0.9em;
               color: #868689;
@@ -78,7 +71,7 @@
         }
 
         .price-container {
-          @if $instant-card-show-price {
+          @if variables.get-merged(variables.$instant-card-defaults, variables.$instant-card, "show-price") {
             display: flex;
 
             justify-content: center;
@@ -97,7 +90,11 @@
                 color: #868689;
               }
               &.sales-price {
-                color: $instant-card-sales-price-color;
+                color: variables.get-merged(
+                  variables.$instant-card-defaults,
+                  variables.$instant-card,
+                  "sales-price-color"
+                );
               }
             }
             @media (max-width: 600px) {

package/dist/styles/components/search/InstantResults.scss

@@ -1,12 +1,12 @@
 @use "../../helpers/utils";
+@use "../../variables";
 
 /// Mixin that styles the container of the InstantResults in the SearchModal
-/// @param {Number with size unit} $gap [5px] - The gap between the InstantResults
-@mixin InstantResults($gap: 5px) {
+@mixin InstantResults() {
   .instant-results {
     display: flex;
     flex-direction: column;
-    @include utils.flex-gap($gap, "column nowrap");
+    @include utils.flex-gap(variables.get-gap("between-instant-results"), "column nowrap");
     @content;
   }
 }