@repobit/dex-system-design 0.25.12 → 0.26.0

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

@@ -1,183 +0,0 @@
-import { css } from "lit";
-
-export default css`
-  :host {
-    display: block;
-    --background-card-grey: var(--color-neutral-25);
-    --border-card-grey: var(--color-neutral-50);
-    padding-top: var(--spacing-32);
-    padding-bottom: var(--spacing-32);
-  }
-
-  .bd-section-title-s {
-    font-family: var(--typography-fontFamily-sans);
-    font-weight: var(--typography-fontWeight-semibold);
-    font-size: 2em;
-  }
-
-  .bd-header-light-carousel-s {
-    margin-bottom: 50px;
-    margin-top: 50px;
-  }
-
-  .bd-light-carousel-s {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    width: 100%;
-    margin: var(--spacing-0) auto;
-    overflow: hidden;
-    flex-direction: column;
-    padding-left: var(--spacing-14);
-    padding-right: var(--spacing-14);
-    max-width: 1400px;
-    margin: 0 auto;
-  }
-
-  .bd-light-carousel-title-s {
-    font-size: 28px;
-    font-weight: 700;
-    text-align: center;
-    color: #e4002b;
-    margin-bottom: 32px;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-  }
-
-  .bd-light-carousel-track-s {
-    scroll-behavior: smooth;
-    flex: 1;
-    position: relative;
-    padding: var(--spacing-0) var(--spacing-20);
-    overflow-x: auto;
-    overflow-y: hidden;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-    z-index: 1;
-    scroll-snap-type: x mandatory;
-    display: grid;
-    gap: 1.5rem;
-    grid-template-columns: repeat(4, 1fr);
-  }
-
-  .bd-light-carousel-track-s::-webkit-scrollbar {
-    display: none;
-  }
-
-  .bd-light-box-s {
-    flex: var(--spacing-0) var(--spacing-0) auto;
-    background: var(--background-card-grey);
-    border-radius: 28px;
-    padding: var(--spacing-32);
-    flex-direction: column;
-    align-items: start;
-    justify-content: center;
-    text-align: start;
-    transition: transform 0.2s ease-in-out;
-    min-height: 135px;
-    position: relative;
-    z-index: 2;
-    scroll-snap-align: start;
-    font-family: var(--typography-fontFamily-sans);
-  }
-
-  .bd-light-box-s h3 {
-    font-size: var(--heading-xsmall);
-    margin: var(--spacing-0) var(--spacing-8) var(--spacing-8) var(--spacing-0);
-    font-weight: 600;
-    font-family: var(--typography-fontFamily-sans);
-    text-align: center;
-  }
-
-  .bd-light-box-s p {
-    font-size: var(--spacing-16);
-    margin: var(--spacing-0) var(--spacing-0) 1em var(--spacing-0);
-    font-family: var(--typography-fontFamily-sans);
-  }
-
-  .bd-light-icon-s {
-    position: relative;
-    bottom: var(--spacing-6);
-    max-width: 100%;
-    height: var(--spacing-44);
-    width: var(--spacing-44);
-  }
-
-  .bd-light-box-header-s {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--spacing-8);
-  }
-
-  .bd-light-title-badge-wrapper-s {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-4, 4px);
-  }
-
-  @media (max-width: 1024px) {
-    .bd-light-box-s {
-      width: 380px;
-      padding: 1.5em;
-    }
-    .bd-light-box-s h3 {
-      font-size: 1.1em;
-    }
-    .bd-light-box-s p {
-      font-size: 0.95em;
-    }
-
-    .bd-light-carousel-track-s {
-      grid-template-columns: repeat(2, 1fr);
-    }
-  }
-
-  @media (max-width: 768px) {
-    .bd-light-carousel-track-s {
-      display: flex;
-      flex-direction: column;
-      gap: var(--spacing-20);
-      overflow-x: hidden;
-      overflow-y: hidden;
-      scroll-behavior: smooth;
-    }
-
-    .bd-light-box-s {
-      width: 100%;
-      max-width: 400px;
-      margin: var(--spacing-0) auto;
-    }
-
-    .bd-arrow-s {
-      display: none;
-    }
-  }
-
-  @media (max-width: 480px) {
-    .bd-light-box-s {
-      width: 100%;
-      padding: 1em;
-      min-height: 300px;
-    }
-
-    .bd-light-box-s h3 {
-      font-size: 1em;
-    }
-
-    .bd-light-box-s p {
-      font-size: 0.9em;
-    }
-
-    .bd-light-icon-s {
-      bottom: var(--spacing-10);
-    }
-  }
-
-  @media (max-width: 600px) {
-    .bd-light-carousel-track-s {
-      grid-template-columns: 1fr;
-    }
-  }
-`;

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

