From 2dc076e9c22ea6767665431b98b58c002e149df5 Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Thu, 24 Apr 2025 15:43:38 +0530
Subject: [PATCH] feat: Remove unused placeholders styles and add global
 section styles

---
 app/src/styles/abstracts/placeholders.scss |   6 -
 app/src/styles/abstracts/variables.scss    | 229 ++++++++++++---------
 app/src/styles/base/global.scss            |   3 +
 app/src/styles/main.scss                   |   2 +-
 4 files changed, 130 insertions(+), 110 deletions(-)
 delete mode 100644 app/src/styles/abstracts/placeholders.scss
 create mode 100644 app/src/styles/base/global.scss

diff --git a/app/src/styles/abstracts/placeholders.scss b/app/src/styles/abstracts/placeholders.scss
deleted file mode 100644
index 18f28f9..0000000
--- a/app/src/styles/abstracts/placeholders.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-// center a element
-%centered {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
diff --git a/app/src/styles/abstracts/variables.scss b/app/src/styles/abstracts/variables.scss
index 44e5627..24fe99a 100644
--- a/app/src/styles/abstracts/variables.scss
+++ b/app/src/styles/abstracts/variables.scss
@@ -1,123 +1,146 @@
-/* ========================================================================
-   Global SCSS Variables
-   ========================================================================
-   This file contains the global variables used across the project for
-   colors, typography, spacing, shadows, and other design tokens.
-   ======================================================================== */
-
 @use "functions";
 
-// ========================================================================
-// Font Imports
-// ========================================================================
 @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
 
-// ========================================================================
-// Colors
-// ========================================================================
+// new variables
 
-// Text colors
-$text-color: #2b3344; // Primary text color
-$text-disabled: #b7b7c6; // Disabled text color
-$input-text-color: #595965; // Input field text color
+// text colors
+// ---------- light mode ----------
 
-$text-color-dark: #f3f3fd; // Primary text color for dark mode
-$text-disabled-dark: #6f6f7a; // Disabled text color for dark mode
-$input-text-color-dark: #b5b5c8; // Input field text color for dark mode
+// $text-color: #2b3344;
+// $text-disabled: #b7b7c6;
+// $input-text-color: #595965;
+// $highlight-text-color: #6f42c1;
 
-// Accent colors
-$accent-color: #6f42c1; // Primary accent color
-$accent-color-dark: #c4abf1; // Primary accent color for dark mode
-$highlight-accent-color: #e0dfff; // Highlighted accent for light mode
-$highlight-accent-color-dark: #403e6a; // Highlighted accent for dark mode
+// ---------- dark mode ----------
 
-// Background colors
-$background-color: #fcfdfd; // Main background color
-$background-color-dark: #19191d; // Main background color for dark mode
-$background-color-secondary: #e1e0ff80; // Secondary background color
-$background-color-secondary-dark: #39394f99; // Secondary background color for dark mode
-$background-color-gray: #f3f3f3; // Main background color
-$background-color-gray-dark: #232323; // Main background color for dark mode
+// $text-color-dark: #f3f3fd;
+// $text-disabled-dark: #6f6f7a;
+// $input-text-color-dark: #b5b5c8;
+// $highlight-text-color-dark: #B392F0;
 
-// Border colors
-$border-color: #e0dfff; // Default border color
-$border-color-dark: #403e6a; // Border color for dark mode
+// background colors
+// ---------- light mode ----------
 
-// Shadow color
-$shadow-color: #3c3c431a; // Shadow base color for light and dark mode
-$shadow-color-dark: #8f8f8f1a; // Shadow base color for light and dark mode
+// $background-color: linear-gradient(-45deg, #FCFDFDCC 0%, #FCFDFD99 100%);
+// $background-color-secondary: #FCFDFD4D;
+// $background-color-accent: #6f42c1;
+// $background-color-button: #6f42c1;
+// $background-color-drop-down: #6F42C14D;
+// $background-color-input: #FFFFFF4D;
+// $background-color-input-focus: #F2F2F7;
+// $background-color-drop-down-gradient: linear-gradient(-45deg, #75649366 0%, #40257266 100%);
+// $background-color-selected: #E0DFFF;
+// $background-radial-gray-gradient: radial-gradient(circle, #bfe0f8 0%, #e9ebff 46%, #e2acff 100%);
 
-// Gradients
-$acent-gradient-dark: linear-gradient(
-  90deg,
-  #b392f0 0%,
-  #a676ff 100%
-); // Dark mode accent gradient
-$acent-gradient: linear-gradient(
-  90deg,
-  #6f42c1 0%,
-  #925df3 100%
-); // Light mode accent gradient
+// ---------- dark mode ----------
+
+// $background-color-dark: linear-gradient(-45deg, #333333B3 0%, #2D2437B3 100%);
+// $background-color-secondary-dark: #19191D99;
+// $background-color-accent-dark: #6f42c1;
+// $background-color-button-dark: #6f42c1;
+// $background-color-drop-down-dark: #50505080;
+// $background-color-input-dark: #FFFFFF33;
+// $background-color-input-focus-dark: #333333;
+// $background-color-drop-down-gradient-dark: linear-gradient(-45deg, #8973B166 0%, #53427366 100%);
+// $background-color-selected-dark: #403E66;
+// $background-radial-gray-gradient-dark: radial-gradient(circle, #31373b 0%, #48494b 46%, #52415c 100%);
+
+// border colors
+// ---------- light mode ----------
+
+// $border-color: #E0DFFF;
+// $border-color-accent: #6F42C1;
+
+// ---------- dark mode ----------
+// $border-color-dark: #564B69;
+// $border-color-accent-dark: #6F42C1;
+
+// highlight colors
+// ---------- light mode ----------
+
+// $highlight-accent-color: #e0dfff;
+// $highlight-secondary-color: #c4abf1;
+
+// ---------- dark mode ----------
+// $highlight-accent-color-dark: #403e6a;
+// $highlight-secondary-color-dark: #c4abf1;
+
+// colors
+// $color1: #A392CD;
+// $color2: #7b4cd3;
+// $color3: #B186FF;
+// $color4: #8752E8;
+// $color5: #C7A8FF;
+
+
+// old variables
+$text-color: #2b3344;
+$text-disabled: #b7b7c6;
+$input-text-color: #595965;
+
+$text-color-dark: #f3f3fd;
+$text-disabled-dark: #6f6f7a;
+$input-text-color-dark: #b5b5c8;
+
+$accent-color: #6f42c1;
+$accent-color-dark: #c4abf1;
+$highlight-accent-color: #e0dfff;
+$highlight-accent-color-dark: #403e6a;
+
+$background-color: #fcfdfd;
+$background-color-dark: #19191d;
+$background-color-secondary: #e1e0ff80;
+$background-color-secondary-dark: #39394f99;
+$background-color-gray: #f3f3f3;
+$background-color-gray-dark: #232323;
+
+$border-color: #e0dfff;
+$border-color-dark: #403e6a;
+
+$shadow-color: #3c3c431a;
+$shadow-color-dark: #8f8f8f1a;
+
+$acent-gradient-dark: linear-gradient(90deg, #b392f0 0%, #a676ff 100%);
+$acent-gradient: linear-gradient(90deg, #6f42c1 0%, #925df3 100%);
 
 $faint-gradient: radial-gradient(circle, #bfe0f8 0%, #e9ebff 46%, #e2acff 100%);
 $faint-gradient-dark: radial-gradient(circle, #31373b 0%, #48494b 46%, #52415c 100%);
 
-// ========================================================================
-// Typography
-// ========================================================================
+$font-inter: "Inter", sans-serif;
+$font-josefin-sans: "Josefin Sans", sans-serif;
+$font-poppins: "Poppins", sans-serif;
+$font-roboto: "Roboto", sans-serif;
 
-// Font Family Variables
-$font-inter: "Inter", sans-serif; // Inter font
-$font-josefin-sans: "Josefin Sans", sans-serif; // Josefin Sans font
-$font-poppins: "Poppins", sans-serif; // Poppins font
-$font-roboto: "Roboto", sans-serif; // Roboto font
+$tiny: 0.625rem;
+$small: 0.75rem;
+$regular: 0.8rem;
+$large: 1rem;
+$xlarge: 1.125rem;
+$xxlarge: 1.5rem;
+$xxxlarge: 2rem;
 
-// Font sizes (converted to rem using a utility function)
-$tiny: 0.625rem; // Extra small text (10px)
-$small: 0.75rem; // Small text (12px)
-$regular: 0.8rem; // Default text size (14px)
-$large: 1rem; // Large text size (16px)
-$xlarge: 1.125rem; // Extra large text size (18px)
-$xxlarge: 1.5rem; // Double extra large text size (24px)
-$xxxlarge: 2rem; // Triple extra large text size (32px)
+$thin-weight: 300;
+$regular-weight: 400;
+$medium-weight: 500;
+$bold-weight: 600;
 
-// Font weights
-$thin-weight: 300; // Regular font weight
-$regular-weight: 400; // Regular font weight
-$medium-weight: 500; // Medium font weight
-$bold-weight: 600; // Bold font weight
+$z-index-drei-html: 1;
+$z-index-default: 1;
+$z-index-marketplace: 2;
+$z-index-tools: 3;
+$z-index-negative: -1;
+$z-index-ui-base: 10;
+$z-index-ui-overlay: 20;
+$z-index-ui-popup: 30;
+$z-index-ui-highest: 50;
 
-// ========================================================================
-// Z-Index Levels
-// ========================================================================
+$box-shadow-light: 0px 2px 4px $shadow-color;
+$box-shadow-medium: 0px 4px 8px $shadow-color;
+$box-shadow-heavy: 0px 8px 16px $shadow-color;
 
-// Z-index variables for layering
-$z-index-drei-html: 1; // For drei's Html components
-$z-index-default: 1; // For drei's Html components
-$z-index-marketplace: 2; // For drei's Html components
-$z-index-tools: 3; // For drei's Html components
-$z-index-negative: -1; // For drei's Html components
-$z-index-ui-base: 10; // Base UI elements
-$z-index-ui-overlay: 20; // Overlay UI elements (e.g., modals, tooltips)
-$z-index-ui-popup: 30; // Popups, dialogs, or higher-priority UI elements
-$z-index-ui-highest: 50; // Highest priority elements (e.g., notifications, loading screens)
-
-// ========================================================================
-// Shadows
-// ========================================================================
-
-// Box shadow variables
-$box-shadow-light: 0px 2px 4px $shadow-color; // Light shadow
-$box-shadow-medium: 0px 4px 8px $shadow-color; // Medium shadow
-$box-shadow-heavy: 0px 8px 16px $shadow-color; // Heavy shadow
-
-// ========================================================================
-// Border Radius
-// ========================================================================
-
-// Border radius variables
-$border-radius-small: 4px; // Small rounded corners
-$border-radius-medium: 6px; // Medium rounded corners
-$border-radius-large: 12px; // Large rounded corners
-$border-radius-circle: 50%; // Fully circular
-$border-radius-extra-large: 20px; // Extra-large rounded corners
+$border-radius-small: 4px;
+$border-radius-medium: 6px;
+$border-radius-large: 12px;
+$border-radius-circle: 50%;
+$border-radius-extra-large: 20px;
diff --git a/app/src/styles/base/global.scss b/app/src/styles/base/global.scss
new file mode 100644
index 0000000..9b4e1e8
--- /dev/null
+++ b/app/src/styles/base/global.scss
@@ -0,0 +1,3 @@
+section{
+    
+}
\ No newline at end of file
diff --git a/app/src/styles/main.scss b/app/src/styles/main.scss
index 5e46dd4..fe77adb 100644
--- a/app/src/styles/main.scss
+++ b/app/src/styles/main.scss
@@ -1,12 +1,12 @@
 // abstracts
 @use 'abstracts/variables';
 @use 'abstracts/mixins';
-@use 'abstracts/placeholders';
 @use 'abstracts/functions';
 
 // base
 @use 'base/reset';
 @use 'base/typography';
+@use 'base/global';
 @use 'base/base';
 
 // components