Skip to content

Commit 8720ea3

Browse files
PKulkoRaccoonGangPKulkoRaccoonGang
committed
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
1 parent 422fbf6 commit 8720ea3

File tree

8 files changed

+4899
-2400
lines changed

8 files changed

+4899
-2400
lines changed

‎env.config.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
module.exports = {
2+
PARAGON_THEME_URLS: {
3+
core: {
4+
urls: {
5+
default: 'https://cdn.jsdelivr.net/npm/@openedx/paragon@alpha/dist/core.min.css',
6+
},
7+
},
8+
defaults: {
9+
light: 'light',
10+
dark: 'dark',
11+
},
12+
variants: {
13+
light: {
14+
urls: {
15+
default: 'https://cdn.jsdelivr.net/npm/@openedx/paragon@alpha/dist/light.min.css',
16+
},
17+
},
18+
dark: {
19+
urls: {
20+
default: 'https://cdn.jsdelivr.net/npm/@edx/brand-edx.org@alpha/dist/light.min.css',
21+
},
22+
},
23+
},
24+
},
25+
};

‎package-lock.json

+4,745-2,363
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"extends @edx/browserslist-config"
1111
],
1212
"scripts": {
13-
"build": "fedx-scripts webpack",
13+
"build": "sh run-build-for-gh-deps.sh",
1414
"i18n_extract": "fedx-scripts formatjs extract",
1515
"lint": "fedx-scripts eslint --ext .js --ext .jsx .",
1616
"lint:fix": "fedx-scripts eslint --ext .js --ext .jsx . --fix",

‎run-build-for-gh-deps.sh

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
#!/bin/bash
2+
3+
log() {
4+
echo "=============================== $1 ==============================="
5+
}
6+
7+
run_command() {
8+
echo "\$ $1"
9+
eval $1
10+
}
11+
12+
log "Starting deployment script"
13+
run_command "pwd"
14+
15+
# frontend-platform
16+
log "Processing frontend-platform"
17+
run_command "cd node_modules/@edx/" || exit
18+
log "Current directory: $(pwd)"
19+
run_command "rm -rf frontend-platform"
20+
run_command "mkdir frontend-platform" || exit
21+
run_command "ls -l"
22+
run_command "git clone -b Peter_Kulko/design-tokens-support --single-branch https://github.com/raccoongang/frontend-platform.git frontend-platform-temp"
23+
run_command "cd frontend-platform-temp" || exit
24+
log "Current directory: $(pwd)"
25+
run_command "cat package.json" || exit
26+
run_command "ls -l"
27+
run_command "cp -r dist/. ../frontend-platform/" || exit
28+
run_command "cd .." || exit
29+
run_command "ls -l"
30+
log "Current directory: $(pwd)"
31+
run_command "rm -rf frontend-platform-temp"
32+
run_command "cd frontend-platform" || exit
33+
run_command "ls -l"
34+
run_command "cd ../../.."
35+
log "Current directory: $(pwd)"
36+
37+
# frontend-build
38+
log "Processing frontend-build"
39+
run_command "cd node_modules/@openedx/" || exit
40+
log "Current directory: $(pwd)"
41+
run_command "rm -rf frontend-build"
42+
run_command "git clone -b dcoa/design-tokens-support --single-branch https://github.com/eduNEXT/frontend-build.git"
43+
run_command "cd frontend-build" || exit
44+
log "Current directory: $(pwd)"
45+
run_command "npm ci"
46+
run_command "cd ../../.." || exit
47+
log "Current directory: $(pwd)"
48+
49+
# paragon
50+
log "Processing paragon"
51+
run_command "ls -l"
52+
run_command "cd node_modules/@openedx/" || exit
53+
log "Current directory: $(pwd)"
54+
run_command "rm -rf paragon"
55+
run_command "mkdir -p paragon"
56+
run_command "cd paragon" || exit
57+
log "Current directory: $(pwd)"
58+
run_command "npm pack @openedx/[email protected]"
59+
run_command "tar -xzf openedx-paragon-23.0.0-alpha.2.tgz --strip-components=1"
60+
run_command "rm openedx-paragon-23.0.0-alpha.2.tgz"
61+
run_command "cd ../../.." || exit
62+
log "Current directory: $(pwd)"
63+
64+
# frontend-component-header
65+
log "Processing frontend-component-header"
66+
run_command "cd node_modules/@edx/" || exit
67+
log "Current directory: $(pwd)"
68+
run_command "rm -rf frontend-component-header"
69+
run_command "mkdir frontend-component-header" || exit
70+
run_command "git clone -b Peter_Kulko/support-design-tokens --single-branch https://github.com/PKulkoRaccoonGang/frontend-component-header.git frontend-component-header-temp"
71+
run_command "cd frontend-component-header-temp" || exit
72+
log "Current directory: $(pwd)"
73+
run_command "cp -r dist ../frontend-component-header/" || exit
74+
run_command "cp -r package.json ../frontend-component-header/" || exit
75+
run_command "cd .."
76+
run_command "rm -rf frontend-component-header-temp"
77+
run_command "cd ../.." || exit
78+
log "Current directory: $(pwd)"
79+
80+
# frontend-component-footer
81+
log "Processing frontend-component-footer"
82+
run_command "cd node_modules/@edx/" || exit
83+
log "Current directory: $(pwd)"
84+
run_command "rm -rf frontend-component-footer"
85+
run_command "mkdir frontend-component-footer" || exit
86+
run_command "git clone -b Peter_Kulko/support-design-tokens --single-branch https://github.com/PKulkoRaccoonGang/frontend-component-footer.git frontend-component-footer-temp"
87+
run_command "cd frontend-component-footer-temp" || exit
88+
log "Current directory: $(pwd)"
89+
run_command "cp -r dist ../frontend-component-footer/" || exit
90+
run_command "cp -r package.json ../frontend-component-footer/" || exit
91+
run_command "cd .."
92+
run_command "rm -rf frontend-component-footer-temp"
93+
run_command "cd ../.." || exit
94+
log "Current directory: $(pwd)"
95+
96+
# webpack
97+
log "Running webpack"
98+
run_command "fedx-scripts webpack"
99+
100+
log "Deployment script finished."

‎src/components/NavigationBar/navBar.scss

+6-11
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
@import "~@edx/brand/paragon/fonts.scss";
2-
@import "~@edx/brand/paragon/variables.scss";
3-
@import "~@openedx/paragon/scss/core/core.scss";
4-
@import "~@edx/brand/paragon/overrides.scss";
5-
61
$fa-font-path: "~font-awesome/fonts";
72
@import "~font-awesome/scss/font-awesome";
83

@@ -12,13 +7,13 @@ $fa-font-path: "~font-awesome/fonts";
127
.nav a,
138
.nav button {
149
&:hover {
15-
background-color: $light-400;
10+
background-color: var(--pgn-color-light-400);
1611
}
1712
}
1813

1914
.nav a {
2015
&:not(.active):hover {
21-
background-color: $light-400;
16+
background-color: var(--pgn-color-light-400);
2217
border-bottom: none;
2318
}
2419
}
@@ -30,7 +25,7 @@ $fa-font-path: "~font-awesome/fonts";
3025
.nav-link {
3126
border-bottom: 4px solid transparent;
3227
border-top: 4px solid transparent;
33-
color: $gray-700;
28+
color: var(--pgn-color-gray-700);
3429

3530
// temporary until we can remove .btn class from dropdowns
3631
border-left: 0;
@@ -40,9 +35,9 @@ $fa-font-path: "~font-awesome/fonts";
4035
&:hover,
4136
&:focus,
4237
&.active {
43-
font-weight: $font-weight-normal;
44-
color: $primary-500;
45-
border-bottom-color: $primary-500;
38+
font-weight: var(--pgn-typography-font-weight-normal);
39+
color: var(--pgn-color-primary-500);
40+
border-bottom-color: var(--pgn-color-primary-500);
4641
}
4742
}
4843
}

