move colors from dashboard to globals.css

Author: von-steinkirch

src/app/globals.css

@@ -7,9 +7,16 @@
   --light-primary: rgb(87, 76, 145);
   --light-primary-rgb: 87, 76, 145;
   --light-background: rgb(224, 222, 226);
+  --light-background-rgb: 224, 222, 226;
+  --light-background-light: rgb(240, 238, 242);
+  --light-background-light-rgb: 240, 238, 242;
   --light-text: rgb(65, 62, 62);
+  --light-text-rgb: 65, 62, 62;
+  --light-text-secondary: rgba(65, 62, 62, 0.7);
   --light-bearish: rgb(212, 116, 180);
+  --light-bearish-rgb: 212, 116, 180;
   --light-bullish: rgb(90, 192, 114);
+  --light-bullish-rgb: 90, 192, 114;
   --light-border: rgba(87, 76, 145, 0.2);
   --light-glow-shadow: rgba(87, 76, 145, 0.3);
   --light-glow-shadow-hover: rgba(87, 76, 145, 0.5);
@@ -48,9 +55,16 @@
   --dark-primary: #60a5fa;
   --dark-primary-rgb: 96, 165, 250;
   --dark-background: rgb(8, 12, 18);
+  --dark-background-rgb: 8, 12, 18;
+  --dark-background-light: rgb(16, 20, 30);
+  --dark-background-light-rgb: 16, 20, 30;
   --dark-text: rgb(220, 220, 255);
+  --dark-text-rgb: 220, 220, 255;
+  --dark-text-secondary: rgba(220, 220, 255, 0.7);
   --dark-bearish: #f87171;
+  --dark-bearish-rgb: 248, 113, 113;
   --dark-bullish: #34d399;
+  --dark-bullish-rgb: 52, 211, 153;
   --dark-border: rgba(0, 170, 255, 0.2);
   --dark-glow-shadow: rgba(0, 170, 255, 0.3);
   --dark-glow-shadow-hover: rgba(0, 170, 255, 0.5);
@@ -93,9 +107,16 @@
   --color-primary: var(--light-primary);
   --color-primary-rgb: var(--light-primary-rgb);
   --color-background: var(--light-background);
+  --color-background-rgb: var(--light-background-rgb);
+  --background-color-light: var(--light-background-light);
+  --background-color-light-rgb: var(--light-background-light-rgb);
   --color-text: var(--light-text);
+  --color-text-rgb: var(--light-text-rgb);
+  --text-color-secondary: var(--light-text-secondary);
   --color-bearish: var(--light-bearish);
+  --color-bearish-rgb: var(--light-bearish-rgb);
   --color-bullish: var(--light-bullish);
+  --color-bullish-rgb: var(--light-bullish-rgb);
   --color-border: var(--light-border);
   --color-glow-shadow: var(--light-glow-shadow);
   --color-glow-shadow-hover: var(--light-glow-shadow-hover);
@@ -166,7 +187,7 @@
 
   /* Common variables */
   --primary-color: var(--color-primary);
-  --text-color: var(--color-primary);
+  --text-color: var(--color-text);
   --background-color: var(--color-background);
   --bearish-color: var(--color-bearish);
   --bullish-color: var(--color-bullish);
@@ -189,9 +210,16 @@ html.dark {
   --color-primary: var(--dark-primary);
   --color-primary-rgb: var(--dark-primary-rgb);
   --color-background: var(--dark-background);
+  --color-background-rgb: var(--dark-background-rgb);
+  --background-color-light: var(--dark-background-light);
+  --background-color-light-rgb: var(--dark-background-light-rgb);
   --color-text: var(--dark-text);
+  --color-text-rgb: var(--dark-text-rgb);
+  --text-color-secondary: var(--dark-text-secondary);
   --color-bearish: var(--dark-bearish);
+  --color-bearish-rgb: var(--dark-bearish-rgb);
   --color-bullish: var(--dark-bullish);
+  --color-bullish-rgb: var(--dark-bullish-rgb);
   --color-border: var(--dark-border);
   --color-glow-shadow: var(--dark-glow-shadow);
   --color-glow-shadow-hover: var(--dark-glow-shadow-hover);

src/styles/dashboard.css

@@ -15,8 +15,8 @@
   @apply w-full mx-auto min-h-[calc(100vh-200px)] p-6 pb-16;
   background: linear-gradient(
     135deg,
-    var(--background-color) 0%,
-    var(--background-color-light) 100%
+    var(--color-background) 0%,
+    var(--color-background) 100%
   );
   padding-bottom: 8rem;
 }
