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

PKulkoRaccoonGang · 2023-06-15T18:45:58Z

Important

Update frontend-platform to a version compatible with Paragon 23.
Needs openedx/frontend-platform#689 to be merged.

Issue: openedx/paragon#2348

openedx-webhooks · 2023-06-15T18:46:03Z

Thanks for the pull request, @PKulkoRaccoonGang!

When this pull request is ready, tag your edX technical lead.

package.json

This PR purpose is to test/demo parago design tokens simliar to this one for the profile openedx/frontend-app-profile/pull/764 it override the following depns as seen in package.json - paragon alpha - openedx/frontend-build/pull/365 - openedx/frontend-platform/pull/440 - openedx/frontend-component-header/pull/351 - openedx/frontend-component-footer/pull/303 Conclousion so far: - There is an extra library that learning depends on which needs to support paragon; `frontend-lib-learning-assistant` and also `frontend-lib-special-exams` - It would be great to have a gudie or a document to look at, while doing the conversion that would **map variable from who it was used/named before to the name in design tokens** - I was stuck in the end with compliation error, that wepack couldn't find `Modal` exported from paragon.

Mashal-m · 2023-11-17T07:31:17Z

Hey @PKulkoRaccoonGang, What is the current status of this PR, is it ready to review and merge?
Could you please resolve conflicts?

Mashal-m · 2023-11-17T07:35:26Z

Hey @PKulkoRaccoonGang, What is the current status of this PR, is it ready to review and merge?
Could you please resolve conflicts?

abdullahwaheed · 2023-12-28T07:02:35Z

hi @PKulkoRaccoonGang is this PR still active or should we close it?

PKulkoRaccoonGang · 2024-05-23T08:10:20Z

@Mashal-m @abdullahwaheed Hello! At the moment, all pull requests opened in the edx and openex repositories are awaiting further action on the use of Paragon design tokens in the MFE. Don't pay any attention to them for now.

Full list of pull requests that should just be open for now:

dcoa · 2024-06-05T00:39:50Z

Hi @PKulkoRaccoonGang, thanks for this. I checked these changes and it is still relevant, the only thing left to do is rebase to master, and once the new packages are created update frontend-platform and paragon.

Also with the changes in frontend-build the webpack.dev.config.js needs a change for the example app, the change is only in the entry key:

  entry: {
    app: path.resolve(__dirname, 'example'),
  },

dcoa · 2024-06-05T06:24:20Z

example/index.scss

-@import "@edx/brand/paragon/variables";
-@import "@edx/paragon/scss/core/core";
-@import "@edx/brand/paragon/overrides";
-
 @import "@edx/frontend-component-footer/footer";


Suggested change

@import "@edx/frontend-component-footer/footer";

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

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

@import "@edx/frontend-component-footer/footer";

For the example app, I think we can use the Paragon installed versions, in this way, it's not necessary to add a js config file, and the styles are applied only for the example app.

codecov · 2025-03-11T01:59:40Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 91.22%. Comparing base (1d7a871) to head (964378a).
Report is 1 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #303   +/-   ##
=======================================
  Coverage   91.22%   91.22%           
=======================================
  Files           5        5           
  Lines          57       57           
  Branches       19       19           
=======================================
  Hits           52       52           
  Misses          5        5

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

dcoa · 2025-03-11T02:03:45Z

@PKulkoRaccoonGang @brian-smith-tcril

The dependencies has been updated, I think we can open this PR and do the final review. :)

brian-smith-tcril · 2025-03-11T15:50:49Z

