From 9c86429b418405a16fabcb3aaa6f06e2abd99d52 Mon Sep 17 00:00:00 2001 From: hinakhadim Date: Thu, 15 Aug 2024 11:59:41 +0500 Subject: [PATCH] feat: add dark theme separately --- package-lock.json | 1 - package.json | 3 - paragon/_dark.scss | 29 ++++ paragon/_discussion.scss | 11 ++ paragon/_extras.scss | 83 +++++++++ paragon/_overrides.scss | 4 +- paragon/_variables.scss | 4 + postinstall.js | 31 ---- themes/dark/_extras.scss | 21 +++ themes/dark/_learning.scss | 95 +++++++++++ themes/dark/_utilities.scss | 328 ++++++++++++++++++++++++++++++++++++ themes/dark/_variables.scss | 106 +++++++++++- 12 files changed, 676 insertions(+), 40 deletions(-) create mode 100644 paragon/_dark.scss delete mode 100644 postinstall.js create mode 100644 themes/dark/_learning.scss create mode 100644 themes/dark/_utilities.scss diff --git a/package-lock.json b/package-lock.json index 96be8b35..5c132e26 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,7 +7,6 @@ "": { "name": "@edly-io/indigo-brand-openedx", "version": "1.0.0", - "hasInstallScript": true, "license": "GPL-3.0-or-later" } } diff --git a/package.json b/package.json index 4ed98b53..d469b611 100644 --- a/package.json +++ b/package.json @@ -15,9 +15,6 @@ "publishConfig": { "access": "public" }, - "scripts": { - "postinstall": "node postinstall.js" - }, "release": { "tagFormat": "indigo-${version}", "branches": [ diff --git a/paragon/_dark.scss b/paragon/_dark.scss new file mode 100644 index 00000000..ce86d201 --- /dev/null +++ b/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; + } +} + + + diff --git a/paragon/_discussion.scss b/paragon/_discussion.scss index 2137daf8..1ae3d1ce 100644 --- a/paragon/_discussion.scss +++ b/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; } \ No newline at end of file diff --git a/paragon/_extras.scss b/paragon/_extras.scss index e69de29b..cebec9d9 100644 --- a/paragon/_extras.scss +++ b/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 !important; + 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); + } + } +} diff --git a/paragon/_overrides.scss b/paragon/_overrides.scss index 788fb418..9a9e6c23 100644 --- a/paragon/_overrides.scss +++ b/paragon/_overrides.scss @@ -469,5 +469,5 @@ html { @import "./extras"; - - +// Including dark theme +@import "./dark"; diff --git a/paragon/_variables.scss b/paragon/_variables.scss index 250a8fc8..dcd6bf8a 100644 --- a/paragon/_variables.scss +++ b/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'); diff --git a/postinstall.js b/postinstall.js deleted file mode 100644 index 1f69e8bd..00000000 --- a/postinstall.js +++ /dev/null @@ -1,31 +0,0 @@ -const fs = require("fs"); -const path = require('path'); - -const themesSupported = ["dark"] -let theme = process.env.npm_config_theme; - -// INFO: writing copyDirectorySync instead of using fs-extra package because we don't want to have any npm dependency in brand-openedx -function copyDirectorySync(source, destination) { - if (!fs.existsSync(destination)) { - fs.mkdirSync(destination); - } - - const files = fs.readdirSync(source); - - files.forEach(file => { - const sourcePath = path.join(source, file); - const destPath = path.join(destination, file); - - if (fs.statSync(sourcePath).isDirectory()) { - copyDirectorySync(sourcePath, destPath); - } else { - fs.copyFileSync(sourcePath, destPath); - } - }); -} - -if (themesSupported.includes(theme)){ - const srcDir = path.resolve(__dirname, 'themes', theme); - const destDir = path.resolve(__dirname, 'paragon'); - copyDirectorySync(srcDir, destDir); -} diff --git a/themes/dark/_extras.scss b/themes/dark/_extras.scss index e9c7154f..16c4a1fb 100644 --- a/themes/dark/_extras.scss +++ b/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; } \ No newline at end of file diff --git a/themes/dark/_learning.scss b/themes/dark/_learning.scss new file mode 100644 index 00000000..22269b68 --- /dev/null +++ b/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; + } +} + diff --git a/themes/dark/_utilities.scss b/themes/dark/_utilities.scss new file mode 100644 index 00000000..f7392157 --- /dev/null +++ b/themes/dark/_utilities.scss @@ -0,0 +1,328 @@ +@import "./variables"; + +@function theme-color($color-name: "primary", $variant: "default", $theme-colors: $theme-colors-dark, $theme-color-levels: $theme-color-levels-dark ) { + $base-color: #808080 !default; + $color-level: 500 !default; + + @if map-has-key($theme-colors, $color-name) { + $base-color: map-get($theme-colors, $color-name); + } + + @if type-of($variant) == "number" { + $color-level: $variant; + } + + @else if map-has-key($element-color-levels, $variant) { + $color-level: map-get($element-color-levels, $variant); + } + + @if map-has-key($theme-color-levels, "#{$color-name}-#{$color-level}") { + @return map-get($theme-color-levels, "#{$color-name}-#{$color-level}"); + } + + @return $base-color; +} + + +@each $color, $value in $theme-colors-dark { + @include text-emphasis-variant(".text-#{$color}", theme-color($color), true); + @each $level in $color-levels { + @include bg-variant(".bg-#{$color}-#{$level}", theme-color($color, $level), true); + @include text-emphasis-variant(".text-#{$color}-#{$level}", theme-color($color, $level), true); + .border-#{$color}-#{$level} { + border-color: theme-color($color, $level) !important; + } + } +} + + + +@each $color, $value in $theme-colors-dark { + .btn-#{$color} { + $background: $value; + $border: $value; + + $hover-background: theme-color($color, "hover"); + $hover-border: theme-color($color, "hover"); + $active-background: theme-color($color, "active"); + $active-border: theme-color($color, "active"); + + // Defaults + $hover-background: darken($background, 7.5%) !default; + $hover-border: darken($border, 10%) !default; + $active-background: darken($background, 10%) !default; + $active-border: darken($border, 12.5%) !default; + + @include button-variant( + $background, + $border, + $hover-background, + $hover-border, + $active-background, + $active-border + ); + @include button-focus(theme-color($color, "focus")); + } + + .btn-outline-#{$color} { + $text-and-border: $value; + + + $color-hover: theme-color($color, "hover"); + $active-background: theme-color($color, "background"); + $active-border: theme-color($color, "active"); + flood-color: $color-hover; + + // Defaults + $color-hover: color-yiq($value) !default; + $active-background: $value !default; + $active-border: $value !default; + + @include button-outline-variant( + $text-and-border, + $color-hover, + $active-background, + $active-border, + ); + @include button-focus(theme-color($color, "focus")); + } + + .btn-inverse-#{$color} { + $text: $value; + + $active-background: theme-color($color, "background"); + $active-border: theme-color($color, "active"); + + // Defaults + $background: color-yiq($value) !default; + $active-background: $value !default; + $active-border: $value !default; + + @include button-inverse-variant( + $text, + $background, + $active-background, + $active-border, + ); + @include button-focus($white); + } + + .btn-inverse-outline-#{$color} { + $text-and-border: $white; + + $color-hover: theme-color($color, "hover"); + $active-background: theme-color($color, "background"); + $active-border: transparent; + + // Defaults + $color-hover: color-yiq($value) !default; + $active-background: $value !default; + $active-border: $value !default; + + @include button-outline-variant( + $text-and-border, + $color-hover, + $active-background, + $active-border, + ); + @include button-focus($white); + } +} + +.btn-link { + color: $link-color; + + @include hover { + color: $link-hover-color; + } +} + +.btn-icon{ + @each $name, $color in $theme-colors-dark { + &.btn-icon-#{$name} { + @include btn-icon-variant($color, $btn-icon-accent-color); + } + + &.btn-icon-inverse-#{$name} { + @include btn-icon-variant($btn-icon-accent-color, $color); + } + + &.btn-icon-#{$name}-active { + @include btn-icon-variant($color, $btn-icon-accent-color, true); + } + + &.btn-icon-inverse-#{$name}-active { + @include btn-icon-variant($btn-icon-accent-color, $color, true); + } + } +} + +@each $color, $value in $theme-colors-dark { + .alert-#{$color} { + color: inherit; + background-color: theme-color($color, "background"); + border-color: theme-color($color, "border"); + + .alert-icon { + color: theme-color($color, "default"); + } + } + } + + +a.muted-link { + color: $muted-link-color; + + &:hover { + color: $muted-link-hover-color; + } + + p > &[href]:not(.btn), + &.inline-link { + color: $muted-inline-link-color; + text-decoration-color: $muted-inline-link-decoration-color; + + &:hover { + color: $muted-inline-link-hover-color; + text-decoration-color: $muted-inline-link-hover-decoration-color; + } + } +} + + +// Paragon form +.pgn__form-checkbox-input { + &:checked { + background-image: escape-svg($custom-checkbox-indicator-icon-checked); + } +} + + +.pgn__form-radio-input { + &:checked { + background-image: escape-svg($custom-radio-indicator-icon-checked); + } +} + + +.pgn__form-checkbox-input, +.pgn__form-radio-input { + &:focus { + border-color: $input-focus-border-color; + } + + &:focus::before { + border: $form-check-border-width solid $input-focus-border-color; + } +} + + +.pgn__form-control-decorator { + .btn-icon { + &:focus { + background-color: transparent !important; + } + } +} + + +// profile MFE +.profile-page { + .profile-avatar-menu-container { + .dropdown { + .btn { + background: transparent; + border-color: transparent; + margin: 0; + } + } + } +} + +// discussion +.border-primary-500-2 { + border: 2px solid $primary-500 !important; +} + +.btn-icon.btn-icon-primary:hover { + background-color: $light-300 !important; + color: $primary-500 !important +} + +.nav-button-group { + .nav-link.active, + .show>.nav-link { + background-color: $primary-500 !important; + } +} + +.text-TA-color { + color: $success-700; +} + +.outline-TA-color { + outline: $success-700 solid 2px; +} + + +.nav-underline-tabs { + .nav-link { + &:hover, + &:focus, + &.active { + color: $primary-500; + border-bottom-color: $primary-500; + } + } +} + +.tox .tox-edit-area__iframe{ + color: red; + background-color: $body-bg; +} + +@import "./learning"; + + +// toggle theme button for dark mode + +.darkmode_icon { + transform: scale(0.6); + background: $warning-400; + + &::after { + left: 15px; + bottom: 8px; + transform: scale(0); + transition: transform 1s ease, left 0.25s ease, bottom 0.25s ease, $page-color-transition; + } + + .ray { + background: $warning-400; + + &:nth-child(1) { + transform: rotate(45deg) translateX(-16px); + } + &:nth-child(2) { + transform: rotate(90deg) translateX(-16px); + } + &:nth-child(3) { + transform: rotate(135deg) translateX(-16px); + } + &:nth-child(4) { + transform: rotate(180deg) translateX(-16px); + } + &:nth-child(5) { + transform: rotate(225deg) translateX(-16px); + } + &:nth-child(6) { + transform: rotate(270deg) translateX(-16px); + } + &:nth-child(7) { + transform: rotate(315deg) translateX(-16px); + } + &:nth-child(8) { + transform: rotate(360deg) translateX(-16px); + } + } +} diff --git a/themes/dark/_variables.scss b/themes/dark/_variables.scss index 8c5de24b..41093a73 100644 --- a/themes/dark/_variables.scss +++ b/themes/dark/_variables.scss @@ -1,13 +1,113 @@ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); + $primary: #AEC7F6; +$danger: #FFA07A; +$success: #54CF5E; +$body-bg:#0D0D0E; + $primary-light: #292A2C; $light-dark: #374151; $text-color: #F8F8F8; $text-color-primary: #DDDFE2; $border-color: #777792; $light-overlay: #36383B; -$danger: #FFA07A; -$success: #54CF5E; $btn-color: #112F6B; -$body-bg:#0D0D0E; $hover-color: #383938; + +$theme-colors-dark: () !default; +$theme-colors-dark: map-merge( + ( + "primary": $primary, + "success": $success, + "danger": $danger, + ), + $theme-colors-dark +); + +$primary-100: mix(white, $primary, 94%); +$primary-200: mix(white, $primary, 75%); +$primary-300: mix(white, $primary, 50%); +$primary-400: mix(white, $primary, 25%); +$primary-500: $primary; +$primary-600: mix(black, $primary, 10%); +$primary-700: mix(black, $primary, 20%); +$primary-800: mix(black, $primary, 25%); +$primary-900: mix(black, $primary, 30%); + +$success-100: mix(white, $success, 94%); +$success-200: mix(white, $success, 75%); +$success-300: mix(white, $success, 50%); +$success-400: mix(white, $success, 25%); +$success-500: $success; +$success-600: mix(black, $success, 10%); +$success-700: mix(black, $success, 20%); +$success-800: mix(black, $success, 25%); +$success-900: mix(black, $success, 30%); + +$danger-100: mix(white, $danger, 94%); +$danger-200: mix(white, $danger, 75%); +$danger-300: mix(white, $danger, 50%); +$danger-400: mix(white, $danger, 25%); +$danger-500: $danger; +$danger-600: mix(black, $danger, 10%); +$danger-700: mix(black, $danger, 20%); +$danger-800: mix(black, $danger, 25%); +$danger-900: mix(black, $danger, 30%); + +$theme-color-levels-dark: () !default; + +$theme-color-levels-dark: map-merge( + ( + "primary-100": $primary-100, + "primary-200": $primary-200, + "primary-300": $primary-300, + "primary-400": $primary-400, + "primary-500": $primary-500, + "primary-600": $primary-600, + "primary-700": $primary-700, + "primary-800": $primary-800, + "primary-900": $primary-900, + "success-100": $success-100, + "success-200": $success-200, + "success-300": $success-300, + "success-400": $success-400, + "success-500": $success-500, + "success-600": $success-600, + "success-700": $success-700, + "success-800": $success-800, + "success-900": $success-900, + "danger-100": $danger-100, + "danger-200": $danger-200, + "danger-300": $danger-300, + "danger-400": $danger-400, + "danger-500": $danger-500, + "danger-600": $danger-600, + "danger-700": $danger-700, + "danger-800": $danger-800, + "danger-900": $danger-900, + ), + $theme-color-levels-dark +); + +$link-color: $primary-500; +$link-hover-color: darken($link-color, 15%)s; + +$muted-link-color: $primary-500; +$muted-inline-link-color: $primary-500; +$muted-link-hover-color: darken($muted-link-color, 15%); +$muted-inline-link-decoration-color: rgba($muted-inline-link-color, .3); +$muted-inline-link-hover-color: darken($muted-inline-link-color, 15%); + +$component-active-bg: $primary; + +$custom-control-indicator-checked-color: $component-active-bg; +$custom-control-indicator-checked-bg: $component-active-bg; + +$custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml,"), "#", "%23"); +$custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-bg}'/%3e%3c/svg%3e"), "#", "%23") ; + + +$input-focus-border-color: $component-active-bg; +$input-btn-focus-color: $component-active-bg; +$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color; +$input-focus-box-shadow: $input-btn-focus-box-shadow; \ No newline at end of file