@nationalarchives/frontend 0.1.56 → 0.1.58

package/nationalarchives/tools/_colour.scss

@@ -124,7 +124,7 @@
 
 @mixin thick-keyline-accent($direction) {
   @include colour-border(
-    "accent-background",
+    "accent-border",
     borders.$thick-border-width,
     solid,
     $direction
@@ -158,39 +158,6 @@
   @extend %light;
 }
 
-// Remove accent and contrast values (except for "form-error")
-%plain {
-  @include colour-css-vars("form-error");
-
-  @media (prefers-contrast: more) {
-    @include colour-css-vars-high-contrast("form-error");
-  }
-
-  .tna-template--system-theme & {
-    @media (prefers-color-scheme: dark) {
-      @include colour-css-vars-dark("form-error");
-    }
-
-    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
-      @include colour-css-vars-high-contrast-dark("form-error");
-    }
-  }
-
-  .tna-template--dark-theme & {
-    @include colour-css-vars-dark("form-error");
-
-    @media (prefers-contrast: more) {
-      @include colour-css-vars-high-contrast-dark("form-error");
-    }
-  }
-
-  @include colour-background("background");
-}
-
-@mixin plain {
-  @extend %plain;
-}
-
 %contrast {
   --background: var(--contrast-background);
   --font-base: var(--contrast-font-base);
@@ -205,6 +172,7 @@
   --button-background: var(--contrast-button-background);
   --button-hover-text: var(--contrast-button-hover-text);
   --button-hover-background: var(--contrast-button-hover-background);
+  --accent-list-marker: var(--accent-border);
 
   @include colour-background("background");
 
@@ -230,6 +198,7 @@
     --button-background: var(--contrast-button-background);
     --button-hover-text: var(--contrast-button-hover-text);
     --button-hover-background: var(--contrast-button-hover-background);
+    --accent-list-marker: var(--accent-border);
 
     @include colour-background("background");
 
@@ -263,6 +232,8 @@
   --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);
 
   @include colour-background("background");
 
@@ -294,6 +265,8 @@
       colour.$colour-palette-default,
       "button-hover-background"
     )};
+  --accent-border: var(--font-base);
+  --accent-list-marker: var(--font-base);
 
   .tna-template--system-theme & {
     @media (prefers-color-scheme: dark) {
@@ -315,9 +288,44 @@
   @extend %accent-light;
 }
 
+// Remove accent and contrast values (except for "form-error")
+%plain {
+  @include colour-css-vars("form-error");
+
+  @media (prefers-contrast: more) {
+    @include colour-css-vars-high-contrast("form-error");
+  }
+
+  .tna-template--system-theme & {
+    @media (prefers-color-scheme: dark) {
+      @include colour-css-vars-dark("form-error");
+    }
+
+    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
+      @include colour-css-vars-high-contrast-dark("form-error");
+    }
+  }
+
+  .tna-template--dark-theme & {
+    @include colour-css-vars-dark("form-error");
+
+    @media (prefers-contrast: more) {
+      @include colour-css-vars-high-contrast-dark("form-error");
+    }
+  }
+
+  @include colour-background("background");
+}
+
+@mixin plain {
+  @extend %plain;
+}
+
 %yellow-accent {
   --accent-background: #{colour.brand-colour("yellow")} !important;
   --accent-background-light: #{colour.brand-colour("cream")} !important;
+  --accent-border: #{colour.brand-colour("yellow")} !important;
+  --accent-list-marker: #{colour.brand-colour("brown")} !important;
   --accent-font-base: #{colour.brand-colour("black")} !important;
   --accent-font-dark: #{colour.brand-colour("black")} !important;
   --accent-font-light: #{colour.brand-colour("black", 0.7)} !important;
@@ -349,57 +357,67 @@
 %black-accent {
   --accent-background: #{colour.brand-colour("black")} !important;
   --accent-background-light: #{colour.brand-colour("light-grey")} !important;
+  --accent-border: #{colour.brand-colour("black")} !important;
+  --accent-list-marker: #{colour.brand-colour("black")} !important;
   --button-accent-text: #{colour.brand-colour("black")} !important;
   --button-accent-background: #{colour.brand-colour("grey")} !important;
 }
 
 @mixin black-accent {
-  @extend %black-accent;
   @extend %accent-lighter-text;
+  @extend %black-accent;
 }
 
 %pink-accent {
   --accent-background: #{colour.brand-colour("maroon")} !important;
   --accent-background-light: #{colour.brand-colour("pastel-pink")} !important;
+  --accent-border: #{colour.brand-colour("pink")} !important;
+  --accent-list-marker: #{colour.brand-colour("pink")} !important;
   --button-accent-background: #{colour.brand-colour("maroon")} !important;
 }
 
 @mixin pink-accent {
-  @extend %pink-accent;
   @extend %accent-lighter-text;
+  @extend %pink-accent;
 }
 
 %orange-accent {
   --accent-background: #{colour.brand-colour("chestnut")} !important;
   --accent-background-light: #{colour.brand-colour("pastel-orange")} !important;
+  --accent-border: #{colour.brand-colour("orange")} !important;
+  --accent-list-marker: #{colour.brand-colour("orange")} !important;
   --button-accent-background: #{colour.brand-colour("chestnut")} !important;
 }
 
 @mixin orange-accent {
-  @extend %orange-accent;
   @extend %accent-lighter-text;
+  @extend %orange-accent;
 }
 
 %green-accent {
   --accent-background: #{colour.brand-colour("forest")} !important;
   --accent-background-light: #{colour.brand-colour("pastel-green")} !important;
+  --accent-border: #{colour.brand-colour("green")} !important;
+  --accent-list-marker: #{colour.brand-colour("green")} !important;
   --button-accent-background: #{colour.brand-colour("forest")} !important;
 }
 
 @mixin green-accent {
-  @extend %green-accent;
   @extend %accent-lighter-text;
+  @extend %green-accent;
 }
 
 %blue-accent {
   --accent-background: #{colour.brand-colour("navy")} !important;
   --accent-background-light: #{colour.brand-colour("pastel-blue")} !important;
+  --accent-border: #{colour.brand-colour("blue")} !important;
+  --accent-list-marker: #{colour.brand-colour("blue")} !important;
   --button-accent-background: #{colour.brand-colour("navy")} !important;
 }
 
 @mixin blue-accent {
-  @extend %blue-accent;
   @extend %accent-lighter-text;
+  @extend %blue-accent;
 }
 
 @mixin on-high-contrast {

package/nationalarchives/tools/_media.scss

@@ -90,3 +90,13 @@ $media-tiny: "(max-width: #{$largest-tiny-device-em})";
     @content;
   }
 }
