@nationalarchives/frontend 0.1.15-prerelease → 0.1.16-prerelease

package/nationalarchives/utilities/_overrides.scss

@@ -1,4 +1,5 @@
 @use "../variables/spacing";
+@use "../tools/media";
 
 @each $property in margin, padding {
   @each $direction in top, bottom {
@@ -6,12 +7,24 @@
     .tna-\!--no-#{$property}-vertical {
       #{$property}-#{$direction}: 0 !important;
     }
+  }
+}
 
-    @each $size, $amount in spacing.$spacing {
-      .tna-\!--#{$property}-#{$direction}-#{$size},
-      .tna-\!--#{$property}-vertical-#{$size} {
-        #{$property}-#{$direction}: #{$amount}rem !important;
+@mixin overrides($spacing) {
+  @each $property in margin, padding {
+    @each $direction in top, bottom {
+      @each $size, $amount in $spacing {
+        .tna-\!--#{$property}-#{$direction}-#{$size},
+        .tna-\!--#{$property}-vertical-#{$size} {
+          #{$property}-#{$direction}: #{$amount}rem !important;
+        }
       }
     }
   }
 }
+
+@include overrides(spacing.$spacing);
+
+@include media.on-mobile {
+  @include overrides(spacing.$spacing-mobile);
+}

package/nationalarchives/utilities/_typography.scss

