@repobit/dex-system-design 0.11.0 → 0.12.0

package/src/components/radio/radio.css.js

@@ -9,7 +9,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;
@@ -27,9 +27,9 @@ export default css`
 
   .bd-outer,
   .custom-radio {
-    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;
@@ -39,8 +39,8 @@ export default css`
   }
 
   .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);
@@ -84,8 +84,8 @@ export default css`
   
   .bd-radio.focus .bd-outer,
   .bd-outer.focus {
-    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);
   }
 
   .hidden-input {
@@ -106,8 +106,8 @@ export default css`
     position: absolute;
     top: 50%;
     left: 50%;
-    width: var(--size-12);
-    height: var(--size-12);
+    width: var(--spacing-12);
+    height: var(--spacing-12);
     background-color: #006dff;
     border-radius: 50%;
     transform: translate(-50%, -50%) scale(0);
@@ -133,23 +133,23 @@ export default css`
   }
 
   .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-outer:focus:not(:focus-visible) {
     outline: none;
   }
   .bd-outer.focus {
-    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-outer:active {
-    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-outer:focus-visible.checked {
-    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-outer:focus-visible.checked .bd-inner {

package/src/components/radio/radio.js

@@ -183,6 +183,7 @@ class BdToggleRadio extends LitElement {
     }
   }
 
+
   render() {
     return html`
       <label class="bd-radio ${this.disabled ? "disabled" : ""}">

package/src/components/tabs/tabs.css.js

@@ -11,17 +11,27 @@ export default css`
     --text-color-white: var(--color-neutral-0);
     font-size: 100%;
     display: block;
-    font-family: var(--font-family-sans);
+    font-family: var(--typography-fontFamily-sans);
+    padding-top: var(--spacing-64);
+    padding-bottom: var(--spacing-64);
   }
-
+.bd-tabs-subtitle{
+font-size: var(--typography-body-regular-fontSize);
+max-width: 500px;
+text-align: center;
+    font-family: var(--typography-fontFamily-sans);
+    margin-top: var(--spacing-32);
+    margin-bottom: var(--spacing-32);
+
+}
   .bd-tab-button p {
     margin-top: 1em;
     margin-bottom: 1em;
   }
   .bd-tab-button:focus-visible,
   .bd-find-out-more: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);
     border-radius: var(--space-2xs);
   }
   .bd-tabs-component .bd-left img {
@@ -47,7 +57,7 @@ export default css`
     flex: 1;
     justify-content: center;
     align-items: center;
-    padding: 0px var(--size-24);
+    padding: var(--spacing-0) var(--spacing-24);
   }
 
   .bd-tabs-container {
@@ -57,6 +67,7 @@ export default css`
     flex-wrap: wrap;
     border-bottom: 1px solid #e4f2ff;
     margin: 0 auto;
+    margin-bottom: var(--spacing-32);
   }
 
   .bd-tabs-container button {
@@ -119,7 +130,6 @@ export default css`
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-top: 48px;
   }
 
   .bd-ul-privacy {
@@ -137,8 +147,8 @@ export default css`
     align-items: start;
     position: relative;
     cursor: pointer;
-    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);
   }
 
   .bd-find-out-more .bd-arrow svg {
@@ -149,12 +159,12 @@ export default css`
   }
 
   .bd-right h3 {
-    font-size: 1.5em;
+    font-size: var(--typography-heading-h4-fontSize);
   }
 
   .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);
   }
 
   /* ✅ Responsive Design */

package/src/components/tabs/tabs.js

