@allxsmith/bestax-bulma 2.6.2 → 3.0.2

package/src/scss/components/_toast.scss

@@ -0,0 +1,244 @@
+// Toast component styles
+@use "bulma/sass/utilities/initial-variables" as iv;
+@use "bulma/sass/utilities/css-variables" as cv;
+@use '../variables' as *;
+@use '../mixins' as *;
+
+// Toast-specific SCSS variables
+$toast-background: hsl(0, 0%, 21%) !default;
+$toast-color: hsl(0, 0%, 96%) !default;
+$toast-radius: cv.getVar("radius") !default;
+$toast-shadow: 0 4px 12px hsla(0, 0%, 0%, 0.2) !default;
+$toast-padding: 0.875rem 1.25rem !default;
+$toast-min-width: 288px !default;
+$toast-max-width: 568px !default;
+$toast-gap: 1rem !default;
+$toast-message-size: 0.95rem !default;
+$toast-container-padding: 2rem !default;
+$toast-container-z-index: $extras-z-index-toast !default;
+$toast-container-gap: 0.75rem !default;
+$toast-animation-duration: 0.3s !default;
+$toast-action-weight: cv.getVar("weight-semibold") !default;
+$toast-action-radius: cv.getVar("radius") !default;
+$toast-action-hover-opacity: 0.1 !default;
+
+// Register CSS variables on .toast (cascade down to children)
+.#{iv.$class-prefix}toast {
+  @include cv.register-vars(
+    (
+      "toast-background": #{$toast-background},
+      "toast-color": #{$toast-color},
+      "toast-radius": #{$toast-radius},
+      "toast-shadow": #{$toast-shadow},
+      "toast-padding": #{$toast-padding},
+      "toast-min-width": #{$toast-min-width},
+      "toast-max-width": #{$toast-max-width},
+      "toast-gap": #{$toast-gap},
+      "toast-message-size": #{$toast-message-size},
+      "toast-animation-duration": #{$toast-animation-duration},
+      "toast-action-weight": #{$toast-action-weight},
+      "toast-action-radius": #{$toast-action-radius},
+      "toast-action-hover-opacity": #{$toast-action-hover-opacity},
+    )
+  );
+}
+
+// Toast container — positions toasts on screen and stacks multiples vertically.
+// Uses SCSS variables directly since the container is a parent of .toast
+// (CSS vars registered on .toast don't cascade up).
+.#{iv.$class-prefix}toast-container {
+  position: fixed;
+  z-index: #{$toast-container-z-index};
+  display: flex;
+  flex-direction: column;
+  gap: #{$toast-container-gap};
+  padding: #{$toast-container-padding};
+  pointer-events: none;
+  max-width: 100%;
+
+  // Top positions
+  &.#{iv.$class-prefix}is-top-right {
+    top: 0;
+    right: 0;
+    align-items: flex-end;
+  }
+
+  &.#{iv.$class-prefix}is-top-left {
+    top: 0;
+    left: 0;
+    align-items: flex-start;
+  }
+
+  &.#{iv.$class-prefix}is-top-center {
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    align-items: center;
+  }
+
+  // Bottom positions — column-reverse so newer toasts appear nearest the edge
+  &.#{iv.$class-prefix}is-bottom-right {
+    bottom: 0;
+    right: 0;
+    align-items: flex-end;
+    flex-direction: column-reverse;
+  }
+
+  &.#{iv.$class-prefix}is-bottom-left {
+    bottom: 0;
+    left: 0;
+    align-items: flex-start;
+    flex-direction: column-reverse;
+  }
+
+  &.#{iv.$class-prefix}is-bottom-center {
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    align-items: center;
+    flex-direction: column-reverse;
+  }
+}
+
+// Toast element
+.#{iv.$class-prefix}toast {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  gap: cv.getVar("toast-gap");
+  padding: cv.getVar("toast-padding");
+  border-radius: cv.getVar("toast-radius");
+  background-color: cv.getVar("toast-background");
+  color: cv.getVar("toast-color");
+  box-shadow: cv.getVar("toast-shadow");
+  pointer-events: auto;
+  min-width: cv.getVar("toast-min-width");
+  max-width: cv.getVar("toast-max-width");
+  animation: extras-toast-slide-up cv.getVar("toast-animation-duration") ease;
+
+  // Type variants — color the BACKGROUND.
+  // Uses Bulma's -invert-l pattern for text contrast (same approach as buttons).
+  @each $name in "primary", "link", "info", "success", "warning", "danger" {
+    &.#{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}is-dark {
+    background-color: cv.getVar("dark");
+    color: cv.getVar("light");
+  }
+
+  &.#{iv.$class-prefix}is-light {
+    background-color: cv.getVar("light");
+    color: cv.getVar("dark");
+  }
+
+  // Action-type variants — color the ACTION BUTTON (triggered by `actionType` prop).
+  // Uses `is-action-*` prefix to avoid collision with `is-*` background classes.
+  @each $name in "primary", "link", "info", "success", "warning", "danger" {
+    &.#{iv.$class-prefix}is-action-#{$name} .#{iv.$class-prefix}toast-action .#{iv.$class-prefix}button {
+      color: cv.getVar($name);
+    }
+  }
+
+  // Rounded (pill shape)
+  &.#{iv.$class-prefix}is-rounded {
+    border-radius: 9999px;
+  }
+
+  // Top positions use slide-down animation
+  .#{iv.$class-prefix}toast-container.#{iv.$class-prefix}is-top &,
+  .#{iv.$class-prefix}toast-container.#{iv.$class-prefix}is-top-left &,
+  .#{iv.$class-prefix}toast-container.#{iv.$class-prefix}is-top-center &,
+  .#{iv.$class-prefix}toast-container.#{iv.$class-prefix}is-top-right & {
+    animation-name: extras-toast-slide-down;
+  }
+}
+
+// Toast message
+.#{iv.$class-prefix}toast-message {
+  flex: 1;
+  font-size: cv.getVar("toast-message-size");
+}
+
+// Toast actions wrapper
+.#{iv.$class-prefix}toast-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+
+// Toast action button
+.#{iv.$class-prefix}toast-action {
+  flex-shrink: 0;
+
+  .#{iv.$class-prefix}button {
+    background: none;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    font-weight: cv.getVar("toast-action-weight");
+    text-transform: uppercase;
+    letter-spacing: 0.025em;
+    padding: 0.25rem 0.5rem;
+    border-radius: cv.getVar("toast-action-radius");
+    transition: background-color 0.15s ease;
+
+    &:hover {
+      background-color: hsla(0, 0%, 100%, cv.getVar("toast-action-hover-opacity"));
+    }
+  }
+}
+
+// Toast cancel button
+.#{iv.$class-prefix}toast-cancel {
+  flex-shrink: 0;
+
+  .#{iv.$class-prefix}button {
+    background: none;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    padding: 0.25rem 0.5rem;
+    border-radius: cv.getVar("toast-action-radius");
+    opacity: 0.7;
+    transition: opacity 0.15s ease;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+
+// Animations
+@keyframes extras-toast-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes extras-toast-slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// Reduced motion
+@media (prefers-reduced-motion: reduce) {
+  .#{iv.$class-prefix}toast {
+    animation: none;
+  }
+}