@@ -1,74 +0,0 @@
-import { LitElement, html } from "lit";
-import { tokens } from "../../tokens/tokens.js";
-import "../heading/heading.js";
-import carouselCSS from "../light-carousel/light-carousel-simple.css.js";
-
-class CustomLightCarouselSimple extends LitElement {
-  static properties = {
-    title: { type: String }
-  };
-
-  constructor() {
-    super();
-    this.title = "";
-  }
-
-  render() {
-    return html`
-    <section class="bd-light-carousel-s">
-      ${this.title
-        ? html`
-            <div class="bd-header-light-carousel-s">
-              <h1 class="bd-section-title-s">${this.title}</h1>
-            </div>
-          `
-        : null}
-      <div class="bd-light-carousel-track-s">
-        <slot></slot>
-      </div>
-    </section>
-  `;
-  }
-
-}
-class LightCarouselSimpleItem extends LitElement {
-  static properties = {
-    title: { type: String },
-    icon : { type: String }
-  };
-
-  constructor() {
-    super();
-    this.title = "";
-    this.icon = "";
-  }
-
-  render() {
-    return html`
-      <div class="bd-light-box-s">
-        <div class="bd-light-box-header-s">
-          ${this.icon
-            ? html`<img
-                src="${this.icon}"
-                alt="icon"
-                class="bd-light-icon-s"
-              />`
-            : ""}
-          ${this.title
-            ? html`
-                <div class="bd-light-title-badge-wrapper-s">
-                  <bd-h as="h4">${this.title}</bd-h>
-                </div>
-              `
-            : ""}
-        </div>
-        <slot></slot>
-      </div>
-    `;
-  }
-}
-CustomLightCarouselSimple.styles = [tokens, carouselCSS];
-LightCarouselSimpleItem.styles = [tokens, carouselCSS];
-
-customElements.define("bd-light-carousel-simple-item", LightCarouselSimpleItem);
-customElements.define("bd-light-carousel-simple-section", CustomLightCarouselSimple);

package/src/tokens/colors.js

