Skip to content

[BD-46] feat: added support Paragon design tokens #351

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 15 commits into from
Mar 18, 2025
Merged

[BD-46] feat: added support Paragon design tokens #351

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
9e95158
feat: added support Paragon design tokens
PKulkoRaccoonGang Jun 15, 2023
8373dc4
refactor: styles refactoring
PKulkoRaccoonGang Jun 22, 2023
2e3f393
refactor: removed paragon imports
PKulkoRaccoonGang Aug 9, 2023
dcae599
refactor: moving the Paragon and Platform in peer and dev dependencies
PKulkoRaccoonGang Aug 9, 2023
17fb1d1
feat: add studio header styles and remove unused styles
dcoa Jun 5, 2024
b51c82a
fix: update example app and dependencies
dcoa Jun 5, 2024
c6e7e87
fix: update padding in couse title for learning header
dcoa Jun 17, 2024
24b65b6
refactor: added dist folder
PKulkoRaccoonGang Jun 29, 2024
d066c85
chore: update peerDeps
dcoa Jan 28, 2025
534ed7a
test: update dist folder
dcoa Jan 28, 2025
83e0fbb
chore: updated dist after rebase
PKulkoRaccoonGang Feb 27, 2025
11ce896
chore: update frontend-platform and frontend-plugin-framework
dcoa Mar 11, 2025
0ab3216
fix: update to no breaking change
dcoa Mar 14, 2025
27b8411
fix: implement feedback
dcoa Mar 15, 2025
57ae6a2
revert: remove dist forlder
dcoa Mar 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,4 @@ module.config.js
.idea/

.vscode
src/i18n/messages
src/i18n/messages
6 changes: 2 additions & 4 deletions example/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
@import "@edx/brand/paragon/fonts";
@import "@edx/brand/paragon/variables";
@import "@openedx/paragon/scss/core/core";
@import "@edx/brand/paragon/overrides";
@use "@openedx/paragon/dist/core.min.css" as paragonCore;
@use "@openedx/paragon/dist/light.min.css" as paragonLight;
Comment on lines +1 to +2
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I got errors when I had this in frontend-app-learning's index.scss

ERROR in ./src/index.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[2]!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[4]!./src/index.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
  ╷
3 │ @use "@openedx/paragon/dist/core.min.css" as paragonCore;

I was able to work around it by using

@use "../node_modules/@openedx/paragon/dist/core.min.css" as paragonCore;
@use "../node_modules/@openedx/paragon/dist/light.min.css" as paragonLight;

which feels less than ideal. My assumption is that can be fixed by some webpack config changes. I consider this non-blocking but worth noting.


@import "@edx/frontend-component-header/index";
6,819 changes: 4,952 additions & 1,867 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,10 @@
"devDependencies": {
"@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
"@edx/browserslist-config": "^1.1.1",
"@edx/frontend-platform": "8.3.1",
"@edx/frontend-platform": "^8.3.1",
"@edx/reactifex": "^2.1.1",
"@openedx/frontend-build": "14.2.2",
"@openedx/paragon": "22.16.0",
"@openedx/paragon": "^23.0.0",
"@testing-library/dom": "10.4.0",
"@testing-library/jest-dom": "5.17.0",
"@testing-library/react": "10.4.9",
Expand All @@ -60,7 +60,7 @@
"@fortawesome/free-regular-svg-icons": "6.6.0",
"@fortawesome/free-solid-svg-icons": "6.6.0",
"@fortawesome/react-fontawesome": "^0.2.0",
"@openedx/frontend-plugin-framework": "^1.3.0",
"@openedx/frontend-plugin-framework": "^1.6.0",
"axios-mock-adapter": "1.22.0",
"babel-polyfill": "6.26.0",
"classnames": "^2.5.1",
Expand All @@ -70,7 +70,7 @@
},
"peerDependencies": {
"@edx/frontend-platform": "^7.0.0 || ^8.0.0",
"@openedx/paragon": "^22.0.0",
"@openedx/paragon": ">= 22.0.0 < 24.0.0",
"prop-types": "^15.5.10",
"react": "^16.9.0 || ^17.0.0",
"react-dom": "^16.9.0 || ^17.0.0",
Expand Down
12 changes: 6 additions & 6 deletions src/Menu/menu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,45 @@
.menu {
position: relative;
}

.menu-content {
position: absolute;
top: 100%;
z-index: 10;
background: #fff;
background: var(--pgn-color-white, #fff);
min-width: 10rem;

&.pin-left {
left: 0;
}

&.pin-right {
right: 0;
}
}


.menu-dropdown-enter {
opacity: 0;
transform-origin: 75% 0;
transform: scale3d(0.8, 0.8, 1);
}

.menu-dropdown-enter-active {
transform-origin: 75% 0;
transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
transform: scale3d(1, 1, 1);
opacity: 1;
}
.menu-dropdown-enter-done {
}

.menu-dropdown-exit {
transform-origin: 75% 0;
transform: scale3d(1, 1, 1);
opacity: 1;
}

.menu-dropdown-exit-active {
transform-origin: 75% 0;
transform: scale3d(0.8, 0.8, 1);
transition: all 250ms cubic-bezier(0.8, 0, 0.6, 1);
opacity: 0;
}
.menu-dropdown-exit-done {
}
51 changes: 29 additions & 22 deletions src/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
$spacer: 1rem;
$blue: #007db8;
$white: #fff;
$component-active-bg: #0A3055FF !default;
$component-active-color: $white !default;
$rounded-pill: 50rem !default;

@import './Menu/menu.scss';
@import './studio-header/StudioHeader.scss';
Expand All @@ -21,8 +24,9 @@ $white: #fff;
padding: .75rem;
justify-content: center;
align-items:center;

&:hover, &:focus {
background: rgba(0,0,0,.1);
background: rgba(0, 0, 0, .1);
}
}

Expand All @@ -36,17 +40,12 @@ $white: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-bottom: 0.1rem;
padding-bottom: calc(var(--pgn-spacing-spacer-base, $spacer)* 0.1);
}
}

