@nationalarchives/frontend 0.1.48 → 0.1.50

package/nationalarchives/utilities/_typography.scss

@@ -1,12 +1,11 @@
 @use "sass:math";
 @use "sass:selector";
+@use "../variables/assets";
+@use "../variables/typography" as typographyVars;
 @use "../tools/colour";
 @use "../tools/media";
 @use "../tools/spacing";
 @use "../tools/typography";
-@use "../variables/assets";
-@use "../variables/grid";
-@use "../variables/typography" as typographyVars;
 
 @if typographyVars.$use-local-fonts {
   @font-face {
@@ -14,7 +13,7 @@
     src: url("#{assets.$tna-font-path}/OpenSans-Regular.ttf");
     font-weight: typographyVars.$main-font-weight;
     font-style: normal;
-    // font-display: swap;
+    font-display: swap;
   }
 
   @font-face {
@@ -22,7 +21,7 @@
     src: url("#{assets.$tna-font-path}/OpenSans-Bold.ttf");
     font-weight: typographyVars.$main-font-weight-bold;
     font-style: normal;
-    // font-display: swap;
+    font-display: swap;
   }
 
   @font-face {
@@ -30,7 +29,7 @@
     src: url("#{assets.$tna-font-path}/RobotoMono-Regular.ttf");
     font-weight: typographyVars.$detail-font-weight;
     font-style: normal;
-    // font-display: swap;
+    font-display: swap;
   }
 
   @font-face {
@@ -38,7 +37,7 @@
     src: url("#{assets.$tna-font-path}/RobotoMono-Medium.ttf");
     font-weight: typographyVars.$detail-font-weight-bold;
     font-style: normal;
-    // font-display: swap;
+    font-display: swap;
   }
 } @else {
   @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800&family=Roboto+Mono:wght@100..700&display=swap"); /* stylelint-disable-line */
@@ -47,7 +46,6 @@
 .tna-template {
   @include colour.colour-font("font-base");
   @include typography.main-font;
-  font-size: #{typographyVars.$relative-1rem-px}px;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
@@ -76,7 +74,7 @@ p {
   @include spacing.space-above;
 
   + p {
-    margin-top: 1rem;
+    margin-top: spacing.space(1);
   }
 }
 
@@ -114,11 +112,11 @@ small {
 
 %chip-base {
   max-width: max-content;
-  padding: 0.125em 0.25rem;
+  padding: spacing.space(0.125) spacing.space(0.25);
 
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: spacing.space(0.5);
 
   @include colour.colour-font("font-base");
   @include typography.detail-font-small;
@@ -160,7 +158,7 @@ small {
     @include colour.colour-font("icon-light");
 
     @include colour.on-high-contrast {
-      padding-right: 0.5rem;
+      padding-right: spacing.space(0.5);
 
       color: inherit;
 
@@ -186,7 +184,7 @@ small {
 
   display: flex;
   flex-wrap: wrap;
-  gap: 0.5rem 1.5rem;
+  gap: spacing.space(0.5) spacing.space(1.5);
 
   list-style: none;
 
@@ -205,7 +203,7 @@ small {
       display: inline-block;
 
       &::after {
-        padding-left: 0.5rem;
+        padding-left: spacing.space(0.5);
 
         display: inline-block;
 
@@ -216,7 +214,7 @@ small {
 
       &:hover {
         &::after {
-          padding-left: 0.75rem;
+          padding-left: spacing.space(0.75);
         }
       }
     }
@@ -231,77 +229,65 @@ small {
   @extend %heading;
 
   @include typography.heading-font;
-  @include typography.relative-font-size(64);
-  line-height: 1.1;
-
-  @include media.on-medium {
-    @include typography.relative-font-size(48);
-  }
-
-  @include media.on-mobile {
-    @include typography.relative-font-size(36);
-  }
+  @include typography.heading-generator(
+    typographyVars.$heading-xl-font-size-default,
+    typographyVars.$heading-xl-font-size-medium,
+    typographyVars.$heading-xl-font-size-small,
+    typographyVars.$heading-xl-font-size-tiny,
+    typographyVars.$heading-xl-line-height
+  );
 }
 
 %heading-l {
   @extend %heading;
 
   @include typography.heading-font;
-  @include typography.relative-font-size(36);
-  line-height: 1.3;
-
-  @include media.on-medium {
-    @include typography.relative-font-size(30);
-  }
-
-  @include media.on-small {
-    @include typography.relative-font-size(28);
-  }
-
-  @include media.on-tiny {
-    @include typography.relative-font-size(25);
-  }
+  @include typography.heading-generator(
+    typographyVars.$heading-l-font-size-default,
+    typographyVars.$heading-l-font-size-medium,
+    typographyVars.$heading-l-font-size-small,
+    typographyVars.$heading-l-font-size-tiny,
+    typographyVars.$heading-l-line-height
+  );
 }
 
 %heading-m {
   @extend %heading;
 
   @include typography.main-font-weight-bold;
-  @include typography.relative-font-size(22);
-  line-height: 1.6;
-
-  @include media.on-medium {
-    @include typography.relative-font-size(21);
-  }
-
-  @include media.on-small {
-    @include typography.relative-font-size(20);
-  }
-
-  @include media.on-tiny {
-    @include typography.relative-font-size(19);
-  }
+  @include typography.heading-generator(
+    typographyVars.$heading-m-font-size-default,
+    typographyVars.$heading-m-font-size-medium,
+    typographyVars.$heading-m-font-size-small,
+    typographyVars.$heading-m-font-size-tiny,
+    typographyVars.$heading-m-line-height
+  );
 }
 
 %heading-s {
   @extend %heading;
 
   @include typography.main-font-weight-bold;
-  @include typography.relative-font-size(18);
-  line-height: 1.6;
+  @include typography.heading-generator(
+    typographyVars.$heading-s-font-size-default,
+    typographyVars.$heading-s-font-size-medium,
+    typographyVars.$heading-s-font-size-small,
+    typographyVars.$heading-s-font-size-tiny,
+    typographyVars.$heading-s-line-height
+  );
 }
 
 %headings-and-heading-groups {
   @include spacing.space-above;
   margin-bottom: 0;
-  padding: 1rem 0 0;
+  padding: spacing.space(1) 0 0;
 
   &:first-child {
     padding-top: 0;
   }
 
   + p {
-    margin-top: 1rem;
+    margin-top: spacing.space(1);
   }
 }
 
@@ -336,7 +322,7 @@ small {
   }
 
   &__supertitle {
-    margin: 0 0 0.25rem;
+    margin: 0 0 spacing.space(0.25);
 
     @extend %chip-base;
 
@@ -377,20 +363,28 @@ small {
   margin-right: 0;
   margin-bottom: 0;
   margin-left: 0;
-  padding: 1rem 1rem 1rem 2rem;
+  padding: spacing.space(1) spacing.space(1) spacing.space(1) spacing.space(2);
 
   @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: 1rem 0 0;
-    }
+    @include typography.relative-font-size(16);
 
     &::before {
       content: "\2014" " ";
@@ -399,7 +393,9 @@ small {
   }
 
   @include media.on-tiny {
-    padding: 0.5rem 0.5rem 0.5rem 1rem;
+    padding: spacing.space(0.5) spacing.space(0.5) spacing.space(0.5) #{spacing.space(
+        1
+      )};
   }
 }
 

package/nationalarchives/variables/_colour.scss

@@ -1,7 +1,7 @@
 @use "sass:map";
 
 $colour-palette-brand: (
-  "black": #000,
+  "black": #010101,
   "grey": #8c9694,
   "light-grey": #d9d9d6,
   "white": #fff,
@@ -37,9 +37,9 @@ $colour-palette-brand: (
   @return hex-to-rgb(map.get($colour-palette-brand, $colour), $opacity);
 }
 
-$dark-grey: #26262a;
+$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": #111,
+  "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;
@@ -102,8 +102,8 @@ DARK THEME
 $colour-palette-dark: map.merge(
   $colour-palette-default,
   (
-    "page-background": #222,
-    "background-tint": #333,
+    "page-background": #212223,
+    "background-tint": #323334,
     "font-base": brand-colour("white", 0.95),
     "font-dark": brand-colour("white"),
     "font-light": brand-colour("white", 0.51),
@@ -121,7 +121,7 @@ $colour-palette-dark: map.merge(
     "button-background": brand-colour("white"),
     "button-hover-text": brand-colour("white"),
     "button-hover-background": brand-colour("black"),
-    "contrast-background": #111,
+    "contrast-background": #101112,
     "contrast-link-visited":
       map.get($colour-palette-default, "contrast-link-visited"),
   )

package/nationalarchives/variables/_grid.scss

@@ -1,7 +1,7 @@
-$largest-container-width: 80rem !default;
+$largest-container-width: 1280px !default;
 
-$gutter-width: 2rem !default;
-$gutter-width-tiny: 1rem !default;
+$gutter-width: 2 !default;
+$gutter-width-tiny: 1 !default;
 
 $column-count: 12;
 $column-count-medium: 6;

package/nationalarchives/variables/_media.scss

@@ -1,40 +1,3 @@
-@use "sass:math";
-@use "./typography";
-
 $largest-medium-device-px: 1024 !default;
 $largest-small-device-px: 768 !default;
 $largest-tiny-device-px: 480 !default;
-
-$smallest-large-device-em: #{math.div(
-    $largest-medium-device-px + 1,
-    typography.$relative-1rem-px
-  )}em;
-$largest-medium-device-em: #{math.div(
-    $largest-medium-device-px,
-    typography.$relative-1rem-px
-  )}em;
-$smallest-medium-device-em: #{math.div(
-    $largest-small-device-px + 1,
-    typography.$relative-1rem-px
-  )}em;
-$largest-small-device-em: #{math.div(
-    $largest-small-device-px,
-    typography.$relative-1rem-px
-  )}em;
-$smallest-small-device-em: #{math.div(
-    $largest-tiny-device-px + 1,
-    typography.$relative-1rem-px
-  )}em;
-$largest-tiny-device-em: #{math.div(
-    $largest-tiny-device-px,
-    typography.$relative-1rem-px
-  )}em;
-
-$media-large: "(min-width: #{$smallest-large-device-em})";
-$media-lt-large: "(max-width: #{$largest-medium-device-em})";
-$media-medium: "(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})";
-$media-gt-mobile: "(min-width: #{$smallest-medium-device-em})";
-$media-mobile: "(max-width: #{$largest-small-device-em})";
-$media-small: "(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})";
-$media-gt-tiny: "(min-width: #{$smallest-small-device-em})";
-$media-tiny: "(max-width: #{$largest-tiny-device-em})";

