@nationalarchives/frontend 0.1.38 → 0.1.39

package/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js

@@ -343,7 +343,7 @@ const Template = ({ theme, accent }) => {
             <div class="tna-blockquote__quote">
               <p>A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.</p>
             </div>
-            <p class="tna-blockquote__author">Douglas Adams, Mostly Harmless</p>
+            <p class="tna-blockquote__citation">Douglas Adams, Mostly Harmless</p>
           </blockquote>
           <h2 class="tna-heading-m">
             <a href="#">Researching with The National Archives</a>

package/nationalarchives/stories/utilities/typography/typography.stories.js

@@ -64,7 +64,7 @@ const BlockquoteTemplate = ({
   <div class="tna-blockquote__quote">
     ${html}
   </div>
-  <p class="tna-blockquote__author">${author}</p>
+  <p class="tna-blockquote__citation">${author}</p>
 </blockquote>`;
 export const Blockquote = BlockquoteTemplate.bind({});
 Blockquote.args = {

package/nationalarchives/tools/_typography.scss

@@ -6,11 +6,6 @@
   font-size: #{math.div($fontSizePx, typography.$relative-1rem-px)}rem;
 }
 
-@mixin interacted-text-decoration {
-  text-decoration: underline;
-  text-decoration-thickness: typography.$interactive-text-decoration-thickness;
-}
-
 @mixin main-font-weight {
   font-weight: typography.$main-font-weight;
 }
@@ -19,9 +14,16 @@
   font-weight: typography.$main-font-weight-bold;
 }
 
-@mixin main-font {
+@mixin main-font($bold: false) {
   font-family: typography.$main-font-family;
-  @include main-font-weight;
+  @if $bold {
+    @include main-font-weight-bold;
+  } @else {
+    @include main-font-weight;
+  }
+  font-optical-sizing: auto;
+  font-style: normal;
+  font-variation-settings: "wdth" 100;
 }
 
 @mixin heading-font {
@@ -29,17 +31,15 @@
   font-weight: typography.$heading-font-weight;
 }
 
-@mixin detail-font-weight {
-  font-weight: typography.$detail-font-weight;
-}
-
-@mixin detail-font-weight-bold {
-  font-weight: typography.$detail-font-weight-bold;
-}
-
-@mixin detail-font {
+@mixin detail-font($bold: false) {
   font-family: typography.$detail-font-family;
-  @include detail-font-weight;
+  @if $bold {
+    font-weight: typography.$detail-font-weight-bold;
+  } @else {
+    font-weight: typography.$detail-font-weight;
+  }
+  font-optical-sizing: auto;
+  font-style: normal;
 }
 
 @mixin detail-font-small {
@@ -48,3 +48,8 @@
   text-transform: uppercase;
   line-height: #{math.div(typography.$relative-1rem-px, 14)};
 }
+
+@mixin interacted-text-decoration {
+  text-decoration: underline;
+  text-decoration-thickness: typography.$interactive-text-decoration-thickness;
+}

package/nationalarchives/utilities/_typography.scss

@@ -17,14 +17,6 @@
     // font-display: swap;
   }
 
-  // @font-face {
-  //   font-family: "Open Sans";
-  //   src: url("#{assets.$tna-font-path}/OpenSans-Italic.ttf");
-  //   font-weight: typographyVars.$main-font-weight;
-  //   font-style: italic;
-  //   // font-display: swap;
-  // }
-
   @font-face {
     font-family: "Open Sans";
     src: url("#{assets.$tna-font-path}/OpenSans-Bold.ttf");
@@ -49,7 +41,7 @@
     // font-display: swap;
   }
 } @else {
-  @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,#{typographyVars.$main-font-weight};0,#{typographyVars.$main-font-weight-bold};1,#{typographyVars.$main-font-weight}&family=Roboto+Mono:wght@#{typographyVars.$detail-font-weight};#{typographyVars.$detail-font-weight-bold}&display=swap"); /* stylelint-disable-line */
+  @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800&family=Roboto+Mono:wght@100..700&display=swap"); /* stylelint-disable-line */
 }
 
 .tna-template {
@@ -394,7 +386,7 @@ small {
     font-weight: 700;
   }
 
-  &__author {
+  &__citation {
     @include typography.relative-font-size(16);
 
     .tna-blockquote & {
@@ -403,6 +395,7 @@ small {
 
     &::before {
       content: "\2014" " ";
+      content: "\2014" " " / "";
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.38",
+  "version": "0.1.39",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",
@@ -28,8 +28,9 @@
   "main": "nationalarchives/all.js",
   "exports": {
     ".": {
-      "sass": "./nationalarchives/all.scss",
-      "require": "./nationalarchives/all.js"
+      "css": "./nationalarchives/all.css",
+      "require": "./nationalarchives/all.js",
+      "sass": "./nationalarchives/all.scss"
     },
     "./nationalarchives/": "./nationalarchives/"
   },