@nationalarchives/frontend 0.1.25-prerelease → 0.1.27-prerelease

package/nationalarchives/tools/_colour.scss

@@ -32,7 +32,6 @@
 
 @mixin accent-css-vars($colour) {
   @if $colour == "yellow" {
-    --accent: #{brand-colour("yellow")} !important;
     --accent-background: #{brand-colour("yellow")} !important;
     --accent-background-light: #{brand-colour("cream")} !important;
     --accent-font-base: #{brand-colour("black")} !important;
@@ -53,29 +52,23 @@
     --accent-link-visited: #{brand-colour("white")} !important;
     --accent-keyline: #{brand-colour("white", 0.5)} !important;
     --accent-keyline-dark: #{brand-colour("white", 0.8)} !important;
-    @if $colour != "black" {
-      --button-accent-text: #{brand-colour("white")} !important;
-      @if $colour == "pink" {
-        --accent: #{brand-colour("pink")} !important;
-        --accent-background: #{brand-colour("maroon")} !important;
-        --accent-background-light: #{brand-colour("pastel-pink")} !important;
-        --button-accent-background: #{brand-colour("maroon")} !important;
-      } @else if $colour == "orange" {
-        --accent: #{brand-colour("orange")} !important;
-        --accent-background: #{brand-colour("chestnut")} !important;
-        --accent-background-light: #{brand-colour("pastel-orange")} !important;
-        --button-accent-background: #{brand-colour("chestnut")} !important;
-      } @else if $colour == "green" {
-        --accent: #{brand-colour("green")} !important;
-        --accent-background: #{brand-colour("forest")} !important;
-        --accent-background-light: #{brand-colour("pastel-green")} !important;
-        --button-accent-background: #{brand-colour("forest")} !important;
-      } @else if $colour == "blue" {
-        --accent: #{brand-colour("blue")} !important;
-        --accent-background: #{brand-colour("navy")} !important;
-        --accent-background-light: #{brand-colour("pastel-blue")} !important;
-        --button-accent-background: #{brand-colour("navy")} !important;
-      }
+    --button-accent-text: #{brand-colour("white")} !important;
+    @if $colour == "pink" {
+      --accent-background: #{brand-colour("maroon")} !important;
+      --accent-background-light: #{brand-colour("pastel-pink")} !important;
+      --button-accent-background: #{brand-colour("maroon")} !important;
+    } @else if $colour == "orange" {
+      --accent-background: #{brand-colour("chestnut")} !important;
+      --accent-background-light: #{brand-colour("pastel-orange")} !important;
+      --button-accent-background: #{brand-colour("chestnut")} !important;
+    } @else if $colour == "green" {
+      --accent-background: #{brand-colour("forest")} !important;
+      --accent-background-light: #{brand-colour("pastel-green")} !important;
+      --button-accent-background: #{brand-colour("forest")} !important;
+    } @else if $colour == "blue" {
+      --accent-background: #{brand-colour("navy")} !important;
+      --accent-background-light: #{brand-colour("pastel-blue")} !important;
+      --button-accent-background: #{brand-colour("navy")} !important;
     }
   }
 }
@@ -254,7 +247,7 @@
   --font-light: var(--accent-font-light);
   --icon-light: var(--accent-icon-light);
   --link: var(--accent-link);
-  --link-visited: var(--accent-link-visited);
+  --link-visited: var(--accent-link);
   --keyline: var(--accent-keyline);
   --keyline-dark: var(--accent-keyline-dark);
 
@@ -289,8 +282,8 @@
   --font-base: #{map.get(colour.$colour-palette-default, "font-base")};
   --font-dark: #{map.get(colour.$colour-palette-default, "font-dark")};
   --font-light: #{map.get(colour.$colour-palette-default, "font-light")};
-  --link: #{map.get(colour.$colour-palette-default, "font-dark")};
-  --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")};
   --keyline: #{map.get(colour.$colour-palette-default, "keyline")};
   --keyline-dark: #{map.get(colour.$colour-palette-default, "keyline-dark")};
   --button-text: #{map.get(colour.$colour-palette-default, "button-text")};
@@ -309,6 +302,18 @@
 
   @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")};
+    }
+  }
+
+  .tna-template--dark-theme & {
+    --link: #{map.get(colour.$colour-palette-default, "link")};
+    --link-visited: #{map.get(colour.$colour-palette-default, "link-visited")};
+  }
 }
 
 @mixin accent-light {
@@ -326,3 +331,19 @@
     }
   }
 }
