@nationalarchives/frontend 0.2.8 → 0.2.9

package/nationalarchives/tools/_a11y.scss

@@ -1,12 +1,16 @@
 @use "../variables/a11y";
 @use "colour";
 
-@mixin focus-outline {
+@mixin focus-outline-without-offset {
   @include colour.colour-outline(
     "focus-outline",
     a11y.$focus-outline-width,
     solid
   );
+}
+
+@mixin focus-outline {
+  @include focus-outline-without-offset;
   outline-offset: a11y.$focus-outline-offset;
 }
 
@@ -14,10 +18,6 @@
   outline-offset: 0;
 }
 
-@mixin no-active-outline {
-  outline-offset: a11y.$focus-outline-offset;
-}
-
 @mixin no-focus-outline-on-click {
   .tna-template--clicked &:focus {
     outline: none;

package/nationalarchives/tools/_colour.scss

@@ -181,10 +181,13 @@
 
 // Use light theme colours (except for "form-error-border")
 %always-light {
-  @include colour-css-vars("form-error-border");
+  @include colour-css-vars("form-error-border", "focus-outline");
 
   @media (prefers-contrast: more) {
-    @include colour-css-vars-high-contrast("form-error-border");
+    @include colour-css-vars-high-contrast(
+      "form-error-border",
+      "focus-outline"
+    );
   }
 }
 
@@ -305,22 +308,54 @@
       colour.$colour-palette-default,
       "button-hover-background"
     )};
-  --accent-border: var(--font-base);
   --accent-list-marker: var(--font-base);
+  --accent-border: var(--accent-background);
 
   @include colour-background("background");
   @include colour-font("font-base");
 
   .tna-template--system-theme & {
     @media (prefers-color-scheme: dark) {
-      --link: #{map.get(colour.$colour-palette-default, "link")};
-      --link-visited: #{map.get(colour.$colour-palette-default, "link-visited")};
+      // --link: #{map.get(colour.$colour-palette-default, "link")};
+      // --link-visited: #{map.get(colour.$colour-palette-default, "link-visited")};
+
+      --background: var(--accent-background);
+      --font-base: var(--accent-font-base);
+      --font-dark: var(--accent-font-dark);
+      --font-light: var(--accent-font-light);
+      --icon-light: var(--accent-icon-light);
+      --link: var(--accent-link);
+      --link-visited: var(--accent-link);
+      --keyline: var(--accent-keyline);
+      --keyline-dark: var(--accent-keyline-dark);
+      --accent-list-marker: var(--accent-font-base);
+      --accent-border: var(--accent-font-dark);
+      --button-text: var(--accent-button-text);
+      --button-background: var(--accent-button-background);
+      --button-hover-text: var(--accent-button-hover-text);
+      --button-hover-background: var(--accent-button-hover-background);
     }
   }
 
   .tna-template--dark-theme & {
-    --link: #{map.get(colour.$colour-palette-default, "link")};
-    --link-visited: #{map.get(colour.$colour-palette-default, "link-visited")};
+    // --link: #{map.get(colour.$colour-palette-default, "link")};
+    // --link-visited: #{map.get(colour.$colour-palette-default, "link-visited")};
+
+    --background: var(--accent-background);
+    --font-base: var(--accent-font-base);
+    --font-dark: var(--accent-font-dark);
+    --font-light: var(--accent-font-light);
+    --icon-light: var(--accent-icon-light);
+    --link: var(--accent-link);
+    --link-visited: var(--accent-link);
+    --keyline: var(--accent-keyline);
+    --keyline-dark: var(--accent-keyline-dark);
+    --accent-list-marker: var(--accent-font-base);
+    --accent-border: var(--accent-font-dark);
+    --button-text: var(--accent-button-text);
+    --button-background: var(--accent-button-background);
+    --button-hover-text: var(--accent-button-hover-text);
+    --button-hover-background: var(--accent-button-hover-background);
   }
 }
 

package/nationalarchives/utilities/_a11y.scss

@@ -26,25 +26,30 @@
   // }
 }
 
-*:focus {
+*:focus-visible {
   z-index: 9;
 
   @include a11y.focus-outline;
 }
 
-// *:focus-visible {
-//   z-index: 9;
+@supports not selector(:focus-visible) {
+  *:focus {
+    z-index: 9;
 
-//   @include a11y.focus-outline;
-// }
-
-// @supports not selector(:focus-visible) {
-//   *:focus {
-//     z-index: 9;
+    @include a11y.focus-outline;
+  }
+}
 
-//     @include a11y.focus-outline;
-//   }
-// }
+a,
+button,
+input,
+textarea,
+select,
+summary {
+  &:active {
+    @include a11y.focus-outline-without-offset;
+  }
+}
 
 *:active {
   @include a11y.active-outline;

package/nationalarchives/utilities/lists/_index.scss

@@ -85,7 +85,7 @@ ol {
     cursor: pointer;
   }
 
-  &:not(#{&}--plain) {
+  &:not(&--plain) {
     gap: spacing.space(0.5) spacing.space(1);
   }
 
@@ -93,7 +93,7 @@ ol {
     @extend %chip-plain;
   }
 
-  &:not(#{&}--plain) &__item {
+  &:not(&--plain) &__item {
     @extend %chip-accent;
   }
 

package/nationalarchives/utilities/typography/_index.scss

@@ -125,10 +125,31 @@ small {
   -webkit-print-color-adjust: exact;
   print-color-adjust: exact;
 
-  .tna-background-accent & {
-    @include colour.contrast;
+  .tna-background-accent &,
+  .tna-template--dark-theme .tna-background-accent-light & {
+    @include colour.colour-font("contrast-font-base");
+
+    @include colour.colour-background("contrast-background");
 
     @include colour.colour-border("contrast-background");
+
+    .fa-solid {
+      @include colour.colour-font("contrast-icon-light");
+    }
+  }
+
+  .tna-template--system-theme .tna-background-accent-light & {
+    @media (prefers-color-scheme: dark) {
+      @include colour.colour-font("contrast-font-base");
+
+      @include colour.colour-background("contrast-background");
+
+      @include colour.colour-border("contrast-background");
+
+      .fa-solid {
+        @include colour.colour-font("contrast-icon-light");
+      }
+    }
   }
 }
 
@@ -163,7 +184,7 @@ small {
     @include colour.blue-accent;
   }
 
-  &:not(#{&}--plain) {
+  &:not(&--plain) {
     @extend %chip-accent;
   }
 }
@@ -348,7 +369,7 @@ small {
       @extend %chip-plain;
     }
 
-    &:not(#{&}--plain) {
+    &:not(&--plain) {
       @extend %chip-accent;
     }
   }

package/package.json

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