@nationalarchives/frontend 0.1.10-prerelease → 0.1.12-prerelease

package/nationalarchives/utilities/_typography.scss

@@ -1,56 +1,60 @@
-@use "../variables/colour";
-@use "../variables/typography";
+@use "../tools/colour";
 @use "../tools/media";
-@use "../tools/typography" as tools;
+@use "../tools/typography";
 
 // Temporary - will eventually bundle font files into package
 @import "https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Roboto+Mono:wght@500;700&display=swap";
 @import "https://use.typekit.net/hkj3kuz.css";
 
 .tna-template {
-  font-family: typography.$font-family-main;
-  font-weight: typography.$font-weight-main;
-  // color: colour.$base-font-colour;
-  @include colour.colour-font("base-font");
+  @include colour.colour-font("font-base");
+  @include typography.main-font;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   -webkit-text-size-adjust: none;
   direction: ltr;
+}
 
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  ul,
-  ol {
-    margin-top: 0;
-  }
+.tna-template__body {
+  color: inherit;
+  @include typography.relative-font-size(18);
+  line-height: 1.6;
+}
 
-  p {
-    margin: 0 0 1.5rem;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ul,
+ol {
+  margin-top: 0;
+}
 
-    &:last-child {
-      margin-bottom: 0;
-    }
+p {
+  margin: 0 0 1.5rem;
+
+  &:last-child {
+    margin-bottom: 0;
   }
+}
 
-  a {
-    &:active {
-      text-decoration-thickness: 4px;
-    }
+a {
+  @include colour.colour-font("link");
 
-    &:hover {
-      text-decoration-thickness: 3px;
-    }
+  &:visited {
+    @include colour.colour-font("link-visited");
   }
-}
 
-.tna-template__body {
-  @include tools.relative-font-size(16);
-  line-height: 1.6;
+  &:active {
+    text-decoration-thickness: 4px;
+  }
+
+  &:hover {
+    text-decoration-thickness: 3px;
+  }
 }
 
 .tna-ul,
@@ -58,7 +62,7 @@
   padding-left: 2rem;
 
   li::marker {
-    color: #f0a;
+    @include colour.colour-font("accent");
     font-weight: 700;
   }
 
@@ -72,47 +76,46 @@
 .tna-heading {
   margin-bottom: 1.5rem;
 
-  color: colour.$tna-black;
-  font-family: typography.$font-family-heading;
-  font-weight: typography.$font-weight-heading;
+  @include colour.colour-font("font-dark");
+  @include typography.heading-font;
 
   &:last-child {
     margin-bottom: 0;
   }
 
   &--xl {
-    @include tools.relative-font-size(64);
+    @include typography.relative-font-size(64);
     line-height: 1;
 
     @include media.on-medium {
-      @include tools.relative-font-size(42);
+      @include typography.relative-font-size(42);
     }
 
     @include media.on-mobile {
-      @include tools.relative-font-size(36);
+      @include typography.relative-font-size(36);
     }
   }
 
   &--l {
-    @include tools.relative-font-size(32);
+    @include typography.relative-font-size(32);
     line-height: 1.2;
 
     @include media.on-medium {
-      @include tools.relative-font-size(26);
+      @include typography.relative-font-size(26);
     }
 
     @include media.on-mobile {
-      @include tools.relative-font-size(24);
+      @include typography.relative-font-size(24);
     }
   }
 
   &--m {
-    @include tools.relative-font-size(20);
+    @include typography.relative-font-size(20);
     line-height: 1.4;
   }
 
   &--s {
-    @include tools.relative-font-size(18);
+    @include typography.relative-font-size(18);
     line-height: 1.6;
   }
 }
@@ -127,28 +130,25 @@
   &__supertitle {
     margin: 0;
 
-    // color: colour.$base-font-colour;
-    @include colour.colour-font("base-font");
-    @include tools.relative-font-size(14);
-    font-family: typography.$font-family-detail;
-    font-weight: typography.$font-weight-detail;
+    @include colour.colour-font("font-base");
+    @include typography.relative-font-size(14);
+    @include typography.detail-font;
     text-transform: uppercase;
 
-    // .tna-hgroup & {
-    //   margin: 0;
-    // }
+    .tna-hgroup & {
+      margin: 0;
+    }
   }
 
   &__title {
     margin: 0;
 
-    color: colour.$tna-black;
+    @include colour.colour-font("font-dark");
 
     .tna-hgroup__supertitle {
       display: block;
 
-      // color: colour.$base-font-colour;
-      @include colour.colour-font("base-font");
+      @include colour.colour-font("font-base");
     }
   }
 
@@ -157,7 +157,7 @@
     }
 
     .tna-hgroup__title {
-      @include tools.relative-font-size(64);
+      @include typography.relative-font-size(64);
     }
   }
 
