@allxsmith/bestax-bulma 5.18.2 → 5.19.0

package/src/scss/form/_dateinput.scss

@@ -9,6 +9,7 @@ $dateinput-cell-hover-bg: hsla(0, 0%, 50%, 0.13) !default;
 $dateinput-cell-selected-bg: cv.getVar('primary') !default;
 $dateinput-cell-selected-color: cv.getVar('primary-invert') !default;
 $dateinput-cell-today-color: cv.getVar('primary') !default;
+$dateinput-focus-ring-color: cv.getVar('primary') !default;
 $dateinput-cell-disabled-color: cv.getVar('text-weak') !default;
 $dateinput-cell-other-month-color: cv.getVar('text-weak') !default;
 $dateinput-header-padding: 0.5rem 0 !default;
@@ -27,6 +28,7 @@ $dateinput-nav-button-size: 1.75rem !default;
       'dateinput-cell-selected-bg': #{$dateinput-cell-selected-bg},
       'dateinput-cell-selected-color': #{$dateinput-cell-selected-color},
       'dateinput-cell-today-color': #{$dateinput-cell-today-color},
+      'dateinput-focus-ring-color': #{$dateinput-focus-ring-color},
       'dateinput-cell-disabled-color': #{$dateinput-cell-disabled-color},
       'dateinput-cell-other-month-color': #{$dateinput-cell-other-month-color},
       'dateinput-header-padding': #{$dateinput-header-padding},
@@ -80,7 +82,7 @@ $dateinput-nav-button-size: 1.75rem !default;
     background-color: cv.getVar('dateinput-cell-hover-bg');
   }
   &:focus-visible {
-    outline: 2px solid cv.getVar('primary');
+    outline: 2px solid cv.getVar('dateinput-focus-ring-color');
     outline-offset: 2px;
   }
 }
@@ -121,7 +123,7 @@ $dateinput-nav-button-size: 1.75rem !default;
     background-color: cv.getVar('dateinput-cell-hover-bg');
   }
   &:focus-visible {
-    outline: 2px solid cv.getVar('primary');
+    outline: 2px solid cv.getVar('dateinput-focus-ring-color');
     outline-offset: 1px;
   }
   &:disabled {
@@ -172,7 +174,7 @@ $dateinput-nav-button-size: 1.75rem !default;
   &:hover:not(:disabled):not(.#{iv.$class-prefix}is-selected) {
     background-color: cv.getVar('dateinput-cell-hover-bg');
   }
-  // Hover for the selected cell: darken the primary fill rather than
+  // Hover for the selected cell: darken the selection fill rather than
   // replacing it, so the selection stays visible under the cursor while
   // still giving interactive feedback.
   &.#{iv.$class-prefix}is-selected:hover:not(:disabled) {
@@ -183,10 +185,10 @@ $dateinput-nav-button-size: 1.75rem !default;
     );
   }
   // Inset focus ring so it can't bleed into an adjacent selected cell's
-  // primary fill (the grid gap is only 2px). Outline respects the cell's
+  // fill (the grid gap is only 2px). Outline respects the cell's
   // border-radius in modern browsers.
   &:focus-visible {
-    outline: 2px solid cv.getVar('primary');
+    outline: 2px solid cv.getVar('dateinput-focus-ring-color');
     outline-offset: -2px;
   }
   // Today: tinted bold text (no ring), so it doesn't collide visually with
@@ -199,10 +201,11 @@ $dateinput-nav-button-size: 1.75rem !default;
     background-color: cv.getVar('dateinput-cell-selected-bg');
     color: cv.getVar('dateinput-cell-selected-color');
   }
-  // When focus lands on the selected cell, swap the ring to scheme-main so
-  // it stays visible against the primary-colored fill.
+  // On the selected cell the inset ring sits on the selection fill, so it
+  // takes the selected value's colour, which is chosen to contrast with that
+  // fill whatever colour it is.
   &.#{iv.$class-prefix}is-selected:focus-visible {
-    outline-color: cv.getVar('scheme-main');
+    outline-color: cv.getVar('dateinput-cell-selected-color');
   }
   &.#{iv.$class-prefix}is-other-month {
     color: cv.getVar('dateinput-cell-other-month-color');
@@ -250,7 +253,7 @@ $dateinput-nav-button-size: 1.75rem !default;
     );
   }
   &:focus-visible {
-    outline: 2px solid cv.getVar('primary');
+    outline: 2px solid cv.getVar('dateinput-focus-ring-color');
     outline-offset: -2px;
   }
   &.#{iv.$class-prefix}is-today {
@@ -261,8 +264,10 @@ $dateinput-nav-button-size: 1.75rem !default;
     background-color: cv.getVar('dateinput-cell-selected-bg');
     color: cv.getVar('dateinput-cell-selected-color');
   }
+  // The focused year is always the selected one, so this is the ring a
+  // keyboard user sees in the year view; it contrasts with the fill as above.
   &.#{iv.$class-prefix}is-selected:focus-visible {
-    outline-color: cv.getVar('scheme-main');
+    outline-color: cv.getVar('dateinput-cell-selected-color');
   }
   &:disabled {
     color: cv.getVar('dateinput-cell-disabled-color');
@@ -271,6 +276,27 @@ $dateinput-nav-button-size: 1.75rem !default;
   }
 }
 
