@nationalarchives/frontend 1.4.1 → 1.5.0

package/nationalarchives/tools/_spacing.scss

@@ -35,7 +35,8 @@
 }
 
 %no-space-above-for-first-children {
-  &:first-child {
+  &:first-child,
+  &:first-child.tna-visually-hidden + * {
     margin-top: 0;
   }
 }

package/nationalarchives/utilities/a11y/_index.scss

@@ -1,7 +1,6 @@
 @use "../../tools/a11y";
 
-.tna-visually-hidden,
-.tna-\!--visually-hidden {
+.tna-visually-hidden {
   @include a11y.visually-hidden;
 }
 

package/nationalarchives/utilities/forms/form-item.njk

@@ -24,7 +24,7 @@
     {%- endif %}
     {%- if params.error %}
     <p id="{{ params.id }}-error" class="tna-form-item__error">
-      <span class="tna-!--visually-hidden">Error:</span> {{ params.error.text }}
+      <span class="tna-visually-hidden">Error:</span> {{ params.error.text }}
     </p>
     {%- endif %}
     <div class="tna-form-item__body">

package/nationalarchives/utilities/typography/_index.scss

@@ -530,7 +530,8 @@ address {
 }
 
 code,
-pre {
+pre,
+kbd {
   font-family: typographyVars.$code-font-family;
 }
 
@@ -541,19 +542,15 @@ code {
   background-color: #f1ece9;
 
   .tna-template--dark-theme & {
-    // color: #ffa07a;
     color: #d49;
 
-    // background-color: #2b2b2b;
     background-color: #111;
   }
 
   .tna-template--system-theme & {
     @media (prefers-color-scheme: dark) {
-      // color: #ffa07a;
       color: #d49;
 
-      // background-color: #2b2b2b;
       background-color: #111;
     }
   }
@@ -562,3 +559,14 @@ code {
     @include colour.colour-border("keyline", 1px);
   }
 }
+
+kbd {
+  padding-inline: 0.25em;
+
+  font-size: 0.95em;
+
+  @include colour.colour-border("keyline", 1px);
+  @include borders.rounded-border;
+
+  box-shadow: 0 0.1875em 0 var(--keyline);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",