feat: Remove unused placeholders styles and add global section styles
This commit is contained in:
parent
d7f1c5224d
commit
2dc076e9c2
|
|
@ -1,6 +0,0 @@
|
|||
// center a element
|
||||
%centered {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
section{
|
||||
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue