Switch to using govuk-em function

alphagov · Nov 11, 2022 · 08f162a · 08f162a
1 parent f1b7e8b
commit 08f162a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 26 deletions.
diff --git a/src/govuk/components/back-link/_index.scss b/src/govuk/components/back-link/_index.scss
@@ -1,10 +1,17 @@
 @include govuk-exports("govuk/component/back-link") {
 
   // Size of chevron (excluding border)
-  $chevron-size: .4375em;
+  $chevron-size: govuk-em(7px, $govuk-root-font-size);
 
   // Size of chevron border
-  $chevron-border-width: .0625em;
+  $chevron-border-min-width: 1px;
+  // Using #{m}ax is an awkward syntax hack to ensure we're using the CSS max()
+  // function and not the Sass spec one. This can be called normally once we're
+  // using Sass modules.
+  $chevron-border-width: #{m}ax(
+    #{$chevron-border-min-width},
+    #{govuk-em(1px, $govuk-root-font-size)}
+  );
 
   // Colour of chevron
   $chevron-border-colour: $govuk-secondary-text-colour;
@@ -21,7 +28,7 @@
     margin-bottom: govuk-spacing(3);
 
     // Allow space for the arrow
-    padding-left: .875em;
+    padding-left: govuk-em(14px, $govuk-root-font-size);
   }
 
   // Prepend left pointing chevron
@@ -35,14 +42,15 @@
     @if $govuk-use-legacy-font {
       // Begin adjustments for font baseline offset
       // These should be removed when legacy font support is dropped
-      top: -1px;
-      bottom: 1px;
+      $offset: govuk-em(1px, $govuk-root-font-size);
+      top: $offset * -1;
+      bottom: $offset;
     } @else {
       top: 0;
       bottom: 0;
     }
 
-    left: 3px;
+    left: govuk-em(3px, $govuk-root-font-size);
 
     width: $chevron-size;
     height: $chevron-size;
@@ -52,6 +60,7 @@
     transform: rotate(225deg);
 
     border: solid;
+    border-width: $chevron-border-min-width $chevron-border-min-width 0 0;
     border-width: $chevron-border-width $chevron-border-width 0 0;
     border-color: $chevron-border-colour;
 
@@ -81,15 +90,4 @@
     bottom: -14px;
     left: 0;
   }
-
-  @if $govuk-use-legacy-font {
-    // Begin adjustments for font baseline offset
-    // These should be removed when legacy font support is dropped
-    .govuk-back-link:before {
-      $offset: 1px;
-
-      top: $offset * -1;
-      bottom: $offset;
-    }
-  }
 }
diff --git a/src/govuk/settings/_typography-font.scss b/src/govuk/settings/_typography-font.scss
@@ -16,15 +16,7 @@
 /// @deprecated Will be removed in v5.0 with the rest of the compatibility mode
 /// suite of tools and settings
 
-$govuk-use-legacy-font: if(
-  (
-    $govuk-compatibility-govukfrontendtoolkit or
-    $govuk-compatibility-govuktemplate or
-    $govuk-compatibility-govukelements
-  ),
-  true,
-  false
-) !default;
+$govuk-use-legacy-font: true !default;
 
 // Only show the deprecation warning if user is setting $govuk-use-legacy-font
 // manually instead of automatically via compatibility variables