@repobit/dex-system-design 0.18.1 → 0.19.1

package/src/tokens/tokens.js

@@ -111,7 +111,6 @@ export const tokens = css`
         /* ================================
             CORE BORDER TOKENS
             ================================ */
-
         --border-width-0: 0;
         --border-width-1: 1px;
         --border-width-2: 2px;
@@ -127,9 +126,11 @@ export const tokens = css`
         --radius-2xl: 1rem; /* 16px */
         --radius-3xl: 1.5rem; /* 24px */
         --radius-full: 9999px;
+
         /* ================================
-            CORE DIMENSION TOKENS
-            ================================ */
+             CORE DIMENSION TOKENS
+             ================================ */
+
 
         --dimension-2px: 2px;
         --dimension-4px: 4px;
@@ -147,8 +148,8 @@ export const tokens = css`
         --dimension-64px: 64px;
 
         /* ================================
-            CORE TRANSITION TOKENS
-            ================================ */
+             CORE TRANSITION TOKENS
+             ================================ */
 
         --transition-duration-fast: 150ms;
         --transition-duration-normal: 200ms;
@@ -162,8 +163,8 @@ export const tokens = css`
         --transition-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
 
         /* ================================
-            CORE SHADOW TOKENS
-            ================================ */
+             CORE SHADOW TOKENS
+             ================================ */
 
         --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
         --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
@@ -194,8 +195,8 @@ export const tokens = css`
         --focus-outline-offset: 2px;
 
         /* ================================
-            COMPONENT TOKENS - TYPOGRAPHY
-            ================================ */
+             COMPONENT TOKENS - TYPOGRAPHY
+             ================================ */
 
         /* Heading Tokens */
         --typography-heading-h1-fontSize: var(--typography-fontSize-5xl);
@@ -276,7 +277,7 @@ export const tokens = css`
         --typography-label-small-letterSpacing: var(--typography-letterSpacing-wide);
         --typography-label-small-fontFamily: var(--typography-fontFamily-sans);
 
-            --typography-label-extra-small-fontSize: var(--typography-fontSize-xxs);
+        --typography-label-extra-small-fontSize: var(--typography-fontSize-xxs);
 
         --typography-label-large-fontSize: var(--typography-fontSize-base);
         --typography-label-large-fontWeight: var(--typography-fontWeight-medium);
@@ -381,8 +382,8 @@ export const tokens = css`
         --typography-display-sm-fontFamily: var(--typography-fontFamily-sans);
 
         /* ================================
-            COMPONENT TOKENS - FORM
-            ================================ */
+             COMPONENT TOKENS - FORM
+             ================================ */
 
         /* Form Label Tokens */
         --form-label-default-fontSize: var(--typography-fontSize-sm);
@@ -472,8 +473,8 @@ export const tokens = css`
         --form-helpTextSpacing: var(--spacing-1);
 
         /* ================================
-            COMPONENT TOKENS - BUTTON
-            ================================ */
+             COMPONENT TOKENS - BUTTON
+             ================================ */
 
         /* Button Size Tokens */
         --button-small-height: var(--dimension-34px);
@@ -625,8 +626,8 @@ export const tokens = css`
         --button-focus-boxShadow: var(--shadow-focus-outline-blue);
 
         /* ================================
-            COMPONENT TOKENS - ANNOTATION
-            ================================ */
+             COMPONENT TOKENS - ANNOTATION
+             ================================ */
 
         /* Footnote Tokens */
         --footnote-reference-fontSize: 0.75em;
@@ -660,8 +661,8 @@ export const tokens = css`
         --math-subscript-marginLeft: 0.05em;
 
         /* ================================
-            COMPONENT TOKENS - ICON
-            ================================ */
+             COMPONENT TOKENS - ICON
+             ================================ */
 
         /* Icon Size Tokens */
         --icon-xs-size: var(--dimension-12px);
@@ -696,9 +697,9 @@ export const tokens = css`
         --icon-error-color: var(--color-red-500);
 
         /* ================================
-            CORE SPACING TOKENS
-            ================================ */
-
+             CORE SPACING TOKENS
+             ================================ */
+             
         --spacing-0: 0;
         --spacing-1: 0.0625rem; /* 1px */
         --spacing-2: 0.125rem; /* 2px */
@@ -784,29 +785,6 @@ export const tokens = css`
         /* Caption */
         --typography-label-small-fontSize-line-height: 1.35; /* For 12px */
 