package/src/scss/components/_tooltip.scss

@@ -0,0 +1,250 @@
+// Tooltip Component Styles
+// A hover tooltip popover
+@use "bulma/sass/utilities/initial-variables" as iv;
+@use "bulma/sass/utilities/css-variables" as cv;
+@use '../variables' as *;
+@use '../mixins' as *;
+
+// Tooltip-specific SCSS variables
+$tooltip-background: hsl(0, 0%, 21%) !default;
+$tooltip-color: white !default;
+$tooltip-max-width: 15rem !default;
+$tooltip-multiline-width: 15rem !default;
+$tooltip-radius: cv.getVar("radius") !default;
+$tooltip-arrow-size: 5px !default;
+$tooltip-arrow-margin: 4px !default;
+$tooltip-padding: 0.35rem 0.75rem !default;
+$tooltip-z-index: $extras-z-index-tooltip !default;
+$tooltip-font-size: calc(#{$extras-size-normal} * 0.85) !default;
+$tooltip-font-weight: $extras-weight-normal !default;
+$tooltip-line-height: 1.25 !default;
+$tooltip-dashed-color: hsl(0, 0%, 60%) !default;
+
+// Size variant SCSS variables
+$tooltip-small-font-size: $extras-size-small !default;
+$tooltip-small-padding: 0.25rem 0.5rem !default;
+$tooltip-small-arrow-size: 4px !default;
+
+$tooltip-medium-font-size: calc(#{$extras-size-medium} * 0.85) !default;
+$tooltip-medium-padding: 0.5rem 1rem !default;
+$tooltip-medium-arrow-size: 6px !default;
+
+$tooltip-large-font-size: calc(#{$extras-size-large} * 0.85) !default;
+$tooltip-large-padding: 0.75rem 1.25rem !default;
+$tooltip-large-arrow-size: 7px !default;
+
+// Register CSS variables on .tooltip-content
+// (tooltip-content is the actual tooltip element that gets themed)
+.#{iv.$class-prefix}tooltip-content {
+  @include cv.register-vars(
+    (
+      "tooltip-background": #{$tooltip-background},
+      "tooltip-color": #{$tooltip-color},
+      "tooltip-radius": #{$tooltip-radius},
+      "tooltip-padding": #{$tooltip-padding},
+      "tooltip-max-width": #{$tooltip-max-width},
+      "tooltip-multiline-width": #{$tooltip-multiline-width},
+      "tooltip-arrow-size": #{$tooltip-arrow-size},
+      "tooltip-arrow-margin": #{$tooltip-arrow-margin},
+      "tooltip-z-index": #{$tooltip-z-index},
+      "tooltip-font-size": #{$tooltip-font-size},
+      "tooltip-font-weight": #{$tooltip-font-weight},
+      "tooltip-line-height": #{$tooltip-line-height},
+      "tooltip-dashed-color": #{$tooltip-dashed-color},
+    )
+  );
+}
+
+// Tooltip wrapper
+.#{iv.$class-prefix}tooltip {
+  @include cv.register-vars(
+    (
+      "tooltip-dashed-color": #{$tooltip-dashed-color},
+    )
+  );
+
+  position: relative;
+  display: inline-flex;
+
+  // Dashed underline style
+  &.#{iv.$class-prefix}is-dashed {
+    border-bottom: 1px dashed cv.getVar("tooltip-dashed-color");
+    cursor: help;
+  }
+}
+
+// Tooltip content element
+.#{iv.$class-prefix}tooltip-content {
+  position: absolute;
+  z-index: cv.getVar("tooltip-z-index");
+  padding: cv.getVar("tooltip-padding");
+  font-size: cv.getVar("tooltip-font-size");
+  font-weight: cv.getVar("tooltip-font-weight");
+  line-height: cv.getVar("tooltip-line-height");
+  white-space: nowrap;
+  max-width: cv.getVar("tooltip-max-width");
+  background-color: cv.getVar("tooltip-background");
+  color: cv.getVar("tooltip-color");
+  border-radius: cv.getVar("tooltip-radius");
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+
+  // Arrow
+  &::before {
+    content: '';
+    position: absolute;
+    border: cv.getVar("tooltip-arrow-size") solid transparent;
+  }
+
+  // Animation styles
+  .#{iv.$class-prefix}tooltip.#{iv.$class-prefix}is-animated & {
+    @include extras-transition(opacity, visibility);
+  }
+
+  // Show tooltip
+  .#{iv.$class-prefix}tooltip.#{iv.$class-prefix}is-active & {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  // Square corners
+  .#{iv.$class-prefix}tooltip.#{iv.$class-prefix}is-square & {
+    border-radius: 0;
+  }
+
+  // Multiline
+  .#{iv.$class-prefix}tooltip.#{iv.$class-prefix}is-multiline & {
+    white-space: normal;
+    width: cv.getVar("tooltip-multiline-width");
+    text-align: center;
+  }
+}
+
+// Position: Top (default)
+.#{iv.$class-prefix}tooltip.#{iv.$class-prefix}is-top .#{iv.$class-prefix}tooltip-content,
+.#{iv.$class-prefix}tooltip:not(.#{iv.$class-prefix}is-bottom):not(.#{iv.$class-prefix}is-left):not(.#{iv.$class-prefix}is-right) .#{iv.$class-prefix}tooltip-content {
+  bottom: calc(100% + #{cv.getVar("tooltip-arrow-size")} + #{cv.getVar("tooltip-arrow-margin")});
+  left: 50%;
+  transform: translateX(-50%);
+
+  &::before {
+    top: 100%;
+    left: calc(50% + var(--tooltip-arrow-offset, 0px));
+    transform: translateX(-50%);
+    border-top-color: cv.getVar("tooltip-background");
+  }
+}
+
+// Position: Bottom
+.#{iv.$class-prefix}tooltip.#{iv.$class-prefix}is-bottom .#{iv.$class-prefix}tooltip-content {
+  top: calc(100% + #{cv.getVar("tooltip-arrow-size")} + #{cv.getVar("tooltip-arrow-margin")});
+  left: 50%;
+  transform: translateX(-50%);
+
+  &::before {
+    bottom: 100%;
+    left: calc(50% + var(--tooltip-arrow-offset, 0px));
+    transform: translateX(-50%);
+    border-bottom-color: cv.getVar("tooltip-background");
+  }
+}
+
+// Position: Left
+.#{iv.$class-prefix}tooltip.#{iv.$class-prefix}is-left .#{iv.$class-prefix}tooltip-content {
+  right: calc(100% + #{cv.getVar("tooltip-arrow-size")} + #{cv.getVar("tooltip-arrow-margin")});
+  top: 50%;
+  transform: translateY(-50%);
+
+  &::before {
+    left: 100%;
+    top: calc(50% + var(--tooltip-arrow-offset, 0px));
+    transform: translateY(-50%);
+    border-left-color: cv.getVar("tooltip-background");
+  }
+}
+
+// Position: Right
+.#{iv.$class-prefix}tooltip.#{iv.$class-prefix}is-right .#{iv.$class-prefix}tooltip-content {
+  left: calc(100% + #{cv.getVar("tooltip-arrow-size")} + #{cv.getVar("tooltip-arrow-margin")});
+  top: 50%;
+  transform: translateY(-50%);
+
+  &::before {
+    right: 100%;
+    top: calc(50% + var(--tooltip-arrow-offset, 0px));
+    transform: translateY(-50%);
+    border-right-color: cv.getVar("tooltip-background");
+  }
+}
+
+// Color variants
+// Uses Bulma's -invert-l pattern for text contrast (same approach as buttons)
+@mixin tooltip-color($name) {
+  .#{iv.$class-prefix}tooltip.#{iv.$class-prefix}is-#{$name} .#{iv.$class-prefix}tooltip-content {
+    @include cv.register-vars(
+      (
+        "tooltip-background": #{cv.getVar($name)},
+        "tooltip-color": #{hsl(cv.getVar($name, "", "-h"), cv.getVar($name, "", "-s"), cv.getVar($name, "", "-invert-l"))},
+      )
+    );
+  }
+}
+
+@include tooltip-color('primary');
+@include tooltip-color('link');
+@include tooltip-color('info');
+@include tooltip-color('success');
+@include tooltip-color('warning');
+@include tooltip-color('danger');
+
+// Dark variant
+.#{iv.$class-prefix}tooltip.#{iv.$class-prefix}is-dark .#{iv.$class-prefix}tooltip-content {
+  @include cv.register-vars(
+    (
+      "tooltip-background": #{cv.getVar("dark")},
+      "tooltip-color": #{cv.getVar("light")},
+    )
+  );
+}
+
+// Light variant
+.#{iv.$class-prefix}tooltip.#{iv.$class-prefix}is-light .#{iv.$class-prefix}tooltip-content {
+  @include cv.register-vars(
+    (
+      "tooltip-background": #{cv.getVar("light")},
+      "tooltip-color": #{cv.getVar("dark")},
+    )
+  );
+}
+
+// Size variants
+.#{iv.$class-prefix}tooltip.#{iv.$class-prefix}is-small .#{iv.$class-prefix}tooltip-content {
+  @include cv.register-vars(
+    (
+      "tooltip-font-size": #{$tooltip-small-font-size},
+      "tooltip-padding": #{$tooltip-small-padding},
+      "tooltip-arrow-size": #{$tooltip-small-arrow-size},
+    )
+  );
+}
+
+.#{iv.$class-prefix}tooltip.#{iv.$class-prefix}is-medium .#{iv.$class-prefix}tooltip-content {
+  @include cv.register-vars(
+    (
+      "tooltip-font-size": #{$tooltip-medium-font-size},
+      "tooltip-padding": #{$tooltip-medium-padding},
+      "tooltip-arrow-size": #{$tooltip-medium-arrow-size},
+    )
+  );
+}
+
+.#{iv.$class-prefix}tooltip.#{iv.$class-prefix}is-large .#{iv.$class-prefix}tooltip-content {
+  @include cv.register-vars(
+    (
+      "tooltip-font-size": #{$tooltip-large-font-size},
+      "tooltip-padding": #{$tooltip-large-padding},
+      "tooltip-arrow-size": #{$tooltip-large-arrow-size},
+    )
+  );
+}

