@nationalarchives/frontend 0.1.49 → 0.1.51

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 (169) hide show
  1. package/nationalarchives/all.css +1 -1
  2. package/nationalarchives/all.css.map +1 -1
  3. package/nationalarchives/all.js +1 -1
  4. package/nationalarchives/all.js.map +1 -1
  5. package/nationalarchives/analytics.js +1 -1
  6. package/nationalarchives/analytics.js.map +1 -1
  7. package/nationalarchives/components/_index.scss +1 -1
  8. package/nationalarchives/components/breadcrumbs/breadcrumbs.css +1 -1
  9. package/nationalarchives/components/breadcrumbs/breadcrumbs.css.map +1 -1
  10. package/nationalarchives/components/breadcrumbs/breadcrumbs.js +1 -1
  11. package/nationalarchives/components/breadcrumbs/breadcrumbs.js.map +1 -1
  12. package/nationalarchives/components/button/button.css +1 -1
  13. package/nationalarchives/components/button/button.css.map +1 -1
  14. package/nationalarchives/components/button/button.scss +7 -5
  15. package/nationalarchives/components/button/macro-options.json +12 -12
  16. package/nationalarchives/components/card/card.css +1 -1
  17. package/nationalarchives/components/card/card.css.map +1 -1
  18. package/nationalarchives/components/card/card.scss +6 -0
  19. package/nationalarchives/components/card/card.stories.js +11 -1
  20. package/nationalarchives/components/card/fixtures.json +102 -4
  21. package/nationalarchives/components/card/macro-options.json +8 -2
  22. package/nationalarchives/components/card/template.njk +3 -1
  23. package/nationalarchives/components/checkboxes/checkboxes.css +1 -1
  24. package/nationalarchives/components/checkboxes/checkboxes.css.map +1 -1
  25. package/nationalarchives/components/checkboxes/checkboxes.njk +1 -1
  26. package/nationalarchives/components/checkboxes/checkboxes.scss +7 -0
  27. package/nationalarchives/components/checkboxes/fixtures.json +6 -6
  28. package/nationalarchives/components/compound-filters/compound-filters.css +1 -1
  29. package/nationalarchives/components/compound-filters/compound-filters.css.map +1 -1
  30. package/nationalarchives/components/cookie-banner/cookie-banner.css +1 -1
  31. package/nationalarchives/components/cookie-banner/cookie-banner.css.map +1 -1
  32. package/nationalarchives/components/cookie-banner/cookie-banner.js +1 -1
  33. package/nationalarchives/components/cookie-banner/cookie-banner.js.map +1 -1
  34. package/nationalarchives/components/date-input/date-input.css +1 -1
  35. package/nationalarchives/components/date-input/date-input.css.map +1 -1
  36. package/nationalarchives/components/date-input/fixtures.json +5 -5
  37. package/nationalarchives/components/date-input/template.njk +2 -2
  38. package/nationalarchives/components/date-search/date-search.css +1 -1
  39. package/nationalarchives/components/date-search/date-search.css.map +1 -1
  40. package/nationalarchives/components/error-summary/error-summary.css +1 -1
  41. package/nationalarchives/components/error-summary/error-summary.css.map +1 -1
  42. package/nationalarchives/components/error-summary/error-summary.js +1 -1
  43. package/nationalarchives/components/error-summary/error-summary.js.map +1 -1
  44. package/nationalarchives/components/error-summary/error-summary.scss +1 -1
  45. package/nationalarchives/components/featured-records/featured-records.css +1 -1
  46. package/nationalarchives/components/featured-records/featured-records.css.map +1 -1
  47. package/nationalarchives/components/featured-records/featured-records.scss +3 -6
  48. package/nationalarchives/components/featured-records/featured-records.stories.js +3 -4
  49. package/nationalarchives/components/footer/fixtures.json +1 -1
  50. package/nationalarchives/components/footer/footer.css +1 -1
  51. package/nationalarchives/components/footer/footer.css.map +1 -1
  52. package/nationalarchives/components/footer/template.njk +9 -10
  53. package/nationalarchives/components/gallery/gallery.css +1 -1
  54. package/nationalarchives/components/gallery/gallery.css.map +1 -1
  55. package/nationalarchives/components/gallery/gallery.js +1 -1
  56. package/nationalarchives/components/gallery/gallery.js.map +1 -1
  57. package/nationalarchives/components/global-header/README.md +16 -16
  58. package/nationalarchives/components/global-header/global-header.css +1 -1
  59. package/nationalarchives/components/global-header/global-header.css.map +1 -1
  60. package/nationalarchives/components/global-header/global-header.js +1 -1
  61. package/nationalarchives/components/global-header/global-header.js.map +1 -1
  62. package/nationalarchives/components/global-header/global-header.scss +3 -4
  63. package/nationalarchives/components/global-header/template.njk +3 -3
  64. package/nationalarchives/components/grid/grid.css +1 -1
  65. package/nationalarchives/components/grid/grid.css.map +1 -1
  66. package/nationalarchives/components/header/header.css +1 -1
  67. package/nationalarchives/components/header/header.css.map +1 -1
  68. package/nationalarchives/components/header/header.js +1 -1
  69. package/nationalarchives/components/header/header.js.map +1 -1
  70. package/nationalarchives/components/header/header.scss +3 -4
  71. package/nationalarchives/components/hero/fixtures.json +63 -27
  72. package/nationalarchives/components/hero/hero.css +1 -1
  73. package/nationalarchives/components/hero/hero.css.map +1 -1
  74. package/nationalarchives/components/hero/hero.scss +46 -18
  75. package/nationalarchives/components/hero/hero.stories.js +99 -25
  76. package/nationalarchives/components/hero/macro-options.json +13 -13
  77. package/nationalarchives/components/hero/template.njk +15 -14
  78. package/nationalarchives/components/index-grid/index-grid.css +1 -1
  79. package/nationalarchives/components/index-grid/index-grid.css.map +1 -1
  80. package/nationalarchives/components/pagination/pagination.css +1 -1
  81. package/nationalarchives/components/pagination/pagination.css.map +1 -1
  82. package/nationalarchives/components/pagination/pagination.scss +2 -0
  83. package/nationalarchives/components/phase-banner/phase-banner.css +1 -1
  84. package/nationalarchives/components/phase-banner/phase-banner.css.map +1 -1
  85. package/nationalarchives/components/picture/picture.css +1 -1
  86. package/nationalarchives/components/picture/picture.css.map +1 -1
  87. package/nationalarchives/components/picture/picture.js +1 -1
  88. package/nationalarchives/components/picture/picture.js.map +1 -1
  89. package/nationalarchives/components/picture/picture.scss +1 -1
  90. package/nationalarchives/components/quick-filters/quick-filters.css +1 -1
  91. package/nationalarchives/components/quick-filters/quick-filters.css.map +1 -1
  92. package/nationalarchives/components/radios/fixtures.json +6 -6
  93. package/nationalarchives/components/radios/radios.css +1 -1
  94. package/nationalarchives/components/radios/radios.css.map +1 -1
  95. package/nationalarchives/components/radios/radios.njk +1 -1
  96. package/nationalarchives/components/radios/radios.scss +7 -0
  97. package/nationalarchives/components/search-field/search-field.css +1 -1
  98. package/nationalarchives/components/search-field/search-field.css.map +1 -1
  99. package/nationalarchives/components/search-filters/search-filters.css +1 -1
  100. package/nationalarchives/components/search-filters/search-filters.css.map +1 -1
  101. package/nationalarchives/components/search-filters/search-filters.js +1 -1
  102. package/nationalarchives/components/search-filters/search-filters.js.map +1 -1
  103. package/nationalarchives/components/search-filters/search-filters.scss +1 -1
  104. package/nationalarchives/components/select/select.css +1 -1
  105. package/nationalarchives/components/select/select.css.map +1 -1
  106. package/nationalarchives/components/select/select.scss +8 -8
  107. package/nationalarchives/components/sensitive-image/sensitive-image.css +1 -1
  108. package/nationalarchives/components/sensitive-image/sensitive-image.css.map +1 -1
  109. package/nationalarchives/components/sensitive-image/sensitive-image.js +1 -1
  110. package/nationalarchives/components/sensitive-image/sensitive-image.js.map +1 -1
  111. package/nationalarchives/components/sensitive-image/sensitive-image.scss +1 -1
  112. package/nationalarchives/components/skip-link/skip-link.css +1 -1
  113. package/nationalarchives/components/skip-link/skip-link.css.map +1 -1
  114. package/nationalarchives/components/skip-link/skip-link.js +1 -1
  115. package/nationalarchives/components/skip-link/skip-link.js.map +1 -1
  116. package/nationalarchives/components/skip-link/skip-link.scss +8 -2
  117. package/nationalarchives/components/tabs/tabs.css +1 -1
  118. package/nationalarchives/components/tabs/tabs.css.map +1 -1
  119. package/nationalarchives/components/tabs/tabs.js +1 -1
  120. package/nationalarchives/components/tabs/tabs.js.map +1 -1
  121. package/nationalarchives/components/tabs/tabs.scss +11 -19
  122. package/nationalarchives/components/text-input/text-input.css +1 -1
  123. package/nationalarchives/components/text-input/text-input.css.map +1 -1
  124. package/nationalarchives/components/textarea/textarea.css +1 -1
  125. package/nationalarchives/components/textarea/textarea.css.map +1 -1
  126. package/nationalarchives/components/warning/_index.scss +1 -0
  127. package/nationalarchives/components/warning/fixtures.json +13 -0
  128. package/nationalarchives/components/{message → warning}/macro-options.json +11 -5
  129. package/nationalarchives/components/warning/macro.njk +3 -0
  130. package/nationalarchives/components/warning/template.njk +10 -0
  131. package/nationalarchives/components/warning/warning.css +1 -0
  132. package/nationalarchives/components/warning/warning.css.map +1 -0
  133. package/nationalarchives/components/{message/message.scss → warning/warning.scss} +3 -3
  134. package/nationalarchives/components/{message/phase-banner.stories.js → warning/warning.stories.js} +10 -9
  135. package/nationalarchives/global-header-package.css +1 -1
  136. package/nationalarchives/global-header-package.css.map +1 -1
  137. package/nationalarchives/global-header-package.scss +6 -4
  138. package/nationalarchives/prototype-kit.css +1 -1
  139. package/nationalarchives/prototype-kit.css.map +1 -1
  140. package/nationalarchives/stories/intro.mdx +2 -2
  141. package/nationalarchives/stories/utilities/colour-schemes/colour-combinations.stories.js +11 -11
  142. package/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js +6 -10
  143. package/nationalarchives/stories/utilities/lists/lists.stories.js +30 -0
  144. package/nationalarchives/stories/utilities/overrides/overrides.stories.js +6 -0
  145. package/nationalarchives/stories/utilities/typography/heading-groups.stories.js +9 -0
  146. package/nationalarchives/stories/utilities/typography/headings.stories.js +3 -0
  147. package/nationalarchives/stories/utilities/typography/typography.stories.js +18 -0
  148. package/nationalarchives/templates/fixtures.json +4 -4
  149. package/nationalarchives/templates/layouts/_generic.njk +2 -2
  150. package/nationalarchives/tools/_a11y.scss +4 -0
  151. package/nationalarchives/tools/_colour.scss +144 -83
  152. package/nationalarchives/tools/_grid.scss +10 -0
  153. package/nationalarchives/tools/_typography.scss +4 -0
  154. package/nationalarchives/utilities/_a11y.scss +4 -4
  155. package/nationalarchives/utilities/_colour.scss +63 -28
  156. package/nationalarchives/utilities/_lists.scss +3 -1
  157. package/nationalarchives/utilities/_reset.scss +4 -0
  158. package/nationalarchives/utilities/_typography.scss +41 -5
  159. package/nationalarchives/variables/_borders.scss +1 -0
  160. package/nationalarchives/variables/_colour.scss +15 -15
  161. package/nationalarchives/variables/_index.scss +1 -0
  162. package/nationalarchives/variables/_typography.scss +1 -0
  163. package/package.json +25 -24
  164. package/nationalarchives/components/message/_index.scss +0 -1
  165. package/nationalarchives/components/message/fixtures.json +0 -13
  166. package/nationalarchives/components/message/macro.njk +0 -3
  167. package/nationalarchives/components/message/message.css +0 -1
  168. package/nationalarchives/components/message/message.css.map +0 -1
  169. package/nationalarchives/components/message/template.njk +0 -9
