refactor: use scss color variables whenever possible

owid · Aug 7, 2024 · 683215c · 683215c
1 parent 89bb280
commit 683215c
Show file tree

Hide file tree

Showing 25 changed files with 84 additions and 84 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,7 +1,7 @@
-$light-fill: #dadada;
-$active-fill: #dbe5f0;
+$light-fill: $gray-30;
+$active-fill: $blue-20;
 
-$active-switch: #6e87a2;
+$active-switch: $blue-50;
 
 $medium: 400;
 $lato: $sans-serif-font-stack;

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/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,12 +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;
 
-    $active-icon: #6e87a2;
+    $active-icon: $blue-50;
 
     $border-radius: 4px;
     $visual-gap: 2px;

diff --git a/packages/@ourworldindata/grapher/src/controls/Controls.scss b/packages/@ourworldindata/grapher/src/controls/Controls.scss
@@ -1,13 +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;
 
-$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,11 +6,11 @@
     $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;
 
     font: $medium 13px/16px $lato;
@@ -32,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,13 +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;
 
-$active-switch: #6e87a2;
+$active-switch: $blue-50;
 
 $medium: 400;
 $bold: 700;
@@ -189,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
@@ -176,8 +176,8 @@ $zindex-controls-drawer: 150;
 
     // customize css of the <CodeSnippet> component
     .wp-code-snippet {
-        --code-snippet-border: #e7e7e7;
-        --code-snippet-background-light: #f7f7f7;
+        --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};

diff --git a/packages/@ourworldindata/grapher/src/dataTable/DataTable.scss b/packages/@ourworldindata/grapher/src/dataTable/DataTable.scss
@@ -1,17 +1,17 @@
 .DataTableContainer {
-    $cell-border: 1px solid #f2f2f2;
+    $cell-border: 1px solid $gray-10;
 
     // header
-    $header: #f7f7f7;
-    $header-hover: #e7e7e7;
+    $header: $gray-5;
+    $header-hover: $gray-20;
 
     // rows
-    $light-fill: #f7f7f7;
+    $light-fill: $gray-5;
     $hover-fill: #f0f0f0;
-    $dark-fill: #e7e7e7;
+    $dark-fill: $gray-20;
 
     // closest time notice
-    $info-icon: #dadada;
+    $info-icon: $gray-30;
 
     display: flex;
     align-items: center;

diff --git a/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss
@@ -29,7 +29,7 @@
             $svg-size: 12px;
 
             $placeholder: $gray-60;
-            $focus: 1px solid #a4b6ca;
+            $focus: 1px solid $blue-30;
 
             position: relative;
 
@@ -60,7 +60,7 @@
                 @include grapher_label-2-regular;
                 width: 100%;
                 height: 32px;
-                border: 1px solid #e7e7e7;
+                border: 1px solid $gray-20;
                 padding-left: $svg-margin + $svg-size + 4px;
                 padding-right: $svg-margin + $svg-size + 4px;
                 border-radius: 4px;
@@ -133,7 +133,7 @@
             padding: 7px;
 
             color: $dark-text;
-            background: #f2f2f2;
+            background: $gray-10;
             border: none;
             border-radius: 4px;
 
@@ -143,25 +143,25 @@
             }
 
             &:hover:not(:disabled) {
-                background: #e7e7e7;
+                background: $gray-20;
                 cursor: pointer;
             }
 
             &:active:not(:disabled) {
-                color: #1d3d63;
-                background: #dbe5f0;
-                border: 1px solid #dbe5f0;
+                color: $blue-90;
+                background: $blue-20;
+                border: 1px solid $blue-20;
             }
 
             &:disabled {
-                background: #f2f2f2;
+                background: $gray-10;
                 color: $gray-60;
             }
         }
     }
 
     .entity-selector__content {
-        $row-border: 1px solid #f2f2f2;
+        $row-border: 1px solid $gray-10;
 
         margin: 0 var(--padding) 8px var(--padding);
 
@@ -204,7 +204,7 @@
                 top: 0;
                 left: 0;
                 height: 100%;
-                background: #ebeef2;
+                background: $blue-10;
                 z-index: -1;
             }
 
