@nationalarchives/frontend 0.7.1 → 0.8.0

package/nationalarchives/tools/_colour.scss

@@ -210,8 +210,6 @@
   --button-background: var(--contrast-button-background);
   --button-hover-text: var(--contrast-button-hover-text);
   --button-hover-background: var(--contrast-button-hover-background);
-  --accent-list-marker: var(--accent-border);
-  // --accent-list-marker: var(--font-base);
 
   @include colour-background("background");
 
@@ -237,8 +235,6 @@
     --button-background: var(--contrast-button-background);
     --button-hover-text: var(--contrast-button-hover-text);
     --button-hover-background: var(--contrast-button-hover-background);
-    --accent-list-marker: var(--accent-border);
-    // --accent-list-marker: var(--font-base);
 
     @include colour-background("background");
 
@@ -272,7 +268,6 @@
   --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);
@@ -309,7 +304,6 @@
       colour.$colour-palette-default,
       "button-hover-background"
     )};
-  --accent-list-marker: var(--font-base);
   --accent-border: var(--accent-background);
 
   @include colour-background("background");
@@ -329,7 +323,6 @@
       --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);
@@ -351,7 +344,6 @@
     --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);
@@ -368,7 +360,6 @@
   --accent-background: #{colour.brand-colour("yellow")} !important;
   --accent-background-light: #{colour.brand-colour("cream")} !important;
   --accent-border: #{colour.brand-colour("yellow")} !important;
-  // --accent-list-marker: #{colour.brand-colour("brown")} !important;
   --accent-font-base: #{colour.brand-colour("black")} !important;
   --accent-font-dark: #{colour.brand-colour("black")} !important;
   --accent-font-light: #{colour.brand-colour("black", 0.7)} !important;
@@ -401,7 +392,6 @@
   --accent-background: #{colour.brand-colour("black")} !important;
   --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-accented-text: #{colour.brand-colour("black")} !important;
   --button-accented-background: #{colour.brand-colour("grey")} !important;
 }
@@ -415,7 +405,6 @@
   --accent-background: #{colour.brand-colour("maroon")} !important;
   --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-accented-background: #{colour.brand-colour("maroon")} !important;
 }
 
@@ -428,7 +417,6 @@
   --accent-background: #{colour.brand-colour("chestnut")} !important;
   --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-accented-background: #{colour.brand-colour("chestnut")} !important;
 }
 
@@ -441,7 +429,6 @@
   --accent-background: #{colour.brand-colour("forest")} !important;
   --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-accented-background: #{colour.brand-colour("forest")} !important;
 }
 
@@ -454,7 +441,6 @@
   --accent-background: #{colour.brand-colour("navy")} !important;
   --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-accented-background: #{colour.brand-colour("navy")} !important;
 }
 

package/nationalarchives/utilities/lists/_index.scss

@@ -39,8 +39,12 @@ ol {
 
   > li {
     &::marker {
-      @include colour.colour-font("accent-list-marker");
-      @include typography.main-font-weight-bold;
+      @include colour.colour-font("font-light");
+      @include typography.main-font-weight-medium;
+
+      @include colour.on-high-contrast {
+        @include colour.colour-font("font-dark");
+      }
     }
   }
 
@@ -56,7 +60,6 @@ ol {
   &--dashed {
     > li::marker {
       content: "—  ";
-      @include colour.colour-font("font-light");
       @include typography.main-font-weight;
     }
   }
@@ -142,6 +145,32 @@ ol {
       background: transparent !important;
     }
   }
+
+  @include colour.on-high-contrast-and-forced-colours {
+    dd {
+      border-top: none !important;
+    }
+
+    &.tna-dl--plain {
+      dt {
+        padding-top: spacing.space(0.5) !important;
+      }
+    }
+
+    &.tna-dl--icon-padding.tna-dl--plain {
+      dt {
+        .fa-solid {
+          margin-top: spacing.space(0.5) !important;
+        }
+      }
+    }
+
+    &.tna-dl--stacked:not(.tna-dl--plain) {
+      dt {
+        padding-bottom: 0 !important;
+      }
+    }
+  }
 }
 
 .tna-dl {
@@ -274,6 +303,13 @@ ol {
 
       @include colour.colour-border("keyline-dark", 1px, solid, top);
     }
+
+    &--plain {
+      dt,
+      dd {
+        padding-top: spacing.space(0.5);
+      }
+    }
   }
 }
 

package/nationalarchives/variables/_colour.scss

@@ -84,7 +84,6 @@ $colour-palette-default: (
   "accent-background": #afb6b5,
   "accent-background-light": brand-colour("light-grey"),
   "accent-border": brand-colour("grey"),
-  "accent-list-marker": brand-colour("black", 0.58),
   "accent-font-base": brand-colour("black"),
   "accent-font-dark": brand-colour("black"),
   "accent-font-light": brand-colour("black", 0.7),
@@ -131,7 +130,6 @@ $colour-palette-dark: map.merge(
     "button-hover-background": brand-colour("black"),
     "contrast-background": #101112,
     "accent-border": brand-colour("white"),
-    "accent-list-marker": brand-colour("white", 0.51),
   )
 ) !default;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",
@@ -9,7 +9,7 @@
     "build:package": "./tasks/build-package.sh",
     "compile:sass": "sass --style=compressed --embed-sources src/nationalarchives:package/nationalarchives",
     "compile:scripts": "webpack",
-    "lint:fix": "prettier --write '{src,.storybook,tasks,.}/**/*.{js,mjs,scss,json,html}' && stylelint --fix 'strict' 'src/**/*.scss' && eslint --fix 'src/**/*.{js,mjs}'",
+    "lint:fix": "prettier --write '{src,.storybook,tasks,.}/**/*.{js,mjs,scss,json,html}' && stylelint --fix 'src/**/*.scss' && eslint --fix 'src/**/*.{js,mjs}'",
     "test:all": "npm run test:lint && npm run test:unit && npm run test:html && npm run test:fixtures && npm run test:storybook && npm run build:package && npm run test:package",
     "test:fixtures": "node tasks/test-fixtures.js",
     "test:html": "node tasks/generate-fixture-html.js && html-validate fixtures-html",
@@ -67,7 +67,7 @@
     "eslint": "^8.57.1",
     "eslint-plugin-storybook": "^0.11.1",
     "glob": "^11.0.0",
-    "html-validate": "^8.24.1",
+    "html-validate": "^9.1.3",
     "jest-environment-jsdom": "^29.7.0",
     "mdx-mermaid": "^2.0.1",
     "node-self": "^1.0.2",