feat: update dependencies to work with Design Tokens

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@edx/frontend-lib-content-components",
-  "version": "1.0.0-semantically-released",
+  "name": "@raccoongang/frontend-lib-content-components",
+  "version": "2.5.3-tokens.1",
   "description": "A library of high-level components for content handling.",
   "main": "dist/index.js",
   "publishConfig": {
@@ -15,7 +15,8 @@
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
     "test": "fedx-scripts jest --coverage",
-    "addXblock": "node addXblock"
+    "addXblock": "node addXblock",
+    "replace-variables": "paragon replace-variables -p src -t usage"
   },
   "files": [
     "/dist"
@@ -27,24 +28,24 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/edx/frontend-lib-content-components.git"
+    "url": "git+https://github.com/raccoongang/frontend-lib-content-components.git"
   },
   "author": "edX",
   "license": "AGPL-3.0",
   "bugs": {
-    "url": "https://github.com/edx/frontend-lib-content-components/issues"
+    "url": "https://github.com/raccoongang/frontend-lib-content-components/issues"
   },
   "browserslist": [
     "extends @edx/browserslist-config"
   ],
-  "homepage": "https://github.com/edx/frontend-lib-content-components#readme",
+  "homepage": "https://github.com/raccoongang/frontend-lib-content-components#readme",
   "devDependencies": {
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-platform": "8.0.0",
-    "@edx/react-unit-test-utils": "3.0.0",
+    "@edx/frontend-platform": "npm:@raccoongang/[email protected]",
+    "@edx/react-unit-test-utils": "npm:@raccoongang/react-unit-test-utils@2.0.0-tokens.1",
     "@edx/reactifex": "^2.1.1",
-    "@openedx/frontend-build": "14.0.3",
-    "@openedx/paragon": "^22.0.0",
+    "@openedx/frontend-build": "npm:@raccoongang/[email protected]",
+    "@openedx/paragon": "23.0.0-alpha.4",
     "@testing-library/dom": "^8.13.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
@@ -99,8 +100,8 @@
     "xmlchecker": "^0.1.0"
   },
   "peerDependencies": {
-    "@edx/frontend-platform": "^7.0.1 || ^8.0.0",
-    "@openedx/paragon": "^21.5.7 || ^22.0.0",
+    "@edx/frontend-platform": "^7.0.1 || ^8.0.0 || ^7.1.2-tokens.1",
+    "@openedx/paragon": "^21.5.7 || ^22.0.0 || ^23.0.0-alpha.1",
     "prop-types": "^15.5.10",
     "react": "^16.14.0 || ^17.0.0",
     "react-dom": "^16.14.0 || ^17.0.0"

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.scss

@@ -1,5 +1,5 @@
 .settingsCardTitleSection {
-    padding-bottom: 0rem;
+    padding-bottom: 0;
 }
 
 .halfSpacedMessage {

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/index.scss

@@ -1,5 +1,3 @@
-@import "@openedx/paragon/scss/core/core";
-
 .total-label {
-    border: 1px solid $gray-500;
+    border: 1px solid var(--pgn-color-gray-500);
 }

src/editors/containers/VideoUploadEditor/index.scss

@@ -1,5 +1,3 @@
-@import "@openedx/paragon/scss/core/core";
-
 .dropzone-middle {
   border: 2px dashed #ccc;
 
@@ -14,24 +12,22 @@
 }
 
 .video-id-prompt {
-
   input::placeholder {
-    color: #454545;
-    // color: #5E35B1;
-    font-weight: '500';
-    word-wrap: 'break-word';
+    color: var(--pgn-color-gray-700);
+    font-weight: 500;
+    word-wrap: break-word;
   }
 
   button {
     border: none !important;
-    background-color: #FFFFFF;
+    background-color: var(--pgn-color-white);
   }
 
   .btn-icon.url-submit-button {
     &, &:active, &:hover {
       background-color: transparent !important;
       border: none !important;
-      color: $gray-500 !important;
+      color: var(--pgn-color-gray-500) !important;
     }
   }
 

src/editors/sharedComponents/CodeEditor/index.scss

@@ -1,2 +1,2 @@
 .cm-editor { height: 100% }
-.cm-scroller { overflow: auto }
+.cm-scroller { overflow: auto }

src/editors/sharedComponents/ExpandableTextArea/index.scss

@@ -1,7 +1,6 @@
 .expandable-mce {
-
   .error {
-    outline: 2px solid #CA3A2F;
+    outline: 2px solid #ca3a2f;
   }
   .mce-content-body {
     padding: 10px;
@@ -12,14 +11,14 @@
       margin: 16px 40px;
     }
   }
-  
+
   *[contentEditable=false] {
-    outline: 1px solid #D7D3D1;
+    outline: 1px solid #d7d3d1;
   }
   *[contentEditable=true] {
-    outline: 1px solid #707070;
+    outline: 1px solid var(--pgn-color-gray-base);
     &:focus, &:active {
-      outline: 2px solid #000;
+      outline: 2px solid var(--pgn-color-black);
     }
   }
 }

src/editors/sharedComponents/SelectableBox/index.scss

@@ -3,7 +3,7 @@
 .pgn__selectable_box-set {
   display: grid;
   grid-auto-rows: 1fr;
-  grid-gap: $selectable-box-space;
+  grid-gap: var(--pgn-spacing-selectable-box-box-space);
 
   @for $i from $min-cols-number through $max-cols-number {
     &.pgn__selectable_box-set--#{$i} {
@@ -19,21 +19,21 @@
 .pgn__selectable_box {
   position: relative;
   height: 100%;
-  padding: $selectable-box-padding;
-  box-shadow: $level-1-box-shadow;
-  border-radius: $selectable-box-border-radius;
+  padding: var(--pgn-spacing-selectable-box-padding);
+  box-shadow: var(--pgn-elevation-box-shadow-level-1);
+  border-radius: var(--pgn-spacing-selectable-box-border-radius);
   text-align: start;
-  background: $white;
+  background: var(--pgn-color-white);
 
   &:focus-visible {
-    outline: 1px solid $primary-700;
+    outline: 1px solid var(--pgn-color-primary-700);
   }
 
   .pgn__form-radio,
   .pgn__form-checkbox {
     position: absolute;
-    top: $selectable-box-padding;
-    inset-inline-end: $selectable-box-padding;
+    top: var(--pgn-spacing-selectable-box-padding);
+    inset-inline-end: var(--pgn-spacing-selectable-box-padding);
 
     input {
       margin-inline-end: 0;
@@ -46,9 +46,9 @@
 }
 
 .pgn__selectable_box-active {
-  outline: 2px solid $primary-500;
+  outline: 2px solid var(--pgn-color-primary-500);
 }
 
 .pgn__selectable_box-invalid {
-  outline: 2px solid $danger-300;
+  outline: 2px solid var(--pgn-color-danger-300);
 }