@nationalarchives/frontend 0.1.65 → 0.2.0

package/nationalarchives/tools/_colour.scss

@@ -146,13 +146,17 @@
 @mixin thick-keyline-error($direction: "") {
   @if $direction != "" {
     @include colour-border(
-      "form-error",
+      "form-error-border",
       borders.$thick-border-width,
       solid,
       $direction
     );
   } @else {
-    @include colour-border("form-error", borders.$thick-border-width, solid);
+    @include colour-border(
+      "form-error-border",
+      borders.$thick-border-width,
+      solid
+    );
   }
 }
 
@@ -166,17 +170,17 @@
   }
 }
 
-// Use light theme colours (except for "form-error")
-%light {
-  @include colour-css-vars("form-error");
+// Use light theme colours (except for "form-error-border")
+%always-light {
+  @include colour-css-vars("form-error-border");
 
   @media (prefers-contrast: more) {
-    @include colour-css-vars-high-contrast("form-error");
+    @include colour-css-vars-high-contrast("form-error-border");
   }
 }
 
-@mixin light {
-  @extend %light;
+@mixin always-light {
+  @extend %always-light;
 }
 
 %contrast {
@@ -257,6 +261,10 @@
   --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);
 
   @include colour-background("background");
 
@@ -311,39 +319,6 @@
   @extend %accent-light;
 }
 
-// Remove accent and contrast values (except for "form-error")
-%plain {
-  @include colour-css-vars("form-error");
-
-  @media (prefers-contrast: more) {
-    @include colour-css-vars-high-contrast("form-error");
-  }
-
-  .tna-template--system-theme & {
-    @media (prefers-color-scheme: dark) {
-      @include colour-css-vars-dark("form-error");
-    }
-
-    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
-      @include colour-css-vars-high-contrast-dark("form-error");
-    }
-  }
-
-  .tna-template--dark-theme & {
-    @include colour-css-vars-dark("form-error");
-
-    @media (prefers-contrast: more) {
-      @include colour-css-vars-high-contrast-dark("form-error");
-    }
-  }
-
-  @include colour-background("background");
-}
-
-@mixin plain {
-  @extend %plain;
-}
-
 %yellow-accent {
   --accent-background: #{colour.brand-colour("yellow")} !important;
   --accent-background-light: #{colour.brand-colour("cream")} !important;
@@ -357,8 +332,8 @@
   --accent-link-visited: #{colour.brand-colour("black")} !important;
   --accent-keyline: #{colour.brand-colour("black", 0.5)} !important;
   --accent-keyline-dark: #{colour.brand-colour("black", 0.8)} !important;
-  --button-accent-text: #{colour.brand-colour("white")} !important;
-  --button-accent-background: #{colour.brand-colour("brown")} !important;
+  --button-accented-text: #{colour.brand-colour("white")} !important;
+  --button-accented-background: #{colour.brand-colour("brown")} !important;
 }
 
 @mixin yellow-accent {
@@ -374,7 +349,7 @@
   --accent-link-visited: #{colour.brand-colour("white")} !important;
   --accent-keyline: #{colour.brand-colour("white", 0.5)} !important;
   --accent-keyline-dark: #{colour.brand-colour("white", 0.8)} !important;
-  --button-accent-text: #{colour.brand-colour("white")} !important;
+  --button-accented-text: #{colour.brand-colour("white")} !important;
 }
 
 %black-accent {
@@ -382,8 +357,8 @@
   --accent-background-light: #{colour.brand-colour("light-grey")} !important;
   --accent-border: #{colour.brand-colour("black")} !important;
   --accent-list-marker: #{colour.brand-colour("grey")} !important;
-  --button-accent-text: #{colour.brand-colour("black")} !important;
-  --button-accent-background: #{colour.brand-colour("grey")} !important;
+  --button-accented-text: #{colour.brand-colour("black")} !important;
+  --button-accented-background: #{colour.brand-colour("grey")} !important;
 }
 
 @mixin black-accent {
@@ -396,7 +371,7 @@
   --accent-background-light: #{colour.brand-colour("pastel-pink")} !important;
   --accent-border: #{colour.brand-colour("pink")} !important;
   --accent-list-marker: #{colour.brand-colour("pink")} !important;
-  --button-accent-background: #{colour.brand-colour("maroon")} !important;
+  --button-accented-background: #{colour.brand-colour("maroon")} !important;
 }
 
 @mixin pink-accent {
@@ -409,7 +384,7 @@
   --accent-background-light: #{colour.brand-colour("pastel-orange")} !important;
   --accent-border: #{colour.brand-colour("orange")} !important;
   --accent-list-marker: #{colour.brand-colour("orange")} !important;
-  --button-accent-background: #{colour.brand-colour("chestnut")} !important;
+  --button-accented-background: #{colour.brand-colour("chestnut")} !important;
 }
 
 @mixin orange-accent {
@@ -422,7 +397,7 @@
   --accent-background-light: #{colour.brand-colour("pastel-green")} !important;
   --accent-border: #{colour.brand-colour("green")} !important;
   --accent-list-marker: #{colour.brand-colour("green")} !important;
-  --button-accent-background: #{colour.brand-colour("forest")} !important;
+  --button-accented-background: #{colour.brand-colour("forest")} !important;
 }
 
 @mixin green-accent {
@@ -435,7 +410,7 @@
   --accent-background-light: #{colour.brand-colour("pastel-blue")} !important;
   --accent-border: #{colour.brand-colour("blue")} !important;
   --accent-list-marker: #{colour.brand-colour("blue")} !important;
-  --button-accent-background: #{colour.brand-colour("navy")} !important;
+  --button-accented-background: #{colour.brand-colour("navy")} !important;
 }
 
 @mixin blue-accent {

package/nationalarchives/utilities/_columns.scss

@@ -1,5 +1,5 @@
-@use "../tools/grid";
 @use "../tools/media";
+@use "../tools/grid";
 
 .tna-columns {
   column-gap: grid.gutter-width();

package/nationalarchives/utilities/_index.scss

@@ -5,6 +5,7 @@
 @use "debug";
 @use "forms";
 @use "global";
+@use "grid";
 @use "imports";
 @use "lists";
 @use "overrides";

package/nationalarchives/utilities/_reset.scss

@@ -25,17 +25,11 @@ canvas {
   display: block;
 }
 
-video,
-canvas {
-  width: 100%;
-}
-
 [hidden] {
   display: none !important;
 }
 
 hr {
-  border-width: 1px 0 0;
-  @include colour.colour-border("keyline");
-  border-style: solid;
+  @include colour.colour-border("keyline", 0, solid);
+  border-top-width: 1px;
 }

package/nationalarchives/utilities/{_colour.scss → colour/_index.scss}

@@ -1,7 +1,7 @@
-@use "../tools/colour";
+@use "../../tools/colour";
 
 .tna-template {
-  @include colour.light;
+  @include colour.always-light;
 
   @include colour.colour-background("background");
 

package/nationalarchives/utilities/{_forms.scss → forms/_index.scss}

@@ -1,8 +1,8 @@
-@use "../utilities/typography" as typographyUtilities;
-@use "../tools/colour";
-@use "../tools/media";
-@use "../tools/spacing";
-@use "../tools/typography";
+@use "../../utilities/typography" as typographyUtilities;
+@use "../../tools/colour";
+@use "../../tools/media";
+@use "../../tools/spacing";
+@use "../../tools/typography";
 
 button,
 input,
@@ -93,7 +93,7 @@ select {
   &__error-message {
     margin-top: 0;
 
-    @include colour.colour-font("form-error");
+    @include colour.colour-font("form-error-text");
     @include typography.main-font-weight-bold;
   }
 }

package/nationalarchives/utilities/grid/macro.njk

@@ -0,0 +1,3 @@
+{% macro tnaGrid(params) %}
+  {%- include "nationalarchives/utilities/grid/template.njk" -%}
+{% endmacro %}

package/nationalarchives/utilities/{_lists.scss → lists/_index.scss}

@@ -1,8 +1,14 @@
-@use "../tools/colour";
-@use "../tools/media";
-@use "../tools/spacing";
-@use "../tools/typography";
-@use "../utilities/typography" as typographyUtils;
+@use "../../tools/colour";
+@use "../../tools/media";
+@use "../../tools/spacing";
+@use "../../tools/typography";
+@use "../../utilities/typography" as typographyUtils;
+
+ul,
+ol {
+  margin: 0;
+  padding: 0;
+}
 
 .tna-ul {
   list-style-type: disc;
@@ -10,9 +16,9 @@
 
 .tna-ul,
 .tna-ol {
-  margin: spacing.space(1) 0 0;
+  margin-top: spacing.space(1);
 
-  padding: 0 0 0 spacing.space(2);
+  padding-left: spacing.space(2);
 
   &:first-child {
     margin-top: 0;
@@ -20,7 +26,10 @@
 
   &--plain {
     padding-left: 0;
+  }
 
+  &--plain,
+  &--no-list-style {
     list-style: none;
   }
 

package/nationalarchives/utilities/{_overrides.scss → overrides/_index.scss}

@@ -1,6 +1,6 @@
 @use "sass:map";
-@use "../tools/media";
-@use "../tools/spacing";
+@use "../../tools/media";
+@use "../../tools/spacing";
 
 @mixin hide-on($suffix) {
   .tna-\!--hide-on-#{$suffix} {

package/nationalarchives/utilities/{_tables.scss → tables/_index.scss}

@@ -1,10 +1,10 @@
 @use "sass:math";
 @use "sass:selector";
-@use "../tools/colour";
-@use "../tools/grid";
-@use "../tools/media";
-@use "../tools/spacing";
-@use "../tools/typography";
+@use "../../tools/colour";
+@use "../../tools/grid";
+@use "../../tools/media";
+@use "../../tools/spacing";
+@use "../../tools/typography";
 
 .tna-table {
   width: 100%;

package/nationalarchives/utilities/{_typography.scss → typography/_index.scss}

@@ -1,10 +1,10 @@
 @use "sass:math";
 @use "sass:selector";
-@use "../variables/typography" as typographyVars;
-@use "../tools/colour";
-@use "../tools/media";
-@use "../tools/spacing";
-@use "../tools/typography";
+@use "../../variables/typography" as typographyVars;
+@use "../../tools/colour";
+@use "../../tools/media";
+@use "../../tools/spacing";
+@use "../../tools/typography";
 
 .tna-template {
   @include colour.colour-font("font-base");

package/nationalarchives/variables/_colour.scss

@@ -65,7 +65,8 @@ $colour-palette-default: (
   "input-foreground": brand-colour("black"),
   "input-background": brand-colour("white"),
   "input-border": brand-colour("black"),
-  "form-error": #c00,
+  "form-error-border": #c20000,
+  "form-error-text": #c20000,
   "button-text": brand-colour("white"),
   "button-background": brand-colour("black"),
   "button-hover-text": brand-colour("black"),
@@ -95,8 +96,12 @@ $colour-palette-default: (
   "accent-link-visited": brand-colour("black"),
   "accent-keyline": brand-colour("black", 0.5),
   "accent-keyline-dark": brand-colour("black", 0.8),
-  "button-accent-text": brand-colour("black"),
-  "button-accent-background": brand-colour("grey"),
+  "accent-button-text": brand-colour("white"),
+  "accent-button-background": brand-colour("black"),
+  "accent-button-hover-text": brand-colour("black"),
+  "accent-button-hover-background": brand-colour("white"),
+  "button-accented-text": brand-colour("black"),
+  "button-accented-background": brand-colour("grey"),
 ) !default;
 
 /*
@@ -121,7 +126,8 @@ $colour-palette-dark: map.merge(
     "input-foreground": brand-colour("white"),
     "input-background": brand-colour("black"),
     "input-border": brand-colour("white"),
-    "form-error": #ff3d3d,
+    "form-error-border": #f00,
+    "form-error-text": #ff6b6b,
     "button-text": brand-colour("black"),
     "button-background": brand-colour("white"),
     "button-hover-text": brand-colour("white"),
@@ -169,7 +175,8 @@ $colour-palette-high-contrast-dark: map.merge(
     "font-light": brand-colour("white"),
     "icon-light": brand-colour("white", 0.75),
     "keyline": brand-colour("white"),
-    "form-error": #ff6161,
+    "form-error-border": #ff6b6b,
+    "form-error-text": #ff6b6b,
     "contrast-background": brand-colour("black"),
     "contrast-link": brand-colour("blue"),
     "contrast-link-visited": #a8f,

package/package.json

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