diff --git a/CHANGELOG.md b/CHANGELOG.md index c0f4fd25..f8ecb099 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed - Removed `:focus` styles and replaced with `:focus-visible` +- Light accent blocks appear normal accent colours in dark themes ### Deprecated ### Removed diff --git a/src/nationalarchives/components/button/button.scss b/src/nationalarchives/components/button/button.scss index aafa46fd..249a2bf8 100644 --- a/src/nationalarchives/components/button/button.scss +++ b/src/nationalarchives/components/button/button.scss @@ -173,29 +173,64 @@ $button-border-width: 4px !default; } } - .tna-background-accent & { + .tna-background-accent &, + .tna-template--dark-theme .tna-background-accent-light & { &:hover { @include colour.colour-font("font-dark"); } } - .tna-background-accent &--accent { - @include colour.contrast; + .tna-background-accent &--accent, + .tna-template--dark-theme .tna-background-accent-light &--accent { + // @include colour.contrast; - @include colour.colour-background("button-background"); + // @include colour.colour-background("button-background"); + @include colour.colour-background("contrast-button-background"); - @include colour.colour-border("button-background"); + // @include colour.colour-border("button-background"); + @include colour.colour-border("contrast-button-background"); &, &:link, &:visited { - @include colour.colour-font("button-text"); + // @include colour.colour-font("button-text"); + @include colour.colour-font("contrast-button-text"); } &:hover { - @include colour.colour-font("font-dark"); + // @include colour.colour-font("font-dark"); + @include colour.colour-font("contrast-font-dark"); - @include colour.colour-background("background"); + // @include colour.colour-background("background"); + @include colour.colour-background("contrast-background"); + } + } + + @media (prefers-color-scheme: dark) { + .tna-template--system-theme .tna-background-accent-light & { + &:hover { + @include colour.colour-font("font-dark"); + } + } + + .tna-template--system-theme .tna-background-accent-light &--accent { + // @include colour.contrast; + + @include colour.colour-background("contrast-button-background"); + + @include colour.colour-border("contrast-button-background"); + + &, + &:link, + &:visited { + @include colour.colour-font("contrast-button-text"); + } + + &:hover { + @include colour.colour-font("contrast-font-dark"); + + @include colour.colour-background("contrast-background"); + } } } diff --git a/src/nationalarchives/components/card/card.scss b/src/nationalarchives/components/card/card.scss index 28aa4e00..c68c929a 100644 --- a/src/nationalarchives/components/card/card.scss +++ b/src/nationalarchives/components/card/card.scss @@ -189,7 +189,7 @@ @include colour.colour-border("keyline-dark", 1px); } - &:not(#{&}--horizontal) { + &:not(&--horizontal) { @include colour.on-high-contrast-and-forced-colours { .tna-card__inner { padding-bottom: spacing.space(1); diff --git a/src/nationalarchives/tools/_colour.scss b/src/nationalarchives/tools/_colour.scss index 883534bd..3e54de8b 100644 --- a/src/nationalarchives/tools/_colour.scss +++ b/src/nationalarchives/tools/_colour.scss @@ -308,22 +308,54 @@ colour.$colour-palette-default, "button-hover-background" )}; - --accent-border: var(--font-base); --accent-list-marker: var(--font-base); + --accent-border: var(--accent-background); @include colour-background("background"); @include colour-font("font-base"); .tna-template--system-theme & { @media (prefers-color-scheme: dark) { - --link: #{map.get(colour.$colour-palette-default, "link")}; - --link-visited: #{map.get(colour.$colour-palette-default, "link-visited")}; + // --link: #{map.get(colour.$colour-palette-default, "link")}; + // --link-visited: #{map.get(colour.$colour-palette-default, "link-visited")}; + + --background: var(--accent-background); + --font-base: var(--accent-font-base); + --font-dark: var(--accent-font-dark); + --font-light: var(--accent-font-light); + --icon-light: var(--accent-icon-light); + --link: var(--accent-link); + --link-visited: var(--accent-link); + --keyline: var(--accent-keyline); + --keyline-dark: var(--accent-keyline-dark); + --accent-list-marker: var(--accent-font-base); + --accent-border: var(--accent-font-dark); + --button-text: var(--accent-button-text); + --button-background: var(--accent-button-background); + --button-hover-text: var(--accent-button-hover-text); + --button-hover-background: var(--accent-button-hover-background); } } .tna-template--dark-theme & { - --link: #{map.get(colour.$colour-palette-default, "link")}; - --link-visited: #{map.get(colour.$colour-palette-default, "link-visited")}; + // --link: #{map.get(colour.$colour-palette-default, "link")}; + // --link-visited: #{map.get(colour.$colour-palette-default, "link-visited")}; + + --background: var(--accent-background); + --font-base: var(--accent-font-base); + --font-dark: var(--accent-font-dark); + --font-light: var(--accent-font-light); + --icon-light: var(--accent-icon-light); + --link: var(--accent-link); + --link-visited: var(--accent-link); + --keyline: var(--accent-keyline); + --keyline-dark: var(--accent-keyline-dark); + --accent-list-marker: var(--accent-font-base); + --accent-border: var(--accent-font-dark); + --button-text: var(--accent-button-text); + --button-background: var(--accent-button-background); + --button-hover-text: var(--accent-button-hover-text); + --button-hover-background: var(--accent-button-hover-background); } } diff --git a/src/nationalarchives/utilities/colour/colour-combinations.stories.js b/src/nationalarchives/utilities/colour/colour-combinations.stories.js index e8315a6e..ba2e6665 100644 --- a/src/nationalarchives/utilities/colour/colour-combinations.stories.js +++ b/src/nationalarchives/utilities/colour/colour-combinations.stories.js @@ -311,6 +311,11 @@ Dark.args = { theme: "tna-template--dark-theme", }; +// export const System = Template.bind({}); +// System.args = { +// theme: "tna-template--system-theme", +// }; + export const HighContrast = Template.bind({}); HighContrast.args = { theme: "tna-template--high-contrast-theme", diff --git a/src/nationalarchives/utilities/lists/_index.scss b/src/nationalarchives/utilities/lists/_index.scss index 54d960e1..a9408f77 100644 --- a/src/nationalarchives/utilities/lists/_index.scss +++ b/src/nationalarchives/utilities/lists/_index.scss @@ -85,7 +85,7 @@ ol { cursor: pointer; } - &:not(#{&}--plain) { + &:not(&--plain) { gap: spacing.space(0.5) spacing.space(1); } @@ -93,7 +93,7 @@ ol { @extend %chip-plain; } - &:not(#{&}--plain) &__item { + &:not(&--plain) &__item { @extend %chip-accent; } diff --git a/src/nationalarchives/utilities/typography/_index.scss b/src/nationalarchives/utilities/typography/_index.scss index 87518527..4f040fdb 100644 --- a/src/nationalarchives/utilities/typography/_index.scss +++ b/src/nationalarchives/utilities/typography/_index.scss @@ -125,10 +125,31 @@ small { -webkit-print-color-adjust: exact; print-color-adjust: exact; - .tna-background-accent & { - @include colour.contrast; + .tna-background-accent &, + .tna-template--dark-theme .tna-background-accent-light & { + @include colour.colour-font("contrast-font-base"); + + @include colour.colour-background("contrast-background"); @include colour.colour-border("contrast-background"); + + .fa-solid { + @include colour.colour-font("contrast-icon-light"); + } + } + + .tna-template--system-theme .tna-background-accent-light & { + @media (prefers-color-scheme: dark) { + @include colour.colour-font("contrast-font-base"); + + @include colour.colour-background("contrast-background"); + + @include colour.colour-border("contrast-background"); + + .fa-solid { + @include colour.colour-font("contrast-icon-light"); + } + } } } @@ -163,7 +184,7 @@ small { @include colour.blue-accent; } - &:not(#{&}--plain) { + &:not(&--plain) { @extend %chip-accent; } } @@ -348,7 +369,7 @@ small { @extend %chip-plain; } - &:not(#{&}--plain) { + &:not(&--plain) { @extend %chip-accent; } }