@allxsmith/bestax-bulma 5.42.0 → 5.43.0

package/src/scss/form/_checkbox.scss

@@ -9,7 +9,10 @@
 $checkbox-size: 1.25em !default;
 $checkbox-border-width: 2px !default;
 $checkbox-radius: cv.getVar("radius-small") !default;
-$checkbox-border-color: cv.getVar("border") !default;
+// The border is all that shows of an unchecked box, so it takes `text-weak`,
+// which holds the 3:1 WCAG asks of a control's boundary (SC 1.4.11) on the
+// scheme's surfaces in light and dark. `border` falls well short of it.
+$checkbox-border-color: cv.getVar("text-weak") !default;
 $checkbox-background: transparent !default;
 $checkbox-check-color: cv.getVar("scheme-invert") !default;
 $checkbox-active-color: cv.getVar("primary") !default;
@@ -18,8 +21,10 @@ $checkbox-focus-shadow-size: 0 0 0 0.125em !default;
 $checkbox-transition-duration: cv.getVar("duration") !default;
 $checkbox-indeterminate-color: cv.getVar("primary") !default;
 
-// The check mark, drawn as an image normally and used as a mask in forced
-// colors. Private, since it's the shape rather than a themable value.
+// The check mark's shape, used as a mask so the mark is painted with a
+// background color: `checkbox-check-color`, or a system color in forced
+// colors. Private, since it's the shape rather than a themable value; the
+// stroke's color only marks what the mask keeps.
 $-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
 
 // Register CSS custom properties
@@ -127,7 +132,8 @@ $-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
     transition-duration: cv.getVar("checkbox-transition-duration");
     transition-timing-function: ease;
 
-    // Checkmark via SVG background-image
+    // The check mark: the mask cuts the shape, the background color paints
+    // it, in the same color as the mixed state's dash.
     &::after {
       content: "";
       position: absolute;
@@ -138,10 +144,15 @@ $-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
       transition-property: opacity, transform;
       transition-duration: cv.getVar("checkbox-transition-duration");
       transition-timing-function: ease;
-      background-image: $-check-mark;
-      background-size: contain;
-      background-repeat: no-repeat;
-      background-position: center;
+      background-color: cv.getVar("checkbox-check-color");
+      -webkit-mask-image: $-check-mark;
+      -webkit-mask-size: contain;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-position: center;
+      mask-image: $-check-mark;
+      mask-size: contain;
+      mask-repeat: no-repeat;
+      mask-position: center;
     }
   }
 
@@ -188,16 +199,12 @@ $-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
       background-color: Highlight;
       border-color: Highlight;
 
-      // The mark's image has a black stroke, which forced colors leaves as
-      // it is, black on the Highlight fill. Use its shape as a mask instead
-      // and paint it in HighlightText, the color made to read on Highlight.
+      // Forced colors replaces the check color the mark is painted with, as
+      // it does any color that isn't a system one. Name HighlightText, the
+      // color made to read on Highlight. The mask is untouched there, so the
+      // shape stays.
       &::after {
-        background-image: none;
         background-color: HighlightText;
-        mask-image: $-check-mark;
-        mask-size: contain;
-        mask-repeat: no-repeat;
-        mask-position: center;
       }
     }
 

package/src/scss/form/_index.scss

@@ -7,6 +7,7 @@
 @use 'switch';
 @use 'slider';
 @use 'numberinput';
+@use 'pininput';
 @use 'rate';
 @use 'autocomplete';
 @use 'combobox';

package/src/scss/form/_pininput.scss