@@ -1,5 +1,6 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
+ @use "../variables/borders";
3
4
  @use "../variables/colour";
4
5
  @use "../tools/media";
5
6
 
@@ -39,62 +40,17 @@
39
40
  }
40
41
  }
41
42
 
42
- @mixin accent-css-vars($colour) {
43
- @if $colour == "yellow" {
44
- --accent-background: #{brand-colour("yellow")} !important;
45
- --accent-background-light: #{brand-colour("cream")} !important;
46
- --accent-font-base: #{brand-colour("black")} !important;
47
- --accent-font-dark: #{brand-colour("black")} !important;
48
- --accent-font-light: #{brand-colour("black", 0.7)} !important;
49
- --accent-icon-light: #{brand-colour("black", 0.45)} !important;
50
- --accent-link: #{brand-colour("black")} !important;
51
- --accent-link-visited: #{brand-colour("black")} !important;
52
- --accent-keyline: #{brand-colour("black", 0.5)} !important;
53
- --accent-keyline-dark: #{brand-colour("black", 0.8)} !important;
54
- --button-accent-background: #{brand-colour("yellow")} !important;
55
- } @else {
56
- --accent-font-base: #{brand-colour("white")} !important;
57
- --accent-font-dark: #{brand-colour("white")} !important;
58
- --accent-font-light: #{brand-colour("white", 0.7)} !important;
59
- --accent-icon-light: #{brand-colour("white", 0.45)} !important;
60
- --accent-link: #{brand-colour("white")} !important;
61
- --accent-link-visited: #{brand-colour("white")} !important;
62
- --accent-keyline: #{brand-colour("white", 0.5)} !important;
63
- --accent-keyline-dark: #{brand-colour("white", 0.8)} !important;
64
- --button-accent-text: #{brand-colour("white")} !important;
65
- @if $colour == "pink" {
66
- --accent-background: #{brand-colour("maroon")} !important;
67
- --accent-background-light: #{brand-colour("pastel-pink")} !important;
68
- --button-accent-background: #{brand-colour("maroon")} !important;
69
- } @else if $colour == "orange" {
70
- --accent-background: #{brand-colour("chestnut")} !important;
71
- --accent-background-light: #{brand-colour("pastel-orange")} !important;
72
- --button-accent-background: #{brand-colour("chestnut")} !important;
73
- } @else if $colour == "green" {
74
- --accent-background: #{brand-colour("forest")} !important;
75
- --accent-background-light: #{brand-colour("pastel-green")} !important;
76
- --button-accent-background: #{brand-colour("forest")} !important;
77
- } @else if $colour == "blue" {
78
- --accent-background: #{brand-colour("navy")} !important;
79
- --accent-background-light: #{brand-colour("pastel-blue")} !important;
80
- --button-accent-background: #{brand-colour("navy")} !important;
81
- }
82
- }
83
- }
84
-
85
- @mixin colour-font(
86
- $colour,
87
- $important: false,
88
- $default-palette: colour.$colour-palette-default
89
- ) {
90
- color: map.get($default-palette, $colour) if($important, !important, null);
91
- color: var(--#{$colour}) if($important, !important, null);
43
+ @mixin colour-font($colour, $important: false) {
44
+ color: var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})
45
+ if($important, !important, null);
92
46
  }
