docs: replaced SCSS variables with CSS variables on the Colors page (#…

…2376)

* docs: replaced SCSS variables with CSS variables on the Colors page of the documentation site

* refactor: refactoring after review

* refactor: refactoring after review

* fix: removed extra commons.css generation

* refactor: code refactoring

* refactor: removed Colors package

www/package.json

@@ -12,7 +12,6 @@
     "analytics-node": "^6.0.0",
     "axios": "^0.28.0",
     "classnames": "^2.3.1",
-    "color": "^4.2.3",
     "gatsby": "^4.23.1",
     "gatsby-plugin-manifest": "^4.17.0",
     "gatsby-plugin-mdx": "^3.17.0",
@@ -38,8 +37,8 @@
     "rehype-slug": "^4.0.1",
     "sass": "^1.53.0",
     "sass-loader": "12.6.0",
-    "uuid": "^9.0.0",
-    "slugify": "^1.6.5"
+    "slugify": "^1.6.5",
+    "uuid": "^9.0.0"
   },
   "keywords": [
     "paragon",
@@ -70,7 +69,6 @@
     "@babel/preset-typescript": "^7.16.7",
     "@edx/eslint-config": "^3.1.0",
     "@svgr/webpack": "6.5.1",
-    "@types/color": "^3.0.3",
     "@types/mdx": "^2.0.3",
     "@types/mdx-js__react": "^1.5.5",
     "@types/react-helmet": "^6.1.6",

www/src/components/PageLayout.tsx

@@ -29,11 +29,6 @@ import LeaveFeedback from './LeaveFeedback';
 import AutoToc from './AutoToc';
 import PageEditBtn from './PageEditBtn';
 
-if (process.env.NODE_ENV === 'development') {
-  /* eslint-disable-next-line global-require */
-  require('~paragon-style/scss/core/core.scss');
-}
-
 export interface ILayout {
   children: React.ReactNode,
   showMinimizedTitle: boolean,

www/src/components/_doc-elements.scss

@@ -324,3 +324,9 @@
 .pgn-doc__box-shadow-toolkit--controls-box--remove-btn svg {
   color: var(--pgn-color-white);
 }
+
+.color-palette {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
+  grid-row-gap: 2rem;
+}