.user-dropdown {
.btn {
height: 3rem;
// @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
// padding: 0 0.5rem;
// }
}
.user-dropdown .btn {
height: 3rem;
}
}

Expand All @@ -63,26 +62,30 @@ $white: #fff;
text-decoration: none;
cursor: pointer;
}

img {
height: 1.5rem;
}
}


.site-header-desktop {
box-shadow: 0 1px 0 0 rgba(0,0,0,.1);
background: $white;
box-shadow: 0 1px 0 0 rgba(0, 0, 0, .1);
background: var(--pgn-color-white, $white);

.nav-link {
text-decoration: none;
}

.logo {
display: block;
box-sizing: content-box;
position: relative;
top: -.05em;
height: 1.75rem;
padding: 1rem 0;
margin-right: 1rem;
padding: var(--pgn-spacing-spacer-base, $spacer) 0;
margin-right: var(--pgn-spacing-spacer-base, $spacer);

img {
display: block;
height: 100%;
Expand All @@ -93,38 +96,42 @@ $white: #fff;
.nav-link:focus,
.nav-link.active,
.expanded .nav-link {
background: $component-active-bg;
color: $component-active-color;
background: var(--pgn-color-bg-active, $component-active-bg);
color: var(--pgn-color-active, $component-active-color);
}
}
.main-nav {
.nav-link {
padding: 1.125rem 1rem;
padding: 1.125rem var(--pgn-spacing-spacer-base, $spacer);
text-decoration: none;
font-weight: 500;
letter-spacing: .01em;
}

.nav-link:hover,
.nav-link:focus,
.nav-link.active,
.expanded .nav-link {
background: $component-active-bg;
color: $component-active-color;
background: var(--pgn-color-bg-active, $component-active-bg);
color: var(--pgn-color-active, $component-active-color);
}

.menu {
position: static;

.menu-content {
border-top: solid 2px $component-active-bg;
border-top: solid 2px var(--pgn-color-bg-active);
left: 0;
right: 0;
box-shadow: 0 1px 2px rgba(0,0,0,.25);
box-shadow: var(--pgn-elevation-box-shadow-down-1, 0 1px 2px rgba(0,0,0,.25));
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
padding: 1rem;
padding: var(--pgn-spacing-spacer-base, $spacer);
}
}
}

.search-input {
border-radius: $rounded-pill;
border-radius: var(--pgn-size-rounded-pill, $rounded-pill);
}
}
12 changes: 6 additions & 6 deletions src/studio-header/StudioHeader.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@ $white: #FFFFFF;

height: 3.75rem;
box-shadow: 0 1px 0 0 rgb(0 0 0 / .1);
background: $white;
background: var(--pgn-color-white, $white);

.btn-outline-primary {
border-color: $white;
border-color: var(--pgn-color-white, $white);
}

.logo {
Expand All @@ -19,8 +19,8 @@ $white: #FFFFFF;
position: relative;
top: -.05em;
height: 1.75rem;
padding: $spacer 0;
margin-right: $spacer;
padding: var(--pgn-spacing-spacer-base, $spacer) 0;
margin-right: var(--pgn-spacing-spacer-base, $spacer);

img {
display: block;
Expand All @@ -33,13 +33,13 @@ $white: #FFFFFF;

@media only screen and (min-width: 769px) {
padding: .5rem;
padding-right: $spacer;
padding-right: var(--pgn-spacing-spacer-base, $spacer);
border-right: 1px solid #E5E5E5;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nit, non-blocking]: hardcoded HEX value; is it worth swapping to a token/CSS variable? This color doesn't appear to an official Paragon color (presumably, it should be one of the officially supported gray levels)

width: 70%;
}

span {
color: #333333;
color: var(--pgn-color-gray-800, #333333);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Expand Down
4 changes: 3 additions & 1 deletion webpack.dev.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@ const path = require('path');
const { createConfig } = require('@openedx/frontend-build');

module.exports = createConfig('webpack-dev', {
entry: path.resolve(__dirname, 'example'),
entry: {
app: path.resolve(__dirname, 'example'),
},
output: {
path: path.resolve(__dirname, 'example/dist'),
publicPath: '/',
Expand Down