feat: add support for design tokens and CSS variables

openedx · Sep 6, 2023 · 2bf85e7 · 2bf85e7
1 parent 45e4bc5
commit 2bf85e7
Show file tree

Hide file tree

Showing 9 changed files with 2,569 additions and 4,486 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -38,9 +38,9 @@
   "homepage": "https://github.com/edx/frontend-lib-content-components#readme",
   "devDependencies": {
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-build": "12.8.27",
-    "@edx/frontend-platform": "4.2.0",
-    "@edx/paragon": "^20.45.0",
+    "@edx/frontend-build": "github:openedx/frontend-build#ags/2321",
+    "@edx/frontend-platform": "github:openedx/frontend-platform#ags/inject-theme-css",
+    "@edx/paragon": "21.0.0-alpha.41",
     "@edx/reactifex": "^2.1.1",
     "@testing-library/dom": "^8.13.0",
     "@testing-library/jest-dom": "^5.16.5",

diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/index.scss b/src/editors/containers/ProblemEditor/components/EditProblemView/index.scss
@@ -32,7 +32,7 @@
       content: '';
       position: relative;
       left: 5px;
-      border: 1px solid #eae6e5;
+      border: 1px solid var(--pgn-color-light-400);
       height: 24px;
     }
   }

diff --git a/...containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/index.scss b/...containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/index.scss
@@ -1,5 +1,3 @@
-@import "@edx/paragon/scss/core/core";
-
 .total-label {
-    border: 1px solid $gray-500;
+    border: 1px solid var(--pgn-color-gray-500);
 }
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/index.jsx
@@ -15,7 +15,6 @@ import ThumbnailWidget from './components/ThumbnailWidget';
 import TranscriptWidget from './components/TranscriptWidget';
 import VideoSourceWidget from './components/VideoSourceWidget';
 import VideoPreviewWidget from './components/VideoPreviewWidget';
-import './index.scss';
 import SocialShareWidget from './components/SocialShareWidget';
 import messages from '../../messages';
 

diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/index.scss b/src/editors/containers/VideoEditor/components/VideoSettingsModal/index.scss
diff --git a/src/editors/containers/VideoUploadEditor/index.scss b/src/editors/containers/VideoUploadEditor/index.scss
@@ -1,5 +1,5 @@
 .dropzone-middle {
-  border: 2px dashed #ccc;
+  border: 2px dashed var(--pgn-color-gray-200);
 
   &.active {
     border: 2px solid #262626; /* change color when active */
@@ -22,7 +22,7 @@
   left: 50%;
   transform: translateX(-50%);
   margin-top: 1rem;
-  border: 1px solid #707070;
+  border: 1px solid var(--pgn-color-gray-500);
   width: 308px;
 
   input {
@@ -31,17 +31,17 @@
   }
 
   input::placeholder {
-    color: #454545;
+    color: var(--pgn-color-gray-700);
   }
 
   button {
     border: none !important;
-    background-color: #FFFFFF;
+    background-color: var(--pgn-color-white);
   }
 }
 
 .error-message {
-  color: #AB0D02;
+  color: var(--pgn-color-danger-500);
   margin-top: 20rem;
 }
 

diff --git a/src/editors/sharedComponents/CodeEditor/index.scss b/src/editors/sharedComponents/CodeEditor/index.scss
@@ -1,2 +1,7 @@
-.cm-editor { height: 100% }
-.cm-scroller { overflow: auto }
+.cm-editor {
+    height: 100%
+}
+
+.cm-scroller {
+    overflow: auto
+}
diff --git a/src/editors/sharedComponents/ExpandableTextArea/index.scss b/src/editors/sharedComponents/ExpandableTextArea/index.scss
@@ -1,7 +1,7 @@
 .expandable-mce {
 
   .error {
-    outline: 2px solid #CA3A2F;
+    outline: 2px solid var(--pgn-color-danger-300);
   }
   .mce-content-body {
     padding: 10px;
@@ -12,14 +12,14 @@
       margin: 16px 40px;
     }
   }
-  
+
   *[contentEditable=false] {
-    outline: 1px solid #D7D3D1;
+    outline: 1px solid var(--pgn-color-light-700);
   }
   *[contentEditable=true] {
-    outline: 1px solid #707070;
+    outline: 1px solid var(--pgn-color-gray-500);
     &:focus, &:active {
-      outline: 2px solid #000;
+      outline: 2px solid var(--pgn-color-black);
     }
   }
 }