@nationalarchives/frontend 0.1.53 → 0.1.55

package/nationalarchives/tools/_colour.scss

@@ -40,17 +40,19 @@
   }
 }
 
+@function colour-var($colour) {
+  @return var(
+    --#{$colour},
+    #{map.get(colour.$colour-palette-default, $colour)}
+  );
+}
+
 @mixin colour-font($colour, $important: false) {
-  color: var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})
-    if($important, !important, null);
+  color: colour-var($colour) if($important, !important, null);
 }
 
 @mixin colour-background($colour, $important: false) {
-  background-color: var(
-      --#{$colour},
-      #{map.get(colour.$colour-palette-default, $colour)}
-    )
-    if($important, !important, null);
+  background-color: colour-var($colour) if($important, !important, null);
 }
 
 @mixin colour-background-brand($brandColour, $important: false) {
@@ -67,20 +69,17 @@
   @if $direction != "" {
     @if $width != "" {
       border-#{$direction}: $width
-        var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})
+        colour-var($colour)
         $style
         if($important, !important, null);
     } @else {
-      border-#{$direction}-color: var(
-          --#{$colour},
-          #{map.get(colour.$colour-palette-default, $colour)}
-        )
+      border-#{$direction}-color: colour-var($colour)
         if($important, !important, null);
     }
   } @else {
     @if $width != "" {
       border: $width
-        var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})
+        colour-var($colour)
         $style
         if($important, !important, null);
     } @else {
@@ -95,22 +94,14 @@
 
 @mixin colour-outline($colour, $width: "", $style: solid, $important: false) {
   @if $width != "" {
-    outline: $width
-      var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})
-      $style
-      if($important, !important, null);
+    outline: $width colour-var($colour) $style if($important, !important, null);
   } @else {
-    outline-color: var(
-        --#{$colour},
-        #{map.get(colour.$colour-palette-default, $colour)}
-      )
-      if($important, !important, null);
+    outline-color: colour-var($colour) if($important, !important, null);
   }
 }
 
 @mixin colour-fill($colour, $important: false) {
-  fill: var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})
-    if($important, !important, null);
+  fill: colour-var($colour) if($important, !important, null);
 }
 
 @mixin thick-keyline($direction) {

package/nationalarchives/utilities/_a11y.scss

@@ -32,12 +32,26 @@
   @include a11y.focus-outline;
 }
 
+// *:focus-visible {
+//   z-index: 9;
+
+//   @include a11y.focus-outline;
+// }
+
+// @supports not selector(:focus-visible) {
+//   *:focus {
+//     z-index: 9;
+
+//     @include a11y.focus-outline;
+//   }
+// }
+
 *:active {
   @include a11y.active-outline;
 }
 
 .tna-\!--no-focus-style,
-*[tabindex="-1"]:focus {
+*[tabindex="-1"] {
   &:focus {
     outline: none;
   }

package/nationalarchives/utilities/_lists.scss

@@ -4,38 +4,34 @@
 @use "../tools/typography";
 
 .tna-ul,
-.tna-ul ul {
+.tna-ul > li > ul {
   list-style-type: disc;
 }
 
 .tna-ul,
 .tna-ol {
-  ul,
-  ol {
+  margin: spacing.space(1) 0 0;
+
+  > li > ul,
+  > li > ol {
     margin-top: 0;
   }
 
   &,
-  & ul,
-  & ol {
-    margin: spacing.space(1) 0 0;
+  & > li > ul,
+  & > li > ol {
     padding: 0 0 0 spacing.space(2);
 
     &--plain {
       padding-left: 0;
 
       &,
-      & ul,
-      & ol {
+      & > li > ul {
         list-style: none;
       }
     }
 
-    &:first-child {
-      margin-top: 0;
-    }
-
-    li::marker {
+    > li::marker {
       @include colour.colour-font("accent-background");
       font-weight: 700;
 
@@ -44,6 +40,10 @@
       }
     }
   }
+
+  &:first-child {
+    margin-top: 0;
+  }
 }
 
 @mixin stacked-dl {

package/nationalarchives/utilities/_tables.scss

@@ -14,12 +14,8 @@
   border-collapse: collapse;
   @include spacing.space-above;
 
-  &:first-child {
-    margin-top: 0;
-  }
-
   &__caption {
-    padding: spacing.space(1) 0;
+    padding: spacing.space(1) 0 0;
 
     caption-side: bottom;
 
@@ -68,12 +64,12 @@
   }
 
   &__head &__header {
-    @include colour.colour-border("keyline-dark", 4px, solid, bottom);
+    @include colour.thick-keyline-dark(bottom);
   }
 
   &__foot &__header,
   &__foot &__cell {
-    @include colour.colour-border("keyline-dark", 4px, solid, top);
+    @include colour.thick-keyline-dark(top);
   }
 
   p {

package/package.json

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