Refresh: Standardize border widths (mozilla#15435)

Author: stephaniehobson

media/css/m24/components/footer-newsletter.scss

@@ -5,7 +5,7 @@
 $max-footer-content-width: $content-max;
 
 @mixin divider-line {
-    border-bottom: 4px solid $m24-color-light-gray;
+    border-bottom: $border-width solid $m24-color-light-gray;
 }
 
 // hide details for JS users
@@ -143,7 +143,7 @@ $max-footer-content-width: $content-max;
 
         input[type="email"],
         select {
-            border: 2px solid $m24-color-black;
+            border: $border-width solid $m24-color-black;
             border-radius: 0;
             background-color: $m24-color-light-gray;
             color: $m24-color-black;
@@ -248,7 +248,7 @@ $max-footer-content-width: $content-max;
         margin-bottom: 0;
 
         button {
-            border: 2px solid $m24-color-green;
+            border: $border-width solid $m24-color-green;
             border-radius: 0;
             font-family: $secondary-font;
             position: relative;

media/css/m24/components/footer-refresh.scss

@@ -5,7 +5,7 @@
 $max-footer-content-width: $content-max;
 
 @mixin divider-line {
-    border-bottom: 4px solid $m24-color-light-gray;
+    border-bottom: $border-width solid $m24-color-light-gray;
 }
 
 // whole footer
@@ -236,7 +236,7 @@ $max-footer-content-width: $content-max;
     background-color: transparent;
     color: $m24-color-black;
     padding: 6px 24px;
-    border: 2px solid $m24-color-green;
+    border: $border-width solid $m24-color-green;
     text-decoration: none;
     text-align: center;
     max-width: 800px;
@@ -334,7 +334,7 @@ $max-footer-content-width: $content-max;
     }
 
     .mzp-js-language-switcher-select {
-        border: 2px solid transparent;
+        border: $border-width solid transparent;
         border-radius: 0;
         font-family: $secondary-font;
         font-weight: 600;

media/css/m24/components/navigation-refresh.scss

@@ -24,7 +24,7 @@
 
 .m24-navigation-refresh {
     background-color: $color-white;
-    border-bottom: 2px solid $m24-color-medium-gray;
+    border-bottom: $border-width solid $m24-color-medium-gray;
     display: flex;
     width: 100%;
 
@@ -47,7 +47,7 @@
             &.mzp-is-scrolling {
                 // Shadow colors are equivalent to $color-ink-90, $color-blue-90, $color-ink-90
                 // We can't use a $box-shadow token here because it needs a different size and offset
-                box-shadow: 0 0 6px 1px rgba(29, 17, 51, 0.04), 0 0 8px 2px rgba(9, 32, 77, 0.12), 0 0 5px -3px rgba(29, 17, 51, 0.12);
+                box-shadow: 0 0 6px 1px rgba(29, 17, 51, 0.04), 0 0 8px $border-width rgba(9, 32, 77, 0.12), 0 0 5px -3px rgba(29, 17, 51, 0.12);
             }
 
             &.mzp-is-hidden {
@@ -184,7 +184,7 @@
 }
 
 .m24-c-navigation-menu {
-    border-top: 2px solid $m24-color-medium-gray;
+    border-top: $border-width solid $m24-color-medium-gray;
     margin-bottom: 0;
     width: 100%;
 
@@ -292,7 +292,7 @@
 }
 
 .m24-c-menu-category {
-    border-bottom: 2px solid $token-color-light-gray;
+    border-bottom: $border-width solid $token-color-light-gray;
     border-top: none;
     padding: 8px 16px;
     position: relative;
@@ -355,7 +355,7 @@
     @include border-box;
 
     @media #{$mq-md} {
-        border-bottom: 4px solid $m24-color-medium-gray;
+        border-bottom: $border-width solid $m24-color-medium-gray;
         left: 0;
         overflow: auto;
         padding: 0;
@@ -468,11 +468,11 @@
     }
 
     & > li {
-        border-bottom: 2px solid transparent;
+        border-bottom: $border-width solid transparent;
         width: 100%;
 
         @media #{$mq-md} {
-            border-bottom: 2px solid $token-color-light-gray;
+            border-bottom: $border-width solid $token-color-light-gray;
         }
 
         .m24-c-menu-item {

media/css/m24/components/pencil-banner.scss

@@ -4,7 +4,7 @@
 
 .m24-pencil-banner {
     background-color: $m24-color-light-green;
-    border-bottom: 2px solid $m24-color-green;
+    border-bottom: $border-width solid $m24-color-green;
     padding: $spacer-sm;
 
     .m24-pencil-banner-copy {

media/css/m24/grid.scss

@@ -81,7 +81,7 @@
     color: inherit;
 
     .m24-c-grid-tile-image > * {
-        outline: 2px solid transparent;
+        outline: $border-width solid transparent;
         transition: outline-color 150ms ease-in-out;
     }
 

media/css/m24/spring.scss

@@ -10,7 +10,7 @@ $logo-spacing: calc(24px + #{$spacer-xs});
 }
 
 .m24-c-spring-item {
-    border-bottom: 4px solid $m24-color-light-gray;
+    border-bottom: $border-width solid $m24-color-light-gray;
     margin-bottom: 0;
 }
 

media/css/m24/vars/_spacing.scss

@@ -14,3 +14,6 @@ $spacer-2xs: var(--spacer-2xs);
 
 // container
 $container-padding: var(--container-padding);
+
+// border
+$border-width: 2px;