From 42e3988ffd1a6fc8d08df2daa60736fca069bbfb Mon Sep 17 00:00:00 2001 From: Angelika Tyborska Date: Mon, 19 Aug 2024 09:41:36 +0200 Subject: [PATCH 1/5] Use focus design token on radios, checkboxes, selects --- scss/bitstyles/base/input-checkbox/_index.scss | 10 ++++++++++ scss/bitstyles/base/input-radio/_index.scss | 6 ++++++ scss/bitstyles/base/input-text/_index.scss | 3 +++ scss/bitstyles/base/select/_index.scss | 9 +++++++++ 4 files changed, 28 insertions(+) diff --git a/scss/bitstyles/base/input-checkbox/_index.scss b/scss/bitstyles/base/input-checkbox/_index.scss index 16cee3d0c..4ad3ddfbd 100644 --- a/scss/bitstyles/base/input-checkbox/_index.scss +++ b/scss/bitstyles/base/input-checkbox/_index.scss @@ -1,6 +1,7 @@ @forward 'settings'; @use './settings'; @use '../../tools/design-token'; +@use '../../design-tokens/focus'; [type='checkbox'] { display: inline-block; @@ -31,6 +32,11 @@ color: settings.$color-hover; } + &:focus-visible { + outline: focus.$outline-color solid focus.$outline-width; + outline-offset: focus.$outline-offset; + } + &::after { content: ''; display: block; @@ -43,8 +49,12 @@ var(design-token.get('transition', 'default', 'easing')), transform calc(var(design-token.get('transition', 'default', 'duration')) / 2) + var(design-token.get('transition', 'default', 'duration')) + var(design-token.get('transition', 'default', 'easing')), + outline-offset var(design-token.get('transition', 'default', 'duration')) var(design-token.get('transition', 'default', 'easing')); + outline-offset: 0; opacity: 0; background-image: settings.$background-image-checked; background-repeat: no-repeat; diff --git a/scss/bitstyles/base/input-radio/_index.scss b/scss/bitstyles/base/input-radio/_index.scss index c8378a8c8..40a132b80 100644 --- a/scss/bitstyles/base/input-radio/_index.scss +++ b/scss/bitstyles/base/input-radio/_index.scss @@ -1,6 +1,7 @@ @forward 'settings'; @use './settings'; @use '../../tools/design-token'; +@use '../../design-tokens/focus'; [type='radio'] { display: inline-block; @@ -47,6 +48,11 @@ color: settings.$color-hover; } + &:focus-visible { + outline: focus.$outline-color solid focus.$outline-width; + outline-offset: focus.$outline-offset; + } + &:checked { border-color: settings.$border-color-checked; background-color: settings.$background-color-checked; diff --git a/scss/bitstyles/base/input-text/_index.scss b/scss/bitstyles/base/input-text/_index.scss index 576de4f44..5cd99bb24 100644 --- a/scss/bitstyles/base/input-text/_index.scss +++ b/scss/bitstyles/base/input-text/_index.scss @@ -1,6 +1,7 @@ @forward 'settings'; @use './settings'; @use '../../tools/design-token'; +@use '../../design-tokens/focus'; /* stylelint-disable selector-max-type */ textarea, @@ -10,6 +11,8 @@ input { background-color var(design-token.get('transition', 'default', 'duration')) var(design-token.get('transition', 'default', 'easing')), border var(design-token.get('transition', 'default', 'duration')) + var(design-token.get('transition', 'default', 'easing')), + outline-offset var(design-token.get('transition', 'default', 'duration')) var(design-token.get('transition', 'default', 'easing')); resize: vertical; diff --git a/scss/bitstyles/base/select/_index.scss b/scss/bitstyles/base/select/_index.scss index 09321cc54..80ae51095 100644 --- a/scss/bitstyles/base/select/_index.scss +++ b/scss/bitstyles/base/select/_index.scss @@ -1,6 +1,7 @@ @forward 'settings'; @use 'settings'; @use '../../tools/design-token'; +@use '../../design-tokens/focus'; @supports (-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none) { @@ -17,9 +18,12 @@ var(design-token.get('transition', 'default', 'duration')) var(design-token.get('transition', 'default', 'easing')), border var(design-token.get('transition', 'default', 'duration')) + var(design-token.get('transition', 'default', 'easing')), + outline-offset var(design-token.get('transition', 'default', 'duration')) var(design-token.get('transition', 'default', 'easing')); border: settings.$border-width solid settings.$border-color; border-radius: settings.$border-radius; + outline-offset: 0; background-color: settings.$background-color; background-image: settings.$background-image; background-repeat: no-repeat; @@ -51,6 +55,11 @@ color: settings.$color-active; } + &:focus-visible { + outline: focus.$outline-color solid focus.$outline-width; + outline-offset: focus.$outline-offset; + } + &:invalid { border-color: settings.$border-color-invalid; background-color: settings.$background-color-invalid; From b44eef9616f7263f9f2ac4ff7251540ce4b39b72 Mon Sep 17 00:00:00 2001 From: Angelika Tyborska Date: Mon, 19 Aug 2024 10:09:32 +0200 Subject: [PATCH 2/5] Prevent IDEs from running stylelint on fixtures --- .stylelintignore | 1 + 1 file changed, 1 insertion(+) create mode 100644 .stylelintignore diff --git a/.stylelintignore b/.stylelintignore new file mode 100644 index 000000000..63370655d --- /dev/null +++ b/.stylelintignore @@ -0,0 +1 @@ +test/scss/fixtures/ From 1b01347d41b32e426a144497c479931dbcd45e73 Mon Sep 17 00:00:00 2001 From: Angelika Tyborska Date: Mon, 19 Aug 2024 10:09:48 +0200 Subject: [PATCH 3/5] Update fixtures --- CONTRIBUTING.md | 2 +- test/scss/fixtures/bitstyles-overrides.css | 23 ++++++++++++++++++++ test/scss/fixtures/bitstyles.css | 25 +++++++++++++++++++++- 3 files changed, 48 insertions(+), 2 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index dd1edc48d..c2dcf0746 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -58,7 +58,7 @@ yarn format:mdx ## Testing -After adding or changing anything that affects the final output CSS, you’ll need to update the fixtures. These record the expected state of the CSS output by the entire library in its default state, and when some configuration is being overidden. +After adding or changing anything that affects the final output CSS, you’ll need to update the fixtures. These record the expected state of the CSS output by the entire library in its default state, and when some configuration is being overridden. Run the build & comparison: diff --git a/test/scss/fixtures/bitstyles-overrides.css b/test/scss/fixtures/bitstyles-overrides.css index f68fbca7c..6ea8cf475 100644 --- a/test/scss/fixtures/bitstyles-overrides.css +++ b/test/scss/fixtures/bitstyles-overrides.css @@ -469,6 +469,11 @@ img { color: var(--bscpn-color-brand-1); outline: none; } + [type='checkbox']:focus-visible { + outline: var(--bscpn-color-brand-2) solid + calc(var(--bscpn-size-s7) + var(--bscpn-size-s7) / 2); + outline-offset: var(--bscpn-size-s7); + } [type='checkbox']:after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M83.07 11.71 38.66 56.3 16.93 34.49 1 50.48l37.65 37.81L99 27.7z'/%3E%3C/svg%3E"); background-position: 50% 50%; @@ -478,12 +483,15 @@ img { display: block; height: 100%; opacity: 0; + outline-offset: 0; transform: scale(0.7); transition: opacity calc(var(--bscpn-transition-default-duration) / 2) var(--bscpn-transition-default-duration) var(--bscpn-transition-default-easing), transform calc(var(--bscpn-transition-default-duration) / 2) var(--bscpn-transition-default-duration) + var(--bscpn-transition-default-easing), + outline-offset var(--bscpn-transition-default-duration) var(--bscpn-transition-default-easing); width: 100%; } @@ -551,6 +559,11 @@ img { color: var(--bscpn-color-brand-1); outline: none; } + [type='radio']:focus-visible { + outline: var(--bscpn-color-brand-2) solid + calc(var(--bscpn-size-s7) + var(--bscpn-size-s7) / 2); + outline-offset: var(--bscpn-size-s7); + } [type='radio']:checked { background-color: var(--bscpn-color-grayscale-white); border-color: var(--bscpn-color-brand-1); @@ -582,6 +595,8 @@ textarea { background-color var(--bscpn-transition-default-duration) var(--bscpn-transition-default-easing), border var(--bscpn-transition-default-duration) + var(--bscpn-transition-default-easing), + outline-offset var(--bscpn-transition-default-duration) var(--bscpn-transition-default-easing); } input::-moz-placeholder, @@ -767,6 +782,7 @@ textarea:disabled { cursor: pointer; display: block; font: inherit; + outline-offset: 0; overflow: hidden; padding: var(--bscpn-size-s5) calc(var(--bscpn-size-s1) * 2) var(--bscpn-size-s5) var(--bscpn-size-s1); @@ -776,6 +792,8 @@ textarea:disabled { background-color var(--bscpn-transition-default-duration) var(--bscpn-transition-default-easing), border var(--bscpn-transition-default-duration) + var(--bscpn-transition-default-easing), + outline-offset var(--bscpn-transition-default-duration) var(--bscpn-transition-default-easing); width: 100%; } @@ -796,6 +814,11 @@ textarea:disabled { color: var(--bscpn-color-grayscale-dark-1); outline: none; } + select:focus-visible { + outline: var(--bscpn-color-brand-2) solid + calc(var(--bscpn-size-s7) + var(--bscpn-size-s7) / 2); + outline-offset: var(--bscpn-size-s7); + } select:invalid { background-color: var(--bscpn-color-grayscale-white); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='var(--bscpn-color-warning)' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89l35.41 35.57 35.57-35.57a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E"); diff --git a/test/scss/fixtures/bitstyles.css b/test/scss/fixtures/bitstyles.css index 22cb5d606..649914fcd 100644 --- a/test/scss/fixtures/bitstyles.css +++ b/test/scss/fixtures/bitstyles.css @@ -716,6 +716,11 @@ img { color: var(--bs-color-brand-1); outline: none; } + [type='checkbox']:focus-visible { + outline: var(--bs-color-brand-2) solid + calc(var(--bs-size-s7) + var(--bs-size-s7) / 2); + outline-offset: var(--bs-size-s7); + } [type='checkbox']:after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M83.07 11.71 38.66 56.3 16.93 34.49 1 50.48l37.65 37.81L99 27.7z'/%3E%3C/svg%3E"); background-position: 50% 50%; @@ -725,12 +730,15 @@ img { display: block; height: 100%; opacity: 0; + outline-offset: 0; transform: scale(0.7); transition: opacity calc(var(--bs-transition-default-duration) / 2) var(--bs-transition-default-duration) var(--bs-transition-default-easing), transform calc(var(--bs-transition-default-duration) / 2) var(--bs-transition-default-duration) + var(--bs-transition-default-easing), + outline-offset var(--bs-transition-default-duration) var(--bs-transition-default-easing); width: 100%; } @@ -798,6 +806,11 @@ img { color: var(--bs-color-brand-1); outline: none; } + [type='radio']:focus-visible { + outline: var(--bs-color-brand-2) solid + calc(var(--bs-size-s7) + var(--bs-size-s7) / 2); + outline-offset: var(--bs-size-s7); + } [type='radio']:checked { background-color: var(--bs-color-grayscale-white); border-color: var(--bs-color-brand-1); @@ -825,10 +838,12 @@ input, textarea { resize: vertical; transition: color var(--bs-transition-default-duration) - var(--bs-transition-default-easing), + var(--bs-transition-default-easing), background-color var(--bs-transition-default-duration) var(--bs-transition-default-easing), border var(--bs-transition-default-duration) + var(--bs-transition-default-easing), + outline-offset var(--bs-transition-default-duration) var(--bs-transition-default-easing); } input::-moz-placeholder, @@ -1011,6 +1026,7 @@ textarea:disabled { cursor: pointer; display: block; font: inherit; + outline-offset: 0; overflow: hidden; padding: var(--bs-size-s5) calc(var(--bs-size-s1) * 2) var(--bs-size-s5) var(--bs-size-s1); @@ -1020,6 +1036,8 @@ textarea:disabled { background-color var(--bs-transition-default-duration) var(--bs-transition-default-easing), border var(--bs-transition-default-duration) + var(--bs-transition-default-easing), + outline-offset var(--bs-transition-default-duration) var(--bs-transition-default-easing); width: 100%; } @@ -1040,6 +1058,11 @@ textarea:disabled { color: var(--bs-color-grayscale-dark-1); outline: none; } + select:focus-visible { + outline: var(--bs-color-brand-2) solid + calc(var(--bs-size-s7) + var(--bs-size-s7) / 2); + outline-offset: var(--bs-size-s7); + } select:invalid { background-color: var(--bs-color-grayscale-white); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='var(--bs-color-warning)' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89l35.41 35.57 35.57-35.57a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E"); From 75998762c3e1a6975c56e62f3adc47a4068bf370 Mon Sep 17 00:00:00 2001 From: Angelika Cathor Date: Mon, 19 Aug 2024 10:25:45 +0200 Subject: [PATCH 4/5] Update test/scss/fixtures/bitstyles.css --- test/scss/fixtures/bitstyles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/scss/fixtures/bitstyles.css b/test/scss/fixtures/bitstyles.css index 649914fcd..d91557d5a 100644 --- a/test/scss/fixtures/bitstyles.css +++ b/test/scss/fixtures/bitstyles.css @@ -838,7 +838,7 @@ input, textarea { resize: vertical; transition: color var(--bs-transition-default-duration) - var(--bs-transition-default-easing), + var(--bs-transition-default-easing), background-color var(--bs-transition-default-duration) var(--bs-transition-default-easing), border var(--bs-transition-default-duration) From 6f4da959d5b537c11562ca419b11a4be5e48b9de Mon Sep 17 00:00:00 2001 From: Angelika Tyborska Date: Mon, 19 Aug 2024 10:31:17 +0200 Subject: [PATCH 5/5] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index eea81fc7f..77146ac91 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ ## Changed - Relaxed NodeJS version requirement. +- The focus design tokens are now also used in `base/input-checkbox`, `base/input-radio`, and `base/select`. ### Added