From 4d6fc5148f1c3d847dce342cafedd73ec7167dbe Mon Sep 17 00:00:00 2001 From: Helen C Date: Thu, 17 Aug 2023 10:08:53 +0100 Subject: [PATCH] Update stylelint and stylelint-config-torchbox, disable rules that interfere with system colours --- package-lock.json | 16 +++--- package.json | 4 +- tbx/static_src/sass/abstracts/_mixins.scss | 11 ++++ tbx/static_src/sass/components/_badge.scss | 5 ++ tbx/static_src/sass/components/_nav-item.scss | 56 ++++++++++++++++++- .../sass/components/_streamfield.scss | 21 +++++++ tbx/static_src/sass/components/_subnav.scss | 19 +++++++ 7 files changed, 121 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index f315c87a3..f19341f94 100644 --- a/package-lock.json +++ b/package-lock.json @@ -45,8 +45,8 @@ "prettier": "^2.5.1", "sass": "^1.45.0", "sass-loader": "^12.4.0", - "stylelint": "^13.0.0", - "stylelint-config-torchbox": "^1.0.0", + "stylelint": "^13.13.0", + "stylelint-config-torchbox": "^1.1.1", "url-loader": "^4.1.1", "webpack": "^5.65.0", "webpack-cli": "^4.9.1" @@ -13797,9 +13797,9 @@ } }, "node_modules/stylelint-config-torchbox": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/stylelint-config-torchbox/-/stylelint-config-torchbox-1.0.0.tgz", - "integrity": "sha512-9hhptmRSKgEpznJp1Nf+zxynGzHXd5BjkNfbemtesUqhGuEdIAQLSVPBPk3NyVXBgADjerocK+uaHeKFH70HNg==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/stylelint-config-torchbox/-/stylelint-config-torchbox-1.1.1.tgz", + "integrity": "sha512-rzuzV/h8vXrZB2o8NwUZ7QUTO1kAI6h/ZD+5wmqzIQiuKdYR1i/3bZ1QHXV6QQ4mWZVOagEP6fNFm7/NxeShQw==", "dev": true, "dependencies": { "stylelint-a11y": "^1.2.3", @@ -25700,9 +25700,9 @@ } }, "stylelint-config-torchbox": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/stylelint-config-torchbox/-/stylelint-config-torchbox-1.0.0.tgz", - "integrity": "sha512-9hhptmRSKgEpznJp1Nf+zxynGzHXd5BjkNfbemtesUqhGuEdIAQLSVPBPk3NyVXBgADjerocK+uaHeKFH70HNg==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/stylelint-config-torchbox/-/stylelint-config-torchbox-1.1.1.tgz", + "integrity": "sha512-rzuzV/h8vXrZB2o8NwUZ7QUTO1kAI6h/ZD+5wmqzIQiuKdYR1i/3bZ1QHXV6QQ4mWZVOagEP6fNFm7/NxeShQw==", "dev": true, "requires": { "stylelint-a11y": "^1.2.3", diff --git a/package.json b/package.json index c5b41406d..1bcbd1f29 100644 --- a/package.json +++ b/package.json @@ -87,8 +87,8 @@ "prettier": "^2.5.1", "sass": "^1.45.0", "sass-loader": "^12.4.0", - "stylelint": "^13.0.0", - "stylelint-config-torchbox": "^1.0.0", + "stylelint": "^13.13.0", + "stylelint-config-torchbox": "^1.1.1", "url-loader": "^4.1.1", "webpack": "^5.65.0", "webpack-cli": "^4.9.1" diff --git a/tbx/static_src/sass/abstracts/_mixins.scss b/tbx/static_src/sass/abstracts/_mixins.scss index d1527aade..5584e06df 100755 --- a/tbx/static_src/sass/abstracts/_mixins.scss +++ b/tbx/static_src/sass/abstracts/_mixins.scss @@ -193,6 +193,17 @@ } } +@mixin hcm-underline() { + text-decoration: underline; + text-decoration-color: var(--color--underline); + text-underline-offset: 2px; + text-decoration-thickness: 2px; +} + +@mixin hcm-underline-hover() { + text-decoration-thickness: 4px; +} + /* ============================================ Impact Report link styles */ diff --git a/tbx/static_src/sass/components/_badge.scss b/tbx/static_src/sass/components/_badge.scss index a851ee07f..a9bf52274 100644 --- a/tbx/static_src/sass/components/_badge.scss +++ b/tbx/static_src/sass/components/_badge.scss @@ -45,6 +45,11 @@ } } + @include hcm() { + border: 1px solid var(--color--dark-indigo); + padding: 2px; + } + &--desktop { right: -20px; top: -20px; diff --git a/tbx/static_src/sass/components/_nav-item.scss b/tbx/static_src/sass/components/_nav-item.scss index 4868b88ed..ddcd53e8a 100644 --- a/tbx/static_src/sass/components/_nav-item.scss +++ b/tbx/static_src/sass/components/_nav-item.scss @@ -99,6 +99,16 @@ //This only displays for windows high contrast mode outline: 3px solid var(--color--header-links) transparent; } + + @include hcm() { + @include hcm-underline(); + + &:hover, + &:focus, + &--active { + @include hcm-underline-hover(); + } + } } &__badge-link { @@ -162,6 +172,16 @@ &:hover { color: var(--color--white); } + + @include hcm() { + @include hcm-underline(); + + &:hover, + &:focus, + &--active { + @include hcm-underline-hover(); + } + } } &__badge-link { @@ -202,6 +222,19 @@ &:hover { cursor: pointer; } + + @include hcm() { + /* stylelint-disable value-keyword-case */ + color: ButtonText; + border: 1px solid ButtonBorder; + + &:hover, + &:focus { + color: ActiveText; + border-color: ActiveText; + } + /* stylelint-enable value-keyword-case */ + } } &__dots { @@ -238,7 +271,28 @@ } @include hcm() { - filter: invert(1); + /* stylelint-disable value-keyword-case */ + background-color: ButtonText; + color: ButtonText; + + &::after, + &::before { + background-color: ButtonText; + color: ButtonText; + + #{$root}__button:hover &, + #{$root}__button:focus & { + color: ActiveText; + background-color: ActiveText; + } + } + + #{$root}__button:hover &, + #{$root}__button:focus & { + color: ActiveText; + background-color: ActiveText; + } + /* stylelint-enable value-keyword-case */ } } diff --git a/tbx/static_src/sass/components/_streamfield.scss b/tbx/static_src/sass/components/_streamfield.scss index 96931ff33..7e449059f 100644 --- a/tbx/static_src/sass/components/_streamfield.scss +++ b/tbx/static_src/sass/components/_streamfield.scss @@ -78,6 +78,27 @@ &__paragraph { @include streamblock-padding(); + + // This rule overrides the generic `streamfield a` rule below, but then applies the hcm rule just + // for streamfield__paragraph. Really the `streamfield a` styles should only apply + // for paragraphs, and they've caused headaches in having to be overridden in multiple + // places for other streamfield blocks - in future it would be good to refactor that + // but it would require a lot of testing work. + /* stylelint-disable max-nesting-depth */ + .streamfield & { + a { + @include hcm() { + text-decoration: underline; + border-bottom: 0; + + &:hover, + &:focus { + text-decoration-thickness: 4px; + } + } + } + } + /* stylelint-enable max-nesting-depth */ } &__raw { diff --git a/tbx/static_src/sass/components/_subnav.scss b/tbx/static_src/sass/components/_subnav.scss index 87e9d1922..637c30338 100644 --- a/tbx/static_src/sass/components/_subnav.scss +++ b/tbx/static_src/sass/components/_subnav.scss @@ -43,6 +43,25 @@ @include link-underscore(2); color: var(--color--dark-indigo); } + + @include hcm() { + @include hcm-underline(); + overflow: visible; + + &::after { + display: none; + } + + &:hover, + &:focus, + &--active { + &::after { + display: none; + } + + @include hcm-underline-hover(); + } + } } &__badge-link {