feat: Add icon color variables for light and dark themes
This commit is contained in:
parent
ab5ade7bee
commit
77a6dda068
|
|
@ -60,6 +60,17 @@ $highlight-secondary-color: #6F42C1;
|
|||
$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;
|
||||
|
|
|
|||
|
|
@ -1,139 +1,156 @@
|
|||
@use "../abstracts/variables" as *; // abstracts/variables.scss
|
||||
@use "../abstracts/variables" as *;
|
||||
|
||||
// Light theme styles
|
||||
[data-theme="light"] {
|
||||
// Text and Input colors
|
||||
--text-color: #{$text-color}; // Main text color for light theme
|
||||
--text-disabled: #{$text-disabled}; // Disabled text color
|
||||
--input-text-color: #{$input-text-color}; // Input field text color
|
||||
// text colors
|
||||
--text-color: #{$text-color};
|
||||
--text-disabled: #{$text-disabled};
|
||||
--input-text-color: #{$input-text-color};
|
||||
--highlight-text-color: #{$highlight-text-color};
|
||||
|
||||
// Accent and Highlight colors
|
||||
--primary-color: #{$background-color}; // Primary color for light theme
|
||||
--accent-color: #{$accent-color}; // Primary accent color for light theme
|
||||
--highlight-accent-color: #{$highlight-accent-color}; // Highlight color for light theme
|
||||
--accent-gradient-color: #{$acent-gradient}; // Primary accent color for light theme
|
||||
// background colors
|
||||
--background-color: #{$background-color};
|
||||
--background-color-secondary: #{$background-color-secondary};
|
||||
--background-color-accent: #{$background-color-accent};
|
||||
--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};
|
||||
|
||||
// Background colors
|
||||
--background-color: #{$background-color}; // Main background color
|
||||
--background-color-secondary: #{$background-color-secondary}; // Secondary background color
|
||||
--background-color-gray: #{$background-color-gray}; // Secondary background color
|
||||
|
||||
// Border colors
|
||||
--border-color: #{$border-color}; // Border color for light theme
|
||||
|
||||
// Shadow variables
|
||||
--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
|
||||
--background-color-gray: #{$background-color-gray};
|
||||
--border-color: #{$border-color};
|
||||
--shadow-main-light: #{$shadow-color};
|
||||
--box-shadow-light: 0px 2px 4px var(--shadow-main-light);
|
||||
--box-shadow-medium: 0px 4px 8px var(--shadow-main-light);
|
||||
--box-shadow-heavy: 0px 8px 16px var(--shadow-main-light);
|
||||
--font-inter: #{$font-inter};
|
||||
--font-josefin-sans: #{$font-josefin-sans};
|
||||
--font-poppins: #{$font-poppins};
|
||||
--font-roboto: #{$font-roboto};
|
||||
}
|
||||
|
||||
// Dark theme styles
|
||||
[data-theme="dark"] {
|
||||
// Text and Input colors
|
||||
--text-color: #{$text-color-dark}; // Main text color for dark theme
|
||||
--text-disabled: #{$text-disabled-dark}; // Disabled text color
|
||||
--input-text-color: #{$input-text-color-dark}; // Input field text color
|
||||
// text colors
|
||||
--text-color: #{$text-color-dark};
|
||||
--text-disabled: #{$text-disabled-dark};
|
||||
--input-text-color: #{$input-text-color-dark};
|
||||
--highlight-text-color: #{$highlight-text-color-dark};
|
||||
|
||||
// Accent and Highlight colors
|
||||
--primary-color: #{$highlight-accent-color-dark};
|
||||
--accent-color: #{$accent-color-dark}; // Primary accent color for dark theme
|
||||
--highlight-accent-color: #{$highlight-accent-color-dark}; // Highlight color for dark theme
|
||||
--accent-gradient-color: #{$acent-gradient-dark}; // Primary accent color for light theme
|
||||
// background colors
|
||||
--background-color: #{$background-color-dark};
|
||||
--background-color-secondary: #{$background-color-secondary-dark};
|
||||
--background-color-accent: #{$background-color-accent-dark};
|
||||
--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};
|
||||
|
||||
// Background colors
|
||||
--background-color: #{$background-color-dark}; // Main background color
|
||||
--background-color-secondary: #{$background-color-secondary-dark}; // Secondary background color
|
||||
--background-color-gray: #{$background-color-gray-dark}; // Secondary background color
|
||||
|
||||
// Border colors
|
||||
--border-color: #{$border-color-dark}; // Border color for dark theme
|
||||
|
||||
// Shadow variables
|
||||
--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
|
||||
--background-color-gray: #{$background-color-gray-dark};
|
||||
--border-color: #{$border-color-dark};
|
||||
--shadow-main-dark: #{$shadow-color};
|
||||
--box-shadow-light: 0px 2px 4px var(--shadow-main-dark);
|
||||
--box-shadow-medium: 0px 4px 8px var(--shadow-main-dark);
|
||||
--box-shadow-heavy: 0px 8px 16px var(--shadow-main-dark);
|
||||
--font-inter: #{$font-inter};
|
||||
--font-josefin-sans: #{$font-josefin-sans};
|
||||
--font-poppins: #{$font-poppins};
|
||||
--font-roboto: #{$font-roboto};
|
||||
}
|
||||
|
||||
// Root container styles
|
||||
#root {
|
||||
height: 100vh; // Full viewport height
|
||||
width: 100vw; // Full viewport width
|
||||
overflow: hidden; // Prevent scrollbars
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
background-color: var(--background-color-gray);
|
||||
}
|
||||
|
||||
// Root overlay styles
|
||||
#root-over {
|
||||
position: fixed; // Fix overlay to the viewport
|
||||
top: 0; // Align to the top
|
||||
left: 0; // Align to the left
|
||||
z-index: 99; // Ensure high stacking order
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
body {
|
||||
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 */
|
||||
--font-size-tiny: #{$tiny}; // Extra small text
|
||||
--font-size-small: #{$small}; // Small text
|
||||
--font-size-regular: #{$regular}; // Default text size
|
||||
--font-size-large: #{$large}; // Large text size
|
||||
--font-size-xlarge: #{$xlarge}; // Extra large text size
|
||||
--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
|
||||
// colors
|
||||
--color1: #{$color1};
|
||||
--color2: #{$color2};
|
||||
--color3: #{$color3};
|
||||
--color4: #{$color4};
|
||||
--color5: #{$color5};
|
||||
}
|
||||
|
||||
/* Apply custom scrollbar styles globally */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
/* Width of the scrollbar */
|
||||
height: 8px;
|
||||
/* Height for horizontal scrollbars */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
/* Background of the scrollbar track */
|
||||
border-radius: 4px;
|
||||
/* Rounded corners */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--accent-color);
|
||||
/* Scrollbar handle color */
|
||||
border-radius: 4px;
|
||||
/* Rounded corners */
|
||||
border: 2px solid var(--primary-color);
|
||||
/* Padding around the scrollbar handle */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--accent-color);
|
||||
/* Handle color on hover */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
/* Remove corner styling for scrollable containers */
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue