General

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.

This styling is applied to the matches in the SearchModal and matches in the filters when searching for a specific filter Only the "entries-with-highlight" styling applies to the filters though

Explanation of "entries without highlight" and "entries with highlight"

When the user is typing in the input field, we show query and category suggestions from the API and suggestions from the previous searches of the user (which are saved in localStorage). While the user is typing, we highlight the new parts of the query that we are suggesting (what the user hasn't typed). This only happens if the suggestion contains the query the user has typed.

The most flexible yet simple way we could come up with to style this is by breaking it down as follows: Note: "entry" refers to a suggestion from the API or a previous search.

1. Entries without highlight:
   This is the styling for the entries where nothing is highlighted. This is the case when the user hasn't typed anything yet, or when the suggestion doesn't contain the query the user has typed.
2. Entries with highlight:
   Something is highlighted in this suggestion. This is the case when the user has typed something and the suggestion contains the query the user has typed. There are two things you can style here:
   1. Highlighted part:
      The styling for the highlighted part of the suggestion.
   2. Toned down part:
      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.

Base styling (PLP) that applies to both category and search pages for the PLPResults component, the component which holds the product cards. Another part of this styling is in the ProductListingPage mixin, which takes care about the overall layout of the page (which mostly means margins and paddings).

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.

Styling that ties together the different components on the SearchPage. Mainly takes care of margins and paddings.

Note that for the gaps not the exact values will always be used but often multiples for different places where it's appropriate.

Styling that ties together the different components on the CategoryPage. Mainly takes care of margins and paddings.

Internal mixin that dictates when the vertical spaces should switch to the "mobile" versions

ScrollStatus shows the user how many items are left to scroll through, if they scroll at a speed that indicates that they are no longer looking at each product but rather just trying to see how many there are.

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

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.

Styles the FloatingButtons. FloatingButtons are three buttons, one button to open sorting, one button to open filters and one button to scroll to the top that show up when scrolling upwards for a while on a mobile device not really close to the top of the page.

Mixin that styles the sorting and filtering menus.

Mobile modal - taking arguments from SortAndFilter mixin so see SortAndFilter docs for more info

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.

Styling for recommendations UI components

Base style used across all Depict components (product listing page, search, category, recommendations). Can only be included once - subsequent includes will yield no css.

Generates styling for our primary buttons, including hover, active and focus-visible states

Generates styling for our secondary buttons, including hover, active and focus-visible states

A secondary button styled like the "Secondary-Outline-Small" button in Depict's design system

This is for all product lists, meaning PLP (category + search), as well as recommendations

Styling for sliders used in the PLP and recommendations. Most of the times SlidableItems is used for items laid out horizontally that do not fit the screen width. On .depict-slider elements without the products class, there will be default spacing and button style used for overflowing UI items On .depict-slider elements with the products class there will be no default spacing and buttons styled for navigating products

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).

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 only 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.

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.

Autocomplete is the component that displays suggested Categories and Products in the SearchModal, both under the "Suggestions" heading (i18n key suggestions_) when the customer hasn't typed anything, and once the customer has started typing. It also includes previous searches inside of the suggestions provided from the API - when the user hasn't typed though, the PreviousSearches component is shown instead. See also HighlightedText This is not used at all if variables.$search-modal-layout is "v2"

CategorySuggestions is the component that displays suggested Categories on the SearchPage, above the results.

Mixin that styles the ContentResults part of the SearchPage

Mixin that styles the idividual product cards in the InstantResults in the SearchModal

Mixin that styles the container of the InstantResults in the SearchModal

PreviousSearches is the component that shows the previous searches of the user in its own section, with a heading that says "Your previous searches" (key of the string is previous_searches_text_ in the locales). The component is only shown if the user has previous searches and the search field is empty.

PreviousSearches is a sub-component of Autocomplete so you probably don't want to use it on its own. This is not used at all if variables.$search-modal-layout is "v2"

SearchField is the component that shows the search input, sometimes back button, clear button and the search button.

SearchModal is the component that shows the search modal when the user clicks on the search icon/into the search field in the header.

SearchRecommendations is the component that shows recommendations below the SearchResults once the user has reached the end of the results.

This is the styling for the text that says "Showing 30 result(s) for falk"

This mixin is used for the SortAndFilterModal and the SearchModal to color the backdrop behind the modal

Wraps @content in a media query that targets devices that support :hover in a non-fallback way.

This mixin sets the background property to the provided color but darkens it by the provided amounts if it is brighter or darker than 50% The purpose is to really easily create i.e. hover effects

We can't (or couldn't) use flex gap due to poor compatibility, this mixin is used instead of it and generates margins. We recommend reading the source code and applying thinking to the margin situation that will result.

Default theme for Search and Category pages. Calling this mixin will generate all the styling for the page specified. To configure variables, use @use and with

Base styling for recommendations UI components (Slider and Grid).

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.

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.

Button not used by Depict UI currently, only used internally

Like highlight-background mixin but returns color value

Deep merged two maps and gives you the value of a key in the merged map.

Makes it easy to get the text color

Makes it easy to get the border color

Makes it easy to get the background color

Makes it easy to get font weight

Makes it easy to get a gap value from the $gaps map

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).

The colors to be used across the UI We're trying to avoid getting colours from this map directly in style declarations, instead there's a layer of abstraction on top of this map. That is because different things in the UI need to have different colours from the palette, depending on the palette. See the maps below for text and icon colours, border colors and background colors.

What font weights to use for the different font weights. The main reason to allow customisation for this is to allow for custom fonts that don't have the same font weights as the default font. So for example if your font doesn't have a "light" (300) font weight then you can set it to 400 and it will use the "regular" (400) font weight instead.

The base z-index of the modal

The z-index of the search page

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

The search modal layout to use. Set it to "v2" for the new layout. The v2 layout uses modern css features such as :has(), container queries and grid.

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

Configuration for the filters on the right

Configuration for the search modal.

Configuration for the buttons that show up when scrolling up after not being too close to the top on mobile

Configuration for the search field, that is inside the search modal or on the search page.

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.

Styling overrides for the InstantCard component - the component which shows 4 search results in the SearchModal.

See documentation of Autocomplete mixin for explanation of this map. It allows customizing the highlighting in the query suggestions

See documentation of Autocomplete mixin for explanation of this map. It allows customizing the highlighting in the query suggestions

Styling overrides for our primary buttons (button.major, styled by the PrimaryButton mixin)

Styling overrides for our secondary buttons (button.minor, styled by the SecondaryButton mixin)