feat: implementation of Paragon design tokens

refactor: code refactoring feat: necessary dependencies added refactor: corrected lint refactor: corrected sh refactor: added logs refactor: added temp frontend-platform dist refactor: updated run-build-for-gh-deps.sh refactor: corrected run-build-for-gh-deps.sh refactor: fixing the problem refactor: changed run build command feat: added header refactor: added dark theme and footer refactor: code refactoring refactor: code refactoring fix: fixed CommentsView button feat: added brand import feat: removed brand
openedx · Jul 3, 2024 · 8720ea3 · 8720ea3
1 parent 422fbf6
commit 8720ea3
Show file tree

Hide file tree

Showing 8 changed files with 4,899 additions and 2,400 deletions.
diff --git a/env.config.js b/env.config.js
@@ -0,0 +1,25 @@
+module.exports = {
+ PARAGON_THEME_URLS: {
+ core: {
+ urls: {
+ default: 'https://cdn.jsdelivr.net/npm/@openedx/paragon@alpha/dist/core.min.css',
+ },
+ },
+ defaults: {
+ light: 'light',
+ dark: 'dark',
+ },
+ variants: {
+ light: {
+ urls: {
+ default: 'https://cdn.jsdelivr.net/npm/@openedx/paragon@alpha/dist/light.min.css',
+ },
+ },
+ dark: {
+ urls: {
+ default: 'https://cdn.jsdelivr.net/npm/@edx/brand-edx.org@alpha/dist/light.min.css',
+ },
+ },
+ },
+ },
+};
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
  "extends @edx/browserslist-config"
  ],
  "scripts": {
- "build": "fedx-scripts webpack",
+ "build": "sh run-build-for-gh-deps.sh",
  "i18n_extract": "fedx-scripts formatjs extract",
  "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
  "lint:fix": "fedx-scripts eslint --ext .js --ext .jsx . --fix",

diff --git a/run-build-for-gh-deps.sh b/run-build-for-gh-deps.sh
@@ -0,0 +1,100 @@
+#!/bin/bash
+
+log() {
+ echo "=============================== $1 ==============================="
+}
+
+run_command() {
+ echo "\$ $1"
+ eval $1
+}
+
+log "Starting deployment script"
+run_command "pwd"
+
+# frontend-platform
+log "Processing frontend-platform"
+run_command "cd node_modules/@edx/" || exit
+log "Current directory: $(pwd)"
+run_command "rm -rf frontend-platform"
+run_command "mkdir frontend-platform" || exit
+run_command "ls -l"
+run_command "git clone -b Peter_Kulko/design-tokens-support --single-branch https://github.com/raccoongang/frontend-platform.git frontend-platform-temp"
+run_command "cd frontend-platform-temp" || exit
+log "Current directory: $(pwd)"
+run_command "cat package.json" || exit
+run_command "ls -l"
+run_command "cp -r dist/. ../frontend-platform/" || exit
+run_command "cd .." || exit
+run_command "ls -l"
+log "Current directory: $(pwd)"
+run_command "rm -rf frontend-platform-temp"
+run_command "cd frontend-platform" || exit
+run_command "ls -l"
+run_command "cd ../../.."
+log "Current directory: $(pwd)"
+
+# frontend-build
+log "Processing frontend-build"
+run_command "cd node_modules/@openedx/" || exit
+log "Current directory: $(pwd)"
+run_command "rm -rf frontend-build"
+run_command "git clone -b dcoa/design-tokens-support --single-branch https://github.com/eduNEXT/frontend-build.git"
+run_command "cd frontend-build" || exit
+log "Current directory: $(pwd)"
+run_command "npm ci"
+run_command "cd ../../.." || exit
+log "Current directory: $(pwd)"
+
+# paragon
+log "Processing paragon"
+run_command "ls -l"
+run_command "cd node_modules/@openedx/" || exit
+log "Current directory: $(pwd)"
+run_command "rm -rf paragon"
+run_command "mkdir -p paragon"
+run_command "cd paragon" || exit
+log "Current directory: $(pwd)"
+run_command "npm pack @openedx/[email protected]"
+run_command "tar -xzf openedx-paragon-23.0.0-alpha.2.tgz --strip-components=1"
+run_command "rm openedx-paragon-23.0.0-alpha.2.tgz"
+run_command "cd ../../.." || exit
+log "Current directory: $(pwd)"
+
+# frontend-component-header
+log "Processing frontend-component-header"
+run_command "cd node_modules/@edx/" || exit
+log "Current directory: $(pwd)"
+run_command "rm -rf frontend-component-header"
+run_command "mkdir frontend-component-header" || exit
+run_command "git clone -b Peter_Kulko/support-design-tokens --single-branch https://github.com/PKulkoRaccoonGang/frontend-component-header.git frontend-component-header-temp"
+run_command "cd frontend-component-header-temp" || exit
+log "Current directory: $(pwd)"
+run_command "cp -r dist ../frontend-component-header/" || exit
+run_command "cp -r package.json ../frontend-component-header/" || exit
+run_command "cd .."
+run_command "rm -rf frontend-component-header-temp"
+run_command "cd ../.." || exit
+log "Current directory: $(pwd)"
+
+# frontend-component-footer
+log "Processing frontend-component-footer"
+run_command "cd node_modules/@edx/" || exit
+log "Current directory: $(pwd)"
+run_command "rm -rf frontend-component-footer"
+run_command "mkdir frontend-component-footer" || exit
+run_command "git clone -b Peter_Kulko/support-design-tokens --single-branch https://github.com/PKulkoRaccoonGang/frontend-component-footer.git frontend-component-footer-temp"
+run_command "cd frontend-component-footer-temp" || exit
+log "Current directory: $(pwd)"
+run_command "cp -r dist ../frontend-component-footer/" || exit
+run_command "cp -r package.json ../frontend-component-footer/" || exit
+run_command "cd .."
+run_command "rm -rf frontend-component-footer-temp"
+run_command "cd ../.." || exit
+log "Current directory: $(pwd)"
+
+# webpack
+log "Running webpack"
+run_command "fedx-scripts webpack"
+
+log "Deployment script finished."
diff --git a/src/components/NavigationBar/navBar.scss b/src/components/NavigationBar/navBar.scss
@@ -1,8 +1,3 @@
-@import "~@edx/brand/paragon/fonts.scss";
-@import "~@edx/brand/paragon/variables.scss";
-@import "~@openedx/paragon/scss/core/core.scss";
-@import "~@edx/brand/paragon/overrides.scss";
-
 $fa-font-path: "~font-awesome/fonts";
 @import "~font-awesome/scss/font-awesome";
 
@@ -12,13 +7,13 @@ $fa-font-path: "~font-awesome/fonts";
  .nav a,
  .nav button {
  &:hover {
- background-color: $light-400;
+ background-color: var(--pgn-color-light-400);
  }
  }
 
  .nav a {
  &:not(.active):hover {
- background-color: $light-400;
+ background-color: var(--pgn-color-light-400);
  border-bottom: none;
  }
  }
@@ -30,7 +25,7 @@ $fa-font-path: "~font-awesome/fonts";
  .nav-link {
  border-bottom: 4px solid transparent;
  border-top: 4px solid transparent;
- color: $gray-700;
+ color: var(--pgn-color-gray-700);
 
  // temporary until we can remove .btn class from dropdowns
  border-left: 0;
@@ -40,9 +35,9 @@ $fa-font-path: "~font-awesome/fonts";
  &:hover,
  &:focus,
  &.active {
- font-weight: $font-weight-normal;
- color: $primary-500;
- border-bottom-color: $primary-500;
+ font-weight: var(--pgn-typography-font-weight-normal);
+ color: var(--pgn-color-primary-500);
+ border-bottom-color: var(--pgn-color-primary-500);
  }
  }
 }
