@repobit/dex-system-design 0.23.5 → 0.23.6

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.23.6](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.5...@repobit/dex-system-design@0.23.6) (2026-03-24)
+
+### Bug Fixes
+
+* **DEX-1014:** add new compare component
+
+
 ## [0.23.5](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.4...@repobit/dex-system-design@0.23.5) (2026-03-20)
 
 **Note:** Version bump only for package @repobit/dex-system-design

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.23.5",
+  "version": "0.23.6",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -86,5 +86,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "b8840ddcb66eae797d4c54aff25f62fdd1c43d43"
+  "gitHead": "0eb01ff6367988f114aa1314475a344554168fa5"
 }

package/src/components/compare/compare.css.js

@@ -87,10 +87,6 @@ export default css`
   flex-shrink: 0;
   width:       42px;
   height:      39px;
-  filter: var(
-    --cs-icon-filter,
-    invert(29%) sepia(98%) saturate(1200%) hue-rotate(207deg) brightness(97%) contrast(97%)
-  );
 }
 
 .card-icon-wrap bd-img {
@@ -163,7 +159,7 @@ export default css`
 .bar-score {
   font-family: var(--typography-fontFamily-sans);
   font-size:   var(--typography-body-regular-fontSize);
-  font-weight: 600;
+  font-weight: var(--font-weight-mono-semibold);
 }
 
 /* ── primary variant ── */
@@ -186,6 +182,7 @@ export default css`
 :host(compare-bar[variant="secondary"]) .bar-score,
 :host(compare-bar:not([variant]))       .bar-score {
   color: var(--color-neutral-900);
+  font-weight: var(--font-weight-mono-regular);
 }
 
 

package/src/components/compare/compare.js

@@ -38,7 +38,11 @@ class CompareBar extends LitElement {
     const s = parseFloat(this.score)    || 0;
     const m = parseFloat(this.maxScore) || 6;
     if (m === 0) return 0;
-    return Math.min(100, Math.max(0, (s / m) * 100));
+
+    if (this.variant === "primary") return 100;
+
+    const rawPct = Math.min(100, Math.max(0, (s / m) * 100));
+    return rawPct * 0.75;
   }
 
   get _displayScore() {
@@ -158,7 +162,7 @@ class CompareCard extends LitElement {
             }
             ${this.description
               ? html`
-              <bd-p kind="${isMobile ? "small" : "large"}" class="card-description">
+              <bd-p kind="${isMobile ? "small" : "regular"}" class="card-description">
                 ${this.description}
               </bd-p>
             `

package/src/components/compare/compare.stories.js

@@ -3,9 +3,9 @@ import "./compare.js";
 
 // ─── Asset paths ──────────────────────────────────────────────────────────────
 
-const SHIELD_ICON      = "/assets/shield-check.png";
-const SPEEDOMETER_ICON = "/assets/speedometer.png";
-const REPAIR_ICON      = "/assets/speedometer.png"; // swap for a repair asset when available
+const SHIELD_ICON      = "/assets/shield-check.svg";
+const SPEEDOMETER_ICON = "/assets/speedometer.svg";
+const REPAIR_ICON      = "/assets/speedometer.svg"; // swap for a repair asset when available
 
 const AV_TEST_URL = "https://www.av-test.org/en/antivirus/home-users/";