@defra/docusaurus-theme-govuk 0.0.18-alpha → 0.0.19-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@defra/docusaurus-theme-govuk",
-  "version": "0.0.18-alpha",
+  "version": "0.0.19-alpha",
   "description": "A Docusaurus theme implementing the GOV.UK Design System for consistent, accessible documentation sites",
   "main": "index.js",
   "license": "MIT",

package/src/css/components.scss

@@ -26,6 +26,7 @@
     overflow: auto !important;
     margin-left: -16px;
     padding-left: 16px;
+    margin-top: govuk-spacing(1) * -1;
   }
 }
 
@@ -153,19 +154,25 @@
   border-bottom: 1px solid #cecece;
 
   position: relative;
-  padding-top: 5px;
-  padding-bottom: 5px;
-  margin-bottom: 5px;
-  font-size: 1rem;
+  padding-top: govuk-spacing(2);
+  padding-bottom: govuk-spacing(2);
+  margin-bottom: 0;
+
+  font-size: 1.1875rem;
   padding-left: 0;
   margin-left: 0;
-  
+
   @media (min-width: 48.125em) {
+    font-size: 1rem;
+    padding-top: govuk-spacing(1);
+    padding-bottom: govuk-spacing(1);
+    margin-bottom: govuk-spacing(1);
     border-bottom: 0;
 
     &:after {
       border-bottom: 0;
     }
+
   }
 
   .not-govuk-navigation-menu__list__link {
@@ -192,7 +199,7 @@
 
   .not-govuk-navigation-menu__list__item {
     padding: 5px 0;
-    margin-bottom: 5px;
+    margin-bottom: 0;
     border-left-width: 0px;
     border-left-style: solid;
   }
@@ -299,6 +306,27 @@
   }
 }
 
+// Lock service navigation to 1.1875rem on all devices, including mobile where
+// govuk-font(19) would otherwise drop to 1rem. Parent selector raises
+// specificity to (0,2,0) to beat the govuk-frontend mobile breakpoint rule.
+.govuk-service-navigation .govuk-service-navigation__list,
+.govuk-service-navigation .govuk-service-navigation__toggle,
+.govuk-service-navigation .govuk-service-navigation__service-name {
+  font-size: 1.1875rem;
+}
+
+// Sidebar nav links and headings: 1.1875rem on mobile, 1rem on larger devices.
+// Two-class specificity (0,2,0) beats the not-govuk `aside a` rule at (0,1,1).
+.app-layout-sidebar__nav .not-govuk-navigation-menu__list__link,
+.app-layout-sidebar__nav .not-govuk-navigation-menu__list__heading,
+.app-layout-sidebar__nav .not-govuk-navigation-menu__list__heading-toggle {
+  font-size: 1.1875rem;
+
+  @media (min-width: 48.125em) {
+    font-size: 1rem;
+  }
+}
+
 // Pagination
 .app-pagination__container {
   display: flex;

package/src/css/prose-scope.scss

@@ -110,6 +110,21 @@
     }
   }
 
+  // Override GDS Transport on all prose elements. This must come after the
+  // @extend rules above (which bake in "GDS Transport" from govuk-frontend) so
+  // that cascade order wins at equal specificity. app-no-prose content is
+  // excluded so host apps can render GDS Transport there if licensed.
+  h1:not(.app-no-prose *),
+  h2:not(.app-no-prose *),
+  h3:not(.app-no-prose *),
+  h4:not(.app-no-prose *),
+  p:not(.app-no-prose *),
+  li:not(.app-no-prose *),
+  a:not(.app-no-prose *) {
+    font-family: Helvetica, Arial, sans-serif;
+  }
+
+
   // Code block copy button
   .app-code-block__copy {
     font-size: 0.9rem;

package/src/css/theme.scss

@@ -23,6 +23,14 @@ body,
   font-family: Helvetica, Arial, sans-serif;
 }
 
+// Restore GDS Transport inside .app-no-prose containers (e.g. map examples in
+// host apps that load the font separately and need the real GDS type stack).
+.app-no-prose,
+.app-no-prose [class^="govuk-"],
+.app-no-prose [class*=" govuk-"] {
+  font-family: "GDS Transport", arial, sans-serif;
+}
+
 /* Wider page width — overrides the 960px default from govuk-frontend.
  * !important is needed because @not-govuk/width-container injects its CSS
  * via the JS bundle, which loads after static stylesheets and wins the cascade.