‎src/components/TinyMCEEditor.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ import 'tinymce/plugins/charmap';
3535
import 'tinymce/plugins/paste';
3636
/* eslint import/no-webpack-loader-syntax: off */
3737
// eslint-disable-next-line import/no-unresolved
38-
import edxBrandCss from '!!raw-loader!sass-loader!../index.scss';
38+
import edxBrandCss from '!!raw-loader!../index.scss';
3939
// eslint-disable-next-line import/no-unresolved
4040
import contentCss from '!!raw-loader!tinymce/skins/content/default/content.min.css';
4141
// eslint-disable-next-line import/no-unresolved

‎src/discussions/post-comments/comments/CommentsView.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ const CommentsView = ({ threadType }) => {
9292
variant="plain"
9393
block="true"
9494
className="card mb-4 px-0 border-0 py-10px mt-2 font-style font-weight-500
95-
line-height-24 text-primary-500"
95+
line-height-24 text-primary-500 bg-white"
9696
onClick={handleAddResponse}
9797
data-testid="add-response"
9898
>

‎src/index.scss

+20-23
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
@import "~@edx/brand/paragon/fonts.scss";
2-
@import "~@edx/brand/paragon/variables.scss";
3-
@import "~@openedx/paragon/scss/core/core.scss";
4-
@import "~@edx/brand/paragon/overrides.scss";
1+
@use "@openedx/paragon/styles/css/core/custom-media-breakpoints.css" as paragonCustomMediaBreakpoints;
52

63
@import "~@edx/frontend-component-footer/dist/footer";
74
@import "~@edx/frontend-component-header/dist/index";
@@ -41,23 +38,23 @@ body,
4138
}
4239

