@allxsmith/bestax-bulma 5.3.0 → 5.4.2

package/src/scss/components/_avatar.scss

@@ -0,0 +1,121 @@
+// Avatar component styles
+@use 'bulma/sass/utilities/initial-variables' as iv;
+@use 'bulma/sass/utilities/css-variables' as cv;
+@use '../mixins' as *;
+
+// Avatar-specific SCSS variables
+$avatar-size: 48px !default;
+$avatar-background: cv.getVar('background') !default;
+$avatar-color: cv.getVar('text') !default;
+$avatar-weight: cv.getVar('weight-semibold') !default;
+$avatar-rounded-radius: cv.getVar('radius-large') !default;
+
+.#{iv.$class-prefix}avatar {
+  @include cv.register-vars(
+    (
+      'avatar-size': #{$avatar-size},
+      'avatar-background': #{$avatar-background},
+      'avatar-color': #{$avatar-color},
+      'avatar-weight': #{$avatar-weight},
+      'avatar-rounded-radius': #{$avatar-rounded-radius},
+    )
+  );
+}
+
+.#{iv.$class-prefix}avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  flex-shrink: 0;
+  width: cv.getVar('avatar-size');
+  height: cv.getVar('avatar-size');
+  background-color: cv.getVar('avatar-background');
+  color: cv.getVar('avatar-color');
+  font-weight: cv.getVar('avatar-weight');
+  vertical-align: middle;
+  user-select: none;
+  margin: 0;
+
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  svg {
+    display: block;
+  }
+}
+
+a.#{iv.$class-prefix}avatar,
+button.#{iv.$class-prefix}avatar {
+  cursor: pointer;
+  border: none;
+  padding: 0;
+
+  &:focus-visible {
+    @include extras-focus-outline;
+  }
+}
+
+.#{iv.$class-prefix}avatar-initials {
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+// Shapes
+.#{iv.$class-prefix}avatar.#{iv.$class-prefix}is-circle {
+  border-radius: cv.getVar('radius-rounded');
+}
+
+.#{iv.$class-prefix}avatar.#{iv.$class-prefix}is-rounded {
+  border-radius: cv.getVar('avatar-rounded-radius');
+}
+
+.#{iv.$class-prefix}avatar.#{iv.$class-prefix}is-square {
+  border-radius: 0;
+}
+
+// Preset sizes (mirrors Bulma's image fixed-size list)
+@each $size in 16, 24, 32, 48, 64, 96, 128 {
+  .#{iv.$class-prefix}avatar.#{iv.$class-prefix}is-#{$size}x#{$size} {
+    width: #{$size}px;
+    height: #{$size}px;
+    font-size: calc(#{$size}px / 2.5);
+  }
+}
+
+// Color variants — background + a contrasting foreground (mirrors Toast's approach).
+@each $name in 'primary', 'link', 'info', 'success', 'warning', 'danger' {
+  .#{iv.$class-prefix}avatar.#{iv.$class-prefix}is-#{$name} {
+    background-color: cv.getVar($name);
+    color: hsl(
+      cv.getVar($name, '', '-h'),
+      cv.getVar($name, '', '-s'),
+      cv.getVar($name, '', '-invert-l')
+    );
+  }
+}
+
+.#{iv.$class-prefix}avatar.#{iv.$class-prefix}is-black {
+  background-color: cv.getVar('black');
+  color: cv.getVar('white');
+}
+
+.#{iv.$class-prefix}avatar.#{iv.$class-prefix}is-dark {
+  background-color: cv.getVar('dark');
+  color: cv.getVar('light');
+}
+
+.#{iv.$class-prefix}avatar.#{iv.$class-prefix}is-light {
+  background-color: cv.getVar('light');
+  color: cv.getVar('dark');
+}
+
+.#{iv.$class-prefix}avatar.#{iv.$class-prefix}is-white {
+  background-color: cv.getVar('white');
+  color: cv.getVar('black');
+}

package/src/scss/components/_avatars.scss

