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

feat: Add icon color variables for light and dark themes

Browse Source
This commit is contained in:
Vishnu
2025-04-29 14:58:58 +05:30
parent ab5ade7bee
commit 77a6dda068
2 changed files with 121 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -60,6 +60,17 @@ $highlight-secondary-color: #6F42C1;
$highlight-accent-color-dark: #403E6A; $highlight-accent-color-dark: #403E6A;
$highlight-secondary-color-dark: #C4ABF1; $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 // colors
$color1: #A392CD; $color1: #A392CD;
$color2: #7b4cd3; $color2: #7b4cd3;

203
app/src/styles/base/base.scss
View File

@@ -1,139 +1,156 @@
@use "../abstracts/variables" as *; // abstracts/variables.scss @use "../abstracts/variables" as *;
// Light theme styles
[data-theme="light"] { [data-theme="light"] {
// Text and Input colors // text colors
--text-color: #{$text-color}; // Main text color for light theme --text-color: #{$text-color};
--text-disabled: #{$text-disabled}; // Disabled text color --text-disabled: #{$text-disabled};
--input-text-color: #{$input-text-color}; // Input field text color --input-text-color: #{$input-text-color};
--highlight-text-color: #{$highlight-text-color};
// Accent and Highlight colors // background colors
--primary-color: #{$background-color}; // Primary color for light theme --background-color: #{$background-color};
--accent-color: #{$accent-color}; // Primary accent color for light theme --background-color-secondary: #{$background-color-secondary};
--highlight-accent-color: #{$highlight-accent-color}; // Highlight color for light theme --background-color-accent: #{$background-color-accent};
--accent-gradient-color: #{$acent-gradient}; // Primary accent color for light theme --background-color-button: #{$background-color-button};
--background-color-drop-down: #{$background-color-drop-down};
--background-color-input: #{$background-color-input};
--background-color-input-focus: #{$background-color-input-focus};
--background-color-drop-down-gradient: #{$background-color-drop-down-gradient};
--background-color-selected: #{$background-color-selected};
--background-radial-gray-gradient: #{$background-radial-gray-gradient};
// border colors
--border-color: #{$border-color};
--border-color-accent: #{$border-color-accent};
// highlight colors
--highlight-accent-color: #{$highlight-accent-color};
--highlight-secondary-color: #{$highlight-secondary-color};
// icon colors
--icon-default-color: #{$icon-default-color};
--icon-default-color-active: #{$icon-default-color-active};
// old colors
--accent-color: #{$accent-color};
--highlight-accent-color: #{$highlight-accent-color};
--accent-gradient-color: #{$acent-gradient};
--faint-gradient-color: #{$faint-gradient}; --faint-gradient-color: #{$faint-gradient};
--background-color-gray: #{$background-color-gray};
// Background colors --border-color: #{$border-color};
--background-color: #{$background-color}; // Main background color --shadow-main-light: #{$shadow-color};
--background-color-secondary: #{$background-color-secondary}; // Secondary background color --box-shadow-light: 0px 2px 4px var(--shadow-main-light);
--background-color-gray: #{$background-color-gray}; // Secondary background color --box-shadow-medium: 0px 4px 8px var(--shadow-main-light);
--box-shadow-heavy: 0px 8px 16px var(--shadow-main-light);
// Border colors --font-inter: #{$font-inter};
--border-color: #{$border-color}; // Border color for light theme --font-josefin-sans: #{$font-josefin-sans};
--font-poppins: #{$font-poppins};
// Shadow variables --font-roboto: #{$font-roboto};
--shadow-main-light: #{$shadow-color}; // Main shadow color
--box-shadow-light: 0px 2px 4px var(--shadow-main-light); // Light shadow
--box-shadow-medium: 0px 4px 8px var(--shadow-main-light); // Medium shadow
--box-shadow-heavy: 0px 8px 16px var(--shadow-main-light); // Heavy shadow
// Font families
--font-inter: #{$font-inter}; // Inter font family
--font-josefin-sans: #{$font-josefin-sans}; // Josefin Sans font family
--font-poppins: #{$font-poppins}; // Poppins font family
--font-roboto: #{$font-roboto}; // Roboto font family
} }
// Dark theme styles
[data-theme="dark"] { [data-theme="dark"] {
// Text and Input colors // text colors
--text-color: #{$text-color-dark}; // Main text color for dark theme --text-color: #{$text-color-dark};
--text-disabled: #{$text-disabled-dark}; // Disabled text color --text-disabled: #{$text-disabled-dark};
--input-text-color: #{$input-text-color-dark}; // Input field text color --input-text-color: #{$input-text-color-dark};
--highlight-text-color: #{$highlight-text-color-dark};
// Accent and Highlight colors // background colors
--primary-color: #{$highlight-accent-color-dark}; --background-color: #{$background-color-dark};
--accent-color: #{$accent-color-dark}; // Primary accent color for dark theme --background-color-secondary: #{$background-color-secondary-dark};
--highlight-accent-color: #{$highlight-accent-color-dark}; // Highlight color for dark theme --background-color-accent: #{$background-color-accent-dark};
--accent-gradient-color: #{$acent-gradient-dark}; // Primary accent color for light theme --background-color-button: #{$background-color-button-dark};
--background-color-drop-down: #{$background-color-drop-down-dark};
--background-color-input: #{$background-color-input-dark};
--background-color-input-focus: #{$background-color-input-focus-dark};
--background-color-drop-down-gradient: #{$background-color-drop-down-gradient-dark};
--background-color-selected: #{$background-color-selected-dark};
--background-radial-gray-gradient: #{$background-radial-gray-gradient-dark};
// border colors
--border-color: #{$border-color};
--border-color-accent: #{$border-color-accent-dark};
// highlight colors
--highlight-accent-color: #{$highlight-accent-color-dark};
--highlight-secondary-color: #{$highlight-secondary-color-dark};
// icon colors
--icon-default-color: #{$icon-default-color-dark};
--icon-default-color-active: #{$icon-default-color-active-dark};
// old colors
--accent-color: #{$accent-color-dark};
--highlight-accent-color: #{$highlight-accent-color-dark};
--accent-gradient-color: #{$acent-gradient-dark};
--faint-gradient-color: #{$faint-gradient-dark}; --faint-gradient-color: #{$faint-gradient-dark};
--background-color-gray: #{$background-color-gray-dark};
// Background colors --border-color: #{$border-color-dark};
--background-color: #{$background-color-dark}; // Main background color --shadow-main-dark: #{$shadow-color};
--background-color-secondary: #{$background-color-secondary-dark}; // Secondary background color --box-shadow-light: 0px 2px 4px var(--shadow-main-dark);
--background-color-gray: #{$background-color-gray-dark}; // Secondary background color --box-shadow-medium: 0px 4px 8px var(--shadow-main-dark);
--box-shadow-heavy: 0px 8px 16px var(--shadow-main-dark);
// Border colors --font-inter: #{$font-inter};
--border-color: #{$border-color-dark}; // Border color for dark theme --font-josefin-sans: #{$font-josefin-sans};
--font-poppins: #{$font-poppins};
// Shadow variables --font-roboto: #{$font-roboto};
--shadow-main-dark: #{$shadow-color}; // Main shadow color
--box-shadow-light: 0px 2px 4px var(--shadow-main-dark); // Light shadow
--box-shadow-medium: 0px 4px 8px var(--shadow-main-dark); // Medium shadow
--box-shadow-heavy: 0px 8px 16px var(--shadow-main-dark); // Heavy shadow
// Font families
--font-inter: #{$font-inter}; // Inter font family
--font-josefin-sans: #{$font-josefin-sans}; // Josefin Sans font family
--font-poppins: #{$font-poppins}; // Poppins font family
--font-roboto: #{$font-roboto}; // Roboto font family
} }
// Root container styles
#root { #root {
height: 100vh; // Full viewport height height: 100vh;
width: 100vw; // Full viewport width width: 100vw;
overflow: hidden; // Prevent scrollbars overflow: hidden;
background-color: var(--background-color-gray); background-color: var(--background-color-gray);
} }
// Root overlay styles
#root-over { #root-over {
position: fixed; // Fix overlay to the viewport position: fixed;
top: 0; // Align to the top top: 0;
left: 0; // Align to the left left: 0;
z-index: 99; // Ensure high stacking order z-index: 99;
} }
body { body {
background: var(--background-color); background: var(--background-color);
--font-size-tiny: #{$tiny};
--font-size-small: #{$small};
--font-size-regular: #{$regular};
--font-size-large: #{$large};
--font-size-xlarge: #{$xlarge};
--font-size-xxlarge: #{$xxlarge};
--font-size-xxxlarge: #{$xxxlarge};
--font-weight-regular: #{$regular-weight};
--font-weight-medium: #{$medium-weight};
--font-weight-bold: #{$bold-weight};
/* Font Sizes */ // colors
--font-size-tiny: #{$tiny}; // Extra small text --color1: #{$color1};
--font-size-small: #{$small}; // Small text --color2: #{$color2};
--font-size-regular: #{$regular}; // Default text size --color3: #{$color3};
--font-size-large: #{$large}; // Large text size --color4: #{$color4};
--font-size-xlarge: #{$xlarge}; // Extra large text size --color5: #{$color5};
--font-size-xxlarge: #{$xxlarge}; // Double extra large text size
--font-size-xxxlarge: #{$xxxlarge}; // Triple extra large text size
/* Font Weights */
--font-weight-regular: #{$regular-weight}; // Regular font weight
--font-weight-medium: #{$medium-weight}; // Medium font weight
--font-weight-bold: #{$bold-weight}; // Bold font weight
} }
/* Apply custom scrollbar styles globally */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 8px;
/* Width of the scrollbar */
height: 8px; height: 8px;
/* Height for horizontal scrollbars */
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: transparent; background: transparent;
/* Background of the scrollbar track */
border-radius: 4px; border-radius: 4px;
/* Rounded corners */
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: var(--accent-color); background: var(--accent-color);
/* Scrollbar handle color */
border-radius: 4px; border-radius: 4px;
/* Rounded corners */
border: 2px solid var(--primary-color); border: 2px solid var(--primary-color);
/* Padding around the scrollbar handle */
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: var(--accent-color); background: var(--accent-color);
/* Handle color on hover */
} }
::-webkit-scrollbar-corner { ::-webkit-scrollbar-corner {
background: transparent; background: transparent;
/* Remove corner styling for scrollable containers */
} }