highlight variant attribute feature

libs/domain/product/attributes/src/attributes.component.ts

@@ -6,7 +6,10 @@ import { ProductAttributesOptions } from './attributes.model';
 import { productAttributeStyles } from './attributes.styles';
 
 @ssrShim('style')
-@defaultOptions({ columnCount: '2' })
+@defaultOptions({
+  columnCount: '2',
+  ...(featureVersion >= '1.5' ? { highlightVariantAttribute: true } : {}),
+})
 @hydrate({ context: featureVersion >= '1.4' ? PRODUCT : ProductContext.SKU })
 export class ProductAttributesComponent extends ProductMixin(
   ContentMixin<ProductAttributesOptions>(LitElement)
@@ -23,13 +26,30 @@ export class ProductAttributesComponent extends ProductMixin(
         ${Object.keys(names).map(
           (key) => html`
             <dt>${this.getName(names, key)}</dt>
-            <dd>${values[key]}</dd>
+            <dd ?highlight=${this.isHighlighted(key)}>${values[key]}</dd>
           `
         )}
       </dl>
     `;
   }
 
+  /**
+   * Highlighted attributes will clarify the uniqueness of the value among
+   * the variants.
+   *
+   * Indicates whether the attribute value should be highlighted, based on
+   * a global component configuration and if the attribute is part of the
+   * variant definition.
+   *
+   * @since 1.5
+   */
+  protected isHighlighted(key: string): boolean {
+    const { variantDefinition } = this.$product() ?? {};
+    return (
+      !!this.$options().highlightVariantAttribute && !!variantDefinition?.[key]
+    );
+  }
+
   protected getName(
     names: Record<string, string>,
     key: string

libs/domain/product/attributes/src/attributes.model.ts

@@ -1,3 +1,11 @@
 export interface ProductAttributesOptions {
   columnCount?: string;
+  /**
+   * Highlighted variant attributes will clarify the uniqueness of the value among
+   * the variants. If the attribute is unqieu to the variant, a highlight attribute
+   * is added, so that the stylesheet can mark the attribute value.
+   *
+   * @since 1.5
+   */
+  highlightVariantAttribute?: boolean;
 }

libs/domain/product/attributes/src/attributes.styles.ts

@@ -16,4 +16,13 @@ export const productAttributeStyles = css`
     margin-block: 10px 20px;
     color: var(--oryx-color-neutral-9);
   }
+
+  dd[highlight] {
+    background: var(--oryx-color-primary-5);
+    color: var(--oryx-color-primary-10);
+    border-radius: 8px;
+    padding: 1px 6px;
+    margin-inline-start: -6px;
+    width: fit-content;
+  }
 `;