The style editor

The style editor is what lets you influence the styling imported for the Depict components, but it can also be used to style anything on your website.

The code you write is SCSS, which is a superset of CSS. This means that you can write plain CSS and it will work, but you can also use SCSS features like variables and nesting.

On the right you can get a live preview of all the Depict components with your custom styling applied.

Screenshot of the style editor with the initial contents

The @use statement at the top imports this file: @depict-ai/plp-styling/index.scss

When doing so, you can specify variables to override the default values, for example:

@use "node_modules/@depict-ai/plp-styling" as plp-styling with (
  $instant-card: (
    "sales-price-color": red,
  ),
  $font-weights: (
    // map all 500 font weights to 600 because font doesn't support 500
    500: 600,
  ),
  // disable all border radii
  $border-radius: 0
);

To override style properties, inspect the element you want to override properties for and look for a parent that has an id, that way your styling automatically takes precedence. For example,

#depict-search-modal {
  .instant-results {
    .depict-img-mod {
      object-fit: contain;
    }
  }
}