+
+%hide-on-print {
+  @media print {
+    display: none;
+  }
+}
+
+@mixin hide-on-print() {
+  @extend %hide-on-print;
+}

package/nationalarchives/utilities/_areas.scss

@@ -21,7 +21,7 @@
     padding: spacing.space(1);
   }
 
-  @include colour.on-high-contrast {
+  @include colour.on-high-contrast-and-forced-colours {
     @include colour.colour-border("keyline-dark", 1px);
   }
 

package/nationalarchives/utilities/_lists.scss

@@ -2,6 +2,7 @@
 @use "../tools/media";
 @use "../tools/spacing";
 @use "../tools/typography";
+@use "../utilities/typography" as typographyUtils;
 
 .tna-ul,
 .tna-ul > li > ul {
@@ -32,12 +33,8 @@
     }
 
     > li::marker {
-      @include colour.colour-font("accent-background");
+      @include colour.colour-font("accent-list-marker");
       font-weight: 700;
-
-      .tna-background-accent & {
-        @include colour.colour-font("font-dark");
-      }
     }
   }
 
@@ -46,6 +43,45 @@
   }
 }
 
+.tna-dl-chips {
+  @include spacing.space-above(true);
+
+  display: flex;
+  flex-wrap: wrap;
+  gap: spacing.space(0.75) spacing.space(1.5);
+
+  @extend %chip-plain;
+
+  dt {
+    position: absolute;
+
+    font-size: 0;
+  }
+
+  &__item {
+    @extend %chip;
+  }
+
+  a#{&}__item {
+    cursor: pointer;
+  }
+
+  &:not(#{&}--plain) {
+    gap: spacing.space(0.5) spacing.space(1);
+  }
+
+  &--plain &__item {
+    @extend %chip-plain;
+  }
+  &:not(#{&}--plain) &__item {
+    @extend %chip-accent;
+  }
+
+  &--plain a#{&}__item {
+    @include colour.colour-font("link");
+  }
+}
+
 @mixin stacked-dl {
   dt,
   dd {

package/nationalarchives/utilities/_reset.scss

@@ -10,7 +10,7 @@
   }
 
   @media (prefers-contrast: more) {
-    background-image: none !important;
+    background-image: none;
   }
 }
 

package/nationalarchives/utilities/_typography.scss

@@ -73,7 +73,7 @@ small {
   );
 }
 
