Update fixtures

bitcrowd · Aug 19, 2024 · 1b01347 · 1b01347
1 parent b44eef9
commit 1b01347
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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");