@nationalarchives/frontend 0.1.49 → 0.1.50

package/nationalarchives/utilities/_colour.scss

@@ -1,9 +1,5 @@
 @use "../tools/colour";
 
-// :root {
-//   @include colour.colour-css-vars;
-// }
-
 .tna-template {
   @include colour.colour-background("page-background");
 
@@ -52,23 +48,56 @@
   }
 
   &--yellow-accent {
-    @include colour.accent-css-vars("yellow");
+    --accent-background: #{colour.brand-colour("yellow")} !important;
+    --accent-background-light: #{colour.brand-colour("cream")} !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;
+    // --accent-icon-light: #{colour.brand-colour("black", 0.45)} !important;
+    // --accent-link: #{colour.brand-colour("black")} !important;
+    // --accent-link-visited: #{colour.brand-colour("black")} !important;
+    // --accent-keyline: #{colour.brand-colour("black", 0.5)} !important;
+    // --accent-keyline-dark: #{colour.brand-colour("black", 0.8)} !important;
+    --button-accent-background: #{colour.brand-colour("yellow")} !important;
+  }
+
+  &--pink-accent,
+  &--orange-accent,
+  &--green-accent,
+  &--blue-accent {
+    --accent-font-base: #{colour.brand-colour("white")} !important;
+    --accent-font-dark: #{colour.brand-colour("white")} !important;
+    --accent-font-light: #{colour.brand-colour("white", 0.7)} !important;
+    --accent-icon-light: #{colour.brand-colour("white", 0.45)} !important;
+    --accent-link: #{colour.brand-colour("white")} !important;
+    --accent-link-visited: #{colour.brand-colour("white")} !important;
+    --accent-keyline: #{colour.brand-colour("white", 0.5)} !important;
+    --accent-keyline-dark: #{colour.brand-colour("white", 0.8)} !important;
+    --button-accent-text: #{colour.brand-colour("white")} !important;
   }
 
   &--pink-accent {
-    @include colour.accent-css-vars("pink");
+    --accent-background: #{colour.brand-colour("maroon")} !important;
+    --accent-background-light: #{colour.brand-colour("pastel-pink")} !important;
+    --button-accent-background: #{colour.brand-colour("maroon")} !important;
   }
 
   &--orange-accent {
-    @include colour.accent-css-vars("orange");
+    --accent-background: #{colour.brand-colour("chestnut")} !important;
+    --accent-background-light: #{colour.brand-colour("pastel-orange")} !important;
+    --button-accent-background: #{colour.brand-colour("chestnut")} !important;
   }
 
   &--green-accent {
-    @include colour.accent-css-vars("green");
+    --accent-background: #{colour.brand-colour("forest")} !important;
+    --accent-background-light: #{colour.brand-colour("pastel-green")} !important;
+    --button-accent-background: #{colour.brand-colour("forest")} !important;
   }
 
   &--blue-accent {
-    @include colour.accent-css-vars("blue");
+    --accent-background: #{colour.brand-colour("navy")} !important;
+    --accent-background-light: #{colour.brand-colour("pastel-blue")} !important;
+    --button-accent-background: #{colour.brand-colour("navy")} !important;
   }
 }
 

package/nationalarchives/utilities/_typography.scss