-%chip-base {
+%chip {
   max-width: max-content;
   padding: spacing.space(0.125) spacing.space(0.25);
 
@@ -85,6 +85,26 @@ small {
   @include typography.detail-font-small;
   line-height: 1;
   text-align: center;
+
+  @at-root #{selector.unify("a", &)} {
+    text-decoration: underline;
+
+    &:hover {
+      @include typography.interacted-text-decoration;
+
+      .fa-solid {
+        color: inherit;
+      }
+    }
+  }
+
+  .fa-solid {
+    @include colour.colour-font("icon-light");
+
+    @include colour.on-high-contrast {
+      @include colour.colour-font("icon");
+    }
+  }
 }
 
 %chip-plain {
@@ -93,6 +113,12 @@ small {
   background-color: transparent;
 
   border: none;
+
+  @at-root #{selector.unify("a", &)} {
+    .fa-solid {
+      color: inherit;
+    }
+  }
 }
 
 %chip-accent {
@@ -108,7 +134,7 @@ small {
 }
 
 .tna-chip {
-  @extend %chip-base;
+  @extend %chip;
 
   &--plain {
     @extend %chip-plain;
@@ -141,30 +167,6 @@ small {
   &:not(#{&}--plain) {
     @extend %chip-accent;
   }
-
-  .fa-solid {
-    @include colour.colour-font("icon-light");
-
-    @include colour.on-high-contrast {
-      padding-right: spacing.space(0.5);
-
-      color: inherit;
-
-      @include colour.colour-border("keyline-dark", 1px, solid, right);
-    }
-  }
-
-  @at-root #{selector.unify("a", &)} {
-    text-decoration: none;
-
-    &:hover {
-      @include typography.interacted-text-decoration;
-    }
-
-    .fa-solid {
-      color: inherit;
-    }
-  }
 }
 
 .tna-chip-list {
@@ -190,6 +192,8 @@ small {
     a {
       display: inline-block;
 
+      vertical-align: top;
+
       &::after {
         content: "\203A";
 
@@ -312,7 +316,7 @@ small {
   &__supertitle {
     margin: 0 0 spacing.space(0.25);
 
-    @extend %chip-base;
+    @extend %chip;
 
     &--plain {
       @extend %chip-plain;

package/nationalarchives/variables/_colour.scss

@@ -83,8 +83,10 @@ $colour-palette-default: (
   "contrast-button-background": brand-colour("white"),
   "contrast-button-hover-text": brand-colour("white"),
   "contrast-button-hover-background": brand-colour("black"),
-  "accent-background": brand-colour("grey"),
+  "accent-background": #afb6b5,
   "accent-background-light": #ededed,
+  "accent-border": brand-colour("grey"),
+  "accent-list-marker": brand-colour("black", 0.58),
   "accent-font-base": brand-colour("black"),
   "accent-font-dark": brand-colour("black"),
   "accent-font-light": brand-colour("black", 0.7),
@@ -127,6 +129,8 @@ $colour-palette-dark: map.merge(
     "contrast-background": #101112,
     "contrast-link-visited":
       map.get($colour-palette-default, "contrast-link-visited"),
+    "accent-border": brand-colour("white"),
+    "accent-list-marker": brand-colour("white", 0.51),
   )
 ) !default;
 
@@ -139,7 +143,7 @@ $colour-palette-high-contrast: map.merge(
   $colour-palette-default,
   (
     "background": brand-colour("white"),
-    "background-tint": #f4f4f4,
+    "background-tint": #ddd,
     "font-base": brand-colour("black"),
     "font-light": brand-colour("black"),
     "icon-light": brand-colour("black", 0.75),
@@ -148,19 +152,9 @@ $colour-palette-high-contrast: map.merge(
     "focus-outline": brand-colour("orange"),
     "keyline": brand-colour("black"),
     "keyline-dark": brand-colour("black"),
-    "contrast-background": #f4f4f4,
-    "contrast-font-base": brand-colour("black"),
-    "contrast-font-dark": brand-colour("black"),
-    "contrast-font-light": brand-colour("black"),
-    "contrast-icon-light": brand-colour("black", 0.45),
-    "contrast-link": #34d,
-    "contrast-link-visited": #848,
-    "contrast-keyline": brand-colour("black"),
-    "contrast-keyline-dark": brand-colour("black"),
-    "contrast-button-text": brand-colour("white"),
-    "contrast-button-background": brand-colour("black"),
-    "contrast-button-hover-text": brand-colour("black"),
-    "contrast-button-hover-background": brand-colour("white"),
+    "contrast-background": brand-colour("black"),
+    "contrast-link": brand-colour("blue"),
+    "contrast-link-visited": #a8f,
   )
 ) !default;
 
@@ -179,5 +173,7 @@ $colour-palette-high-contrast-dark: map.merge(
     "keyline": brand-colour("white"),
     "form-error": #ff6161,
     "contrast-background": brand-colour("black"),
+    "contrast-link": brand-colour("blue"),
+    "contrast-link-visited": #a8f,
   )
 ) !default;

package/package.json

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