@shohojdhara/atomix 0.3.1 → 0.3.3

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

@@ -0,0 +1,227 @@
+/*!
+ * Flash Trade Theme - Navbar Component
+ * Trading platform navigation with glass morphism
+ */
+
+@use '../01-settings' as *;
+@use '../../../styles/02-tools' as tools;
+
+// Main navbar
+.navbar {
+    background: rgba(var(--atomix-gray-2-rgb), 0.8);
+    backdrop-filter: blur(16px) saturate(1.5);
+    border-bottom: 1px solid rgba(var(--atomix-gray-6-rgb), 0.2);
+    padding: 0.75rem 1.5rem;
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+
+    &__container {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        max-width: 1920px;
+        margin: 0 auto;
+    }
+
+    &__brand {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+
+        .logo {
+            height: 32px;
+            width: auto;
+        }
+
+        .brand-name {
+            font-size: 1.25rem;
+            font-weight: 700;
+            color: var(--atomix-primary-6);
+            text-decoration: none;
+            letter-spacing: -0.5px;
+        }
+    }
+
+    &__nav {
+        display: flex;
+        gap: 0.5rem;
+        align-items: center;
+
+        @media (max-width: 768px) {
+            display: none;
+        }
+    }
+
+    &__link {
+        padding: 0.5rem 1rem;
+        color: var(--atomix-gray-9);
+        text-decoration: none;
+        font-weight: 500;
+        border-radius: 8px;
+        transition: all 0.15s ease-in-out;
+
+        &:hover {
+            color: var(--atomix-white);
+            background: rgba(var(--atomix-gray-5-rgb), 0.5);
+        }
+
+        &.active {
+            color: var(--atomix-primary-6);
+            background: rgba(var(--atomix-primary-6-rgb), 0.1);
+        }
+    }
+
+    &__actions {
+        display: flex;
+        gap: 0.75rem;
+        align-items: center;
+    }
+
+    &__wallet {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.5rem 1rem;
+        background: linear-gradient(135deg, var(--atomix-primary-6), var(--atomix-primary-7));
+        color: var(--atomix-gray-1);
+        border: none;
+        border-radius: 8px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.15s ease-in-out;
+
+        &:hover {
+            box-shadow: 0 0 20px rgba(6, 182, 212, 0.4);
+            transform: translateY(-1px);
+        }
+
+        &.connected {
+            background: rgba(var(--atomix-green-6-rgb), 0.2);
+            color: var(--atomix-green-6);
+            border: 1px solid var(--atomix-green-6);
+        }
+    }
+}
+
+// Asset selector bar (secondary nav)
+.asset-bar {
+    background: rgba(var(--atomix-gray-3-rgb), 0.6);
+    backdrop-filter: blur(12px);
+    border-bottom: 1px solid rgba(var(--atomix-gray-6-rgb), 0.15);
+    padding: 0.75rem 1.5rem;
+    overflow-x: auto;
+
+    &::-webkit-scrollbar {
+        height: 4px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: rgba(var(--atomix-gray-5-rgb), 0.3);
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: rgba(var(--atomix-primary-6-rgb), 0.5);
+        border-radius: 2px;
+
+        &:hover {
+            background: rgba(var(--atomix-primary-6-rgb), 0.7);
+        }
+    }
+
+    &__container {
+        display: flex;
+        gap: 1rem;
+        max-width: 1920px;
+        margin: 0 auto;
+    }
+
+    &__item {
+        display: flex;
+        flex-direction: column;
+        padding: 0.5rem 1rem;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.15s ease-in-out;
+        white-space: nowrap;
+        min-width: 120px;
+
+        &:hover {
+            background: rgba(var(--atomix-gray-5-rgb), 0.5);
+        }
+
+        &.active {
+            background: rgba(var(--atomix-primary-6-rgb), 0.1);
+            border: 1px solid rgba(var(--atomix-primary-6-rgb), 0.3);
+        }
+
+        .asset-name {
+            font-size: 0.875rem;
+            font-weight: 600;
+            color: var(--atomix-white);
+            margin-bottom: 0.125rem;
+        }
+
+        .asset-price {
+            font-size: 0.75rem;
+            color: var(--atomix-gray-9);
+            font-variant-numeric: tabular-nums;
+        }
+
+        .asset-change {
+            font-size: 0.75rem;
+            font-weight: 600;
+
+            &.positive {
+                color: var(--atomix-green-6);
+            }
+
+            &.negative {
+                color: var(--atomix-red-6);
+            }
+        }
+    }
+}
+
+// Mobile menu toggle
+.navbar__toggle {
+    display: none;
+    background: transparent;
+    border: 1px solid var(--atomix-gray-6);
+    color: var(--atomix-white);
+    padding: 0.5rem;
+    border-radius: 6px;
+    cursor: pointer;
+
+    @media (max-width: 768px) {
+        display: block;
+    }
+
+    &:hover {
+        background: rgba(var(--atomix-gray-5-rgb), 0.5);
+    }
+}
+
+// Mobile menu
+.navbar__mobile-menu {
+    display: none;
+    position: fixed;
+    top: 60px;
+    left: 0;
+    right: 0;
+    background: rgba(var(--atomix-gray-2-rgb), 0.95);
+    backdrop-filter: blur(20px);
+    border-bottom: 1px solid rgba(var(--atomix-gray-6-rgb), 0.2);
+    padding: 1rem;
+    z-index: 999;
+
+    &.active {
+        display: block;
+    }
+
+    .navbar__link {
+        display: block;
+        padding: 0.75rem 1rem;
+        margin-bottom: 0.5rem;
+    }
+}