@@ -36,9 +36,9 @@
 .dashboard-header h2 {
   @apply m-0 text-center font-extrabold;
   font-size: clamp(2.5rem, 6vw, 3.5rem);
-  color: var(--text-color);
+  color: var(--color-text);
   text-shadow: 0 0 20px var(--color-primary);
-  background: linear-gradient(135deg, var(--color-primary), var(--text-color));
+  background: linear-gradient(135deg, var(--color-primary), var(--color-text));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -96,13 +96,14 @@
 }
 
 .total-value {
-  @apply text-2xl font-bold text-[var(--text-color)];
-  text-shadow: 0 0 10px rgba(var(--text-color-rgb), 0.3);
+  @apply text-2xl font-bold text-[var(--color-primary)];
+  text-shadow: 0 0 10px rgba(var(--color-primary-rgb), 0.3);
+  color: var(--color-primary) !important;
 }
 
 .portfolio-change {
   @apply text-lg font-bold px-3 py-1 rounded-lg;
-  background: rgba(var(--text-color-rgb), 0.05);
+  background: rgba(var(--color-primary-rgb), 0.05);
 }
 
 .portfolio-assets {
@@ -134,35 +135,36 @@
 }
 
 .asset-value {
-  @apply text-[var(--text-color)] font-bold text-sm text-center;
+  @apply text-[var(--color-primary)] font-bold text-sm text-center;
+  color: var(--color-primary) !important;
 }
 
 .asset-change {
   @apply font-bold text-sm px-2 py-1 rounded-lg text-center;
-  background: rgba(var(--text-color-rgb), 0.05);
+  background: rgba(var(--color-primary-rgb), 0.05);
 }
 
 .portfolio-asset .asset-actions {
   @apply flex items-center gap-3;
 }
 
 .portfolio-asset .asset-value {
-  @apply text-[var(--text-color)] font-bold text-sm;
+  @apply text-[var(--color-text)] font-bold text-sm;
 }
 
 .portfolio-asset .asset-change {
   @apply font-bold text-sm px-2 py-1 rounded-lg;
-  background: rgba(var(--text-color-rgb), 0.05);
+  background: rgba(var(--color-primary-rgb), 0.05);
 }
 
 .positive-change {
-  color: var(--bullish-color);
-  text-shadow: 0 0 8px rgba(var(--bullish-color-rgb), 0.3);
+  color: var(--color-bullish);
+  text-shadow: 0 0 8px rgba(var(--color-bullish-rgb), 0.3);
 }
 
 .negative-change {
-  color: var(--bearish-color);
-  text-shadow: 0 0 8px rgba(var(--bearish-color-rgb), 0.3);
+  color: var(--color-bearish);
+  text-shadow: 0 0 8px rgba(var(--color-bearish-rgb), 0.3);
 }
 
 .saved-charts-list {
@@ -198,7 +200,7 @@
 }
 
 .saved-chart-item p {
-  @apply m-0 text-sm font-semibold text-[var(--text-color)];
+  @apply m-0 text-sm font-semibold text-[var(--color-text)];
   line-height: 1.4;
   display: flex;
   align-items: center;
@@ -212,8 +214,9 @@
 }
 
 .chart-details {
-  @apply text-[var(--text-color-secondary)];
+  @apply text-[var(--color-text)];
   font-weight: 500;
+  opacity: 0.7;
 }
 
 .chart-actions {
@@ -228,7 +231,7 @@
   height: 36px;
   background: rgba(var(--color-primary-rgb), 0.1);
   border: 1px solid rgba(var(--color-primary-rgb), 0.2);
-  color: var(--text-color);
+  color: var(--color-text);
 }
 
 .dashboard-card .view-chart-button:hover,
@@ -293,7 +296,7 @@
 }
 
 .asset-info p {
-  @apply m-0 text-sm font-semibold text-[var(--text-color)];
+  @apply m-0 text-sm font-semibold text-[var(--color-text)];
   line-height: 1.4;
   display: flex;
   align-items: center;
@@ -317,7 +320,7 @@
   height: 36px;
   background: rgba(var(--color-primary-rgb), 0.1);
   border: 1px solid rgba(var(--color-primary-rgb), 0.2);
-  color: var(--text-color);
+  color: var(--color-primary) !important;
 }
 
 .view-asset-button:hover,
@@ -340,6 +343,19 @@
   opacity: 0.7;
 }
 
+.favorite-asset-item .asset-value {
+  color: var(--color-primary) !important;
+}
+
+.dashboard-card h3 svg {
+  color: var(--color-primary) !important;
+}
+
+.saved-chart-item svg,
+.chart-actions svg {
+  color: var(--color-primary) !important;
+}
+
 @media (max-width: 1200px) {
   .dashboard-grid {
     grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
@@ -385,8 +401,6 @@
     min-height: 250px;
   }
 
-
-
   .chart-actions {
     @apply gap-1;
   }