@@ -0,0 +1,75 @@
+// Avatars component styles — an overlapping/stacked Avatar group
+@use 'bulma/sass/utilities/initial-variables' as iv;
+@use 'bulma/sass/utilities/css-variables' as cv;
+
+// Avatars-specific SCSS variables
+$avatars-ring-color: cv.getVar('scheme-main') !default;
+$avatars-ring-width: 2px !default;
+$avatars-spacing-sm: 0.5rem !default;
+$avatars-spacing-md: 0.75rem !default;
+$avatars-spacing-lg: 1rem !default;
+
+.#{iv.$class-prefix}avatars {
+  @include cv.register-vars(
+    (
+      'avatars-ring-color': #{$avatars-ring-color},
+      'avatars-ring-width': #{$avatars-ring-width},
+      'avatars-spacing': #{$avatars-spacing-md},
+    )
+  );
+}
+
+// Re-register the single spacing var per preset. A numeric `spacing` prop sets
+// --bulma-avatars-spacing inline instead (mirrors Sidebar's inline width var).
+.#{iv.$class-prefix}avatars.#{iv.$class-prefix}is-spacing-sm {
+  @include cv.register-vars(
+    (
+      'avatars-spacing': #{$avatars-spacing-sm},
+    )
+  );
+}
+
+.#{iv.$class-prefix}avatars.#{iv.$class-prefix}is-spacing-lg {
+  @include cv.register-vars(
+    (
+      'avatars-spacing': #{$avatars-spacing-lg},
+    )
+  );
+}
+
+.#{iv.$class-prefix}avatars {
+  display: inline-flex;
+  align-items: center;
+
+  .#{iv.$class-prefix}avatar {
+    box-shadow: 0 0 0 cv.getVar('avatars-ring-width')
+      cv.getVar('avatars-ring-color');
+
+    &:not(:first-child) {
+      // Logical property so the stack overlaps toward the reading direction
+      // (a physical margin-left pulls avatars apart under dir="rtl").
+      margin-inline-start: calc(-1 * #{cv.getVar('avatars-spacing')});
+    }
+  }
+
+  // Non-overlapping: a positive gap of the same spacing var instead of a
+  // negative margin, and no ring (there is nothing to separate from).
+  &.#{iv.$class-prefix}is-spaced {
+    gap: cv.getVar('avatars-spacing');
+
+    .#{iv.$class-prefix}avatar {
+      box-shadow: none;
+
+      &:not(:first-child) {
+        margin-inline-start: 0;
+      }
+    }
+  }
+
+  // The "+N" surplus avatar uses scheme-aware tokens so it flips in dark mode
+  // (a fixed light color would stay pale on a dark scheme).
+  .#{iv.$class-prefix}avatar.#{iv.$class-prefix}is-surplus {
+    background-color: cv.getVar('background');
+    color: cv.getVar('text');
+  }
+}

package/src/scss/components/_badge.scss

