@depict-ai/react-ui 0.0.75 → 0.0.77

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

@@ -8,15 +8,12 @@
 @use "sass:color";
 @use "sass:map";
 
-/// Mixin that styles the sorting and filtering menus.
-
 $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
 
@@ -41,6 +38,7 @@ $hovered-checkbox-checked-background-color: $brand-dark-grey;
 $hovered-checkbox-border: 2px solid $brand-black;
 $hovered-radio-border: 2px solid $brand-black;
 
+/// Mixin that styles the sorting and filtering menus.
 @mixin SortAndFilter() {
   $spacing_between_input_rows: variables.get-merged(
     variables.$filters-configuration-defaults,
@@ -133,8 +131,8 @@ $hovered-radio-border: 2px solid $brand-black;
       position: absolute;
       right: -4px;
       top: -4px;
-      background: black;
-      color: #fff;
+      background: variables.get-background-color("inverse", "default");
+      color: variables.get-text-icon-color("inverse", "default");
       border-radius: 13px;
       width: 20px;
       line-height: 1;
@@ -224,7 +222,7 @@ $hovered-radio-border: 2px solid $brand-black;
           text-overflow: ellipsis;
           white-space: pre-line;
           overflow-wrap: anywhere;
-          color: variables.get-text-color("neutral", "default");
+          color: variables.get-text-icon-color("neutral", "default");
           -webkit-box-orient: vertical;
           -webkit-line-clamp: 1;
           overflow: hidden;
@@ -235,20 +233,20 @@ $hovered-radio-border: 2px solid $brand-black;
         *:checked,
         .fake-checked {
           & ~ .text {
-            color: variables.get-text-color("neutral", "pressed");
+            color: variables.get-text-icon-color("base", "default");
             font-weight: variables.get-merged(variables.$font-weights-defaults, variables.$font-weights, 500);
           }
         }
 
         &.count-0 * + .text {
-          color: variables.get-text-color("subtle", "default");
+          color: variables.get-text-icon-color("subtle", "default");
         }
       }
 
       .input-row,
       .hierarchical .checkbox-details.expandable .category-parent {
         .count {
-          color: variables.get-text-color("subtle", "default");
+          color: variables.get-text-icon-color("subtle", "default");
           font-weight: variables.get-merged(variables.$font-weights-defaults, variables.$font-weights, 400);
         }
       }
@@ -266,8 +264,8 @@ $hovered-radio-border: 2px solid $brand-black;
           display: flex;
           @include utils.flex-gap(5px, "row nowrap");
           align-items: center;
-          color: variables.get-text-color("subtle", "default");
-          fill: variables.get-text-color("subtle", "default");
+          color: variables.get-text-icon-color("subtle", "default");
+          fill: variables.get-text-icon-color("subtle", "default");
 
           span {
             line-height: 1;
@@ -276,7 +274,7 @@ $hovered-radio-border: 2px solid $brand-black;
       }
 
       .ungrouped {
-        /// Spacing above filters that aren't in a group
+        // Spacing above filters that aren't in a group
         margin-top: 25px;
       }
 
@@ -334,7 +332,7 @@ $hovered-radio-border: 2px solid $brand-black;
             }
 
             & > .summary {
-              color: variables.get-text-color("neutral", "default");
+              color: variables.get-text-icon-color("neutral", "default");
               padding: 15px 10px;
 
               & > svg {
@@ -397,7 +395,7 @@ $hovered-radio-border: 2px solid $brand-black;
             margin-bottom: 0;
             margin-right: 0;
             margin-left: 0;
-            color: black;
+            color: variables.get-text-icon-color("neutral", "default");
             cursor: pointer;
             padding: 10px;
             display: flex;
@@ -406,10 +404,21 @@ $hovered-radio-border: 2px solid $brand-black;
             text-transform: variables.$uppercase-text-transform;
             svg {
               path {
-                fill: black;
+                fill: variables.get-text-icon-color("neutral", "default");
+              }
+            }
+
+            @include supports-hover.supports-hover() {
+              &:hover {
+                // We need this to be reaallyy subtle, neutral hover is too much
+                color: utils.highlight-color(variables.get-text-icon-color("neutral", "default"));
               }
             }
 
+            &:active {
+              color: variables.get-text-icon-color("neutral", "pressed");
+            }
+
             &:focus-visible {
               outline: none;
               filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
@@ -446,6 +455,8 @@ $hovered-radio-border: 2px solid $brand-black;
             position: relative;
             $expandable-separator-height: 1px;
             $expandable-separator-hover-change-factor: 20%;
+            $expandable-separator-color: variables.get-border-color("subtle", "disabled");
+            $expanded-separator-highlighted-color: variables.get-border-color("subtle", "default");
 
             & summary {
               &:before,
@@ -456,7 +467,7 @@ $hovered-radio-border: 2px solid $brand-black;
                 right: 0;
                 height: $expandable-separator-height;
                 width: calc(100% - 20px); // Reduce for padding
-                background: variables.get-background-color("base", "disabled");
+                background: $expandable-separator-color;
               }
 
               &:before {
@@ -473,7 +484,7 @@ $hovered-radio-border: 2px solid $brand-black;
                 .input-row:hover ~ details > & {
                   &:after,
                   &:before {
-                    background: variables.get-background-color("subtle", "hover");
+                    background: $expanded-separator-highlighted-color;
                     z-index: 1;
                   }
                 }
@@ -483,7 +494,7 @@ $hovered-radio-border: 2px solid $brand-black;
               .input-row ~ details:focus-visible > & {
                 &:after,
                 &:before {
-                  background: variables.get-background-color("subtle", "hover");
+                  background: $expanded-separator-highlighted-color;
                   z-index: 1;
                 }
               }
@@ -582,7 +593,7 @@ $hovered-radio-border: 2px solid $brand-black;
                     height: $morphing-sign-width;
 
                     span {
-                      background: black;
+                      background: variables.get-text-icon-color("base", "hover");
                       transition-duration: 150ms;
                       transition-timing-function: ease-in-out;
                     }
@@ -609,7 +620,7 @@ $hovered-radio-border: 2px solid $brand-black;
 
             input {
               border: 0.5px solid variables.get-border-color("base", "default");
-              background: variables.get-background-color("base", "disabled");
+              background: variables.get-background-color("subtle", "default");
               transition-duration: 50ms;
               padding-top: 8px;
               padding-bottom: 8px;
@@ -617,14 +628,15 @@ $hovered-radio-border: 2px solid $brand-black;
               outline: none;
               text-align: center;
               -moz-appearance: textfield;
+              color: variables.get-text-icon-color("subtle", "default");
 
               &:focus-visible {
-                background: variables.get-background-color("base", "hover");
+                background: variables.get-background-color("subtle", "hover");
               }
 
               @include supports-hover.supports-hover() {
                 &:hover {
-                  background: variables.get-background-color("base", "hover");
+                  background: variables.get-background-color("subtle", "hover");
                 }
               }
 
@@ -642,7 +654,7 @@ $hovered-radio-border: 2px solid $brand-black;
             font-size: 19px;
             align-items: center;
             justify-content: center;
-            color: variables.get-text-color("neutral", "default");
+            color: variables.get-text-icon-color("neutral", "default");
           }
         }
 
@@ -732,7 +744,7 @@ $hovered-radio-border: 2px solid $brand-black;
           padding-top: 10px;
           display: flex;
           justify-content: space-between;
-          color: variables.get-text-color("neutral", "default");
+          color: variables.get-text-icon-color("neutral", "default");
         }
       }
 
@@ -758,7 +770,7 @@ $hovered-radio-border: 2px solid $brand-black;
     .body {
       @include utils.flex-gap(1px, "column nowrap");
       line-height: 1;
-      color: variables.get-text-color("neutral", "default");
+      color: variables.get-text-icon-color("neutral", "default");
 
       .input-row {
         align-items: center;
@@ -776,7 +788,7 @@ $hovered-radio-border: 2px solid $brand-black;
 @mixin default_morphing_sign_in_expandable {
   .morphing-sign {
     span {
-      background: variables.get-background-color("inverse", "hover");
+      background: variables.get-text-icon-color("base", "hover");
 
       &:first-child {
         width: 5%;

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

@@ -8,7 +8,7 @@
   $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");
+  $mobile-top-level-collapse-color: variables.get-text-icon-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);
@@ -100,7 +100,7 @@
     .filters,
     .sorting {
       .body {
-        color: variables.get-text-color("neutral", "default");
+        color: variables.get-text-icon-color("neutral", "default");
       }
       & > summary {
         .morphing-sign span {

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

@@ -11,7 +11,7 @@
     left: 50%;
     transform: translateX(-50%);
     z-index: calc(#{variables.$base-z-index} + 5);
-    background: white;
+    background: variables.get-background-color("base", "default");
     box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);
     padding: 10px 20px;
     border-radius: variables.$border-radius;
@@ -49,7 +49,7 @@
     }
 
     & {
-      color: variables.get-text-color("base", "default");
+      color: variables.get-text-icon-color("base", "default");
     }
     button {
       padding: 5px 20px;

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

@@ -7,19 +7,19 @@
     display: flex;
     flex-wrap: wrap;
     .crumb {
-      color: variables.get-text-color("neutral", "default");
+      color: variables.get-text-icon-color("neutral", "default");
       &:hover {
         text-decoration: underline;
       }
       &:last-of-type {
-        color: variables.get-text-color("base", "default");
+        color: variables.get-text-icon-color("base", "default");
         font-weight: 500;
       }
     }
     .separator {
       margin-left: 10px;
       margin-right: 10px;
-      color: variables.get-text-color("subtle", "default");
+      color: variables.get-text-icon-color("subtle", "default");
     }
   }
 }

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

@@ -23,7 +23,7 @@
       font-size: inherit;
     }
     .explanation {
-      color: variables.get-text-color("subtle", "default");
+      color: variables.get-text-icon-color("subtle", "default");
       font-weight: 500;
       .product-count {
         margin-left: 10px;

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

@@ -15,7 +15,7 @@
       white-space: nowrap;
       padding: 10px 20px;
       background: variables.get-background-color("base", "default");
-      color: variables.get-text-color("base", "default");
+      color: variables.get-text-icon-color("base", "default");
       transition: all 75ms ease-in-out;
       border-radius: variables.$border-radius;
       border: 1px solid variables.get-border-color("neutral", "default");
@@ -35,7 +35,7 @@
         background: variables.get-background-color("base", "pressed");
       }
       &.selected {
-        color: variables.get-text-color("inverse", "default");
+        color: variables.get-text-icon-color("inverse", "default");
         background: variables.get-background-color("inverse", "default");
         border: 1px solid transparent;
         @include supports-hover.supports-hover() {

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

@@ -64,16 +64,16 @@
   $entries-with-highlight: variables.$autocomplete-entries-with-highlight
 ) {
   $entries-without-highlight-defaults: (
-    "color": variables.get-text-color("neutral", "default"),
+    "color": variables.get-text-icon-color("neutral", "default"),
     "font-weight": variables.get-font-weight(400),
   );
   $entries-with-highlight-defaults: (
     "highlighted-part": (
-      "color": variables.get-text-color("neutral", "default"),
+      "color": variables.get-text-icon-color("neutral", "default"),
       "font-weight": variables.get-font-weight(500),
     ),
     "toned-down-part": (
-      "color": variables.get-text-color("neutral", "default") y,
+      "color": variables.get-text-icon-color("neutral", "default") y,
       "font-weight": variables.get-font-weight(400),
     ),
   );
@@ -85,7 +85,7 @@
     .text {
       font-size: 16px;
       font-weight: variables.get-font-weight(700);
-      color: variables.get-text-color("neutral", "default");
+      color: variables.get-text-icon-color("neutral", "default");
       margin-top: 0;
     }
     .item,
@@ -124,6 +124,9 @@
       .suggestion {
         svg {
           flex-shrink: 0;
+          path {
+            fill: variables.get-text-icon-color("neutral", "default");
+          }
         }
         display: flex;
         justify-content: space-between;
@@ -138,9 +141,6 @@
           max-height: 13px;
           svg {
             transform: scale(0.6) translate(-6.9px, -7.2px);
-            path {
-              fill: variables.get-text-color("neutral", "default");
-            }
           }
         }
 

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

@@ -32,7 +32,7 @@
       }
       border: 1px solid variables.get-border-color("subtle", "default");
       padding: 10px 20px;
-      color: variables.get-text-color("base", "default");
+      color: variables.get-text-icon-color("base", "default");
       display: flex;
       height: 100%;
       align-items: center;

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

@@ -13,7 +13,7 @@
     display: flex;
     flex-direction: column;
     @include utils.flex-gap(15px, "column nowrap");
-    $icon-color: variables.get-text-color("neutral", "default");
+    $icon-color: variables.get-text-icon-color("neutral", "default");
 
     .list {
       display: flex;
@@ -64,7 +64,7 @@
           &:hover svg {
             transform: scale(1.2);
             path {
-              fill: variables.get-text-color("neutral", "pressed");
+              fill: variables.get-text-icon-color("neutral", "pressed");
             }
           }
           &:focus-visible {
@@ -72,7 +72,7 @@
             svg {
               transform: scale(1.2);
               path {
-                fill: variables.get-text-color("neutral", "pressed");
+                fill: variables.get-text-icon-color("neutral", "pressed");
               }
             }
           }

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

@@ -12,6 +12,7 @@
     "background"
   );
   $border-radius: variables.get-merged(variables.$search-field-defaults, variables.$search-field, "border-radius");
+
   .search-field {
     input,
     button {
@@ -20,6 +21,9 @@
     display: flex;
     z-index: calc(#{variables.$search-page-base-z-index} + 5); // make shadow go above contents
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
+    // For the shadow
+    border-radius: $border-radius;
+
     //&:focus-within {
     //  // something like this could be nice?
     //  box-shadow: 0px 4px 12px rgba(15, 15, 15, 0.16);
@@ -34,18 +38,18 @@
       padding-bottom: 14px;
       padding-right: 55px;
       width: 100%;
-      color: variables.get-text-color("neutral", "default");
+      color: variables.get-text-icon-color("neutral", "default");
       background-color: $search-field-background;
       border: none;
 
       &:focus {
         outline: none;
-        color: variables.get-text-color("neutral", "pressed");
+        color: variables.get-text-icon-color("neutral", "pressed");
       }
       @include supports-hover.supports-hover() {
         &:hover {
           outline: none;
-          color: variables.get-text-color("neutral", "pressed");
+          color: variables.get-text-icon-color("neutral", "pressed");
         }
       }
       &.has-adjacent-back-button {
@@ -74,8 +78,9 @@
       border-bottom-left-radius: $border-radius;
       border-top-left-radius: $border-radius;
       cursor: pointer;
+
       svg path {
-        fill: variables.get-text-color("neutral", "default");
+        fill: variables.get-text-icon-color("neutral", "default");
       }
       &:focus {
         outline: none;
@@ -83,13 +88,13 @@
       &:focus-visible {
         filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
         svg path {
-          fill: variables.get-text-color("neutral", "hovered");
+          fill: variables.get-text-icon-color("neutral", "hover");
         }
       }
       @include supports-hover.supports-hover() {
         &:hover {
           svg path {
-            fill: variables.get-text-color("neutral", "hovered");
+            fill: variables.get-text-icon-color("neutral", "hover");
           }
         }
       }
@@ -109,7 +114,7 @@
       border: none;
       padding: 0;
       svg path {
-        fill: variables.get-text-color("neutral", "default");
+        fill: variables.get-text-icon-color("neutral", "default");
       }
 
       &:focus {
@@ -118,13 +123,13 @@
       &:focus-visible {
         filter: map.get(Buttons.get-secondary-button-properties(), "focus-visible-filter");
         svg path {
-          fill: variables.get-text-color("neutral", "pressed");
+          fill: variables.get-text-icon-color("neutral", "pressed");
         }
       }
       @include supports-hover.supports-hover() {
         &:hover {
           svg path {
-            fill: variables.get-text-color("neutral", "pressed");
+            fill: variables.get-text-icon-color("neutral", "pressed");
           }
         }
       }
@@ -138,4 +143,18 @@
     }
     @content;
   }
+
+  .search-field:not(.in-modal) {
+    $border: 1px solid variables.get-border-color("neutral", "default");
+    .query {
+      border-top: $border;
+      border-bottom: $border;
+      border-left: $border;
+    }
+    .submit {
+      border-top: $border;
+      border-bottom: $border;
+      border-right: $border;
+    }
+  }
 }