@@ -294,7 +294,7 @@
             }
 
             &:active {
-                background: #f7f7f7;
+                background: $gray-5;
             }
 
             &:disabled {

diff --git a/packages/@ourworldindata/grapher/src/mapCharts/MapTooltip.scss b/packages/@ourworldindata/grapher/src/mapCharts/MapTooltip.scss
@@ -17,7 +17,7 @@
         line {
             stroke-dasharray: 0;
             stroke-linecap: square;
-            stroke: #dadada;
+            stroke: $gray-30;
         }
 
         // the zero line
@@ -28,7 +28,7 @@
 
     line.max-line {
         stroke-linecap: square;
-        stroke: #dadada;
+        stroke: $gray-30;
     }
 
     .axis-label {

diff --git a/packages/@ourworldindata/grapher/src/modal/DownloadModal.scss b/packages/@ourworldindata/grapher/src/modal/DownloadModal.scss
@@ -39,7 +39,7 @@
         flex-direction: row;
         align-items: center;
         color: $dark-text;
-        background-color: #f7f7f7;
+        background-color: $gray-5;
         position: relative;
         width: 100%;
         padding: 16px;
@@ -86,8 +86,8 @@
 
     .grouped-menu-callout {
         border-radius: 8px;
-        border: 1px solid #dadada;
-        background: #f7f7f7;
+        border: 1px solid $gray-30;
+        background: $gray-5;
         padding: 16px;
 
         svg {
@@ -118,7 +118,7 @@
 .static-exports-options {
     margin: 16px 0 24px;
     padding-bottom: 24px;
-    border-bottom: 1px solid #f2f2f2;
+    border-bottom: 1px solid $gray-10;
 
     > .checkbox + .checkbox {
         margin-top: 8px;

diff --git a/packages/@ourworldindata/grapher/src/modal/SourcesModal.scss b/packages/@ourworldindata/grapher/src/modal/SourcesModal.scss
@@ -5,7 +5,7 @@
     $tab-font-size: 13px;
     $tab-gap: 8px;
 
-    $border: #e7e7e7;
+    $border: $gray-20;
 
     // necessary for scrolling
     display: flex;

diff --git a/packages/@ourworldindata/grapher/src/tabs/ExpandableTabs.scss b/packages/@ourworldindata/grapher/src/tabs/ExpandableTabs.scss
@@ -4,11 +4,11 @@
 
 .ExpandableTabs__button {
     color: $dark-text;
-    border-color: #f2f2f2;
-    background: #f2f2f2;
+    border-color: $gray-10;
+    background: $gray-10;
 
     &:hover {
-        background: #e7e7e7;
+        background: $gray-20;
     }
 
     svg {

diff --git a/packages/@ourworldindata/grapher/src/timeline/TimelineComponent.scss b/packages/@ourworldindata/grapher/src/timeline/TimelineComponent.scss
@@ -2,16 +2,16 @@ $timelineHeight: 32px;
 
 .timeline-component {
     // timeline slider and interval
-    $light-timeline: #e7e7e7;
-    $active-timeline: #a4b6ca;
+    $light-timeline: $gray-20;
+    $active-timeline: $blue-30;
 
     // end handle
-    $active-knob: #6e87a2;
+    $active-knob: $blue-50;
 
     // start/end year label
-    $light-fill: #f2f2f2;
-    $hover-fill: #e7e7e7;
-    $active-fill: #dbe5f0;
+    $light-fill: $gray-10;
+    $hover-fill: $gray-20;
+    $active-fill: $blue-20;
 
     width: 100%;
     height: $timelineHeight;

diff --git a/packages/@ourworldindata/grapher/src/tooltip/Tooltip.scss b/packages/@ourworldindata/grapher/src/tooltip/Tooltip.scss
@@ -1,8 +1,8 @@
 .tooltip-container > .Tooltip {
     $background-fill: #f0f0f0;
-    $background-stroke: #e7e7e7;
+    $background-stroke: $gray-20;
     $dark-grey: #2d2d2d;
-    $light-grey: #dadada;
+    $light-grey: $gray-30;
     $grey: #787878;
     $red: #cc3b55;
     $green: #2c8465;

diff --git a/site/GrapherImage.scss b/site/GrapherImage.scss
@@ -1,4 +1,4 @@
 .GrapherImage {
     display: block;
-    border: 1px solid #f2f2f2;
+    border: 1px solid $gray-10;
 }