@nationalarchives/frontend 0.32.0 → 0.33.1

package/nationalarchives/tools/_spacing.scss

@@ -4,21 +4,37 @@
 @use "../variables/typography";
 @use "../tools/media";
 
+/*
+ * ------------------------------------------
+ * Spacing is created with rem rather than px
+ * units as when users use a custom font size
+ * some browsers handle the resize of rem and
+ * em separately from px which causes spacing
+ * and layout issues, so to ensure everything
+ * remaians consistent we use rem for spacing
+ * and typography. The original intention was
+ * separation so that we could scale the type
+ * without affecting spacing, but in practice
+ * there are too many ways to change the font
+ * size in various browsers and devices
+ * ------------------------------------------
+ */
 @function space($size) {
-  @return #{$size * spacing.$spacing-unit-px}px;
+  // @return #{$size * spacing.$spacing-unit-px}px;
+  @return #{$size}rem;
 }
 
 %space-above {
   margin-top: space(2);
-
-  &:first-child {
-    margin-top: 0;
-  }
+  @extend %no-space-above-for-first-children;
 }
 
 %space-only-above {
   margin: #{space(2)} 0 0;
+  @extend %no-space-above-for-first-children;
+}
 
+%no-space-above-for-first-children {
   &:first-child {
     margin-top: 0;
   }

package/nationalarchives/utilities/_reset.scss

@@ -25,30 +25,19 @@
  * If the browser supports -apple-system-body
  * which at the moment is just iOS then using
  * the system body font we can respond to the
- * Dynamic Type setting in iOS
+ * Dynamic Type setting in iOS, however we do
+ * disable it for any non-touch Apple devices
+ * such as Mac OS, because the default system
+ * font size is set to 13px rather than 16px
  * ------------------------------------------
  */
-@supports (font: -apple-system-body) {
+@supports (font: -apple-system-body) and (-webkit-touch-callout: default) {
   html {
     /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
     font: -apple-system-body;
   }
 }
 
-/*
- * ------------------------------------------
- * Disable Apple's Dynamic Type for non-touch
- * devices (like Mac OS), because the default
- * system body size is defined as 13px rather
- * than 16px like on other devices
- * ------------------------------------------
- */
-@supports (font: -apple-system-body) and (not (-webkit-touch-callout: default)) {
-  html {
-    @include typography.font-size(16);
-  }
-}
-
 img,
 svg,
 picture,

package/nationalarchives/utilities/lists/_index.scss

@@ -4,14 +4,36 @@
 @use "../../tools/typography";
 @use "../../utilities/typography" as typographyUtils;
 
-ul,
-ol {
-  margin: 0;
-  padding: 0;
+ul {
+  list-style-type: disc;
+
+  & & {
+    list-style-type: circle;
+  }
+
+  & & & {
+    list-style-type: square;
+  }
+
+  & & & & {
+    list-style-type: disc;
+  }
 }
 
-.tna-ul {
-  list-style-type: disc;
+ol {
+  list-style-type: decimal;
+
+  & & {
+    list-style-type: lower-alpha;
+  }
+
+  & & & {
+    list-style-type: lower-roman;
+  }
+
+  & & & & {
+    list-style-type: decimal;
+  }
 }
 
 .tna-ul,
@@ -25,16 +47,12 @@ ol {
 
   &--plain {
     padding-left: 0;
-  }
 
-  &--plain,
-  &--no-list-style {
-    list-style: none;
-  }
+    list-style: none !important;
 
-  & > li > & {
-    margin-top: 0;
-    padding-left: spacing.space(1.25);
+    > li::marker {
+      content: "";
+    }
   }
 
   > li {
@@ -43,21 +61,20 @@ ol {
     }
   }
 
-  &--spaced > li + li {
-    margin-top: spacing.space(0.5);
-  }
-
-  &--spaced > li > & {
-    margin-top: spacing.space(1);
-    margin-bottom: spacing.space(1);
-  }
-
   &--dashed {
     > li::marker {
       content: "—  ";
       @include typography.main-font-weight;
     }
   }
+
+  &--spaced > li + li {
+    margin-top: spacing.space(0.5);
+  }
+
+  &:not(&--plain) > li > & {
+    padding-left: spacing.space(1.25);
+  }
 }
 
 .tna-dl-chips {
@@ -105,211 +122,138 @@ ol {
 }
 
 @mixin stacked-dl {
-  > dt,
-  > dd {
-    width: 100%;
-    margin-left: 0;
-  }
+  display: block;
 
-  > dd {
-    padding-left: spacing.space(1);
-  }
-
-  &.tna-dl--plain {
-    > dt {
-      padding-top: 0;
-      padding-bottom: 0;
-
-      .fa-solid {
-        margin-top: 0;
-      }
-    }
+  &--lined {
+    padding-bottom: 0;
 
     > dd {
-      margin-left: 0;
+      border-top: none;
+
       padding-top: 0;
+      padding-bottom: spacing.space(0.5);
     }
   }
 
-  &:not(.tna-dl--plain) {
+  &--zebra {
     > dt {
-      @include colour.colour-background("background-tint");
+      --background: var(--background-tint);
 
-      @include colour.colour-font("font-base");
+      @include colour.colour-background("background");
     }
 
-    > dd {
-      margin-left: 0;
-
-      background: transparent !important;
-    }
-  }
-
-  @include colour.on-high-contrast-and-forced-colours {
-    > dd {
-      border-top: none !important;
-    }
-
-    &.tna-dl--plain {
-      > dt {
-        padding-top: spacing.space(0.5) !important;
-      }
-    }
-
-    &.tna-dl--icon-padding.tna-dl--plain {
-      > dt {
-        .fa-solid {
-          margin-top: spacing.space(0.5) !important;
-        }
-      }
-    }
-
-    &.tna-dl--stacked:not(.tna-dl--plain) {
-      > dt {
-        padding-bottom: 0 !important;
-      }
+    > dd:nth-child(1n) {
+      background: none;
     }
   }
 }
 
 .tna-dl {
-  @include spacing.space-above(true);
+  @include spacing.space-above;
 
-  display: flex;
-  flex-wrap: wrap;
+  display: inline-grid;
+  grid-template-columns: auto;
+  gap: spacing.space(0.5) 0;
 
-  &:first-child {
-    margin-top: 0;
+  &--left-weighted {
+    grid-template-columns: 2fr 1fr;
+  }
+
+  &--right-weighted {
+    grid-template-columns: 1fr 2fr;
   }
 
   > dt,
   > dd {
     margin: 0;
-    padding: spacing.space(0.5) spacing.space(1);
 
-    box-sizing: border-box;
+    overflow-wrap: break-word;
+  }
 
+  > dt {
+    @include typography.main-font-weight-bold;
     position: relative;
 
-    overflow-wrap: break-word;
-  }
+    .fa-solid,
+    .fa-brands {
+      display: block;
 
-  &--plain {
-    > dt {
-      padding-top: 0;
-      padding-left: 0;
-    }
+      position: absolute;
+      top: 0;
+      left: 0;
 
-    > dd {
-      padding-top: 0;
-      padding-right: 0;
+      line-height: inherit;
+      @include colour.colour-font("icon-light");
     }
   }
 
-  &--plain#{&}--spaced {
-    > dt,
-    > dd {
-      padding-bottom: spacing.space(1.25);
+  &:has(> dt > .fa-solid, > dt > .fa-brands) {
+    > dt {
+      padding-left: spacing.space(2);
     }
   }
 
-  > dt {
-    width: 30%;
-
-    @include typography.main-font-weight-bold;
-  }
-
   > dd {
-    width: 70%;
+    padding-left: spacing.space(2);
 
-    + dd {
-      margin-left: 30%;
-    }
+    grid-column-start: 2;
   }
 
-  &--icon-padding {
-    > dt {
-      padding-left: 3rem !important;
-
-      position: relative;
+  &--lined {
+    padding-bottom: spacing.space(0.5);
+    @include colour.colour-border("keyline", 1px, solid, bottom);
 
-      .fa-solid {
-        overflow: visible;
+    /* stylelint-disable-next-line no-descending-specificity */
+    > dt,
+    > dd {
+      padding-top: spacing.space(0.5);
+      @include colour.colour-border("keyline", 1px, solid, top);
 
-        position: absolute;
+      .fa-solid,
+      .fa-brands {
         top: spacing.space(0.5);
-        left: spacing.space(1);
-
-        line-height: inherit;
-
-        @include colour.colour-font("icon-light");
       }
     }
   }
 
-  &--icon-padding#{&}--plain {
-    > dt {
-      padding-left: spacing.space(2) !important;
+  &--zebra {
+    gap: 0;
 
-      .fa-solid {
-        top: 0;
-        left: 0;
-      }
+    /* stylelint-disable-next-line no-descending-specificity */
+    > dt,
+    > dd {
+      padding: spacing.space(0.5) spacing.space(1) spacing.space(0.5)
+        spacing.space(1);
     }
 
-    > dd {
-      padding-left: spacing.space(2);
+    > dt {
+      .fa-solid,
+      .fa-brands {
+        top: spacing.space(0.5);
+        left: spacing.space(1);
+      }
     }
-  }
 
-  &:not(&--plain) {
     > dt:first-child,
     > dd:nth-of-type(2n) + dt,
     > dd:nth-of-type(2n + 1) {
       @include colour.tint;
     }
-  }
-
-  @include media.on-small {
-    > dt {
-      width: 35%;
-    }
-
-    > dd {
-      width: 65%;
 
-      + dd {
-        margin-left: 35%;
+    &:has(> dt > .fa-solid, > dt > .fa-brands) {
+      > dt {
+        padding-left: spacing.space(3);
       }
     }
   }
 
-  &--stacked {
+  &--stacked#{&} {
     @include stacked-dl;
   }
 
-  @include media.on-tiny {
+  @include media.on-mobile {
     @include stacked-dl;
   }
-
-  @include colour.on-high-contrast-and-forced-colours {
-    @include colour.colour-border("keyline-dark", 1px, solid, bottom);
-
-    > dt,
-    > dd {
-      background: transparent !important;
-
-      @include colour.colour-border("keyline-dark", 1px, solid, top);
-    }
-
-    &--plain {
-      > dt,
-      > dt .fa-solid,
-      > dd {
-        padding-top: spacing.space(0.5);
-      }
-    }
-  }
 }
 
 li,

package/nationalarchives/utilities/tables/_index.scss

@@ -30,11 +30,11 @@ $table-overflow-shadow-colour-hidden: rgb(0 0 0 / 0%);
     --overflow-shadow-end: #{$table-overflow-shadow-colour};
   }
 
-  10% {
+  5% {
     --overflow-shadow-start: #{$table-overflow-shadow-colour};
   }
 
-  90% {
+  95% {
     --overflow-shadow-end: #{$table-overflow-shadow-colour};
   }
 
@@ -193,8 +193,6 @@ $table-overflow-shadow-colour-hidden: rgb(0 0 0 / 0%);
     100% 100%,
     100% 100%;
   background-repeat: no-repeat;
-
-  border-radius: 0.1px;
   background-position:
     0 0,
     100%,
@@ -202,6 +200,8 @@ $table-overflow-shadow-colour-hidden: rgb(0 0 0 / 0%);
     100%;
   background-attachment: local, local, scroll, scroll;
 
+  border-radius: 0.1px;
+
   container-type: inline-size;
 
   contain: paint;
@@ -230,6 +230,7 @@ $table-overflow-shadow-colour-hidden: rgb(0 0 0 / 0%);
           #{$table-overflow-shadow-colour-hidden}
         )
         transparent;
+    background-position: 0;
 
     animation: overflow-shadows 1ms linear;
     animation-timeline: --overflow-shadows;

package/package.json

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