@@ -1,6 +1,5 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
-
 import tabsCSS from "../tabs/tabs.css.js";
 
 class TabsComponent extends LitElement {
@@ -14,7 +13,6 @@ class TabsComponent extends LitElement {
   }
 
   selectTab(index) {
-    console.log("Selected Tab:", index);
     this.selectedTab = index;
     this.requestUpdate();
   }
@@ -23,23 +21,23 @@ class TabsComponent extends LitElement {
     const tabs = [
       {
         title    : "Privacy Protection",
-        imageBase: "images/tabs-img1.png",
-        icon     : "icons/pic1.png"
+        imageBase: "/assets/tabs-img1.png",
+        icon     : "/assets/pic1.png"
       },
       {
         title    : "Identity Protection",
-        imageBase: "images/tabs-img2.png",
-        icon     : "icons/pic2.png"
+        imageBase: "/assets/tabs-img2.png",
+        icon     : "/assets/pic2.png"
       },
       {
         title    : "Device Protection",
-        imageBase: "images/tabs-img3.png",
-        icon     : "icons/pic3.png"
+        imageBase: "/assets/tabs-img3.png",
+        icon     : "/assets/pic3.png"
       },
       {
         title    : "Financial Insurance",
-        imageBase: "images/tabs-img3.png",
-        icon     : "icons/pic3.png"
+        imageBase: "/assets/tabs-img3.png",
+        icon     : "/assets/pic3.png"
       }
     ];
 
@@ -106,15 +104,17 @@ class TabsComponent extends LitElement {
 
     return html`
       <div class="bd-tabs-component">
-        <h1 class="bd-section-title">
-          Live your digital life worry-free from start to finish
-        </h1>
+        <bd-highlight highlight-text="family member">
+          Customized online protection for each family member - Smart, Private &
+          Safe
+        </bd-highlight>
+        <p class="bd-tabs-subtitle">Your family is unique and so should be your online security. Our family protection plan adapts to each member’s needs, offering the ideal mix of privacy, freedom, and safety.</p>
         <div class="bd-tabs-container">
           ${tabs.map(
             (tab, index) => html`
               <button
-                role="tab" 
-                aria-selected="${this.selectedTab === index ? 'true' : 'false'}" 
+                role="tab"
+                aria-selected="${this.selectedTab === index ? "true" : "false"}"
                 class=${this.selectedTab === index
                   ? "bd-selected bd-tab-button"
                   : "bd-tab-button"}
@@ -152,14 +152,20 @@ class TabsComponent extends LitElement {
             </picture>
           </div>
           <div class="bd-right">
-            <h3 id="tab-content-heading-${this.selectedTab}">${content[this.selectedTab].heading}</h3>
-            <div id="tab-content-${this.selectedTab}" aria-labelledby="tab-content-heading-${this.selectedTab}">
+            <h3 id="tab-content-heading-${this.selectedTab}">
+              ${content[this.selectedTab].heading}
+            </h3>
+            <div
+              id="tab-content-${this.selectedTab}"
+              aria-labelledby="tab-content-heading-${this.selectedTab}"
+            >
               ${content[this.selectedTab].description()}
             </div>
             <a
               href="${content[this.selectedTab].href}"
               class="bd-find-out-more"
-              aria-label="Find out more about ${content[this.selectedTab].heading}"
+              aria-label="Find out more about ${content[this.selectedTab]
+                .heading}"
             >
               Find out more
               <span class="bd-arrow">

package/src/components/termsOfUse/terms.css.js

@@ -14,26 +14,26 @@ export default css`
   }
 
   .bd-terms-text-a: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);
     border-radius: var(--space-2xs);
   }
   .bd-terms-container {
     background: #f2f2f2;
-    padding: var(--size-44) 0;
+    padding: var(--spacing-44) 0;
     font-family: Arial, Helvetica, sans-serif;
   }
 
   .bd-terms-wrapper {
-    padding: var(--size-14) var(--size-20) var(--size-40) var(--size-20);
+    padding: var(--spacing-14) var(--spacing-20) var(--spacing-40) var(--spacing-20);
   }
 
   #bd-terms-of-use {
-    font-size: var(--size-16);
+    font-size: var(--spacing-16);
   }
 
   .bd-terms-text-p {
-    font-size: var(--size-12);
+    font-size: var(--spacing-12);
     line-height: 1.31;
     letter-spacing: 0.006em;
     padding: 0;

package/src/components/termsOfUse/terms.js

@@ -1,6 +1,5 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
-
 import termsCSS from "../termsOfUse/terms.css.js";
 
 class TermsSection extends LitElement {

package/src/stories/demo.stories.js

@@ -0,0 +1,271 @@
+// src/stories/DesignSystem.stories.js
+import '/src/components/Anchor/anchor-nav.js';
+import '/src/components/badge/badge.js';
+import '/src/components/Button/Button.js';
+import '/src/components/carousel/carousel.js';
+import '/src/components/checkbox/checkbox.js';
+import '/src/components/divider/divider-horizontal.js';
+import '/src/components/divider/divider-vertical.js';
+import '/src/components/FAQ/faq.js';
+import '/src/components/header/header.js';
+import '/src/components/highlight/highlight.js';
+import '/src/components/input/input.js';
+import '/src/components/light-carousel/light-carousel.js';
+import '/src/components/paragraph/paragraph.js';
+import '/src/components/pricing-cards/pricing-card.js';
+import '/src/components/radio/radio.js';
+import '/src/components/tabs/tabs.js';
+import '/src/components/termsOfUse/terms.js';
+
+export default {
+  title     : 'Design System/Demo full page',
+  parameters: {
+    // eventuale parametri Storybook (ex: backgrounds, viewport etc)
+  },
+  decorators: [
+    (Story) => {
+      // injectează token-urile CSS global în Storybook (dacă nu sunt deja)
+      return `
+        <link rel="stylesheet" href="/src/tokens/tokens.css" />
+        <link rel="stylesheet" href="/src/tokens/layout.css" />
+        <link rel="stylesheet" href="/src/tokens/typography.css" />
+        <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600&display=swap" rel="stylesheet" />
+        ${Story()}
+      `;
+    }
+  ]
+};
+
+export const FullPage = () => `
+  <bd-header
+    product-name="Bitdefender Ultimate Security"
+    value-prop="Complete Security, Advanced Privacy, and Identity Protection"
+    description="All in one plan to incorporate multi-awarded device protection, solid password management, unlimited VPN traffic & personalized protection for your online identity."
+    full-price="$139.99"
+    discount="Save 44%"
+    final-price="$79.99"
+  >
+    <div class="bd-header-right">
+      <img
+        class="bd-header-image"
+        src="/assets/bd-header-us.jpg"
+        alt="Security illustration"
+      />
+    </div>
+  </bd-header>
+
+  <bd-anchor-nav>
+    <bd-anchor-nav-item title="Anchor 1" id="anchor-1"></bd-anchor-nav-item>
+    <bd-anchor-nav-item title="Anchor 2" id="anchor-2"></bd-anchor-nav-item>
+    <bd-anchor-nav-item title="Anchor 3" id="anchor-3"></bd-anchor-nav-item>
+  </bd-anchor-nav>
+
+  <p>Let’s Secure Your Digital Life</p>
+
+  <bd-highlight-text highlight-text="next generation of digital security">
+    Introducing the next generation of digital security: your personalized shield for a worry-free online experience.
+  </bd-highlight-text>
+
+  <bd-light-carousel-section
+    title="Our AI-powered platform that detects and fights scams. In real time."
+  >
+    <bd-light-carousel-item
+      title="Scam Copilot Chatbot"
+      icon="/assets/light-carousel-img1.png"
+      badge="NEW"
+    >
+      <p>
+        Specialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim.
+      </p>
+    </bd-light-carousel-item>
+
+    <bd-light-carousel-item
+      title="Scam Wave Alerts"
+      icon="/assets/light-carousel-img1.png"
+      badge="NEW"
+    >
+      <p>
+        Stay informed with real-time alerts about ongoing scam outbreaks detected in your area automatically.
+      </p>
+    </bd-light-carousel-item>
+
+    <bd-light-carousel-item
+      title="Online Scam Protection"
+      icon="/assets/light-carousel-img1.png"
+      badge="NEW"
+    >
+      <p>Focused on browsing activities, it specializes in detecting the newest scam patterns and tactics.</p>
+    </bd-light-carousel-item>
+
+    <bd-light-carousel-item
+      title="Remote Access Protection"
+      icon="/assets/light-carousel-img1.png"
+      badge="NEW"
+    >
+      <p>Detects patterns of behavior typical of scammers seeking to access your data remotely.</p>
+    </bd-light-carousel-item>
+
+    <bd-light-carousel-item
+      title="SMS Protection"
+      icon="/assets/light-carousel-img1.png"
+      badge="IMPROVED"
+    >
+      <p>Detects scams and harmful links in SMS messages3 using advanced AI for fast, real-time protection.</p>
+    </bd-light-carousel-item>
+
+    <bd-light-carousel-item
+      title="Email Protection"
+      icon="/assets/light-carousel-img1.png"
+    >
+      <p>Detects scams and harmful links in SMS messages3 using advanced AI for fast, real-time protection.</p>
+    </bd-light-carousel-item>
+
+    <bd-light-carousel-item
+      title="Scam Notification Protection"
+      icon="/assets/light-carousel-img1.png"
+    >
+      <p>Scans and detects scam attempts directly in push notifications4 before you even tap or interact.</p>
+    </bd-light-carousel-item>
+
+    <bd-light-carousel-item
+      title="Chat Protection"
+      icon="/assets/light-carousel-img1.png"
+    >
+      <p>Identifies scam messages in WhatsApp, Messenger, Telegram and Discord chats4 before they reach your attention.</p>
+    </bd-light-carousel-item>
+
+    <bd-light-carousel-item
+      title="Calendar Invites Protection"
+      icon="/assets/light-carousel-img1.png"
+    >
+      <p>Finds and blocks scam calendar events5 before they can trick you with fake links or misleading invites.</p>
+    </bd-light-carousel-item>
+  </bd-light-carousel-section>
+
+  <div class="tabs">
+    <bd-tabs-component id="anchor-2-section"></bd-tabs-component>
+  </div>
+
+  <bd-faq-section title="Questions? Answers." id="anchor-1-section">
+    <bd-faq-section-item title="How does Bitdefender Internet Security protect me?">
+      <p>Bitdefender Internet Security provides the best protection...</p>
+      <p>Bitdefender Internet Security provides the best protection...</p>
+      <p>Bitdefender Internet Security provides the best protection...</p>
+    </bd-faq-section-item>
+
+    <bd-faq-section-item title="Does Bitdefender protect me against ransomware?">
+      <p>Yes! Bitdefender Internet Security offers unbeatable ransomware protection...</p>
+    </bd-faq-section-item>
+
+    <bd-faq-section-item title="Do I get a VPN with Bitdefender Internet Security?">
+      <p>Bitdefender Internet Security includes a basic VPN with 200MB per day.</p>
+    </bd-faq-section-item>
+  </bd-faq-section>
+
+  <div class="bd-answer">
+    <bd-terms-section></bd-terms-section>
+  </div>
+
+  <bd-carousel-section
+    title="Need help? We've got answers!"
+    id="anchor-3-section"
+  >
+    <bd-carousel-item
+      title="Scam Copilot Bot"
+      subTitle="Specialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim"
+      modalText="Specialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim"
+      icon="/assets/light-carousel-img1.png"
+    >
+      <h3>Scam Copilot Bot</h3>
+      <p>Specialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim.</p>
+      <p>Specialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim.</p>
+      <p>Specialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim.</p>
+      <h6>Testare Scam Copilot</h6>
+    </bd-carousel-item>
+
+    <bd-carousel-item
+      title="Scam Wave Alerts"
+      subTitle="Proactively informs you about scam outbreaks in your region"
+      modalText="Proactively informs you about scam outbreaks in your region"
+      icon="/assets/light-carousel-img1.png"
+    >
+      <h3>Scam Wave Alerts</h3>
+      <p>Proactively informs you about scam outbreaks in your region.</p>
+    </bd-carousel-item>
+
+    <bd-carousel-item
+      title="AI-Powered Scam Check"
+      subTitle="AI-driven tool that instantly evaluates the legitimacy of any link, message, or online interaction"
+      modalText="AI-driven tool that instantly evaluates the legitimacy of any link, message, or online interaction"
+      icon="/assets/light-carousel-img1.png"
+    >
+      <h3>AI-Powered Scam Check</h3>
+      <p>AI-driven tool that instantly evaluates the legitimacy of any link, message, or online interaction.</p>
+    </bd-carousel-item>
+
+    <bd-carousel-item
+      title="Educational Resources"
+      subTitle="Access a wealth of information and best practices to stay informed and vigilant against scams"
+      modalText="Access a wealth of information and best practices to stay informed and vigilant against scams"
+      icon="/assets/light-carousel-img1.png"
+    >
+      <h3>Educational Resources</h3>
+      <p>Access a wealth of information and best practices to stay informed and vigilant against scams.</p>
+    </bd-carousel-item>
+
+    <bd-carousel-item
+      title="Phishing Simulator"
+      subTitle="Simulates phishing attacks to help you recognize and respond appropriately to real threats"
+      modalText="Simulates phishing attacks to help you recognize and respond appropriately to real threats"
+      icon="/assets/light-carousel-img1.png"
+    >
+      <h3>Phishing Simulator</h3>
+      <p>Simulates phishing attacks to help you recognize and respond appropriately to real threats.</p>
+    </bd-carousel-item>
+
+    <bd-carousel-item
+      title="Real-Time Scam Updates"
+      subTitle="Stay ahead with up-to-the-minute alerts on the latest scams targeting your region or industry"
+      modalText="Stay ahead with up-to-the-minute alerts on the latest scams targeting your region or industry"
+      icon="/assets/light-carousel-img1.png"
+    >
+      <h3>Real-Time Scam Updates</h3>
+      <p>Stay ahead with up-to-the-minute alerts on the latest scams targeting your region or industry.</p>
+    </bd-carousel-item>
+
+    <bd-carousel-item
+      title="Community Reporting Hub"
+      subTitle="A platform where users can report scams and share experiences to help protect others"
+      modalText="A platform where users can report scams and share experiences to help protect others"
+      icon="/assets/light-carousel-img1.png"
+    >
+      <h3>Community Reporting Hub</h3>
+      <p>A platform where users can report scams and share experiences to help protect others.</p>
+    </bd-carousel-item>
+
+    <bd-carousel-item
+      title="Fraud Prevention Workshops"
+      subTitle="Interactive workshops that educate users on identifying and avoiding scams"
+      modalText="Interactive workshops that educate users on identifying and avoiding scams"
+      icon="/assets/light-carousel-img1.png"
+    >
+      <h3>Fraud Prevention Workshops</h3>
+      <p>Interactive workshops that educate users on identifying and avoiding scams.</p>
+    </bd-carousel-item>
+  </bd-carousel-section>
+
+  <bd-toggle-radio name="group1" value="opt1" label="Toggle 1" disabled></bd-toggle-radio>
+  <bd-toggle-radio name="group1" value="opt1" label="Toggle 1" disabled checked></bd-toggle-radio>
+  <bd-toggle-radio name="group1" value="opt2" label="Toggle 2"></bd-toggle-radio>
+  <bd-toggle-radio name="billing" value="yearly" label="Yearly"></bd-toggle-radio>
+  <bd-toggle-radio name="billing" value="monthly" label="Monthly"></bd-toggle-radio>
+  <bd-radio name="billing" value="yearly" label="Yearly"></bd-radio>
+  <bd-radio disabled checked label="Test" value="x"></bd-radio>
+  <bd-checkbox label="Accept terms" checked></bd-checkbox>
+
+  <div style="padding: 40px 0;">
+    <bd-divider-horizontal></bd-divider-horizontal>
+  </div>
+
+  <bd-badge>Badge</bd-badge>
+`;

package/src/tokens/colors.js

@@ -83,34 +83,34 @@ export const colors = `
     /* Heading default */
     --heading-xxsmall: 18pt;
     --heading-xsmall: 20pt;
-    --heading-small: 24pt;
+    --typography-heading-h4-fontSize: 24pt;
     --heading-medium: 28pt;
-    --heading-large: 32pt;
+    --typography-fontSize-3xl: 32pt;
     --heading-xlarge: 36pt;
     --heading-xxlarge: 40pt;
 
     /* Heading mobile */
     --heading-xxsmall-mobile: 18pt;
     --heading-xsmall-mobile: 20pt;
-    --heading-small-mobile: 24pt;
+    --typography-heading-h4-fontSize-mobile: 24pt;
     --heading-medium-mobile: 26pt;
-    --heading-large-mobile: 28pt;
+    --typography-fontSize-3xl-mobile: 28pt;
     --heading-xlarge-mobile: 30pt;
     --heading-xxlarge-mobile: 32pt;
 
     /* Body default */
     --body-small: 13pt;
-    --body-medium: 14pt;
-    --body-large: 16pt;
+    --typography-body-small-fontSize: 14pt;
+    --typography-body-regular-fontSize: 16pt;
     --body-xlarge: 18pt;
 
     /* Caption default */
-    --caption-small: 11pt;
-    --caption-large: 12pt;
+    --typography-label-extra-small-fontSize: 11pt;
+    --typography-label-small-fontSize: 12pt;
 
     /* Caption mobile */
-    --caption-small-mobile: 11pt;
-    --caption-large-mobile: 12pt;
+    --typography-label-extra-small-fontSize-mobile: 11pt;
+    --typography-label-small-fontSize-mobile: 12pt;
   }
 `;
 

package/src/tokens/fonts.stories.js

@@ -10,7 +10,7 @@ export const FontFace = () => html`
       margin-bottom: 24px;
     }
     h3 {
-      font-family: var(--font-family-sans, 'IBM Plex Sans', Arial, sans-serif);
+      font-family: var(--typography-fontFamily-sans, 'IBM Plex Sans', Arial, sans-serif);
       font-weight: 600;
       font-size: 1.2rem;
       margin-bottom: 12px;
@@ -20,22 +20,22 @@ export const FontFace = () => html`
       font-size: 1.1rem;
     }
     .sans-normal {
-      font-family: var(--font-family-sans, 'IBM Plex Sans', Arial, sans-serif);
+      font-family: var(--typography-fontFamily-sans, 'IBM Plex Sans', Arial, sans-serif);
       font-weight: 400;
       font-style: normal;
     }
     .sans-semibold {
-      font-family: var(--font-family-sans, 'IBM Plex Sans', Arial, sans-serif);
+      font-family: var(--typography-fontFamily-sans, 'IBM Plex Sans', Arial, sans-serif);
       font-weight: 600;
       font-style: normal;
     }
     .sans-bold {
-      font-family: var(--font-family-sans, 'IBM Plex Sans', Arial, sans-serif);
+      font-family: var(--typography-fontFamily-sans, 'IBM Plex Sans', Arial, sans-serif);
       font-weight: 700;
       font-style: normal;
     }
     .sans-italic {
-      font-family: var(--font-family-sans, 'IBM Plex Sans', Arial, sans-serif);
+      font-family: var(--typography-fontFamily-sans, 'IBM Plex Sans', Arial, sans-serif);
       font-weight: 400;
       font-style: italic;
     }