@nationalarchives/frontend 0.26.2 → 0.27.0

package/nationalarchives/tools/_a11y.scss

@@ -20,32 +20,60 @@
 
   -webkit-clip-path: inset(50%) !important;
   clip-path: inset(50%) !important;
-
-  // &::before,
-  // &::after {
-  //   content: "\00a0";
-  // }
 }
 
-@mixin focus-outline-without-offset {
-  @include colour.colour-outline(
-    "focus-outline",
-    a11y.$focus-outline-width,
-    solid
-  );
+%focus-outline {
+  outline: 3px #000 solid !important;
+  outline-offset: 3px !important;
+
+  box-shadow: 0 0 0 4px #fff !important;
+
+  .tna-template--dark-theme & {
+    outline-color: #fff !important;
+
+    box-shadow: 0 0 0 4px #000 !important;
+  }
+
+  .tna-template--system-theme & {
+    @media (prefers-color-scheme: dark) {
+      outline-color: #fff !important;
+
+      box-shadow: 0 0 0 4px #000 !important;
+    }
+  }
 }
 
 @mixin focus-outline {
-  @include focus-outline-without-offset;
-  outline-offset: a11y.$focus-outline-offset;
+  @extend %focus-outline;
 }
 
-@mixin active-outline {
-  outline-offset: 0;
+@mixin no-focus-outline {
+  outline: none !important;
+
+  box-shadow: none !important;
 }
 
-@mixin no-focus-outline-on-click {
-  .tna-template--clicked &:focus {
-    outline: none;
+%active-outline {
+  outline: 2px #000 solid !important;
+  outline-offset: 2px !important;
+
+  box-shadow: 0 0 0 3px #fff !important;
+
+  .tna-template--dark-theme & {
+    outline-color: #fff !important;
+
+    box-shadow: 0 0 0 3px #000 !important;
   }
+
+  .tna-template--system-theme & {
+    @media (prefers-color-scheme: dark) {
+      outline-color: #fff !important;
+
+      box-shadow: 0 0 0 3px #000 !important;
+    }
+  }
+}
+
+@mixin active-outline {
+  @extend %active-outline;
 }

package/nationalarchives/tools/_colour.scss

@@ -220,13 +220,15 @@ $base-colours: (
 
 // Use light theme colours (except for "form-error-border")
 %always-light {
-  @include colour-css-vars("form-error-border", "focus-outline");
+  // @include colour-css-vars("form-error-border", "focus-outline");
+  @include colour-css-vars;
 
   @media (prefers-contrast: more) {
-    @include colour-css-vars-high-contrast(
-      "form-error-border",
-      "focus-outline"
-    );
+    // @include colour-css-vars-high-contrast(
+    //   "form-error-border",
+    //   "focus-outline"
+    // );
+    @include colour-css-vars-high-contrast;
   }
 }
 

package/nationalarchives/utilities/_a11y.scss

@@ -26,17 +26,13 @@ textarea,
 select,
 summary {
   &:active {
-    @include a11y.focus-outline-without-offset;
+    @include a11y.active-outline;
   }
 }
 
-*:active {
-  @include a11y.active-outline;
-}
-
 .tna-\!--no-focus-style,
 *[tabindex="-1"] {
   &:focus {
-    outline: none;
+    @include a11y.no-focus-outline;
   }
 }

package/nationalarchives/utilities/forms/_index.scss

@@ -28,6 +28,10 @@
 
   &__body {
     margin-top: spacing.space(0.5);
+
+    &:first-child {
+      margin-top: 0;
+    }
   }
 
   &--error {

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

@@ -2,6 +2,7 @@
   {%- set containerClasses = [params.classes] if params.classes else [] -%}
   {%- set classes = containerClasses | join(' ') -%}
   <div class="tna-form-item{% if params.error %} tna-form-item--error{% endif %}{% if classes %} {{ classes }}{% endif %}"{%- if module %} data-module="{{ module }}"{% endif %}{%- for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
+    {%- if params.label %}
     <div class="tna-form-item__header">
       {%- if params.headingLevel %}
       <h{{ params.headingLevel }} class="tna-form-item__label tna-heading-{{ params.headingSize or 'm' }}">
@@ -15,6 +16,7 @@
       </label>
       {%- endif %}
     </div>
+    {%- endif %}
     {%- if params.hint %}
     <p id="{{ params.id }}-hint" class="tna-form-item__hint">
       {{ params.hint | safe }}

package/nationalarchives/utilities/lists/_index.scss

@@ -17,7 +17,7 @@ ol {
 .tna-ul,
 .tna-ol {
   margin-top: spacing.space(1);
-  padding-left: spacing.space(2);
+  padding-left: spacing.space(2.5);
 
   &:first-child {
     margin-top: 0;
@@ -39,12 +39,7 @@ ol {
 
   > li {
     &::marker {
-      @include colour.colour-font("font-light");
       @include typography.main-font-weight-medium;
-
-      @include colour.on-high-contrast {
-        @include colour.colour-font("font-dark");
-      }
     }
   }
 

package/nationalarchives/utilities/typography/_index.scss

@@ -59,7 +59,6 @@ a {
   }
 
   &:hover,
-  &:focus-visible,
   &:active {
     @include typography.interacted-text-decoration;
   }
@@ -94,8 +93,7 @@ small {
   @at-root #{selector.unify("a", &)} {
     text-decoration: underline;
 
-    &:hover,
-    &:focus-visible {
+    &:hover {
       text-decoration: underline;
       text-decoration-thickness: 0.1875em;
       text-underline-offset: 0.0625em;
@@ -126,8 +124,7 @@ small {
   border-radius: 0.1px;
 
   @at-root #{selector.unify("a", &)} {
-    &:hover,
-    &:focus-visible {
+    &:hover {
       @include typography.interacted-text-decoration;
     }
 

package/nationalarchives/variables/_colour.scss

@@ -120,7 +120,7 @@ $colour-palette-dark: map.merge(
     "keyline": brand-colour("white", 0.25),
     "keyline-dark": brand-colour("white", 0.75),
     "input-foreground": brand-colour("white"),
-    "input-background": brand-colour("black"),
+    "input-background": brand-colour("dark-grey"),
     "input-border": brand-colour("white"),
     "form-error-border": #f00,
     "form-error-text": #ff6b6b,
@@ -176,6 +176,7 @@ $colour-palette-high-contrast-dark: map.merge(
     "link-visited": #ccb8ff,
     "keyline": brand-colour("white", 0.8),
     "keyline-dark": brand-colour("white"),
+    "input-background": brand-colour("black"),
     "form-error-border": #ff6b6b,
     "form-error-text": #ff6b6b,
     "contrast-background": brand-colour("black"),

package/package.json

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