From 29b3d2ac55f82af28bf3718825af2bf2078eff16 Mon Sep 17 00:00:00 2001
From: Andrew Hosgood <mail@andrewhosgood.com>
Date: Mon, 22 Jan 2024 17:30:39 +0000
Subject: [PATCH] Split out Font Awesome into separate CSS file, optimise
 colours (#76)

* Split out Font Awesome into separate CSS file, optimise colours

* Add default light theme into stories
---
 .storybook/preview.js                       |  2 +
 CHANGELOG.md                                |  1 +
 src/nationalarchives/all.scss               |  1 -
 src/nationalarchives/font-awesome.scss      |  6 +++
 src/nationalarchives/lib/_font-awesome.scss |  6 ---
 src/nationalarchives/lib/_index.scss        |  1 -
 src/nationalarchives/tools/_colour.scss     | 46 +++++++++++----------
 src/nationalarchives/utilities/_colour.scss |  6 +--
 tasks/test-package.js                       |  6 +++
 9 files changed, 43 insertions(+), 32 deletions(-)
 create mode 100644 src/nationalarchives/font-awesome.scss
 delete mode 100644 src/nationalarchives/lib/_font-awesome.scss
 delete mode 100644 src/nationalarchives/lib/_index.scss

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 2c5657b0..12bbb954 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,10 +1,12 @@
 import "../src/nationalarchives/all.scss";
+import "../src/nationalarchives/font-awesome.scss";
 import { a11yConfig } from "./storybook-config";
 import { customViewports } from "./viewports";
 import Cookies from "../src/nationalarchives/lib/cookies.mjs";
 
 document.documentElement.classList.add(
   "tna-template",
+  "tna-template--light-theme",
   "tna-template--yellow-accent",
 );
 if (window.self !== window.top) {
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 47f6cf99..041c6f89 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Set smaller minimum width for search field inputs
 - Added more space between the text and chevron in a heading link
+- Split out Font Awesome into a separate CSS file
 
 ### Deprecated
 ### Removed
diff --git a/src/nationalarchives/all.scss b/src/nationalarchives/all.scss
index 60630fc1..9669538b 100644
--- a/src/nationalarchives/all.scss
+++ b/src/nationalarchives/all.scss
@@ -14,6 +14,5 @@
 
 @use "variables";
 @use "tools";
-@use "lib";
 @use "utilities";
 @use "components";
diff --git a/src/nationalarchives/font-awesome.scss b/src/nationalarchives/font-awesome.scss
new file mode 100644
index 00000000..39f08768
--- /dev/null
+++ b/src/nationalarchives/font-awesome.scss
@@ -0,0 +1,6 @@
+@use "variables/assets";
+
+$fa-font-path: assets.$fa-font-path;
+@import "lib/font-awesome/fontawesome";
+@import "lib/font-awesome/solid";
+@import "lib/font-awesome/brands";
diff --git a/src/nationalarchives/lib/_font-awesome.scss b/src/nationalarchives/lib/_font-awesome.scss
deleted file mode 100644
index 6022720c..00000000
--- a/src/nationalarchives/lib/_font-awesome.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@use "../variables/assets";
-
-$fa-font-path: assets.$fa-font-path;
-@import "font-awesome/fontawesome";
-@import "font-awesome/solid";
-@import "font-awesome/brands";
diff --git a/src/nationalarchives/lib/_index.scss b/src/nationalarchives/lib/_index.scss
deleted file mode 100644
index f2622b93..00000000
--- a/src/nationalarchives/lib/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@use "font-awesome";
diff --git a/src/nationalarchives/tools/_colour.scss b/src/nationalarchives/tools/_colour.scss
index 2407a6e7..16f4bcdb 100644
--- a/src/nationalarchives/tools/_colour.scss
+++ b/src/nationalarchives/tools/_colour.scss
@@ -150,18 +150,38 @@
   fill: var(--#{$colour}) if($important, !important, null);
 }
 
+%light {
+  @include colour-css-vars;
+
+  @media (prefers-contrast: more) {
+    @include colour-css-vars-high-contrast;
+  }
+}
+
+@mixin light {
+  @extend %light;
+}
+
+%dark {
+  @include colour-css-vars-dark;
+
+  @media (prefers-contrast: more) {
+    @include colour-css-vars-high-contrast-dark;
+  }
+}
+
+@mixin dark {
+  @extend %dark;
+}
+
 %plain {
   .tna-template--system-theme & {
-    @include colour-css-vars;
+    @extend %light;
 
     @media (prefers-color-scheme: dark) {
       @include colour-css-vars-dark;
     }
 
-    @media (prefers-contrast: more) {
-      @include colour-css-vars-high-contrast;
-    }
-
     @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
       @include colour-css-vars-high-contrast-dark;
     }
@@ -190,22 +210,6 @@
   @extend %plain;
 }
 
-@mixin light {
-  @include colour-css-vars;
-
-  @media (prefers-contrast: more) {
-    @include colour-css-vars-high-contrast;
-  }
-}
-
-@mixin dark {
-  @include colour-css-vars-dark;
-
-  @media (prefers-contrast: more) {
-    @include colour-css-vars-high-contrast-dark;
-  }
-}
-
 %contrast {
   --background: var(--contrast-background);
   --font-base: var(--contrast-font-base);
diff --git a/src/nationalarchives/utilities/_colour.scss b/src/nationalarchives/utilities/_colour.scss
index 7c6a4e87..494994a8 100644
--- a/src/nationalarchives/utilities/_colour.scss
+++ b/src/nationalarchives/utilities/_colour.scss
@@ -1,8 +1,8 @@
 @use "../tools/colour";
 
-:root {
-  @include colour.colour-css-vars;
-}
+// :root {
+//   @include colour.colour-css-vars;
+// }
 
 .tna-template {
   @include colour.colour-background("page-background");
diff --git a/tasks/test-package.js b/tasks/test-package.js
index f9efef42..f893f182 100644
--- a/tasks/test-package.js
+++ b/tasks/test-package.js
@@ -41,6 +41,12 @@ const checkExists = [
   "nationalarchives/all.js.map",
   "nationalarchives/all.mjs",
   "nationalarchives/all.scss",
+  "nationalarchives/font-awesome.css",
+  "nationalarchives/font-awesome.css.map",
+  "nationalarchives/font-awesome.scss",
+  "nationalarchives/prototype-kit.css",
+  "nationalarchives/prototype-kit.css.map",
+  "nationalarchives/prototype-kit.scss",
   // Assets
   "nationalarchives/assets/fonts/fa-brands-400.ttf",
   "nationalarchives/assets/fonts/fa-brands-400.woff2",