feat: add dark theme separately (#24)

package.json

@@ -15,9 +15,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "postinstall": "node postinstall.js"
-  },
   "release": {
     "tagFormat": "indigo-${version}",
     "branches": [

paragon/_dark.scss

@@ -0,0 +1,29 @@
+
+
+
+body.indigo-dark-theme{
+
+    @import "../themes/dark/variables";
+
+    @import "./header";
+    @import "./footer";
+    @import "./login";
+    @import "./progress";
+    @import "./tour";
+    @import "./learning";
+    @import "./discussion";
+    @import "./account";
+    @import "./profile";
+    @import "./dates";
+    @import "../themes/dark/utilities";
+    @import "../themes/dark/extras";
+
+    color: $text-color !important;
+    background: $body-bg !important;
+    * {
+        accent-color: $primary;
+    }
+}
+
+
+

paragon/_discussion.scss

@@ -95,6 +95,9 @@ position: static;
             background: $primary-light !important;
             padding-left: 0;
             font-size: 14px;
+            &:focus{
+                box-shadow: none;
+            }
         }
         .pointer-cursor-hover {
             margin: 0 !important;
@@ -213,4 +216,12 @@ width: 100%;
 div[data-learner-type=b2c_learner] div[role=heading].h2, div[role=heading].h2 {
     font-size: 24px;
     line-height: 30px;
+}
+
+html[data-mce-style]{
+    color: lightslategray;
+}
+.mce-content-body{
+    color: inherit;
+    background-color: transparent;
 }

paragon/_extras.scss

@@ -0,0 +1,83 @@
+// theme toggle button
+
+.theme-toggle-button{
+    position: relative;
+    width: 40px;
+    height: 40px;
+}
+
+#darkmode {
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  margin: auto;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: scale(1.5);
+}
+
+.darkmode_icon {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border-radius: 10px;
+  background: $warning-400;
+  transform-origin: center center;
+  transition: transform 0.75s ease-in-out, $page-color-transition;
+
+  &::after {
+    position: absolute;
+    content: '';
+    width: 16px;
+    height: 16px;
+    left: 6px;
+    bottom: 4px;
+    border-radius: 10px;
+    background: $body-bg;
+    transform-origin: center center;
+    transition: transform 0.2s ease, left 0.25s ease, bottom 0.25s ease, $page-color-transition;
+  }
+
+  .ray {
+    position: absolute;
+    left: 7px;
+    top: 7px;
+    width: 6px;
+    height: 6px;
+    border-radius: 6px;
+    background: transparent;
+    transform-origin: center;
+    transition: transform 0.5s ease-in-out, $page-color-transition;
+
+    &:nth-child(1) {
+        transform: rotate(45deg) translateX(0);
+    }
+    &:nth-child(2) {
+        transform: rotate(90deg) translateX(0);
+    }
+    &:nth-child(3) {
+        transform: rotate(135deg) translateX(0);
+    }
+    &:nth-child(4) {
+        transform: rotate(180deg) translateX(0);
+    }
+    &:nth-child(5) {
+        transform: rotate(225deg) translateX(0);
+    }
+    &:nth-child(6) {
+        transform: rotate(270deg) translateX(0);
+    }
+    &:nth-child(7) {
+        transform: rotate(315deg) translateX(0);
+    }
+    &:nth-child(8) {
+        transform: rotate(360deg) translateX(0);
+    }
+  }
+}

paragon/_overrides.scss

@@ -469,5 +469,5 @@ html {
 @import "./extras";
 
 
-
-
+// Including dark theme
+@import "./dark";

paragon/_variables.scss

@@ -4,4 +4,8 @@ $light-dark: #374151;
 $text-color: #111827;
 $text-color-primary: #515661;
 $text-color-light: #515661;
+
+// for toggle theme button
+$page-color-transition: transparent .2s ease, color .2s ease;
+
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

themes/dark/_extras.scss

@@ -232,6 +232,9 @@ a.course-card-title {
         &.is-invalid {
             border-color: $danger !important;
         }
+        &:focus{
+            box-shadow: 0 0 0 1px $primary;
+        }
     }
     .pgn__form-text-default, .has-floating-label {
         color: $text-color;
@@ -645,6 +648,10 @@ a.discussion-post {
     }
     .form-control:focus ~ .pgn__form-control-floating-label .pgn__form-control-floating-label-text, .form-control.has-value ~ .pgn__form-control-floating-label .pgn__form-control-floating-label-text {
         background-color: $primary-light;
+
+        &:focus{
+            box-shadow: 0 0 0 1px $primary;
+        }
     }
 }
 #paragon-portal-root .new-user-tour-dialog {
@@ -927,6 +934,12 @@ a.discussion-post {
                     &.btn-outline-primary {
                         background: none !important;
                         color: $text-color;
+                        &:not(:disabled):not(.disabled):active{
+                            color: $text-color;
+                        }
+                    }
+                    &.btn-primary:not(:disabled):not(.disabled):active {
+                        color: $btn-color;                      
                     }
                 }
             }
@@ -1343,6 +1356,10 @@ input::placeholder {
         background: none !important;
         border: 1px solid $border-color;
         color: $text-color;
+
+        &:focus{
+            box-shadow: 0 0 0 1px $primary;
+        }
     }
 }
 .pgn__card-header-title-md {
@@ -1436,4 +1453,8 @@ section[data-testid=sidebar-NOTIFICATIONS], section[data-testid=sidebar-DISCUSSI
     &.border-light-400 {
         border-color: $primary-light !important;
     }
+}
+
+.donut-chart-text {
+    fill: $primary-500;
 }

themes/dark/_learning.scss

@@ -0,0 +1,95 @@
+// learning MFE
+
+.donut-chart-text {
+    fill: $primary-500;
+}
+
+.donut-ring, .donut-segment, .donut-hole {
+    &.locked-stroke {
+        stroke: $primary-500;
+    }
+}
+
+.grade-bar {
+    .grade-bar__divider {
+        fill: $primary-500;
+    }
+
+    .grade-bar--passing {
+        fill: $primary-500;
+    }
+
+    .grade-bar--current-passing {
+        fill: $success-500;
+    }
+}
+
+#minimum-grade-tooltip {
+    .arrow::after {
+        border-bottom-color: $primary-500;
+    }
+}
+
+#passing-grade-tooltip {
+    .arrow::after {
+        border-top-color: $success-500;
+    }
+
+    background: $success-500;
+}
+
+.modal {
+    button {
+        @extend .btn-primary;
+    }
+}
+
+.lock-paywall-container svg {
+    color: $primary-700;
+}
+
+.upsell-warning {
+    background-color: $danger-100;
+}
+
+.sequence-navigation {
+    .btn{
+        &.complete {
+            color: $success;
+        }
+    }
+}
+
+.sequence-navigation {
+    .sequence-navigation-dropdown {
+        .dropdown-menu .btn {
+                &.active {
+                    .unit-icon {
+                        color: $primary-500;
+                }
+
+                &:after {
+                    background: $primary;
+                }
+            }
+        }
+    }
+}
+
+.icon-hover {
+    &:hover {
+        color: $primary-500 !important;
+
+    }
+}
+
+
+.nav-underline-tabs {
+    &:hover,
+        &:focus,
+        &.active {
+        color: $primary-500;
+        border-bottom-color: $primary-500;
+    }
+}
+