@coyalabs/bts-style 1.0.8 → 1.1.0

package/dist/Base/BaseContainer.svelte

@@ -0,0 +1,85 @@
+<script>
+  /**
+   * @type {'full' | 'primary' | 'secondary' | 'filled' | 'special-filled'}
+   */
+  export let theme = 'full';
+
+  /**
+   * @type {string}
+   */
+  export let borderRadiusTopLeft = '25px';
+
+  /**
+   * @type {string}
+   */
+  export let borderRadiusTopRight = '25px';
+
+  /**
+   * @type {string}
+   */
+  export let borderRadiusBottomLeft = '25px';
+
+  /**
+   * @type {string}
+   */
+  export let borderRadiusBottomRight = '25px';
+
+    /**
+   * @type {string}
+   */
+  export let padding = '1rem';
+</script>
+
+<div class="glow-base-container" data-theme={theme} style="border-radius: {borderRadiusTopLeft} {borderRadiusTopRight} {borderRadiusBottomRight} {borderRadiusBottomLeft}; --padding: {padding};">
+  <slot />
+</div>
+
+<style>
+  .glow-base-container {
+    width: 100%;
+    border: 2px solid rgba(255, 255, 255, 0.13);
+    padding: var(--padding);
+    box-sizing: border-box;
+  }
+
+  /* Theme A - Full */
+  .glow-base-container[data-theme='full'] {
+    background: rgba(150, 132, 140, 0.25);
+    box-shadow: 
+      0px 0px 13px 0px rgba(255, 255, 255, 0.07),
+      inset 0px 0px 9px 2px rgba(193, 182, 212, 0.5);
+  }
+
+  /* Theme B - Primary */
+  .glow-base-container[data-theme='primary'] {
+    background: rgba(180, 158, 168, 0.25);
+    box-shadow: 
+      0px 0px 13px 0px rgba(255, 255, 255, 0.07),
+      inset 0px 0px 9px 2px rgba(117, 102, 143, 0.56);
+  }
+
+  /* Theme C - Secondary */
+  .glow-base-container[data-theme='secondary'] {
+    background: #74636a40;
+    box-shadow: 
+      0px 0px 13px 0px rgba(255, 255, 255, 0.07),
+      inset 0px 0px 9px 2px rgba(102, 88, 128, 0.5);
+  }
+
+  /* Theme D - Filled */
+  .glow-base-container[data-theme='filled'] {
+    background: #161319;
+    box-shadow: 
+      0px 0px 13px 0px #ffffff1a,
+      inset 0px 0px 9px 2px #ffffff0a;
+  }
+
+    /* Theme D - Filled */
+  .glow-base-container[data-theme='special-filled'] {
+    background: linear-gradient(-78deg, #382D40 0%, #3A2B45 100%);
+    box-shadow: 
+      0px 0px 13px 16px #A461CA08,
+      inset 0px 0px 9px 2px #AA91D845,
+      inset 2px 3px 9px 0px #BE81E225;
+  }
+</style>

package/dist/{BaseContainer.svelte.d.ts → Base/BaseContainer.svelte.d.ts}

@@ -1,6 +1,11 @@
 export default BaseContainer;
 type BaseContainer = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    theme?: "full" | "primary" | "secondary" | undefined;
+    theme?: "full" | "primary" | "secondary" | "filled" | "special-filled" | undefined;
+    borderRadiusTopLeft?: string | undefined;
+    borderRadiusTopRight?: string | undefined;
+    borderRadiusBottomLeft?: string | undefined;
+    borderRadiusBottomRight?: string | undefined;
+    padding?: string | undefined;
 }, {
     default: {};
 }>, {
@@ -11,7 +16,12 @@ type BaseContainer = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
     $$bindings?: string | undefined;
 };
 declare const BaseContainer: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    theme?: "full" | "primary" | "secondary" | undefined;
