@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.
- package/nationalarchives/all.css +1 -1
- package/nationalarchives/all.css.map +1 -1
- package/nationalarchives/components/breadcrumbs/breadcrumbs.css +1 -1
- package/nationalarchives/components/breadcrumbs/breadcrumbs.css.map +1 -1
- package/nationalarchives/components/button/button.css +1 -1
- package/nationalarchives/components/button/button.css.map +1 -1
- package/nationalarchives/components/card/card.css +1 -1
- package/nationalarchives/components/card/card.css.map +1 -1
- package/nationalarchives/components/checkboxes/checkboxes.css +1 -1
- package/nationalarchives/components/checkboxes/checkboxes.css.map +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/date-input/date-input.css +1 -1
- package/nationalarchives/components/date-input/date-input.css.map +1 -1
- 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/featured-records/featured-records.css.map +1 -1
- package/nationalarchives/components/footer/footer.css +1 -1
- package/nationalarchives/components/footer/footer.css.map +1 -1
- package/nationalarchives/components/gallery/gallery.css.map +1 -1
- package/nationalarchives/components/global-header/README.md +1 -1
- 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.scss +13 -19
- package/nationalarchives/components/header/header.css +1 -1
- package/nationalarchives/components/header/header.css.map +1 -1
- package/nationalarchives/components/header/header.scss +13 -32
- package/nationalarchives/components/hero/hero.css +1 -1
- package/nationalarchives/components/hero/hero.css.map +1 -1
- package/nationalarchives/components/hero/hero.scss +2 -1
- package/nationalarchives/components/index-grid/index-grid.css +1 -1
- package/nationalarchives/components/index-grid/index-grid.css.map +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/quick-filters/quick-filters.css.map +1 -1
- package/nationalarchives/components/radios/radios.css +1 -1
- package/nationalarchives/components/radios/radios.css.map +1 -1
- 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-field/search-field.scss +24 -7
- package/nationalarchives/components/search-filters/search-filters.css.map +1 -1
- package/nationalarchives/components/select/select.css +1 -1
- package/nationalarchives/components/select/select.css.map +1 -1
- package/nationalarchives/components/skip-link/skip-link.css.map +1 -1
- package/nationalarchives/components/tabs/tabs.css +1 -1
- package/nationalarchives/components/tabs/tabs.css.map +1 -1
- 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/warning.css.map +1 -1
- package/nationalarchives/global-header-package.css +1 -1
- package/nationalarchives/global-header-package.css.map +1 -1
- package/nationalarchives/prototype-kit.css +1 -1
- package/nationalarchives/prototype-kit.css.map +1 -1
- package/nationalarchives/stories/utilities/colour-schemes/colour-combinations.stories.js +77 -32
- package/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js +72 -40
- package/nationalarchives/tools/_a11y.scss +0 -4
- package/nationalarchives/tools/_colour.scss +27 -65
- package/nationalarchives/utilities/_colour.scss +3 -36
- 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
|
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
|
-
${
|
55
|
-
(
|
56
|
-
|
57
|
-
|
58
|
-
|
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
|
-
<
|
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-${
|
92
|
-
name: `name-${
|
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-${
|
99
|
-
name: `categories-${
|
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-${
|
118
|
-
name: `type-${
|
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-${
|
138
|
-
name: `sort-${
|
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
|
192
|
-
|
204
|
+
export const Light = Template.bind({});
|
205
|
+
Light.parameters = {
|
193
206
|
a11y: {
|
194
|
-
disable: true,
|
207
|
+
// disable: true,
|
195
208
|
},
|
196
209
|
};
|
197
|
-
|
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 === "
|
79
|
-
? "tna-template--
|
80
|
-
: theme === "
|
81
|
-
? "tna-template--
|
82
|
-
: theme === "
|
83
|
-
? "tna-template--
|
84
|
-
:
|
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: "
|
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
|
-
|
1380
|
-
};
|
1381
|
-
LightHighContrast.args = {
|
1382
|
-
|
1383
|
-
|
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
|
-
|
1389
|
-
};
|
1390
|
-
DarkHighContrast.args = {
|
1391
|
-
|
1392
|
-
|
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
|
+
// };
|
@@ -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
|
-
|
174
|
-
|
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
|
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
|
-
|
215
|
-
|
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
|
-
|
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.
|
5
|
-
|
6
|
-
&--system-theme,
|
7
|
-
&--light-theme {
|
8
|
-
@include colour.colour-css-vars;
|
4
|
+
@include colour.light;
|
9
5
|
|
10
|
-
|
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
|
-
|
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.
|
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
|
18
|
+
"test:storybook": "test-storybook",
|
18
19
|
"test:unit": "jest --verbose",
|
19
20
|
"update:fixtures": "node tasks/update-fixtures.js"
|
20
21
|
},
|