-        /* --spacing-0: 0;
-        --spacing-1: 1px;
-        --spacing-2: 2px;
-        --spacing-4: 4px;
-        --spacing-6: 6px;
-        --spacing-8: 8px;
-        --spacing-10: 10px;
-        --spacing-12: 12px;
-        --spacing-14: 14px;
-        --spacing-16: 16px;
-        --spacing-18: 18px;
-        --spacing-20: 20px;
-        --spacing-22: 22px;
-        --spacing-24: 24px;
-        --spacing-32: 32px;
-        --spacing-36: 36px;
-        --spacing-40: 40px;
-        --spacing-44: 44px;
-        --spacing-52: 52px;
-        --spacing-64: 64px;
-        --spacing-full: 99999999999999999999;
-        */
-
         /* Spacing Tokens
         -----------------------------------------------*/
         /* Base spacing tokens - Based on 4px grid */
@@ -909,63 +887,63 @@ export const tokens = css`
             font-family: "IBM Plex Mono";
             font-style: normal;
             font-weight: 700;
-            src: url("/assets/fonts/IBMPlexMono-Bold.woff2") format("woff2");
+            src: url("../assets/fonts/IBMPlexMono-Bold.woff2") format("woff2");
         }
         @font-face {
             font-family: "IBM Plex Mono";
             font-style: normal;
             font-weight: 700;
-            src: url("/assets/fonts/IBMPlexMono-BoldItalic.woff2") format("woff2");
+            src: url("../assets/fonts/IBMPlexMono-BoldItalic.woff2") format("woff2");
         }
 
         @font-face {
             font-family: "IBM Plex Mono";
             font-style: italic;
             font-weight: 300;
-            src: url("/assets/fonts/IBMPlexMono-Italic.woff2") format("woff2");
+            src: url("../assets/fonts/IBMPlexMono-Italic.woff2") format("woff2");
         }
         @font-face {
             font-family: "IBM Plex Mono";
             font-style: normal;
             font-weight: 300;
-            src: url("/assets/fonts/IBMPlexMono-Light.woff2") format("woff2");
+            src: url("../assets/fonts/IBMPlexMono-Light.woff2") format("woff2");
         }
         @font-face {
             font-family: "IBM Plex Mono";
             font-style: italic;
             font-weight: 300;
-            src: url("/assets/fonts/IBMPlexMono-LightItalic.woff2") format("woff2");
+            src: url("../assets/fonts/IBMPlexMono-LightItalic.woff2") format("woff2");
         }
 
         @font-face {
             font-family: "IBM Plex Mono";
             font-style: italic;
             font-weight: 500;
-            src: url("/assets/fonts/IBMPlexMono-Medium.woff2") format("woff2");
+            src: url("../assets/fonts/IBMPlexMono-Medium.woff2") format("woff2");
         }
         @font-face {
             font-family: "IBM Plex Mono";
             font-style: italic;
             font-weight: 500;
-            src: url("/assets/fonts/IBMPlexMono-MediumItalic.woff2") format("woff2");
+            src: url("../assets/fonts/IBMPlexMono-MediumItalic.woff2") format("woff2");
         }
         @font-face {
             font-family: "IBM Plex Mono";
             font-style: italic;
             font-weight: 400;
-            src: url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
+            src: url("../assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
         }
         @font-face {
             font-family: "IBM Plex Mono";
             font-style: italic;
             font-weight: 600;
-            src: url("/assets/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
+            src: url("../assets/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
         }
         @font-face {
             font-family: "IBM Plex Mono";
             font-style: italic;
             font-weight: 600;
-            src: url("/assets/fonts/IBMPlexMono-SemiBoldItalic.woff2") format("woff2");
+            src: url("../assets/fonts/IBMPlexMono-SemiBoldItalic.woff2") format("woff2");
         }
 
         /*
@@ -976,63 +954,63 @@ export const tokens = css`
             font-family: "IBMPlexSans";
             font-style: normal;
             font-weight: 700;
