Skip to content

Commit

Permalink
Improve forced color support (#127)
Browse files Browse the repository at this point in the history
* Improve forced color support

* Remove hover state for header logos with no link
  • Loading branch information
ahosgood authored May 30, 2024
1 parent 5dde091 commit 0e95221
Show file tree
Hide file tree
Showing 32 changed files with 429 additions and 274 deletions.
6 changes: 6 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

- Detail summaries no longer stretch the full width of the container
- Index grid `headingHref` changed to `href`
- Common page elements such as headers and footers are hidden when using print styles
- Accented keylines now use the more saturated variant of their colour for increased contrast with other accented elements

### Deprecated

Expand All @@ -27,6 +29,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

- The theme stored in a cookie is now reflected in pages using the prototype kit
- Removed duplicated source from hero image `<picture>` elements
- Better support for forced colors mode on several components
- Remove duplicated `<main>` element on index-grid and list prototype kit templates
- Accented header component colour fixed
- Removed hover state for header logos with no link

### Security

Expand Down
25 changes: 25 additions & 0 deletions src/nationalarchives/components/accordion/accordion.scss
Original file line number Diff line number Diff line change
Expand Up @@ -102,4 +102,29 @@
border-width: 0 0.5rem #{math.div(math.sqrt(3), 2)}rem 0.5rem;
}
}

@include colour.on-forced-colours {
&__summary {
&::before {
content: "\2193";

width: auto;
height: auto;

top: calc(50% - 0.5rem);

line-height: 1rem;

border: none;
}
}

&__details[open] &__summary {
&::before {
content: "\2191";

border: none;
}
}
}
}
17 changes: 0 additions & 17 deletions src/nationalarchives/components/breadcrumbs/breadcrumbs.scss
Original file line number Diff line number Diff line change
Expand Up @@ -58,23 +58,6 @@
&:hover {
@include colour.colour-font("font-dark");
}

@include colour.on-high-contrast-and-forced-colours {
padding-right: spacing.space(0.75);
padding-left: spacing.space(0.75);

text-decoration: none;

@include colour.colour-border("keyline-dark", 1px);

&:hover {
text-decoration: underline;

@include colour.colour-font("contrast-background");

@include colour.colour-background("contrast-font-base");
}
}
}

button#{&}__link {
Expand Down
6 changes: 6 additions & 0 deletions src/nationalarchives/components/button/button.scss
Original file line number Diff line number Diff line change
Expand Up @@ -181,4 +181,10 @@ $button-border-width: 4px !default;
@include colour.colour-background("font-dark");
}
}

@include colour.on-forced-colours {
&:hover {
@include typography.interacted-text-decoration;
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
padding-top: spacing.space(2);
padding-bottom: spacing.space(2);

@include media.hide-on-print;

&--contrast {
@include colour.contrast;
}
Expand Down Expand Up @@ -40,8 +42,4 @@
&--rejected {
}
}

@include media.on-print {
display: none;
}
}
25 changes: 25 additions & 0 deletions src/nationalarchives/components/details/details.scss
Original file line number Diff line number Diff line change
Expand Up @@ -112,4 +112,29 @@
@include colour.thick-keyline(left);
}
}

