From f747ceba3133fa1985264a68e42a038c8e377ed7 Mon Sep 17 00:00:00 2001 From: Sagnik Ganguly Date: Mon, 2 Jan 2023 16:17:34 +0530 Subject: [PATCH] FIXED: Color mismatch issue in 'Light' & 'Dark' theme. --- src/css/themes/dark.css | 99 ++++++++++++++++++++++------------------ src/css/themes/light.css | 53 ++++++++++++--------- 2 files changed, 85 insertions(+), 67 deletions(-) diff --git a/src/css/themes/dark.css b/src/css/themes/dark.css index ca547549..eebb82ff 100644 --- a/src/css/themes/dark.css +++ b/src/css/themes/dark.css @@ -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%); @@ -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%); -} \ No newline at end of file + --sgn-warning-light: hsl(45, 100%, 70%); + --sgn-warning-lightest: hsl(45, 100%, 95%); +} diff --git a/src/css/themes/light.css b/src/css/themes/light.css index 0e285dd6..9606b418 100644 --- a/src/css/themes/light.css +++ b/src/css/themes/light.css @@ -1,5 +1,5 @@ /* - * 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. @@ -7,38 +7,39 @@ :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%); @@ -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%); }