@allxsmith/bestax-bulma 5.41.0 → 5.42.1

package/src/scss/components/_carousel.scss

@@ -1,6 +1,12 @@
 // Carousel component styles
 @use "bulma/sass/utilities/initial-variables" as iv;
 @use "bulma/sass/utilities/css-variables" as cv;
+@use "bulma/sass/utilities/mixins" as mx;
+
+// The space between two items in view, left out at the track's edges. A
+// length, so `0px` rather than `0`: the track's offset adds it to a
+// percentage inside `calc()`, where a bare `0` is not a length.
+$carousel-item-gap: 0px !default;
 
 // Carousel-specific SCSS sizing variables
 $carousel-arrow-size: 48px !default;
@@ -126,10 +132,70 @@ $carousel-indicator-line-radius: cv.getVar("radius-small") !default;
       "carousel-overlay-indicator-background-active": #{$carousel-overlay-indicator-background-active},
       "carousel-transition-duration": #{$carousel-transition-duration},
       "carousel-fade-duration": #{$carousel-fade-duration},
+      "carousel-item-gap": #{$carousel-item-gap},
+      // How many items are in view. `Carousel` writes each `itemsToShow*`
+      // prop it is given as the variable of the same name on its own
+      // element; the rest fall back the way the props do, each viewport to
+      // the next narrower one and all of them to `itemsToShow`. Declared
+      // here, on every carousel, so one nested in another's items starts
+      // from its own props rather than inheriting the outer one's.
+      "carousel-items-to-show": 1,
+      "carousel-items-to-show-mobile": #{cv.getVar("carousel-items-to-show")},
+      "carousel-items-to-show-tablet": #{cv.getVar("carousel-items-to-show")},
+      "carousel-items-to-show-desktop": #{cv.getVar("carousel-items-to-show-tablet")},
+      "carousel-items-to-show-widescreen": #{cv.getVar("carousel-items-to-show-desktop")},
+      "carousel-items-to-show-fullhd": #{cv.getVar("carousel-items-to-show-widescreen")},
+      // The count for the viewport the page is in, which the item widths and
+      // the track's offset both read. Bulma's breakpoint mixins below pick
+      // the tablet count and wider; every width they don't reach is mobile,
+      // as it is to the script. A `mobile` block of its own would leave out
+      // the fractional widths between Bulma's `mobile` query (up to 768px)
+      // and its `tablet` one (from 769px), where the two would disagree.
+      "carousel-items-in-view": #{cv.getVar("carousel-items-to-show-mobile")},
     )
   );
 }
 
+@include mx.tablet {
+  .#{iv.$class-prefix}carousel {
+    @include cv.register-vars(
+      (
+        "carousel-items-in-view": #{cv.getVar("carousel-items-to-show-tablet")},
+      )
+    );
+  }
+}
+
+@include mx.desktop {
+  .#{iv.$class-prefix}carousel {
+    @include cv.register-vars(
+      (
+        "carousel-items-in-view": #{cv.getVar("carousel-items-to-show-desktop")},
+      )
+    );
+  }
+}
+
+@include mx.widescreen {
+  .#{iv.$class-prefix}carousel {
+    @include cv.register-vars(
+      (
+        "carousel-items-in-view": #{cv.getVar("carousel-items-to-show-widescreen")},
+      )
+    );
+  }
+}
+
+@include mx.fullhd {
+  .#{iv.$class-prefix}carousel {
+    @include cv.register-vars(
+      (
+        "carousel-items-in-view": #{cv.getVar("carousel-items-to-show-fullhd")},
+      )
+    );
+  }
+}
+
 .#{iv.$class-prefix}carousel {
   position: relative;
   overflow: hidden;
@@ -147,15 +213,22 @@ $carousel-indicator-line-radius: cv.getVar("radius-small") !default;
   // Slides container
   .#{iv.$class-prefix}carousel-slides {
     display: flex;
+    gap: cv.getVar("carousel-item-gap");
     width: 100%;
     will-change: transform;
   }
 
-  // Individual slide
+  // Individual slide: an equal share of the track, less the gaps between
+  // the items in view
   .#{iv.$class-prefix}carousel-item {
-    flex: 0 0 100%;
-    width: 100%;
-    min-width: 100%;
+    $carousel-item-width: calc(
+      (100% - (#{cv.getVar("carousel-items-in-view")} - 1) * #{cv.getVar("carousel-item-gap")}) /
+        #{cv.getVar("carousel-items-in-view")}
+    );
+
+    flex: 0 0 $carousel-item-width;
+    width: $carousel-item-width;
+    min-width: $carousel-item-width;
 
     // Allow images to fill the slide
     img {
@@ -505,26 +578,6 @@ $carousel-indicator-line-radius: cv.getVar("radius-small") !default;
   }
 }
 
-// Carousel list variant (multiple visible items)
-.#{iv.$class-prefix}carousel-list {
-  .#{iv.$class-prefix}carousel-container {
-    overflow: visible;
-  }
-
-  .#{iv.$class-prefix}carousel-slides {
-    display: flex;
-    gap: 1rem;
-  }
-
-  .#{iv.$class-prefix}carousel-item {
-    flex: 0 0 auto;
-    width: auto;
-    position: relative;
-    opacity: 1;
-    visibility: visible;
-  }
-}
-
 // Responsive adjustments
 @media screen and (max-width: 768px) {
   .#{iv.$class-prefix}carousel {

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/_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;