Merge pull request #3855 from owid/gray-colors

owid · Aug 7, 2024 · 470466c · 470466c
2 parents 70e5f8d + 683215c
commit 470466c
Show file tree

Hide file tree

Showing 26 changed files with 129 additions and 130 deletions.
diff --git a/packages/@ourworldindata/components/src/Checkbox.scss b/packages/@ourworldindata/components/src/Checkbox.scss
@@ -1,9 +1,9 @@
 .checkbox {
     $checkbox-size: 16px;
 
-    $light-stroke: #dadada;
-    $hover-stroke: #a4b6ca;
-    $active-fill: #a4b6ca;
+    $light-stroke: $gray-30;
+    $hover-stroke: $blue-30;
+    $active-fill: $blue-30;
 
     position: relative;
 

diff --git a/packages/@ourworldindata/components/src/LabeledSwitch/LabeledSwitch.scss b/packages/@ourworldindata/components/src/LabeledSwitch/LabeledSwitch.scss
@@ -1,10 +1,7 @@
-$dark-text: #5b5b5b;
-$light-text: #858585;
-$light-fill: #dadada;
-$active-fill: #dbe5f0;
+$light-fill: $gray-30;
+$active-fill: $blue-20;
 
-$info-icon: #a1a1a1;
-$active-switch: #6e87a2;
+$active-switch: $blue-50;
 
 $medium: 400;
 $lato: $sans-serif-font-stack;
@@ -15,7 +12,7 @@ $lato: $sans-serif-font-stack;
     // where the width of a labeled switch is calculated
 
     display: flex;
-    color: $light-text;
+    color: $gray-70;
     font: $medium 13px/16px $lato;
     letter-spacing: 0.01em;
 
@@ -25,7 +22,7 @@ $lato: $sans-serif-font-stack;
     user-select: none;
 
     label {
-        color: $dark-text;
+        color: $gray-80;
         padding-left: 35px;
         white-space: nowrap;
 
@@ -34,7 +31,7 @@ $lato: $sans-serif-font-stack;
         }
 
         svg {
-            color: $info-icon;
+            color: $gray-60;
             height: 13px;
             padding: 0 0.333em;
         }
@@ -66,7 +63,7 @@ $lato: $sans-serif-font-stack;
             content: " ";
             width: 10px;
             height: 10px;
-            background: $light-text;
+            background: $gray-70;
             border-radius: 5px;
             top: 3px;
             left: 3px;
@@ -77,7 +74,7 @@ $lato: $sans-serif-font-stack;
 
     &:hover {
         .outer .inner {
-            background: $dark-text;
+            background: $gray-80;
         }
     }
 

diff --git a/packages/@ourworldindata/components/src/RadioButton.scss b/packages/@ourworldindata/components/src/RadioButton.scss
@@ -3,8 +3,8 @@
 .radio {
     $radio-size: 16px;
 
-    $light-stroke: #a4b6ca;
-    $active-fill: #6e87a2;
+    $light-stroke: $blue-30;
+    $active-fill: $blue-50;
 
     position: relative;
 

diff --git a/packages/@ourworldindata/components/src/closeButton/CloseButton.scss b/packages/@ourworldindata/components/src/closeButton/CloseButton.scss
@@ -2,10 +2,10 @@
     // keep in sync with CLOSE_BUTTON_SIZE in CloseButton.tsx
     $size: 32px;
 
-    $light-stroke: #e7e7e7;
+    $light-stroke: $gray-20;
 
     $active-fill: #dbe5f0;
-    $hover-fill: #f2f2f2;
+    $hover-fill: $gray-10;
 
     display: flex;
     align-items: center;

diff --git a/packages/@ourworldindata/components/src/styles/colors.scss b/packages/@ourworldindata/components/src/styles/colors.scss
@@ -17,15 +17,27 @@ $blue-50: #6e87a2;
 $blue-40: #98a9bd;
 $blue-30: #a4b6ca;
 
-/* Amber shades */
+// Gray shades
+$gray-90: #4e4e4e;
+$gray-80: #5b5b5b;
+$gray-70: #858585;
+$gray-60: #a1a1a1;
+$gray-50: #c6c6c6;
+
+// Amber shades
 $amber-110: #f9cf44;
 $amber-10: #f4eddb;
 
 // Background colors
 $blue-20: #dbe5f0;
 $blue-10: #ebeef2;
 $blue-5: #f0f4fa;
-$gray-10: #f7f7f7;
+
+$gray-30: #dadada;
+$gray-20: #e7e7e7;
+$gray-10: #f2f2f2;
+$gray-5: #f7f7f7;
+
 $beige: #fbf9f3;
 $white: #ffffff;
 

diff --git a/packages/@ourworldindata/components/src/styles/mixins.scss b/packages/@ourworldindata/components/src/styles/mixins.scss
@@ -178,7 +178,7 @@
     color: #333;
 
     .header {
-        background: #002147;
+        background: $oxford-blue;
         color: white;
         font-size: 1rem;
         font-weight: 700;

diff --git a/packages/@ourworldindata/grapher/src/controls/ActionButtons.scss b/packages/@ourworldindata/grapher/src/controls/ActionButtons.scss
@@ -27,9 +27,9 @@ $paddingX: 12px; // keep in sync with PADDING_X
 }
 
 .ActionButton {
-    $light-fill: #f2f2f2;
-    $hover-fill: #e7e7e7;
-    $active-fill: #dbe5f0;
+    $light-fill: $gray-10;
+    $hover-fill: $gray-20;
+    $active-fill: $blue-20;
 
     height: 100%;
     border-radius: 4px;

diff --git a/packages/@ourworldindata/grapher/src/controls/ContentSwitchers.scss b/packages/@ourworldindata/grapher/src/controls/ContentSwitchers.scss
@@ -5,13 +5,12 @@
     $icon-padding: 6px;
     --outer-padding: 16px;
 
-    $light-stroke: #e7e7e7;
+    $light-stroke: $gray-20;
 
-    $hover-fill: #f2f2f2;
-    $active-fill: #dbe5f0;
+    $hover-fill: $gray-10;
+    $active-fill: $blue-20;
 
-    $info-icon: #a1a1a1;
-    $active-icon: #6e87a2;
+    $active-icon: $blue-50;
 
     $border-radius: 4px;
     $visual-gap: 2px;
@@ -57,7 +56,7 @@
         }
 
         svg {
-            color: $info-icon;
+            color: $gray-60;
 
             &.custom-icon {
                 --size: $icon-width;

diff --git a/packages/@ourworldindata/grapher/src/controls/Controls.scss b/packages/@ourworldindata/grapher/src/controls/Controls.scss
@@ -1,14 +1,13 @@
-$light-stroke: #e7e7e7;
+$light-stroke: $gray-20;
 $dark-stroke: #2d2d2d;
-$active-stroke: #a4b6ca;
+$active-stroke: $blue-30;
 
-$light-fill: #dadada;
-$active-fill: #dbe5f0;
-$hover-fill: #f2f2f2;
+$light-fill: $gray-30;
+$active-fill: $blue-20;
+$hover-fill: $gray-10;
 $selected-fill: #c7ced7;
 
-$info-icon: #a1a1a1;
-$active-switch: #6e87a2;
+$active-switch: $blue-50;
 
 $medium: 400;
 $bold: 700;

diff --git a/packages/@ourworldindata/grapher/src/controls/Dropdown.scss b/packages/@ourworldindata/grapher/src/controls/Dropdown.scss
@@ -6,15 +6,13 @@
     $medium: 400;
     $lato: $sans-serif-font-stack;
 
-    $light-stroke: #e7e7e7;
-    $active-stroke: #a4b6ca;
+    $light-stroke: $gray-20;
+    $active-stroke: $blue-30;
 
-    $active-fill: #dbe5f0;
-    $hover-fill: #f2f2f2;
+    $active-fill: $blue-20;
+    $hover-fill: $gray-10;
     $selected-fill: #c7ced7;
 
-    $light-text: #858585;
-
     font: $medium 13px/16px $lato;
 
     // fixes a bug in Firefox where long labels would cause the dropdown to resize,
@@ -34,7 +32,7 @@
         color: $dark-text;
 
         &.focus {
-            outline: 1px solid #a4b6ca !important;
+            outline: 1px solid $blue-30 !important;
             outline-offset: -1px;
         }
 

diff --git a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.scss b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.scss
@@ -1,14 +1,13 @@
-$light-stroke: #e7e7e7;
+$light-stroke: $gray-20;
 $dark-stroke: #2d2d2d;
-$active-stroke: #a4b6ca;
+$active-stroke: $blue-30;
 
-$light-fill: #dadada;
-$active-fill: #dbe5f0;
-$hover-fill: #f2f2f2;
+$light-fill: $gray-30;
+$active-fill: $blue-20;
+$hover-fill: $gray-10;
 $selected-fill: #c7ced7;
 
-$info-icon: #a1a1a1;
-$active-switch: #6e87a2;
+$active-switch: $blue-50;
 
 $medium: 400;
 $bold: 700;
@@ -105,7 +104,7 @@ nav.controlsRow .chart-controls .settings-menu {
                 list-style: none;
 
                 svg {
-                    color: $info-icon;
+                    color: $gray-60;
                     height: 13px;
                     padding: 0 0.333em;
                 }
@@ -190,7 +189,7 @@ nav.controlsRow .chart-controls .settings-menu {
                     }
 
                     &.active span {
-                        background: #a4b6ca;
+                        background: $blue-30;
                     }
 
                     &:hover:not(.active) span {

diff --git a/packages/@ourworldindata/grapher/src/controls/ShareMenu.scss b/packages/@ourworldindata/grapher/src/controls/ShareMenu.scss
@@ -7,8 +7,8 @@ $zindex-ControlsFooter: 2;
 }
 
 .ShareMenu {
-    $hover-fill: #f2f2f2;
-    $active-fill: #dbe5f0;
+    $hover-fill: $gray-10;
+    $active-fill: $blue-20;
 
     position: absolute;
     bottom: $timelineHeight + 8px;

diff --git a/packages/@ourworldindata/grapher/src/core/grapher.scss b/packages/@ourworldindata/grapher/src/core/grapher.scss
@@ -14,15 +14,15 @@
 @import "./typography.scss";
 
 // grapher frame
-$frame-color: #f2f2f2;
+$frame-color: $gray-10;
 
 // text
-$dark-text: #5b5b5b;
-$light-text: #858585;
+$dark-text: $gray-80;
+$light-text: $gray-70;
 $active-text: $blue-90;
 
 // tooltip for button label
-$tooltip-fill: #4e4e4e;
+$tooltip-fill: $gray-90;
 $tooltip-text: #fff;
 
 // These should be between 0–100 in order to avoid conflicting with
@@ -92,11 +92,11 @@ $zindex-controls-drawer: 150;
 @import "../../../components/src/OverlayHeader.scss";
 
 .grapher_dark {
-    color: $dark-text;
+    color: $gray-80;
 }
 
 .grapher_light {
-    color: $light-text;
+    color: $gray-70;
 }
 
 .GrapherComponent,
@@ -114,7 +114,7 @@ $zindex-controls-drawer: 150;
     line-height: 1em;
 
     background: white;
-    color: $dark-text;
+    color: $gray-80;
 
     position: relative;
     container-type: size;
@@ -176,12 +176,12 @@ $zindex-controls-drawer: 150;
 
     // customize css of the <CodeSnippet> component
     .wp-code-snippet {
-        --code-snippet-border: #e7e7e7;
-        --code-snippet-background-light: #f7f7f7;
-        --code-snippet-text: #{$light-text};
-        --code-snippet-button: #{$dark-text};
-        --code-snippet-button-hover: #{$light-text};
-        --code-snippet-button-active: #{$light-text};
+        --code-snippet-border: #{$gray-20};
+        --code-snippet-background-light: #{$gray-5};
+        --code-snippet-text: #{$gray-70};
+        --code-snippet-button: #{$gray-80};
+        --code-snippet-button-hover: #{$gray-70};
+        --code-snippet-button-active: #{$gray-70};
 
         margin-bottom: 0 !important;
     }
@@ -210,7 +210,7 @@ $zindex-controls-drawer: 150;
 .tippy-box[data-theme="grapher-explanation"],
 .tippy-box[data-theme="grapher-explanation--short"] {
     background: white;
-    color: $dark-text;
+    color: $gray-80;
     font: 400 14px/1.5 $sans-serif-font-stack;
     box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.15);