@repobit/dex-system-design 0.10.0 → 0.12.0

package/src/components/carousel/carousel.css.js

@@ -23,12 +23,12 @@ export default css`
   }
     
   .bd-section-title {
-    font-family: var(--font-family-sans);
-    font-weight: var(--font-weight-sans-semibold);
+    font-family: var(--typography-fontFamily-sans);
+    font-weight: var(--typography-fontWeight-semibold);
     font-size: 2em;
   }
   div.bd-arrow {
-    padding: var(--size-2);
+    padding: var(--spacing-2);
     visibility: visible;
   }
 
@@ -36,8 +36,8 @@ export default css`
   .bd-arrow:focus-visible,
   .bd-plus-button:focus-visible,
   .bd-modal-content button:focus-visible {
-    outline: var(--size-2) solid var(--bd-accesibility-focus);
-    outline-offset: var(--size-2);
+    outline: var(--spacing-2) solid var(--bd-accesibility-focus);
+    outline-offset: var(--spacing-2);
   }
 
   .bd-header-carousel {
@@ -55,59 +55,59 @@ export default css`
   }
   .bd-arrow {
     border-radius: 50%;
-    width: var(--size-44);
-    height: var(--size-44);
+    width: var(--spacing-44);
+    height: var(--spacing-44);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    box-shadow: var(--size-0) var(--size-2) var(--size-4) rgba(0, 0, 0, 0.1);
+    box-shadow: var(--spacing-0) var(--spacing-2) var(--spacing-4) rgba(0, 0, 0, 0.1);
     position: absolute;
     bottom: -65px;
     background: var(--bd-blue-color);
     color: white;
-    font-size: var(--size-20);
+    font-size: var(--spacing-20);
     line-height: 1;
     text-align: center;
   }
 
   .bd-left-arrow {
-    content: url("icons/left_normal.png");
+    content: url("/assets/left_normal.png");
   }
 
   .bd-left-arrow:hover {
-    content: url("icons/left_hover.png");
+    content: url("/assets/left_hover.png");
   }
 
   .bd-left-arrow:active {
-    content: url("icons/left_clicked.png");
+    content: url("/assets/left_clicked.png");
   }
 
   .bd-left-arrow:disabled {
-    content: url("icons/left_disabled.png");
+    content: url("/assets/left_disabled.png");
   }
 
   .bd-right-arrow {
-    content: url("icons/right_normal.png");
+    content: url("/assets/right_normal.png");
   }
 
   .bd-right-arrow:hover {
-    content: url("icons/right_hover.png");
+    content: url("/assets/right_hover.png");
   }
 
   .bd-right-arrow:active {
-    content: url("icons/right_clicked.png");
+    content: url("/assets/right_clicked.png");
   }
 
   .bd-right-arrow:disabled {
-    content: url("icons/right_disabled.png");
+    content: url("/assets/right_disabled.png");
   }
   .bd-right-arrow.bd-disabled {
-    content: url("icons/right_disabled.png");
+    content: url("/assets/right_disabled.png");
     cursor: not-allowed;
   }
   .bd-left-arrow.bd-disabled {
-    content: url("icons/left_disabled.png");
+    content: url("/assets/left_disabled.png");
     cursor: not-allowed;
   }
   .bd-disabled {
@@ -121,14 +121,14 @@ export default css`
   }
 
   .bd-arrow:last-of-type {
-    right: var(--size-10);
+    right: var(--spacing-10);
   }
 
   .bd-carousel-track {
     display: flex;
     gap: 2em;
     flex: 1;
-    padding: var(--size-0) var(--size-20);
+    padding: var(--spacing-0) var(--spacing-20);
     position: relative;
     overflow-x: hidden;
     overflow-y: hidden;
@@ -141,15 +141,15 @@ export default css`
   .bd-carousel-icon {
     position: relative;
     max-width: 100%;
-    height: var(--size-40);
-    width: var(--size-40);
+    height: var(--spacing-40);
+    width: var(--spacing-40);
   }
   .bd-carousel-modal-icon {
     position: relative;
     bottom: 15px;
     max-width: 100%;
-    height: var(--size-40);
-    width: var(--size-40);
+    height: var(--spacing-40);
+    width: var(--spacing-40);
   }
   .bd-box {
     flex: 0 0 auto;
@@ -158,7 +158,7 @@ export default css`
     width: 350px;
     background: var(--background-card-grey);
     border-radius: 28px;
-    border: var(--size-2) solid var(--border-card-grey);
+    border: var(--spacing-2) solid var(--border-card-grey);
     padding: 2em;
     display: flex;
     flex-direction: column;
@@ -167,28 +167,28 @@ export default css`
     text-align: start;
     cursor: pointer;
     transition: transform 0.2s ease-in-out;
-    font-family: var(--font-family-sans);
+    font-family: var(--typography-fontFamily-sans);
     position: relative;
     z-index: 2;
   }
 
   .bd-box h3 {
-    font-size: var(--size-18);
-    margin: var(--size-0) var(--size-0) 0.5em var(--size-0);
+    font-size: var(--spacing-18);
+    margin: var(--spacing-0) var(--spacing-0) 0.5em var(--spacing-0);
     font-weight: 600;
-    font-family: var(--font-family-sans);
+    font-family: var(--typography-fontFamily-sans);
   }
 
   .bd-box p {
-    font-size: var(--size-16);
-    margin: var(--size-0) var(--size-0) 1em var(--size-0);
-    font-family: var(--font-family-sans);
+    font-size: var(--spacing-16);
+    margin: var(--spacing-0) var(--spacing-0) 1em var(--spacing-0);
+    font-family: var(--typography-fontFamily-sans);
   }
 
   .bd-modal {
     position: fixed;
-    top: var(--size-0);
-    left: var(--size-0);
+    top: var(--spacing-0);
+    left: var(--spacing-0);
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
@@ -196,7 +196,7 @@ export default css`
     justify-content: center;
     align-items: center;
     z-index: 9999;
-    backdrop-filter: blur(var(--size-12));
+    backdrop-filter: blur(var(--spacing-12));
     opacity: 0;
     transform: scale(0.9);
     transition: opacity 0.3s ease, transform 0.3s ease;
@@ -210,16 +210,16 @@ export default css`
   .bd-modal-content {
     background: #fff;
     padding: 2em;
-    border-radius: var(--size-12);
+    border-radius: var(--spacing-12);
     max-width: 500px;
     text-align: start;
-    box-shadow: var(--size-0) var(--size-2) var(--size-8) rgba(0, 0, 0, 0.2);
-    font-family: var(--font-family-sans);
+    box-shadow: var(--spacing-0) var(--spacing-2) var(--spacing-8) rgba(0, 0, 0, 0.2);
+    font-family: var(--typography-fontFamily-sans);
   }
 
   .bd-modal-content h2 {
-    margin: var(--size-0) var(--size-0) 1em var(--size-0);
-    font-family: var(--font-family-sans);
+    margin: var(--spacing-0) var(--spacing-0) 1em var(--spacing-0);
+    font-family: var(--typography-fontFamily-sans);
   }
 
   .bd-modal-content button {
@@ -228,19 +228,19 @@ export default css`
     background: var(--bd-blue-color);
     color: #fff;
     border: none;
-    border-radius: var(--size-8);
+    border-radius: var(--spacing-8);
     cursor: pointer;
-    font-family: var(--font-family-sans);
+    font-family: var(--typography-fontFamily-sans);
   }
 
   .bd-plus-button {
-    content: url("icons/more_normal.png");
+    content: url("/assets/more_normal.png");
     position: absolute;
-    bottom: var(--size-10);
-    right: var(--size-10);
+    bottom: var(--spacing-10);
+    right: var(--spacing-10);
     color: var(--bd-blue-color);
-    width: var(--size-44);
-    height: var(--size-44);
+    width: var(--spacing-44);
+    height: var(--spacing-44);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -250,23 +250,23 @@ export default css`
     cursor: pointer;
   }
   .bd-plus-button:hover {
-    content: url("icons/more_hover.png");
+    content: url("/assets/more_hover.png");
   }
 
   bd-carousel-item::part(content) {
-    font-family: var(--font-family-sans);
+    font-family: var(--typography-fontFamily-sans);
   }
 
   .bd-plus-button:active {
-    content: url("icons/more_pressed.png");
+    content: url("/assets/more_pressed.png");
   }
 
   .bd-left-arrow {
-    margin-right: var(--size-6);
+    margin-right: var(--spacing-6);
   }
 
   .bd-right-arrow {
-    margin-left: var(--size-6);
+    margin-left: var(--spacing-6);
   }
 
   @media (max-width: 768px) {
@@ -274,12 +274,12 @@ export default css`
       flex-wrap: nowrap;
       overflow-x: hidden;
       gap: 1em;
-      padding: var(--size-0) var(--size-0);
+      padding: var(--spacing-0) var(--spacing-0);
     }
 
     .bd-box {
       max-width: 100%;
-      margin: var(--size-0) auto;
+      margin: var(--spacing-0) auto;
     }
 
     .bd-modal-content {
@@ -289,7 +289,7 @@ export default css`
 
     .bd-arrow {
       bottom: -75px;
-      font-size: var(--size-16);
+      font-size: var(--spacing-16);
     }
 
     .bd-arrow:first-of-type {
@@ -297,13 +297,13 @@ export default css`
     }
 
     .bd-arrow:last-of-type {
-      right: var(--size-6);
+      right: var(--spacing-6);
     }
   }
 
   @media (max-width: 480px) {
     .bd-box {
-      padding: var(--size-0) var(--size-20);
+      padding: var(--spacing-0) var(--spacing-20);
       min-height: 300px;
     }
 
@@ -312,10 +312,10 @@ export default css`
     }
 
     .bd-plus-icon {
-      font-size: var(--size-24);
+      font-size: var(--spacing-24);
     }
     .bd-carousel-icon {
-      bottom: var(--size-10);
+      bottom: var(--spacing-10);
     }
   }
 `;

package/src/components/carousel/carousel.js

@@ -1,6 +1,7 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
 import carouselCSS from "../carousel/carousel.css.js";
+import "../modal/modal.js";
 
 export class CarouselItem extends LitElement {
   static properties = {
@@ -89,18 +90,28 @@ class CustomCarousel extends LitElement {
 
     const arrows = this.shadowRoot.querySelectorAll(".bd-arrow");
     arrows.forEach((arrow) => {
-      arrow.addEventListener("mousedown", () => arrow.classList.add("bd-active"));
-      arrow.addEventListener("mouseup", () => arrow.classList.remove("bd-active"));
-      arrow.addEventListener("mouseleave", () => arrow.classList.remove("bd-active"));
+      arrow.addEventListener("mousedown", () =>
+        arrow.classList.add("bd-active")
+      );
+      arrow.addEventListener("mouseup", () =>
+        arrow.classList.remove("bd-active")
+      );
+      arrow.addEventListener("mouseleave", () =>
+        arrow.classList.remove("bd-active")
+      );
       arrow.addEventListener("keydown", (e) => this._onArrowKeydown(e, arrow));
     });
 
-    this.addEventListener("open-modal", (e) => this.openModal(e.detail));
+    this.addEventListener("open-modal", (e) => {
+      this.openModal(e.detail);
+    });
     this.enableDragAndTouchScroll(this.track);
   }
 
   waitForImagesToLoad() {
-    const assignedElements = this.slotElement.assignedElements({ flatten: true });
+    const assignedElements = this.slotElement.assignedElements({
+      flatten: true
+    });
     const images = assignedElements
       .map((el) => el.shadowRoot?.querySelector("img"))
       .filter((img) => img);
@@ -118,7 +129,9 @@ class CustomCarousel extends LitElement {
   }
 
   scrollCarousel(direction) {
-    const assignedElements = this.slotElement.assignedElements({ flatten: true });
+    const assignedElements = this.slotElement.assignedElements({
+      flatten: true
+    });
     if (!assignedElements.length) return;
     const itemWidth = assignedElements[0].offsetWidth || 300;
     if (!this.track) return;
@@ -241,30 +254,13 @@ class CustomCarousel extends LitElement {
 
       ${this.selectedItem
         ? html`
-            <div
-              class="bd-modal"
-              @click="${this.closeModal}"
-              aria-hidden="${!this.selectedItem}"
-              ?open="${true}"
-            >
-              <div
-                class="bd-modal-content"
-                @click="${(e) => e.stopPropagation()}"
-                aria-labelledby="modal-title"
-                aria-describedby="modal-description"
-              >
-                <img
-                  src="${this.selectedItem.icon}"
-                  alt="icon"
-                  class="bd-carousel-modal-icon"
-                />
-                <h2 id="modal-title">${this.selectedItem.title}</h2>
-                <p id="modal-description">${this.selectedItem.modalText}</p>
-                <button @click="${this.closeModal}" aria-label="Close modal">
-                  Close
-                </button>
-              </div>
-            </div>
+            <bd-modal
+              .open="${!!this.selectedItem}"
+              .title="${this.selectedItem.title}"
+              .modalText="${this.selectedItem.modalText}"
+              .icon="${this.selectedItem.icon}"
+              @close-modal="${this.closeModal}"
+            ></bd-modal>
           `
         : ""}
     `;

package/src/components/carousel/carousel.stories.js

@@ -2,75 +2,75 @@ import { html } from "lit";
 import "./carousel.js";
 
 export default {
-  title: "Components/Carousel Section",
+  title    : "Components/Carousel Section",
   component: "bd-carousel-section",
-  tags: ["autodocs"],
-  argTypes: {
+  tags     : ["autodocs"],
+  argTypes : {
     title: { control: "text" },
 
     // Item 1
-    item1Title: { control: "text", name: "Item 1 Title" },
-    item1SubTitle: { control: "text", name: "Item 1 SubTitle" },
+    item1Title    : { control: "text", name: "Item 1 Title" },
+    item1SubTitle : { control: "text", name: "Item 1 SubTitle" },
     item1ModalText: { control: "text", name: "Item 1 Modal Text" },
-    item1Icon: { control: "text", name: "Item 1 Icon" },
-    item1Content: { control: "text", name: "Item 1 Content (use \\n\\n for paragraphs)" },
+    item1Icon     : { control: "text", name: "Item 1 Icon" },
+    item1Content  : { control: "text", name: "Item 1 Content (use \\n\\n for paragraphs)" },
 
     // Item 2
-    item2Title: { control: "text", name: "Item 2 Title" },
-    item2SubTitle: { control: "text", name: "Item 2 SubTitle" },
+    item2Title    : { control: "text", name: "Item 2 Title" },
+    item2SubTitle : { control: "text", name: "Item 2 SubTitle" },
     item2ModalText: { control: "text", name: "Item 2 Modal Text" },
-    item2Icon: { control: "text", name: "Item 2 Icon" },
-    item2Content: { control: "text", name: "Item 2 Content (use \\n\\n for paragraphs)" },
+    item2Icon     : { control: "text", name: "Item 2 Icon" },
+    item2Content  : { control: "text", name: "Item 2 Content (use \\n\\n for paragraphs)" },
 
     // Item 3
-    item3Title: { control: "text", name: "Item 3 Title" },
-    item3SubTitle: { control: "text", name: "Item 3 SubTitle" },
+    item3Title    : { control: "text", name: "Item 3 Title" },
+    item3SubTitle : { control: "text", name: "Item 3 SubTitle" },
     item3ModalText: { control: "text", name: "Item 3 Modal Text" },
-    item3Icon: { control: "text", name: "Item 3 Icon" },
-    item3Content: { control: "text", name: "Item 3 Content (use \\n\\n for paragraphs)" },
+    item3Icon     : { control: "text", name: "Item 3 Icon" },
+    item3Content  : { control: "text", name: "Item 3 Content (use \\n\\n for paragraphs)" },
 
     // Item 4
-    item4Title: { control: "text", name: "Item 4 Title" },
-    item4SubTitle: { control: "text", name: "Item 4 SubTitle" },
+    item4Title    : { control: "text", name: "Item 4 Title" },
+    item4SubTitle : { control: "text", name: "Item 4 SubTitle" },
     item4ModalText: { control: "text", name: "Item 4 Modal Text" },
-    item4Icon: { control: "text", name: "Item 4 Icon" },
-    item4Content: { control: "text", name: "Item 4 Content (use \\n\\n for paragraphs)" },
+    item4Icon     : { control: "text", name: "Item 4 Icon" },
+    item4Content  : { control: "text", name: "Item 4 Content (use \\n\\n for paragraphs)" },
 
     // Item 5
-    item5Title: { control: "text", name: "Item 5 Title" },
-    item5SubTitle: { control: "text", name: "Item 5 SubTitle" },
+    item5Title    : { control: "text", name: "Item 5 Title" },
+    item5SubTitle : { control: "text", name: "Item 5 SubTitle" },
     item5ModalText: { control: "text", name: "Item 5 Modal Text" },
-    item5Icon: { control: "text", name: "Item 5 Icon" },
-    item5Content: { control: "text", name: "Item 5 Content (use \\n\\n for paragraphs)" },
+    item5Icon     : { control: "text", name: "Item 5 Icon" },
+    item5Content  : { control: "text", name: "Item 5 Content (use \\n\\n for paragraphs)" },
 
     // Item 6
-    item6Title: { control: "text", name: "Item 6 Title" },
-    item6SubTitle: { control: "text", name: "Item 6 SubTitle" },
+    item6Title    : { control: "text", name: "Item 6 Title" },
+    item6SubTitle : { control: "text", name: "Item 6 SubTitle" },
     item6ModalText: { control: "text", name: "Item 6 Modal Text" },
-    item6Icon: { control: "text", name: "Item 6 Icon" },
-    item6Content: { control: "text", name: "Item 6 Content (use \\n\\n for paragraphs)" },
+    item6Icon     : { control: "text", name: "Item 6 Icon" },
+    item6Content  : { control: "text", name: "Item 6 Content (use \\n\\n for paragraphs)" },
 
     // Item 7
-    item7Title: { control: "text", name: "Item 7 Title" },
-    item7SubTitle: { control: "text", name: "Item 7 SubTitle" },
+    item7Title    : { control: "text", name: "Item 7 Title" },
+    item7SubTitle : { control: "text", name: "Item 7 SubTitle" },
     item7ModalText: { control: "text", name: "Item 7 Modal Text" },
-    item7Icon: { control: "text", name: "Item 7 Icon" },
-    item7Content: { control: "text", name: "Item 7 Content (use \\n\\n for paragraphs)" },
+    item7Icon     : { control: "text", name: "Item 7 Icon" },
+    item7Content  : { control: "text", name: "Item 7 Content (use \\n\\n for paragraphs)" },
 
     // Item 8
-    item8Title: { control: "text", name: "Item 8 Title" },
-    item8SubTitle: { control: "text", name: "Item 8 SubTitle" },
+    item8Title    : { control: "text", name: "Item 8 Title" },
+    item8SubTitle : { control: "text", name: "Item 8 SubTitle" },
     item8ModalText: { control: "text", name: "Item 8 Modal Text" },
-    item8Icon: { control: "text", name: "Item 8 Icon" },
-    item8Content: { control: "text", name: "Item 8 Content (use \\n\\n for paragraphs)" },
-  },
+    item8Icon     : { control: "text", name: "Item 8 Icon" },
+    item8Content  : { control: "text", name: "Item 8 Content (use \\n\\n for paragraphs)" }
+  }
 };
 
 const renderParagraphs = (text) =>
   text
     ? text.split("\n\n").map(
-        (paragraph) => html`<p>${paragraph}</p>`
-      )
+      (paragraph) => html`<p>${paragraph}</p>`
+    )
     : null;
 
 const Template = (args) => html`
@@ -166,21 +166,21 @@ Default.args = {
     "Specialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim",
   item1ModalText:
     "Specialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim",
-  item1Icon: "icons/light-carousel-img1.png",
+  item1Icon   : "/assets/light-carousel-img1.png",
   item1Content: `Specialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim.\n\nSpecialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim.\n\nTest Scam Copilot Bot`,
 
-  item2Title: "Scam Wave Alerts",
-  item2SubTitle: "Proactively informs you about scam outbreaks in your region",
+  item2Title    : "Scam Wave Alerts",
+  item2SubTitle : "Proactively informs you about scam outbreaks in your region",
   item2ModalText: "Proactively informs you about scam outbreaks in your region",
-  item2Icon: "icons/light-carousel-img1.png",
-  item2Content: "Proactively informs you about scam outbreaks in your region.",
+  item2Icon     : "/assets/light-carousel-img1.png",
+  item2Content  : "Proactively informs you about scam outbreaks in your region.",
 
   item3Title: "AI-Powered Scam Check",
   item3SubTitle:
     "AI-driven tool that instantly evaluates the legitimacy of any link, message, or online interaction",
   item3ModalText:
     "AI-driven tool that instantly evaluates the legitimacy of any link, message, or online interaction",
-  item3Icon: "icons/light-carousel-img1.png",
+  item3Icon: "/assets/light-carousel-img1.png",
   item3Content:
     "AI-driven tool that instantly evaluates the legitimacy of any link, message, or online interaction.",
 
@@ -189,7 +189,7 @@ Default.args = {
     "Access a wealth of information and best practices to stay informed and vigilant against scams",
   item4ModalText:
     "Access a wealth of information and best practices to stay informed and vigilant against scams",
-  item4Icon: "icons/light-carousel-img1.png",
+  item4Icon: "/assets/light-carousel-img1.png",
   item4Content:
     "Access a wealth of information and best practices to stay informed and vigilant against scams.",
 
@@ -198,7 +198,7 @@ Default.args = {
     "Simulates phishing attacks to help you recognize and respond appropriately to real threats",
   item5ModalText:
     "Simulates phishing attacks to help you recognize and respond appropriately to real threats",
-  item5Icon: "icons/light-carousel-img1.png",
+  item5Icon: "/assets/light-carousel-img1.png",
   item5Content:
     "Simulates phishing attacks to help you recognize and respond appropriately to real threats.",
 
@@ -207,7 +207,7 @@ Default.args = {
     "Stay ahead with up-to-the-minute alerts on the latest scams targeting your region or industry",
   item6ModalText:
     "Stay ahead with up-to-the-minute alerts on the latest scams targeting your region or industry",
-  item6Icon: "icons/light-carousel-img1.png",
+  item6Icon: "/assets/light-carousel-img1.png",
   item6Content:
     "Stay ahead with up-to-the-minute alerts on the latest scams targeting your region or industry.",
 
@@ -216,14 +216,14 @@ Default.args = {
     "A platform where users can report scams and share experiences to help protect others",
   item7ModalText:
     "A platform where users can report scams and share experiences to help protect others",
-  item7Icon: "icons/light-carousel-img1.png",
-  item7Content:"A platform where users can report scams and share experiences to help protect others.",
-item8Title: "Fraud Prevention Workshops",
-item8SubTitle:
+  item7Icon   : "/assets/light-carousel-img1.png",
+  item7Content: "A platform where users can report scams and share experiences to help protect others.",
+  item8Title  : "Fraud Prevention Workshops",
+  item8SubTitle:
 "Interactive workshops that educate users on identifying and avoiding scams",
-item8ModalText:
+  item8ModalText:
 "Interactive workshops that educate users on identifying and avoiding scams",
-item8Icon: "icons/light-carousel-img1.png",
-item8Content:
-"Interactive workshops that educate users on identifying and avoiding scams.",
+  item8Icon: "/assets/light-carousel-img1.png",
+  item8Content:
+"Interactive workshops that educate users on identifying and avoiding scams."
 };

package/src/components/checkbox/checkbox.css.js

@@ -10,7 +10,7 @@ export default css`
     display: inline-flex;
     align-items: center;
     cursor: pointer;
-    gap: var(--size-8);
+    gap: var(--spacing-8);
     font-family: sans-serif;
     font-size: 14px;
     vertical-align: middle;
@@ -30,9 +30,9 @@ export default css`
 
   /* Checkbox */
   .bd-checkbox .bd-outer {
-    width: var(--size-22);
-    height: var(--size-22);
-    border: var(--size-2) solid var(--color-blue-500);
+    width: var(--spacing-22);
+    height: var(--spacing-22);
+    border: var(--spacing-2) solid var(--color-blue-500);
     border-radius: 4px;
     display: flex;
     align-items: center;
@@ -43,10 +43,10 @@ export default css`
   }
 
   .bd-checkbox .bd-inner {
-    width: var(--size-12);
-    height: var(--size-12);
+    width: var(--spacing-12);
+    height: var(--spacing-12);
     background-color: var(--color-blue-500);
-    border-radius: var(--size-2);
+    border-radius: var(--spacing-2);
     transform: scale(0);
     transition: transform 0.2s ease, background-color 0.2s ease;
   }
@@ -56,9 +56,9 @@ export default css`
   }
 
   .bd-radio .bd-outer {
-    width: var(--size-22);
-    height: var(--size-22);
-    border: var(--size-2) solid var(--color-blue-500);
+    width: var(--spacing-22);
+    height: var(--spacing-22);
+    border: var(--spacing-2) solid var(--color-blue-500);
     border-radius: 50%;
     display: flex;
     align-items: center;
@@ -69,8 +69,8 @@ export default css`
   }
 
   .bd-radio .bd-inner {
-    width: var(--size-12);
-    height: var(--size-12);
+    width: var(--spacing-12);
+    height: var(--spacing-12);
     background-color: var(--color-blue-500);
     border-radius: 50%;
     transform: scale(0);
@@ -112,8 +112,8 @@ export default css`
 }
 
 .bd-checkbox .bd-outer:focus-visible {
-  outline: var(--size-2) solid var(--color-blue-500);
-  outline-offset: var(--size-2);
+  outline: var(--spacing-2) solid var(--color-blue-500);
+  outline-offset: var(--spacing-2);
 }
 .bd-checkbox .bd-outer.checked:focus-visible {
   border-color: var(--color-blue-700);