+
+@mixin on-forced-colours {
+  @media (forced-colors: active) {
+    @content;
+  }
+}
+
+@mixin on-high-contrast-and-forced-colours {
+  @include on-forced-colours {
+    @content;
+  }
+
+  @include on-high-contrast {
+    @content;
+  }
+}

package/nationalarchives/tools/_typography.scss

@@ -47,5 +47,4 @@
   @include relative-font-size(14);
   text-transform: uppercase;
   line-height: #{math.div(typography.$relative-1rem-px, 14)};
-  // line-height: 1;
 }

package/nationalarchives/utilities/_a11y.scss

@@ -26,11 +26,15 @@
   }
 }
 
+@mixin focus-outline {
+  @include colour.colour-outline("focus-outline", 0.3125rem, solid);
+  outline-offset: 0.125rem;
+}
+
 *:focus {
   z-index: 9;
 
-  @include colour.colour-outline("focus-outline", 0.3125rem, solid);
-  outline-offset: 0.125rem;
+  @include focus-outline;
 }
 
 .tna-\!--no-focus-style {

package/nationalarchives/utilities/_colour.scss

@@ -7,8 +7,6 @@
 .tna-template {
   @include colour.colour-background("page-background");
 
-  accent-color: var(--accent);
-
   &--system-theme {
     @include colour.colour-css-vars;
 
@@ -49,10 +47,6 @@
     }
   }
 
-  &--black-accent {
-    @include colour.accent-css-vars("black");
-  }
-
   &--yellow-accent {
     @include colour.accent-css-vars("yellow");
   }
@@ -98,3 +92,13 @@
     @include colour.accent-light;
   }
 }
+
+.tna-border {
+  &-keyline {
+    @include colour.colour-border("keyline", 1px);
+  }
+
+  &-keyline-dark {
+    @include colour.colour-border("keyline-dark", 1px);
+  }
+}

package/nationalarchives/utilities/_debug.scss

@@ -18,9 +18,7 @@
       0 0 0 2px #f0a,
       0 0 0.5rem #f0a !important;
 
-    position: relative;
-
-    &::before {
+    &::after {
       width: 20px;
       height: 20px;
 
@@ -45,7 +43,8 @@
       content: "";
     }
 
-    .tna-template--dark-theme & {
+    &:not(.tna-checkboxes__item-label, .tna-radios__item-label) {
+      position: relative;
     }
   }
 }

package/nationalarchives/utilities/_forms.scss

@@ -0,0 +1,93 @@
+@use "../utilities/typography" as typographyUtilities;
+@use "../tools/colour";
+@use "../tools/media";
+@use "../tools/spacing";
+@use "../tools/typography";
+
+.tna-form {
+  &__group {
+    @include spacing.space-above;
+
+    &--error {
+      padding-left: 1rem;
+
+      @include colour.colour-border("form-error", 0.25rem, solid, left);
+    }
+  }
+
+  &__fieldset {
+    flex: 1;
+
+    border: none;
+  }
+
+  &__group,
+  &__fieldset {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+
+  &__group--inline,
+  &__group--inline &__fieldset {
+    flex-direction: row;
+    align-items: flex-start;
+
+    @include media.on-mobile {
+      flex-direction: column;
+    }
+  }
+
+  &__group-contents {
+    flex: 0 0 39%;
+  }
+
+  &__legend {
+  }
+
+  &__heading {
+    margin: 0;
+
+    @extend %heading;
+
+    &--xl {
+      @extend %heading-xl;
+    }
+
+    &--l {
+      @extend %heading-l;
+    }
+
+    &--m {
+      @extend %heading-m;
+    }
+
+    &--s {
+      @extend %heading-s;
+    }
+
+    &--xs {
+      font-size: 1em;
+      @include typography.main-font;
+      // @include typography.main-font-weight-bold;
+    }
+  }
+
+  &__label {
+  }
+
+  &__hint {
+    margin-top: 0;
+
+    @include typography.relative-font-size(16);
+    @include colour.colour-font("font-light");
+  }
+
+  &__error-message {
+    margin-top: 0;
+
+    @include colour.colour-font("form-error");
+    @include typography.main-font-weight-bold;
+  }
+}

package/nationalarchives/utilities/_index.scss

@@ -2,6 +2,7 @@
 @use "colour";
 @use "columns";
 @use "debug";
+@use "forms";
 @use "global";
 @use "lists";
 @use "overrides";

package/nationalarchives/utilities/_lists.scss

@@ -164,7 +164,7 @@
     }
   }
 