package/nationalarchives/variables/_spacing.scss

@@ -1,22 +1,24 @@
 @use "sass:map";
 
+$spacing-unit-px: 16 !default;
+
 $spacing: (
-  "xs": 0.5rem,
-  "s": 1rem,
-  "m": 2rem,
-  "l": 3rem,
-  "xl": 5rem,
-  "xxl": 8rem,
+  "xs": 0.5,
+  "s": 1,
+  "m": 2,
+  "l": 3,
+  "xl": 5,
+  "xxl": 8,
 ) !default;
 
 $spacing-mobile: map.merge(
   $spacing,
   (
-    "xs": 0.5rem,
-    "s": 0.75rem,
-    "m": 1.5rem,
-    "l": 2rem,
-    "xl": 3rem,
-    "xxl": 5rem,
+    "xs": 0.5,
+    "s": 0.75,
+    "m": 1.5,
+    "l": 2,
+    "xl": 3,
+    "xxl": 5,
   )
 ) !default;

package/nationalarchives/variables/_typography.scss

@@ -1,18 +1,17 @@
-@use "sass:math";
+$relative-1rem-px: 16; // 16px = 1rem
 
 $use-local-fonts: false !default;
 
-$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($relative-1rem-px, $body-font-size-px) * 2} !default; // 1.77777
+$body-line-height: 1.75 !default;
 
 $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;
