Dwinzo-Beta
/
Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Remove unused placeholders styles and add global section styles

This commit is contained in:
Vishnu 2025-04-24 15:43:38 +05:30
parent d7f1c5224d
commit 2dc076e9c2
4 changed files with 130 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/src/styles/abstracts/placeholders.scss
View File

@ -1,6 +0,0 @@
// center a element
%centered {
display: flex;
justify-content: center;
align-items: center;
}

229
app/src/styles/abstracts/variables.scss
View File

@ -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"; @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"); @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
// Colors
// ========================================================================
// Text colors // text colors
$text-color: #2b3344; // Primary text color // ---------- light mode ----------
$text-disabled: #b7b7c6; // Disabled text color
$input-text-color: #595965; // Input field text color
$text-color-dark: #f3f3fd; // Primary text color for dark mode // $text-color: #2b3344;
$text-disabled-dark: #6f6f7a; // Disabled text color for dark mode // $text-disabled: #b7b7c6;
$input-text-color-dark: #b5b5c8; // Input field text color for dark mode // $input-text-color: #595965;
// $highlight-text-color: #6f42c1;
// Accent colors // ---------- dark mode ----------
$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
// Background colors // $text-color-dark: #f3f3fd;
$background-color: #fcfdfd; // Main background color // $text-disabled-dark: #6f6f7a;
$background-color-dark: #19191d; // Main background color for dark mode // $input-text-color-dark: #b5b5c8;
$background-color-secondary: #e1e0ff80; // Secondary background color // $highlight-text-color-dark: #B392F0;
$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
// Border colors // background colors
$border-color: #e0dfff; // Default border color // ---------- light mode ----------
$border-color-dark: #403e6a; // Border color for dark mode
// Shadow color // $background-color: linear-gradient(-45deg, #FCFDFDCC 0%, #FCFDFD99 100%);
$shadow-color: #3c3c431a; // Shadow base color for light and dark mode // $background-color-secondary: #FCFDFD4D;
$shadow-color-dark: #8f8f8f1a; // Shadow base color for light and dark mode // $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 // ---------- dark mode ----------
$acent-gradient-dark: linear-gradient(
90deg, // $background-color-dark: linear-gradient(-45deg, #333333B3 0%, #2D2437B3 100%);
#b392f0 0%, // $background-color-secondary-dark: #19191D99;
#a676ff 100% // $background-color-accent-dark: #6f42c1;
); // Dark mode accent gradient // $background-color-button-dark: #6f42c1;
$acent-gradient: linear-gradient( // $background-color-drop-down-dark: #50505080;
90deg, // $background-color-input-dark: #FFFFFF33;
#6f42c1 0%, // $background-color-input-focus-dark: #333333;
#925df3 100% // $background-color-drop-down-gradient-dark: linear-gradient(-45deg, #8973B166 0%, #53427366 100%);
); // Light mode accent gradient // $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: radial-gradient(circle, #bfe0f8 0%, #e9ebff 46%, #e2acff 100%);
$faint-gradient-dark: radial-gradient(circle, #31373b 0%, #48494b 46%, #52415c 100%); $faint-gradient-dark: radial-gradient(circle, #31373b 0%, #48494b 46%, #52415c 100%);
// ======================================================================== $font-inter: "Inter", sans-serif;
// Typography $font-josefin-sans: "Josefin Sans", sans-serif;
// ======================================================================== $font-poppins: "Poppins", sans-serif;
$font-roboto: "Roboto", sans-serif;
// Font Family Variables $tiny: 0.625rem;
$font-inter: "Inter", sans-serif; // Inter font $small: 0.75rem;
$font-josefin-sans: "Josefin Sans", sans-serif; // Josefin Sans font $regular: 0.8rem;
$font-poppins: "Poppins", sans-serif; // Poppins font $large: 1rem;
$font-roboto: "Roboto", sans-serif; // Roboto font $xlarge: 1.125rem;
$xxlarge: 1.5rem;
$xxxlarge: 2rem;
// Font sizes (converted to rem using a utility function) $thin-weight: 300;
$tiny: 0.625rem; // Extra small text (10px) $regular-weight: 400;
$small: 0.75rem; // Small text (12px) $medium-weight: 500;
$regular: 0.8rem; // Default text size (14px) $bold-weight: 600;
$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)
// Font weights $z-index-drei-html: 1;
$thin-weight: 300; // Regular font weight $z-index-default: 1;
$regular-weight: 400; // Regular font weight $z-index-marketplace: 2;
$medium-weight: 500; // Medium font weight $z-index-tools: 3;
$bold-weight: 600; // Bold font weight $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;
// Z-Index Levels $box-shadow-medium: 0px 4px 8px $shadow-color;
// ======================================================================== $box-shadow-heavy: 0px 8px 16px $shadow-color;
// Z-index variables for layering $border-radius-small: 4px;
$z-index-drei-html: 1; // For drei's Html components $border-radius-medium: 6px;
$z-index-default: 1; // For drei's Html components $border-radius-large: 12px;
$z-index-marketplace: 2; // For drei's Html components $border-radius-circle: 50%;
$z-index-tools: 3; // For drei's Html components $border-radius-extra-large: 20px;
$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

3
app/src/styles/base/global.scss Normal file
View File

@ -0,0 +1,3 @@
section{
}

2
app/src/styles/main.scss
View File

@ -1,12 +1,12 @@
// abstracts // abstracts
@use 'abstracts/variables'; @use 'abstracts/variables';
@use 'abstracts/mixins'; @use 'abstracts/mixins';
@use 'abstracts/placeholders';
@use 'abstracts/functions'; @use 'abstracts/functions';
// base // base
@use 'base/reset'; @use 'base/reset';
@use 'base/typography'; @use 'base/typography';
@use 'base/global';
@use 'base/base'; @use 'base/base';
// components // components