93
47
 
94
48
  @mixin colour-background($colour, $important: false) {
95
- background-color: map.get(colour.$colour-palette-default, $colour)
49
+ background-color: var(
50
+ --#{$colour},
51
+ #{map.get(colour.$colour-palette-default, $colour)}
52
+ )
96
53
  if($important, !important, null);
97
- background-color: var(--#{$colour}) if($important, !important, null);
98
54
  }
99
55
 
100
56
  @mixin colour-background-brand($brandColour, $important: false) {
@@ -110,35 +66,29 @@
110
66
  ) {
111
67
  @if $direction != "" {
112
68
  @if $width != "" {
113
- $property: border-#{$direction};
114
- border-#{$direction}: $width
115
- map.get(colour.$colour-palette-default, $colour)
116
- $style
117
- if($important, !important, null);
118
69
  border-#{$direction}: $width
119
- var(--#{$colour})
70
+ var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})
120
71
  $style
121
72
  if($important, !important, null);
122
73
  } @else {
123
- border-#{$direction}-color: map.get(
124
- colour.$colour-palette-default,
125
- $colour
74
+ border-#{$direction}-color: var(
75
+ --#{$colour},
76
+ #{map.get(colour.$colour-palette-default, $colour)}
126
77
  )
127
78
  if($important, !important, null);
128
- border-#{$direction}-color: var(--#{$colour})
129
- if($important, !important, null);
130
79
  }
131
80
  } @else {
132
81
  @if $width != "" {
133
82
  border: $width
134
- map.get(colour.$colour-palette-default, $colour)
83
+ var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})
135
84
  $style