@@ -1,121 +0,0 @@
-export const colors = `
-  :root {
-    /* Colors */
-    --color-blue-50: #F0F7FF;
-    --color-blue-100: #D6E8FF;
-    --color-blue-200: #9EC8FF;
-    --color-blue-300: #6BABFF;
-    --color-blue-400: #338BFF;
-    --color-blue-500: #006eff;
-    --color-blue-600: #0059D6;
-    --color-blue-700: #0045AD;
-    --color-blue-800: #003385;
-    --color-blue-900: #00225C;
-    --color-blue-950: #001947;
-
-    --color-red-50: #FFF0F0;
-    --color-red-100: #FFD6D6;
-    --color-red-200: #FF9E9E;
-    --color-red-300: #FF6B6B;
-    --color-red-400: #FF3333;
-    --color-red-500: #FF0000;
-    --color-red-600: #D60000;
-    --color-red-700: #AD0000;
-    --color-red-800: #850000;
-    --color-red-900: #5C0000;
-    --color-red-950: #470000;
-
-    --color-green-50: #EDFDF1;
-    --color-green-100: #D1FADC;
-    --color-green-200: #9AF4B4;
-    --color-green-300: #63EE8D;
-    --color-green-400: #2CE767;
-    --color-green-500: #15C14F;
-    --color-green-600: #12A641;
-    --color-green-700: #0E8532;
-    --color-green-800: #0B6A26;
-    --color-green-900: #084A1A;
-    --color-green-950: #063C14;
-
-    --color-yellow-50: #FFFBF0;
-    --color-yellow-100: #FFF5D6;
-    --color-yellow-200: #FFE89E;
-    --color-yellow-300: #FFDC6B;
-    --color-yellow-400: #FFCF33;
-    --color-yellow-500: #FFC400;
-    --color-yellow-600: #D6A000;
-    --color-yellow-700: #AD7F00;
-    --color-yellow-800: #855F00;
-    --color-yellow-900: #5C4000;
-    --color-yellow-950: #473100;
-
-    --color-neutral-0: #FFFFFF;
-    --color-neutral-25: #FAFAFA;
-    --color-neutral-50: #f1f2f3;
-    --color-neutral-100: #e1e3e5;
-    --color-neutral-200: #c5c9ce;
-    --color-neutral-300: #a6adb4;
-    --color-neutral-400: #88909b;
-    --color-neutral-500: #6c7580;
-    --color-neutral-600: #565e66;
-    --color-neutral-700: #41474d;
-    --color-neutral-800: #2c3035;
-    --color-neutral-900: #151719;
-    --color-neutral-950: #0c0d0e;
-    --color-neutral-1000: #000000;
-
-    /* Display default */
-    --display-xxsmall: 44pt;
-    --display-xsmall: 48pt;
-    --display-small: 52pt;
-    --display-medium: 56pt;
-    --display-large: 60pt;
-    --display-xlarge: 64pt;
-
-    /* Display mobile */
-    --display-xxsmall-mobile: 34pt;
-    --display-xsmall-mobile: 36pt;
-    --display-small-mobile: 38pt;
-    --display-medium-mobile: 40pt;
-    --display-large-mobile: 44pt;
-    --display-xlarge-mobile: 48pt;
-
-    /* Heading default */
-    --heading-xxsmall: 18pt;
-    --heading-xsmall: 20pt;
-    --heading-small: 24pt;
-    --heading-medium: 28pt;
-    --heading-large: 32pt;
-    --heading-xlarge: 36pt;
-    --heading-xxlarge: 40pt;
-
-    /* Heading mobile */
-    --heading-xxsmall-mobile: 18pt;
-    --heading-xsmall-mobile: 20pt;
-    --heading-small-mobile: 24pt;
-    --heading-medium-mobile: 26pt;
-    --heading-large-mobile: 28pt;
-    --heading-xlarge-mobile: 30pt;
-    --heading-xxlarge-mobile: 32pt;
-
-    /* Body default */
-    --body-small: 13pt;
-    --body-medium: 14pt;
-    --body-large: 16pt;
-    --body-xlarge: 18pt;
-
-    /* Caption default */
-    --caption-small: 11pt;
-    --caption-large: 12pt;
-
-    /* Caption mobile */
-    --caption-small-mobile: 11pt;
-    --caption-large-mobile: 12pt;
-  }
-`;
-
-export function applyColors() {
-  const style = document.createElement('style');
-  style.textContent = colors;
-  document.head.appendChild(style);
-}

package/src/tokens/typography.css.js

