@shohojdhara/atomix 0.3.3 → 0.3.5

package/src/themes/flashtrade/01-settings/_settings.colors.scss

@@ -1,79 +0,0 @@
-/*!
- * Flash Trade Theme Colors
- * Dark crypto trading platform color palette
- * Features high contrast, trading-focused colors with glass morphism support
- */
-
-@use 'sass:color';
-@use '../../../styles/02-tools/tools.to-rgb' as *;
-@use '../../../styles/02-tools/tools.color-functions' as *;
-@use '../../../styles/01-settings/settings.colors' with ($white: #ffffff,
-  $black: #000000,
-  $color-contrast-dark: #050505,
-  $color-contrast-light: #f5f5f7,
-  // Red palette - for short positions, losses, stop loss (Flash Trade style)
-  $red-1: #1a0505,
-  $red-2: #2d0a0a,
-  $red-3: #4d1111,
-  $red-4: #661616,
-  $red-5: #991f1f,
-  $red-6: #ef4444,
-  $red-7: #f87171,
-  $red-8: #fca5a5,
-  $red-9: #fecaca,
-  $red-10: #fee2e2,
-  // Green palette - for long positions, profits, success (Flash Trade style)
-  $green-1: #051a0d,
-  $green-2: #0a2d1a,
-  $green-3: #0f4d2d,
-  $green-4: #14663d,
-  $green-5: #1a9959,
-  $green-6: #22c55e,
-  $green-7: #4ade80,
-  $green-8: #86efac,
-  $green-9: #bbf7d0,
-  $green-10: #dcfce7,
-  // Yellow palette - for warnings, pending states, leverage indicators
-  $yellow-1: #1a1505,
-  $yellow-2: #2d2408,
-  $yellow-3: #4d3d0d,
-  $yellow-4: #665211,
-  $yellow-5: #997a1a,
-  $yellow-6: #eab308,
-  $yellow-7: #facc15,
-  $yellow-8: #fde047,
-  $yellow-9: #fef08a,
-  $yellow-10: #fef9c3,
-  // Blue palette - for info, links, secondary actions
-  $blue-1: #050f1a,
-  $blue-2: #0a1929,
-  $blue-3: #0f2942,
-  $blue-4: #143859,
-  $blue-5: #1a5280,
-  $blue-6: #3b82f6,
-  $blue-7: #60a5fa,
-  $blue-8: #93c5fd,
-  $blue-9: #bfdbfe,
-  $blue-10: #dbeafe,
-  // Gray palette - for backgrounds, borders, text (darker for Flash Trade aesthetic)
-  $gray-1: #050505,
-  $gray-2: #0a0a0a,
-  $gray-3: #141414,
-  $gray-4: #1e1e1e,
-  $gray-5: #2a2a2a,
-  $gray-6: #3f3f3f,
-  $gray-7: #525252,
-  $gray-8: #737373,
-  $gray-9: #a3a3a3,
-  $gray-10: #d4d4d4,
-  // Primary palette - Flash Trade brand cyan (matching their actual website)
-  $primary-1: #051414,
-  $primary-2: #0a2828,
-  $primary-3: #0f3d3d,
-  $primary-4: #145252,
-  $primary-5: #1a7a7a,
-  $primary-6: #06b6d4,
-  $primary-7: #22d3ee,
-  $primary-8: #67e8f9,
-  $primary-9: #a5f3fc,
-  $primary-10: #cffafe);

package/src/themes/flashtrade/01-settings/_settings.config.scss

@@ -1,16 +0,0 @@
-/*!
- * Flash Trade Theme Configuration
- * Core configuration variables for the Flash Trade perpetuals trading platform theme
- */
-
-@use '../../../styles/01-settings/settings.config' with (
-  $prefix: 'atomix-'
-);
-// Environment configuration
-$ENV: 'dev';
-
-// CSS variable prefix for theme namespacing
-$theme-name: 'flashtrade';
-$theme-version: '1.0.0';
-$theme-author: 'Atomix Design System';
-

package/src/themes/flashtrade/01-settings/_settings.typography.scss

@@ -1,35 +0,0 @@
-/*!
- * Flash Trade Theme Typography
- * Modern, sleek typography optimized for trading interfaces
- * High readability for financial data and trading information
- */
-
-@use '../../../styles/01-settings/settings.typography' with (
-  // Modern sans-serif font stack optimized for trading platforms
-  $font-family-base: (
-      'Inter',
-      -apple-system,
-      BlinkMacSystemFont,
-      'Segoe UI',
-      'Roboto',
-      'Oxygen',
-      'Ubuntu',
-      'Cantarell',
-      'Fira Sans',
-      'Droid Sans',
-      'Helvetica Neue',
-      sans-serif
-    ),
-  // Font weights for trading interface
-  $font-weight-light: 300,
-  $font-weight-normal: 400,
-  $font-weight-medium: 500,
-  $font-weight-semibold: 600,
-  $font-weight-bold: 700,
-  $font-weight-heavy: 800,
-  $font-weight-black: 900,
-  // Base typography settings optimized for financial data
-  $font-size-base: 1rem,
-  $line-height-base: 1.5
-);
-

package/src/themes/flashtrade/02-tools/_index.scss

@@ -1,8 +0,0 @@
-/*!
- * Flash Trade Theme Tools Index
- * Trading platform specific tools and mixins
- */
-
-// Forward base tools from the main design system
-@forward '../../../styles/02-tools/index';
-

package/src/themes/flashtrade/03-generic/_index.scss

@@ -1,8 +0,0 @@
-/*!
- * Flash Trade Theme Generic Styles Index
- * Generic styles and resets for the trading platform theme
- */
-
-// Forward base generic styles from the main design system
-@forward '../../../styles/03-generic/index';
-

package/src/themes/flashtrade/04-elements/_index.scss

@@ -1,12 +0,0 @@
-/*!
- * Flash Trade Theme Elements Index
- * Base element styles for the trading platform
- */
-
-// Forward base element styles from the main design system
-@forward '../../../styles/04-elements/index';
-
-body {
-    position: relative;
-    
-}

package/src/themes/flashtrade/05-objects/_index.scss

@@ -1,8 +0,0 @@
-/*!
- * Flash Trade Theme Objects Index
- * Object-level styles for the trading platform
- */
-
-// Forward base object styles from the main design system
-@forward '../../../styles/05-objects/index';
-

package/src/themes/flashtrade/06-components/_components.badge.scss

@@ -1,156 +0,0 @@
-/*!
- * Flash Trade Theme - Badge Component
- * Trading platform badge styles for price changes and indicators
- */
-
-@use '../01-settings' as *;
-@use '../../../styles/02-tools' as tools;
-
-// Badge base styles
-.badge {
-    display: inline-flex;
-    align-items: center;
-    padding: 0.25rem 0.75rem;
-    border-radius: 6px;
-    font-size: 0.875rem;
-    font-weight: 600;
-    line-height: 1.5;
-    transition: all 0.15s ease-in-out;
-
-    // Success badge - for profits/long positions
-    &-success {
-        background-color: rgba(var(--atomix-green-6-rgb), 0.15);
-        color: var(--atomix-green-6);
-        border: 1px solid rgba(var(--atomix-green-6-rgb), 0.3);
-
-        &:hover {
-            background-color: rgba(var(--atomix-green-6-rgb), 0.25);
-        }
-    }
-
-    // Danger badge - for losses/short positions
-    &-danger {
-        background-color: rgba(var(--atomix-red-6-rgb), 0.15);
-        color: var(--atomix-red-6);
-        border: 1px solid rgba(var(--atomix-red-6-rgb), 0.3);
-
-        &:hover {
-            background-color: rgba(var(--atomix-red-6-rgb), 0.25);
-        }
-    }
-
-    // Warning badge - for pending/caution states
-    &-warning {
-        background-color: rgba(var(--atomix-yellow-6-rgb), 0.15);
-        color: var(--atomix-yellow-6);
-        border: 1px solid rgba(var(--atomix-yellow-6-rgb), 0.3);
-
-        &:hover {
-            background-color: rgba(var(--atomix-yellow-6-rgb), 0.25);
-        }
-    }
-
-    // Info badge - for general information
-    &-info {
-        background-color: rgba(var(--atomix-blue-6-rgb), 0.15);
-        color: var(--atomix-blue-6);
-        border: 1px solid rgba(var(--atomix-blue-6-rgb), 0.3);
-
-        &:hover {
-            background-color: rgba(var(--atomix-blue-6-rgb), 0.25);
-        }
-    }
-
-    // Primary badge - for Flash Trade brand
-    &-primary {
-        background-color: rgba(var(--atomix-primary-6-rgb), 0.15);
-        color: var(--atomix-primary-6);
-        border: 1px solid rgba(var(--atomix-primary-6-rgb), 0.3);
-
-        &:hover {
-            background-color: rgba(var(--atomix-primary-6-rgb), 0.25);
-        }
-    }
-
-    // Secondary badge - for neutral states
-    &-secondary {
-        background-color: rgba(var(--atomix-gray-6-rgb), 0.15);
-        color: var(--atomix-gray-9);
-        border: 1px solid rgba(var(--atomix-gray-6-rgb), 0.3);
-
-        &:hover {
-            background-color: rgba(var(--atomix-gray-6-rgb), 0.25);
-        }
-    }
-
-    // Small badge
-    &-sm {
-        padding: 0.125rem 0.5rem;
-        font-size: 0.75rem;
-    }
-
-    // Large badge
-    &-lg {
-        padding: 0.375rem 1rem;
-        font-size: 1rem;
-    }
-
-    // Pill shaped badge
-    &-pill {
-        border-radius: 50px;
-    }
-
-    // Glow effect for important badges
-    &-glow {
-        &.badge-success {
-            box-shadow: 0 0 12px rgba(var(--atomix-green-6-rgb), 0.3);
-        }
-
-        &.badge-danger {
-            box-shadow: 0 0 12px rgba(var(--atomix-red-6-rgb), 0.3);
-        }
-
-        &.badge-primary {
-            box-shadow: 0 0 12px rgba(var(--atomix-primary-6-rgb), 0.3);
-        }
-    }
-}
-
-// Price change indicators
-.price-positive {
-    color: var(--atomix-green-6);
-    font-weight: 600;
-
-    &::before {
-        content: '+';
-    }
-}
-
-.price-negative {
-    color: var(--atomix-red-6);
-    font-weight: 600;
-}
-
-.price-neutral {
-    color: var(--atomix-gray-9);
-    font-weight: 600;
-}
-
-// Leverage badge
-.leverage-badge {
-    display: inline-flex;
-    align-items: center;
-    padding: 0.25rem 0.625rem;
-    background: rgba(var(--atomix-yellow-6-rgb), 0.1);
-    border: 1px solid rgba(var(--atomix-yellow-6-rgb), 0.3);
-    border-radius: 4px;
-    color: var(--atomix-yellow-6);
-    font-size: 0.75rem;
-    font-weight: 700;
-    letter-spacing: 0.5px;
-
-    &::after {
-        content: 'x';
-        margin-left: 1px;
-    }
-}

package/src/themes/flashtrade/06-components/_components.button.scss

@@ -1,135 +0,0 @@
-/*!
- * Flash Trade Theme - Button Component
- * Trading platform button styles with Flash Trade branding
- */
-
-@use '../01-settings' as *;
-@use '../../../styles/02-tools' as tools;
-
-// Button base styles for Flash Trade theme
-.btn {
-
-    // Primary button - for buy/long actions
-    &-primary {
-        background: linear-gradient(135deg, var(--atomix-primary-6), var(--atomix-primary-7));
-        color: var(--atomix-gray-1);
-        border: 1px solid var(--atomix-primary-6);
-        font-weight: 600;
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-        transition: all 0.15s ease-in-out;
-
-        &:hover {
-            background: linear-gradient(135deg, var(--atomix-primary-7), var(--atomix-primary-8));
-            box-shadow: 0 0 20px rgba(6, 182, 212, 0.4);
-            transform: translateY(-1px);
-        }
-
-        &:active {
-            transform: translateY(0);
-        }
-    }
-
-    // Success button - for long positions
-    &-success {
-        background: linear-gradient(135deg, var(--atomix-green-6), var(--atomix-green-7));
-        color: var(--atomix-gray-1);
-        border: 1px solid var(--atomix-green-6);
-        font-weight: 600;
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-        transition: all 0.15s ease-in-out;
-
-        &:hover {
-            background: linear-gradient(135deg, var(--atomix-green-7), var(--atomix-green-8));
-            box-shadow: 0 0 20px rgba(34, 197, 94, 0.4);
-            transform: translateY(-1px);
-        }
-
-        &:active {
-            transform: translateY(0);
-        }
-    }
-
-    // Danger button - for sell/short actions
-    &-danger {
-        background: linear-gradient(135deg, var(--atomix-red-6), var(--atomix-red-7));
-        color: var(--atomix-white);
-        border: 1px solid var(--atomix-red-6);
-        font-weight: 600;
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-        transition: all 0.15s ease-in-out;
-
-        &:hover {
-            background: linear-gradient(135deg, var(--atomix-red-7), var(--atomix-red-8));
-            box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
-            transform: translateY(-1px);
-        }
-
-        &:active {
-            transform: translateY(0);
-        }
-    }
-
-    // Secondary button - for cancel/neutral actions
-    &-secondary {
-        background: rgba(var(--atomix-gray-5-rgb), 0.3);
-        color: var(--atomix-gray-10);
-        border: 1px solid var(--atomix-gray-6);
-        backdrop-filter: blur(8px);
-        font-weight: 500;
-        transition: all 0.15s ease-in-out;
-
-        &:hover {
-            background: rgba(var(--atomix-gray-5-rgb), 0.5);
-            border-color: var(--atomix-gray-7);
-        }
-    }
-
-    // Outline button variant
-    &-outline {
-        background: transparent;
-        border: 1px solid var(--atomix-primary-6);
-        color: var(--atomix-primary-6);
-        backdrop-filter: blur(4px);
-        transition: all 0.15s ease-in-out;
-
-        &:hover {
-            background: rgba(var(--atomix-primary-6-rgb), 0.1);
-            box-shadow: 0 0 15px rgba(6, 182, 212, 0.2);
-        }
-
-        &-success {
-            border-color: var(--atomix-green-6);
-            color: var(--atomix-green-6);
-
-            &:hover {
-                background: rgba(var(--atomix-green-6-rgb), 0.1);
-                box-shadow: 0 0 15px rgba(34, 197, 94, 0.2);
-            }
-        }
-
-        &-danger {
-            border-color: var(--atomix-red-6);
-            color: var(--atomix-red-6);
-
-            &:hover {
-                background: rgba(var(--atomix-red-6-rgb), 0.1);
-                box-shadow: 0 0 15px rgba(239, 68, 68, 0.2);
-            }
-        }
-    }
-
-    // Small button size
-    &-sm {
-        padding: 0.375rem 0.75rem;
-        font-size: 0.875rem;
-    }
-
-    // Large button size
-    &-lg {
-        padding: 0.75rem 1.5rem;
-        font-size: 1.125rem;
-    }
-}

package/src/themes/flashtrade/06-components/_components.card.scss

@@ -1,214 +0,0 @@
-/*!
- * Flash Trade Theme - Card Component
- * Trading platform card styles with glass morphism
- */
-
-@use '../01-settings' as *;
-@use '../../../styles/02-tools' as tools;
-
-// Trading card base styles
-.market-card,
-.trading-card {
-    background: rgba(var(--atomix-gray-3-rgb), 0.6);
-    backdrop-filter: blur(12px) saturate(1.8);
-    border: 1px solid rgba(var(--atomix-primary-6-rgb), 0.1);
-    border-radius: 12px;
-    padding: 1.5rem;
-    transition: all 0.2s ease-in-out;
-
-    &:hover {
-        border-color: rgba(var(--atomix-primary-6-rgb), 0.3);
-        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-        transform: translateY(-2px);
-    }
-
-    // Card header
-    &__header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 1rem;
-        padding-bottom: 0.75rem;
-        border-bottom: 1px solid rgba(var(--atomix-gray-6-rgb), 0.2);
-
-        h3 {
-            color: var(--atomix-white);
-            font-size: 1.25rem;
-            font-weight: 600;
-            margin: 0;
-        }
-    }
-
-    // Card body
-    &__body {
-        .price {
-            font-size: 2rem;
-            font-weight: 700;
-            color: var(--atomix-white);
-            margin-bottom: 0.5rem;
-            font-variant-numeric: tabular-nums;
-        }
-
-        .volume,
-        .market-info {
-            font-size: 0.875rem;
-            color: var(--atomix-gray-9);
-            margin-bottom: 0.25rem;
-        }
-    }
-}
-
-// Chart container
-.chart-container {
-    background: rgba(var(--atomix-gray-2-rgb), 0.8);
-    backdrop-filter: blur(16px);
-    border: 1px solid rgba(var(--atomix-gray-6-rgb), 0.2);
-    border-radius: 16px;
-    padding: 1.5rem;
-
-    .chart-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 1.5rem;
-
-        h2 {
-            color: var(--atomix-white);
-            font-size: 1.5rem;
-            font-weight: 600;
-            margin: 0;
-        }
-
-        .price-info {
-            display: flex;
-            gap: 1rem;
-            align-items: center;
-
-            .current-price {
-                font-size: 1.75rem;
-                font-weight: 700;
-                color: var(--atomix-white);
-                font-variant-numeric: tabular-nums;
-            }
-
-            .price-change {
-                font-size: 1rem;
-                font-weight: 600;
-                padding: 0.25rem 0.75rem;
-                border-radius: 6px;
-
-                &.positive {
-                    color: var(--atomix-green-6);
-                    background: rgba(var(--atomix-green-6-rgb), 0.15);
-                }
-
-                &.negative {
-                    color: var(--atomix-red-6);
-                    background: rgba(var(--atomix-red-6-rgb), 0.15);
-                }
-            }
-        }
-    }
-
-    .chart-body {
-        min-height: 400px;
-    }
-}
-
-// Trading panel
-.trading-panel,
-.order-panel {
-    background: rgba(var(--atomix-gray-3-rgb), 0.7);
-    backdrop-filter: blur(12px);
-    border: 1px solid rgba(var(--atomix-gray-6-rgb), 0.2);
-    border-radius: 12px;
-    padding: 1.5rem;
-
-    h3 {
-        color: var(--atomix-white);
-        font-size: 1.125rem;
-        font-weight: 600;
-        margin-bottom: 1rem;
-    }
-
-    .order-type {
-        display: flex;
-        gap: 0.5rem;
-        margin-bottom: 1.5rem;
-
-        .btn {
-            flex: 1;
-
-            &.active {
-                background: rgba(var(--atomix-primary-6-rgb), 0.2);
-                border-color: var(--atomix-primary-6);
-                color: var(--atomix-primary-6);
-            }
-        }
-    }
-
-    .order-form {
-
-        input,
-        select {
-            width: 100%;
-            background: rgba(var(--atomix-gray-4-rgb), 0.5);
-            border: 1px solid rgba(var(--atomix-gray-6-rgb), 0.3);
-            color: var(--atomix-white);
-            padding: 0.75rem;
-            border-radius: 8px;
-            margin-bottom: 1rem;
-            transition: all 0.15s ease-in-out;
-
-            &:focus {
-                outline: none;
-                border-color: var(--atomix-primary-6);
-                box-shadow: 0 0 0 3px rgba(var(--atomix-primary-6-rgb), 0.1);
-            }
-
-            &::placeholder {
-                color: var(--atomix-gray-7);
-            }
-        }
-    }
-
-    .leverage-selector {
-        margin-bottom: 1rem;
-
-        span {
-            color: var(--atomix-gray-9);
-            font-size: 0.875rem;
-        }
-    }
-
-    .order-actions {
-        display: flex;
-        gap: 0.75rem;
-
-        .btn {
-            flex: 1;
-        }
-    }
-}
-
-// Markets list
-.markets-list {
-    display: grid;
-    gap: 1rem;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-}
-
-// Trading dashboard layout
-.trading-dashboard {
-    display: grid;
-    gap: 1.5rem;
-    grid-template-columns: 1fr 350px;
-
-    @media (max-width: 1024px) {
-        grid-template-columns: 1fr;
-    }
-
-    .chart-section {
-        min-height: 500px;
-    }
-}