@repobit/dex-system-design 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.10.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.9.1...@repobit/dex-system-design@0.10.0) (2025-07-23)
+
+
+### Features
+
+* **DEX-23636:** remove tokens.css and integrate design tokens into components ([ad53b2d](https://github.com/bitdefender/dex-core/commit/ad53b2d653957adbc6a961756b395fae4d2e12ed))
+* **DEX-23636:** update Storybook configuration and enhance Header component with design tokens ([4dad876](https://github.com/bitdefender/dex-core/commit/4dad87680a03d77ed56293f3c4af5760f2ca9445))
+
+
+
+## [0.9.1](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.9.0...@repobit/dex-system-design@0.9.1) (2025-07-22)
+
+
+### Bug Fixes
+
+* **DEX-23636:** change CSS selector from :root to :host for better encapsulation ([b221681](https://github.com/bitdefender/dex-core/commit/b2216819b10c624637727aaad96c305cb84750e2))
+
+
+
 ## [0.9.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.8.0...@repobit/dex-system-design@0.9.0) (2025-07-22)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -16,8 +16,22 @@
     "LICENSE"
   ],
   "exports": {
+    "./anchor": "./src/components/anchor/anchor-nav.js",
+    "./badge": "./src/components/badge/badge.js",
     "./button": "./src/components/Button/Button.js",
-    "./header": "./src/components/header/header.js"
+    "./carousel": "./src/components/carousel/carousel.js",
+    "./checkbox": "./src/components/checkbox/checkbox.js",
+    "./divider": "./src/components/divider/divider-horizontal.js",
+    "./faq": "./src/components/FAQ/faq.js",
+    "./header": "./src/components/header/header.js",
+    "./highlight": "./src/components/highlight/highlight.js",
+    "./input": "./src/components/Input/Input.js",
+    "./light-carousel": "./src/components/light-carousel/light-carousel.js",
+    "./paragraph": "./src/components/paragraph/paragraph.js",
+    "./pricing-cards": "./src/components/pricing-cards/pricing-card.js",
+    "./radio": "./src/components/radio/radio.js",
+    "./tabs": "./src/components/tabs/tabs.js",
+    "./terms": "./src/components/termsOfUse/terms.js"
   },
   "publishConfig": {
     "access": "public"
@@ -54,5 +68,5 @@
   "volta": {
     "node": "22.14.0"
   },
-  "gitHead": "d627dea970dd55e62adf03427d56a10ee0fb8695"
+  "gitHead": "04e6ba773d3e1a126262cf6869e5280e00ce8863"
 }

package/src/components/FAQ/faq.js

@@ -1,11 +1,11 @@
-import { LitElement, html, css } from "lit";
-import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
 
 import faqCSS from "../FAQ/faq.css.js";
 
 class FaqSection extends LitElement {
   static properties = {
-    faqs: { type: Array },
+    faqs: { type: Array }
   };
 
   constructor() {
@@ -27,14 +27,15 @@ class FaqSection extends LitElement {
 class FaqSectionItem extends LitElement {
   static properties = {
     title: { type: String },
-    open: { type: Boolean, reflect: true },
+    open : { type: Boolean, reflect: true }
   };
 
   constructor() {
     super();
     this.title = "";
     this.open = false;
-    this.id = `faq-${Math.random().toString(36).substr(2, 9)}`;
+    this.id = `faq-${Math.random().toString(36)
+      .substr(2, 9)}`;
   }
 
   toggleItem() {
@@ -78,8 +79,8 @@ class FaqSectionItem extends LitElement {
   }
 }
 
-FaqSection.styles = [faqCSS];
-FaqSectionItem.styles = [faqCSS];
+FaqSection.styles = [tokens, faqCSS];
+FaqSectionItem.styles = [tokens, faqCSS];
 
 customElements.define("bd-faq-section-item", FaqSectionItem);
 customElements.define("bd-faq-section", FaqSection);

package/src/components/Input/Input.js

@@ -1,19 +1,20 @@
 import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
 import inputCSS from "../Input/input.css.js";
 
 class CustomInput extends LitElement {
   static properties = {
     label: { type: String },
-    type: { type: String },
+    type : { type: String }
   };
 
   constructor() {
     super();
     this.label = "Default Label";
-    this.type = "text"; 
+    this.type = "text";
   }
 
- 
+
   render() {
     return html`
       <div class="input-container">
@@ -23,5 +24,5 @@ class CustomInput extends LitElement {
     `;
   }
 }
-CustomInput.styles = [inputCSS];
+CustomInput.styles = [tokens, inputCSS];
 customElements.define("custom-input", CustomInput);

package/src/components/anchor/anchor-nav.js

@@ -1,5 +1,6 @@
-import { LitElement, html, css } from "lit";
-import { anchorNavStyles, anchorNavItemStyles } from "./anchor-nav.css.js";
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import { anchorNavStyles } from "./anchor-nav.css.js";
 
 // BdAnchorNavItem
 class BdAnchorNavItem extends HTMLElement {
@@ -23,7 +24,7 @@ class BdAnchorNavItem extends HTMLElement {
 
 
 class BdAnchorNav extends LitElement {
-  static styles = anchorNavStyles;
+  static styles = [tokens, anchorNavStyles];
 
   constructor() {
     super();
@@ -41,7 +42,7 @@ class BdAnchorNav extends LitElement {
   handleClick(event, id) {
     event.preventDefault();
     this.activeId = id;
-  
+
     const sectionEl = document.querySelector(`#${id}-section`);
     if (sectionEl) {
       const offset = 120;
@@ -49,32 +50,32 @@ class BdAnchorNav extends LitElement {
       const scrollTop = window.pageYOffset;
       const elementY = rect.top + scrollTop;
       const offsetY = elementY - offset;
-  
+
       window.scrollTo({
-        top: offsetY,
+        top     : offsetY,
         behavior: "smooth"
       });
     }
-  
+
     this.requestUpdate();
   }
-  
-
- 
-scrollToPricing(event) {
-  event.preventDefault();
-  const pricingSection = document.querySelector("#section-pricing");
-  if (pricingSection) {
-    const offset = 120;
-    const elementY = pricingSection.getBoundingClientRect().top + window.pageYOffset;
-    const offsetY = elementY - offset;
-
-    window.scrollTo({
-      top: offsetY,
-      behavior: "smooth"
-    });
+
+
+
+  scrollToPricing(event) {
+    event.preventDefault();
+    const pricingSection = document.querySelector("#section-pricing");
+    if (pricingSection) {
+      const offset = 120;
+      const elementY = pricingSection.getBoundingClientRect().top + window.pageYOffset;
+      const offsetY = elementY - offset;
+
+      window.scrollTo({
+        top     : offsetY,
+        behavior: "smooth"
+      });
+    }
   }
-}
 
   render() {
     const items = Array.from(this.children).filter(

package/src/components/badge/badge.js

@@ -1,10 +1,11 @@
-import { LitElement, html, css } from 'lit';
+import { LitElement, html } from 'lit';
+import { tokens } from "../../tokens/tokens.js";
 import badgeCSS from './badge.css.js';
 
 export class BdBadge extends LitElement {
   static properties = {
-    text: { type: String },
-    color: { type: String },
+    text : { type: String },
+    color: { type: String }
   };
 
 
@@ -25,6 +26,6 @@ export class BdBadge extends LitElement {
     return html`<span class="badge">${this.text}</span>`;
   }
 }
-BdBadge.styles = [badgeCSS];
+BdBadge.styles = [tokens, badgeCSS];
 
 customElements.define('bd-badge', BdBadge);

package/src/components/carousel/carousel.js

@@ -1,11 +1,12 @@
 import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
 import carouselCSS from "../carousel/carousel.css.js";
 
 export class CarouselItem extends LitElement {
   static properties = {
-    icon: { type: String },
-    title: { type: String },
-    modalText: { type: String },
+    icon     : { type: String },
+    title    : { type: String },
+    modalText: { type: String }
   };
 
   _onKeydown(event) {
@@ -18,12 +19,12 @@ export class CarouselItem extends LitElement {
     this.dispatchEvent(
       new CustomEvent("open-modal", {
         detail: {
-          title: this.title,
+          title    : this.title,
           modalText: this.modalText,
-          icon: this.icon,
+          icon     : this.icon
         },
-        bubbles: true,
-        composed: true,
+        bubbles : true,
+        composed: true
       })
     );
   }
@@ -51,13 +52,13 @@ export class CarouselItem extends LitElement {
     `;
   }
 
-  static styles = [carouselCSS];
+  static styles = [tokens, carouselCSS];
 }
 
 class CustomCarousel extends LitElement {
   static properties = {
-    title: { type: String },
-    selectedItem: { type: Object },
+    title       : { type: String },
+    selectedItem: { type: Object }
   };
 
   constructor() {
@@ -123,8 +124,8 @@ class CustomCarousel extends LitElement {
     if (!this.track) return;
 
     this.track.scrollBy({
-      left: direction === "left" ? -itemWidth : itemWidth,
-      behavior: "smooth",
+      left    : direction === "left" ? -itemWidth : itemWidth,
+      behavior: "smooth"
     });
 
     setTimeout(() => this.updateArrowStates(), 300);
@@ -269,7 +270,7 @@ class CustomCarousel extends LitElement {
     `;
   }
 
-  static styles = [carouselCSS];
+  static styles = [tokens, carouselCSS];
 }
 
 customElements.define("bd-carousel-item", CarouselItem);

package/src/components/checkbox/checkbox.js

@@ -1,15 +1,16 @@
 import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
 import checkboxCSS from "./checkbox.css";
 
 export class BdCheckbox extends LitElement {
-  static styles = [checkboxCSS];
+  static styles = [tokens, checkboxCSS];
 
   static properties = {
-    name: { type: String },
-    value: { type: String },
-    checked: { type: Boolean, reflect: true },
+    name    : { type: String },
+    value   : { type: String },
+    checked : { type: Boolean, reflect: true },
     disabled: { type: Boolean, reflect: true },
-    label: { type: String },
+    label   : { type: String }
   };
 
   constructor() {
@@ -63,9 +64,9 @@ export class BdCheckbox extends LitElement {
 
     this.dispatchEvent(
       new CustomEvent("change", {
-        detail: { value: this.checked ? this.value : null },
-        bubbles: true,
-        composed: true,
+        detail  : { value: this.checked ? this.value : null },
+        bubbles : true,
+        composed: true
       })
     );
   }
@@ -76,24 +77,24 @@ export class BdCheckbox extends LitElement {
     }
   }
 
- handleKeydown(e) {
-  if (this.disabled) return;
+  handleKeydown(e) {
+    if (this.disabled) return;
 
-  if (e.key === " " || e.key === "Enter") {
-    e.preventDefault();
-    this.handleClick();
+    if (e.key === " " || e.key === "Enter") {
+      e.preventDefault();
+      this.handleClick();
 
-    const outer = e.target;
+      const outer = e.target;
 
-    if (this._hadKeyboardFocus) {
-      outer.classList.add("focus", "kbd-activate");
+      if (this._hadKeyboardFocus) {
+        outer.classList.add("focus", "kbd-activate");
 
-      setTimeout(() => {
-        outer.classList.remove("kbd-activate");
-      }, 150);
+        setTimeout(() => {
+          outer.classList.remove("kbd-activate");
+        }, 150);
+      }
     }
   }
-}
 
 
   handleBlur(e) {
@@ -101,7 +102,7 @@ export class BdCheckbox extends LitElement {
       const active = this.shadowRoot.activeElement || document.activeElement;
       if (active !== e.target) {
         e.target.classList.remove("focus");
-      } 
+      }
     }, 0);
   }
 

package/src/components/divider/divider-horizontal.js

@@ -1,18 +1,19 @@
-import { LitElement, html, css } from 'lit';
+import { LitElement, css, html } from 'lit';
+import { tokens } from "../../tokens/tokens.js";
 
 export class BdDividerHorizontal extends LitElement {
   static properties = {
-    width: { type: String }, // Noua proprietate
+    width: { type: String } // Noua proprietate
   };
 
-  static styles = css`
+  static styles = [tokens, css`
     .hr-line {
       border: none;
       border-top: 1px solid var(--color-neutral-200);
       margin: 0;
       width: 100%; /* valoare implicită */
     }
-  `;
+  `];
 
   constructor() {
     super();

package/src/components/header/header.js

@@ -1,4 +1,5 @@
 import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
 import headerCSS from "../header/header.css.js";
 
 class Header extends LitElement {
@@ -82,6 +83,6 @@ class Header extends LitElement {
   }
 }
 
-Header.styles = [headerCSS];
+Header.styles = [tokens, headerCSS];
 
 customElements.define("bd-header", Header);

package/src/components/highlight/highlight.js

@@ -1,4 +1,5 @@
 import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
 import highlightCSS from "./highlight.css.js";
 
 class BdHighlightSection extends LitElement {
@@ -6,7 +7,7 @@ class BdHighlightSection extends LitElement {
     highlightText: { type: String, attribute: 'highlight-text' }
   };
 
-  static styles = [highlightCSS];
+  static styles = [tokens, highlightCSS];
 
   render() {
     const fullText = this.textContent || "";

package/src/components/light-carousel/light-carousel.js

@@ -1,9 +1,10 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
 import carouselCSS from "../light-carousel/light-carousel.css.js";
 
 class CustomLightCarousel extends LitElement {
   static properties = {
-    title: { type: String },
+    title: { type: String }
   };
 
   constructor() {
@@ -77,7 +78,7 @@ class LightCarouselItem extends LitElement {
   static properties = {
     title: { type: String },
     badge: { type: String },
-    icon: { type: String },
+    icon : { type: String }
   };
 
   constructor() {
@@ -87,8 +88,8 @@ class LightCarouselItem extends LitElement {
     this.icon = "";
   }
 
-render() {
-  return html`
+  render() {
+    return html`
     <div class="bd-light-box">
       <div class="bd-light-box-header">
         ${this.icon
@@ -109,12 +110,12 @@ render() {
       <slot></slot>
     </div>
   `;
-}
+  }
 
 
 }
-CustomLightCarousel.styles = [carouselCSS];
-LightCarouselItem.styles = [carouselCSS];
+CustomLightCarousel.styles = [tokens, carouselCSS];
+LightCarouselItem.styles = [tokens, carouselCSS];
 
 customElements.define("bd-light-carousel-item", LightCarouselItem);
 

package/src/components/paragraph/paragraph.js

@@ -1,6 +1,7 @@
-import { LitElement, html, css } from "lit";
-import paragraphText from "../paragraph/paragraph.css.js";
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
 import textCSS from "../../tokens/typography.css.js";
+import paragraphText from "../paragraph/paragraph.css.js";
 
 class TextFontBrand extends LitElement {
   static properties = {
@@ -50,9 +51,9 @@ class TextFontComp extends LitElement {
     return html` <p class="bd-font-comp">${this.text}</p> `;
   }
 }
-TextFontBrand.styles = [paragraphText, textCSS];
-TextFontCod.styles = [paragraphText, textCSS];
-TextFontComp.styles = [paragraphText, textCSS];
+TextFontBrand.styles = [tokens, paragraphText, textCSS];
+TextFontCod.styles = [tokens, paragraphText, textCSS];
+TextFontComp.styles = [tokens, paragraphText, textCSS];
 
 customElements.define("bd-font-brand", TextFontBrand);
 customElements.define("bd-font-cod", TextFontCod);