@nationalarchives/frontend 0.1.51 → 0.1.52

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/nationalarchives/all.css +1 -1
  2. package/nationalarchives/all.css.map +1 -1
  3. package/nationalarchives/components/breadcrumbs/breadcrumbs.css +1 -1
  4. package/nationalarchives/components/breadcrumbs/breadcrumbs.css.map +1 -1
  5. package/nationalarchives/components/button/button.css +1 -1
  6. package/nationalarchives/components/button/button.css.map +1 -1
  7. package/nationalarchives/components/card/card.css +1 -1
  8. package/nationalarchives/components/card/card.css.map +1 -1
  9. package/nationalarchives/components/checkboxes/checkboxes.css +1 -1
  10. package/nationalarchives/components/checkboxes/checkboxes.css.map +1 -1
  11. package/nationalarchives/components/compound-filters/compound-filters.css.map +1 -1
  12. package/nationalarchives/components/cookie-banner/cookie-banner.css +1 -1
  13. package/nationalarchives/components/cookie-banner/cookie-banner.css.map +1 -1
  14. package/nationalarchives/components/date-input/date-input.css +1 -1
  15. package/nationalarchives/components/date-input/date-input.css.map +1 -1
  16. package/nationalarchives/components/date-search/date-search.css +1 -1
  17. package/nationalarchives/components/date-search/date-search.css.map +1 -1
  18. package/nationalarchives/components/error-summary/error-summary.css +1 -1
  19. package/nationalarchives/components/error-summary/error-summary.css.map +1 -1
  20. package/nationalarchives/components/featured-records/featured-records.css.map +1 -1
  21. package/nationalarchives/components/footer/footer.css +1 -1
  22. package/nationalarchives/components/footer/footer.css.map +1 -1
  23. package/nationalarchives/components/gallery/gallery.css.map +1 -1
  24. package/nationalarchives/components/global-header/README.md +1 -1
  25. package/nationalarchives/components/global-header/global-header.css +1 -1
  26. package/nationalarchives/components/global-header/global-header.css.map +1 -1
  27. package/nationalarchives/components/global-header/global-header.scss +13 -19
  28. package/nationalarchives/components/header/header.css +1 -1
  29. package/nationalarchives/components/header/header.css.map +1 -1
  30. package/nationalarchives/components/header/header.scss +13 -32
  31. package/nationalarchives/components/hero/hero.css +1 -1
  32. package/nationalarchives/components/hero/hero.css.map +1 -1
  33. package/nationalarchives/components/hero/hero.scss +2 -1
  34. package/nationalarchives/components/index-grid/index-grid.css +1 -1
  35. package/nationalarchives/components/index-grid/index-grid.css.map +1 -1
  36. package/nationalarchives/components/phase-banner/phase-banner.css.map +1 -1
  37. package/nationalarchives/components/picture/picture.css +1 -1
  38. package/nationalarchives/components/picture/picture.css.map +1 -1
  39. package/nationalarchives/components/quick-filters/quick-filters.css.map +1 -1
  40. package/nationalarchives/components/radios/radios.css +1 -1
  41. package/nationalarchives/components/radios/radios.css.map +1 -1
  42. package/nationalarchives/components/search-field/search-field.css +1 -1
  43. package/nationalarchives/components/search-field/search-field.css.map +1 -1
  44. package/nationalarchives/components/search-field/search-field.scss +24 -7
  45. package/nationalarchives/components/search-filters/search-filters.css.map +1 -1
  46. package/nationalarchives/components/select/select.css +1 -1
  47. package/nationalarchives/components/select/select.css.map +1 -1
  48. package/nationalarchives/components/skip-link/skip-link.css.map +1 -1
  49. package/nationalarchives/components/tabs/tabs.css +1 -1
  50. package/nationalarchives/components/tabs/tabs.css.map +1 -1
  51. package/nationalarchives/components/text-input/text-input.css +1 -1
  52. package/nationalarchives/components/text-input/text-input.css.map +1 -1
  53. package/nationalarchives/components/textarea/textarea.css +1 -1
  54. package/nationalarchives/components/textarea/textarea.css.map +1 -1
  55. package/nationalarchives/components/warning/warning.css.map +1 -1
  56. package/nationalarchives/global-header-package.css +1 -1
  57. package/nationalarchives/global-header-package.css.map +1 -1
  58. package/nationalarchives/prototype-kit.css +1 -1
  59. package/nationalarchives/prototype-kit.css.map +1 -1
  60. package/nationalarchives/stories/utilities/colour-schemes/colour-combinations.stories.js +77 -32
  61. package/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js +72 -40
  62. package/nationalarchives/tools/_a11y.scss +0 -4
  63. package/nationalarchives/tools/_colour.scss +27 -65
  64. package/nationalarchives/utilities/_colour.scss +3 -36
  65. package/package.json +3 -2