@@ -166,7 +166,7 @@
     }
 
     .tna-hgroup__title {
-      @include tools.relative-font-size(32);
+      @include typography.relative-font-size(32);
     }
   }
 
@@ -175,7 +175,7 @@
     }
 
     .tna-hgroup__title {
-      @include tools.relative-font-size(20);
+      @include typography.relative-font-size(20);
     }
   }
 
@@ -184,7 +184,39 @@
     }
 
     .tna-hgroup__title {
-      @include tools.relative-font-size(18);
+      @include typography.relative-font-size(18);
+    }
+  }
+}
+
+.tna-blockquote {
+  margin: 0;
+  padding: 1rem 1rem 1rem 2rem;
+
+  border-left: 0.35rem solid;
+  @include colour.colour-border("keyline");
+
+  quotes: "“" "”" "‘" "’";
+
+  &::before {
+    float: left;
+
+    content: open-quote;
+  }
+
+  &__quote {
+    font-weight: 700;
+  }
+
+  &__author {
+    font-style: italic;
+
+    .tna-blockquote & {
+      margin: 1rem 0 0;
+    }
+
+    &::before {
+      content: "\2014" " ";
     }
   }
 }

package/nationalarchives/variables/_colour.scss

@@ -1,95 +1,122 @@
 @use "sass:map";
+@use "../features";
 
-$tna-black: #000;
-$tna-yellow: #fc0;
-$tna-pink: #fe1d57;
-$tna-orange: #fd3f03;
-$tna-green: #86bc25;
-$tna-blue: #00b0ff;
-$dark: #26262a;
+$-tna-black: #000;
+$-tna-grey: #8c9694;
+$-tna-light-grey: #d9d9d6;
+$-tna-white: #fff;
 
