Skip to content

Commit

Permalink
FIXED: Color mismatch issue in 'Light' & 'Dark' theme.
Browse files Browse the repository at this point in the history
  • Loading branch information
@SagnikGanguly96
SagnikGanguly96 committed Jan 2, 2023
1 parent 2ce10d3 commit f747ceb
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 67 deletions.
99 changes: 54 additions & 45 deletions src/css/themes/dark.css
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,60 @@
/*
* Copyright (c) 2022 SGNetworks. All rights reserved.
* Copyright (c) 2022-2023 SGNetworks. All rights reserved.
*
* The software is an exclusive copyright of "SGNetworks" and is provided as is exclusively with only "USAGE" access. "Modification", "Alteration", "Re-distribution" is completely prohibited.
* VIOLATING THE ABOVE TERMS IS A PUNISHABLE OFFENSE WHICH MAY LEAD TO LEGAL CONSEQUENCES.
*/

:root {
--sgn-background: hsl(0, 0%, 0%);
--sgn-text-primary: hsl(0, 0%, 100%);
--sgn-text-secondary: hsl(0, 0%, 60%);

--sgn-accent-background: hsl(0, 0%, 0%);

--sgn-accent-background-secondary: hsl(0, 0%, 5%);
--sgn-accent-hud: hsl(0, 0%, 0%);
--sgn-accent-hud-shade: hsl(0, 0%, 0%);
--sgn-accent-primary: hsl(218, 89%, 51%);
--sgn-accent-primary-active: hsl(218, 89%, 31%);

/*--sgn-bg-light4: hsl(0, 0%, 0%);
--sgn-bg-light3: hsl(0, 0%, 0%);
--sgn-hud-primary: hsl(0, 0%, 0%);*/
--sgn-text-primary-active: hsl(0, 0%, 0%);
--sgn-text-secondary-alt: hsl(0, 0%, 0%);
--sgn-text-secondary-light: hsl(0, 0%, 0%);
--sgn-semi-transparent-light: hsl(0, 0%, 0%);
--sgn-accent-primary-active-dark: hsl(218, 89%, 36%);
--sgn-accent-primary-alt: hsl(180, 72%, 52%);
--sgn-accent-primary-dark: hsl(215, 100%, 15%);

--sgn-accent-primary-hover: hsl(218, 89%, 60%);
--sgn-accent-primary-inactive: hsl(218, 89%, 70%);
--sgn-accent-primary-light: hsl(215, 100%, 68%);

--sgn-shadow-light: hsla(215, 100%, 48%, .5);
--sgn-accent-primary-text: hsl(0, 0%, 100%);
--sgn-accent-secondary: hsl(0, 0%, 30%);

--sgn-accent-secondary-dark: hsl(0, 0%, 20%);
--sgn-accent-secondary-hover: hsl(0, 0%, 90%);

--sgn-accent-secondary-light: hsl(0, 0%, 30%);
--sgn-background: hsl(0, 0%, 0%);
--sgn-border-light: hsl(0, 0%, 15%);
--sgn-danger: hsl(0, 100%, 50%);
--sgn-danger-dark: hsl(0, 72%, 33%);
--sgn-danger-light: hsl(0, 100%, 70%);
--sgn-danger-lightest: hsl(0, 100%, 95%);

--sgn-accent-primary: hsl(215, 100%, 48%);
--sgn-accent-primary-active: hsl(225, 99%, 57%);
--sgn-accent-primary-light: hsl(215, 100%, 68%);
--sgn-accent-primary-dark: hsl(215, 100%, 15%);
--sgn-accent-primary-text: hsl(0, 0%, 100%);
--sgn-accent-primary-alt: hsl(180, 72%, 52%);
--sgn-gradient-danger: linear-gradient(to right, var(--sgn-danger) 0%, var(--sgn-danger-light) 100%);
--sgn-gradient-danger-double-width: linear-gradient(to right, var(--sgn-danger) 0%, var(--sgn-danger-light) 50%, var(--sgn-danger) 100%);

--sgn-gradient-info: linear-gradient(to right, var(--sgn-info) 0%, var(--sgn-info-light) 100%);
--sgn-gradient-info-double-width: linear-gradient(to right, var(--sgn-info) 0%, var(--sgn-info-light) 50%, var(--sgn-info) 100%);
--sgn-gradient-primary: linear-gradient(to right, var(--sgn-accent-primary) 0%, var(--sgn-accent-primary-alt) 100%);
--sgn-gradient-primary-double-width: linear-gradient(to right, var(--sgn-accent-primary) 0%, var(--sgn-accent-primary-alt) 50%, var(--sgn-accent-primary) 100%);

--sgn-gradient-secondary: linear-gradient(to right, var(--sgn-secondary) 0%, var(--sgn-secondary-light) 100%);
--sgn-gradient-secondary-double-width: linear-gradient(to right, var(--sgn-secondary) 0%, var(--sgn-secondary-light) 50%, var(--sgn-secondary) 100%);
--sgn-gradient-success: linear-gradient(to right, var(--sgn-success) 0%, var(--sgn-success-light) 100%);

--sgn-accent-secondary: hsl(226, 15%, 17%);
--sgn-accent-secondary-light: hsl(226, 15%, 30%);
--sgn-gradient-success-double-width: linear-gradient(to right, var(--sgn-success) 0%, var(--sgn-success-light) 50%, var(--sgn-success) 100%);
--sgn-gradient-warning: linear-gradient(to right, var(--sgn-warning) 0%, var(--sgn-warning-light) 100%);
--sgn-gradient-warning-double-width: linear-gradient(to right, var(--sgn-warning) 0%, var(--sgn-warning-light) 50%, var(--sgn-warning) 100%);

--sgn-info: hsl(190, 100%, 40%);
--sgn-info-light: hsl(190, 100%, 60%);
--sgn-info-lightest: hsl(190, 100%, 95%);

--sgn-primary: hsl(220, 100%, 50%);
--sgn-primary-light: hsl(220, 100%, 70%);
Expand All @@ -47,34 +64,26 @@
--sgn-secondary-light: hsl(230, 15%, 30%);
--sgn-secondary-lightest: hsl(230, 15%, 95%);

--sgn-semi-transparent-light: hsl(0, 0%, 50%, .5);
--sgn-shadow-light: hsla(215, 100%, 48%, .5);
--sgn-success: hsl(130, 100%, 20%);
--sgn-success-light: hsl(130, 100%, 60%);
--sgn-success-light: hsl(130, 50%, 70%);

--sgn-success-lightest: hsl(130, 100%, 95%);
--sgn-text-primary: hsl(0, 0%, 100%);

--sgn-info: hsl(190, 100%, 40%);
--sgn-info-light: hsl(190, 100%, 60%);
--sgn-info-lightest: hsl(190, 100%, 95%);
--sgn-text-primary-active: hsl(0, 0%, 0%);
--sgn-text-primary-alt: hsl(0, 0%, 60%);

--sgn-warning: hsl(45, 100%, 40%);
--sgn-warning-light: hsl(45, 100%, 60%);
--sgn-warning-lightest: hsl(45, 100%, 95%);
--sgn-text-primary-inactive: hsla(0, 0%, 60%, 1);
--sgn-text-primary-inactive-light: hsla(0, 0%, 85%, 1);

--sgn-danger: hsl(0, 100%, 50%);
--sgn-danger-light: hsl(0, 100%, 60%);
--sgn-danger-lightest: hsl(0, 100%, 95%);
--sgn-danger-dark: hsl(0, 72%, 33%);
--sgn-text-secondary: hsl(0, 0%, 60%);
--sgn-text-secondary-alt: hsl(0, 0%, 0%);

--sgn-gradient-primary: linear-gradient(to right, var(--sgn-accent-primary) 0%, var(--sgn-accent-primary-alt) 100%);
--sgn-gradient-secondary: linear-gradient(to right, var(--sgn-secondary) 0%, var(--sgn-secondary-light) 100%);
--sgn-gradient-success: linear-gradient(to right, var(--sgn-success) 0%, var(--sgn-success-light) 100%);
--sgn-gradient-info: linear-gradient(to right, var(--sgn-info) 0%, var(--sgn-info-light) 100%);
--sgn-gradient-warning: linear-gradient(to right, var(--sgn-warning) 0%, var(--sgn-warning-light) 100%);
--sgn-gradient-danger: linear-gradient(to right, var(--sgn-danger) 0%, var(--sgn-danger-light) 100%);
--sgn-text-secondary-light: hsl(0, 0%, 100%);
--sgn-warning: hsl(45, 100%, 40%);

--sgn-gradient-primary-double-width: linear-gradient(to right, var(--sgn-accent-primary) 0%, var(--sgn-accent-primary-alt) 50%, var(--sgn-accent-primary) 100%);
--sgn-gradient-secondary-double-width: linear-gradient(to right, var(--sgn-secondary) 0%, var(--sgn-secondary-light) 50%, var(--sgn-secondary) 100%);
--sgn-gradient-success-double-width: linear-gradient(to right, var(--sgn-success) 0%, var(--sgn-success-light) 50%, var(--sgn-success) 100%);
--sgn-gradient-info-double-width: linear-gradient(to right, var(--sgn-info) 0%, var(--sgn-info-light) 50%, var(--sgn-info) 100%);
--sgn-gradient-warning-double-width: linear-gradient(to right, var(--sgn-warning) 0%, var(--sgn-warning-light) 50%, var(--sgn-warning) 100%);
--sgn-gradient-danger-double-width: linear-gradient(to right, var(--sgn-danger) 0%, var(--sgn-danger-light) 50%, var(--sgn-danger) 100%);
}
--sgn-warning-light: hsl(45, 100%, 70%);
--sgn-warning-lightest: hsl(45, 100%, 95%);
}
53 changes: 31 additions & 22 deletions src/css/themes/light.css
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,45 @@
/*
* Copyright (c) 2022 SGNetworks. All rights reserved.
* Copyright (c) 2022-2023 SGNetworks. All rights reserved.
*
* The software is an exclusive copyright of "SGNetworks" and is provided as is exclusively with only "USAGE" access. "Modification", "Alteration", "Re-distribution" is completely prohibited.
* VIOLATING THE ABOVE TERMS IS A PUNISHABLE OFFENSE WHICH MAY LEAD TO LEGAL CONSEQUENCES.
*/

