mitre-attack
diff --git a/‎attack-search/__tests__/search-style.test.js‎
Lines changed: 33 additions & 0 deletions b/‎attack-search/__tests__/search-style.test.js‎
Lines changed: 33 additions & 0 deletions
diff --git a/‎attack-search/src/search-service.js‎
Lines changed: 7 additions & 3 deletions b/‎attack-search/src/search-service.js‎
Lines changed: 7 additions & 3 deletions
diff --git a/‎attack-style/components/_search.scss‎
Lines changed: 16 additions & 5 deletions b/‎attack-style/components/_search.scss‎
Lines changed: 16 additions & 5 deletions
diff --git a/‎attack-theme/static/style-attack.css‎
Lines changed: 14 additions & 5 deletions b/‎attack-theme/static/style-attack.css‎
Lines changed: 14 additions & 5 deletions
diff --git a/‎attack-theme/static/style-user.css‎
Lines changed: 14 additions & 5 deletions b/‎attack-theme/static/style-user.css‎
Lines changed: 14 additions & 5 deletions
@@ -0,0 +1,33 @@
+const fs = require('fs');
+const path = require('path');
+
+describe('search styles', () => {
+  test('marks page type and domain result badges with distinct classes', () => {
+    const searchService = fs.readFileSync(
+      path.join(__dirname, '../src/search-service.js'),
+      'utf8',
+    );
+
+    expect(searchService).toContain('search-result-badge-page-type');
+    expect(searchService).toContain('search-result-badge-domain');
+  });
+
+  test('renders result badges as subtle prominent chips', () => {
+    const styles = fs.readFileSync(
+      path.join(__dirname, '../../attack-style/components/_search.scss'),
+      'utf8',
+    );
+
+    const badgeStyle = styles.match(/\.search-result-badge\s*\{(?<body>[^}]+)\}/)?.groups?.body ?? '';
+
+    expect(badgeStyle).toContain('color: white;');
+    expect(badgeStyle).toContain('font-size: 0.8rem;');
+
+    expect(styles).toContain('.search-result-badge-page-type');
+    expect(styles).toContain('border-color: color-functions.color(active);');
+    expect(styles).toContain('background: color-functions.color-alternate(active, 1.5);');
+    expect(styles).toContain('.search-result-badge-domain');
+    expect(styles).toContain('border-color: color-functions.color(deemphasis);');
+    expect(styles).toContain('background: color-functions.color(deemphasis);');
+  });
+});
@@ -1005,16 +1005,20 @@ module.exports = class SearchService {
     const badges = [];
     const pageTypeLabel = this.#pageTypeBadgeLabel(result);
 
-    if (pageTypeLabel) badges.push(pageTypeLabel);
+    if (pageTypeLabel) badges.push({ label: pageTypeLabel, className: 'search-result-badge-page-type' });
     result.domains.forEach((domain) => {
-      if (DOMAIN_LABELS[domain]) badges.push(DOMAIN_LABELS[domain]);
+      if (DOMAIN_LABELS[domain]) {
+        badges.push({ label: DOMAIN_LABELS[domain], className: 'search-result-badge-domain' });
+      }
     });
 
     if (badges.length === 0) return '';
 
     return `
                 <div class="search-result-badges">
-                    ${badges.map(badge => `<span class="search-result-badge">${badge}</span>`).join('')}
+                    ${badges.map((badge) => `
+                        <span class="search-result-badge ${badge.className}">${badge.label}</span>
+                    `).join('')}
                 </div>
         `;
   }
 
@@ -224,18 +224,29 @@
         .search-result-badges {
           display: flex;
           flex-wrap: wrap;
-          gap: 5px;
-          margin: 4px 0 6px;
+          gap: 6px;
+          margin: 6px 0 8px;
         }
 
         .search-result-badge {
-          padding: 1px 6px;
-          border: 1px solid color-functions.border-color(body);
+          padding: 2px 8px;
+          border: 1px solid;
           border-radius: 4px;
-          font-size: 0.75rem;
+          color: white;
+          font-size: 0.8rem;
           font-weight: 700;
         }
 
+        .search-result-badge-page-type {
+          border-color: color-functions.color(active);
+          background: color-functions.color-alternate(active, 1.5);
+        }
+
+        .search-result-badge-domain {
+          border-color: color-functions.color(deemphasis);
+          background: color-functions.color(deemphasis);
+        }
+
         .search-no-results .preview {
           display: flex;
           align-items: center;