@@ -198,20 +198,19 @@ a {
   margin: 0 0 2rem;
   padding: 1rem 1rem 1rem 2rem;
 
-  border-left: 0.35rem solid;
-  @include colour.colour-border("keyline");
+  @include colour.colour-border("keyline", 0.35rem, solid, left);
 
-  quotes: "“" "”" "‘" "’";
+  // quotes: "“" "”" "‘" "’";
 
   &:last-child {
     margin-bottom: 0;
   }
 
-  &::before {
-    float: left;
+  // &::before {
+  //   float: left;
 
-    content: open-quote;
-  }
+  //   content: open-quote;
+  // }
 
   &__quote {
     font-weight: 700;

package/nationalarchives/variables/_colour.scss

@@ -1,80 +1,70 @@
 @use "sass:map";
 @use "../features";
 
-$-tna-black: #000;
-$-tna-grey: #8c9694;
-$-tna-light-grey: #d9d9d6;
-$-tna-white: #fff;
+$colour-palette-brand: (
+  "black": #000,
+  "grey": #8c9694,
+  "light-grey": #d9d9d6,
+  "white": #fff,
 
-$-tna-yellow: #fc0;
-$-tna-pink: #fe1d57;
-$-tna-orange: #fd3f03;
-$-tna-green: #86bc25;
-$-tna-blue: #00b0ff;
+  "yellow": #fc0,
+  "pink": #fe1d57,
+  "orange": #fd3f03,
+  "green": #86bc25,
+  "blue": #00b0ff,
 
-$-tna-brown: #654e37;
-$-tna-maroon: #9c193a;
-$-tna-chestnut: #8f3415;
-$-tna-forest: #00623b;
-$-tna-navy: #004c7e;
+  "brown": #654e37,
+  "maroon": #9c193a,
+  "chestnut": #8f3415,
+  "forest": #00623b,
+  "navy": #004c7e,
 
-$-tna-cream: #f9f7e2;
-$-tna-pastel-pink: #fad3d4;
-$-tna-pastel-orange: #f9e1bc;
-$-tna-pastel-green: #dde5d5;
-$-tna-pastel-blue: #d4e5ef;
+  "cream": #f9f7e2,
+  "pastel-pink": #fad3d4,
+  "pastel-orange": #f9e1bc,
+  "pastel-green": #dde5d5,
+  "pastel-blue": #d4e5ef,
+);
 
-$-dark-grey: #26262a;
-$-base-font: #343338;
+$dark-grey: #26262a;
+$base-font: #343338;
 
-$-accent-colour-default: $-tna-yellow;
+$-accent-colour-default: map.get($colour-palette-brand, "yellow");
 $-accent-colour-default-dark: $-accent-colour-default;
 
-// TODO: Scoped variables should not be used directly outside of this file
-$tna-black: $-tna-black;
-$dark-grey: $-dark-grey;
-$tna-yellow: $-tna-yellow;
-$tna-pink: $-tna-pink;
-$tna-orange: $-tna-orange;
-$tna-green: $-tna-green;
-$tna-forest: $-tna-forest;
-$tna-blue: $-tna-blue;
-$tna-cream: $-tna-cream;
-$tna-white: $-tna-white;
-
 /*
 =========================================
-LIGHT/DEFAULT THEME
+LIGHT THEME (DEFAULT)
 =========================================
 */
 $colour-palette-default: (
-  "page-background": $-tna-white,
-  "font-base": $-base-font,
-  "font-dark": $-tna-black,
-  "font-light": rgba($-base-font, 0.7),
+  "page-background": map.get($colour-palette-brand, "white"),
+  "font-base": $base-font,
+  "font-dark": map.get($colour-palette-brand, "black"),
+  "font-light": rgba($base-font, 0.7),
   "link": #1d70ab,
   "link-visited": #4c2c92,
   // "focus-outline": #004c7e, // Old value
-  "focus-outline": $-tna-blue,
+  "focus-outline": map.get($colour-palette-brand, "blue"),
   "keyline": #ccc,
-  "keyline-dark": $-dark-grey,
+  "keyline-dark": $dark-grey,
   "accent-default": $-accent-colour-default,
-  "button-primary-text": $-tna-white,
-  "button-primary-background": $-tna-black,
-  "button-primary-hover-text": $-tna-black,
-  "button-primary-hover-background": $-tna-white,
-  "button-secondary-text": $-tna-black,
-  "button-secondary-background": $-tna-yellow,
-  "button-secondary-hover-text": $-tna-black,
-  "button-secondary-hover-background": $-tna-white,
-  "contrast-background": $-dark-grey,
-  "contrast-font-base": $-tna-white,
-  "contrast-font-dark": $-tna-white,
-  "contrast-font-light": rgba($-tna-white, 0.7),
-  "contrast-link": $-tna-white,
+  "button-primary-text": map.get($colour-palette-brand, "white"),
+  "button-primary-background": map.get($colour-palette-brand, "black"),
+  "button-primary-hover-text": map.get($colour-palette-brand, "black"),
+  "button-primary-hover-background": map.get($colour-palette-brand, "white"),
+  "button-secondary-text": map.get($colour-palette-brand, "black"),
+  "button-secondary-background": map.get($colour-palette-brand, "yellow"),
+  "button-secondary-hover-text": map.get($colour-palette-brand, "black"),
+  "button-secondary-hover-background": map.get($colour-palette-brand, "white"),
+  "contrast-background": $dark-grey,
+  "contrast-font-base": map.get($colour-palette-brand, "white"),
+  "contrast-font-dark": map.get($colour-palette-brand, "white"),
+  "contrast-font-light": rgba(map.get($colour-palette-brand, "white"), 0.7),
+  "contrast-link": map.get($colour-palette-brand, "blue"),
   "contrast-link-visited": #b9f,
-  "contrast-keyline": rgba($-tna-white, 0.5),
-  "contrast-keyline-dark": rgba($-tna-white, 0.8),
+  "contrast-keyline": rgba(map.get($colour-palette-brand, "white"), 0.5),
+  "contrast-keyline-dark": rgba(map.get($colour-palette-brand, "white"), 0.8),
 );
 
 /*
@@ -86,13 +76,13 @@ $colour-palette-dark: map.merge(
   $colour-palette-default,
   (
     "page-background": #222,
-    "font-base": rgba($-tna-white, 0.95),
-    "font-dark": $-tna-white,
-    "font-light": rgba($-tna-white, 0.5),
-    "link": $-tna-blue,
+    "font-base": rgba(map.get($colour-palette-brand, "white"), 0.95),
+    "font-dark": map.get($colour-palette-brand, "white"),
+    "font-light": rgba(map.get($colour-palette-brand, "white"), 0.5),
+    "link": map.get($colour-palette-brand, "blue"),
     "link-visited": map.get($colour-palette-default, "contrast-link-visited"),
-    "keyline": rgba($-tna-white, 0.25),
-    "keyline-dark": $-tna-white,
+    "keyline": rgba(map.get($colour-palette-brand, "white"), 0.25),
+    "keyline-dark": map.get($colour-palette-brand, "white"),
     "accent-default": $-accent-colour-default-dark,
     "contrast-background": #111,
     "contrast-link-visited":
@@ -108,21 +98,21 @@ LIGHT, HIGH_CONTRAST THEME
 $colour-palette-high-contrast: map.merge(
   $colour-palette-default,
   (
-    "font-base": $-tna-black,
-    "font-light": $-tna-black,
-    "link": $-tna-black,
-    "link-visited": $-tna-black,
-    "focus-outline": $-tna-orange,
-    "keyline": $-tna-black,
-    "keyline-dark": $-tna-black,
-    "contrast-background": $-tna-white,
-    "contrast-font-base": $-tna-black,
-    "contrast-font-dark": $-tna-black,
-    "contrast-font-light": $-tna-black,
-    "contrast-link": $-tna-black,
-    "contrast-link-visited": $-tna-black,
-    "contrast-keyline": $-tna-black,
-    "contrast-keyline-dark": $-tna-black,
+    "font-base": map.get($colour-palette-brand, "black"),
+    "font-light": map.get($colour-palette-brand, "black"),
+    "link": map.get($colour-palette-brand, "navy"),
+    "link-visited": map.get($colour-palette-brand, "black"),
+    "focus-outline": map.get($colour-palette-brand, "orange"),
+    "keyline": map.get($colour-palette-brand, "black"),
+    "keyline-dark": map.get($colour-palette-brand, "black"),
+    "contrast-background": map.get($colour-palette-brand, "white"),
+    "contrast-font-base": map.get($colour-palette-brand, "black"),
+    "contrast-font-dark": map.get($colour-palette-brand, "black"),
+    "contrast-font-light": map.get($colour-palette-brand, "black"),
+    "contrast-link": map.get($colour-palette-brand, "navy"),
+    "contrast-link-visited": map.get($colour-palette-brand, "black"),
+    "contrast-keyline": map.get($colour-palette-brand, "black"),
+    "contrast-keyline-dark": map.get($colour-palette-brand, "black"),
   )
 );
 
@@ -134,12 +124,16 @@ DARK, HIGH_CONTRAST THEME
 $colour-palette-high-contrast-dark: map.merge(
   $colour-palette-dark,
   (
-    "page-background": $tna-black,
-    "font-base": $-tna-white,
-    "font-light": $-tna-white,
-    "link": $-tna-white,
-    "link-visited": $-tna-white,
-    "keyline": $-tna-white,
-    "contrast-background": $tna-black,
+    "page-background": map.get($colour-palette-brand, "black"),
+    "font-base": map.get($colour-palette-brand, "white"),
+    "font-light": map.get($colour-palette-brand, "white"),
+    "link": map.get($colour-palette-brand, "white"),
+    "link-visited": map.get($colour-palette-brand, "white"),
+    "keyline": map.get($colour-palette-brand, "white"),
+    "button-primary-text": map.get($colour-palette-brand, "black"),
+    "button-primary-background": map.get($colour-palette-brand, "white"),
+    "button-primary-hover-text": map.get($colour-palette-brand, "white"),
+    "button-primary-hover-background": map.get($colour-palette-brand, "black"),
+    "contrast-background": map.get($colour-palette-brand, "black"),
   )
 );

package/nationalarchives/variables/_grid.scss

@@ -1,7 +1,7 @@
 $largest-container-width: 75.25rem !default;
 
 $gutter-width: 2rem !default;
-$gutter-width-mobile: 0.75rem !default;
+$gutter-width-mobile: 1rem !default;
 
 $column-count: 12 !default;
 $column-count-medium: 6 !default;

package/nationalarchives/variables/_index.scss

@@ -1,4 +1,3 @@
-@use "assets";
 @use "colour";
 @use "grid";
 @use "media";

package/nationalarchives/variables/_media.scss

@@ -1,40 +1,40 @@
 @use "sass:math";
 @use "./typography";
 
-$largest-medium-device-px: 1024 !default;
-$largest-small-device-px: 768 !default;
-$largest-tiny-device-px: 480 !default;
+$-largest-medium-device-px: 1024 !default;
+$-largest-small-device-px: 768 !default;
+$-largest-tiny-device-px: 480 !default;
 
-$smallest-large-device-em: #{math.div(
-    $largest-medium-device-px + 1,
+$-smallest-large-device-em: #{math.div(
+    $-largest-medium-device-px + 1,
     typography.$base-font-size-px
   )}em;
-$largest-medium-device-em: #{math.div(
-    $largest-medium-device-px,
+$-largest-medium-device-em: #{math.div(
+    $-largest-medium-device-px,
     typography.$base-font-size-px
   )}em;
-$smallest-medium-device-em: #{math.div(
-    $largest-small-device-px + 1,
+$-smallest-medium-device-em: #{math.div(
+    $-largest-small-device-px + 1,
     typography.$base-font-size-px
   )}em;
-$largest-small-device-em: #{math.div(
-    $largest-small-device-px,
+$-largest-small-device-em: #{math.div(
+    $-largest-small-device-px,
     typography.$base-font-size-px
   )}em;
-$smallest-small-device-em: #{math.div(
-    $largest-tiny-device-px + 1,
+$-smallest-small-device-em: #{math.div(
+    $-largest-tiny-device-px + 1,
     typography.$base-font-size-px
   )}em;
-$largest-tiny-device-em: #{math.div(
-    $largest-tiny-device-px,
+$-largest-tiny-device-em: #{math.div(
+    $-largest-tiny-device-px,
     typography.$base-font-size-px
   )}em;
 
-$media-large: "(min-width: #{$smallest-large-device-em})";
-$media-lt-large: "(max-width: #{$largest-medium-device-em})";
-$media-medium: "(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})";
-$media-gt-mobile: "(min-width: #{$smallest-medium-device-em})";
-$media-mobile: "(max-width: #{$largest-small-device-em})";
-$media-small: "(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})";
-$media-gt-tiny: "(min-width: #{$smallest-small-device-em})";
-$media-tiny: "(max-width: #{$largest-tiny-device-em})";
+$media-large: "(min-width: #{$-smallest-large-device-em})";
+$media-lt-large: "(max-width: #{$-largest-medium-device-em})";
+$media-medium: "(min-width: #{$-smallest-medium-device-em}) and (max-width: #{$-largest-medium-device-em})";
+$media-gt-mobile: "(min-width: #{$-smallest-medium-device-em})";
+$media-mobile: "(max-width: #{$-largest-small-device-em})";
+$media-small: "(min-width: #{$-smallest-small-device-em}) and (max-width: #{$-largest-small-device-em})";
+$media-gt-tiny: "(min-width: #{$-smallest-small-device-em})";
+$media-tiny: "(max-width: #{$-largest-tiny-device-em})";

package/nationalarchives/variables/_spacing.scss

@@ -1,7 +1,15 @@
 $spacing: (
-  // "xs": 0.5,
+  "xs": 0.5,
   "s": 1,
   "m": 2,
   "l": 3,
-  "xl": 6
+  "xl": 6,
+);
+
+$spacing-mobile: (
+  "xs": 0.5,
+  "s": 0.75,
+  "m": 1.5,
+  "l": 2,
+  "xl": 3,
 );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.15-prerelease",
+  "version": "0.1.16-prerelease",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",
@@ -8,7 +8,7 @@
     "test": "node tasks/test-fixtures.js && test-storybook --verbose --stories-json",
     "lint": "prettier --check '{src,.storybook,tasks}/**/*.{js,mjs,scss,json,html}' && stylelint 'src/**/*.scss' && eslint 'src/**/*.mjs'",
     "lint:fix": "prettier --write '{src,.storybook,tasks}/**/*.{js,mjs,scss,json,html}' && stylelint --fix 'src/**/*.scss' && eslint --fix 'src/**/*.mjs'",
-    "package:sass": "sass --style=compressed --quiet-deps src/nationalarchives/all.scss package/nationalarchives/all.css",
+    "package:sass": "sass --style=compressed --embed-sources src/nationalarchives/all.scss package/nationalarchives/all.css",
     "package:scripts": "webpack"
   },
   "repository": {

package/nationalarchives/tools/_assets.scss

@@ -1,5 +0,0 @@
-@use "../variables/assets";
-
-@function tna-asset-url($asset) {
-  @return #{assets.$tna-assets-path}/#{$asset};
-}

package/nationalarchives/variables/_assets.scss

@@ -1 +0,0 @@
-$tna-assets-path: "/assets" !default;