136
85
  if($important, !important, null);
137
- border: $width var(--#{$colour}) $style if($important, !important, null);
138
86
  } @else {
139
- border-color: map.get(colour.$colour-palette-default, $colour)
87
+ border-color: var(
88
+ --#{$colour},
89
+ #{map.get(colour.$colour-palette-default, $colour)}
90
+ )
140
91
  if($important, !important, null);
141
- border-color: var(--#{$colour}) if($important, !important, null);
142
92
  }
143
93
  }
144
94
  }
@@ -146,41 +96,62 @@
146
96
  @mixin colour-outline($colour, $width: "", $style: solid, $important: false) {
147
97
  @if $width != "" {
148
98
  outline: $width
149
- map.get(colour.$colour-palette-default, $colour)
99
+ var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})
150
100
  $style
151
101
  if($important, !important, null);
152
- outline: $width var(--#{$colour}) $style if($important, !important, null);
153
102
  } @else {
154
- outline-color: map.get(colour.$colour-palette-default, $colour)
103
+ outline-color: var(
104
+ --#{$colour},
105
+ #{map.get(colour.$colour-palette-default, $colour)}
106
+ )
155
107
  if($important, !important, null);
156
- outline-color: var(--#{$colour}) if($important, !important, null);
157
108
  }
158
109
  }
159
110
 
160
111
  @mixin colour-fill($colour, $important: false) {
161
- fill: map.get(colour.$colour-palette-default, $colour)
112
+ fill: var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})
162
113
  if($important, !important, null);
