From d2c903c6f20afde683e2b31fd30692ea3dee031e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= Date: Thu, 14 Jul 2022 09:26:03 +0200 Subject: [PATCH] fix(web-styles): adds styles for form-range in forced-color/high-contrast mode (#159) The form-range CSS-Component now supports high-contrast-mode, incl. styled track, progress, knob and knob-focus when selected --- .changeset/chilled-seahorses-beg.md | 5 ++ .stylelintrc.js | 19 ----- packages/web-styles/.stylelintrc | 15 ++++ packages/web-styles/package.json | 2 +- .../web-styles/src/components/form-range.scss | 74 ++++++++++++++++++- 5 files changed, 91 insertions(+), 24 deletions(-) create mode 100644 .changeset/chilled-seahorses-beg.md delete mode 100644 .stylelintrc.js create mode 100644 packages/web-styles/.stylelintrc diff --git a/.changeset/chilled-seahorses-beg.md b/.changeset/chilled-seahorses-beg.md new file mode 100644 index 0000000000..3adcf2a990 --- /dev/null +++ b/.changeset/chilled-seahorses-beg.md @@ -0,0 +1,5 @@ +--- +'@swisspost/web-styles': patch +--- + +Add styles for form-range in fourced-color/high-contrast mode diff --git a/.stylelintrc.js b/.stylelintrc.js deleted file mode 100644 index e6009f16a6..0000000000 --- a/.stylelintrc.js +++ /dev/null @@ -1,19 +0,0 @@ -module.exports = { - plugins: ["stylelint-scss"], - extends: [ - // Sets official sass coding guidelines - "stylelint-config-sass-guidelines", - - // Turns off formatting, it's handled by prettier - "stylelint-prettier/recommended", - ], - rules: { - // Sass guidelines packs the stylelint-order plugin and enables alphabetical order by default, it should be false for smacss order - "order/properties-alphabetical-order": null, - "max-nesting-depth": 5, - "selector-max-compound-selectors": 5, - "selector-max-id": 1, - "selector-no-qualifying-type": [true, { "ignore": ["attribute", "class"] }], - "function-url-quotes": null - }, -}; diff --git a/packages/web-styles/.stylelintrc b/packages/web-styles/.stylelintrc new file mode 100644 index 0000000000..992e3292bc --- /dev/null +++ b/packages/web-styles/.stylelintrc @@ -0,0 +1,15 @@ +{ + "plugins": ["stylelint-scss"], + "extends": [ + "stylelint-config-sass-guidelines", + "stylelint-prettier/recommended" + ], + "rules": { + "order/properties-alphabetical-order": null, + "max-nesting-depth": 5, + "selector-max-compound-selectors": 5, + "selector-max-id": 1, + "selector-no-qualifying-type": [true, { "ignore": ["attribute", "class"] }], + "function-url-quotes": null + } +} diff --git a/packages/web-styles/package.json b/packages/web-styles/package.json index 982b47e3dd..9e57ddccde 100644 --- a/packages/web-styles/package.json +++ b/packages/web-styles/package.json @@ -14,7 +14,7 @@ "prebuild": "npm run clean", "build": "gulp build", "build:ci": "gulp build", - "lint": "stylelint src/**/*.scss --config ../../.stylelintrc.js", + "lint": "stylelint src/**/*.scss", "lint:fix": "stylelint src/**/*.scss --fix", "format": "prettier src/**/*.scss --write", "test": "jest", diff --git a/packages/web-styles/src/components/form-range.scss b/packages/web-styles/src/components/form-range.scss index 274ec8436c..539bc1b88a 100644 --- a/packages/web-styles/src/components/form-range.scss +++ b/packages/web-styles/src/components/form-range.scss @@ -4,9 +4,11 @@ @use '../themes/bootstrap/overrides' as *; @use '../themes/bootstrap/forms' as bf; +@use '../variables/commons'; @use '../variables/color'; @use '../variables/spacing'; @use '../variables/components/forms'; +@use '../mixins/utilities'; .form-range { // see https://jira.post.ch/browse/COWF-209 @@ -15,15 +17,20 @@ --ratio: calc((var(--val) - var(--min)) / var(--range)); --sx: calc(0.5 * 1.5em + var(--ratio) * (100% - 1.5em)); - &:not(:disabled):not(.disabled) { + &::-moz-range-thumb { + border-radius: 50%; + box-sizing: border-box; + } + + &:not(:disabled, .disabled) { &::-webkit-slider-runnable-track { - background: linear-gradient(color.$black, color.$black) 0 / var(--sx) 100% no-repeat - color.$gray-20; + background: linear-gradient(color.$black, color.$black) 0 / var(--sx) 100%; + background-repeat: no-repeat; background-color: color.$gray-20; } &::-moz-range-progress { - background: color.$black; + background-color: color.$black; } } @@ -43,3 +50,62 @@ transform: translateY(#{-0.5 * forms.$form-range-height}); } } + +@include utilities.high-contrast-mode() { + .form-range { + // linear-gradient is forced to the value of "none" in forced-color mode + // so, the "forced-color-adjust" property is necessary for "linear-gradient" to continue to work + forced-color-adjust: none; + + &:not(:disabled, .disabled) { + &::-webkit-slider-runnable-track { + background: linear-gradient(Highlight, Highlight) 0 / var(--sx) 100%; + background-repeat: no-repeat; + background-color: ButtonBorder; + } + + &::-webkit-slider-thumb { + background-color: ButtonFace; + border-color: ButtonBorder; + } + + &::-moz-range-track { + background-color: ButtonText; + } + + &::-moz-range-progress { + background-color: Highlight; + } + + &::-moz-range-thumb { + background-color: ButtonFace; + border-color: ButtonText; + } + + &:focus-visible { + &::-webkit-slider-thumb { + outline-offset: commons.$border-thick; + outline: commons.$border-thick solid Highlight; + } + + &::-moz-range-thumb { + outline-offset: commons.$border-thick; + outline: commons.$border-thick solid Highlight; + } + } + } + + &:disabled, + &.disabled { + &::-webkit-slider-thumb { + background-color: ButtonFace; + border-color: ButtonBorder; + } + + &::-moz-range-thumb { + background-color: ButtonFace; + border-color: ButtonBorder; + } + } + } +}