Refactor spacing CSS code (#227)

The only user-facing change is the controls having 10px rather than 8px
of gap between. This is a refactor to make our code more consistent and
DRY.

src/css/_controls.scss

@@ -1,15 +1,17 @@
 @use "theme/colors";
-@use "theme/touchable-icons";
+@use "theme/spacing";
 @use "theme/typography";
 @use "header";
 
 $label-font-size: typography.$font-size-md;
-$zoom-controls-top-offset: calc(64px - header.$header-height);
+$zoom-controls-top-offset: calc(
+  58px + spacing.$map-controls-margin-top - header.$header-height
+);
 $outer-border-thickness: 2px;
 $option-divider: 1px solid colors.$gray-translucent;
 
 .leaflet-left .leaflet-control {
-  margin-left: 8px;
+  margin-left: spacing.$map-controls-margin-x;
 }
 
 .leaflet-control-zoom.leaflet-bar,
@@ -22,8 +24,8 @@ $option-divider: 1px solid colors.$gray-translucent;
   top: $zoom-controls-top-offset;
 
   a {
-    width: touchable-icons.$min-touch-target;
-    height: touchable-icons.$min-touch-target;
+    width: spacing.$min-touch-target;
+    height: spacing.$min-touch-target;
     font-size: $label-font-size;
     font-weight: normal;
 
@@ -38,20 +40,18 @@ $option-divider: 1px solid colors.$gray-translucent;
 }
 
 .leaflet-touch.leaflet-control-layers-toggle {
-  width: touchable-icons.$min-touch-target;
-  height: touchable-icons.$min-touch-target;
+  width: spacing.$min-touch-target;
+  height: spacing.$min-touch-target;
 }
 
 #map > div.leaflet-control-container > div.leaflet-top.leaflet-right {
   $zoom-controls-height: calc(
-    (touchable-icons.$min-touch-target * 2) + $outer-border-thickness
+    (spacing.$min-touch-target * 2) + $outer-border-thickness
   );
-  $margin-between-zoom-control: 8px;
   top: calc(
-    $zoom-controls-top-offset + $zoom-controls-height +
-      $margin-between-zoom-control
+    $zoom-controls-top-offset + $zoom-controls-height + spacing.$element-gap
   );
-  margin-left: 8px; // Mirrors zoom controls.
+  margin-left: spacing.$map-controls-margin-x;
   right: auto;
 }
 
@@ -74,8 +74,8 @@ $option-divider: 1px solid colors.$gray-translucent;
   display: flex;
   align-items: center;
 