+    theme?: "full" | "primary" | "secondary" | "filled" | "special-filled" | undefined;
+    borderRadiusTopLeft?: string | undefined;
+    borderRadiusTopRight?: string | undefined;
+    borderRadiusBottomLeft?: string | undefined;
+    borderRadiusBottomRight?: string | undefined;
+    padding?: string | undefined;
 }, {
     default: {};
 }>, {

package/dist/Base/BaseIcon.svelte

@@ -0,0 +1,42 @@
+<script>
+  /**
+   * @type {string}
+   */
+  export let svg;
+  
+  /**
+   * @type {'default' | 'toned'}
+   */
+  export let variant = 'toned';
+  
+  /**
+   * @type {string}
+   */
+  export let size = '18px';
+  
+  const colors = {
+    default: '#E3D8D8',
+    toned: '#A18F8F'
+  };
+</script>
+
+<span class="base-icon" style="--icon-color: {colors[variant]}; --icon-size: {size};">
+  {@html svg}
+</span>
+
+<style>
+  .base-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--icon-color);
+  }
+
+  .base-icon :global(svg) {
+    width: var(--icon-size);
+    height: var(--icon-size);
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+  }
+</style>

package/dist/Base/BaseIcon.svelte.d.ts

@@ -0,0 +1,30 @@
+export default BaseIcon;
+type BaseIcon = SvelteComponent<{
+    svg: string;
+    variant?: "default" | "toned" | undefined;
+    size?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const BaseIcon: $$__sveltets_2_IsomorphicComponent<{
+    svg: string;
+    variant?: "default" | "toned" | undefined;
+    size?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/Base/BasePage.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import BGDetails from '../Structure/BG/BGDetails.svelte';
+
+  /**
+   * @type {string | null}
+   */
+  export let favicon = null;
+
+  /**
+   * @type {boolean}
+   */
+  export let showBGDetails = true;
+
+  /**
+   * @type {string}
+   */
+  export let chainColor = "#130F15";
+
+  onMount(() => {
+    // Set favicon if not already set
+    let link = document.querySelector("link[rel*='icon']") as HTMLLinkElement | null;
+    
+    if (!link) {
+      link = document.createElement('link');
+      link.rel = 'icon';
+      document.head.appendChild(link);
+    }
+    
+    // Use custom favicon if provided, otherwise use default BTS theme favicon
+    const faviconUrl = favicon || 'data:image/svg+xml,%3Csvg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Crect width="32" height="32" rx="6" fill="%230B070D"/%3E%3Cpath d="M16 8C11.5817 8 8 11.5817 8 16C8 20.4183 11.5817 24 16 24C20.4183 24 24 20.4183 24 16C24 11.5817 20.4183 8 16 8Z" fill="%23E3D8D8"/%3E%3Ccircle cx="16" cy="16" r="4" fill="%23A18F8F"/%3E%3Crect x="14" y="10" width="4" height="2" rx="1" fill="%230B070D"/%3E%3Crect x="14" y="20" width="4" height="2" rx="1" fill="%230B070D"/%3E%3C/svg%3E';
+    
+    link.href = faviconUrl;
+  });
+</script>
+
+<div class="base-page">
+  {#if showBGDetails}
+    <BGDetails {chainColor} />
+  {/if}
+  <div class="page-content">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .base-page {
+    position: relative;
+    min-height: 100vh;
+    background-color: #0B070D;
+    margin: 0;
+    padding: 0;
+  }
+
+  :global(body) {
+    margin: 0;
+    padding: 0;
+  }
+
+  :global(html) {
+    margin: 0;
+    padding: 0;
+  }
+
+  .base-page > :global(*) {
+    margin-top: 0;
+  }
+
+  .page-content {
+    position: relative;
+    z-index: 1;
+  }
+</style>

package/dist/Base/BasePage.svelte.d.ts

@@ -0,0 +1,37 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const BasePage: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    /**
+       * @type {string | null}
+       */ favicon?: any;
+    /**
+       * @type {boolean}
+       */ showBGDetails?: boolean;
+    /**
+       * @type {string}
+       */ chainColor?: string;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type BasePage = InstanceType<typeof BasePage>;
+export default BasePage;

package/dist/{Text.svelte → Base/BaseText.svelte}

@@ -3,44 +3,42 @@
    * @type {'title' | 'content' | 'button'}
    */
   export let variant = 'content';
+    /**
+   * @type {string}
+   */
+  export let textModifier = '0px';
 </script>
 
-<span class="text" data-variant={variant}>
+<span class="text" data-variant={variant} style="--text-modifier: {textModifier};">
   <slot />
 </span>
 
 <style>
   @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@900&display=swap');
-  
+  @import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap');
   .text {
     display: inline-block;
     font-family: 'Satoshi', sans-serif;
   }
-  
   /* Title variant */
-  
   .text[data-variant='title'] {
     font-family: 'Noto Serif KR', serif;
     font-weight: 900;
-    font-size: 30px;
+    font-size: calc(30px + var(--text-modifier));
     color: #E3D8D8;
   }
-  
   /* Content variant */
-  
   .text[data-variant='content'] {
     font-family: 'Satoshi', sans-serif;
     font-weight: 700;
-    font-size: 18px;
+    font-size: calc(18px + var(--text-modifier));
     color: #777073;
   }
-  
   /* Button variant */
-  
   .text[data-variant='button'] {
     font-family: 'Noto Serif KR', serif;
     font-weight: 900;
-    font-size: 17px;
+    font-size: calc(17px + var(--text-modifier));
     color: #E3D8D8;
   }
 </style>

package/dist/{Text.svelte.d.ts → Base/BaseText.svelte.d.ts}

@@ -1,6 +1,7 @@
-export default Text;
-type Text = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+export default BaseText;
+type BaseText = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
     variant?: "button" | "title" | "content" | undefined;
+    textModifier?: string | undefined;
 }, {
     default: {};
 }>, {
@@ -10,8 +11,9 @@ type Text = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
 }> & {
     $$bindings?: string | undefined;
 };
-declare const Text: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+declare const BaseText: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
     variant?: "button" | "title" | "content" | undefined;
+    textModifier?: string | undefined;
 }, {
     default: {};
 }>, {

package/dist/Components/Button.svelte

@@ -0,0 +1,151 @@
+<script>
+  import BaseContainer from '../Base/BaseContainer.svelte';
+  import BaseText from '../Base/BaseText.svelte';
+  import BaseIcon from '../Base/BaseIcon.svelte';
+  import { icons } from '../icons';
+  
+  /**
+   * @type {'full' | 'primary' | 'secondary' | 'special-filled' }
+   */
+  export let theme = 'full';
+  
+  /**
+   * @type {string | null}
+   */
+  export let icon = null;
+
+  /**
+   * @type {string | null}
+   */
+  export let actionIcon = icons.arrow;
+
+  /**
+   * @type {number}
+   */
+  export let iconRotation = 0;
+
+  /**
+   * @type {number}
+   */
+  export let actionIconRotation = 0;
+
+  /**
+   * @type {string}
+   */
+  export let iconSize = '18px';
+
+  /**
+   * @type {boolean}
+   */
+  export let iconToned = true;
+
+  /**
+   * @type {string}
+   */
+  export let actionIconSize = '18px';
+
+  /**
+   * @type {string}
+   */
+  export let borderRadiusTopLeft = '25px';
+
+  /**
+   * @type {string}
+   */
+  export let borderRadiusTopRight = '25px';
+
+  /**
+   * @type {string}
+   */
+  export let borderRadiusBottomLeft = '25px';
+
+  /**
+   * @type {string}
+   */
+  export let borderRadiusBottomRight = '25px';
+</script>
+
+<button class="button-wrapper" on:click>
+  <BaseContainer {theme} {borderRadiusTopLeft} {borderRadiusTopRight} {borderRadiusBottomLeft} {borderRadiusBottomRight}>
+    <div class="button-content">
+      <div class="icon-text">        
+        {#if icon}
+          <div class="icon-wrapper" style="transform: rotate({iconRotation}deg)">
+            <BaseIcon variant={iconToned ? "toned" : "default"} svg={icon} size={iconSize} />
+          </div>
+        {/if}
+        <BaseText variant="button">
+          <slot />
+        </BaseText>
+      </div>
+      {#if actionIcon}
+        <div class="icon-wrapper" style="transform: rotate({actionIconRotation}deg)">
+          <BaseIcon svg={actionIcon} size={actionIconSize} />
+        </div>
+      {/if}
+    </div>
+  </BaseContainer>
+</button>
+
+<style>
+  .button-wrapper {
+    all: unset;
+    cursor: pointer;
+    display: block;
+    width: 100%;
+    user-select: none;
+  }
+
+  .button-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  .icon-text {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .icon-wrapper {
+    transition: transform 0.2s ease;
+  }
+
+  .button-wrapper > :global(.glow-base-container) {
+    transition: all 0.2s ease;
+  }
+
+  /* Hover state - default for most themes */
+  .button-wrapper:hover > :global(.glow-base-container:not([data-theme='special-filled'])) {
+    background: rgba(150, 132, 141, 0.37) !important;
+    box-shadow: 
+      0px 0px 13px 0px rgba(255, 255, 255, 0.07),
+      inset 0px 0px 6px 4px rgba(150, 132, 141, 0.37) !important;
+  }
+
+  /* Pressed/Active state - default for most themes */
+  .button-wrapper:active > :global(.glow-base-container:not([data-theme='special-filled'])) {
+    background: rgba(150, 132, 140, 0.25) !important;
+    box-shadow: 0px 0px 13px 0px rgba(255, 255, 255, 0.07) !important;
+  }
+
+  /* Special-filled theme hover */
+  .button-wrapper:hover > :global(.glow-base-container[data-theme='special-filled']) {
+    background: linear-gradient(78deg, #4A3B55 0%, #4C385A 100%) !important;
+    box-shadow: 
+      0px 0px 16px 18px #A461CA15,
+      inset 0px 0px 12px 3px #AA91D860,
+      inset -2px -3px 12px 0px #BE81E240 !important;
+  }
+
+  /* Special-filled theme pressed */
+  .button-wrapper:active > :global(.glow-base-container[data-theme='special-filled']) {
+    background: linear-gradient(-78deg, #2E2438 0%, #301F3D 100%) !important;
+    box-shadow: 
+      0px 0px 13px 16px #A461CA05,
+      inset 0px 0px 6px 2px #AA91D830,
+      inset 2px 3px 6px 0px #BE81E215 !important;
+  }
+</style>

package/dist/Components/Button.svelte.d.ts

@@ -0,0 +1,65 @@
+export default Button;
+type Button = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    theme?: "full" | "primary" | "secondary" | "special-filled" | undefined;
+    borderRadiusTopLeft?: string | undefined;
+    borderRadiusTopRight?: string | undefined;
+    borderRadiusBottomLeft?: string | undefined;
+    borderRadiusBottomRight?: string | undefined;
+    icon?: string | null | undefined;
+    actionIcon?: string | null | undefined;
+    iconRotation?: number | undefined;
+    actionIconRotation?: number | undefined;
+    iconSize?: string | undefined;
+    iconToned?: boolean | undefined;
+    actionIconSize?: string | undefined;
+}, {
+    default: {};
+}>, {
+    click: PointerEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Button: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    theme?: "full" | "primary" | "secondary" | "special-filled" | undefined;
+    borderRadiusTopLeft?: string | undefined;
+    borderRadiusTopRight?: string | undefined;
+    borderRadiusBottomLeft?: string | undefined;
+    borderRadiusBottomRight?: string | undefined;
+    icon?: string | null | undefined;
+    actionIcon?: string | null | undefined;
+    iconRotation?: number | undefined;
+    actionIconRotation?: number | undefined;
+    iconSize?: string | undefined;
+    iconToned?: boolean | undefined;
+    actionIconSize?: string | undefined;
+}, {
+    default: {};
+}>, {
+    click: PointerEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}