From 2f0d421c9feb7e95e1c2971e29afd91d69e65dd3 Mon Sep 17 00:00:00 2001
From: Marcos Rigoli <rigoli82@gmail.com>
Date: Thu, 2 Jan 2025 12:45:46 -0300
Subject: [PATCH] fix: Fixed Paragon scss var reference for CI (#78)

---
 package-lock.json                           | 10 +++++-----
 package.json                                |  2 +-
 src/components/MessageForm/MessageForm.scss |  8 +++++---
 src/utils/_variables.scss                   |  5 +++++
 4 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ab909cb1..96f4e1b4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "1.0.0-semantically-released",
       "license": "AGPL-3.0",
       "dependencies": {
-        "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
+        "@edx/brand": "npm:@openedx/brand-openedx@1.2.3",
         "@optimizely/react-sdk": "^2.9.2",
         "react-markdown": "^8.0.5",
         "uuid": "9.0.0"
@@ -2152,10 +2152,10 @@
       }
     },
     "node_modules/@edx/brand": {
-      "name": "@edx/brand-openedx",
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@edx/brand-openedx/-/brand-openedx-1.2.0.tgz",
-      "integrity": "sha512-r4PDN3rCgDsLovW44ayxoNNHgG5I4Rvss6MG5CrQEX4oW8YhQVEod+jJtwR5vi0mFLN2GIaMlDpd7iIy03VqXg=="
+      "name": "@openedx/brand-openedx",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@openedx/brand-openedx/-/brand-openedx-1.2.3.tgz",
+      "integrity": "sha512-Dn9CtpC8fovh++Xi4NF5NJoeR9yU2yXZnV9IujxIyGd/dn0Phq5t6dzJVfupwq09mpDnzJv7egA8Znz/3ljO+w=="
     },
     "node_modules/@edx/browserslist-config": {
       "version": "1.2.0",
diff --git a/package.json b/package.json
index d7af8941..8ce66831 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
   },
   "dependencies-note": "Most deps are peer deps because they're specified by frontend-app-learning.",
   "dependencies": {
-    "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
+    "@edx/brand": "npm:@openedx/brand-openedx@1.2.3",
     "@optimizely/react-sdk": "^2.9.2",
     "react-markdown": "^8.0.5",
     "uuid": "9.0.0"
diff --git a/src/components/MessageForm/MessageForm.scss b/src/components/MessageForm/MessageForm.scss
index 8c8aed5b..d5adeefa 100644
--- a/src/components/MessageForm/MessageForm.scss
+++ b/src/components/MessageForm/MessageForm.scss
@@ -1,14 +1,16 @@
+@use '../../utils/variables' as var;
+
 .message-form {
   padding: 0.75rem 1.5rem;
 
   .send-message-input {
     .pgn__form-control-floating-label {
-      color: $gray-300;
+      color: var.$gray-300;
     }
 
     input {
       border-radius: 1rem;
-      border: 1px solid $gray-200;
+      border: 1px solid var.$gray-200;
     }
   }
 
@@ -17,6 +19,6 @@
   }
 
   button {
-    color: $gray-400;
+    color: var.$gray-400;
   }
 }
diff --git a/src/utils/_variables.scss b/src/utils/_variables.scss
index 00acb66f..25626eda 100644
--- a/src/utils/_variables.scss
+++ b/src/utils/_variables.scss
@@ -1,2 +1,7 @@
 $dark-green: #0e3639;
 $accent-yellow: #f0cc00;
+
+// Paragon variables: https://github.com/edx/brand-edx.org/blob/master/paragon/_variables.scss
+$gray-200: #cccccc !default;
+$gray-300: #adadad !default;
+$gray-400: #8f8f8f !default;