@@ -1,207 +0,0 @@
-import { css } from "lit";
-
-export default css`
-  
-/*<!-- typography -->*/
-
-
-
-/* <!-- display -->/
-/*  <!-- desktop -->*/
-  .text-display-xlarge {
-    font-family: 'Arial',sans-serif;
-    font-size: 4em;
-    line-height: 1.2;
-  }
-
-  .text-display-large {
-    font-family: 'Arial',sans-serif;
-    font-size: 3.75em;
-    line-height: 1.2;
-  }
-
-  .text-display-medium {
-    font-family: 'Arial',sans-serif;
-    font-size: 3.5em;
-    line-height: 1.2;
-  }
-
-  .text-display-small {
-    font-family: 'Arial',sans-serif;
-    font-size: 3.25em;
-    line-height: 1.2;
-  }
-
-   .text-display-xsmall {
-    font-family: 'Arial',sans-serif;
-    font-size: 3em;
-    line-height: 1.16;
-  }
-
-   .text-display-xxsmall {
-    font-family: 'Arial',sans-serif;
-    font-size: 2.75em;
-    line-height: 1.18;
-  }
-
-/*  <!-- mobile -->
-*/
-  .text-display-xlarge {
-    font-family: 'Arial',sans-serif;
-    font-size: 4em;
-    line-height: 1.2;
-  }
-
-  .text-display-large {
-    font-family: 'Arial',sans-serif;
-    font-size: 3.75em;
-    line-height: 1.2;
-  }
-
-  .text-display-medium {
-    font-family: 'Arial',sans-serif;
-    font-size: 3.5em;
-    line-height: 1.2;
-  }
-
-  .text-display-small {
-    font-family: 'Arial',sans-serif;
-    font-size: 3.25em;
-    line-height: 1.2;
-  }
-
-   .text-display-xsmall {
-    font-family: 'Arial',sans-serif;
-    font-size: 3em;
-    line-height: 1.16;
-  }
-
-   .text-display-xxsmall {
-    font-family: 'Arial',sans-serif;
-    font-size: 2.75em;
-    line-height: 1.18;
-  }
-  
-
-/*<!-- heading -->
-*/
-/*  <!-- desktop -->
-*/
-  .text-heading-xxlarge {
-    font-family: 'Arial',sans-serif;
-    font-size: 2.5em;
-    line-height: 1.2;
-  }
-
- .text-heading-xlarge {
-    font-family: 'Arial',sans-serif;
-    font-size: 2.25em;
-    line-height: 1.2;
-  }
-
- .text-heading-large {
-    font-family: 'Arial',sans-serif;
-    font-size: 2em;
-    line-height: 1.25;
-  }
-
- .text-heading-medium {
-    font-family: 'Arial',sans-serif;
-    font-size: 1.75em;
-    line-height: 1.28;
-  }
-
- .text-heading-small {
-    font-family: 'Arial',sans-serif;
-    font-size: 1.5em;
-    line-height: 1.3;
-  }
-
-  .text-heading-xsmall {
-    font-family: 'Arial',sans-serif;
-    font-size: 1.25em;
-    line-height: 1.3;
-  } 
-
- .text-heading-xxsmall {
-    font-family: 'Arial',sans-serif;
-    font-size: 1.125em;
-    line-height: 1.33;
-  } 
-
-
-/*  <!-- mobile -->*/
-  .text-heading-xxlarge {
-    font-family: 'Arial',sans-serif;
-    font-size: 2em;
-    line-height: 1.25;
-  }
-
- .text-heading-xlarge {
-    font-family: 'Arial',sans-serif;
-    font-size: 1.875em;
-    line-height: 1.25;
-  }
-
- .text-heading-large {
-    font-family: 'Arial',sans-serif;
-    font-size: 1.75em;
-    line-height: 1.3;
-  }
-
- .text-heading-medium {
-    font-family: 'Arial',sans-serif;
-    font-size: 1.625em;
-    line-height: 1.3;
-  }
-
-
-
-
-/*<!-- body -->*/
-/*  <!-- desktop & mobile -->
-*/
-
- .text-body-xlarge {
-    font-family: 'Arial',sans-serif;
-    font-size: 1.125em;
-    line-height: 1.2;
-  }
-
- .text-body-large {
-    font-family: 'Arial',sans-serif;
-    font-size: 1em;
-    line-height: 1.25;
-  }
-
- .text-body-medium {
-    font-family: 'Arial',sans-serif;
-    font-size: 0.875em;
-    line-height: 1.25;
-  }
-
- .text-body-small {
-    font-family: 'Arial',sans-serif;
-    font-size: 0.813em;
-    line-height: 1.25;
-  }
-
-/*<!-- caption -->*/
-
-
-/*<!-- desktop & mobile -->*/
-  
-
- .text-body-large {
-    font-family: 'Arial',sans-serif;
-    font-size: 0.75em;
-    line-height: 1.45;
-  }
-
- .text-body-small {
-    font-family: 'Arial',sans-serif;
-    font-size: 0.688em;
-    line-height: 1.33;
-  }
-
-`