@@ -21,3 +20,27 @@ $heading-font-weight: 500 !default;
 $detail-font-family: "Roboto Mono", monospace !default;
 $detail-font-weight: 400 !default;
 $detail-font-weight-bold: 500 !default;
+
+$heading-xl-font-size-default: 64 !default;
+$heading-xl-font-size-medium: 48 !default;
+$heading-xl-font-size-small: 36 !default;
+$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;
+$heading-xl-line-height: 1.1 !default;
+
+$heading-l-font-size-default: 36 !default;
+$heading-l-font-size-medium: 30 !default;
+$heading-l-font-size-small: 28 !default;
+$heading-l-font-size-tiny: 25 !default;
+$heading-l-line-height: 1.3 !default;
+
+$heading-m-font-size-default: 22 !default;
+$heading-m-font-size-medium: 21 !default;
+$heading-m-font-size-small: 20 !default;
+$heading-m-font-size-tiny: 19 !default;
+$heading-m-line-height: 1.6 !default;
+
+$heading-s-font-size-default: 18 !default;
+$heading-s-font-size-medium: $heading-s-font-size-default !default;
+$heading-s-font-size-small: $heading-s-font-size-default !default;
+$heading-s-font-size-tiny: $heading-s-font-size-default !default;
+$heading-s-line-height: 1.6 !default;