diff --git a/src/components/TinyMCEEditor.jsx b/src/components/TinyMCEEditor.jsx
@@ -35,7 +35,7 @@ import 'tinymce/plugins/charmap';
 import 'tinymce/plugins/paste';
 /* eslint import/no-webpack-loader-syntax: off */
 // eslint-disable-next-line import/no-unresolved
-import edxBrandCss from '!!raw-loader!sass-loader!../index.scss';
+import edxBrandCss from '!!raw-loader!../index.scss';
 // eslint-disable-next-line import/no-unresolved
 import contentCss from '!!raw-loader!tinymce/skins/content/default/content.min.css';
 // eslint-disable-next-line import/no-unresolved

diff --git a/src/discussions/post-comments/comments/CommentsView.jsx b/src/discussions/post-comments/comments/CommentsView.jsx
@@ -92,7 +92,7 @@ const CommentsView = ({ threadType }) => {
  variant="plain"
  block="true"
  className="card mb-4 px-0 border-0 py-10px mt-2 font-style font-weight-500
- line-height-24 text-primary-500"
+ line-height-24 text-primary-500 bg-white"
  onClick={handleAddResponse}
  data-testid="add-response"
  >

diff --git a/src/index.scss b/src/index.scss
@@ -1,7 +1,4 @@
-@import "~@edx/brand/paragon/fonts.scss";
-@import "~@edx/brand/paragon/variables.scss";
-@import "~@openedx/paragon/scss/core/core.scss";
-@import "~@edx/brand/paragon/overrides.scss";
+@use "@openedx/paragon/styles/css/core/custom-media-breakpoints.css" as paragonCustomMediaBreakpoints;
 
 @import "~@edx/frontend-component-footer/dist/footer";
 @import "~@edx/frontend-component-header/dist/index";
@@ -41,23 +38,23 @@ body,
 }
 
 .text-staff-color {
- color: $warning-700;
+ color: var(--pgn-color-warning-700);
 }
 
 .outline-staff-color {
- outline: $warning-700 solid 2px;
+ outline: var(--pgn-color-warning-700) solid 2px;
 }
 
 .text-TA-color {
- color: $success-700;
+ color: var(--pgn-color-success-700);
 }
 
 .outline-TA-color {
- outline: $success-700 solid 2px;
+ outline: var(--pgn-color-success-700) solid 2px;
 }
 
 .outline-anonymous {
- outline: $light-400 solid 2px;
+ outline: var(--pgn-color-light-400) solid 2px;
 }
 
 .font-size-8 {
@@ -173,7 +170,7 @@ body,
 }
 
 .learner > a:hover {
- background-color: $light-300;
+ background-color: var(--pgn-color-light-300);
 }
 
 .py-10px {
@@ -252,12 +249,12 @@ header {
 }
 
 .border-light-400-2 {
- border: 2px solid $light-400 !important;
+ border: 2px solid var(--pgn-color-light-400) !important;
  border-width: 2px !important;
 }
 
 .border-primary-500-2 {
- border: 2px solid $primary-500 !important;
+ border: 2px solid var(--pgn-color-primary-500) !important;
  border-width: 2px !important;
 }
 
@@ -383,8 +380,8 @@ header {
 }
 
 .btn-icon.btn-icon-primary:hover {
- background-color: $light-300 !important;
- color: $primary-500 !important
+ background-color: var(--pgn-color-light-300) !important;
+ color: var(--pgn-color-primary-500) !important
 }
 
 
@@ -427,38 +424,38 @@ header {
 }
 
 .hover-button:hover {
- background-color: $light-300 !important;
+ background-color: var(--pgn-color-light-300) !important;
  height: 36px !important;
  border: none !important;
 }
 
 .btn-tertiary:hover {
- background-color: $light-300 !important;
+ background-color: var(--pgn-color-light-300) !important;
 }
 
 .nav-button-group {
  .nav-link {
  &:hover {
- background-color: $light-300 !important;
+ background-color: var(--pgn-color-light-300) !important;
  }
  }
 
  .nav-link.active,
  .show>.nav-link {
- background-color: $primary-500 !important;
+ background-color: var(--pgn-color-primary-500) !important;
  }
 }
 
 .course-tabs-navigation {
  .nav a {
  &:hover {
- background-color: $light-300 !important;;
+ background-color: var(--pgn-color-light-300) !important;;
  }
  }
 }
 
 .btn-tertiary:disabled {
- color: $gray-700 !important;
+ color: var(--pgn-color-gray-700) !important;
  background-color: transparent !important;
 }
 
@@ -535,14 +532,14 @@ code {
 .post-preview,
 .discussion-comments {
  blockquote {
- border-left: 2px solid $gray-200;
+ border-left: 2px solid var(--pgn-color-gray-200);
  margin-left: 1.5rem;
  padding-left: 1rem;
  }
 }
 
 .add-comment-btn {
- border: 1px solid $light-300 !important;
+ border: 1px solid var(--pgn-color-light-300) !important;
 }
 
 .icon-size-24 {
@@ -588,7 +585,7 @@ code {
 }
 
 th, td {
- border: 1px dashed $gray-200;
+ border: 1px dashed var(--pgn-color-gray-200);
  padding: 0.4rem;
  white-space: nowrap;
 }