163
- fill: var(--#{$colour}) if($important, !important, null);
164
114
  }
165
115
 
166
116
  @mixin thick-keyline($direction) {
167
- @include colour-border("keyline", 5px, solid, $direction);
117
+ @include colour-border(
118
+ "keyline",
119
+ borders.$thick-border-width,
120
+ solid,
121
+ $direction
122
+ );
168
123
  }
169
124
 
170
125
  @mixin thick-keyline-dark($direction) {
171
- @include colour-border("keyline-dark", 5px, solid, $direction);
126
+ @include colour-border(
127
+ "keyline-dark",
128
+ borders.$thick-border-width,
129
+ solid,
130
+ $direction
131
+ );
172
132
  }
173
133
 
174
134
  @mixin thick-keyline-accent($direction) {
175
- @include colour-border("accent-background", 5px, solid, $direction);
135
+ @include colour-border(
136
+ "accent-background",
137
+ borders.$thick-border-width,
138
+ solid,
139
+ $direction
140
+ );
176
141
  }
177
142
 
178
143
  @mixin thick-keyline-error($direction) {
179
- @include colour-border("form-error", 5px, solid, $direction);
144
+ @include colour-border(
145
+ "form-error",
146
+ borders.$thick-border-width,
147
+ solid,
148
+ $direction
149
+ );
180
150
  }
181
151
 
182
152
  @mixin thick-keyline-brand($direction, $brandColour) {
183
- border-#{$direction}: 5px #{brand-colour($brandColour)} solid;
153
+ border-#{$direction}: borders.$thick-border-width #{brand-colour($brandColour)}
154
+ solid;
184
155
  }
185
156
 
186
157
  %light {
@@ -244,7 +215,7 @@
244
215
  @include colour-css-vars-high-contrast-dark;
245
216
  }
246
217
 
247
- --background: var(--page-background);
218
+ @include colour-background("background");
248
219
  }
249
220
 
250
221
  @mixin plain {
@@ -268,7 +239,7 @@
268
239
 
269
240
  @include colour-background("background");
270
241
 
271
- @include colour-font("font-base", false, colour.$colour-palette-dark);
242
+ @include colour-font("font-base");
272
243
  }
273
244
 
274
245
  @mixin contrast {
@@ -293,7 +264,7 @@
293
264
 
294
265
  @include colour-background("background");
295
266
 
296
- @include colour-font("font-base", false, colour.$colour-palette-dark);
267
+ @include colour-font("font-base");
297
268
  }
298
269
  }
299
270
 
@@ -314,7 +285,7 @@
314
285
 
315
286
  @include colour-background("background");
316
287
 
317
- @include colour-font("font-base", false, colour.$colour-palette-dark);
288
+ @include colour-font("font-base");
318
289
  }
319
290
 
320
291
  @mixin accent {
@@ -322,7 +293,10 @@
322
293
  }
323
294
 
324
295
  %tint {
325
- @include colour-background("background-tint");
296
+ --background: var(--background-tint);
297
+
298
+ @include colour-background("background");
299
+
326
300
  @include colour-font("font-base");
327
301
  }
328
302
 
@@ -382,6 +356,93 @@
382
356
  @extend %accent-light;
383
357
  }
384
358
 