package/src/themes/flashtrade/06-components/_index.scss

@@ -0,0 +1,13 @@
+/*!
+ * Flash Trade Theme Components Index
+ * Component styles with trading platform enhancements
+ */
+
+// Component overrides with Flash Trade styling
+@forward 'components.button';
+@forward 'components.card';
+@forward 'components.badge';
+@forward 'components.navbar';
+
+// Forward base component styles from the main design system
+@forward '../../../styles/06-components/index';

package/src/themes/flashtrade/99-utilities/_index.scss

@@ -0,0 +1,9 @@
+/*!
+ * Flash Trade Theme Utilities Index
+ * Utility classes for the trading platform
+ */
+// Flash Trade specific utilities
+@forward 'utilities.trading';
+
+// Forward base utility styles from the main design system
+@forward '../../../styles/99-utilities/index';

package/src/themes/flashtrade/99-utilities/_utilities.trading.scss

@@ -0,0 +1,187 @@
+/*!
+ * Flash Trade Theme - Utility Classes
+ * Trading platform specific utility classes
+ */
+
+@use '../01-settings' as *;
+
+// Text color utilities for trading
+.text-profit,
+.text-long {
+    color: var(--atomix-green-6) !important;
+}
+
+.text-loss,
+.text-short {
+    color: var(--atomix-red-6) !important;
+}
+
+.text-neutral {
+    color: var(--atomix-gray-9) !important;
+}
+
+.text-primary {
+    color: var(--atomix-primary-6) !important;
+}
+
+// Background utilities
+.bg-dark-1 {
+    background-color: var(--atomix-gray-1) !important;
+}
+
+.bg-dark-2 {
+    background-color: var(--atomix-gray-2) !important;
+}
+
+.bg-dark-3 {
+    background-color: var(--atomix-gray-3) !important;
+}
+
+.bg-glass {
+    background: rgba(var(--atomix-gray-3-rgb), 0.6) !important;
+    backdrop-filter: blur(12px) saturate(1.8) !important;
+}
+
+.bg-glass-dark {
+    background: rgba(var(--atomix-gray-2-rgb), 0.8) !important;
+    backdrop-filter: blur(16px) saturate(1.5) !important;
+}
+
+// Border utilities
+.border-primary {
+    border-color: var(--atomix-primary-6) !important;
+}
+
+.border-profit {
+    border-color: var(--atomix-green-6) !important;
+}
+
+.border-loss {
+    border-color: var(--atomix-red-6) !important;
+}
+
+.border-glass {
+    border: 1px solid rgba(var(--atomix-gray-6-rgb), 0.2) !important;
+}
+
+// Glow effects
+.glow-primary {
+    box-shadow: 0 0 20px rgba(var(--atomix-primary-6-rgb), 0.4) !important;
+}
+
+.glow-profit {
+    box-shadow: 0 0 20px rgba(var(--atomix-green-6-rgb), 0.4) !important;
+}
+
+.glow-loss {
+    box-shadow: 0 0 20px rgba(var(--atomix-red-6-rgb), 0.4) !important;
+}
+
+// Font weight utilities for trading data
+.fw-trading {
+    font-weight: 600 !important;
+    font-variant-numeric: tabular-nums !important;
+}
+
+.fw-price {
+    font-weight: 700 !important;
+    font-variant-numeric: tabular-nums !important;
+}
+
+// Animation utilities
+.animate-price-up {
+    animation: priceUp 0.3s ease-in-out;
+}
+
+.animate-price-down {
+    animation: priceDown 0.3s ease-in-out;
+}
+
+@keyframes priceUp {
+    0% {
+        color: var(--atomix-white);
+    }
+
+    50% {
+        color: var(--atomix-green-6);
+        transform: scale(1.05);
+    }
+
+    100% {
+        color: var(--atomix-green-6);
+        transform: scale(1);
+    }
+}
+
+@keyframes priceDown {
+    0% {
+        color: var(--atomix-white);
+    }
+
+    50% {
+        color: var(--atomix-red-6);
+        transform: scale(1.05);
+    }
+
+    100% {
+        color: var(--atomix-red-6);
+        transform: scale(1);
+    }
+}
+
+// Responsive utilities
+@media (max-width: 768px) {
+    .hide-mobile {
+        display: none !important;
+    }
+}
+
+@media (min-width: 769px) {
+    .hide-desktop {
+        display: none !important;
+    }
+}
+
+// Trading specific layouts
+.trading-grid {
+    display: grid;
+    gap: 1.5rem;
+
+    &-2col {
+        grid-template-columns: 1fr 350px;
+
+        @media (max-width: 1024px) {
+            grid-template-columns: 1fr;
+        }
+    }
+
+    &-3col {
+        grid-template-columns: repeat(3, 1fr);
+
+        @media (max-width: 1024px) {
+            grid-template-columns: 1fr;
+        }
+    }
+}
+
+// Scrollbar styling
+.scrollbar-flash {
+    &::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: rgba(var(--atomix-gray-5-rgb), 0.3);
+        border-radius: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: rgba(var(--atomix-primary-6-rgb), 0.5);
+        border-radius: 4px;
+
+        &:hover {
+            background: rgba(var(--atomix-primary-6-rgb), 0.7);
+        }
+    }
+}