+// Colour variants. `color` lands on the calendar root as `is-<colour>`, and
+// the root re-points its accent variables at that colour: the selection fill
+// paired with its `-invert` for the selected value. Today's tint and the focus
+// ring sit on the calendar's surface rather than on a fill, so they take the
+// colour's `-on-scheme` variant, which Bulma darkens or lightens until it
+// contrasts with `scheme-main`; plain `warning` or `info` text on a light
+// surface is too faint to read. Every rule that paints an accent reads one of
+// these, so they follow without rules of their own.
+@each $name in 'primary', 'link', 'info', 'success', 'warning', 'danger' {
+  .#{iv.$class-prefix}dateinput.#{iv.$class-prefix}is-#{$name} {
+    @include cv.register-vars(
+      (
+        'dateinput-cell-selected-bg': #{cv.getVar($name)},
+        'dateinput-cell-selected-color': #{cv.getVar('#{$name}-invert')},
+        'dateinput-cell-today-color': #{cv.getVar('#{$name}-on-scheme')},
+        'dateinput-focus-ring-color': #{cv.getVar('#{$name}-on-scheme')},
+      )
+    );
+  }
+}
+
 .#{iv.$class-prefix}dateinput.#{iv.$class-prefix}is-small
   .#{iv.$class-prefix}dateinput-cell {
   width: 1.75rem;

package/src/scss/form/_timeinput.scss

@@ -2,11 +2,20 @@
 @use 'bulma/sass/utilities/css-variables' as cv;
 
 $timeinput-wheel-width: 3rem !default;
+// Registered, and read by nothing: the wheels position every item from its
+// height in script, so the component passes the height to them itself (taller
+// on small viewports) rather than reading a CSS length. Kept so a theme that
+// sets it still compiles.
 $timeinput-wheel-item-height: 2rem !default;
 $timeinput-wheel-gap: 0.4rem !default;
-$timeinput-wheel-bg: cv.getVar('scheme-main') !default;
+// Transparent, so the drum shows the surface it sits on: the popover, the
+// inline frame or DateTimeInput's time card, each of which has a background
+// variable of its own that a painted default would cover.
+$timeinput-wheel-bg: transparent !default;
 $timeinput-wheel-color: cv.getVar('text') !default;
 $timeinput-wheel-dim-color: cv.getVar('text-weak') !default;
+// The calendar's cell hover, so both halves of a DateTimeInput answer the
+// pointer alike, on light and dark schemes.
 $timeinput-wheel-hover-bg: hsla(0, 0%, 50%, 0.13) !default;
 $timeinput-wheel-selected-bg: cv.getVar('primary') !default;
 $timeinput-wheel-selected-color: cv.getVar('primary-invert') !default;
@@ -80,6 +89,7 @@ $timeinput-footer-padding: 0.5rem 0 0 !default;
 .#{iv.$class-prefix}timeinput-wheel {
   position: relative;
   width: cv.getVar('timeinput-wheel-width');
+  background-color: cv.getVar('timeinput-wheel-bg');
   outline: none;
   overflow: hidden;
   touch-action: none;
@@ -114,11 +124,14 @@ $timeinput-footer-padding: 0.5rem 0 0 !default;
   // pinning a ring to the selected item caused a broken-outline artefact
   // whenever position was mid-flight (item offset from band).
   //
-  // The ring reads the band's colour, so a coloured wheel keeps one accent.
-  &:focus-visible {
-    outline: 2px solid cv.getVar('timeinput-wheel-selected-bg');
-    outline-offset: 2px;
-    border-radius: cv.getVar('timeinput-wheel-radius');
+  // The ring is drawn inset on the band. An outline on the wheel itself sits
+  // outside its border box, and the mask above clips everything there, so it
+  // never painted. On the band it sits on the selection fill, so it takes the
+  // selected value's colour, which contrasts with that fill whatever colour
+  // the band is.
+  &:focus-visible .#{iv.$class-prefix}timeinput-wheel-band {
+    outline: 2px solid cv.getVar('timeinput-wheel-selected-color');
+    outline-offset: -2px;
   }
 
   &.#{iv.$class-prefix}is-dragging .#{iv.$class-prefix}timeinput-wheel-item {
@@ -153,6 +166,14 @@ $timeinput-footer-padding: 0.5rem 0 0 !default;
 
   &:hover:not(:disabled):not(.#{iv.$class-prefix}is-selected) {
     color: cv.getVar('timeinput-wheel-color');
+
+    // Only where the pointer can hover: a touch browser can leave `:hover` on
+    // the last item a finger lifted from, and a drag leaves that item off the
+    // band, where the fill would stick. The fill is not in the transition list
+    // above, so it snaps on and off the way the calendar cells' hover does.
+    @media (hover: hover) {
+      background-color: cv.getVar('timeinput-wheel-hover-bg');
+    }
   }
 
   // The selected item (whichever is currently centred over the band) is
@@ -254,9 +275,9 @@ $timeinput-footer-padding: 0.5rem 0 0 !default;
 }
 
 // Mobile (small viewport): bigger touch targets, larger numbers, more iOS-native
-// feel. Item *height* is set inline by JS and bumped from 40px to 48px on small
-// viewports by TimeInputBase; the rules below adjust everything that's CSS-only
-// (font size, wheel width, gap, separator, mask intensity).
+// feel. Item *height* is set inline by JS, and made taller on small viewports by
+// the component; the rules below adjust everything that's CSS-only (font size,
+// wheel width, gap, separator, mask intensity).
 @media (max-width: 768px) {
   // Registered through `cv.register-vars` like the defaults above, so the
   // overrides land on the names the rules read.