first commit

app/src/styles/abstracts/functions.scss

@@ -0,0 +1,5 @@
+// get rem from pixels
+
+@function get_rem($px) {
+  @return calc($px / 16 * 1rem);
+}

app/src/styles/abstracts/mixins.scss

@@ -0,0 +1,33 @@
+@mixin flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@mixin flex-space-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+// Array of base colors
+$colors: (
+  #f5550b,
+  #1bac1b,
+  #0099ff,
+  #d4c927,
+  #8400ff, 
+  #13e9b3, 
+  #df1dcf 
+);
+
+@mixin gradient-by-child($index) {
+  // Get the color based on the index passed
+  $base-color: nth($colors, $index);
+  // Apply gradient using the same color with different alpha values
+  background: linear-gradient(
+    144.19deg,
+    rgba($base-color, 0.2) 16.62%,  // 20% opacity
+    rgba($base-color, 0.08) 85.81%   // 80% opacity
+  );
+}

app/src/styles/abstracts/variables.scss

@@ -0,0 +1,195 @@
+@use "functions";
+
+@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");
+
+// new variables
+
+// text colors
+// ---------- light mode ----------
+$text-color: #2b3344;
+$text-disabled: #b7b7c6;
+$input-text-color: #595965;
+$highlight-text-color: #6f42c1;
+$text-button-color: #f3f3fd;
+
+// ---------- dark mode ----------
+$text-color-dark: #f3f3fd;
+$text-disabled-dark: #6f6f7a;
+$input-text-color-dark: #b5b5c8;
+$highlight-text-color-dark: #d2baff;
+$text-button-color-dark: #f3f3fd;
+
+// background colors
+// ---------- light mode ----------
+$background-color: linear-gradient(-45deg, #fcfdfd71 0%, #fcfdfd79 100%);
+$background-color-solid-gradient: linear-gradient(
+  -45deg,
+  #fcfdfd 0%,
+  #fcfdfd 100%
+);
+$background-color-solid: #fcfdfd;
+$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%
+);
+
+// ---------- dark mode ----------
+$background-color-dark: linear-gradient(-45deg, #333333b3 0%, #2d2437b3 100%);
+$background-color-solid-gradient-dark: linear-gradient(
+  -45deg,
+  #333333 0%,
+  #2d2437 100%
+);
+$background-color-solid-dark: #19191d;
+$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;
+$input-border-color: #d5dddd80;
+$border-color-accent: #6f42c1;
+
+// ---------- dark mode ----------
+$border-color-dark: #564b69;
+$input-border-color-dark: #d5dddd80;
+$border-color-accent-dark: #6f42c1;
+
+// highlight colors
+// ---------- light mode ----------
+$highlight-accent-color: #e0dfff;
+$highlight-secondary-color: #6f42c1;
+
+// ---------- dark mode ----------
+$highlight-accent-color-dark: #403e6a;
+$highlight-secondary-color-dark: #c4abf1;
+
+// icon colors
+// ---------- light mode ----------
+$icon-default-color: #6f42c1;
+$icon-default-color-hover: #7f4ddb;
+$icon-default-color-active: #f2f2f7;
+
+// ---------- dark mode ----------
+$icon-default-color-dark: #6f42c1;
+$icon-default-color-hover-dark: #7f4ddb;
+$icon-default-color-active-dark: #f2f2f7;
+
+// colors
+$color1: #a392cd;
+$color2: #7b4cd3;
+$color3: #b186ff;
+$color4: #8752e8;
+$color5: #c7a8ff;
+
+// log indication colors
+// ------------ text -------------
+$log-default-text-color: #6f42c1;
+$log-info-text-color: #1773fd;
+$log-warn-text-color: #f3a50c;
+$log-error-text-color: #fc230f;
+$log-success-text-color: #23a84f;
+// ----------- dark ---------------
+$log-default-text-color-dark: #b18ef1;
+$log-info-text-color-dark: #7eb0fa;
+$log-warn-text-color-dark: #ffaa00;
+$log-error-text-color-dark: #ff887d;
+$log-success-text-color-dark: #43ff81;
+
+// ------------ background -------------
+$log-default-backgroung-color: #6e42c133;
+$log-info-background-color: #1773fd5d;
+$log-warn-background-color: #f3a50c33;
+$log-error-background-color: #fc230f33;
+$log-success-background-color: #0ef75b33;
+
+// old variables
+$accent-color: #6f42c1;
+$accent-color-dark: #c4abf1;
+
+$background-color-gray: #f3f3f3;
+$background-color-gray-dark: #232323;
+
+$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%
+);
+
+$font-inter: "Inter", sans-serif;
+$font-josefin-sans: "Josefin Sans", sans-serif;
+$font-poppins: "Poppins", sans-serif;
+$font-roboto: "Roboto", sans-serif;
+
+$tiny: 0.625rem;
+$small: 0.75rem;
+$regular: 0.8rem;
+$large: 1rem;
+$xlarge: 1.125rem;
+$xxlarge: 1.5rem;
+$xxxlarge: 2rem;
+
+$thin-weight: 300;
+$regular-weight: 400;
+$medium-weight: 500;
+$bold-weight: 600;
+
+$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;
+
+$box-shadow-light: 0px 2px 4px $shadow-color;
+$box-shadow-medium: 0px 4px 8px $shadow-color;
+$box-shadow-heavy: 0px 8px 16px $shadow-color;
+
+$border-radius-small: 4px;
+$border-radius-medium: 6px;
+$border-radius-large: 12px;
+$border-radius-circle: 50%;
+$border-radius-xlarge: 16px;
+$border-radius-extra-large: 20px;
+$border-radius-xxx: 30px;