@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.
- package/nationalarchives/all.css +1 -1
- package/nationalarchives/all.css.map +1 -1
- package/nationalarchives/all.js +1 -1
- package/nationalarchives/all.js.map +1 -1
- package/nationalarchives/analytics.js +1 -1
- package/nationalarchives/analytics.js.map +1 -1
- package/nationalarchives/components/_index.scss +1 -1
- package/nationalarchives/components/breadcrumbs/breadcrumbs.css +1 -1
- package/nationalarchives/components/breadcrumbs/breadcrumbs.css.map +1 -1
- package/nationalarchives/components/breadcrumbs/breadcrumbs.js +1 -1
- package/nationalarchives/components/breadcrumbs/breadcrumbs.js.map +1 -1
- package/nationalarchives/components/button/button.css +1 -1
- package/nationalarchives/components/button/button.css.map +1 -1
- package/nationalarchives/components/button/button.scss +7 -5
- package/nationalarchives/components/button/macro-options.json +12 -12
- package/nationalarchives/components/card/card.css +1 -1
- package/nationalarchives/components/card/card.css.map +1 -1
- package/nationalarchives/components/card/card.scss +6 -0
- package/nationalarchives/components/card/card.stories.js +11 -1
- package/nationalarchives/components/card/fixtures.json +102 -4
- package/nationalarchives/components/card/macro-options.json +8 -2
- package/nationalarchives/components/card/template.njk +3 -1
- package/nationalarchives/components/checkboxes/checkboxes.css +1 -1
- package/nationalarchives/components/checkboxes/checkboxes.css.map +1 -1
- package/nationalarchives/components/checkboxes/checkboxes.njk +1 -1
- package/nationalarchives/components/checkboxes/checkboxes.scss +7 -0
- package/nationalarchives/components/checkboxes/fixtures.json +6 -6
- package/nationalarchives/components/compound-filters/compound-filters.css +1 -1
- package/nationalarchives/components/compound-filters/compound-filters.css.map +1 -1
- package/nationalarchives/components/cookie-banner/cookie-banner.css +1 -1
- package/nationalarchives/components/cookie-banner/cookie-banner.css.map +1 -1
- package/nationalarchives/components/cookie-banner/cookie-banner.js +1 -1
- package/nationalarchives/components/cookie-banner/cookie-banner.js.map +1 -1
- package/nationalarchives/components/date-input/date-input.css +1 -1
- package/nationalarchives/components/date-input/date-input.css.map +1 -1
- package/nationalarchives/components/date-input/fixtures.json +5 -5
- package/nationalarchives/components/date-input/template.njk +2 -2
- package/nationalarchives/components/date-search/date-search.css +1 -1
- package/nationalarchives/components/date-search/date-search.css.map +1 -1
- package/nationalarchives/components/error-summary/error-summary.css +1 -1
- package/nationalarchives/components/error-summary/error-summary.css.map +1 -1
- package/nationalarchives/components/error-summary/error-summary.js +1 -1
- package/nationalarchives/components/error-summary/error-summary.js.map +1 -1
- package/nationalarchives/components/error-summary/error-summary.scss +1 -1
- package/nationalarchives/components/featured-records/featured-records.css +1 -1
- package/nationalarchives/components/featured-records/featured-records.css.map +1 -1
- package/nationalarchives/components/featured-records/featured-records.scss +3 -6
- package/nationalarchives/components/featured-records/featured-records.stories.js +3 -4
- package/nationalarchives/components/footer/fixtures.json +1 -1
- package/nationalarchives/components/footer/footer.css +1 -1
- package/nationalarchives/components/footer/footer.css.map +1 -1
- package/nationalarchives/components/footer/template.njk +9 -10
- package/nationalarchives/components/gallery/gallery.css +1 -1
- package/nationalarchives/components/gallery/gallery.css.map +1 -1
- package/nationalarchives/components/gallery/gallery.js +1 -1
- package/nationalarchives/components/gallery/gallery.js.map +1 -1
- package/nationalarchives/components/global-header/README.md +16 -16
- package/nationalarchives/components/global-header/global-header.css +1 -1
- package/nationalarchives/components/global-header/global-header.css.map +1 -1
- package/nationalarchives/components/global-header/global-header.js +1 -1
- package/nationalarchives/components/global-header/global-header.js.map +1 -1
- package/nationalarchives/components/global-header/global-header.scss +3 -4
- package/nationalarchives/components/global-header/template.njk +3 -3
- package/nationalarchives/components/grid/grid.css +1 -1
- package/nationalarchives/components/grid/grid.css.map +1 -1
- package/nationalarchives/components/header/header.css +1 -1
- package/nationalarchives/components/header/header.css.map +1 -1
- package/nationalarchives/components/header/header.js +1 -1
- package/nationalarchives/components/header/header.js.map +1 -1
- package/nationalarchives/components/header/header.scss +3 -4
- package/nationalarchives/components/hero/fixtures.json +63 -27
- package/nationalarchives/components/hero/hero.css +1 -1
- package/nationalarchives/components/hero/hero.css.map +1 -1
- package/nationalarchives/components/hero/hero.scss +46 -18
- package/nationalarchives/components/hero/hero.stories.js +99 -25
- package/nationalarchives/components/hero/macro-options.json +13 -13
- package/nationalarchives/components/hero/template.njk +15 -14
- package/nationalarchives/components/index-grid/index-grid.css +1 -1
- package/nationalarchives/components/index-grid/index-grid.css.map +1 -1
- package/nationalarchives/components/pagination/pagination.css +1 -1
- package/nationalarchives/components/pagination/pagination.css.map +1 -1
- package/nationalarchives/components/pagination/pagination.scss +2 -0
- package/nationalarchives/components/phase-banner/phase-banner.css +1 -1
- package/nationalarchives/components/phase-banner/phase-banner.css.map +1 -1
- package/nationalarchives/components/picture/picture.css +1 -1
- package/nationalarchives/components/picture/picture.css.map +1 -1
- package/nationalarchives/components/picture/picture.js +1 -1
- package/nationalarchives/components/picture/picture.js.map +1 -1
- package/nationalarchives/components/picture/picture.scss +1 -1
- package/nationalarchives/components/quick-filters/quick-filters.css +1 -1
- package/nationalarchives/components/quick-filters/quick-filters.css.map +1 -1
- package/nationalarchives/components/radios/fixtures.json +6 -6
- package/nationalarchives/components/radios/radios.css +1 -1
- package/nationalarchives/components/radios/radios.css.map +1 -1
- package/nationalarchives/components/radios/radios.njk +1 -1
- package/nationalarchives/components/radios/radios.scss +7 -0
- package/nationalarchives/components/search-field/search-field.css +1 -1
- package/nationalarchives/components/search-field/search-field.css.map +1 -1
- package/nationalarchives/components/search-filters/search-filters.css +1 -1
- package/nationalarchives/components/search-filters/search-filters.css.map +1 -1
- package/nationalarchives/components/search-filters/search-filters.js +1 -1
- package/nationalarchives/components/search-filters/search-filters.js.map +1 -1
- package/nationalarchives/components/search-filters/search-filters.scss +1 -1
- package/nationalarchives/components/select/select.css +1 -1
- package/nationalarchives/components/select/select.css.map +1 -1
- package/nationalarchives/components/select/select.scss +8 -8
- package/nationalarchives/components/sensitive-image/sensitive-image.css +1 -1
- package/nationalarchives/components/sensitive-image/sensitive-image.css.map +1 -1
- package/nationalarchives/components/sensitive-image/sensitive-image.js +1 -1
- package/nationalarchives/components/sensitive-image/sensitive-image.js.map +1 -1
- package/nationalarchives/components/sensitive-image/sensitive-image.scss +1 -1
- package/nationalarchives/components/skip-link/skip-link.css +1 -1
- package/nationalarchives/components/skip-link/skip-link.css.map +1 -1
- package/nationalarchives/components/skip-link/skip-link.js +1 -1
- package/nationalarchives/components/skip-link/skip-link.js.map +1 -1
- package/nationalarchives/components/skip-link/skip-link.scss +8 -2
- package/nationalarchives/components/tabs/tabs.css +1 -1
- package/nationalarchives/components/tabs/tabs.css.map +1 -1
- package/nationalarchives/components/tabs/tabs.js +1 -1
- package/nationalarchives/components/tabs/tabs.js.map +1 -1
- package/nationalarchives/components/tabs/tabs.scss +11 -19
- package/nationalarchives/components/text-input/text-input.css +1 -1
- package/nationalarchives/components/text-input/text-input.css.map +1 -1
- package/nationalarchives/components/textarea/textarea.css +1 -1
- package/nationalarchives/components/textarea/textarea.css.map +1 -1
- package/nationalarchives/components/warning/_index.scss +1 -0
- package/nationalarchives/components/warning/fixtures.json +13 -0
- package/nationalarchives/components/{message → warning}/macro-options.json +11 -5
- package/nationalarchives/components/warning/macro.njk +3 -0
- package/nationalarchives/components/warning/template.njk +10 -0
- package/nationalarchives/components/warning/warning.css +1 -0
- package/nationalarchives/components/warning/warning.css.map +1 -0
- package/nationalarchives/components/{message/message.scss → warning/warning.scss} +3 -3
- package/nationalarchives/components/{message/phase-banner.stories.js → warning/warning.stories.js} +10 -9
- package/nationalarchives/global-header-package.css +1 -1
- package/nationalarchives/global-header-package.css.map +1 -1
- package/nationalarchives/global-header-package.scss +6 -4
- package/nationalarchives/prototype-kit.css +1 -1
- package/nationalarchives/prototype-kit.css.map +1 -1
- package/nationalarchives/stories/intro.mdx +2 -2
- package/nationalarchives/stories/utilities/colour-schemes/colour-combinations.stories.js +11 -11
- package/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js +6 -10
- package/nationalarchives/stories/utilities/lists/lists.stories.js +30 -0
- package/nationalarchives/stories/utilities/overrides/overrides.stories.js +6 -0
- package/nationalarchives/stories/utilities/typography/heading-groups.stories.js +9 -0
- package/nationalarchives/stories/utilities/typography/headings.stories.js +3 -0
- package/nationalarchives/stories/utilities/typography/typography.stories.js +18 -0
- package/nationalarchives/templates/fixtures.json +4 -4
- package/nationalarchives/templates/layouts/_generic.njk +2 -2
- package/nationalarchives/tools/_a11y.scss +4 -0
- package/nationalarchives/tools/_colour.scss +144 -83
- package/nationalarchives/tools/_grid.scss +10 -0
- package/nationalarchives/tools/_typography.scss +4 -0
- package/nationalarchives/utilities/_a11y.scss +4 -4
- package/nationalarchives/utilities/_colour.scss +63 -28
- package/nationalarchives/utilities/_lists.scss +3 -1
- package/nationalarchives/utilities/_reset.scss +4 -0
- package/nationalarchives/utilities/_typography.scss +41 -5
- package/nationalarchives/variables/_borders.scss +1 -0
- package/nationalarchives/variables/_colour.scss +15 -15
- package/nationalarchives/variables/_index.scss +1 -0
- package/nationalarchives/variables/_typography.scss +1 -0
- package/package.json +25 -24
- package/nationalarchives/components/message/_index.scss +0 -1
- package/nationalarchives/components/message/fixtures.json +0 -13
- package/nationalarchives/components/message/macro.njk +0 -3
- package/nationalarchives/components/message/message.css +0 -1
- package/nationalarchives/components/message/message.css.map +0 -1
- 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
|
43
|
-
|
44
|
-
|
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:
|
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:
|
124
|
-
colour
|
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:
|
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:
|
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(
|
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(
|
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(
|
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(
|
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}:
|
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
|
-
|
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"
|
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"
|
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"
|
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
|
-
|
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;
|
@@ -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("
|
4
|
+
@include colour.colour-background("background");
|
9
5
|
|
10
6
|
&--system-theme,
|
11
7
|
&--light-theme {
|
12
8
|
@include colour.colour-css-vars;
|
13
|
-
|
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
|
-
|
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
|
-
|
42
|
+
@media (prefers-contrast: more) {
|
50
43
|
@include colour.colour-css-vars-high-contrast-dark;
|
51
44
|
}
|
52
45
|
}
|
53
46
|
|
54
|
-
&--
|
55
|
-
|
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
|
64
|
+
@include colour.pink-accent;
|
60
65
|
}
|
61
66
|
|
62
67
|
&--orange-accent {
|
63
|
-
@include colour.accent
|
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
|
76
|
+
@include colour.green-accent;
|
68
77
|
}
|
69
78
|
|
70
79
|
&--blue-accent {
|
71
|
-
@include colour.accent
|
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.
|
163
|
+
@include colour.tint;
|
162
164
|
}
|
163
165
|
}
|
164
166
|
|
@@ -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
|
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
|
-
|
409
|
+
margin-top: spacing.space(1);
|
376
410
|
|
377
|
-
.
|
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: #
|
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
|
-
"
|
52
|
-
"background-tint":
|
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":
|
83
|
+
"accent-background": brand-colour("grey"),
|
84
84
|
"accent-background-light": #ededed,
|
85
|
-
"accent-font-base": brand-colour("
|
86
|
-
"accent-font-dark": brand-colour("
|
87
|
-
"accent-font-light": brand-colour("
|
88
|
-
"accent-icon-light": brand-colour("
|
89
|
-
"accent-link": brand-colour("
|
90
|
-
"accent-link-visited":
|
91
|
-
"accent-keyline": brand-colour("
|
92
|
-
"accent-keyline-dark": brand-colour("
|
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
|
-
"
|
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
|
-
"
|
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
|
-
"
|
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),
|