@nationalarchives/frontend 0.2.8 → 0.2.10

package/nationalarchives/utilities/lists/_index.scss

@@ -85,7 +85,7 @@ ol {
     cursor: pointer;
   }
 
-  &:not(#{&}--plain) {
+  &:not(&--plain) {
     gap: spacing.space(0.5) spacing.space(1);
   }
 
@@ -93,7 +93,7 @@ ol {
     @extend %chip-plain;
   }
 
-  &:not(#{&}--plain) &__item {
+  &:not(&--plain) &__item {
     @extend %chip-accent;
   }
 

package/nationalarchives/utilities/typography/_index.scss

@@ -125,10 +125,31 @@ small {
   -webkit-print-color-adjust: exact;
   print-color-adjust: exact;
 
-  .tna-background-accent & {
-    @include colour.contrast;
+  .tna-background-accent &,
+  .tna-template--dark-theme .tna-background-accent-light & {
+    @include colour.colour-font("contrast-font-base");
+
+    @include colour.colour-background("contrast-background");
 
     @include colour.colour-border("contrast-background");
+
+    .fa-solid {
+      @include colour.colour-font("contrast-icon-light");
+    }
+  }
+
+  .tna-template--system-theme .tna-background-accent-light & {
+    @media (prefers-color-scheme: dark) {
+      @include colour.colour-font("contrast-font-base");
+
+      @include colour.colour-background("contrast-background");
+
+      @include colour.colour-border("contrast-background");
+
+      .fa-solid {
+        @include colour.colour-font("contrast-icon-light");
+      }
+    }
   }
 }
 
@@ -163,7 +184,7 @@ small {
     @include colour.blue-accent;
   }
 
-  &:not(#{&}--plain) {
+  &:not(&--plain) {
     @extend %chip-accent;
   }
 }
@@ -348,7 +369,7 @@ small {
       @extend %chip-plain;
     }
 
-    &:not(#{&}--plain) {
+    &:not(&--plain) {
       @extend %chip-accent;
     }
   }

package/nationalarchives/variables/_colour.scss

@@ -116,7 +116,7 @@ $colour-palette-dark: map.merge(
     "background-tint": #323334,
     "font-base": brand-colour("white", 0.95),
     "font-dark": brand-colour("white"),
-    "font-light": brand-colour("white", 0.51),
+    "font-light": brand-colour("white", 0.65),
     "icon-light": brand-colour("white", 0.35),
     "link": brand-colour("blue"),
     "link-visited": #a8f,
@@ -150,7 +150,7 @@ $colour-palette-high-contrast: map.merge(
     "background-tint": #ddd,
     "font-base": brand-colour("black"),
     "font-light": brand-colour("black"),
-    "icon-light": brand-colour("black", 0.75),
+    "icon-light": brand-colour("black", 0.8),
     "link": #34d,
     "link-visited": #848,
     "focus-outline": brand-colour("orange"),
@@ -158,7 +158,9 @@ $colour-palette-high-contrast: map.merge(
     "keyline-dark": brand-colour("black"),
     "contrast-background": brand-colour("black"),
     "contrast-link": brand-colour("blue"),
+    "contrast-font-light": brand-colour("white", 0.8),
     "contrast-link-visited": #a8f,
+    "accent-font-light": brand-colour("black", 0.8),
   )
 ) !default;
 
@@ -173,12 +175,14 @@ $colour-palette-high-contrast-dark: map.merge(
     "background": #111,
     "font-base": brand-colour("white"),
     "font-light": brand-colour("white"),
-    "icon-light": brand-colour("white", 0.75),
+    "icon-light": brand-colour("white", 0.8),
     "keyline": brand-colour("white"),
     "form-error-border": #ff6b6b,
     "form-error-text": #ff6b6b,
     "contrast-background": brand-colour("black"),
     "contrast-link": brand-colour("blue"),
+    "contrast-font-light": brand-colour("white", 0.8),
     "contrast-link-visited": #a8f,
+    "accent-font-light": brand-colour("black", 0.8),
   )
 ) !default;

package/nationalarchives/variables/_typography.scss

@@ -21,6 +21,17 @@ $relative-1rem-px: 16; // 16px = 1rem
  */
 $use-local-fonts: false !default;
 
+/*
+ * ------------------------------------------
+ * When the $use-local-fonts var and this are
+ * both set to true import the required fonts
+ * from Google with an @import; if false then
+ * a separate <link> element for the font CSS
+ * is required in your app
+ * ------------------------------------------
+ */
+$import-google-fonts: true !default;
+
 $body-font-size-px: 18 !default;
 $body-font-size-px-mobile: 17 !default;
 $body-line-height: 1.75 !default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",