Issue #SB-19519 merge: Merge pull request #994 from Ajoymaity/release…

…-3.1.0 Issue #SB-19519 feat: Dynamic CSS color code
Sunbird-Ed · Jul 2, 2020 · 7ceae94 · 7ceae94
2 parents 187c51c + fc4789e
commit 7ceae94
Show file tree

Hide file tree

Showing 74 changed files with 652 additions and 553 deletions.
diff --git a/src/app.scss b/src/app.scss
@@ -17,6 +17,7 @@
 @import "./assets/styles/details_page";
 @import "./assets/styles/fonts";
 @import "./assets/styles/variables";
+@import "./assets/styles/variables";
 
 :root {
   --ion-default-font: "NotoSans";
@@ -57,7 +58,7 @@ h6 {
   @extend .NotoSans;
 }
 .sb-legal-url {
-  color: #0a55a0;
+  color: map-get($colors, bright_blue_a0);
   font-size: 14px;
   text-decoration: underline;
 }
@@ -189,10 +190,10 @@ ul.rating .ion-md-star-outline:before {
   padding-right: 10px;
 }
 .popover-ratings ion-icon.filled {
-  color: #024f9d !important;
+  color: $blue !important;
 }
 .small-rating ion-icon.filled {
-  color: #024f9d !important;
+  color: $blue !important;
 }
 
 .select-box {
@@ -430,7 +431,7 @@ ul.rating .ion-md-star-outline:before {
 .separator-dot {
   width: 4px;
   height: 4px;
-  background-color: #d8d8d8;
+  background-color: map-get($colors, light_silver);
   border-radius: 50%;
   display: inline-block;
   vertical-align: middle;
@@ -535,7 +536,7 @@ ion-toolbar {
   margin-top: 10px;
 }
 .error {
-  color: #e76026;
+  color: map-get($colors, bright_red_e7);
 }
 
 .flex-container {
@@ -613,7 +614,7 @@ ion-toolbar {
 }
 
 .lighter {
-  color: #9b9b9b;
+  color: map-get($colors, gray_9b);
 }
 
 .MR10 {
@@ -682,7 +683,7 @@ ion-toolbar {
   vertical-align: sub;
   margin-right: 13px;
   font-size: 1.8em !important;
-  color: #a4a4a4;
+  color:map-get($colors, gray_solid);
 }
 .info-icon-text {
   font-size: 10px;
@@ -711,7 +712,7 @@ ion-toolbar {
   max-height: 100% !important;
 }
 .qr-alert-invalid ion-backdrop {
-  background-color: #000 !important;
+  background-color: map-get($colors, black) !important;
   opacity: 0.4 !important;
 }
 
@@ -771,7 +772,7 @@ ion-toast {
   --ion-safe-area-bottom: -8px;
 }
 ion-toast.redErrorToast {
-  --background: #ff0000;
+  --background: #{map-get($colors, vivid_red)};
 }
 
 ion-toast.sb-toast.available-later {
@@ -786,7 +787,7 @@ ion-toast.sb-toast.available-later {
   box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.16), 0 2px 1px 0 rgba(0, 0, 0, 0.24);
 }
 ion-toast.green-toast{
-  --background: #008000;
+  --background: #{map-get($colors, office_green)};
 }
 
 .btn-block {
@@ -807,7 +808,7 @@ ion-toast.green-toast{
   background: transparent;
   opacity: 1;
   z-index: 11;
-  color: #fff;
+  color: map-get($colors, white);
 
   .bg {
     position: absolute;
@@ -898,8 +899,8 @@ ion-toast.green-toast{
 }
 
 .no-net-popup {
-  --background: #e55a28 !important;
-  --color: #fff !important;
+  --background: #{$orange} !important;
+  --color: #{$white} !important;
 }
 
 .no-net-close-btn {
@@ -914,7 +915,7 @@ ion-split-pane {
   .popover-content {
     top: 168.273px !important;
     left: 220px !important;
-    --box-shadow: 0px 3px 6px 5px #eee;
+    --box-shadow: 0px 3px 6px 5px #{map-get($colors, empty_color)};
     transform-origin: right top;
     transform: scale(1);
     width: 36% !important;
@@ -949,7 +950,7 @@ ion-split-pane {
     padding: 0 !important;
     height: 3.11%;
     width: 93.33%;
-    color: #999999;
+    color: $gray-300;
     font-size: 12px;
     line-height: 18px;
     font-weight: bold;
@@ -973,10 +974,10 @@ ion-split-pane {
   .sb-ftue-design {
     width: 100%;
     font-size: 1.4rem;
-    background: #fff;
+    background: map-get($colors, white);
     @include margin(10px 0px 0px 0px);
     border: 0.5px solid rgba(35, 97, 255, 0.5);
-    background-color: #ffffff;
+    background-color: map-get($colors, white);
     box-shadow: 0 3px 4px 0 rgba(2, 79, 157, 0.1);
     .sb-play-unselected {
       color: $blue;
@@ -1119,7 +1120,7 @@ ion-split-pane {
 }
 
 sb-course-cards-hlist > .layout-course > .header > .sb-btn-outline-secondary{
-    color: #024F9D;
+    color: $blue;
 }
 
 sb-course-cards-hlist > .layout-course > .header{
@@ -1140,12 +1141,12 @@ app-courses{
 }
 
 .card-section-secondary{
-  color: #666666;
+  color: map-get($colors, granite_gray);
   font-family: "Noto Sans";
 }
 
 .card-section-danger{
-  color: #E55A28;
+  color: $orange;
   font-family: "Noto Sans";
 }
 
@@ -1206,7 +1207,7 @@ app-resources{
 }
 
 .sb-btn-large {
-  background-color: #024F9D;
+  background-color: $blue;
   border: none;
   color: white;
   text-align: center;
@@ -1280,11 +1281,11 @@ app-application-header{
   .add-manage-user{
     sb-member-card{
       .sb-member__img{
-        background-color: #BFE1CF !important;
-        color: #008840 !important;
+        background-color: map-get($colors, light_grayish_green) !important;
+        color: $green !important;
       }
       .sb-member__name{
-        color: #008840 !important;
+        color: $green !important;
       }
     }
   }
@@ -1293,10 +1294,10 @@ app-application-header{
     sb-member-card{
       .sb-member__img{
         padding-bottom: 1rem !important;
-        color: #333333 !important;
+        color: map-get($colors, primary_black) !important;
       }
       .sb-member__name{
-        color: #333333 !important;
+        color: map-get($colors, primary_black) !important;
       }
     }
   }
@@ -1315,7 +1316,7 @@ app-manage-user-profiles{
     sb-member-card{
       .sb-member__name{
         font-weight: bold !important;
-        color: #024F9D !important;
+        color: $blue !important;
       }
     }
   }
@@ -1337,7 +1338,7 @@ ion-modal.sb-progress-loader {
   }
 }
 .bold {
-  color: #0ec254;
+  color: map-get($colors, strong_green);
   font-weight: bold;
 }
 
@@ -1349,7 +1350,7 @@ ion-modal.sb-progress-loader {
   }
 
   ion-item:nth-child(1) {
-    color: #333333;
+    color: map-get($colors, primary_black);
   }
   ion-item:nth-child(2) {
     color: $red;

diff --git a/src/app/active-downloads/active-downloads.page.scss b/src/app/active-downloads/active-downloads.page.scss
@@ -1,19 +1,21 @@
 @import "src/assets/styles/base/_variables.scss";
 @import "src/assets/styles/_custom-mixins.scss";
+@import "src/assets/styles/_variables.scss";
+
 // :host {
     .download-page-heading{
-        color: white;
+        color: map-get($colors, white);
         font-size: $font-size-base + 2;
     }
 
     .download-page-info{
-        color: white;
+        color: map-get($colors, white);
         font-size: $font-size-base - 2;
     }
 
     .download-cancel-icon{
         font-size: $font-size-base * 2;
-        color: white;
+        color: map-get($colors, white);
     }
 
     .ad-pt-4{
@@ -33,7 +35,7 @@
     }
 
     .ad-border-bottom-1{
-        border-bottom: 1px solid #EEE2E2;
+        border-bottom: 1px solid map-get($colors, light_grayish_red);
     }
 
     .ad-no-box-shadow{