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

@@ -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) {

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

src/nationalarchives/all.scss

@@ -14,6 +14,5 @@
 
 @use "variables";
 @use "tools";
-@use "lib";
 @use "utilities";
 @use "components";

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";

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);

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");

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",