@include colour.on-forced-colours {
&__summary {
&::before {
content: "\2192";

width: auto;
height: auto;

top: calc(50% - 0.5rem);

line-height: 1rem;

border: none;
}
}

&__details[open] &__summary {
&::before {
content: "\2193";

border: none;
}
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,8 @@
align-items: center;
gap: spacing.space(2);

border-top-width: 0;

@include colour.colour-border("keyline", 1px);
border-top-width: 0;
}

&__image {
Expand Down
2 changes: 2 additions & 0 deletions src/nationalarchives/components/footer/footer.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
@use "../../tools/typography";

.tna-footer {
@include media.hide-on-print;

&__inner {
@include colour.contrast;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
}
]
},
"html": "<header class=\"tna-global-header \" data-module=\"tna-global-header\"><div class=\"tna-container tna-global-header__main\"><div class=\"tna-column tna-column--flex-1 tna-column--order-2\"><span class=\"tna-global-header__logo-wrapper\"><a href=\"#/\" class=\"tna-global-header__logo\" title=\"The National Archives\"><svg xmlns=\"http://www.w3.org/2000/svg\" xml:space=\"preserve\" class=\"tna-logo\" viewBox=\"0 0 160 160\" width=\"96\" height=\"96\"><title>The National Archives</title><path fill=\"transparent\" d=\"M0 0h160v160H0z\" class=\"tna-logo__background\" /><g class=\"tna-logo__foreground\" fill=\"currentColor\"><path d=\"M1.9 107.2h156.3V158H1.9v-50.8zm0-52.7h156.3v50.8H1.9V54.5zm0-52.6h77.2v50.8H1.9V1.9zm79 0h77.2v50.8H80.9V1.9zm0-1.9H0v160h160V0H80.9z\" /><path d=\"M21.3 19.5h-5.4v-3h14.3v3h-5.4v18.4h-3.5zM31.6 16.5H35v9h8.4v-9h3.4v21.4h-3.4v-9.3H35v9.3h-3.4zM50.9 16.5h12.2v3h-8.8v6.1h7.4v3h-7.4v6.3h8.8v3H50.9zM19.7 69.2h3.8l6.4 12.5c.6 1.1 1.1 2.7 1.6 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.5v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2H23c.2 1.4.3 3.3.3 5v11.5h-3.5c-.1 0-.1-21.4-.1-21.4zM47.8 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8H45c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zM43 69.2h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6L43 69.2zM57.2 72.3h-5.4v-3.1H66v3.1h-5.4v18.4h-3.4zM67.8 69.2h3.5v21.4h-3.5zM87.5 80c0-5.3-1.7-8-4.8-8-3.2 0-4.8 2.7-4.8 8 0 5.2 1.6 7.9 4.8 7.9 3.2 0 4.8-2.7 4.8-7.9m-13.3 0c0-7 3-11.1 8.5-11.1 5.4 0 8.4 4.1 8.4 11.1 0 6.9-3 11-8.4 11s-8.5-4.1-8.5-11M94.3 69.2H98l6.4 12.5c.6 1.1 1.2 2.7 1.7 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.4v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2h-.2c.2 1.4.3 3.3.3 5v11.5h-3.5V69.2zM122.4 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM129.9 69.2h3.5v18.4h8.4v3.1h-11.9zM26.9 135.2l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4H29l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM39.9 132.5c2.5 0 3.4-1.6 3.4-3.9 0-2.2-1-3.8-3.4-3.8h-2.7v7.7h2.7zm-6.1-10.7h6.4c4.5 0 6.7 2.4 6.7 6.6 0 3.1-1.5 5.6-3.7 6.3v.2c1 1.1 4 7.5 4.8 7.9v.5h-3.8c-1-.6-3.6-7.2-4.4-7.8h-2.5v7.8h-3.5v-21.5zM52.9 132.5c0 5.3 1.9 8 4.8 8s4-2 4-5.2l3.5.1c0 .2.1.4.1.6 0 4.4-2.1 7.5-7.5 7.5-5.2 0-8.5-3.9-8.5-11.1 0-7.1 3.3-11 8.5-11 6.4 0 7.5 4.6 7.5 7.2 0 .3 0 .7-.1.9l-3.5.1c0-3.3-1.2-5.2-4-5.2-2.9.2-4.8 2.9-4.8 8.1M68 121.8h3.5v9.1h8.3v-9.1h3.5v21.5h-3.5v-9.4h-8.3v9.4H68zM87.9 121.8h3.5v21.4h-3.5zM94.2 121.8h3.6l3.2 12.3c.5 1.9.8 3.6 1.1 5.6h.2c.3-2 .6-3.7 1.1-5.6l3.2-12.3h3.6l-6.1 21.4H100l-5.8-21.4zM112.7 121.8H125v3.1h-8.8v6h7.4v3h-7.4v6.3h8.8v3.1h-12.3zM130.4 136c0 .2-.1.5-.1.8 0 1.9.8 3.7 3.4 3.7 2.1 0 3.3-1.2 3.3-2.9 0-1.6-.7-2.4-2.2-3l-3.4-1.3c-2.4-.9-4.2-2.4-4.2-5.7 0-3.5 2.3-6.1 6.6-6.1 5.5 0 6.4 3.6 6.4 5.9 0 .3 0 .7-.1 1.1l-3.4.1c0-.2.1-.5.1-.7 0-1.7-.6-3.2-3-3.2-2.1 0-3 1.2-3 2.8 0 1.7.9 2.5 2.2 2.9l3.5 1.3c2.6 1 4.3 2.6 4.3 5.8 0 3.6-2.4 6.1-7 6.1-5.9 0-6.8-3.9-6.8-6.5 0-.3 0-.6.1-1l3.3-.1z\" /></g></svg></a></span></div><div class=\"tna-column tna-column--order-2 tna-global-header__navigation-button-wrapper\"><button class=\"tna-global-header__navigation-button\" type=\"button\" aria-controls=\"tna-header__navigation tna-header__top-navigation\" hidden>Menu<span class=\"tna-global-header__hamburger\"></span></button></div><nav class=\"tna-column tna-column--full-small tna-column--full-tiny tna-column--order-3 tna-global-header__navigation-wrapper\" id=\"tna-header__navigation\" aria-label=\"Primary\"><ul class=\"tna-global-header__navigation\"><li class=\"tna-global-header__navigation-item\"><a href=\"#/alpha\" class=\"tna-global-header__navigation-item-link\" tabindex=\"0\">Alpha</a></li><li class=\"tna-global-header__navigation-item\"><a href=\"#/beta\" class=\"tna-global-header__navigation-item-link\" tabindex=\"0\">Beta</a></li><li class=\"tna-global-header__navigation-item\"><a href=\"#/gamma\" class=\"tna-global-header__navigation-item-link\" tabindex=\"0\">Gamma</a></li></ul></nav><nav class=\"tna-column tna-column--full tna-column--order-1 tna-column--order-4-small tna-column--order-4-tiny tna-global-header__top-navigation-wrapper\" id=\"tna-header__top-navigation\" aria-label=\"Secondary\"><ul class=\"tna-global-header__top-navigation\"><li class=\"tna-global-header__top-navigation-item\"><a href=\"#/top-1\" class=\"tna-global-header__top-navigation-link\" tabindex=\"0\">Top item 1</a></li><li class=\"tna-global-header__top-navigation-item\"><a href=\"#/top-2\" class=\"tna-global-header__top-navigation-link\" tabindex=\"0\">Top item 2</a></li></ul></nav></div></header>"
"html": "<header class=\"tna-global-header \" data-module=\"tna-global-header\"><div class=\"tna-container tna-global-header__main\"><div class=\"tna-column tna-column--flex-1 tna-column--order-2\"><span class=\"tna-global-header__logo-wrapper\"><a href=\"#/\" class=\"tna-global-header__logo tna-global-header__logo--link\" title=\"The National Archives\"><svg xmlns=\"http://www.w3.org/2000/svg\" xml:space=\"preserve\" class=\"tna-logo\" viewBox=\"0 0 160 160\" width=\"96\" height=\"96\"><title>The National Archives</title><path fill=\"transparent\" d=\"M0 0h160v160H0z\" class=\"tna-logo__background\" /><g class=\"tna-logo__foreground\" fill=\"currentColor\"><path d=\"M1.9 107.2h156.3V158H1.9v-50.8zm0-52.7h156.3v50.8H1.9V54.5zm0-52.6h77.2v50.8H1.9V1.9zm79 0h77.2v50.8H80.9V1.9zm0-1.9H0v160h160V0H80.9z\" /><path d=\"M21.3 19.5h-5.4v-3h14.3v3h-5.4v18.4h-3.5zM31.6 16.5H35v9h8.4v-9h3.4v21.4h-3.4v-9.3H35v9.3h-3.4zM50.9 16.5h12.2v3h-8.8v6.1h7.4v3h-7.4v6.3h8.8v3H50.9zM19.7 69.2h3.8l6.4 12.5c.6 1.1 1.1 2.7 1.6 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.5v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2H23c.2 1.4.3 3.3.3 5v11.5h-3.5c-.1 0-.1-21.4-.1-21.4zM47.8 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8H45c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zM43 69.2h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6L43 69.2zM57.2 72.3h-5.4v-3.1H66v3.1h-5.4v18.4h-3.4zM67.8 69.2h3.5v21.4h-3.5zM87.5 80c0-5.3-1.7-8-4.8-8-3.2 0-4.8 2.7-4.8 8 0 5.2 1.6 7.9 4.8 7.9 3.2 0 4.8-2.7 4.8-7.9m-13.3 0c0-7 3-11.1 8.5-11.1 5.4 0 8.4 4.1 8.4 11.1 0 6.9-3 11-8.4 11s-8.5-4.1-8.5-11M94.3 69.2H98l6.4 12.5c.6 1.1 1.2 2.7 1.7 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.4v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2h-.2c.2 1.4.3 3.3.3 5v11.5h-3.5V69.2zM122.4 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM129.9 69.2h3.5v18.4h8.4v3.1h-11.9zM26.9 135.2l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4H29l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM39.9 132.5c2.5 0 3.4-1.6 3.4-3.9 0-2.2-1-3.8-3.4-3.8h-2.7v7.7h2.7zm-6.1-10.7h6.4c4.5 0 6.7 2.4 6.7 6.6 0 3.1-1.5 5.6-3.7 6.3v.2c1 1.1 4 7.5 4.8 7.9v.5h-3.8c-1-.6-3.6-7.2-4.4-7.8h-2.5v7.8h-3.5v-21.5zM52.9 132.5c0 5.3 1.9 8 4.8 8s4-2 4-5.2l3.5.1c0 .2.1.4.1.6 0 4.4-2.1 7.5-7.5 7.5-5.2 0-8.5-3.9-8.5-11.1 0-7.1 3.3-11 8.5-11 6.4 0 7.5 4.6 7.5 7.2 0 .3 0 .7-.1.9l-3.5.1c0-3.3-1.2-5.2-4-5.2-2.9.2-4.8 2.9-4.8 8.1M68 121.8h3.5v9.1h8.3v-9.1h3.5v21.5h-3.5v-9.4h-8.3v9.4H68zM87.9 121.8h3.5v21.4h-3.5zM94.2 121.8h3.6l3.2 12.3c.5 1.9.8 3.6 1.1 5.6h.2c.3-2 .6-3.7 1.1-5.6l3.2-12.3h3.6l-6.1 21.4H100l-5.8-21.4zM112.7 121.8H125v3.1h-8.8v6h7.4v3h-7.4v6.3h8.8v3.1h-12.3zM130.4 136c0 .2-.1.5-.1.8 0 1.9.8 3.7 3.4 3.7 2.1 0 3.3-1.2 3.3-2.9 0-1.6-.7-2.4-2.2-3l-3.4-1.3c-2.4-.9-4.2-2.4-4.2-5.7 0-3.5 2.3-6.1 6.6-6.1 5.5 0 6.4 3.6 6.4 5.9 0 .3 0 .7-.1 1.1l-3.4.1c0-.2.1-.5.1-.7 0-1.7-.6-3.2-3-3.2-2.1 0-3 1.2-3 2.8 0 1.7.9 2.5 2.2 2.9l3.5 1.3c2.6 1 4.3 2.6 4.3 5.8 0 3.6-2.4 6.1-7 6.1-5.9 0-6.8-3.9-6.8-6.5 0-.3 0-.6.1-1l3.3-.1z\" /></g></svg></a></span></div><div class=\"tna-column tna-column--order-2 tna-global-header__navigation-button-wrapper\"><button class=\"tna-global-header__navigation-button\" type=\"button\" aria-controls=\"tna-header__navigation tna-header__top-navigation\" hidden>Menu<span class=\"tna-global-header__hamburger\"></span></button></div><nav class=\"tna-column tna-column--full-small tna-column--full-tiny tna-column--order-3 tna-global-header__navigation-wrapper\" id=\"tna-header__navigation\" aria-label=\"Primary\"><ul class=\"tna-global-header__navigation\"><li class=\"tna-global-header__navigation-item\"><a href=\"#/alpha\" class=\"tna-global-header__navigation-item-link\" tabindex=\"0\">Alpha</a></li><li class=\"tna-global-header__navigation-item\"><a href=\"#/beta\" class=\"tna-global-header__navigation-item-link\" tabindex=\"0\">Beta</a></li><li class=\"tna-global-header__navigation-item\"><a href=\"#/gamma\" class=\"tna-global-header__navigation-item-link\" tabindex=\"0\">Gamma</a></li></ul></nav><nav class=\"tna-column tna-column--full tna-column--order-1 tna-column--order-4-small tna-column--order-4-tiny tna-global-header__top-navigation-wrapper\" id=\"tna-header__top-navigation\" aria-label=\"Secondary\"><ul class=\"tna-global-header__top-navigation\"><li class=\"tna-global-header__top-navigation-item\"><a href=\"#/top-1\" class=\"tna-global-header__top-navigation-link\" tabindex=\"0\">Top item 1</a></li><li class=\"tna-global-header__top-navigation-item\"><a href=\"#/top-2\" class=\"tna-global-header__top-navigation-link\" tabindex=\"0\">Top item 2</a></li></ul></nav></div></header>"
}
]
}
27 changes: 23 additions & 4 deletions src/nationalarchives/components/global-header/global-header.scss
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@
rgb(0 0 0 / 100%) 100%
);

