Add all colour combinations

nationalarchives · Nov 21, 2023 · c609bf3 · c609bf3
1 parent 4826626
commit c609bf3
Show file tree

Hide file tree

Showing 5 changed files with 179 additions and 29 deletions.
diff --git a/.storybook/storybook.scss b/.storybook/storybook.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @use "../src/nationalarchives/tools/colour";
 @use "../src/nationalarchives/tools/media";
 
@@ -145,3 +147,58 @@
     // @include colour.colour-border("keyline", 1px, solid, top);
   }
 }
+
+.tna-colour-contrast-demo {
+  display: table;
+
+  border-top: rgb(0 0 0/0.25) 1px solid;
+  border-left: rgb(0 0 0/0.25) 1px solid;
+
+  &__header {
+    display: table-header-group;
+  }
+
+  &__block {
+    width: #{math.div(100%, 6)};
+    padding: 1rem;
+
+    display: table-cell;
+
+    border-right: rgb(0 0 0/0.25) 1px solid;
+    border-bottom: rgb(0 0 0/0.25) 1px solid;
+  }
+
+  &__examples {
+    display: table-row-group;
+  }
+
+  &__theme-accent {
+    display: table-row;
+  }
+
+  &__example {
+    display: table-cell;
+
+    border-right: rgb(0 0 0/0.25) 1px solid;
+    border-bottom: rgb(0 0 0/0.25) 1px solid;
+
+    &-content {
+      height: 100%;
+      padding: 1rem;
+    }
+  }
+
+  &__link {
+    &--visited {
+      @include colour.colour-font("link-visited", true);
+    }
+  }
+
+  .tna-template {
+    min-width: 15.25rem;
+  }
+
+  .tna-chip {
+    margin: 1rem 0;
+  }
+}
diff --git a/src/nationalarchives/components/gallery/gallery.stories.js b/src/nationalarchives/components/gallery/gallery.stories.js
@@ -62,14 +62,14 @@ Standard.args = {
               },
             ]
           : index === 1
-          ? [
-              {
-                id: "tab-1",
-                title: "Transcript",
-                body: "<p>TEST TRANSCRIPT</p>",
-              },
-            ]
-          : null,
+            ? [
+                {
+                  id: "tab-1",
+                  title: "Transcript",
+                  body: "<p>TEST TRANSCRIPT</p>",
+                },
+              ]
+            : null,
     })),
 
   classes: "tna-gallery--demo",

