refactor: styles refactoring

Author: PKulkoRaccoonGang

example/index.scss

@@ -1,6 +1,6 @@
-@import "@edx/brand/paragon/fonts";
+@import url("https://cdn.jsdelivr.net/npm/@edx/brand-edx.org@alpha/dist/core.min.css");
+@import url("https://cdn.jsdelivr.net/npm/@edx/brand-edx.org@alpha/dist/light.min.css");
 @import "@edx/paragon/styles/scss/core/core";
 @import "@edx/paragon/styles/css/themes/light/index.css";
-@import "@edx/brand/paragon/overrides";
 
 @import "@edx/frontend-component-header/index";

src/Menu/menu.scss

@@ -1,45 +1,45 @@
 .menu {
   position: relative;
 }
+
 .menu-content {
   position: absolute;
   top: 100%;
   z-index: 10;
-  background: #fff;
+  background: var(--pgn-color-white);
   min-width: 10rem;
+
   &.pin-left {
     left: 0;
   }
+
   &.pin-right {
     right: 0;
   }
 }
 
-
 .menu-dropdown-enter {
   opacity: 0;
   transform-origin: 75% 0;
   transform: scale3d(0.8, 0.8, 1);
 }
+
 .menu-dropdown-enter-active {
   transform-origin: 75% 0;
   transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
   transform: scale3d(1, 1, 1);
   opacity: 1;
 }
-.menu-dropdown-enter-done {
-}
 
 .menu-dropdown-exit {
   transform-origin: 75% 0;
   transform: scale3d(1, 1, 1);
   opacity: 1;
 }
+
 .menu-dropdown-exit-active {
   transform-origin: 75% 0;
   transform: scale3d(0.8, 0.8, 1);
   transition: all 250ms cubic-bezier(0.8, 0, 0.6, 1);
   opacity: 0;
 }
-.menu-dropdown-exit-done {
-}

src/index.scss

@@ -1,10 +1,7 @@
-$spacer: 1rem;
-$blue: #007db8;
-$white: #fff;
-@import "@edx/brand/paragon/fonts.scss";
+@import url("https://cdn.jsdelivr.net/npm/@edx/brand-edx.org@alpha/dist/core.min.css");
+@import url("https://cdn.jsdelivr.net/npm/@edx/brand-edx.org@alpha/dist/light.min.css");
 @import "@edx/paragon/styles/scss/core/core";
 @import "@edx/paragon/styles/css/themes/light/index.css";
-@import "@edx/brand/paragon/overrides.scss";
 @import './Menu/menu.scss';
 
 .dropdown-item a {
@@ -23,8 +20,9 @@ $white: #fff;
   padding: .75rem;
   justify-content: center;
   align-items:center;
+
   &:hover, &:focus {
-    background: rgba(0,0,0,.1);
+    background: rgba(0, 0, 0, .1);
   }
 }
 
@@ -38,16 +36,15 @@ $white: #fff;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      padding-bottom: 0.1rem;
+      padding-bottom: var(--pgn-spacing-spacer-base);
     }
   }
 
-  .user-dropdown {
-    .btn {
-      height: 3rem;
-      @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
-        padding: 0 0.5rem;
-      }
+  .user-dropdown .btn {
+    height: 3rem;
+
+    @media (--max-pgn-size-breakpoint-xs) {
+      padding: 0 .5rem;
     }
   }
 }
@@ -65,68 +62,75 @@ $white: #fff;
     text-decoration: none;
     cursor: pointer;
   }
+
   img {
     height: 1.5rem;
   }
 }
 
 
 .site-header-desktop {
-  box-shadow: 0 1px 0 0 rgba(0,0,0,.1);
+  box-shadow: 0 1px 0 0 rgba(0, 0, 0, .1);
   background: var(--pgn-color-white);
+
   .nav-link {
     text-decoration: none;
   }
+
   .logo {
     display: block;
     box-sizing: content-box;
     position: relative;
     top: -.05em;
     height: 1.75rem;
-    padding: 1rem 0;
-    margin-right: 1rem;
+    padding: var(--pgn-spacing-spacer-base) 0;
+    margin-right: var(--pgn-spacing-spacer-base);
+
     img {
       display: block;
       height: 100%;
     }
   }
+
   .main-nav {
     .nav-link {
-      padding: 1.125rem 1rem;
+      padding: 1.125rem var(--pgn-spacing-spacer-base);
       text-decoration: none;
       font-weight: 500;
       letter-spacing: .01em;
     }
+
     .nav-link:hover,
     .nav-link:focus,
     .nav-link.active,
     .expanded .nav-link {
       background: var(--pgn-color-bg-active);
       color: var(--pgn-color-active);
     }
+
     .menu {
       position: static;
+
       .menu-content {
         border-top: solid 2px var(--pgn-color-bg-active);
         left: 0;
         right: 0;
-        box-shadow: 0 1px 2px rgba(0,0,0,.25);
+        box-shadow: var(--pgn-elevation-box-shadow-down-1);
         border-bottom-left-radius: 2px;
         border-bottom-right-radius: 2px;
-        padding: 1rem;
+        padding: var(--pgn-spacing-spacer-base);
       }
     }
   }
+
   .search-input {
     border-radius: var(--pgn-size-rounded-pill);
   }
 }
 
-.content {
-  b {
-    color: #00262B !important;
-    font-weight: 500 !important;
-  }
+.content b {
+  color: var(--pgn-color-primary-500) !important;
+  font-weight: 500 !important;
 }
 
 .font-size-18 {
@@ -185,15 +189,15 @@ $white: #fff;
   position: absolute;
   margin-top: 18px;
   margin-left: -21px;
-  border: 2px solid #FFFFFF;
+  border: 2px solid var(--pgn-color-white);
   font-size: 9px !important;
 }
 
 .popover {
   max-height: calc(100% - 68px);
   min-height: 1220px;
   filter: none;
-  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15), 0px 2px 8px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--pgn-elevation-box-shadow-down-2);
 
   &.medium-screen {
     min-width: 24.313rem;
@@ -217,7 +221,7 @@ $white: #fff;
 
   .dropdown-toggle {
     font-size: 14px;
-    padding-top: 0px !important;
+    padding-top: 0 !important;
     padding-bottom: 12px !important;
 
     div {
@@ -239,11 +243,11 @@ $white: #fff;
       text-overflow: ellipsis;
 
       p {
-        margin-bottom: 0px;
+        margin-bottom: 0;
       }
 
       b {
-        color: #00262B;
+        color: var(--pgn-color-primary-500);
       }
     }