359
+ %yellow-accent {
360
+ --accent-background: #{colour.brand-colour("yellow")} !important;
361
+ --accent-background-light: #{colour.brand-colour("cream")} !important;
362
+ --accent-font-base: #{colour.brand-colour("black")} !important;
363
+ --accent-font-dark: #{colour.brand-colour("black")} !important;
364
+ --accent-font-light: #{colour.brand-colour("black", 0.7)} !important;
365
+ --accent-icon-light: #{colour.brand-colour("black", 0.45)} !important;
366
+ --accent-link: #{colour.brand-colour("black")} !important;
367
+ --accent-link-visited: #{colour.brand-colour("black")} !important;
368
+ --accent-keyline: #{colour.brand-colour("black", 0.5)} !important;
369
+ --accent-keyline-dark: #{colour.brand-colour("black", 0.8)} !important;
370
+ --button-accent-text: #{colour.brand-colour("black")} !important;
371
+ --button-accent-background: #{colour.brand-colour("yellow")} !important;
372
+ }
373
+
374
+ @mixin yellow-accent {
375
+ @extend %yellow-accent;
376
+ }
377
+
378
+ %accent-lighter-text {
379
+ --accent-font-base: #{colour.brand-colour("white")} !important;
380
+ --accent-font-dark: #{colour.brand-colour("white")} !important;
381
+ --accent-font-light: #{colour.brand-colour("white", 0.7)} !important;
382
+ --accent-icon-light: #{colour.brand-colour("white", 0.45)} !important;
383
+ --accent-link: #{colour.brand-colour("white")} !important;
384
+ --accent-link-visited: #{colour.brand-colour("white")} !important;
385
+ --accent-keyline: #{colour.brand-colour("white", 0.5)} !important;
386
+ --accent-keyline-dark: #{colour.brand-colour("white", 0.8)} !important;
387
+ --button-accent-text: #{colour.brand-colour("white")} !important;
388
+ }
389
+
390
+ %black-accent {
391
+ --accent-background: #{colour.brand-colour("black")} !important;
392
+ --accent-background-light: #{colour.brand-colour("light-grey")} !important;
393
+ --button-accent-text: #{colour.brand-colour("black")} !important;
394
+ --button-accent-background: #{colour.brand-colour("grey")} !important;
395
+ }
396
+
397
+ @mixin black-accent {
398
+ @extend %black-accent;
399
+ @extend %accent-lighter-text;
400
+ }
401
+
402
+ %pink-accent {
403
+ --accent-background: #{colour.brand-colour("maroon")} !important;
404
+ --accent-background-light: #{colour.brand-colour("pastel-pink")} !important;
405
+ --button-accent-background: #{colour.brand-colour("maroon")} !important;
406
+ }
407
+
408
+ @mixin pink-accent {
409
+ @extend %pink-accent;
410
+ @extend %accent-lighter-text;
411
+ }
412
+
413
+ %orange-accent {
414
+ --accent-background: #{colour.brand-colour("chestnut")} !important;
415
+ --accent-background-light: #{colour.brand-colour("pastel-orange")} !important;
416
+ --button-accent-background: #{colour.brand-colour("chestnut")} !important;
417
+ }
418
+
419
+ @mixin orange-accent {
420
+ @extend %orange-accent;
421
+ @extend %accent-lighter-text;
422
+ }
423
+
424
+ %green-accent {
425
+ --accent-background: #{colour.brand-colour("forest")} !important;
426
+ --accent-background-light: #{colour.brand-colour("pastel-green")} !important;
427
+ --button-accent-background: #{colour.brand-colour("forest")} !important;
428
+ }
429
+
430
+ @mixin green-accent {
431
+ @extend %green-accent;
432
+ @extend %accent-lighter-text;
433
+ }
434
+
435
+ %blue-accent {
436
+ --accent-background: #{colour.brand-colour("navy")} !important;
437
+ --accent-background-light: #{colour.brand-colour("pastel-blue")} !important;
438
+ --button-accent-background: #{colour.brand-colour("navy")} !important;
439
+ }
440
+
441
+ @mixin blue-accent {
442
+ @extend %blue-accent;
443
+ @extend %accent-lighter-text;
444
+ }
445
+
385
446
  @mixin on-high-contrast {
386
447
  .tna-template--high-contrast-theme & {
387
448
  @content;
@@ -77,6 +77,16 @@
77
77
  }
78
78
  }
79
79
 
80
+ @if $suffix != "" {
81
+ &--no-margin-right#{$suffix} {
82
+ margin-right: 0;
83
+ }
84
+
85
+ &--no-margin-left#{$suffix} {
86
+ margin-left: 0;
87
+ }
88
+ }
89
+
80
90
  @for $i from 1 through 3 {
81
91
  &--flex-#{$i}#{$suffix} {
82
92
  width: auto;
@@ -11,6 +11,10 @@
11
11
  font-weight: typography.$main-font-weight;
12
12
  }
13
13
 
14
+ @mixin main-font-weight-medium {
15
+ font-weight: typography.$main-font-weight-medium;
16
+ }
17
+
14
18
  @mixin main-font-weight-bold {
15
19
  font-weight: typography.$main-font-weight-bold;
16
20
  }
@@ -20,10 +20,10 @@
20
20
 
21
21
  background-color: transparent !important;
22
22
 
23
- &::before,
24
- &::after {
25
- content: "\00a0";
26
- }
23
+ // &::before,
24
+ // &::after {
25
+ // content: "\00a0";
26
+ // }
27
27
  }
28
28
 
