Merge pull request #116 from sri-pusuluri/cssCleanup

Issue #ED-422 sass migration fix

themes/portal/_dark.scss

 @use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
 
 html[data-mode='darkmode'] {
-    --primary-theme: #ffd92a;
-    --primary-theme-hs: 49.3, 100%;
-    --primary-color: hsl(var(--primary-theme-hs), 58.24%);
-    --primary-0: hsl(var(--primary-theme-hs), 88%); // #fffcee;
-    --primary-100: hsl(var(--primary-theme-hs), 82%); // #fff8db; // default button bg
-    --primary-200: hsl(var(--primary-theme-hs), 76%); // #fffd2a; // divider
-    --primary-250: hsl(var(--primary-theme-hs), 70%); // #f1f1c7;
-    --primary-300: hsl(var(--primary-theme-hs), 64%); // #ffeb2a; // outline, focus fields
+    // --primary-theme: var(--primary-theme);
+    // --primary-theme-hsl: 49.3, 100%;
+    --primary-color: hsl(var(--primary-theme-hsl), 58.24%);
+    --primary-0: hsl(var(--primary-theme-hsl), 88%); // #fffcee;
+    --primary-100: hsl(var(--primary-theme-hsl), 82%); // #fff8db; // default button bg
+    --primary-200: hsl(var(--primary-theme-hsl), 76%); // #fffd2a; // divider
+    --primary-250: hsl(var(--primary-theme-hsl), 70%); // #f1f1c7;
+    --primary-300: hsl(var(--primary-theme-hsl), 64%); // #ffeb2a; // outline, focus fields
     --primary-400: var(--primary-color); // button bg, heading, table titles, links, toggles
-    --primary-600: hsl(var(--primary-theme-hs), 52%); // #ffc72a; // on press
-    --primary-800: hsl(var(--primary-theme-hs), 46%); //  #ffb62a; // hover
+    --primary-600: hsl(var(--primary-theme-hsl), 52%); // #ffc72a; // on press
+    --primary-800: hsl(var(--primary-theme-hsl), 46%); //  #ffb62a; // hover
     --secondary-200: var(--primary-color);
     --secondary-color: var(--primary-color);
     --gray-800: var(--white);

themes/portal/_layout-base.scss

@@ -41,7 +41,7 @@ html[data-theme='default'] {
     --sbt-class-bar-label-text: var(--gray-800);
     --sb-filter-bar-bg: var(--white);
     --sb-container-bg: var(--white);
-    --sidebar-profil-header-bg: var(--primary-100);
+    --sidebar-profil-header-bg: var(--sbt-body-bg);
     --sb-linkmenu-bg: var(--white);
     --sb-linkmenu-text: var(--primary-400);
     --sb-linkmenu-active-text: var(--primary-400);

themes/portal/_layout-joy.scss

@@ -2,6 +2,13 @@
 
 html[layout='joy'] {
     --primary-theme: #FFD954;
+    --primary-theme-hsl: 47, 100%;
+    --primary-theme-rgb: rgb(255, 217, 84);
+    --primary-theme-contrast: #000;
+    --primary-theme-contrast-rgb: rgb(0, 0, 0);
+    --primary-theme-shade: hsl(var(--primary-theme-hsl), 60%);
+    --primary-theme-tint: hsl(var(--primary-theme-hsl), 40%);
+    
     --primary-hs: 206, 100%;
     --primary-color: #024f9d;
     --primary-200: #AFCCE1;

themes/portal/_theme-mono1.scss

+@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
+
+// adjust-hue
+// transparentize (color, 0)
+// darken ()
+// lighten ()
+// saturate (), desaturate
+// red() green() blue()
+// hue  // saturation
+// lightness
+// alpha
+
+$primary-theme: #343A40;
+$primary-theme-hsl: hue($primary-theme), saturation($primary-theme);
+$primary-theme-rgb: red($primary-theme), green($primary-theme), blue($primary-theme);
+$primary-theme-shade: darken(adjust-hue($primary-theme, -5), 10%);
+$primary-theme-tint:  lighten(adjust-hue($primary-theme, 10), 20%);
+$primary-theme-contrast: #ffffff;
+$primary-theme-contrast-rgb: red($primary-theme-contrast), green($primary-theme-contrast), blue($primary-theme-contrast);
+
+$primary-color: #6C757D;
+$primary-hsl: hue($primary-color), saturation($primary-color);
+$primary-color-rgb:  red($primary-color), green($primary-color), blue($primary-color);
+$primary-color-shade: darken(adjust-hue($primary-color, -5), 10%);
+$primary-color-tint: lighten(adjust-hue($primary-color, 5), 10%);
+$primary-color-contrast: #000000;
+$primary-color-contrast-rgb: red($primary-color-contrast), green($primary-color-contrast), blue($primary-color-contrast);
+$primary-0: lighten(adjust-hue($primary-color, 25), 45%);
+$primary-100: lighten(adjust-hue($primary-color, 20), 40%);
+$primary-200: lighten(adjust-hue($primary-color, 15), 30%);
+$primary-250: lighten(adjust-hue($primary-color, 10), 20%);
+$primary-300: lighten(adjust-hue($primary-color, 5), 10%);
+$primary-400: $primary-color;
+$primary-600: darken(adjust-hue($primary-color, -5), 10%);
+$primary-800: darken(adjust-hue($primary-color, -10), 20%);
+
+
+html[data-color='mono1'] {
+    --primary-theme: #{$primary-theme};
+    --primary-theme-hsl: #{$primary-theme-hsl};
+    --primary-theme-rgb: #{$primary-theme-rgb};
+    --primary-theme-contrast: #{$primary-theme-contrast};
+    --primary-theme-contrast-rgb: #{$primary-theme-contrast-rgb};
+    --primary-theme-shade: #{$primary-theme-shade};
+    --primary-theme-tint: #{$primary-theme-tint};
+
+    --primary-color: #{$primary-color};
+    --primary-hsl: #{$primary-hsl};
+    --primary-color-rgb:  #{$primary-color-rgb};
+    --primary-color-contrast: #{$primary-color-contrast};
+    --primary-color-contrast-rgb: #{$primary-color-contrast-rgb};
+    --primary-color-shade: #{$primary-color-shade};
+    --primary-color-tint: #{$primary-color-tint};
+    --primary-0: #{$primary-0};
+    --primary-100: #{$primary-100};
+    --primary-200: #{$primary-200};
+    --primary-250: #{$primary-250};
+    --primary-300: #{$primary-300};
+    --primary-400: #{$primary-400};
+    --primary-600: #{$primary-600};
+    --primary-800: #{$primary-800};
+  
+    --secondary-color: var(--primary-600);
+    --sbt-body-bg: var(--primary-0); //DEE2E6
+    --sbt-body-bg2: var(--primary-100); //CED4DA
+    --sbt-primary-bg: var(--primary-theme);
+    --sbt-compt-bg: var(--sbt-body-bg);
+    --sb-linkmenu-bg-hover: var(--primary-color);
+    --sb-footer-bg: var(--primary-theme);
+    --sbfaq-compt-bg:var(--sbt-body-bg);
+    
+    .sb-bg-white {
+        --white:var(--sbt-body-bg2);
+    }
+
+}
\ No newline at end of file

themes/themes-portal.scss

@@ -3,5 +3,6 @@
 @use './portal/layout-joy' as *;
 @use './portal/theme-yellow' as *;
 @use './portal/theme-purple' as *;
+@use './portal/theme-mono1' as *;
 @use './portal/dark' as *;
 @use './portal/accessibility' as *;
\ No newline at end of file