Light accent on dark theme (#159)

* WIP: Accent light colours on dark themes * Fix hover button styles on dark theme
nationalarchives · Aug 19, 2024 · 88bc8a4 · 88bc8a4
1 parent d68f1b1
commit 88bc8a4
Show file tree

Hide file tree

Showing 7 changed files with 114 additions and 20 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Removed `:focus` styles and replaced with `:focus-visible`
+- Light accent blocks appear normal accent colours in dark themes
 
 ### Deprecated
 ### Removed

diff --git a/src/nationalarchives/components/button/button.scss b/src/nationalarchives/components/button/button.scss
@@ -173,29 +173,64 @@ $button-border-width: 4px !default;
     }
   }
 
-  .tna-background-accent & {
+  .tna-background-accent &,
+  .tna-template--dark-theme .tna-background-accent-light & {
     &:hover {
       @include colour.colour-font("font-dark");
     }
   }
 
-  .tna-background-accent &--accent {
-    @include colour.contrast;
+  .tna-background-accent &--accent,
+  .tna-template--dark-theme .tna-background-accent-light &--accent {
+    // @include colour.contrast;
 
-    @include colour.colour-background("button-background");
+    // @include colour.colour-background("button-background");
+    @include colour.colour-background("contrast-button-background");
 
-    @include colour.colour-border("button-background");
+    // @include colour.colour-border("button-background");
+    @include colour.colour-border("contrast-button-background");
 
     &,
     &:link,
     &:visited {
-      @include colour.colour-font("button-text");
+      // @include colour.colour-font("button-text");
+      @include colour.colour-font("contrast-button-text");
     }
 
     &:hover {
-      @include colour.colour-font("font-dark");
+      // @include colour.colour-font("font-dark");
+      @include colour.colour-font("contrast-font-dark");
 
-      @include colour.colour-background("background");
+      // @include colour.colour-background("background");
+      @include colour.colour-background("contrast-background");
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .tna-template--system-theme .tna-background-accent-light & {
+      &:hover {
+        @include colour.colour-font("font-dark");
+      }
+    }
+
+    .tna-template--system-theme .tna-background-accent-light &--accent {
+      // @include colour.contrast;
+
+      @include colour.colour-background("contrast-button-background");
+
+      @include colour.colour-border("contrast-button-background");
+
+      &,
+      &:link,
+      &:visited {
+        @include colour.colour-font("contrast-button-text");
+      }
+
+      &:hover {
+        @include colour.colour-font("contrast-font-dark");
+
+        @include colour.colour-background("contrast-background");
+      }
     }
   }
 

diff --git a/src/nationalarchives/components/card/card.scss b/src/nationalarchives/components/card/card.scss
@@ -189,7 +189,7 @@
     @include colour.colour-border("keyline-dark", 1px);
   }
 
-  &:not(#{&}--horizontal) {
+  &:not(&--horizontal) {
     @include colour.on-high-contrast-and-forced-colours {
       .tna-card__inner {
         padding-bottom: spacing.space(1);

diff --git a/src/nationalarchives/tools/_colour.scss b/src/nationalarchives/tools/_colour.scss
@@ -308,22 +308,54 @@
       colour.$colour-palette-default,
       "button-hover-background"
     )};
-  --accent-border: var(--font-base);
   --accent-list-marker: var(--font-base);
+  --accent-border: var(--accent-background);
 
   @include colour-background("background");
   @include colour-font("font-base");
 
   .tna-template--system-theme & {
     @media (prefers-color-scheme: dark) {
-      --link: #{map.get(colour.$colour-palette-default, "link")};
-      --link-visited: #{map.get(colour.$colour-palette-default, "link-visited")};
+      // --link: #{map.get(colour.$colour-palette-default, "link")};
+      // --link-visited: #{map.get(colour.$colour-palette-default, "link-visited")};
+
+      --background: var(--accent-background);
+      --font-base: var(--accent-font-base);
+      --font-dark: var(--accent-font-dark);
+      --font-light: var(--accent-font-light);
+      --icon-light: var(--accent-icon-light);
+      --link: var(--accent-link);
+      --link-visited: var(--accent-link);
+      --keyline: var(--accent-keyline);
+      --keyline-dark: var(--accent-keyline-dark);
+      --accent-list-marker: var(--accent-font-base);
+      --accent-border: var(--accent-font-dark);
+      --button-text: var(--accent-button-text);
+      --button-background: var(--accent-button-background);
+      --button-hover-text: var(--accent-button-hover-text);
+      --button-hover-background: var(--accent-button-hover-background);
     }
   }
 
   .tna-template--dark-theme & {
-    --link: #{map.get(colour.$colour-palette-default, "link")};
-    --link-visited: #{map.get(colour.$colour-palette-default, "link-visited")};
+    // --link: #{map.get(colour.$colour-palette-default, "link")};
+    // --link-visited: #{map.get(colour.$colour-palette-default, "link-visited")};
+
+    --background: var(--accent-background);
+    --font-base: var(--accent-font-base);
+    --font-dark: var(--accent-font-dark);
+    --font-light: var(--accent-font-light);
+    --icon-light: var(--accent-icon-light);
+    --link: var(--accent-link);
+    --link-visited: var(--accent-link);
+    --keyline: var(--accent-keyline);
+    --keyline-dark: var(--accent-keyline-dark);
+    --accent-list-marker: var(--accent-font-base);
+    --accent-border: var(--accent-font-dark);
+    --button-text: var(--accent-button-text);
+    --button-background: var(--accent-button-background);
+    --button-hover-text: var(--accent-button-hover-text);
+    --button-hover-background: var(--accent-button-hover-background);
   }
 }
 

diff --git a/src/nationalarchives/utilities/colour/colour-combinations.stories.js b/src/nationalarchives/utilities/colour/colour-combinations.stories.js
@@ -311,6 +311,11 @@ Dark.args = {
   theme: "tna-template--dark-theme",
 };
 
+// export const System = Template.bind({});
+// System.args = {
+//   theme: "tna-template--system-theme",
+// };
+
 export const HighContrast = Template.bind({});
 HighContrast.args = {
   theme: "tna-template--high-contrast-theme",

diff --git a/src/nationalarchives/utilities/lists/_index.scss b/src/nationalarchives/utilities/lists/_index.scss
@@ -85,15 +85,15 @@ ol {
     cursor: pointer;
   }
 
-  &:not(#{&}--plain) {
+  &:not(&--plain) {
     gap: spacing.space(0.5) spacing.space(1);
   }
 
   &--plain &__item {
     @extend %chip-plain;
   }
 
-  &:not(#{&}--plain) &__item {
+  &:not(&--plain) &__item {
     @extend %chip-accent;
   }
 

diff --git a/src/nationalarchives/utilities/typography/_index.scss b/src/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;
     }
   }