@@ -1,5 +1,6 @@
1
1
  import Button from "../../../components/button/template.njk";
2
2
  import Checkboxes from "../../../components/checkboxes/template.njk";
3
+ import ErrorSummary from "../../../components/error-summary/template.njk";
3
4
  import Radios from "../../../components/radios/template.njk";
4
5
  import Select from "../../../components/select/template.njk";
5
6
  import TextInput from "../../../components/text-input/template.njk";
@@ -11,13 +12,8 @@ export default {
11
12
  argTypes,
12
13
  };
13
14
 
14
- const Template = () => {
15
- const themes = [
16
- "tna-template--light-theme",
17
- "tna-template--light-theme tna-template--high-contrast-theme",
18
- "tna-template--dark-theme",
19
- "tna-template--dark-theme tna-template--high-contrast-theme",
20
- ];
15
+ const Template = ({ theme }) => {
16
+ const themeSlug = theme.replace(" ", "-").toLowerCase();
21
17
 
22
18
  const accents = [
23
19
  "",
@@ -51,17 +47,12 @@ const Template = () => {
51
47
  )}
52
48
  </div>
53
49
  <div class="tna-colour-contrast-demo__examples">
54
- ${themes.reduce(
55
- (themeOutput, theme) =>
56
- `${themeOutput}${accents.reduce(
57
- (
58
- accentOutput,
59
- accent,
60
- ) => `${accentOutput}<div class="tna-colour-contrast-demo__theme-accent">
50
+ ${accents.reduce(
51
+ (
52
+ accentOutput,
53
+ accent,
54
+ ) => `${accentOutput}<div class="tna-colour-contrast-demo__theme-accent">
61
55
  <div class="tna-colour-contrast-demo__example">
62
- <p>Theme: <strong>${theme
63
- .replace(/tna-template--/g, "")
64
- .replace(/-theme/g, "")}</strong></p>
65
56
  <p>Accent: <strong>${
66
57
  accent.replace(/tna-accent-/g, "") || "[none]"
67
58
  }</strong></p>
@@ -71,7 +62,7 @@ const Template = () => {
71
62
  `${blockOutput}<div class="tna-colour-contrast-demo__example tna-template ${theme} ${accent}">
72
63
  <div class="tna-template__body">
73
64
  <div class="tna-colour-contrast-demo__example-content ${block}">
74
- <h6 class="tna-heading-s">Heading</h6>
65
+ <h1 class="tna-heading-s">Heading</h1>
75
66
  <p>Text / <span class="dark-text">Dark</span> / <span class="light-text">Light</span> / <i class="fa-solid fa-heart" aria-hidden="true"></i> <i class="fa-solid fa-heart light-icon" aria-hidden="true"></i></p>
76
67
  <p><a href="#">Link</a> / <a href="#" class="tna-colour-contrast-demo__link--visited">Link (visited)</a></p>
77
68
  <ul class="tna-chip-list">
@@ -85,18 +76,42 @@ const Template = () => {
85
76
  <span class="tna-chip tna-chip--plain"><i class="fa-solid fa-heart" aria-hidden="true"></i>Chip</span>
86
77
  </li>
87
78
  </ul>
79
+ ${ErrorSummary({
80
+ params: {
81
+ title: "Error",
82
+ headingLevel: 2,
83
+ items: [
84
+ {
85
+ text: "Error",
86
+ href: `name-${themeSlug}-${block}-${accent}-2`,
87
+ },
88
+ ],
89
+ disableAutoFocus: true,
90
+ },
91
+ })}
88
92
  ${TextInput({
89
93
  params: {
90
94
  label: "Input",
91
- id: `name-${theme}-${block}-${accent}`,
92
- name: `name-${theme}-${block}-${accent}`,
95
+ id: `name-${themeSlug}-${block}-${accent}`,
96
+ name: `name-${themeSlug}-${block}-${accent}`,
93
97
  value: `Lorem ipsum`,
94
98
  },
95
99
  })}
100
+ ${TextInput({
101
+ params: {
102
+ label: "Input",
103
+ id: `name-${themeSlug}-${block}-${accent}-2`,
104
+ name: `name-${themeSlug}-${block}-${accent}-2`,
105
+ value: `Lorem ipsum`,
106
+ error: {
107
+ text: "Error",
108
+ },
109
+ },
110
+ })}
96
111
  ${Checkboxes({
97
112
  params: {
98
- id: `categories-${theme}-${block}-${accent}`,
99
- name: `categories-${theme}-${block}-${accent}`,
113
+ id: `categories-${themeSlug}-${block}-${accent}`,
114
+ name: `categories-${themeSlug}-${block}-${accent}`,
100
115
  items: [
101
116
  {
102
117
  text: "Alpha",
@@ -114,8 +129,8 @@ const Template = () => {
114
129
  })}
115
130
  ${Radios({
116
131
  params: {
117
- id: `type-${theme}-${block}-${accent}`,
118
- name: `type-${theme}-${block}-${accent}`,
132
+ id: `type-${themeSlug}-${block}-${accent}`,
133
+ name: `type-${themeSlug}-${block}-${accent}`,
119
134
  items: [
120
135
  {
121
136
  text: "Alpha",
@@ -134,8 +149,8 @@ const Template = () => {
134
149
  ${Select({
135
150
  params: {
136
151
  label: "Select",
137
- id: `sort-${theme}-${block}-${accent}`,
138
- name: `sort-${theme}-${block}-${accent}`,
152
+ id: `sort-${themeSlug}-${block}-${accent}`,
153
+ name: `sort-${themeSlug}-${block}-${accent}`,
139
154
  items: [
140
155
  {
141
156
  text: "Relevance",
@@ -180,18 +195,48 @@ const Template = () => {
180
195
  "",
181
196
  )}
182
197
  </div>`,
183
- "",
184
- )}`,
185
198
  "",
186
199
  )}
187
200
  </div>
188
201
  </div>`;
189
202
  };
190
203
 
191
- export const Combinations = Template.bind({});
192
- Combinations.parameters = {
204
+ export const Light = Template.bind({});
205
+ Light.parameters = {
193
206
  a11y: {
194
- disable: true,
207
+ // disable: true,
195
208
  },
196
209
  };
197
- Combinations.args = {};
210
+ Light.args = {
211
+ theme: "",
212
+ };
213
+
214
+ export const Dark = Template.bind({});
215
+ Dark.parameters = {
216
+ a11y: {
217
+ // disable: true,
218
+ },
219
+ };
220
+ Dark.args = {
221
+ theme: "tna-template--dark-theme",
222
+ };
223
+
224
+ export const HighContrast = Template.bind({});
225
+ HighContrast.parameters = {
226
+ a11y: {
227
+ // disable: true,
228
+ },
229
+ };
230
+ HighContrast.args = {
231
+ theme: "tna-template--high-contrast-theme",
232
+ };
233
+
234
+ export const DarkHighContrast = Template.bind({});
235
+ DarkHighContrast.parameters = {
236
+ a11y: {
237
+ // disable: true,
238
+ },
239
+ };
240
+ DarkHighContrast.args = {
241
+ theme: "tna-template--dark-theme tna-template--high-contrast-theme",
242
+ };
@@ -28,8 +28,8 @@ const argTypes = {
28
28
  "system",
29
29
  "light",
30
30
  "dark",
31
- "light high-contrast",
32
- "dark high-contrast",
31
+ // "light high-contrast",
32
+ // "dark high-contrast",
33
33
  ],
34
34
  },
35
35
  accent: {
@@ -46,7 +46,6 @@ export default {
46
46
  const Template = ({ theme, accent }) => {
47
47
  document.documentElement.classList.remove(
48
48
  "tna-template",
49
- "tna-template--light-theme",
50
49
  "tna-template--yellow-accent",
51
50
  );
52
51
 
@@ -75,15 +74,13 @@ const Template = ({ theme, accent }) => {
75
74
  return `<div class="tna-template ${
76
75
  theme === "system"
77
76
  ? "tna-template--system-theme"
78
- : theme === "light"
79
- ? "tna-template--light-theme"
80
- : theme === "dark"
81
- ? "tna-template--dark-theme"
82
- : theme === "light high-contrast"
83
- ? "tna-template--light-theme tna-template--high-contrast-theme"
84
- : theme === "dark high-contrast"
85
- ? "tna-template--dark-theme tna-template--high-contrast-theme"
86
- : ""
77
+ : theme === "dark"
78
+ ? "tna-template--dark-theme"
79
+ : theme === "high-contrast"
80
+ ? "tna-template--high-contrast-theme"
81
+ : theme === "dark high-contrast"
82
+ ? "tna-template--dark-theme tna-template--high-contrast-theme"
83
+ : ""
87
84
  } ${
88
85
  accent === "yellow"
89
86
  ? "tna-template--yellow-accent"
@@ -717,9 +714,19 @@ const Template = ({ theme, accent }) => {
717
714
  classes: "tna-pagination--demo tna-!--margin-top-m",
718
715
  },
719
716
  })}
717
+ ${SearchField({
718
+ params: {
719
+ label: "Catalogue search results",
720
+ headingLevel: 3,
721
+ headingSize: "l",
722
+ id: "search1",
723
+ name: "q",
724
+ },
725
+ })}
720
726
  <div class="tna-button-group">
721
727
  <a href="#" class="tna-button">Primary button</a>
722
728
  <a href="#" class="tna-button tna-button--accent">Accent button</a>
729
+ <a href="" class="tna-button tna-button--solid-hover">Solid hover button</a>
723
730
  <a href="" class="tna-button tna-button--plain">Plain button</a>
724
731
  </div>
725
732
  </div>
@@ -801,9 +808,19 @@ const Template = ({ theme, accent }) => {
801
808
  classes: "tna-pagination--demo tna-!--margin-top-m",
802
809
  },
803
810
  })}
811
+ ${SearchField({
812
+ params: {
813
+ label: "Catalogue search results",
814
+ headingLevel: 3,
815
+ headingSize: "l",
816
+ id: "search2",
817
+ name: "q",
818
+ },
819
+ })}
804
820
  <div class="tna-button-group">
805
821
  <a href="#" class="tna-button">Primary button</a>
806
822
  <a href="#" class="tna-button tna-button--accent">Accent button</a>
823
+ <a href="" class="tna-button tna-button--solid-hover">Solid hover button</a>
807
824
  <a href="" class="tna-button tna-button--plain">Plain button</a>
808
825
  </div>
809
826
  </div>
@@ -885,9 +902,19 @@ const Template = ({ theme, accent }) => {
885
902
  classes: "tna-pagination--demo tna-!--margin-top-m",
886
903
  },
887
904
  })}
905
+ ${SearchField({
906
+ params: {
907
+ label: "Catalogue search results",
908
+ headingLevel: 3,
909
+ headingSize: "l",
910
+ id: "search3",
911
+ name: "q",
912
+ },
913
+ })}
888
914
  <div class="tna-button-group">
889
915
  <a href="#" class="tna-button">Primary button</a>
890
916
  <a href="#" class="tna-button tna-button--accent">Accent button</a>
917
+ <a href="" class="tna-button tna-button--solid-hover">Solid hover button</a>
891
918
  <a href="" class="tna-button tna-button--plain">Plain button</a>
892
919
  </div>
893
920
  </div>
@@ -969,9 +996,19 @@ const Template = ({ theme, accent }) => {
969
996
  classes: "tna-pagination--demo tna-!--margin-top-m",
970
997
  },
971
998
  })}
999
+ ${SearchField({
1000
+ params: {
1001
+ label: "Catalogue search results",
1002
+ headingLevel: 3,
1003
+ headingSize: "l",
1004
+ id: "search4",
1005
+ name: "q",
1006
+ },
1007
+ })}
972
1008
  <div class="tna-button-group">
973
1009
  <a href="#" class="tna-button">Primary button</a>
974
1010
  <a href="#" class="tna-button tna-button--accent">Accent button</a>
1011
+ <a href="" class="tna-button tna-button--solid-hover">Solid hover button</a>
975
1012
  <a href="" class="tna-button tna-button--plain">Plain button</a>
976
1013
  </div>
977
1014
  </div>
@@ -1053,26 +1090,21 @@ const Template = ({ theme, accent }) => {
1053
1090
  classes: "tna-pagination--demo tna-!--margin-top-m",
1054
1091
  },
1055
1092
  })}
1056
- <div class="tna-button-group">
1057
- <a href="#" class="tna-button">Primary button</a>
1058
- <a href="#" class="tna-button tna-button--accent">Accent button</a>
1059
- <a href="" class="tna-button tna-button--plain">Plain button</a>
1060
- </div>
1061
- </div>
1062
- </div>
1063
- </div>
1064
- <div class="tna-section tna-background-contrast">
1065
- <div class="tna-container">
1066
- <div class="tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny">
1067
1093
  ${SearchField({
1068
1094
  params: {
1069
1095
  label: "Catalogue search results",
1070
1096
  headingLevel: 3,
1071
1097
  headingSize: "l",
1072
- id: "search1",
1098
+ id: "search5",
1073
1099
  name: "q",
1074
1100
  },
1075
1101
  })}
1102
+ <div class="tna-button-group">
1103
+ <a href="#" class="tna-button">Primary button</a>
1104
+ <a href="#" class="tna-button tna-button--accent">Accent button</a>
1105
+ <a href="" class="tna-button tna-button--solid-hover">Solid hover button</a>
1106
+ <a href="" class="tna-button tna-button--plain">Plain button</a>
1107
+ </div>
1076
1108
  </div>
1077
1109
  </div>
1078
1110
  </div>
@@ -1374,20 +1406,20 @@ Dark.args = {
1374
1406
  accent: "pink",
1375
1407
  };
1376
1408
 
1377
- export const LightHighContrast = Template.bind({});
1378
- LightHighContrast.parameters = {
1379
- chromatic: { disableSnapshot: true },
1380
- };
1381
- LightHighContrast.args = {
1382
- theme: "light high-contrast",
1383
- accent: "pink",
1384
- };
1409
+ // export const LightHighContrast = Template.bind({});
1410
+ // LightHighContrast.parameters = {
1411
+ // chromatic: { disableSnapshot: true },
1412
+ // };
1413
+ // LightHighContrast.args = {
1414
+ // theme: "light high-contrast",
1415
+ // accent: "pink",
1416
+ // };
1385
1417
 
1386
- export const DarkHighContrast = Template.bind({});
1387
- DarkHighContrast.parameters = {
1388
- chromatic: { disableSnapshot: true },
1389
- };
1390
- DarkHighContrast.args = {
1391
- theme: "dark high-contrast",
1392
- accent: "pink",
1393
- };
1418
+ // export const DarkHighContrast = Template.bind({});
1419
+ // DarkHighContrast.parameters = {
1420
+ // chromatic: { disableSnapshot: true },
1421
+ // };
1422
+ // DarkHighContrast.args = {
1423
+ // theme: "dark high-contrast",
1424
+ // accent: "pink",
1425
+ // };
@@ -8,10 +8,6 @@
8
8
  solid
9
9
  );
10
10
  outline-offset: a11y.$focus-outline-offset;
11
-
12
- transition:
13
- outline 100ms,
14
- outline-offset 100ms;
15
11
  }
16
12
 
17
13
  @mixin active-outline {
@@ -154,65 +154,43 @@
154
154
  solid;
155
155
  }
156
156
 
157
+ // Use light theme colours (except for "form-error")
157
158
  %light {
158
159
  @include colour-css-vars("form-error");
159
160
 
160
161
  @media (prefers-contrast: more) {
161
162
  @include colour-css-vars-high-contrast("form-error");
162
163
  }
163
-
164
- .tna-template--high-contrast-theme & {
165
- @include colour-css-vars-high-contrast("form-error");
166
- }
167
164
  }
168
165
 
169
166
  @mixin light {
170
167
  @extend %light;
171
168
  }
172
169
 
173
- %dark {
174
- @include colour-css-vars-dark("form-error");
170
+ // Remove accent and contrast values (except for "form-error")
171
+ %plain {
172
+ @include colour-css-vars("form-error");
175
173
 
176
174
  @media (prefers-contrast: more) {
177
- @include colour-css-vars-high-contrast-dark("form-error");
175
+ @include colour-css-vars-high-contrast("form-error");
178
176
  }
179
177
 
180
- .tna-template--high-contrast-theme & {
181
- @include colour-css-vars-high-contrast-dark("form-error");
182
- }
183
- }
184
-
185
- @mixin dark {
186
- @extend %dark;
187
- }
188
-
189
- %plain {
190
178
  .tna-template--system-theme & {
191
- @extend %light;
192
-
193
179
  @media (prefers-color-scheme: dark) {
194
- @include colour-css-vars-dark;
180
+ @include colour-css-vars-dark("form-error");
195
181
  }
196
182
 
197
183
  @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
198
- @include colour-css-vars-high-contrast-dark;
184
+ @include colour-css-vars-high-contrast-dark("form-error");
199
185
  }
200
186
  }
201
187
 
202
- .tna-template--light-theme & {
203
- @include colour-css-vars;
204
- }
205
-
206
188
  .tna-template--dark-theme & {
207
- @include colour-css-vars-dark;
208
- }
209
-
210
- .tna-template--high-contrast-theme & {
211
- @include colour-css-vars-high-contrast;
212
- }
189
+ @include colour-css-vars-dark("form-error");
213
190
 
214
- .tna-template--high-contrast-theme.tna-template--dark-theme & {
215
- @include colour-css-vars-high-contrast-dark;
191
+ @media (prefers-contrast: more) {
192
+ @include colour-css-vars-high-contrast-dark("form-error");
193
+ }
216
194
  }
217
195
 
218
196
  @include colour-background("background");
@@ -272,6 +250,18 @@
272
250
  @extend %contrast-on-mobile;
273
251
  }
274
252
 
253
+ %tint {
254
+ --background: var(--background-tint);
255
+
256
+ @include colour-background("background");
257
+
258
+ @include colour-font("font-base");
259
+ }
260
+
261
+ @mixin tint {
262
+ @extend %tint;
263
+ }
264
+
275
265
  %accent {
276
266
  --background: var(--accent-background);
277
267
  --font-base: var(--accent-font-base);
@@ -292,34 +282,12 @@
292
282
  @extend %accent;
293
283
  }
294
284
 
295
- %tint {
296
- --background: var(--background-tint);
297
-
298
- @include colour-background("background");
299
-
300
- @include colour-font("font-base");
301
- }
302
-
303
- @mixin tint {
304
- @extend %tint;
305
- }
306
-
307
- %accent-background {
308
- @include colour-background("accent-background");
309
- }
310
-
311
- @mixin accent-background {
312
- @extend %accent-background;
313
- }
314
-
315
285
  %accent-light {
316
286
  --background: var(--accent-background-light);
317
287
  --font-base: #{map.get(colour.$colour-palette-default, "font-base")};
318
288
  --font-dark: #{map.get(colour.$colour-palette-default, "font-dark")};
319
289
  --font-light: #{map.get(colour.$colour-palette-default, "font-light")};
320
290
  --icon-light: #{map.get(colour.$colour-palette-default, "icon-light")};
321
- // --link: #{map.get(colour.$colour-palette-default, "link")};
322
- // --link-visited: #{map.get(colour.$colour-palette-default, "link-visited")};
323
291
  --keyline: #{map.get(colour.$colour-palette-default, "keyline")};
324
292
  --keyline-dark: #{map.get(colour.$colour-palette-default, "keyline-dark")};
325
293
  --button-text: #{map.get(colour.$colour-palette-default, "button-text")};
@@ -336,9 +304,6 @@
336
304
  "button-hover-background"
337
305
  )};
338
306
 
339
- @include colour-background("background");
340
- @include colour-font("font-base");
341
-
342
307
  .tna-template--system-theme & {
343
308
  @media (prefers-color-scheme: dark) {
344
309
  --link: #{map.get(colour.$colour-palette-default, "link")};
@@ -350,6 +315,9 @@
350
315
  --link: #{map.get(colour.$colour-palette-default, "link")};
351
316
  --link-visited: #{map.get(colour.$colour-palette-default, "link-visited")};
352
317
  }
318
+
319
+ @include colour-background("background");
320
+ @include colour-font("font-base");
353
321
  }
354
322
 
355
323
  @mixin accent-light {
@@ -444,15 +412,9 @@
444
412
  }
445
413
 
446
414
  @mixin on-high-contrast {
447
- .tna-template--high-contrast-theme & {
415
+ @media (prefers-contrast: more) {
448
416
  @content;
449
417
  }
450
-
451
- .tna-template--system-theme & {
452
- @media (prefers-contrast: more) {
453
- @content;
454
- }
455
- }
456
418
  }
457
419
 
458
420
  @mixin on-forced-colours {
@@ -1,41 +1,20 @@
1
1
  @use "../tools/colour";
2
2
 
3
3
  .tna-template {
4
- @include colour.colour-background("background");
5
-
6
- &--system-theme,
7
- &--light-theme {
8
- @include colour.colour-css-vars;
4
+ @include colour.light;
9
5
 
10
- @media (prefers-contrast: more) {
11
- @include colour.colour-css-vars-high-contrast;
12
- }
13
- }
6
+ @include colour.colour-background("background");
14
7
 
15
8
  &--system-theme {
16
- // @include colour.colour-css-vars;
17
-
18
9
  @media (prefers-color-scheme: dark) {
19
10
  @include colour.colour-css-vars-dark;
20
11
  }
21
12
 
22
- // @media (prefers-contrast: more) {
23
- // @include colour.colour-css-vars-high-contrast;
24
- // }
25
-
26
13
  @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
27
14
  @include colour.colour-css-vars-high-contrast-dark;
28
15
  }
29
16
  }
30
17
 
31
- // &--light-theme {
32
- // @include colour.colour-css-vars;
33
-
34
- // @media (prefers-contrast: more) {
35
- // @include colour.colour-css-vars-high-contrast;
36
- // }
37
- // }
38
-
39
18
  &--dark-theme {
40
19
  @include colour.colour-css-vars-dark;
41
20
 
@@ -44,19 +23,7 @@
44
23
  }
45
24
  }
46
25
 
47
- // &--high-contrast-theme {
48
- // @include colour.colour-css-vars-high-contrast;
49
-
50
- // * {
51
- // background-image: none !important;
52
- // }
53
-
54
- // &.tna-template--dark-theme {
55
- // @include colour.colour-css-vars-high-contrast-dark;
56
- // }
57
- // }
58
-
59
- &--black--accent {
26
+ &--black-accent {
60
27
  @include colour.black-accent;
61
28
  }
62
29
 
package/package.json CHANGED
@@ -1,10 +1,11 @@
1
1
  {
2
2
  "name": "@nationalarchives/frontend",
3
- "version": "0.1.51",
3
+ "version": "0.1.52",
4
4
  "description": "The National Archives frontend styles",
5
5
  "scripts": {
6
6
  "start": "storybook dev -p 6006",
7
7
  "build:storybook": "storybook build -o storybook --webpack-stats-json",
8
+ "build:storybook:tests": "storybook build -o storybook --webpack-stats-json --test",
8
9
  "build:package": "./tasks/build-package.sh",
9
10
  "compile:sass": "sass --style=compressed --embed-sources src/nationalarchives:package/nationalarchives",
10
11
  "compile:scripts": "webpack",
@@ -14,7 +15,7 @@
14
15
  "test:html": "node tasks/generate-fixture-html.js && html-validate fixtures-html",
15
16
  "test:lint": "prettier --check '{src,.storybook,tasks,.}/**/*.{js,mjs,scss,json,html}' && stylelint 'src/**/*.scss' && eslint 'src/**/*.{js,mjs}'",
16
17
  "test:package": "node tasks/test-package.js",
17
- "test:storybook": "test-storybook --maxWorkers=1",
18
+ "test:storybook": "test-storybook",
18
19
  "test:unit": "jest --verbose",
19
20
  "update:fixtures": "node tasks/update-fixtures.js"
20
21
  },