-  @include colour.on-high-contrast {
+  @include colour.on-high-contrast-and-forced-colours {
     @include colour.colour-border("keyline-dark", 1px, solid, bottom);
 
     dt,

package/nationalarchives/utilities/_overrides.scss

@@ -4,7 +4,7 @@
 
 @mixin hide-on($suffix) {
   .tna-\!--hide-on-#{$suffix} {
-    display: none;
+    display: none !important;
   }
 }
 

package/nationalarchives/utilities/_typography.scss

@@ -113,7 +113,7 @@ a {
     }
 
     &:hover:not(:focus) {
-      box-shadow: 0 0 0 0.3125rem var(--link);
+      box-shadow: 0 0 0 0.3125rem var(--focus-outline);
     }
   }
 
@@ -130,62 +130,6 @@ small {
   );
 }
 
-// .tna-detail[title][data-type] {
-//   padding: 0 0.375rem;
-
-//   display: inline-flex;
-//   flex-flow: row nowrap;
-//   align-items: baseline;
-//   gap: 0.5rem;
-
-//   vertical-align: baseline;
-
-//   background-color: #ccc;
-
-//   &::after {
-//     @include colour.colour-font("font-base");
-//     @include typography.detail-font-small;
-//     vertical-align: baseline;
-
-//     content: attr(data-type) / "";
-//   }
-
-//   &[data-type="misc"] {
-//     background-color: #f28482;
-//   }
-
-//   &[data-type="loc"] {
-//     background-color: #edae49;
-//   }
-
-//   &[data-type="per"] {
-//     background-color: #b5e2fa;
-//   }
-
-//   @at-root #{selector.unify("a", &)} {
-//     @include colour.colour-font("font-base");
-
-//     &::after {
-//       text-decoration: none;
-//     }
-//   }
-// }
-
-.tna-chip-list {
-  @include spacing.space-above;
-  margin-bottom: 0;
-  padding-left: 0;
-
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-
-  list-style: none;
-
-  &__item {
-  }
-}
-
 %chip {
   max-width: max-content;
   padding: 0.125em 0.25rem;
@@ -199,6 +143,12 @@ small {
   @include colour.accent;
 
   @include colour.colour-border("accent-background", 0.125rem);
+
+  .tna-background-accent &:not(#{&}--plain) {
+    @include colour.plain;
+
+    @include colour.colour-border("background");
+  }
 }
 
 .tna-chip {
@@ -237,6 +187,65 @@ small {
   }
 }
 
+.tna-chip-list {
+  @include spacing.space-above;
+
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 1.5rem;
+
+  list-style: none;
+
+  &__item {
+    display: flex;
+    align-items: center;
+
+    .tna-chip {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .fa-solid,
+    .fa-brand {
+      @include colour.colour-font("icon-light");
+    }
+
+    @include colour.on-high-contrast {
+      @include colour.colour-border("keyline-dark", 1px, solid);
+
+      .fa-solid,
+      .fa-brand {
+        padding: 0.375rem 0.25rem;
+
+        @include colour.colour-font("contrast-font-base");
+
+        @include colour.colour-background("contrast-background");
+
+        @include colour.colour-border("keyline-dark", 1px, solid, right);
+      }
+
+      .tna-chip {
+        &:has(.fa-solid, .fa-brand) {
+          padding-left: 0;
+
+          .fa-solid,
+          .fa-brand {
+            margin-right: 0.5rem;
+          }
+        }
+      }
+    }
+  }
+
+  &--accent {
+    .fa-solid,
+    .fa-brand {
+      @include colour.colour-font("accent-background");
+    }
+  }
+}
+
 %heading {
   @include colour.colour-font("font-dark");
 

package/nationalarchives/variables/_colour.scss

@@ -39,7 +39,7 @@ $colour-palette-brand: (
 
 $dark-grey: #26262a;
 $base-font: #343338 !default;
-$link-colour: brand-colour("navy") !default;
+$link-colour: #0062a8 !default;
 $link-colour-visited: #4c2c92 !default;
 
 /*
@@ -49,7 +49,7 @@ LIGHT THEME (DEFAULT)
 */
 $colour-palette-default: (
   "page-background": #f4f4f4,
-  "background-tint": #e2e2e2,
+  "background-tint": #ededed,
   "font-base": $base-font,
   "font-dark": brand-colour("black"),
   "font-light": hex-to-rgb($base-font, 0.7),
@@ -59,6 +59,10 @@ $colour-palette-default: (
   "focus-outline": brand-colour("blue"),
   "keyline": hex-to-rgb($dark-grey, 0.25),
   "keyline-dark": $dark-grey,
+  "input-foreground": brand-colour("black"),
+  "input-background": brand-colour("white"),
+  "input-border": brand-colour("black"),
+  "form-error": #c00,
   "button-text": brand-colour("white"),
   "button-background": brand-colour("black"),
   "button-hover-text": brand-colour("black"),
@@ -66,7 +70,6 @@ $colour-palette-default: (
   "contrast-background": #1e1e1e,
   "contrast-font-base": brand-colour("white"),
   "contrast-font-dark": brand-colour("white"),
-  // "contrast-font-light": brand-colour("white", 0.7),
   "contrast-font-light": brand-colour("white", 0.7),
   "contrast-icon-light": brand-colour("white", 0.45),
   "contrast-link": brand-colour("white"),
@@ -77,9 +80,8 @@ $colour-palette-default: (
   "contrast-button-background": brand-colour("white"),
   "contrast-button-hover-text": brand-colour("white"),
   "contrast-button-hover-background": brand-colour("black"),
-  "accent": map.get($colour-palette-brand, "light-grey"),
   "accent-background": #111,
-  "accent-background-light": map.get($colour-palette-brand, "light-grey"),
+  "accent-background-light": #ededed,
   "accent-font-base": brand-colour("white"),
   "accent-font-dark": brand-colour("white"),
   "accent-font-light": brand-colour("white", 0.7),
@@ -111,6 +113,9 @@ $colour-palette-dark: map.merge(
     "focus-outline": brand-colour("orange"),
     "keyline": brand-colour("white", 0.25),
     "keyline-dark": brand-colour("white"),
+    "input-foreground": brand-colour("white"),
+    "input-background": brand-colour("black"),
+    "input-border": brand-colour("white"),
     "button-text": brand-colour("black"),
     "button-background": brand-colour("white"),
     "button-hover-text": brand-colour("white"),
@@ -118,8 +123,7 @@ $colour-palette-dark: map.merge(
     "contrast-background": #111,
     "contrast-link-visited":
       map.get($colour-palette-default, "contrast-link-visited"),
-    // --accent-background-light is the same as --contrast-background on dark themes
-    "accent-background-light": brand-colour("grey"),
+    // "accent-background-light": brand-colour("light-grey"),
   )
 ) !default;
 
@@ -144,8 +148,8 @@ $colour-palette-high-contrast: map.merge(
     "contrast-font-base": brand-colour("black"),
     "contrast-font-dark": brand-colour("black"),
     "contrast-font-light": brand-colour("black"),
-    "contrast-link": brand-colour("navy"),
-    "contrast-link-visited": brand-colour("black"),
+    "contrast-link": #34d,
+    "contrast-link-visited": #848,
     "contrast-keyline": brand-colour("black"),
     "contrast-keyline-dark": brand-colour("black"),
     "contrast-button-text": brand-colour("white"),
@@ -168,7 +172,7 @@ $colour-palette-high-contrast-dark: map.merge(
     "font-light": brand-colour("white"),
     "icon-light": brand-colour("white", 0.75),
     "link": #69f,
-    "link-visited": #a6c,
+    "link-visited": #b9f,
     "keyline": brand-colour("white"),
     "contrast-background": brand-colour("black"),
   )

package/nationalarchives/variables/_forms.scss

@@ -0,0 +1,2 @@
+$form-field-border-width: 1px !default;
+$checkbox-checkmark-width: 0.1875rem !default;

package/nationalarchives/variables/_index.scss

@@ -1,6 +1,7 @@
 @use "assets";
 @use "colour";
 @use "features";
+@use "forms";
 @use "grid";
 @use "media";
 @use "spacing";

package/nationalarchives/variables/_typography.scss

@@ -2,11 +2,11 @@
 
 $use-local-fonts: false !default;
 
-$relative-1rem-px: 16;
+$relative-1rem-px: 16; // 16px is always 1rem
 
 $body-font-size-px: 18 !default;
 $body-font-size-px-mobile: 17 !default;
-$body-line-height: #{math.div(16, 18) * 2} !default; // 1.77777
+$body-line-height: #{math.div($relative-1rem-px, $body-font-size-px) * 2} !default; // 1.77777
 
 $interactive-text-decoration-thickness: 3.5px !default;
 

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.25-prerelease",
+  "version": "0.1.27-prerelease",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",
     "build": "storybook build -o storybook --webpack-stats-json",
-    "test": "node tasks/test-fixtures.js && test-storybook --verbose && jest",
+    "test": "node tasks/test-fixtures.js && jest && test-storybook",
     "lint": "prettier --check '{src,.storybook,tasks,.}/**/*.{js,mjs,scss,json,html}' && stylelint 'src/**/*.scss' && eslint 'src/**/*.{js,mjs}'",
     "lint:fix": "prettier --write '{src,.storybook,tasks,.}/**/*.{js,mjs,scss,json,html}' && stylelint --fix 'src/**/*.scss' && eslint --fix 'src/**/*.{js,mjs}'",
     "package:sass": "sass --style=compressed --embed-sources src/nationalarchives:package/nationalarchives",
@@ -41,23 +41,23 @@
   "devDependencies": {
     "@babel/core": "^7.23.2",
     "@babel/preset-env": "^7.23.2",
-    "@chromaui/addon-visual-tests": "^0.0.109",
-    "@mdx-js/react": "^2.1.3",
-    "@storybook/addon-a11y": "^7.5.1",
-    "@storybook/addon-docs": "^7.5.1",
-    "@storybook/addon-essentials": "^7.5.1",
-    "@storybook/addon-interactions": "^7.5.1",
-    "@storybook/addon-links": "^7.5.1",
-    "@storybook/addon-mdx-gfm": "^7.5.1",
-    "@storybook/html": "^7.5.1",
-    "@storybook/html-webpack5": "^7.5.1",
+    "@chromaui/addon-visual-tests": "^0.0.119",
+    "@mdx-js/react": "^3.0.0",
+    "@storybook/addon-a11y": "^7.5.3",
+    "@storybook/addon-docs": "^7.5.3",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/addon-mdx-gfm": "^7.5.3",
+    "@storybook/html": "^7.5.3",
+    "@storybook/html-webpack5": "^7.5.3",
     "@storybook/jest": "^0.2.3",
-    "@storybook/test-runner": "^0.13.0",
+    "@storybook/test-runner": "^0.15.2",
     "@storybook/testing-library": "^0.2.2",
     "axe-playwright": "^1.2.3",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.0.1",
-    "chromatic": "^7.5.0",
+    "chromatic": "^9.1.0",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.1",
     "diff": "^5.1.0",
@@ -74,7 +74,7 @@
     "sass": "^1.69.4",
     "sass-loader": "^13.0.2",
     "simple-nunjucks-loader": "^3.2.0",
-    "storybook": "^7.5.1",
+    "storybook": "^7.5.3",
     "style-loader": "^3.3.1",
     "stylelint": "^15.11.0",
     "stylelint-config-standard-scss": "^11.0.0",