@shohojdhara/atomix 0.3.1 → 0.3.3

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

@@ -0,0 +1,79 @@
+/*!
+ * 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

@@ -0,0 +1,16 @@
+/*!
+ * 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

@@ -0,0 +1,35 @@
+/*!
+ * 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

@@ -0,0 +1,8 @@
+/*!
+ * 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

@@ -0,0 +1,8 @@
+/*!
+ * 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

@@ -0,0 +1,12 @@
+/*!
+ * 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

@@ -0,0 +1,8 @@
+/*!
+ * 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

@@ -0,0 +1,156 @@
+/*!
+ * 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

@@ -0,0 +1,135 @@
+/*!
+ * 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

@@ -0,0 +1,214 @@
+/*!
+ * 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;
+    }
+}