@allxsmith/bestax-bulma 5.26.6 → 5.27.1

package/src/scss/form/_dateinput.scss

@@ -8,14 +8,37 @@ $dateinput-cell-color: cv.getVar('text') !default;
 $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;
+// Today's tint and the focus ring sit on the calendar's surface, so they take
+// `primary`'s `-on-scheme` variant, the one `color="primary"` gives them too.
+// Plain `primary` is too dark to read on a dark panel.
+$dateinput-cell-today-color: cv.getVar('primary-on-scheme') !default;
+$dateinput-focus-ring-color: cv.getVar('primary-on-scheme') !default;
 $dateinput-cell-disabled-color: cv.getVar('text-weak') !default;
-$dateinput-cell-other-month-color: cv.getVar('text-weak') !default;
+// Halfway between `text-weak` and `text`, in either scheme: still a step back
+// from the month's own days, and readable on the hover fill, where
+// `text-weak` falls below 4.5:1.
+$dateinput-cell-other-month-color: color-mix(
+  in srgb,
+  #{cv.getVar('text-weak')},
+  #{cv.getVar('text')}
+) !default;
 $dateinput-header-padding: 0.5rem 0 !default;
 $dateinput-day-name-color: cv.getVar('text-weak') !default;
 $dateinput-day-name-size: cv.getVar('size-7') !default;
 $dateinput-nav-button-size: 1.75rem !default;
+// A range's band: the days between its ends, tinted from the selection fill
+// so a `color` variant re-tints it too. A preview, while the end is still
+// being picked, is fainter.
+$dateinput-cell-range-bg: color-mix(
+  in srgb,
+  #{cv.getVar('dateinput-cell-selected-bg')} 18%,
+  transparent
+) !default;
+$dateinput-cell-range-preview-bg: color-mix(
+  in srgb,
+  #{cv.getVar('dateinput-cell-selected-bg')} 9%,
+  transparent
+) !default;
 
 .#{iv.$class-prefix}dateinput {
   @include cv.register-vars(
@@ -35,6 +58,8 @@ $dateinput-nav-button-size: 1.75rem !default;
       'dateinput-day-name-color': #{$dateinput-day-name-color},
       'dateinput-day-name-size': #{$dateinput-day-name-size},
       'dateinput-nav-button-size': #{$dateinput-nav-button-size},
+      'dateinput-cell-range-bg': #{$dateinput-cell-range-bg},
+      'dateinput-cell-range-preview-bg': #{$dateinput-cell-range-preview-bg},
     )
   );
 }
@@ -50,8 +75,7 @@ $dateinput-nav-button-size: 1.75rem !default;
 // (no popover wrapper), give it a subtle frame so the grid doesn't look
 // orphaned on the page. Mirrors the popover's visual weight without the
 // drop-shadow / animation.
-.#{iv.$class-prefix}dateinput-container
-  > .#{iv.$class-prefix}dateinput {
+.#{iv.$class-prefix}dateinput-container > .#{iv.$class-prefix}dateinput {
   background-color: cv.getVar('scheme-main');
   border: 1px solid cv.getVar('border');
   border-radius: cv.getVar('radius');
@@ -204,6 +228,11 @@ $dateinput-nav-button-size: 1.75rem !default;
     color: cv.getVar('dateinput-cell-today-color');
     font-weight: cv.getVar('weight-semibold');
   }
+  &.#{iv.$class-prefix}is-other-month {
+    color: cv.getVar('dateinput-cell-other-month-color');
+  }
+  // After the other-month tint, so a selected day from a nearby month, such as
+  // a range's end, reads the selected value's colour on the fill.
   &.#{iv.$class-prefix}is-selected {
     background-color: cv.getVar('dateinput-cell-selected-bg');
     color: cv.getVar('dateinput-cell-selected-color');
@@ -214,15 +243,65 @@ $dateinput-nav-button-size: 1.75rem !default;
   &.#{iv.$class-prefix}is-selected:focus-visible {
     outline-color: cv.getVar('dateinput-cell-selected-color');
   }
-  &.#{iv.$class-prefix}is-other-month {
-    color: cv.getVar('dateinput-cell-other-month-color');
-  }
   &.#{iv.$class-prefix}is-disabled,
   &:disabled {
     color: cv.getVar('dateinput-cell-disabled-color');
     cursor: not-allowed;
     opacity: 0.55;
   }