-$page-background: #fff;
-$base-font: #343338;
-$focus-outline: #004c7e;
-$keyline: #ccc;
+$-tna-yellow: #fc0;
+$-tna-pink: #fe1d57;
+$-tna-orange: #fd3f03;
+$-tna-green: #86bc25;
+$-tna-blue: #00b0ff;
+
+$-tna-brown: #654e37;
+$-tna-maroon: #9c193a;
+$-tna-chestnut: #8f3415;
+$-tna-forest: #00623b;
+$-tna-navy: #004c7e;
+
+$-tna-cream: #f9f7e2;
+$-tna-pastel-pink: #fad3d4;
+$-tna-pastel-orange: #f9e1bc;
+$-tna-pastel-green: #dde5d5;
+$-tna-pastel-blue: #d4e5ef;
+
+$-dark-grey: #26262a;
+$-base-font: #343338;
+
+$-accent-colour: $-tna-yellow;
+$-accent-colour-dark: $-accent-colour;
+
+// @debug $-accent-colour;
+// @mixin configure($accent-colour: null) {
+//   @debug $accent-colour;
+//   @if $accent-colour {
+//     $-accent-colour: $accent-colour !global;
+//   }
+// }
+// @debug $-accent-colour;
+
+@function accent-colour() {
+  // @return $-accent-colour or $-tna-yellow;
+  @return $-accent-colour;
+}
+
+@function accent-colour-dark() {
+  // @return $-accent-colour-dark or -accent-colour();
+  @return $-accent-colour-dark or accent-colour();
+}
+
+// TODO: Scoped variables should not be used directly outside of this file
+$tna-black: $-tna-black;
+$dark-grey: $-dark-grey;
+$tna-yellow: $-tna-yellow;
+$tna-pink: $-tna-pink;
+$tna-orange: $-tna-orange;
+$tna-green: $-tna-green;
+$tna-blue: $-tna-blue;
+$tna-cream: $-tna-cream;
 
 $colour-palette-default: (
-  "page-background": $page-background,
-  "base-font": $base-font,
-  "dark-font": $tna-black,
-  "focus-outline": $focus-outline,
-  "keyline": $keyline,
+  "page-background": $-tna-white,
+  "font-base": $-base-font,
+  "font-dark": $-tna-black,
+  "font-light": rgba($-base-font, 0.7),
+  "link": #1d70ab,
+  "link-visited": #4c2c92,
+  // "focus-outline": #004c7e,
+  "focus-outline": $-tna-blue,
+  "keyline": #ccc,
+  "keyline-dark": $-dark-grey,
+  "accent": accent-colour(),
+  "button-primary-text": $-tna-white,
+  "button-primary-background": $-tna-black,
+  "button-primary-hover-text": $-tna-black,
+  "button-primary-hover-background": $-tna-white,
+  "button-secondary-text": $-tna-black,
+  "button-secondary-background": $-tna-yellow,
+  "button-secondary-hover-text": $-tna-black,
+  "button-secondary-hover-background": $-tna-white,
 );
 
 $colour-palette-dark: map.merge(
   $colour-palette-default,
   (
-    "page-background": $dark,
-    "base-font": #eee,
-    "dark-font": #fff,
-    "focus-outline": $tna-yellow,
-    "keyline": #444,
+    "page-background": #222,
+    "font-base": rgba($-tna-white, 0.95),
+    "font-dark": $-tna-white,
+    "font-light": rgba($-tna-white, 0.8),
+    "link": $-tna-blue,
+    "link-visited": #b9f,
+    "keyline": rgba($-tna-white, 0.5),
+    "keyline-dark": $-tna-white,
+    "accent": accent-colour-dark(),
   )
 );
 
 $colour-palette-high-contrast: map.merge(
   $colour-palette-default,
   (
-    "base-font": $tna-black,
-    "focus-outline": #f0a,
-    "keyline": $tna-black,
+    "font-base": $-tna-black,
+    "font-light": $-tna-black,
+    "link": $-tna-black,
+    "link-visited": $-tna-black,
+    "focus-outline": $-tna-orange,
+    "keyline": $-tna-black,
+    "keyline-dark": $-tna-black,
   )
 );
 
 $colour-palette-high-contrast-dark: map.merge(
   $colour-palette-dark,
   (
-    "page-background": $tna-black,
-    "base-font": #fff,
-    "keyline": #fff,
+    "page-background": #191919,
+    "font-base": $-tna-white,
+    "font-light": $-tna-white,
+    "link": $-tna-white,
+    "link-visited": $-tna-white,
+    "keyline": $-tna-white,
   )
 );