@@ -0,0 +1,194 @@
+// Badge component styles — a small status/count indicator overlaid on a corner
+@use 'bulma/sass/utilities/initial-variables' as iv;
+@use 'bulma/sass/utilities/css-variables' as cv;
+
+// Badge-specific SCSS variables
+$badge-height: 1.25em !default;
+$badge-min-width: 1.25em !default;
+$badge-padding: 0 0.4em !default;
+$badge-font-size: 0.7rem !default;
+$badge-radius: cv.getVar('radius-rounded') !default;
+$badge-ring-color: cv.getVar('scheme-main') !default;
+$badge-ring-width: 2px !default;
+$badge-dot-size: 0.65em !default;
+$badge-inset-circle: 12% !default;
+$badge-animation-duration: 1.4s !default;
+
+.#{iv.$class-prefix}badge-wrapper {
+  position: relative;
+  display: inline-flex;
+}
+
+.#{iv.$class-prefix}badge {
+  @include cv.register-vars(
+    (
+      'badge-height': #{$badge-height},
+      'badge-min-width': #{$badge-min-width},
+      'badge-padding': #{$badge-padding},
+      'badge-font-size': #{$badge-font-size},
+      'badge-radius': #{$badge-radius},
+      'badge-ring-color': #{$badge-ring-color},
+      'badge-ring-width': #{$badge-ring-width},
+      'badge-dot-size': #{$badge-dot-size},
+      'badge-inset-circle': #{$badge-inset-circle},
+      'badge-animation-duration': #{$badge-animation-duration},
+    )
+  );
+}
+
+.#{iv.$class-prefix}badge {
+  position: absolute;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: cv.getVar('badge-height');
+  min-width: cv.getVar('badge-min-width');
+  padding: cv.getVar('badge-padding');
+  border-radius: cv.getVar('badge-radius');
+  box-shadow: 0 0 0 cv.getVar('badge-ring-width') cv.getVar('badge-ring-color');
+  font-size: cv.getVar('badge-font-size');
+  line-height: 1;
+  white-space: nowrap;
+  pointer-events: none;
+
+  &.#{iv.$class-prefix}is-dot {
+    height: cv.getVar('badge-dot-size');
+    min-width: cv.getVar('badge-dot-size');
+    padding: 0;
+  }
+
+  &.#{iv.$class-prefix}is-invisible {
+    visibility: hidden;
+  }
+}
+
+// Corner positions (relative to the .badge-wrapper, unless is-standalone)
+.#{iv.$class-prefix}badge.#{iv.$class-prefix}is-top-right {
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+}
+
+.#{iv.$class-prefix}badge.#{iv.$class-prefix}is-top-left {
+  top: 0;
+  left: 0;
+  transform: translate(-50%, -50%);
+}
+
+.#{iv.$class-prefix}badge.#{iv.$class-prefix}is-bottom-right {
+  bottom: 0;
+  right: 0;
+  transform: translate(50%, 50%);
+}
+
+.#{iv.$class-prefix}badge.#{iv.$class-prefix}is-bottom-left {
+  bottom: 0;
+  left: 0;
+  transform: translate(-50%, 50%);
+}
+
+// Standalone (no children) badges no longer emit an is-{position} class, but
+// keep this reset as belt-and-braces so a standalone badge always sits inline
+// in normal flow regardless of any position/overlap class a caller adds.
+// - position: relative (not static) so the pill is the positioned ancestor
+//   .is-pulse::after resolves against, instead of the halo escaping to cover
+//   whatever positioned container the badge sits in.
+// - pointer-events: auto overrides the base .badge reset (needed for the
+//   anchored overlay so clicks pass through to the child) because in
+//   standalone mode the pill itself is the interactive root.
+.#{iv.$class-prefix}badge.#{iv.$class-prefix}is-standalone {
+  position: relative;
+  display: inline-flex;
+  transform: none;
+  pointer-events: auto;
+}
+
+// Overlap adjustment — nudge the badge further in on a round child so it
+// doesn't float off the visible edge.
+.#{iv.$class-prefix}badge.#{iv.$class-prefix}is-overlap-circle.#{iv.$class-prefix}is-top-right {
+  top: cv.getVar('badge-inset-circle');
+  right: cv.getVar('badge-inset-circle');
+}
+
+.#{iv.$class-prefix}badge.#{iv.$class-prefix}is-overlap-circle.#{iv.$class-prefix}is-top-left {
+  top: cv.getVar('badge-inset-circle');
+  left: cv.getVar('badge-inset-circle');
+}
+
+.#{iv.$class-prefix}badge.#{iv.$class-prefix}is-overlap-circle.#{iv.$class-prefix}is-bottom-right {
+  bottom: cv.getVar('badge-inset-circle');
+  right: cv.getVar('badge-inset-circle');
+}
+
+.#{iv.$class-prefix}badge.#{iv.$class-prefix}is-overlap-circle.#{iv.$class-prefix}is-bottom-left {
+  bottom: cv.getVar('badge-inset-circle');
+  left: cv.getVar('badge-inset-circle');
+}
+
+// Color variants — background + a contrasting foreground (mirrors Toast/Avatar).
+@each $name in 'primary', 'link', 'info', 'success', 'warning', 'danger' {
+  .#{iv.$class-prefix}badge.#{iv.$class-prefix}is-#{$name} {
+    background-color: cv.getVar($name);
+    color: hsl(
+      cv.getVar($name, '', '-h'),
+      cv.getVar($name, '', '-s'),
+      cv.getVar($name, '', '-invert-l')
+    );
+  }
+}
+
+.#{iv.$class-prefix}badge.#{iv.$class-prefix}is-black {
+  background-color: cv.getVar('black');
+  color: cv.getVar('white');
+}
+
+.#{iv.$class-prefix}badge.#{iv.$class-prefix}is-dark {
+  background-color: cv.getVar('dark');
+  color: cv.getVar('light');
+}
+
+.#{iv.$class-prefix}badge.#{iv.$class-prefix}is-light {
+  background-color: cv.getVar('light');
+  color: cv.getVar('dark');
+}
+
+.#{iv.$class-prefix}badge.#{iv.$class-prefix}is-white {
+  background-color: cv.getVar('white');
+  color: cv.getVar('black');
+}
+
+// Pulse animation for "processing" badges.
+.#{iv.$class-prefix}badge.#{iv.$class-prefix}is-pulse::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+
+  // Decorative halo only — never intercept clicks. pointer-events is inherited,
+  // so without this the halo picks up the standalone pill's `auto` and its
+  // 1.75×-scaled box (opacity 0 still hit-tests) swallows adjacent clicks.
+  pointer-events: none;
+  border-radius: inherit;
+  background-color: inherit;
+  animation: extras-badge-pulse cv.getVar('badge-animation-duration')
+    cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+
+@keyframes extras-badge-pulse {
+  0% {
+    opacity: 0.6;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.75);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .#{iv.$class-prefix}badge.#{iv.$class-prefix}is-pulse::after {
+    animation: none;
+    display: none;
+  }
+}

package/src/scss/components/_index.scss

@@ -12,3 +12,6 @@
 @use 'carousel';
 @use 'tabs';
 @use 'reveal';
+@use 'avatar';
+@use 'avatars';
+@use 'badge';