@@ -368,15 +368,23 @@ small {
   @include colour.thick-keyline-accent(left);
 
   &__quote {
-    font-weight: 700;
+    @include typography.main-font-weight-medium;
+    quotes: auto;
+    quotes: "‘" "’";
+
+    :first-child::before {
+      content: open-quote;
+    }
+
+    :last-child::after {
+      content: close-quote;
+    }
   }
 
   &__citation {
-    @include typography.relative-font-size(16);
+    margin-top: spacing.space(1);
 
-    .tna-blockquote & {
-      margin: spacing.space(1) 0 0;
-    }
+    @include typography.relative-font-size(16);
 
     &::before {
       content: "\2014" " ";

package/nationalarchives/variables/_colour.scss

@@ -39,7 +39,7 @@ $colour-palette-brand: (
 
 $dark-grey: #26262a !default;
 $base-font: #343338 !default;
-$link-colour: #0062a8 !default;
+$link-colour: #005fa3 !default;
 $link-colour-visited: #4c2c92 !default;
 
 /*
@@ -49,7 +49,7 @@ LIGHT THEME (DEFAULT)
 */
 $colour-palette-default: (
   "page-background": #f4f4f4,
-  "background-tint": #e4e4e4,
+  "background-tint": brand-colour("light-grey"),
   "font-base": $base-font,
   "font-dark": brand-colour("black"),
   "font-light": brand-colour("black", 0.58),
@@ -80,16 +80,16 @@ $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": #101112,
+  "accent-background": brand-colour("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),
-  "accent-icon-light": brand-colour("white", 0.45),
-  "accent-link": brand-colour("white"),
-  "accent-link-visited": #b9f,
-  "accent-keyline": brand-colour("white", 0.5),
-  "accent-keyline-dark": brand-colour("white", 0.8),
+  "accent-font-base": brand-colour("black"),
+  "accent-font-dark": brand-colour("black"),
+  "accent-font-light": brand-colour("black", 0.7),
+  "accent-icon-light": brand-colour("black", 0.45),
+  "accent-link": brand-colour("black"),
+  "accent-link-visited": brand-colour("black"),
+  "accent-keyline": brand-colour("black", 0.5),
+  "accent-keyline-dark": brand-colour("black", 0.8),
   "button-accent-text": brand-colour("black"),
   "button-accent-background": brand-colour("grey"),
 ) !default;

package/nationalarchives/variables/_typography.scss

@@ -11,6 +11,7 @@ $interactive-text-decoration-thickness: 3.5px !default;
 $main-font: "Open Sans" !default;
 $main-font-family: $main-font, sans-serif !default;
 $main-font-weight: 400 !default;
+$main-font-weight-medium: 600 !default;
 $main-font-weight-bold: 700 !default;
 
 $heading-font-family: supria-sans-condensed, "Arial Narrow", sans-serif !default;

package/package.json

@@ -1,19 +1,22 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.49",
+  "version": "0.1.50",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",
-    "build": "storybook build -o storybook --webpack-stats-json",
-    "test": "npm run test:fixtures && npm run test:unit && npm run test:storybook",
+    "build:storybook": "storybook build -o storybook --webpack-stats-json",
+    "build:package": "./tasks/build-package.sh",
+    "compile:sass": "sass --style=compressed --embed-sources src/nationalarchives:package/nationalarchives",
+    "compile:scripts": "webpack",
+    "lint:fix": "prettier --write '{src,.storybook,tasks,.}/**/*.{js,mjs,scss,json,html}' && stylelint --fix 'src/**/*.scss' && eslint --fix 'src/**/*.{js,mjs}'",
+    "test:all": "npm run test:lint && npm run test:unit && npm run test:html && npm run test:fixtures && npm run test:storybook && npm run build:package && npm run test:package",
     "test:fixtures": "node tasks/test-fixtures.js",
-    "test:unit": "jest --verbose",
+    "test:html": "node tasks/generate-fixture-html.js && html-validate fixtures-html",
+    "test:lint": "prettier --check '{src,.storybook,tasks,.}/**/*.{js,mjs,scss,json,html}' && stylelint 'src/**/*.scss' && eslint 'src/**/*.{js,mjs}'",
+    "test:package": "node tasks/test-package.js",
     "test:storybook": "test-storybook --maxWorkers=1",
-    "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",
-    "package:scripts": "webpack",
-    "validatehtml": "node tasks/generate-fixture-html.js && html-validate fixtures-html"
+    "test:unit": "jest --verbose",
+    "update:fixtures": "node tasks/update-fixtures.js"
   },
   "repository": {
     "type": "git",
@@ -43,16 +46,16 @@
     "@babel/core": "^7.23.2",
     "@babel/preset-env": "^7.23.2",
     "@mdx-js/react": "^3.0.0",
-    "@storybook/addon-a11y": "^7.6.15",
-    "@storybook/addon-docs": "^7.6.15",
-    "@storybook/addon-essentials": "^7.6.15",
-    "@storybook/addon-interactions": "^7.6.15",
-    "@storybook/addon-links": "^7.6.15",
-    "@storybook/addon-mdx-gfm": "^7.6.15",
-    "@storybook/html": "^7.6.15",
-    "@storybook/html-webpack5": "^7.6.15",
-    "@storybook/test": "^7.6.15",
-    "@storybook/test-runner": "^0.16.0",
+    "@storybook/addon-a11y": "^8.0.5",
+    "@storybook/addon-docs": "^8.0.5",
+    "@storybook/addon-essentials": "^8.0.5",
+    "@storybook/addon-interactions": "^8.0.5",
+    "@storybook/addon-links": "^8.0.5",
+    "@storybook/addon-mdx-gfm": "^8.0.5",
+    "@storybook/html": "^8.0.5",
+    "@storybook/html-webpack5": "^8.0.5",
+    "@storybook/test": "^8.0.5",
+    "@storybook/test-runner": "^0.17.0",
     "axe-playwright": "^2.0.1",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.0.1",
@@ -61,7 +64,7 @@
     "css-loader": "^6.7.1",
     "diff": "^5.1.0",
     "eslint": "^8.52.0",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.8.0",
     "glob": "^10.3.10",
     "html-validate": "^8.7.3",
     "jest-environment-jsdom": "^29.7.0",
@@ -69,12 +72,10 @@
     "node-self": "^1.0.2",
     "nunjucks": "^3.2.3",
     "prettier": "^3.0.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "sass": "^1.69.4",
     "sass-loader": "^14.1.0",
     "simple-nunjucks-loader": "^3.2.0",
-    "storybook": "^7.6.15",
+    "storybook": "^8.0.5",
     "style-loader": "^3.3.1",
     "stylelint": "^16.0.2",
     "stylelint-config-standard-scss": "^13.0.0",

package/nationalarchives/components/message/_index.scss

@@ -1 +0,0 @@
-@use "message";

package/nationalarchives/components/message/fixtures.json

@@ -1,13 +0,0 @@
-{
-  "component": "message",
-  "fixtures": [
-    {
-      "name": "default",
-      "options": {
-        "headingLevel": 2,
-        "message": "Please note this page references hunger strikes and force feeding, which some people may find upsetting."
-      },
-      "html": "<div class=\"tna-message \"><h2 class=\"tna-message__heading\"><span class=\"tna-message__heading-icon\">I</span>mportant information</h2><div class=\"tna-message__message\">Please note this page references hunger strikes and force feeding, which some people may find upsetting.</div></div>"
-    }
-  ]
-}

package/nationalarchives/components/message/macro.njk

@@ -1,3 +0,0 @@
-{% macro tnaMessage(params) %}
-  {%- include "nationalarchives/components/message/template.njk" -%}
-{% endmacro %}

package/nationalarchives/components/message/message.css

@@ -1 +0,0 @@
-.tna-message{--background: var(--accent-background-light);--font-base: #343338;--font-dark: rgb(1, 1, 1);--font-light: rgb(1 1 1/0.58);--icon-light: rgb(52 51 56/0.45);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--button-text: rgb(255, 255, 255);--button-background: rgb(1, 1, 1);--button-hover-text: rgb(1, 1, 1);--button-hover-background: rgb(255, 255, 255);background-color:var(--background);color:#343338;color:var(--font-base)}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-message{--link: #0062a8;--link-visited: #4c2c92}}.tna-template--dark-theme .tna-message{--link: #0062a8;--link-visited: #4c2c92}.tna-message{margin-top:32px}.tna-message:first-child{margin-top:0}.tna-message{padding:16px;display:flex;gap:16px;align-items:flex-start;background-color:rgb(249, 247, 226);border-left:5px rgb(255, 204, 0) solid}@media(max-width: 30em){.tna-message{flex-direction:column;gap:8px}}.tna-message__heading{font-size:0}.tna-message__heading-icon{width:2rem;height:2rem;display:block;color:#010101;color:var(--font-dark);font-size:1.5rem;font-weight:700;text-transform:lowercase;text-align:center;line-height:2rem;border:.1875rem #010101 solid;border:.1875rem var(--font-dark) solid;border-radius:100%}@media(max-width: 48em){.tna-message__heading-icon{width:1.5rem;height:1.5rem;font-size:1.1875rem;line-height:1.5rem;border:.125rem #010101 solid;border:.125rem var(--font-dark) solid}}.tna-message__message{margin-top:0;flex:1}/*# sourceMappingURL=message.css.map */

package/nationalarchives/components/message/message.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/message/message.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"AAoVA,aACE,6CACA,qBACA,0BACA,8BACA,iCAGA,8BACA,wBACA,kCACA,kCAIA,kCAIA,8CAvQA,mCAPA,cACA,uBAsRE,mCADF,yCAEI,gBACA,yBAIJ,uCACE,gBACA,wBC9WJ,aACE,gBAEA,yBACE,aCTJ,aAEE,aAEA,aACA,SACA,uBFyFA,oCAkFA,uCG5HA,wBDrDF,aAeI,sBACA,SAGF,sBACE,YAGF,2BACE,WACA,YAEA,cFyDF,cACA,uBIpFA,iBAQA,YCDsB,IHwBpB,yBACA,kBACA,iBF6FE,8BAIA,uCE9FF,mBCwCF,wBDtDA,2BAiBI,aACA,cExCJ,oBF2CI,mBFmFA,6BAIA,uCEjFJ,sBACE,aAEA","file":"message.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:list\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n  @each $name, $value in colour.$colour-palette-default {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin accent-css-vars($colour) {\n  @if $colour == \"yellow\" {\n    --accent-background: #{brand-colour(\"yellow\")} !important;\n    --accent-background-light: #{brand-colour(\"cream\")} !important;\n    --accent-font-base: #{brand-colour(\"black\")} !important;\n    --accent-font-dark: #{brand-colour(\"black\")} !important;\n    --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"black\")} !important;\n    --accent-link-visited: #{brand-colour(\"black\")} !important;\n    --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n    --button-accent-background: #{brand-colour(\"yellow\")} !important;\n  } @else {\n    --accent-font-base: #{brand-colour(\"white\")} !important;\n    --accent-font-dark: #{brand-colour(\"white\")} !important;\n    --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"white\")} !important;\n    --accent-link-visited: #{brand-colour(\"white\")} !important;\n    --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n    --button-accent-text: #{brand-colour(\"white\")} !important;\n    @if $colour == \"pink\" {\n      --accent-background: #{brand-colour(\"maroon\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n      --button-accent-background: #{brand-colour(\"maroon\")} !important;\n    } @else if $colour == \"orange\" {\n      --accent-background: #{brand-colour(\"chestnut\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n      --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n    } @else if $colour == \"green\" {\n      --accent-background: #{brand-colour(\"forest\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n      --button-accent-background: #{brand-colour(\"forest\")} !important;\n    } @else if $colour == \"blue\" {\n      --accent-background: #{brand-colour(\"navy\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n      --button-accent-background: #{brand-colour(\"navy\")} !important;\n    }\n  }\n}\n\n@mixin colour-font(\n  $colour,\n  $important: false,\n  $default-palette: colour.$colour-palette-default\n) {\n  color: map.get($default-palette, $colour) if($important, !important, null);\n  color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n  background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      $property: border-#{$direction};\n      border-#{$direction}: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border-#{$direction}: $width\n        var(--#{$colour})\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: map.get(\n          colour.$colour-palette-default,\n          $colour\n        )\n        if($important, !important, null);\n      border-#{$direction}-color: var(--#{$colour})\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border: $width var(--#{$colour}) $style if($important, !important, null);\n    } @else {\n      border-color: map.get(colour.$colour-palette-default, $colour)\n        if($important, !important, null);\n      border-color: var(--#{$colour}) if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width\n      map.get(colour.$colour-palette-default, $colour)\n      $style\n      if($important, !important, null);\n    outline: $width var(--#{$colour}) $style if($important, !important, null);\n  } @else {\n    outline-color: map.get(colour.$colour-palette-default, $colour)\n      if($important, !important, null);\n    outline-color: var(--#{$colour}) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  fill: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction) {\n  @include colour-border(\"keyline\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-dark($direction) {\n  @include colour-border(\"keyline-dark\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-accent($direction) {\n  @include colour-border(\"accent-background\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-error($direction) {\n  @include colour-border(\"form-error\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n  border-#{$direction}: 5px #{brand-colour($brandColour)} solid;\n}\n\n%light {\n  @include colour-css-vars(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n}\n\n@mixin light {\n  @extend %light;\n}\n\n%dark {\n  @include colour-css-vars-dark(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n}\n\n@mixin dark {\n  @extend %dark;\n}\n\n%plain {\n  .tna-template--system-theme & {\n    @extend %light;\n\n    @media (prefers-color-scheme: dark) {\n      @include colour-css-vars-dark;\n    }\n\n    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n      @include colour-css-vars-high-contrast-dark;\n    }\n  }\n\n  .tna-template--light-theme & {\n    @include colour-css-vars;\n  }\n\n  .tna-template--dark-theme & {\n    @include colour-css-vars-dark;\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast;\n  }\n\n  .tna-template--high-contrast-theme.tna-template--dark-theme & {\n    @include colour-css-vars-high-contrast-dark;\n  }\n\n  --background: var(--page-background);\n}\n\n@mixin plain {\n  @extend %plain;\n}\n\n%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%accent {\n  --background: var(--accent-background);\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --icon-light: var(--accent-icon-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n  @extend %accent;\n}\n\n%tint {\n  @include colour-background(\"background-tint\");\n  @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\n}\n\n%accent-background {\n  @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n  @extend %accent-background;\n}\n\n%accent-light {\n  --background: var(--accent-background-light);\n  --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n  --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n  --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n  --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n  // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n  // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n  --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n  --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n  --button-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-background\"\n    )};\n  --button-hover-text: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-text\"\n    )};\n  --button-hover-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-background\"\n    )};\n\n  @include colour-background(\"background\");\n  @include colour-font(\"font-base\");\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      --link: #{map.get(colour.$colour-palette-default, \"link\")};\n      --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n    }\n  }\n\n  .tna-template--dark-theme & {\n    --link: #{map.get(colour.$colour-palette-default, \"link\")};\n    --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n  .tna-template--high-contrast-theme & {\n    @content;\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-contrast: more) {\n      @content;\n    }\n  }\n}\n\n@mixin on-forced-colours {\n  @media (forced-colors: active) {\n    @content;\n  }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n  @include on-forced-colours {\n    @content;\n  }\n\n  @include on-high-contrast {\n    @content;\n  }\n}\n","@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n@function space($size) {\n  @return #{$size * spacing.$spacing-unit-px}px;\n}\n\n%space-above {\n  margin-top: space(2);\n\n  &:first-child {\n    margin-top: 0;\n  }\n}\n\n%space-only-above {\n  margin: #{space(2)} 0 0;\n\n  &:first-child {\n    margin-top: 0;\n  }\n}\n\n@mixin space-above($zero-other-margins: false) {\n  @if $zero-other-margins {\n    @extend %space-only-above;\n  } @else {\n    @extend %space-above;\n  }\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n  @if $suffix != \"\" {\n    $suffix: \"-\" + $suffix;\n  }\n  @each $property in margin, padding {\n    @each $direction in top, bottom {\n      $combined-direction: \"\";\n      @if $direction == top or $direction == bottom {\n        $combined-direction: vertical;\n      } @else if $direction == right or $direction == left {\n        $combined-direction: horizontal;\n      }\n      @if $combined-direction {\n        .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n        .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n          #{$property}-#{$direction}: 0 !important;\n        }\n      } @else {\n        .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n          #{$property}-#{$direction}: 0 !important;\n        }\n      }\n    }\n  }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n  @each $property in margin, padding {\n    @each $direction in top, bottom {\n      @each $size, $amount in spacing.$spacing {\n        @if $direction == all {\n          .tna-\\!--#{$property}-#{$size} {\n            #{$property}: #{space($amount)} !important;\n          }\n        } @else {\n          $combined-direction: \"\";\n          @if $direction == top or $direction == bottom {\n            $combined-direction: vertical;\n          } @else if $direction == right or $direction == left {\n            $combined-direction: horizontal;\n          }\n          @if $combined-direction {\n            .tna-\\!--#{$property}-#{$direction}-#{$size},\n            .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n              #{$property}-#{$direction}: #{space($amount)} !important;\n            }\n          } @else {\n            .tna-\\!--#{$property}-#{$direction}-#{$size} {\n              #{$property}-#{$direction}: #{space($amount)} !important;\n            }\n          }\n        }\n      }\n    }\n  }\n\n  @include media.on-mobile {\n    @each $property in margin, padding {\n      @each $direction in top, bottom {\n        @each $size, $amount in spacing.$spacing-mobile {\n          @if $direction == all {\n            .tna-\\!--#{$property}-#{$size} {\n              #{$property}: #{space($amount)} !important;\n            }\n          } @else {\n            $combined-direction: \"\";\n            @if $direction == top or $direction == bottom {\n              $combined-direction: vertical;\n            } @else if $direction == right or $direction == left {\n              $combined-direction: horizontal;\n            }\n            @if $combined-direction {\n              .tna-\\!--#{$property}-#{$direction}-#{$size},\n              .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n                #{$property}-#{$direction}: #{space($amount)} !important;\n              }\n            } @else {\n              .tna-\\!--#{$property}-#{$direction}-#{$size} {\n                #{$property}-#{$direction}: #{space($amount)} !important;\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n","@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-message {\n  @include spacing.space-above;\n  padding: spacing.space(1);\n\n  display: flex;\n  gap: spacing.space(1);\n  align-items: flex-start;\n\n  @include colour.accent-light;\n\n  @include colour.colour-background-brand(\"cream\");\n\n  @include colour.thick-keyline-brand(left, \"yellow\");\n\n  @include media.on-tiny {\n    flex-direction: column;\n    gap: spacing.space(0.5);\n  }\n\n  &__heading {\n    font-size: 0;\n  }\n\n  &__heading-icon {\n    width: 2rem;\n    height: 2rem;\n\n    display: block;\n\n    @include colour.colour-font(\"font-dark\");\n    @include typography.relative-font-size(24);\n    @include typography.main-font-weight-bold;\n    text-transform: lowercase;\n    text-align: center;\n    line-height: 2rem;\n\n    @include colour.colour-border(\"font-dark\", 0.1875rem);\n    border-radius: 100%;\n\n    @include media.on-mobile {\n      width: 1.5rem;\n      height: 1.5rem;\n\n      @include typography.relative-font-size(19);\n      line-height: 1.5rem;\n\n      @include colour.colour-border(\"font-dark\", 0.125rem);\n    }\n  }\n\n  &__message {\n    margin-top: 0;\n\n    flex: 1;\n  }\n}\n","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n    media.$largest-medium-device-px + 1,\n    typography.$relative-1rem-px\n  )}em;\n$largest-medium-device-em: #{math.div(\n    media.$largest-medium-device-px,\n    typography.$relative-1rem-px\n  )}em;\n$smallest-medium-device-em: #{math.div(\n    media.$largest-small-device-px + 1,\n    typography.$relative-1rem-px\n  )}em;\n$largest-small-device-em: #{math.div(\n    media.$largest-small-device-px,\n    typography.$relative-1rem-px\n  )}em;\n$smallest-small-device-em: #{math.div(\n    media.$largest-tiny-device-px + 1,\n    typography.$relative-1rem-px\n  )}em;\n$largest-tiny-device-em: #{math.div(\n    media.$largest-tiny-device-px,\n    typography.$relative-1rem-px\n  )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n  @media #{$media-large} {\n    @content;\n  }\n}\n\n@mixin on-medium() {\n  @media #{$media-medium} {\n    @content;\n  }\n}\n\n@mixin on-small() {\n  @media #{$media-small} {\n    @content;\n  }\n}\n\n@mixin on-tiny() {\n  @media #{$media-tiny} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-mobile() {\n  @media #{$media-gt-mobile} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-tiny() {\n  @media #{$media-gt-tiny} {\n    @content;\n  }\n}\n\n@mixin on-smaller-than-large() {\n  @media #{$media-lt-large} {\n    @content;\n  }\n}\n\n@mixin on-mobile() {\n  @media #{$media-mobile} {\n    @content;\n  }\n}\n\n@mixin on-print() {\n  @media print {\n    @content;\n  }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin relative-font-size($font-size-px) {\n  font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin main-font-weight {\n  font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-bold {\n  font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n  font-family: typography.$main-font-family;\n  @if $bold {\n    @include main-font-weight-bold;\n  } @else {\n    @include main-font-weight;\n  }\n  font-optical-sizing: auto;\n  font-style: normal;\n  font-variation-settings: \"wdth\" 100;\n}\n\n@mixin heading-font {\n  font-family: typography.$heading-font-family;\n  font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n  font-family: typography.$detail-font-family;\n  @if $bold {\n    font-weight: typography.$detail-font-weight-bold;\n  } @else {\n    font-weight: typography.$detail-font-weight;\n  }\n  font-optical-sizing: auto;\n  font-style: normal;\n}\n\n@mixin detail-font-small {\n  @include detail-font;\n  @include relative-font-size(14);\n  text-transform: uppercase;\n  line-height: 1.1;\n}\n\n@mixin interacted-text-decoration {\n  text-decoration: underline;\n  text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin heading-generator(\n  $font-size-default,\n  $font-size-medium,\n  $font-size-small,\n  $font-size-tiny,\n  $line-height\n) {\n  @include relative-font-size($font-size-default);\n  line-height: $line-height;\n\n  $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n  $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n    $small-and-tiny-identical;\n  $all-identical: $font-size-default == $font-size-medium and\n    $medium-small-and-tiny-identical and $small-and-tiny-identical;\n\n  @if $all-identical != true {\n    @if $medium-small-and-tiny-identical != true {\n      @include media.on-medium {\n        @include relative-font-size($font-size-medium);\n      }\n\n      @if $small-and-tiny-identical != true {\n        @include media.on-small {\n          @include relative-font-size($font-size-small);\n        }\n\n        @include media.on-tiny {\n          @include relative-font-size($font-size-tiny);\n        }\n      } @else {\n        @include media.on-mobile {\n          @include relative-font-size($font-size-small);\n        }\n      }\n    } @else {\n      @include media.on-smaller-than-large {\n        @include relative-font-size($font-size-medium);\n      }\n    }\n  }\n}\n","$relative-1rem-px: 16; // 16px = 1rem\n\n$use-local-fonts: false !default;\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font: \"Open Sans\" !default;\n$main-font-family: $main-font, sans-serif !default;\n$main-font-weight: 400 !default;\n$main-font-weight-bold: 700 !default;\n\n$heading-font-family: supria-sans-condensed, \"Arial Narrow\", sans-serif !default;\n$heading-font-weight: 500 !default;\n\n$detail-font-family: \"Roboto Mono\", monospace !default;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 30 !default;\n$heading-l-font-size-small: 28 !default;\n$heading-l-font-size-tiny: 25 !default;\n$heading-l-line-height: 1.3 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: 21 !default;\n$heading-m-font-size-small: 20 !default;\n$heading-m-font-size-tiny: 19 !default;\n$heading-m-line-height: 1.6 !default;\n\n$heading-s-font-size-default: 18 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.6 !default;\n"]}

package/nationalarchives/components/message/template.njk

@@ -1,9 +0,0 @@
-{%- set containerClasses = [params.classes] if params.classes else [] -%}
-<div class="tna-message {{ containerClasses | join(' ') }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  <h{{ params.headingLevel }} class="tna-message__heading">
-    <span class="tna-message__heading-icon">I</span>mportant information
-  </h{{ params.headingLevel }}>
-  <div class="tna-message__message">
-    {{ params.message | safe }}
-  </div>
-</div>