+  // A range: its ends take the selected fill above, and the days between
+  // them the band. The hover rule above replaces a cell's fill and outranks
+  // a bare class, so each band state repeats under `:hover`, where it ties
+  // that rule and comes later, and the hover overlay is painted on top of
+  // the band as an image rather than in its place.
+  &.#{iv.$class-prefix}is-in-range {
+    &,
+    &:hover:not(:disabled) {
+      background-color: cv.getVar('dateinput-cell-range-bg');
+    }
+  }
+  // A preview, while the end is still being picked: a fainter band, and an
+  // outline on the day it would end on, which isn't picked yet. On the
+  // pointer path that day is the one under the pointer.
+  &.#{iv.$class-prefix}is-in-range.#{iv.$class-prefix}is-preview,
+  &.#{iv.$class-prefix}is-range-end.#{iv.$class-prefix}is-preview {
+    &,
+    &:hover:not(:disabled) {
+      background-color: cv.getVar('dateinput-cell-range-preview-bg');
+    }
+  }
+  &.#{iv.$class-prefix}is-range-end.#{iv.$class-prefix}is-preview {
+    border-style: dashed;
+    border-color: cv.getVar('dateinput-cell-selected-bg');
+  }
+  &.#{iv.$class-prefix}is-in-range,
+  &.#{iv.$class-prefix}is-range-end.#{iv.$class-prefix}is-preview {
+    &:hover:not(:disabled) {
+      background-image: linear-gradient(
+        cv.getVar('dateinput-cell-hover-bg'),
+        cv.getVar('dateinput-cell-hover-bg')
+      );
+    }
+    // The band lifts the background toward its colour, and the hover overlay
+    // lifts it again, which takes the tints below 4.5:1 there. A nearby
+    // month's day in the band reads like any day of the range, and today
+    // leans a fifth of the way toward `text-strong`, which darkens it on a
+    // light scheme and lightens it on a dark one. Today comes first, as it
+    // does outside a band, so a day that is both today and from a nearby
+    // month reads as the nearby month's day in either place.
+    &:not(:disabled):not(.#{iv.$class-prefix}is-disabled) {
+      &.#{iv.$class-prefix}is-today {
+        color: color-mix(
+          in srgb,
+          cv.getVar('dateinput-cell-today-color') 80%,
+          cv.getVar('text-strong')
+        );
+      }
+      &.#{iv.$class-prefix}is-other-month {
+        color: cv.getVar('dateinput-cell-color');
+      }
+    }
+  }
 }
 
 .#{iv.$class-prefix}dateinput-years-grid {

package/src/scss/form/_daterangeinput.scss

@@ -0,0 +1,63 @@
+@use 'bulma/sass/utilities/initial-variables' as iv;
+@use 'bulma/sass/utilities/css-variables' as cv;
+
+// DateRangeInput's field: two inputs and a separator inside one Bulma
+// `.input`. The calendar's range styles live with the rest of the calendar's,
+// in `_dateinput.scss`, so a calendar portaled out of the field keeps them.
+$daterangeinput-gap: 0.5em !default;
+$daterangeinput-separator-color: cv.getVar('text-weak') !default;
+
+.#{iv.$class-prefix}daterangeinput {
+  @include cv.register-vars(
+    (
+      'daterangeinput-gap': #{$daterangeinput-gap},
+      'daterangeinput-separator-color': #{$daterangeinput-separator-color},
+    )
+  );
+}
+
+// Bulma's `.input` already lays its content out in a row and draws its focus
+// ring for `:focus-within`, so the field shows focus wherever it is inside.
+.#{iv.$class-prefix}daterangeinput-field {
+  gap: cv.getVar('daterangeinput-gap');
+  cursor: text;
+}
+
+// The inputs are bare: the field around them is the input the user sees.
+.#{iv.$class-prefix}daterangeinput-input {
+  flex: 1 1 0;
+  min-width: 0;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  outline: none;
+
+  &::placeholder {
+    color: cv.getVar('input-placeholder-color');
+  }
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+.#{iv.$class-prefix}daterangeinput-separator {
+  flex: none;
+  color: cv.getVar('daterangeinput-separator-color');
+}
+
+// A div takes no `disabled`, so the field is marked by class and given
+// Bulma's disabled input look from Bulma's own variables.
+.#{iv.$class-prefix}daterangeinput-field.#{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');
+  cursor: not-allowed;
+
+  .#{iv.$class-prefix}daterangeinput-input::placeholder {
+    color: cv.getVar('input-disabled-placeholder-color');
+  }
+}