src/_footer.scss

 .footer {
-  background-color: $gray-footer;
+  background-color: var(--pgn-color-light-100);


Is it possible to do this in a non-breaking way by utilizing fallbacks?

I think with fallbacks we'd be able to keep $gray-footer and have

Suggested change

background-color: var(--pgn-color-light-100);

background-color: var(--pgn-color-light-100, $gray-footer);

I made the change and is working with paragon 23 and 22

Perfect! Once dist is re-.gitignored this PR should be good to go!

Dist folder removed and gitignore restored.

chore: update paragon peerdependencies no breaking change refactor: update to no breaking change refactor: update to no breaking change refactor: update to no breaking change

openedx-webhooks added the blended PR is managed through 2U's blended developmnt program label Jun 15, 2023

PKulkoRaccoonGang marked this pull request as draft June 15, 2023 18:46

PKulkoRaccoonGang mentioned this pull request Jun 15, 2023

Understand and address design tokens & CSS variable related issues in @edx/frontend-component-* repos openedx/paragon#2348

Open

PKulkoRaccoonGang self-assigned this Jun 15, 2023

monteri approved these changes Jun 23, 2023

View reviewed changes

PKulkoRaccoonGang requested review from adamstankiewicz and monteri June 29, 2023 06:34

monteri approved these changes Aug 9, 2023

View reviewed changes

package.json Outdated Show resolved Hide resolved

PKulkoRaccoonGang marked this pull request as ready for review August 9, 2023 13:11

PKulkoRaccoonGang force-pushed the Peter_Kulko/support-design-tokens branch from 854fb53 to 9edae71 Compare August 9, 2023 13:57

PKulkoRaccoonGang requested a review from monteri August 9, 2023 14:07

PKulkoRaccoonGang force-pushed the Peter_Kulko/support-design-tokens branch from 9edae71 to 1b0fa1f Compare August 18, 2023 10:55

ghassanmas mentioned this pull request Sep 6, 2023

[do not merge] DEMO: design tokens and CSS variables openedx/frontend-app-profile#764

Draft

ghassanmas mentioned this pull request Oct 6, 2023

[DRAFT] feat: add support to paragon design tokens openedx/frontend-app-learning#1203

Closed

PKulkoRaccoonGang mentioned this pull request Nov 17, 2023

[BD-46] feat: added support Paragon design tokens openedx/frontend-component-header#351

Merged

PKulkoRaccoonGang marked this pull request as draft December 18, 2023 09:25

This was referenced May 23, 2024

[BD-46] feat: added support Paragon design tokens edx/frontend-component-header-edx#393

Draft

[BD-46] feat: added support Paragon design tokens edx/frontend-component-footer-edx#294

Draft

dcoa reviewed Jun 5, 2024

View reviewed changes

dcoa force-pushed the Peter_Kulko/support-design-tokens branch from 1b0fa1f to 63c4dca Compare June 5, 2024 11:20

dcoa mentioned this pull request Jun 13, 2024

openedx/frontend-component-footer openedx/paragon#3066

Closed

dcoa force-pushed the Peter_Kulko/support-design-tokens branch from 63c4dca to e97fb66 Compare June 26, 2024 01:03

PKulkoRaccoonGang mentioned this pull request Jun 30, 2024

testing: Using Paragon CSS External Hosting (JavaScript-based configuration) openedx/frontend-app-discussions#707

Closed

This was referenced Mar 7, 2025

feat: support design tokens and paragon 23 openedx/frontend-app-gradebook#433

Open

feat: support design tokens and paragon 23 openedx/frontend-app-ora#279

Open

PKulkoRaccoonGang and others added 9 commits March 11, 2025 12:36

feat: added support Paragon design tokens

af36b14

refactor: added brand

ade12c0

refactor: removed paragon imports

26e5dd6

fix: update example

148e0f5

chore: regenrate package-lock.json

24dad12

refactor: added dist folder

f0db448

test: regenerate dist folder for testing

3b453ae

chore: updated dist after rebase

c9457c5

chore: update frontend-plugin-framework

21ff55f

dcoa force-pushed the Peter_Kulko/support-design-tokens branch from 427c7f3 to 21ff55f Compare March 11, 2025 01:57

This was referenced Mar 11, 2025

feat: update dependencies for css compatibility openedx/frontend-template-application#869

Open

feat: support design tokens and paragon 23 openedx/frontend-app-support-tools#450

Open

brian-smith-tcril reviewed Mar 11, 2025

View reviewed changes

PKulkoRaccoonGang marked this pull request as ready for review March 11, 2025 22:59

refactor: update to no breaking change

1c47eee

chore: update paragon peerdependencies no breaking change refactor: update to no breaking change refactor: update to no breaking change refactor: update to no breaking change

dcoa force-pushed the Peter_Kulko/support-design-tokens branch from a15e094 to 1c47eee Compare March 11, 2025 23:15

revert: delate temporal dist forlder

964378a

brian-smith-tcril approved these changes Mar 13, 2025

View reviewed changes

adamstankiewicz approved these changes Mar 13, 2025

View reviewed changes

brian-smith-tcril merged commit 10fc7a2 into openedx:master Mar 13, 2025
6 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

PKulkoRaccoonGang commented Jun 15, 2023 •

edited

Loading

openedx-webhooks commented Jun 15, 2023 •

edited

Loading

Mashal-m commented Nov 17, 2023

Mashal-m commented Nov 17, 2023

abdullahwaheed commented Dec 28, 2023

PKulkoRaccoonGang commented May 23, 2024

dcoa commented Jun 5, 2024 •

edited

Loading

dcoa Jun 5, 2024

PKulkoRaccoonGang Feb 27, 2025

codecov bot commented Mar 11, 2025 •

edited

Loading

dcoa commented Mar 11, 2025

brian-smith-tcril Mar 11, 2025

dcoa Mar 11, 2025

brian-smith-tcril Mar 12, 2025

dcoa Mar 13, 2025

	background-color: var(--pgn-color-light-100);
	background-color: var(--pgn-color-light-100, $gray-footer);

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

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

Conversation

PKulkoRaccoonGang commented Jun 15, 2023 • edited Loading

openedx-webhooks commented Jun 15, 2023 • edited Loading

Mashal-m commented Nov 17, 2023

Mashal-m commented Nov 17, 2023

abdullahwaheed commented Dec 28, 2023

PKulkoRaccoonGang commented May 23, 2024

dcoa commented Jun 5, 2024 • edited Loading

dcoa Jun 5, 2024

Choose a reason for hiding this comment

PKulkoRaccoonGang Feb 27, 2025

Choose a reason for hiding this comment

codecov bot commented Mar 11, 2025 • edited Loading

Codecov Report

dcoa commented Mar 11, 2025

brian-smith-tcril Mar 11, 2025

Choose a reason for hiding this comment

dcoa Mar 11, 2025

Choose a reason for hiding this comment

brian-smith-tcril Mar 12, 2025

Choose a reason for hiding this comment

dcoa Mar 13, 2025

Choose a reason for hiding this comment

PKulkoRaccoonGang commented Jun 15, 2023 •

edited

Loading

openedx-webhooks commented Jun 15, 2023 •

edited

Loading

dcoa commented Jun 5, 2024 •

edited

Loading

codecov bot commented Mar 11, 2025 •

edited

Loading