@nationalarchives/frontend 0.1.57 → 0.1.59

package/nationalarchives/tools/_colour.scss

@@ -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,8 @@
   --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);
+  // --accent-list-marker: var(--font-base);
 
   @include colour-background("background");
 
@@ -230,6 +199,8 @@
     --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);
+    // --accent-list-marker: var(--font-base);
 
     @include colour-background("background");
 
@@ -263,6 +234,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 +267,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,10 +290,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("brown")} !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;
@@ -350,61 +359,69 @@
 %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-background: #{colour.brand-colour("light-grey")} !important;
+  --button-text: #{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/utilities/_lists.scss

@@ -2,9 +2,9 @@
 @use "../tools/media";
 @use "../tools/spacing";
 @use "../tools/typography";
+@use "../utilities/typography" as typographyUtils;
 
-.tna-ul,
-.tna-ul > li > ul {
+.tna-ul {
   list-style-type: disc;
 }
 
@@ -12,33 +12,74 @@
 .tna-ol {
   margin: spacing.space(1) 0 0;
 
-  > li > ul,
-  > li > ol {
+  padding: 0 0 0 spacing.space(2);
+
+  &:first-child {
     margin-top: 0;
   }
 
-  &,
-  & > li > ul,
-  & > li > ol {
-    padding: 0 0 0 spacing.space(2);
+  &--plain {
+    padding-left: 0;
 
-    &--plain {
-      padding-left: 0;
+    list-style: none;
+  }
 
-      &,
-      & > li > ul {
-        list-style: none;
-      }
+  & > li > & {
+    padding-left: spacing.space(1);
+  }
+
+  > li {
+    &::marker {
+      @include colour.colour-font("accent-list-marker");
+      @include typography.main-font-weight-bold;
     }
+  }
 
+  &--dashed {
     > li::marker {
-      @include colour.colour-font("accent-border");
-      font-weight: 700;
+      content: "—  ";
+      @include colour.colour-font("font-light");
+      @include typography.main-font-weight;
     }
   }
+}
 
-  &:first-child {
-    margin-top: 0;
+.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");
   }
 }
 

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 {
@@ -314,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

@@ -86,6 +86,7 @@ $colour-palette-default: (
   "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),
@@ -126,8 +127,8 @@ $colour-palette-dark: map.merge(
     "button-hover-text": brand-colour("white"),
     "button-hover-background": brand-colour("black"),
     "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;
 
@@ -140,7 +141,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),
@@ -149,19 +150,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;
 
@@ -180,5 +171,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.57",
+  "version": "0.1.59",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",
@@ -47,16 +47,16 @@
     "@babel/core": "^7.24.5",
     "@babel/preset-env": "^7.24.5",
     "@mdx-js/react": "^3.0.0",
-    "@storybook/addon-a11y": "^8.0.10",
-    "@storybook/addon-docs": "^8.0.10",
-    "@storybook/addon-essentials": "^8.0.10",
-    "@storybook/addon-interactions": "^8.0.10",
-    "@storybook/addon-links": "^8.0.10",
-    "@storybook/addon-mdx-gfm": "^8.0.10",
-    "@storybook/html": "^8.0.10",
-    "@storybook/html-webpack5": "^8.0.10",
-    "@storybook/test": "^8.0.10",
-    "@storybook/test-runner": "^0.17.0",
+    "@storybook/addon-a11y": "^8.1.8",
+    "@storybook/addon-docs": "^8.1.8",
+    "@storybook/addon-essentials": "^8.1.8",
+    "@storybook/addon-interactions": "^8.1.8",
+    "@storybook/addon-links": "^8.1.8",
+    "@storybook/addon-mdx-gfm": "^8.1.8",
+    "@storybook/html": "^8.1.8",
+    "@storybook/html-webpack5": "^8.1.8",
+    "@storybook/test": "^8.1.8",
+    "@storybook/test-runner": "^0.18.2",
     "axe-playwright": "^2.0.1",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.0.1",
@@ -76,7 +76,7 @@
     "sass": "^1.77.0",
     "sass-loader": "^14.2.1",
     "simple-nunjucks-loader": "^3.2.0",
-    "storybook": "^8.0.10",
+    "storybook": "^8.1.8",
     "style-loader": "^4.0.0",
     "stylelint": "^16.5.0",
     "stylelint-config-standard-scss": "^13.0.0",