:root {
--sgn-accent-background: hsl(0, 0%, 100%);

--sgn-accent-background-secondary: hsl(0, 0%, 95%);
--sgn-accent-hud: hsl(0, 0%, 100%);

--sgn-accent-hud-shade: hsl(215, 100%, 15%);
--sgn-accent-primary: hsl(215, 100%, 48%);
--sgn-accent-primary-active: hsl(225, 99%, 57%);
--sgn-accent-primary-alt: hsl(180, 72%, 52%);
--sgn-accent-primary: hsl(218, 89%, 51%);
--sgn-accent-primary-active: hsl(218, 89%, 31%);

/*--sgn-bg-light4: hsl(0, 0%, 0%);
--sgn-bg-light3: hsl(0, 0%, 0%);
--sgn-hud-primary: hsl(0, 0%, 0%);*/
--sgn-accent-primary-active-dark: hsl(218, 89%, 36%);
--sgn-accent-primary-alt: hsl(180, 72%, 52%);
--sgn-accent-primary-dark: hsl(215, 100%, 15%);

--sgn-accent-primary-hover: hsl(218, 89%, 60%);
--sgn-accent-primary-inactive: hsl(218, 89%, 70%);
--sgn-accent-primary-light: hsl(215, 100%, 68%);
--sgn-accent-primary-text: hsl(0, 0%, 100%);
--sgn-accent-secondary: hsl(226, 15%, 17%);

--sgn-accent-primary-text: hsl(0, 0%, 100%);
--sgn-accent-secondary: hsl(0, 0%, 30%);

--sgn-accent-secondary-light: hsl(226, 15%, 30%);
--sgn-accent-secondary-dark: hsl(0, 0%, 20%);
--sgn-accent-secondary-hover: hsl(0, 0%, 90%);

--sgn-accent-secondary-light: hsl(0, 0%, 30%);
--sgn-background: hsl(0, 0%, 100%);

--sgn-border-light: hsl(0, 0%, 85%);
--sgn-danger: hsl(0, 100%, 50%);
--sgn-danger-dark: hsl(0, 72%, 33%);
--sgn-danger-light: hsl(0, 100%, 70%);
--sgn-danger-lightest: hsl(0, 100%, 95%);
--sgn-gradient-danger: linear-gradient(to right, var(--sgn-danger) 0%, var(--sgn-danger-light) 100%);

--sgn-gradient-danger: linear-gradient(to right, var(--sgn-danger) 0%, var(--sgn-danger-light) 100%);
--sgn-gradient-danger-double-width: linear-gradient(to right, var(--sgn-danger) 0%, var(--sgn-danger-light) 50%, var(--sgn-danger) 100%);
--sgn-gradient-info: linear-gradient(to right, var(--sgn-info) 0%, var(--sgn-info-light) 100%);


--sgn-gradient-info: linear-gradient(to right, var(--sgn-info) 0%, var(--sgn-info-light) 100%);
--sgn-gradient-info-double-width: linear-gradient(to right, var(--sgn-info) 0%, var(--sgn-info-light) 50%, var(--sgn-info) 100%);
--sgn-gradient-primary: linear-gradient(to right, var(--sgn-accent-primary) 0%, var(--sgn-accent-primary-alt) 100%);
--sgn-gradient-primary-double-width: linear-gradient(to right, var(--sgn-accent-primary) 0%, var(--sgn-accent-primary-alt) 50%, var(--sgn-accent-primary) 100%);
Expand All @@ -62,19 +63,27 @@
--sgn-secondary: hsl(230, 15%, 20%);
--sgn-secondary-light: hsl(230, 15%, 30%);
--sgn-secondary-lightest: hsl(230, 15%, 95%);
--sgn-semi-transparent-light: hsl(0, 0%, 0%);

--sgn-semi-transparent-light: hsl(0, 0%, 50%, .5);
--sgn-shadow-light: hsla(0, 0%, 0%, .2);
--sgn-success: hsl(130, 100%, 20%);
--sgn-success-light: hsl(130, 100%, 60%);
--sgn-success-light: hsl(130, 50%, 70%);

--sgn-success-lightest: hsl(130, 100%, 95%);
--sgn-text-primary: hsl(0, 0%, 10%);
--sgn-text-primary-active: hsl(0, 0%, 0%);

--sgn-text-secondary: hsl(0, 0%, 45%);
--sgn-text-secondary-alt: hsl(0, 0%, 0%);
--sgn-text-secondary-light: hsl(0, 0%, 0%);
--sgn-text-primary-active: hsl(0, 0%, 30%);
--sgn-text-primary-alt: hsl(0, 0%, 40%);

--sgn-text-primary-inactive: hsla(0, 0%, 60%, 1);
--sgn-text-primary-inactive-light: hsla(0, 0%, 85%, 1);

--sgn-text-secondary: hsl(0, 0%, 40%);
--sgn-text-secondary-alt: hsl(0, 0%, 5%);

--sgn-text-secondary-light: hsl(0, 0%, 100%);
--sgn-warning: hsl(45, 100%, 40%);
--sgn-warning-light: hsl(45, 100%, 60%);

--sgn-warning-light: hsl(45, 100%, 70%);
--sgn-warning-lightest: hsl(45, 100%, 95%);
}

0 comments on commit f747ceb

Please sign in to comment.