From 1b01347d41b32e426a144497c479931dbcd45e73 Mon Sep 17 00:00:00 2001 From: Angelika Tyborska Date: Mon, 19 Aug 2024 10:09:48 +0200 Subject: [PATCH] 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");