diff --git a/src/nationalarchives/stories/utilities/colour-schemes/colour-combinations.stories.js b/src/nationalarchives/stories/utilities/colour-schemes/colour-combinations.stories.js
@@ -0,0 +1,94 @@
+import Button from "../../../components/button/template.njk";
+
+export default {
+  title: "Utilities/Colour combinations",
+};
+
+const Template = () => {
+  const themes = [
+    "tna-template--light-theme",
+    "tna-template--dark-theme",
+    "tna-template--light-theme tna-template--high-contrast-theme",
+    "tna-template--dark-theme tna-template--high-contrast-theme",
+  ];
+
+  const accents = [
+    "",
+    "tna-template--black-accent",
+    "tna-template--yellow-accent",
+    "tna-template--pink-accent",
+    "tna-template--orange-accent",
+    "tna-template--green-accent",
+    "tna-template--blue-accent",
+  ];
+
+  const blocks = [
+    "",
+    "tna-background-tint",
+    "tna-background-contrast",
+    "tna-background-accent",
+    "tna-background-accent-light",
+  ];
+
+  return `<div class="tna-colour-contrast-demo">
+  <div class="tna-colour-contrast-demo__header">
+    <div class="tna-colour-contrast-demo__block">
+      Blocks
+    </div>
+    ${blocks.reduce(
+      (blockOutput, block) =>
+        `${blockOutput}<div class="tna-colour-contrast-demo__block">
+      ${block || "Base"}
+    </div>`,
+      "",
+    )}
+  </div>
+  <div class="tna-colour-contrast-demo__examples">
+  ${themes.reduce(
+    (themeOutput, theme) =>
+      `${themeOutput}${accents.reduce(
+        (
+          accentOutput,
+          accent,
+        ) => `${accentOutput}<div class="tna-colour-contrast-demo__theme-accent">
+    <div class="tna-colour-contrast-demo__example">
+      ${theme.replace(/tna-template--/g, "").replace(/-theme/g, "")} / ${accent
+        .replace(/tna-template--/g, "")
+        .replace(/-accent/g, "")}
+    </div>
+    ${blocks.reduce(
+      (blockOutput, block) =>
+        `${blockOutput}<div class="tna-colour-contrast-demo__example tna-template ${theme} ${accent}">
+      <div class="tna-template__body">
+        <div class="tna-colour-contrast-demo__example-content ${block}">
+          <p>Text</p>
+          <p><a href="#">Link</a></p>
+          <p><a href="#" class="tna-colour-contrast-demo__link--visited">Link (visited)</a></p>
+          <span class="tna-chip">Chip</span>
+          ${Button({
+            params: {
+              text: "Button",
+            },
+          })}
+          ${Button({
+            params: {
+              text: "Button",
+              accent: true,
+            },
+          })}
+        </div>
+      </div>
+    </div>`,
+      "",
+    )}
+  </div>`,
+        "",
+      )}`,
+    "",
+  )}
+  </div>
+</div>`;
+};
+
+export const All = Template.bind({});
+All.args = {};
diff --git a/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js b/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js
@@ -64,28 +64,28 @@ const Template = ({ theme, accent }) => {
     theme === "system"
       ? "tna-template--system-theme"
       : theme === "light"
-      ? "tna-template--light-theme"
-      : theme === "dark"
-      ? "tna-template--dark-theme"
-      : theme === "light high-contrast"
-      ? "tna-template--light-theme tna-template--high-contrast-theme"
-      : theme === "dark high-contrast"
-      ? "tna-template--dark-theme tna-template--high-contrast-theme"
-      : ""
+        ? "tna-template--light-theme"
+        : theme === "dark"
+          ? "tna-template--dark-theme"
+          : theme === "light high-contrast"
+            ? "tna-template--light-theme tna-template--high-contrast-theme"
+            : theme === "dark high-contrast"
+              ? "tna-template--dark-theme tna-template--high-contrast-theme"
+              : ""
   } ${
     accent === "black"
       ? "tna-template--black-accent"
       : accent === "yellow"
-      ? "tna-template--yellow-accent"
-      : accent === "pink"
-      ? "tna-template--pink-accent"
-      : accent === "orange"
-      ? "tna-template--orange-accent"
-      : accent === "green"
-      ? "tna-template--green-accent"
-      : accent === "blue"
-      ? "tna-template--blue-accent"
-      : ""
+        ? "tna-template--yellow-accent"
+        : accent === "pink"
+          ? "tna-template--pink-accent"
+          : accent === "orange"
+            ? "tna-template--orange-accent"
+            : accent === "green"
+              ? "tna-template--green-accent"
+              : accent === "blue"
+                ? "tna-template--blue-accent"
+                : ""
   }">
   <div class="tna-template__body tna-template__body--padded">
     <!--

diff --git a/src/nationalarchives/variables/_colour.scss b/src/nationalarchives/variables/_colour.scss
@@ -118,8 +118,7 @@ $colour-palette-dark: map.merge(
     "contrast-background": #111,
     "contrast-link-visited":
       map.get($colour-palette-default, "contrast-link-visited"),
-    // --accent-background-light is the same as --contrast-background on dark themes
-    "accent-background-light": brand-colour("grey"),
+    "accent-background-light": brand-colour("light-grey"),
   )
 ) !default;
 
@@ -168,7 +167,7 @@ $colour-palette-high-contrast-dark: map.merge(
     "font-light": brand-colour("white"),
     "icon-light": brand-colour("white", 0.75),
     "link": #69f,
-    "link-visited": #a6c,
+    "link-visited": #b9f,
     "keyline": brand-colour("white"),
     "contrast-background": brand-colour("black"),
   )