29
29
  *:focus {
@@ -1,30 +1,27 @@
1
1
  @use "../tools/colour";
2
2
 
3
- // :root {
4
- // @include colour.colour-css-vars;
5
- // }
6
-
7
3
  .tna-template {
8
- @include colour.colour-background("page-background");
4
+ @include colour.colour-background("background");
9
5
 
10
6
  &--system-theme,
11
7
  &--light-theme {
12
8
  @include colour.colour-css-vars;
13
- // @include colour.light;
9
+
10
+ @media (prefers-contrast: more) {
11
+ @include colour.colour-css-vars-high-contrast;
12
+ }
14
13
  }
15
14
 
16
15
  &--system-theme {
16
+ // @include colour.colour-css-vars;
17
+
17
18
  @media (prefers-color-scheme: dark) {
18
19
  @include colour.colour-css-vars-dark;
19
20
  }
20
21
 
21
- @media (prefers-contrast: more) {
22
- @include colour.colour-css-vars-high-contrast;
23
-
24
- * {
25
- background-image: none !important;
26
- }
27
- }
22
+ // @media (prefers-contrast: more) {
23
+ // @include colour.colour-css-vars-high-contrast;
24
+ // }
28
25
 
29
26
  @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
30
27
  @include colour.colour-css-vars-high-contrast-dark;
@@ -33,42 +30,54 @@
33
30
 
34
31
  // &--light-theme {
35
32
  // @include colour.colour-css-vars;
33
+
34
+ // @media (prefers-contrast: more) {
35
+ // @include colour.colour-css-vars-high-contrast;
36
+ // }
36
37
  // }
37
38
 
38
39
  &--dark-theme {
39
40
  @include colour.colour-css-vars-dark;
40
- }
41
-
42
- &--high-contrast-theme {
43
- @include colour.colour-css-vars-high-contrast;
44
-
45
- * {
46
- background-image: none !important;
47
- }
48
41
 
49
- &.tna-template--dark-theme {
42
+ @media (prefers-contrast: more) {
50
43
  @include colour.colour-css-vars-high-contrast-dark;
51
44
  }
52
45
  }
53
46
 
54
- &--yellow-accent {
55
- @include colour.accent-css-vars("yellow");
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 {
60
+ @include colour.black-accent;
56
61
  }
57
62
 
58
63
  &--pink-accent {
59
- @include colour.accent-css-vars("pink");
64
+ @include colour.pink-accent;
60
65
  }
61
66
 
62
67
  &--orange-accent {
63
- @include colour.accent-css-vars("orange");
68
+ @include colour.orange-accent;
69
+ }
70
+
71
+ &--yellow-accent {
72
+ @include colour.yellow-accent;
64
73
  }
65
74
 
66
75
  &--green-accent {
67
- @include colour.accent-css-vars("green");
76
+ @include colour.green-accent;
68
77
  }
69
78
 
70
79
  &--blue-accent {
71
- @include colour.accent-css-vars("blue");
80
+ @include colour.blue-accent;
72
81
  }
73
82
  }
74
83
 
@@ -99,3 +108,29 @@
99
108
  @include colour.colour-border("keyline-dark", 1px);
100
109
  }
101
110
  }
111
+
112
+ .tna-accent {
113
+ &-black {
114
+ @include colour.black-accent;
115
+ }
116
+
117
+ &-pink {
118
+ @include colour.pink-accent;
119
+ }
120
+
121
+ &-orange {
122
+ @include colour.orange-accent;
123
+ }
124
+
125
+ &-yellow {
126
+ @include colour.yellow-accent;
127
+ }
128
+
129
+ &-green {
130
+ @include colour.green-accent;
131
+ }
132
+
133
+ &-blue {
134
+ @include colour.blue-accent;
135
+ }
136
+ }
@@ -59,6 +59,8 @@
59
59
  &:not(.tna-dl--plain) {
60
60
  dt {
61
61
  @include colour.colour-background("background-tint");
62
+
63
+ @include colour.colour-font("font-base");
62
64
  }
63
65
 
64
66
  dd {
@@ -158,7 +160,7 @@
158
160
  dt:first-child,
159
161
  dd:nth-of-type(2n) + dt,
160
162
  dd:nth-of-type(2n + 1) {
161
- @include colour.colour-background("background-tint");
163
+ @include colour.tint;
162
164
  }
163
165
  }
164
166
 
@@ -8,6 +8,10 @@
8
8
  animation: none !important;
9
9
  transition: none !important;
10
10
  }
11
+
12
+ @media (prefers-contrast: more) {
13
+ background-image: none !important;
14
+ }
11
15
  }
12
16
 
13
17
  img,
@@ -150,6 +150,30 @@ small {
150
150
  @extend %chip-plain;
151
151
  }
152
152
 
153
+ &--black {
154
+ @include colour.black-accent;
155
+ }
156
+
157
+ &--pink {
158
+ @include colour.pink-accent;
159
+ }
160
+
161
+ &--orange {
162
+ @include colour.orange-accent;
163
+ }
164
+
165
+ &--yellow {
166
+ @include colour.yellow-accent;
167
+ }
168
+
169
+ &--green {
170
+ @include colour.green-accent;
171
+ }
172
+
173
+ &--blue {
174
+ @include colour.blue-accent;
175
+ }
176
+
153
177
  &:not(#{&}--plain) {
154
178
  @extend %chip-accent;
155
179
  }
@@ -368,15 +392,23 @@ small {
368
392
  @include colour.thick-keyline-accent(left);
369
393
 
370
394
  &__quote {
371
- font-weight: 700;
395
+ @include typography.main-font-weight-medium;
396
+ quotes: auto;
397
+ quotes: "‘" "’";
398
+
399
+ :first-child::before {
400
+ content: open-quote;
401
+ }
402
+
403
+ :last-child::after {
404
+ content: close-quote;
405
+ }
372
406
  }
373
407
 
374
408
  &__citation {
375
- @include typography.relative-font-size(16);
409
+ margin-top: spacing.space(1);
376
410
 
377
- .tna-blockquote & {
378
- margin: spacing.space(1) 0 0;
379
- }
411
+ @include typography.relative-font-size(16);
380
412
 
381
413
  &::before {
382
414
  content: "\2014" " ";
@@ -396,6 +428,10 @@ small {
396
428
 
397
429
  @include typography.relative-font-size(22);
398
430
  @include colour.colour-font("font-dark");
431
+
432
+ @include media.on-mobile {
433
+ @include typography.relative-font-size(20);
434
+ }
399
435
  }
400
436
 
401
437
  .tna-scene-setter {
@@ -0,0 +1 @@
1
+ $thick-border-width: 5px !default;
@@ -39,7 +39,7 @@ $colour-palette-brand: (
39
39
 
40
40
  $dark-grey: #26262a !default;
41
41
  $base-font: #343338 !default;
42
- $link-colour: #0062a8 !default;
42
+ $link-colour: #005fa3 !default;
43
43
  $link-colour-visited: #4c2c92 !default;
44
44
 
45
45
  /*
@@ -48,8 +48,8 @@ LIGHT THEME (DEFAULT)
48
48
  =========================================
49
49
  */
50
50
  $colour-palette-default: (
51
- "page-background": #f4f4f4,
52
- "background-tint": #e4e4e4,
51
+ "background": #f4f4f4,
52
+ "background-tint": brand-colour("light-grey"),
53
53
  "font-base": $base-font,
54
54
  "font-dark": brand-colour("black"),
55
55
  "font-light": brand-colour("black", 0.58),
@@ -80,16 +80,16 @@ $colour-palette-default: (
80
80
  "contrast-button-background": brand-colour("white"),
81
81
  "contrast-button-hover-text": brand-colour("white"),
82
82
  "contrast-button-hover-background": brand-colour("black"),
83
- "accent-background": #101112,
83
+ "accent-background": brand-colour("grey"),
84
84
  "accent-background-light": #ededed,
85
- "accent-font-base": brand-colour("white"),
86
- "accent-font-dark": brand-colour("white"),
87
- "accent-font-light": brand-colour("white", 0.7),
88
- "accent-icon-light": brand-colour("white", 0.45),
89
- "accent-link": brand-colour("white"),
90
- "accent-link-visited": #b9f,
91
- "accent-keyline": brand-colour("white", 0.5),
92
- "accent-keyline-dark": brand-colour("white", 0.8),
85
+ "accent-font-base": brand-colour("black"),
86
+ "accent-font-dark": brand-colour("black"),
87
+ "accent-font-light": brand-colour("black", 0.7),
88
+ "accent-icon-light": brand-colour("black", 0.45),
89
+ "accent-link": brand-colour("black"),
90
+ "accent-link-visited": brand-colour("black"),
91
+ "accent-keyline": brand-colour("black", 0.5),
92
+ "accent-keyline-dark": brand-colour("black", 0.8),
93
93
  "button-accent-text": brand-colour("black"),
94
94
  "button-accent-background": brand-colour("grey"),
95
95
  ) !default;
@@ -102,7 +102,7 @@ DARK THEME
102
102
  $colour-palette-dark: map.merge(
103
103
  $colour-palette-default,
104
104
  (
105
- "page-background": #212223,
105
+ "background": #212223,
106
106
  "background-tint": #323334,
107
107
  "font-base": brand-colour("white", 0.95),
108
108
  "font-dark": brand-colour("white"),
@@ -135,7 +135,7 @@ LIGHT, HIGH_CONTRAST THEME
135
135
  $colour-palette-high-contrast: map.merge(
136
136
  $colour-palette-default,
137
137
  (
138
- "page-background": brand-colour("white"),
138
+ "background": brand-colour("white"),
139
139
  "font-base": brand-colour("black"),
140
140
  "font-light": brand-colour("black"),
141
141
  "icon-light": brand-colour("black", 0.75),
@@ -167,7 +167,7 @@ DARK, HIGH_CONTRAST THEME
167
167
  $colour-palette-high-contrast-dark: map.merge(
168
168
  $colour-palette-dark,
169
169
  (
170
- "page-background": #111,
170
+ "background": #111,
171
171
  "font-base": brand-colour("white"),
172
172
  "font-light": brand-colour("white"),
173
173
  "icon-light": brand-colour("white", 0.75),