@allxsmith/bestax-bulma 5.57.2 → 5.57.4

package/src/scss/bestax.scss

@@ -6,8 +6,10 @@
 // Usage (SCSS source):
 //   @use '@allxsmith/bestax-bulma/scss/bestax';
 
-// Include all of Bulma (primary overridden to bestax blue)
-@use 'bulma/sass' with ($primary: #1e6b99);
+// Include all of Bulma, with bestax blue as primary, and table header cells
+// aligned to the start of the line, as body cells are, rather than Bulma's
+// `left`, so they follow a right-to-left page
+@use 'bulma/sass' with ($primary: #1e6b99, $table-cell-text-align: start);
 
 // Include bestax extras
 @use 'variables';

package/src/scss/elements/_delete.scss

@@ -0,0 +1,63 @@
+// Bestax Extras - Delete Styles
+// Bulma draws a delete button's circle and its cross as background colors,
+// on the button and on its `::before` and `::after`, and draws the Modal's
+// floating close and a delete tag's cross the same way. Forced colors
+// (Windows' contrast themes) replaces background colors with the system's, so
+// the buttons vanish, or their cross does, while they still work and still
+// take focus. This keeps them drawn there, in the system's button colors: the
+// circle in ButtonFace with a ButtonText edge, and the cross in ButtonText.
+// The floating close has no circle, so it gets only the cross. Outside forced
+// colors it changes nothing.
+//
+// `.delete` is `Delete`, which every other close button bestax renders is
+// too, apart from the Modal's floating close (`.modal-close`) and `Tag
+// isDelete` (`.tag.is-delete`).
+//
+// `forced-color-adjust: none` keeps these colors, and the focus ring's too,
+// which would then be Bulma's focus color rather than the user's, so the ring
+// takes the system's Highlight. It would also keep a disabled one looking
+// like the rest, so that one's edge and cross take GrayText, the system's
+// color for a disabled control: a `Delete` with `disabled`, which writes
+// Bulma's `is-disabled` too, and any of them inside a disabled `<fieldset>`.
+//
+// Bulma's CSS can land on either side of this partial, as it can for
+// `_loader.scss`, which says why, so each selector names its last class twice
+// to outrank Bulma's rule for the same element, wherever the two load.
+
+@use 'bulma/sass/utilities/initial-variables' as iv;
+
+@media (forced-colors: active) {
+  .#{iv.$class-prefix}delete.#{iv.$class-prefix}delete,
+  .#{iv.$class-prefix}tag.#{iv.$class-prefix}is-delete.#{iv.$class-prefix}is-delete {
+    background-color: ButtonFace;
+    border: 1px solid ButtonText;
+
+    &:disabled,
+    &.#{iv.$class-prefix}is-disabled {
+      border-color: GrayText;
+    }
+  }
+
+  .#{iv.$class-prefix}delete.#{iv.$class-prefix}delete,
+  .#{iv.$class-prefix}modal-close.#{iv.$class-prefix}modal-close,
+  .#{iv.$class-prefix}tag.#{iv.$class-prefix}is-delete.#{iv.$class-prefix}is-delete {
+    forced-color-adjust: none;
+
+    &::before,
+    &::after {
+      background-color: ButtonText;
+    }
+
+    &:disabled,
+    &.#{iv.$class-prefix}is-disabled {
+      &::before,
+      &::after {
+        background-color: GrayText;
+      }
+    }
+
+    &:focus-visible {
+      outline-color: Highlight;
+    }
+  }
+}

package/src/scss/elements/_index.scss

@@ -3,6 +3,7 @@
 
 // Element Components
 @use 'colorswatch';
+@use 'delete';
 @use 'descriptionlist';
 @use 'kbd';
 @use 'linkbutton';

package/src/scss/form/_dropzone.scss

@@ -197,37 +197,3 @@ $dropzone-size-font-size: cv.getVar('size-small') !default;
   flex: none;
   font-size: cv.getVar('dropzone-size-font-size');
 }
-
-// Bulma shows a delete button's focus only as a slightly darker circle, so a
-// row's remove button takes a ring from the keyboard, in Bulma's focus
-// colour, style and width.
-.#{iv.$class-prefix}dropzone-item .#{iv.$class-prefix}delete:focus-visible {
-  outline-color: hsl(
-    cv.getVar('focus-h'),
-    cv.getVar('focus-s'),
-    cv.getVar('focus-l')
-  );
-  outline-offset: cv.getVar('focus-offset');
-  outline-style: cv.getVar('focus-style');
-  outline-width: cv.getVar('focus-width');
-}
-
-// Bulma draws a delete button's circle and cross as backgrounds, which forced
-// colours paints over, so the remove buttons would vanish. They keep their
-// own colours there, in the system's button colours.
-@media (forced-colors: active) {
-  .#{iv.$class-prefix}dropzone-item .#{iv.$class-prefix}delete {
-    background-color: ButtonFace;
-    border: 1px solid ButtonText;
-    forced-color-adjust: none;
-
-    &::before,
-    &::after {
-      background-color: ButtonText;
-    }
-
-    &:focus-visible {
-      outline-color: Highlight;
-    }
-  }
-}

package/src/scss/versions/bestax-no-dark-mode.scss

@@ -19,7 +19,8 @@
 
 @forward "bulma/sass/utilities";
 @forward "bulma/sass/base";
-@forward "bulma/sass/elements";
+// Table header cells align to the start of the line, as in bestax.scss.
+@forward "bulma/sass/elements" with ($table-cell-text-align: start !default);
 @forward "bulma/sass/form";
 @forward "bulma/sass/components";
 @forward "bulma/sass/grid";

package/src/scss/versions/bestax-no-helpers-prefixed.scss

@@ -8,7 +8,8 @@
 @use "bulma/sass/utilities" with ($class-prefix: "bestax-", $primary: #1e6b99);
 @forward "bulma/sass/themes";
 @forward "bulma/sass/base";
-@forward "bulma/sass/elements";
+// Table header cells align to the start of the line, as in bestax.scss.
+@forward "bulma/sass/elements" with ($table-cell-text-align: start !default);
 @forward "bulma/sass/form";
 @forward "bulma/sass/components";
 @forward "bulma/sass/grid";

package/src/scss/versions/bestax-no-helpers.scss

@@ -9,7 +9,8 @@
 @forward "bulma/sass/utilities";
 @forward "bulma/sass/themes";
 @forward "bulma/sass/base";
-@forward "bulma/sass/elements";
+// Table header cells align to the start of the line, as in bestax.scss.
+@forward "bulma/sass/elements" with ($table-cell-text-align: start !default);
 @forward "bulma/sass/form";
 @forward "bulma/sass/components";
 @forward "bulma/sass/grid";

package/src/scss/versions/bestax-prefixed.scss

@@ -5,7 +5,12 @@
 //
 // All CSS classes will be prefixed with "bestax-", e.g. "bestax-button", "bestax-is-primary"
 
-@use 'bulma/sass' with ($class-prefix: "bestax-", $primary: #1e6b99);
+// Table header cells align to the start of the line, as in bestax.scss.
+@use 'bulma/sass' with (
+  $class-prefix: "bestax-",
+  $primary: #1e6b99,
+  $table-cell-text-align: start
+);
 
 @use '../variables';
 @use '../mixins';