Merge pull request #218 from datacamp/change-grey-color

[WL-1588] feat: change to better grey
datacamp · Jan 9, 2024 · 8ca9787 · 8ca9787
2 parents a32d204 + af18b3c
commit 8ca9787
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 11 deletions.
diff --git a/src/components/App/index.module.scss b/src/components/App/index.module.scss
@@ -128,7 +128,7 @@
   mark {
     /* stylelint-disable declaration-block-no-duplicate-properties */
     @include preventive-overrides;
-    background-color: $grey400;
+    background-color: $greySubtle;
     /* stylelint-enable */
     border-radius: $code-border-radius;
   }
@@ -191,7 +191,7 @@
   box-shadow: none;
   display: flex;
   flex-direction: column;
-  outline: 1px solid darken($grey400, 5%) !important;
+  outline: 1px solid darken($greySubtle, 5%) !important;
 
   :global .lm_maximise {
     display: none;
@@ -233,7 +233,7 @@
 :global div[data-datacamp-exercise] {
   /* stylelint-disable declaration-block-no-duplicate-properties, declaration-block-no-shorthand-property-overrides */
   @include preventive-overrides;
-  outline: 1px solid darken($grey400, 5%) !important;
+  outline: 1px solid darken($greySubtle, 5%) !important;
   background: #fff !important;
   color: transparent;
   /* stylelint-enable */

diff --git a/src/components/Footer.module.scss b/src/components/Footer.module.scss
@@ -2,7 +2,7 @@
 
 .footer {
   height: 48px; /* if you change me, also change the value in the golden layout root style, in ./index.tsx */
-  background: $grey400;
+  background: $greySubtle;
   text-align: left;
   display: flex;
   justify-content: flex-start;

diff --git a/src/components/Placeholder.module.scss b/src/components/Placeholder.module.scss
@@ -3,7 +3,7 @@
 .placeholder {
   /* stylelint-disable declaration-block-no-duplicate-properties, declaration-block-no-shorthand-property-overrides */
   @include preventive-overrides;
-  outline: 1px solid darken($grey400, 5%) !important;
+  outline: 1px solid darken($greySubtle, 5%) !important;
   background: #fff;
   /* stylelint-enable */
   margin: 0;

diff --git a/src/styles/golden-layout/light.css b/src/styles/golden-layout/light.css
@@ -25,18 +25,18 @@
 }
 
 .lm_splitter {
-  background: #e1e1e8;
+  background: #f7f7fc;
   transition: opacity 200ms ease;
   z-index: 100;
 }
 
 .lm_splitter:hover {
-  background: #e1e1e8;
+  background: #f7f7fc;
 }
 
 .lm_header {
   height: 30px;
-  background-color: #e1e1e8;
+  background-color: #f7f7fc;
 }
 
 .lm_header.lm_selectable {
@@ -57,7 +57,7 @@
   padding-top: 0;
   padding-bottom: 0;
   height: 30px;
-  background: #e1e1e8;
+  background: #f7f7fc;
   margin-top: 0;
   color: #05192d;
   font-weight: 600;
@@ -71,7 +71,7 @@
 .lm_tab.lm_active,
 .lm_tab:hover {
   color: #777;
-  background: #e1e1e8;
+  background: #f7f7fc;
 }
 
 .lm_header .lm_tab.lm_active {

diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -12,7 +12,7 @@ $baseline: 5px;
 $primary-dark: #000820;
 $primary: #05192d;
 
-$grey400: #e1e1e8;
+$greySubtle: #f7f7fc;
 
 $green: #03ef62;
 $green-light: #65ff8f;