From 3959934202830dd999701ee0070d63099e4eb197 Mon Sep 17 00:00:00 2001
From: PKulkoRaccoonGang <peter.kulko@raccoongang.com>
Date: Fri, 8 Sep 2023 13:11:08 +0300
Subject: [PATCH] fix: removed extra commons.css generation

---
 www/src/components/PageLayout.tsx    |  5 -----
 www/src/pages/foundations/colors.tsx | 12 ++++++------
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/www/src/components/PageLayout.tsx b/www/src/components/PageLayout.tsx
index 440e9f4577d..a5e13758193 100644
--- a/www/src/components/PageLayout.tsx
+++ b/www/src/components/PageLayout.tsx
@@ -27,11 +27,6 @@ import { SettingsContext } from '../context/SettingsContext';
 import LeaveFeedback from './LeaveFeedback';
 import AutoToc from './AutoToc';
 
-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,
diff --git a/www/src/pages/foundations/colors.tsx b/www/src/pages/foundations/colors.tsx
index 9a61abbd0f3..0f16c105d23 100644
--- a/www/src/pages/foundations/colors.tsx
+++ b/www/src/pages/foundations/colors.tsx
@@ -55,10 +55,10 @@ export interface ISwatch {
   isUnused?: boolean,
 }
 
-const styles = getComputedStyle(document.body);
+const styles = typeof window !== `undefined` ? getComputedStyle(document.body) : null;
 
 function Swatch({ name, colorClassName, isUnused }: ISwatch) {
-  const computedValue = styles.getPropertyValue(name);
+  const computedValue = styles?.getPropertyValue(name);
 
   return (
     <div className="d-flex align-items-center mb-2">
@@ -71,6 +71,7 @@ function Swatch({ name, colorClassName, isUnused }: ISwatch) {
         <code className="mb-0 d-block text-lowercase text-dark-700">
           {`var(${name})`}
         </code>
+
         <code style={{ fontSize: '65%' }} className="text-muted">
           {computedValue}
         </code>
@@ -128,16 +129,15 @@ export default function ColorsPage({ data }: IColorsPage) {
           {colors
             .slice(0, 3)
             .map(({ themeName, unusedLevels }) => renderColorRamp(themeName, unusedLevels))}
+          {colors
+            .slice(3)
+            .map(({ themeName, unusedLevels }) => renderColorRamp(themeName, unusedLevels))}
           <div>
             <p className="h5">accents</p>
 
             <Swatch name="--pgn-color-accent-a" colorClassName="bg-accent-a" />
             <Swatch name="--pgn-color-accent-b" colorClassName="bg-accent-b" />
           </div>
-
-          {colors
-            .slice(3)
-            .map(({ themeName, unusedLevels }) => renderColorRamp(themeName, unusedLevels))}
         </div>
 
         <h3>CSS Color Usage</h3>