@include media.hide-on-print;

.tna-template--dark-theme & {
background: colour.brand-colour("black");
}
Expand Down Expand Up @@ -42,11 +44,13 @@

text-decoration: none;

&:hover {
text-decoration: none;
&--link {
&:hover {
text-decoration: none;

@include colour.colour-outline("font-dark", 0.3125rem, solid);
outline-offset: 1px;
@include colour.colour-outline("font-dark", 0.3125rem, solid);
outline-offset: 1px;
}
}
}

Expand Down Expand Up @@ -390,4 +394,19 @@
@include colour.colour-font("link", true);
}
}

@include colour.on-forced-colours {
&__navigation-button {
height: auto;

line-height: 2;

border: none;
@include typography.relative-font-size(18);
}

&__hamburger {
display: none;
}
}
}
2 changes: 1 addition & 1 deletion src/nationalarchives/components/global-header/template.njk
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<div class="tna-column tna-column--flex-1 tna-column--order-2">
<span class="tna-global-header__logo-wrapper">
{% if params.logo.href -%}
<a href="{{ params.logo.href }}" class="tna-global-header__logo" title="{%- if params.logo.title -%}{{ params.logo.title }}{%- else -%}The National Archives{%- if params.logo.strapline %} - {{ params.logo.strapline }}{%- endif -%}{%- endif -%}">
<a href="{{ params.logo.href }}" class="tna-global-header__logo tna-global-header__logo--link" title="{%- if params.logo.title -%}{{ params.logo.title }}{%- else -%}The National Archives{%- if params.logo.strapline %} - {{ params.logo.strapline }}{%- endif -%}{%- endif -%}">
{%- else %}
<span class="tna-global-header__logo">
{%- endif %}
Expand Down
Loading

0 comments on commit 0e95221

Please sign in to comment.