package/src/scss/form/_datetimeinput.scss

@@ -129,14 +129,19 @@ $datetimeinput-time-overlay-blur: 3px !default;
     opacity: 0.5;
   }
 
+  // `text`, not `text-weak`: the label is small, and `text-weak` falls below
+  // 4.5:1 once the row's hover or focus fill sits behind it, in either scheme.
   & > span:first-child {
-    color: cv.getVar('text-weak');
+    color: cv.getVar('text');
     font-size: cv.getVar('size-7');
   }
 }
 
+// The pill's text sits on the panel's surface, so it takes `primary`'s
+// `-on-scheme` variant, which Bulma lightens on a dark scheme until it
+// contrasts there. Plain `primary` is too dark to read on a dark panel.
 .#{iv.$class-prefix}datetimeinput-footer-time-pill {
-  color: cv.getVar('primary');
+  color: cv.getVar('primary-on-scheme');
   font-weight: 600;
   font-variant-numeric: tabular-nums;
   padding: 0.15em 0.6em;

package/src/scss/form/_file.scss

@@ -0,0 +1,37 @@
+// File Component Styles
+// Bulma already styles the file input; this adds its keyboard focus ring
+
+@use "bulma/sass/utilities/initial-variables" as iv;
+@use "bulma/sass/utilities/css-variables" as cv;
+
+// Keyboard focus ring for File. The focusable element is the <input>, which
+// Bulma lays transparent over the whole widget, so the ring goes on the CTA
+// you see instead. The .file-label around them hides its overflow, which
+// clips a ring drawn outside the CTA, so the ring is drawn inside it, with
+// Bulma's focus colour, style and width. :focus-visible keeps it to the
+// keyboard: a click shows none.
+.#{iv.$class-prefix}file-input:focus-visible + .#{iv.$class-prefix}file-cta {
+  outline-color: hsl(cv.getVar("focus-h"), cv.getVar("focus-s"), cv.getVar("focus-l"));
+  outline-style: cv.getVar("focus-style");
+  outline-width: cv.getVar("focus-width");
+  outline-offset: calc(-1 * #{cv.getVar("focus-width")});
+}
+
+// A coloured File fills its CTA with that colour, which can be the focus
+// colour itself (it is the link colour by default), so its ring takes the
+// CTA's text colour (currentColor, which Bulma sets to read on the fill) and
+// sits one ring width further in, keeping a band of the fill outside it to
+// set it off from the page around the CTA. The colours are the ones File's
+// `color` prop takes, and the placeholder joins them into one rule.
+%file-focus-ring-on-fill {
+  outline-color: currentColor;
+  outline-offset: calc(-2 * #{cv.getVar("focus-width")});
+}
+
+@each $name in "primary", "link", "info", "success", "warning", "danger", "black", "dark", "light", "white" {
+  .#{iv.$class-prefix}file.#{iv.$class-prefix}is-#{$name}
+    .#{iv.$class-prefix}file-input:focus-visible
+    + .#{iv.$class-prefix}file-cta {
+    @extend %file-focus-ring-on-fill;
+  }
+}

package/src/scss/form/_index.scss

@@ -14,3 +14,5 @@
 @use 'dateinput';
 @use 'timeinput';
 @use 'datetimeinput';
+@use 'daterangeinput';
+@use 'file';

package/src/scss/form/_picker-popover.scss

@@ -140,10 +140,7 @@ $picker-trigger-pairs: (
   )
 );
 
-@each $pair in $picker-trigger-pairs {
-  $container: nth($pair, 1);
-  $trigger: nth($pair, 2);
-
+@each $container, $trigger in $picker-trigger-pairs {
   .#{$container} {
     position: relative;
     @include cv.register-vars(