feat: add support for design tokens and CSS variables

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",

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;
     }
   }

src/editors/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);
 }

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';
 

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 */
@@ -28,7 +28,7 @@
   transform: translateX(-50%);
 
   input::placeholder {
-    color: #454545;
+    color: var(--pgn-color-gray-700);
     // color: #5E35B1;
     font-family: 'Inter';
     font-weight: 500;
@@ -37,14 +37,19 @@
 
   button {
     border: none !important;
-    background-color: #FFFFFF;
+    background-color: var(--pgn-color-white);
   }
 
   .prompt-button {
     background: rgba(239, 234, 247, 0.70);
   }
 }
 
+.error-message {
+  color: var(--pgn-color-danger-500);
+  margin-top: 20rem;
+}
+
 .close-button-container {
   position: absolute;
   top: 25px;

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
+}

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);
     }
   }
 }