-
-@mixin colour-css-vars() {
-  @each $name, $value in $colour-palette-default {
-    --#{$name}: #{$value};
-  }
-}
-
-@mixin colour-css-vars-dark() {
-  @each $name, $value in $colour-palette-dark {
-    --#{$name}: #{$value};
-  }
-}
-
-@mixin colour-css-vars-high-contrast() {
-  @each $name, $value in $colour-palette-high-contrast {
-    --#{$name}: #{$value};
-  }
-}
-
-@mixin colour-css-vars-high-contrast-dark() {
-  @each $name, $value in $colour-palette-high-contrast-dark {
-    --#{$name}: #{$value};
-  }
-}
-
-@mixin colour-font($colour) {
-  color: map.get($colour-palette-default, $colour);
-  color: var(--#{$colour});
-}
-
-@mixin colour-background($colour) {
-  background-color: map.get($colour-palette-default, $colour);
-  background-color: var(--#{$colour});
-}
-
-@mixin colour-border($colour) {
-  border-color: map.get($colour-palette-default, $colour);
-  border-color: var(--#{$colour});
-}
-
-@mixin colour-outline($colour) {
-  outline-color: map.get($colour-palette-default, $colour);
-  outline-color: var(--#{$colour});
-}

package/nationalarchives/variables/_typography.scss

@@ -3,7 +3,7 @@ $base-font-size-px: 16;
 $font-family-main: "Open Sans", sans-serif;
 $font-weight-main: 400;
 
-$font-family-heading: supria-sans-condensed, monospace;
+$font-family-heading: supria-sans-condensed, sans-serif;
 $font-weight-heading: 600;
 
 $font-family-detail: "Roboto Mono", monospace;

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.10-prerelease",
+  "version": "0.1.12-prerelease",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",
     "build": "storybook build -o storybook",
-    "test": "test-storybook --verbose --stories-json && node tasks/test-fixtures.js",
+    "test": "node tasks/test-fixtures.js && test-storybook --verbose --stories-json",
     "lint": "prettier --check '{src,.storybook,tasks}/**/*.{js,mjs,scss,json,html}' && stylelint 'src/**/*.scss' && eslint 'src/**/*.mjs'",
     "lint:fix": "prettier --write '{src,.storybook,tasks}/**/*.{js,mjs,scss,json,html}' && stylelint --fix 'src/**/*.scss' && eslint --fix 'src/**/*.mjs'",
     "package:sass": "sass --style=compressed --quiet-deps src/nationalarchives/all.scss package/nationalarchives/all.css",
-    "package:scripts": "webpack"
+    "package:scripts": "webpack",
+    "package:test": "tasks/build-package.sh && node tasks/test-package.js"
   },
   "repository": {
     "type": "git",
@@ -39,42 +40,42 @@
   },
   "homepage": "https://github.com/nationalarchives/tna-frontend#readme",
   "devDependencies": {
-    "@babel/core": "^7.19.1",
-    "@babel/preset-env": "^7.22.5",
+    "@babel/core": "^7.22.10",
+    "@babel/preset-env": "^7.22.10",
     "@mdx-js/react": "^2.1.3",
-    "@storybook/addon-a11y": "^7.0.27",
-    "@storybook/addon-docs": "^7.0.27",
-    "@storybook/addon-essentials": "^7.0.27",
-    "@storybook/addon-interactions": "^7.0.27",
-    "@storybook/addon-links": "^7.0.27",
-    "@storybook/addon-mdx-gfm": "^7.0.27",
-    "@storybook/html": "^7.0.27",
-    "@storybook/html-webpack5": "^7.0.27",
+    "@storybook/addon-a11y": "^7.2.1",
+    "@storybook/addon-docs": "^7.2.1",
+    "@storybook/addon-essentials": "^7.2.1",
+    "@storybook/addon-interactions": "^7.2.1",
+    "@storybook/addon-links": "^7.2.1",
+    "@storybook/addon-mdx-gfm": "^7.2.1",
+    "@storybook/html": "^7.2.1",
+    "@storybook/html-webpack5": "^7.2.1",
     "@storybook/jest": "^0.1.0",
-    "@storybook/test-runner": "^0.11.0",
+    "@storybook/test-runner": "^0.13.0",
     "@storybook/testing-library": "^0.2.0",
     "babel-loader": "^9.0.1",
-    "chromatic": "^6.19.9",
+    "chromatic": "^6.21.0",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.1",
     "diff": "^5.1.0",
-    "eslint": "^8.43.0",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint": "^8.46.0",
+    "eslint-plugin-storybook": "^0.6.13",
     "glob": "^10.2.7",
-    "jest-image-snapshot": "^6.1.0",
+    "jest-image-snapshot": "^6.2.0",
     "nunjucks": "^3.2.3",
-    "prettier": "^3.0.0",
+    "prettier": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sass": "^1.54.9",
+    "sass": "^1.64.2",
     "sass-loader": "^13.0.2",
     "simple-nunjucks-loader": "^3.2.0",
-    "storybook": "^7.0.27",
+    "storybook": "^7.2.1",
     "style-loader": "^3.3.1",
-    "stylelint": "^15.9.0",
+    "stylelint": "^15.10.2",
     "stylelint-config-standard-scss": "^10.0.0",
     "stylelint-selector-bem-pattern": "^3.0.0",
-    "webpack": "^5.74.0",
+    "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4"
   }
 }

package/nationalarchives/components/_all.scss

@@ -1,10 +0,0 @@
-@use "breadcrumbs/index" as breadcrumbs;
-@use "button/index" as button;
-@use "card/index" as card;
-@use "filters/index" as filters;
-@use "footer/index" as footer;
-@use "grid/index" as grid;
-@use "header/index" as header;
-@use "hero/index" as hero;
-@use "phase-banner/index" as phase-banner;
-@use "sensitive-image/index" as sensitive-image;

package/nationalarchives/tools/_all.scss

@@ -1,4 +0,0 @@
-@use "assets";
-@use "grid";
-@use "media";
-@use "typography";

package/nationalarchives/utilities/_all.scss

@@ -1,2 +0,0 @@
-@use "global";
-@use "typography";