@@ -0,0 +1,175 @@
+// Bestax Extras - PinInput Styles
+// A row of boxes for a short code, drawn under the one input that holds it.
+// Each box is a Bulma `.input`, the way DateRangeInput's field is, so the
+// boxes take Bulma's input colors, sizes, rounded corners, focus ring, dark
+// mode and `--bulma-input-*` theme variables as they are, and this partial
+// only lays them out. The input lies over the row with its text, caret and
+// selection transparent, so a click or a tap lands on it and the boxes show
+// what it holds.
+
+@use 'bulma/sass/utilities/initial-variables' as iv;
+@use 'bulma/sass/utilities/css-variables' as cv;
+
+// In em, so it follows the size of the boxes.
+$pin-input-gap: 0.5em !default;
+// A Bulma control's height, in the box's own size, so a box is square.
+$pin-input-box-width: cv.getVar('control-height') !default;
+$pin-input-caret-width: max(1px, 0.0625em) !default;
+$pin-input-caret-height: 1.25em !default;
+// The box's text color, so the caret follows a color, dark mode and a theme.
+$pin-input-caret-color: currentColor !default;
+$pin-input-caret-blink-duration: 1s !default;
+
+.#{iv.$class-prefix}pin-input {
+  @include cv.register-vars(
+    (
+      'pin-input-gap': #{$pin-input-gap},
+      'pin-input-box-width': #{$pin-input-box-width},
+      'pin-input-caret-width': #{$pin-input-caret-width},
+      'pin-input-caret-height': #{$pin-input-caret-height},
+      'pin-input-caret-color': #{$pin-input-caret-color},
+      'pin-input-caret-blink-duration': #{$pin-input-caret-blink-duration},
+    )
+  );
+}
+
+// The row is as wide as its boxes, so the input over it covers them and
+// nothing more, and no wider than its container: in a narrow one the boxes
+// give up some width rather than overflow.
+.#{iv.$class-prefix}pin-input {
+  display: inline-flex;
+  max-width: 100%;
+  position: relative;
+  vertical-align: top;
+}
+
+// Three classes, because Bulma's `.input` sets the width and its
+// `.input.is-rounded` the side padding, and these have to win whichever
+// stylesheet loads first. The character sits in the middle either way.
+.#{iv.$class-prefix}pin-input
+  > .#{iv.$class-prefix}input.#{iv.$class-prefix}pin-input-box {
+  flex: 0 1 auto;
+  font-variant-numeric: tabular-nums;
+  justify-content: center;
+  min-width: 0;
+  padding-left: 0;
+  padding-right: 0;
+  width: cv.getVar('pin-input-box-width');
+}
+
+.#{iv.$class-prefix}pin-input-box + .#{iv.$class-prefix}pin-input-box {
+  margin-inline-start: cv.getVar('pin-input-gap');
+}
+
+// A div takes no `disabled`, so a disabled box is marked by class and drawn
+// the way Bulma draws a disabled input.
+.#{iv.$class-prefix}pin-input-box.#{iv.$class-prefix}is-disabled {
+  background-color: cv.getVar('input-disabled-background-color');
+  border-color: cv.getVar('input-disabled-border-color');
+  box-shadow: none;
+  color: cv.getVar('input-disabled-color');
+}
+
+// The caret, in the empty box at the input's caret. The box lays out its
+// content in a centered row, so the caret sits in the middle.
+.#{iv.$class-prefix}pin-input-box.#{iv.$class-prefix}has-caret::after {
+  animation: #{iv.$class-prefix}pin-input-caret-blink
+    cv.getVar('pin-input-caret-blink-duration') step-end infinite;
+  background-color: cv.getVar('pin-input-caret-color');
+  content: '';
+  height: cv.getVar('pin-input-caret-height');
+  width: cv.getVar('pin-input-caret-width');
+}
+
+@keyframes #{iv.$class-prefix}pin-input-caret-blink {
+  50% {
+    opacity: 0;
+  }
+}
+
+// The input that holds the code, over the whole row. Its text is squeezed
+// to the row's start, so a click anywhere on the row puts the caret at the
+// end of the code, and the arrow keys move it from there. Its font is never
+// under 16px, since iOS zooms the page into a field with smaller text when
+// it takes focus.
+.#{iv.$class-prefix}pin-input-field {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  caret-color: transparent;
+  color: transparent;
+  cursor: text;
+  font-family: monospace;
+  font-size: max(1em, 16px);
+  height: 100%;
+  left: 0;
+  letter-spacing: -0.5em;
+  line-height: 1;
+  margin: 0;
+  outline: 0;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 1;
+
+  &::selection {
+    background-color: transparent;
+    color: transparent;
+  }
+
+  &::placeholder {
+    color: transparent;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+// Autofill paints a fill and text of its own on the input. The boxes show
+// the code, so the input hides instead. One rule each, since a browser
+// drops a whole rule over a selector it doesn't know.
+.#{iv.$class-prefix}pin-input-field:-webkit-autofill {
+  opacity: 0;
+}
+
+.#{iv.$class-prefix}pin-input-field:autofill {
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .#{iv.$class-prefix}pin-input-box.#{iv.$class-prefix}has-caret::after {
+    animation: none;
+  }
+}
+
+@media (forced-colors: active) {
+  // Forced colors would paint the input's transparent text and caret in the
+  // text color, over the boxes, so it keeps its own.
+  .#{iv.$class-prefix}pin-input-field {
+    forced-color-adjust: none;
+  }
+
+  // Forced colors drops Bulma's focus ring, which is a shadow, so the box
+  // at the caret, and each selected one, gets an outline in the system's
+  // Highlight color. Three classes, to outrank Bulma's `.input.is-focused`
+  // border whichever stylesheet loads first.
+  .#{iv.$class-prefix}pin-input
+    > .#{iv.$class-prefix}pin-input-box.#{iv.$class-prefix}is-focused {
+    border-color: Highlight;
+    outline: 2px solid Highlight;
+  }
+
+  // The caret is a fill, which forced colors would make the background.
+  .#{iv.$class-prefix}pin-input-box.#{iv.$class-prefix}has-caret::after {
+    background-color: CanvasText;
+    forced-color-adjust: none;
+  }
+
+  .#{iv.$class-prefix}pin-input-box.#{iv.$class-prefix}is-disabled {
+    border-color: GrayText;
+    color: GrayText;
+  }
+}

package/src/scss/form/_radio.scss

@@ -8,7 +8,10 @@
 // Radio-specific SCSS variables
 $radio-size: 1.25em !default;
 $radio-border-width: 2px !default;
-$radio-border-color: cv.getVar("border") !default;
+// The ring is all that shows of an unchecked radio, so it takes `text-weak`,
+// which holds the 3:1 WCAG asks of a control's boundary (SC 1.4.11) on the
+// scheme's surfaces in light and dark. `border` falls well short of it.
+$radio-border-color: cv.getVar("text-weak") !default;
 $radio-background: transparent !default;
 $radio-dot-color: cv.getVar("scheme-main") !default;
 $radio-active-color: cv.getVar("primary") !default;