package/package.json

@@ -1,19 +1,22 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.48",
+  "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(0, 0, 0);--font-light: rgb(0 0 0/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(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--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:2rem}.tna-message:first-child{margin-top:0}.tna-message{padding:1rem;display:flex;gap:1rem;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:.5rem}}.tna-message__heading{font-size:0}.tna-message__heading-icon{width:2rem;height:2rem;display:block;color:#000;color:var(--font-dark);font-size:1.5rem;font-weight:700;text-transform:lowercase;text-align:center;line-height:2rem;border:.1875rem #000 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 #000 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,wBCpXJ,aACE,gBAEA,yBACE,aCHJ,aAEE,aAEA,aACA,SACA,uBFyFA,oCAkFA,uCGnJA,wBD9BF,aAeI,sBACA,WAGF,sBACE,YAGF,2BACE,WACA,YAEA,cFyDF,WACA,uBIrFA,iBAQA,YCEsB,IHsBpB,yBACA,kBACA,iBF6FE,2BAIA,uCE9FF,mBCiBF,wBD/BA,2BAiBI,aACA,cEzCJ,oBF4CI,mBFmFA,0BAIA,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 \"../variables/spacing\";\n@use \"../tools/media\";\n\n%space-above {\n  margin-top: 2rem;\n\n  &:first-child {\n    margin-top: 0;\n  }\n}\n\n%space-only-above {\n  margin: 2rem 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@function space($size) {\n  @return map.get(spacing.$spacing, $size);\n}\n\n@function space-mobile($size) {\n  @return map.get(spacing.$spacing-mobile, $size);\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}: #{$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}: #{$amount} !important;\n            }\n          } @else {\n            .tna-\\!--#{$property}-#{$direction}-#{$size} {\n              #{$property}-#{$direction}: #{$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}: #{$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}: #{$amount} !important;\n              }\n            } @else {\n              .tna-\\!--#{$property}-#{$direction}-#{$size} {\n                #{$property}-#{$direction}: #{$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: 1rem;\n\n  display: flex;\n  gap: 1rem;\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: 0.5rem;\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 \"../variables/media\";\n\n//   0 ======= 320 = 480 ===== 768 == 1024 ========================== min-width/max-width (px)\n//   |         .     |         |      |\n//   |-TINY----------|-SMALL---|-MED--|-LARGE------------------------\n//   |         .     |         |      |\n//   |<------------->|         |      |            on-tiny\n//   |<----------------------->|      |            on-mobile\n//   |<------------------------------>|            on-smaller-than-large\n//   |         .     |<------->|      |            on-small\n//   |         .     |<-------------------------   on-larger-than-tiny\n//   |         .     |         |<---->|            on-medium\n//   |         .     |         |<---------------   on-larger-than-mobile\n//   |         .     |         |      |<--------   on-large\n//   |<------->.     |         |      |            Smallest device\n\n@mixin on-large() {\n  @media #{media.$media-large} {\n    @content;\n  }\n}\n\n@mixin on-medium() {\n  @media #{media.$media-medium} {\n    @content;\n  }\n}\n\n@mixin on-small() {\n  @media #{media.$media-small} {\n    @content;\n  }\n}\n\n@mixin on-tiny() {\n  @media #{media.$media-tiny} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-mobile() {\n  @media #{media.$media-gt-mobile} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-tiny() {\n  @media #{media.$media-gt-tiny} {\n    @content;\n  }\n}\n\n@mixin on-smaller-than-large() {\n  @media #{media.$media-lt-large} {\n    @content;\n  }\n}\n\n@mixin on-mobile() {\n  @media #{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 \"colour\";\n@use \"../variables/typography\";\n\n@mixin relative-font-size($fontSizePx) {\n  font-size: #{math.div($fontSizePx, 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: #{math.div(typography.$relative-1rem-px, 14)};\n}\n\n@mixin interacted-text-decoration {\n  text-decoration: underline;\n  text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n","@use \"sass:math\";\n\n$use-local-fonts: false !default;\n\n$relative-1rem-px: 16; // 16px is always 1rem\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: #{math.div($relative-1rem-px, $body-font-size-px) * 2} !default; // 1.77777\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"]}