-  $padding-y: calc((touchable-icons.$min-touch-target - $label-font-size) / 2);
-  padding: $padding-y 8px;
+  $padding-y: calc((spacing.$min-touch-target - $label-font-size) / 2);
+  padding: $padding-y spacing.$element-gap;
 
   input[type="radio"] {
     margin: 0;

src/css/_header.scss

@@ -1,12 +1,14 @@
 @use "theme/breakpoints";
 @use "theme/colors";
-@use "theme/touchable-icons";
+@use "theme/spacing";
+@use "theme/icons";
 @use "theme/typography";
 
-$header-y-padding: 10px;
+// We don't use $container-edge-spacing to save vertical space.
+$header-y-padding: spacing.$element-gap;
 $header-border-bottom-size: 4px;
 $header-height: calc(
-  touchable-icons.$min-touch-target + ($header-y-padding * 2) +
+  spacing.$min-touch-target + ($header-y-padding * 2) +
     $header-border-bottom-size
 );
 
@@ -15,7 +17,7 @@ header {
   display: flex;
   align-items: center;
 
-  padding: $header-y-padding 10px;
+  padding: $header-y-padding spacing.$element-gap;
 
   background-color: colors.$gray;
   border-bottom: $header-border-bottom-size solid colors.$teal;
@@ -29,8 +31,8 @@ header {
   .header-about-icon-container,
   .header-share-icon-container,
   .header-full-screen-icon-container {
-    height: touchable-icons.$min-touch-target;
-    width: touchable-icons.$min-touch-target;
+    height: spacing.$min-touch-target;
+    width: spacing.$min-touch-target;
 
     display: inline-flex;
     align-items: center;
@@ -39,8 +41,8 @@ header {
 
   svg {
     color: colors.$white;
-    height: touchable-icons.$icon-size-md;
-    width: touchable-icons.$icon-size-md;
+    height: icons.$icon-size-md;
+    width: icons.$icon-size-md;
   }
 
   .header-full-screen-icon-container {
@@ -67,7 +69,7 @@ header {
     font-size: typography.$font-size-base;
     line-height: 1.2; // To vertically center the text.
 
-    height: touchable-icons.$min-touch-target;
+    height: spacing.$min-touch-target;
 
     min-width: 220px;
     @include breakpoints.gt-xs {
@@ -90,7 +92,7 @@ header {
 
 div.choices__item.choices__item--choice.choices__item--selectable {
   font-size: typography.$font-size-base;
-  height: touchable-icons.$min-touch-target;
+  height: spacing.$min-touch-target;
 }
 
 .choices__list--dropdown,

src/css/_logo.scss

@@ -1,9 +1,10 @@
 @use "theme/breakpoints";
 @use "theme/colors";
+@use "theme/spacing";
 
 .prn-logo {
   position: absolute;
-  left: 8px;
+  left: spacing.$map-controls-margin-x;
   z-index: 2001;
 
   // `bottom` is set so high to avoid covering the attribution

src/css/_scorecard.scss

@@ -1,11 +1,10 @@
 @use "theme/breakpoints";
 @use "theme/colors";
-@use "theme/touchable-icons";
+@use "theme/spacing";
+@use "theme/icons";
 @use "theme/typography";
 @use "header";
 
-$outer-padding: 15px;
-$padding-between-elements: 10px;
 $border-radius: 10px;
 
 .popup-fixed {
@@ -33,8 +32,8 @@ $border-radius: 10px;
 
   float: right;
   position: fixed;
-  right: 8px;
-  top: calc(header.$header-height + 6px);
+  right: spacing.$map-controls-margin-x;
+  top: calc(header.$header-height + spacing.$map-controls-margin-top);
 
   border-radius: $border-radius;
   color: colors.$black;
@@ -46,8 +45,8 @@ $border-radius: 10px;
 
   p {
     margin: 0;
-    padding-left: $outer-padding;
-    padding-right: $outer-padding;
+    padding-left: spacing.$container-edge-spacing;
+    padding-right: spacing.$container-edge-spacing;
   }
 }
 
@@ -56,10 +55,10 @@ $border-radius: 10px;
   align-items: center;
   justify-content: space-between;
 
-  margin-top: $outer-padding;
-  margin-bottom: $padding-between-elements;
-  margin-left: $outer-padding;
-  margin-right: $outer-padding;
+  margin-top: spacing.$container-edge-spacing;
+  margin-bottom: spacing.$element-gap;
+  margin-left: spacing.$container-edge-spacing;
+  margin-right: spacing.$container-edge-spacing;
   line-height: 1.1;
 
   color: colors.$teal;
@@ -68,15 +67,15 @@ $border-radius: 10px;
 }
 
 .scorecard-accordion-toggle {
-  height: touchable-icons.$min-touch-target;
+  height: spacing.$min-touch-target;
   width: 100%;
   padding: 0;
-  margin-top: $padding-between-elements;
+  margin-top: spacing.$element-gap;
 
   font-size: typography.$font-size-base;
   cursor: pointer;
   text-align: left;
-  padding-left: $outer-padding;
+  padding-left: spacing.$container-edge-spacing;
   padding-right: 0;
 
   display: flex;
@@ -96,29 +95,29 @@ $border-radius: 10px;
   }
 
   .scorecard-accordion-icon-container {
-    height: touchable-icons.$min-touch-target;
-    width: touchable-icons.$min-touch-target;
+    height: spacing.$min-touch-target;
+    width: spacing.$min-touch-target;
     display: inline-flex;
     align-items: center;
     justify-content: center;
 
     svg {
-      height: touchable-icons.$icon-size-sm;
+      height: icons.$icon-size-sm;
     }
   }
 }
 
 .scorecard-accordion-content {
   border-top: 1px solid colors.$gray-translucent;
-  padding-top: $padding-between-elements;
+  padding-top: spacing.$element-gap;
 
   ul {
     padding: 0;
     padding-inline-start: 20px; // Default is 40px
-    margin-left: $outer-padding;
-    margin-right: $outer-padding;
-    margin-bottom: $outer-padding;
-    margin-top: $padding-between-elements;
+    margin-left: spacing.$container-edge-spacing;
+    margin-right: spacing.$container-edge-spacing;
+    margin-bottom: spacing.$container-edge-spacing;
+    margin-top: spacing.$element-gap;
   }
 }
 
@@ -137,8 +136,8 @@ $border-radius: 10px;
 .community-contribution-warning {
   font-size: typography.$font-size-sm;
   color: colors.$gray;
-  margin-top: $padding-between-elements;
-  margin-bottom: $padding-between-elements;
-  margin-left: $outer-padding;
-  margin-right: $outer-padding;
+  margin-top: spacing.$element-gap;
+  margin-bottom: spacing.$element-gap;
+  margin-left: spacing.$container-edge-spacing;
+  margin-right: spacing.$container-edge-spacing;
 }

src/css/theme/_icons.scss

@@ -0,0 +1,3 @@
+$icon-size-sm: 20px;
+$icon-size-md: 24px;
+$icon-size-lg: 32px;

src/css/theme/_spacing.scss

@@ -0,0 +1,8 @@
+// https://www.w3.org/WAI/WCAG21/Understanding/target-size.html
+$min-touch-target: 44px;
+
+$map-controls-margin-x: 8px;
+$map-controls-margin-top: 6px;
+
+$container-edge-spacing: 15px;
+$element-gap: 10px;