package/src/scss/elements/_index.scss

@@ -0,0 +1,5 @@
+// Bestax Extras - Element Styles Index
+// Import all element partials here
+
+// Element Components
+@use 'linkbutton';

package/src/scss/elements/_linkbutton.scss

@@ -0,0 +1,77 @@
+// Bestax Extras - LinkButton Styles
+// Overrides for .button.is-text and .button.is-ghost when used as LinkButton
+// Follows Bulma v1 CSS variable convention
+
+@use "bulma/sass/utilities/initial-variables" as iv;
+@use "bulma/sass/utilities/css-variables" as cv;
+
+// LinkButton-specific SCSS variables
+$link-button-underline-offset: 0.2em !default;
+$link-button-transition-duration: cv.getVar("duration") !default;
+$link-button-ghost-color: cv.getVar("text") !default;
+$link-button-ghost-hover-color: cv.getVar("text-strong") !default;
+
+// Register CSS custom properties
+.#{iv.$class-prefix}button.#{iv.$class-prefix}link-button {
+  @include cv.register-vars(
+    (
+      "link-button-underline-offset": #{$link-button-underline-offset},
+      "link-button-transition-duration": #{$link-button-transition-duration},
+      "link-button-ghost-color": #{$link-button-ghost-color},
+      "link-button-ghost-hover-color": #{$link-button-ghost-hover-color},
+    )
+  );
+
+  // Text variant: remove underline that Bulma adds
+  &.#{iv.$class-prefix}is-text {
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+      text-decoration: none;
+    }
+  }
+
+  // Ghost variant: use default text color instead of link color, remove underline
+  &.#{iv.$class-prefix}is-ghost {
+    color: cv.getVar("link-button-ghost-color");
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+      color: cv.getVar("link-button-ghost-hover-color");
+      text-decoration: none;
+    }
+  }
+
+  // Underline variant: plain text, underline on hover/focus, no button chrome
+  &.#{iv.$class-prefix}link-button-underline {
+    text-decoration: none;
+    background-color: transparent;
+    border-color: transparent;
+    transition: text-decoration cv.getVar("link-button-transition-duration");
+
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+      text-underline-offset: cv.getVar("link-button-underline-offset");
+      background-color: transparent;
+      border-color: transparent;
+    }
+  }
+
+  // Color variants — override text color for all variants
+  @each $name
+    in ("primary", "link", "info", "success", "warning", "danger", "white",
+      "light", "dark", "black")
+  {
+    &.#{iv.$class-prefix}link-button-#{$name} {
+      color: cv.getVar("#{$name}");
+
+      &:hover,
+      &:focus {
+        color: cv.getVar("#{$name}");
+      }
+    }
+  }
+}

package/src/scss/extras.scss

@@ -0,0 +1,24 @@
+// Bestax Extras - Main SCSS Entry Point
+// This file imports all extra component styles
+//
+// Usage (pre-built CSS):
+//   import '@allxsmith/bestax-bulma/dist/extras.css';
+//
+// Usage (SCSS source for customization):
+//   @use '@allxsmith/bestax-bulma/src/scss/extras';
+
+// Foundation
+@use 'variables';
+@use 'mixins';
+
+// Component styles
+@use 'components/index' as components;
+
+// Form component styles
+@use 'form/index' as form;
+
+// Element styles
+@use 'elements/index' as elements;
+
+// Helper styles
+@use 'helpers/index' as helpers;