4340
.text-staff-color {
44-
color: $warning-700;
41+
color: var(--pgn-color-warning-700);
4542
}
4643

4744
.outline-staff-color {
48-
outline: $warning-700 solid 2px;
45+
outline: var(--pgn-color-warning-700) solid 2px;
4946
}
5047

5148
.text-TA-color {
52-
color: $success-700;
49+
color: var(--pgn-color-success-700);
5350
}
5451

5552
.outline-TA-color {
56-
outline: $success-700 solid 2px;
53+
outline: var(--pgn-color-success-700) solid 2px;
5754
}
5855

5956
.outline-anonymous {
60-
outline: $light-400 solid 2px;
57+
outline: var(--pgn-color-light-400) solid 2px;
6158
}
6259

6360
.font-size-8 {
@@ -173,7 +170,7 @@ body,
173170
}
174171

175172
.learner > a:hover {
176-
background-color: $light-300;
173+
background-color: var(--pgn-color-light-300);
177174
}
178175

179176
.py-10px {
@@ -252,12 +249,12 @@ header {
252249
}
253250

254251
.border-light-400-2 {
255-
border: 2px solid $light-400 !important;
252+
border: 2px solid var(--pgn-color-light-400) !important;
256253
border-width: 2px !important;
257254
}
258255

259256
.border-primary-500-2 {
260-
border: 2px solid $primary-500 !important;
257+
border: 2px solid var(--pgn-color-primary-500) !important;
261258
border-width: 2px !important;
262259
}
263260

@@ -383,8 +380,8 @@ header {
383380
}
384381

385382
.btn-icon.btn-icon-primary:hover {
386-
background-color: $light-300 !important;
387-
color: $primary-500 !important
383+
background-color: var(--pgn-color-light-300) !important;
384+
color: var(--pgn-color-primary-500) !important
388385
}
389386

390387

@@ -427,38 +424,38 @@ header {
427424
}
428425

429426
.hover-button:hover {
430-
background-color: $light-300 !important;
427+
background-color: var(--pgn-color-light-300) !important;
431428
height: 36px !important;
432429
border: none !important;
433430
}
434431

435432
.btn-tertiary:hover {
436-
background-color: $light-300 !important;
433+
background-color: var(--pgn-color-light-300) !important;
437434
}
438435

439436
.nav-button-group {
440437
.nav-link {
441438
&:hover {
442-
background-color: $light-300 !important;
439+
background-color: var(--pgn-color-light-300) !important;
443440
}
444441
}
445442

446443
.nav-link.active,
447444
.show>.nav-link {
448-
background-color: $primary-500 !important;
445+
background-color: var(--pgn-color-primary-500) !important;
449446
}
450447
}
451448

452449
.course-tabs-navigation {
453450
.nav a {
454451
&:hover {
455-
background-color: $light-300 !important;;
452+
background-color: var(--pgn-color-light-300) !important;;
456453
}
457454
}
458455
}
459456

460457
.btn-tertiary:disabled {
461-
color: $gray-700 !important;
458+
color: var(--pgn-color-gray-700) !important;
462459
background-color: transparent !important;
463460
}
464461

@@ -535,14 +532,14 @@ code {
535532
.post-preview,
536533
.discussion-comments {
537534
blockquote {
538-
border-left: 2px solid $gray-200;
535+
border-left: 2px solid var(--pgn-color-gray-200);
539536
margin-left: 1.5rem;
540537
padding-left: 1rem;
541538
}
542539
}
543540

544541
.add-comment-btn {
545-
border: 1px solid $light-300 !important;
542+
border: 1px solid var(--pgn-color-light-300) !important;
546543
}
547544

548545
.icon-size-24 {
@@ -588,7 +585,7 @@ code {
588585
}
589586

590587
th, td {
591-
border: 1px dashed $gray-200;
588+
border: 1px dashed var(--pgn-color-gray-200);
592589
padding: 0.4rem;
593590
white-space: nowrap;
594591
}

0 commit comments

Comments
 (0)