-            src: url("/assets/fonts/IBMPlexSans-Bold.woff2") format("woff2");
+            src: url("../assets/fonts/IBMPlexSans-Bold.woff2") format("woff2");
         }
         @font-face {
             font-family: "IBMPlexSans";
             font-style: normal;
             font-weight: 700;
-            src: url("/assets/fonts/IBMPlexSans-BoldItalic.woff2") format("woff2");
+            src: url("../assets/fonts/IBMPlexSans-BoldItalic.woff2") format("woff2");
         }
 
         @font-face {
             font-family: "IBMPlexSans";
             font-style: italic;
             font-weight: 300;
-            src: url("/assets/fonts/IBMPlexSans-Italic.woff2") format("woff2");
+            src: url("../assets/fonts/IBMPlexSans-Italic.woff2") format("woff2");
         }
         @font-face {
             font-family: "IBMPlexSans";
             font-style: normal;
             font-weight: 300;
-            src: url("/assets/fonts/IBMPlexSans-Light.woff2") format("woff2");
+            src: url("../assets/fonts/IBMPlexSans-Light.woff2") format("woff2");
         }
         @font-face {
             font-family: "IBMPlexSans";
             font-style: italic;
             font-weight: 300;
-            src: url("/assets/fonts/IBMPlexSans-LightItalic.woff2") format("woff2");
+            src: url("../assets/fonts/IBMPlexSans-LightItalic.woff2") format("woff2");
         }
 
         @font-face {
             font-family: "IBMPlexSans";
             font-style: italic;
             font-weight: 500;
-            src: url("/assets/fonts/IBMPlexSans-Medium.woff2") format("woff2");
+            src: url("../assets/fonts/IBMPlexSans-Medium.woff2") format("woff2");
         }
         @font-face {
             font-family: "IBMPlexSans";
             font-style: italic;
             font-weight: 500;
-            src: url("/assets/fonts/IBMPlexSans-MediumItalic.woff2") format("woff2");
+            src: url("../assets/fonts/IBMPlexSans-MediumItalic.woff2") format("woff2");
         }
         @font-face {
             font-family: "IBMPlexSans";
             font-style: italic;
             font-weight: 400;
-            src: url("/assets/fonts/IBMPlexSans-Regular.woff2") format("woff2");
+            src: url("../assets/fonts/IBMPlexSans-Regular.woff2") format("woff2");
         }
         @font-face {
             font-family: "IBMPlexSans";
             font-style: italic;
             font-weight: 600;
-            src: url("/assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
+            src: url("../assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
         }
         @font-face {
             font-family: "IBMPlexSans";
             font-style: italic;
             font-weight: 600;
-            src: url("/assets/fonts/IBMPlexSans-SemiBoldItalic.woff2") format("woff2");
+            src: url("../assets/fonts/IBMPlexSans-SemiBoldItalic.woff2") format("woff2");
         }
 
         /* =====================
@@ -1049,8 +1027,8 @@ export const tokens = css`
         --font-style-mono-normal: normal;
         --font-style-mono-italic: italic;
 
-        /* IBMPlexSans */
-        --typography-fontFamily-sans: "IBM Plex Sans", sans-serif;
+        /* IBM Plex Sans */
+        --typography-fontFamily-sans: 'IBM Plex Sans', sans-serif;
         --font-weight-sans-light: 300;
         --typography-body-large-fontWeight: 400;
         --font-weight-sans-medium: 500;

package/src/components/Button/icons.css

@@ -1,5 +0,0 @@
-.arrow-icon {
-  width: 24px;
-  height: 24px;
-  fill: #000;
-}

package/src/components/FAQ/faq.css.js

@@ -1,117 +0,0 @@
-import { css } from "lit";
-
-export default css`
-  :host {
-    --background-card-grey: var(--color-neutral-25);
-    --border-card-grey: var(--color-neutral-50);
-    --border-card-green: var(--color-green-700);
-    --badge-background: var(--color-blue-500);
-    --text-color-white: var(--color-neutral-0);
-    --bd-accesibility-focus: var(--color-blue-500);
-    display: block;
-  }
-
-  .bd-accordion-bg-item {
-    margin-bottom: var(--spacing-16);
-    border-radius: var(--spacing-8);
-    background-color: var(--color-blue-50);
-    overflow: hidden;
-    transition: box-shadow 0.3s ease;
-  }
-
-  .bd-accordion-bg-item:hover {
-    .bd-accordion-bg-question-text {
-      text-decoration-line: underline;
-    }
-  }
-
-  .bd-accordion-bg-question {
-    cursor: pointer;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--spacing-10);
-    padding: var(--spacing-16);
-    font-weight: bold;
-    background-color: var(--color-blue-50);
-    color: #333;
-    transition: background-color 0.3s ease, color 0.3s ease;
-  }
-
-  .bd-accordion-bg-header {
-    margin-bottom: var(--spacing-32);
-  }
-
-  .bd-accordion-bg-question:hover {
-    color: #0073e6;
-  }
-
-  .bd-accordion-bg-item:focus-visible {
-    outline: var(--spacing-2) solid var(--bd-accesibility-focus);
-    outline-offset: var(--spacing-2);
-    border-radius: var(--space-2xs);
-  }
-
-  .bd-accordion-bg-item:focus {
-    .bd-accordion-bg-question-text {
-      font-weight: 600;
-      text-decoration-line: underline;
-      color: var(--color-blue-600);
-      text-decoration-thickness: var(--spacing-2);
-    }
-  }
-
-  .bd-accordion-bg-question-text {
-    font-family: var(--typography-fontFamily-sans);
-    font-weight: var(--typography-fontWeight-semibold);
-  }
-
-  .bd-accordion-bg-title {
-    font-family: var(--typography-fontFamily-sans);
-    font-weight: var(--typography-fontWeight-semibold);
-    margin-left: auto;
-    margin-right: auto;
-    text-align: center;
-  }
-
-  .bd-accordion-bg-icon {
-    transition: transform 0.3s ease;
-    width: var(--spacing-14);
-    height: var(--spacing-14);
-    color: var(--color-blue-500);
-    text-align: center;
-    position: relative;
-    bottom: 1px;
-  }
-
-  .bd-accordion-bg-answer {
-    overflow: hidden;
-    max-height: 0;
-    opacity: 0;
-    padding: 0 15px;
-    background-color: var(--color-blue-50);
-    font-family: var(--typography-fontFamily-sans);
-    font-weight: var(--font-weight-sans-medium);
-  }
-
-  .bd-accordion-bg-item.open .bd-accordion-bg-answer {
-    max-height: 1000px;
-    opacity: 1;
-    padding: var(--spacing-0) var(--spacing-40);
-  }
-
-  .bd-accordion-bg-answer > div {
-    overflow: hidden;
-  }
-
-  .bd-accordion-bg-container {
-    width: 90%;
-    margin: auto;
-    padding-top: var(--spacing-64);
-    padding-bottom: var(--spacing-64);
-  }
-
-  .bd-accordion-bg-link-noline {
-    text-decoration: none;
-  }
-`;

package/src/components/FAQ/faq.stories.js

@@ -1,66 +0,0 @@
-import { html } from 'lit';
-import './faq.js';
-
-export default {
-  title: 'Components/FAQ Section',
-  component: 'bd-faq-section',
-  tags: ['autodocs'],
-  argTypes: {
-    title: { control: 'text' },
-
-    item1Title: { control: 'text', name: 'Item 1 Title' },
-    item1Content: { 
-      control: 'text', 
-      name: 'Item 1 Content (separate paragraphs with \\n\\n)', 
-      defaultValue: 'Paragraph 1\n\nParagraph 2\n\nParagraph 3'
-    },
-
-    item2Title: { control: 'text', name: 'Item 2 Title' },
-    item2Content: { 
-      control: 'text', 
-      name: 'Item 2 Content (separate paragraphs with \\n\\n)',
-      defaultValue: 'Paragraph 1\n\nParagraph 2'
-    },
-
-    item3Title: { control: 'text', name: 'Item 3 Title' },
-    item3Content: { 
-      control: 'text', 
-      name: 'Item 3 Content (separate paragraphs with \\n\\n)',
-      defaultValue: 'Paragraph 1\n\nParagraph 2\n\nParagraph 3'
-    },
-  },
-};
-
-const renderParagraphs = (text) => {
-  return text.split('\n\n').map(paragraph => html`<p>${paragraph}</p>`);
-};
-
-const Template = (args) => html`
-  <bd-faq-section title="${args.title}">
-    <bd-faq-section-item title="${args.item1Title}">
-      ${renderParagraphs(args.item1Content)}
-    </bd-faq-section-item>
-
-    <bd-faq-section-item title="${args.item2Title}">
-      ${renderParagraphs(args.item2Content)}
-    </bd-faq-section-item>
-
-    <bd-faq-section-item title="${args.item3Title}">
-      ${renderParagraphs(args.item3Content)}
-    </bd-faq-section-item>
-  </bd-faq-section>
-`;
-
-export const Default = Template.bind({});
-Default.args = {
-  title: 'Questions? Answers.',
-
-  item1Title: 'How does Bitdefender Internet Security protect me?',
-  item1Content: 'Bitdefender Internet Security provides the best protection...\n\nBitdefender Internet Security provides the best protection...\n\nBitdefender Internet Security provides the best protection...',
-
-  item2Title: 'Does Bitdefender protect me against ransomware?',
-  item2Content: 'Yes! Bitdefender Internet Security offers unbeatable ransomware protection...\n\nIt detects ransomware threats in real-time.',
-
-  item3Title: 'Do I get a VPN with Bitdefender Internet Security?',
-  item3Content: 'Bitdefender Internet Security includes a basic VPN with 200MB per day.\n\nYou can upgrade for unlimited VPN usage.\n\nThe VPN protects your online privacy.',
-};