@actabldesign/bellhop-styles 0.0.4 → 0.0.12

package/src/bh-tokens/components/progress-spinner.scss

@@ -0,0 +1,130 @@
+/* ==========================================================================
+   BH-PROGRESS-SPINNER COMPONENT STYLES
+   Uses tokens from _progress-spinner.tokens.scss
+   ========================================================================== */
+
+@use './_progress-spinner.tokens.scss';
+
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ==========================================================================
+   OVERLAY STYLES
+   ========================================================================== */
+
+.bh-progress-spinner-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--bh-progress-spinner-overlay-bg);
+  backdrop-filter: var(--bh-progress-spinner-overlay-backdrop-blur);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--bh-progress-spinner-overlay-z-index);
+}
+
+.bh-progress-spinner-overlay-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--bh-progress-spinner-overlay-gap);
+}
+
+/* ==========================================================================
+   CONTAINER STYLES
+   ========================================================================== */
+
+.bh-progress-spinner-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--bh-progress-spinner-gap);
+}
+
+/* ==========================================================================
+   MESSAGE STYLES
+   ========================================================================== */
+
+.bh-progress-spinner-message {
+  color: var(--bh-progress-spinner-message-color);
+  font-size: var(--bh-progress-spinner-message-font-size);
+  line-height: var(--bh-progress-spinner-message-line-height);
+  font-weight: var(--bh-progress-spinner-message-font-weight);
+  text-align: center;
+  margin-top: var(--bh-progress-spinner-message-margin-top);
+}
+
+.bh-progress-spinner-overlay .bh-progress-spinner-message {
+  color: var(--bh-progress-spinner-message-color-overlay);
+}
+
+/* ==========================================================================
+   SVG WRAPPER
+   ========================================================================== */
+
+.bh-progress-spinner-svg-wrapper {
+  animation: bh-spinner-rotate var(--bh-progress-spinner-rotation-duration) linear infinite;
+  will-change: transform;
+  backface-visibility: hidden;
+  perspective: 1000px;
+}
+
+.bh-progress-spinner-svg {
+  display: block;
+  transform-origin: 50% 50%;
+  transform: translateZ(0);
+}
+
+/* ==========================================================================
+   CIRCLE ANIMATION
+   ========================================================================== */
+
+.bh-progress-spinner-circle {
+  stroke-dasharray: 90, 150;
+  stroke-dashoffset: 0;
+  animation: bh-spinner-dash var(--bh-progress-spinner-dash-duration) ease-in-out infinite;
+  transform-origin: 50% 50%;
+}
+
+/* ==========================================================================
+   ANIMATIONS
+   ========================================================================== */
+
+@keyframes bh-spinner-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes bh-spinner-dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}
+
+/* ==========================================================================
+   HOVER EFFECTS
+   ========================================================================== */
+
+.bh-progress-spinner-container:hover .bh-progress-spinner-svg-wrapper {
+  animation-duration: var(--bh-progress-spinner-rotation-duration-hover);
+}
+
+.bh-progress-spinner-container:hover .bh-progress-spinner-circle {
+  animation-duration: var(--bh-progress-spinner-dash-duration-hover);
+}

package/src/bh-tokens/components/radiobutton.scss

@@ -0,0 +1,193 @@
+/**
+ * RadioButton Component Styles
+ * BEM naming with tokens from _radiobutton.tokens.scss
+ */
+
+@use './_radiobutton.tokens.scss';
+
+:host {
+  display: inline-flex;
+}
+
+/* ================================
+   Container & Wrapper
+   ================================ */
+
+.radiobutton-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bh-radiobutton-label-gap);
+  cursor: pointer;
+  user-select: none;
+}
+
+.radiobutton-container {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--bh-radiobutton-size-md);
+  height: var(--bh-radiobutton-size-md);
+  background-color: var(--bh-radiobutton-bg);
+  border: var(--bh-radiobutton-border-width) solid var(--bh-radiobutton-border);
+  border-radius: var(--bh-radiobutton-border-radius);
+  transition: var(--bh-radiobutton-transition);
+  flex-shrink: 0;
+}
+
+/* ================================
+   Size Variants
+   ================================ */
+
+.radiobutton-container-small {
+  width: var(--bh-radiobutton-size-sm);
+  height: var(--bh-radiobutton-size-sm);
+}
+
+.radiobutton-container-large {
+  width: var(--bh-radiobutton-size-md);
+  height: var(--bh-radiobutton-size-md);
+}
+
+/* ================================
+   Indicator (inner circle/dot)
+   ================================ */
+
+.radiobutton-indicator {
+  width: var(--bh-radiobutton-indicator-size);
+  height: var(--bh-radiobutton-indicator-size);
+  background-color: var(--bh-radiobutton-indicator);
+  border-radius: 50%;
+  opacity: 0;
+  transform: scale(0);
+  transition: var(--bh-radiobutton-transition);
+}
+
+.radiobutton-container-small .radiobutton-indicator {
+  width: var(--bh-radiobutton-indicator-size-sm);
+  height: var(--bh-radiobutton-indicator-size-sm);
+}
+
+/* ================================
+   Checked State
+   ================================ */
+
+.radiobutton-container-checked {
+  background-color: var(--bh-radiobutton-bg-checked);
+  border-color: var(--bh-radiobutton-border-checked);
+}
+
+.radiobutton-container-checked .radiobutton-indicator {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* ================================
+   Hover State
+   ================================ */
+
+.radiobutton-container-hovered:not(.radiobutton-container-disabled) {
+  background-color: var(--bh-radiobutton-bg-hover);
+  border-color: var(--bh-radiobutton-border-hover);
+}
+
+.radiobutton-container-checked.radiobutton-container-hovered:not(.radiobutton-container-disabled) {
+  background-color: var(--bh-radiobutton-bg-checked-hover);
+  border-color: var(--bh-radiobutton-border-checked-hover);
+}
+
+/* ================================
+   Focus State
+   ================================ */
+
+.radiobutton-container-focused {
+  border-color: var(--bh-radiobutton-border-focus);
+  outline: 3px solid var(--bh-radiobutton-outline-focus);
+  outline-offset: var(--bh-radiobutton-outline-offset);
+}
+
+/* ================================
+   Disabled State
+   ================================ */
+
+.radiobutton-container-disabled {
+  background-color: var(--bh-radiobutton-bg-disabled);
+  border-color: var(--bh-radiobutton-border-disabled);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.radiobutton-container-disabled.radiobutton-container-checked {
+  background-color: var(--bh-radiobutton-bg-checked-disabled);
+  border-color: var(--bh-radiobutton-border-disabled);
+}
+
+.radiobutton-container-disabled .radiobutton-indicator {
+  background-color: var(--bh-radiobutton-indicator-disabled);
+}
+
+.radiobutton-wrapper-disabled {
+  cursor: not-allowed;
+}
+
+.radiobutton-wrapper-disabled .radiobutton-label {
+  color: var(--bh-radiobutton-label-disabled);
+}
+
+/* ================================
+   Invalid State
+   ================================ */
+
+.radiobutton-container-invalid {
+  border-color: var(--bh-radiobutton-border-invalid);
+}
+
+.radiobutton-container-invalid.radiobutton-container-hovered:not(.radiobutton-container-disabled) {
+  border-color: var(--bh-radiobutton-border-invalid-hover);
+}
+
+.radiobutton-container-invalid.radiobutton-container-focused {
+  outline-color: var(--bh-radiobutton-outline-invalid);
+}
+
+/* ================================
+   Filled Variant
+   ================================ */
+
+.radiobutton-container-filled {
+  background-color: var(--bh-radiobutton-filled-bg);
+}
+
+.radiobutton-container-filled:not(.radiobutton-container-disabled):hover {
+  background-color: var(--bh-radiobutton-filled-bg-hover);
+}
+
+.radiobutton-container-filled.radiobutton-container-checked {
+  background-color: var(--bh-radiobutton-filled-bg-checked);
+  border-color: var(--bh-radiobutton-filled-border-checked);
+}
+
+/* ================================
+   Label
+   ================================ */
+
+.radiobutton-label {
+  color: var(--bh-neutral-900);
+  font-size: var(--bh-font-size-md);
+  line-height: var(--bh-line-height-md);
+  cursor: pointer;
+  user-select: none;
+}
+
+/* ================================
+   Hidden Native Input
+   ================================ */
+
+.radiobutton-input {
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  pointer-events: none;
+  z-index: -1;
+}

package/src/bh-tokens/components/skeleton.scss

@@ -0,0 +1,50 @@
+/**
+ * Skeleton Loader Component Styles
+ * BEM naming convention: bh-skeleton
+ */
+
+@use './_skeleton.tokens.scss';
+
+/* --- BASE --- */
+.bh-skeleton {
+  position: relative;
+  overflow: hidden;
+  background-color: var(--bh-skeleton-bg);
+  border-radius: var(--bh-skeleton-border-radius);
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -150%;
+    width: 150%;
+    height: 100%;
+    background: linear-gradient(
+      90deg,
+      var(--bh-skeleton-shimmer-from) 0%,
+      var(--bh-skeleton-shimmer-via) 50%,
+      var(--bh-skeleton-shimmer-to) 100%
+    );
+    animation: shimmer var(--bh-skeleton-animation-duration)
+      var(--bh-skeleton-animation-timing) infinite;
+  }
+}
+
+/* --- SHAPE VARIANTS --- */
+.bh-skeleton-circle {
+  border-radius: var(--bh-skeleton-circle-border-radius);
+}
+
+.bh-skeleton-rectangle {
+  border-radius: var(--bh-skeleton-border-radius);
+}
+
+/* --- ANIMATION --- */
+@keyframes shimmer {
+  0% {
+    left: -150%;
+  }
+  100% {
+    left: 100%;
+  }
+}

package/src/bh-tokens/components/textarea.scss

@@ -0,0 +1,228 @@
+/* ==========================================================================
+   BH-TEXTAREA COMPONENT STYLES
+   Uses tokens from _textarea.tokens.scss
+   ========================================================================== */
+
+@use './_textarea.tokens.scss';
+
+:host {
+  display: inline-block;
+}
+
+/* ==========================================================================
+   TEXTAREA WRAPPER
+   ========================================================================== */
+
+.textarea-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bh-textarea-wrapper-gap);
+  width: 100%;
+}
+
+/* ==========================================================================
+   LABEL
+   ========================================================================== */
+
+.input-label {
+  display: flex;
+  align-items: center;
+  gap: var(--bh-textarea-label-gap);
+  font-family: var(--bh-textarea-font-family);
+  font-weight: var(--bh-textarea-label-font-weight);
+  font-size: var(--bh-textarea-label-font-size);
+  line-height: 1.43;
+  color: var(--bh-textarea-label-color);
+}
+
+.required-indicator {
+  color: var(--bh-textarea-label-required-color);
+}
+
+.help-icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--bh-textarea-help-icon-color);
+  transition: var(--bh-textarea-transition);
+}
+
+.help-icon-button:hover {
+  color: var(--bh-textarea-help-icon-color-hover);
+}
+
+/* ==========================================================================
+   TEXTAREA CONTAINER
+   ========================================================================== */
+
+.textarea-container {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--bh-textarea-container-gap);
+  padding: var(--bh-textarea-padding-md);
+  min-height: var(--bh-textarea-min-height-md);
+  width: 100%;
+  background: var(--bh-textarea-bg);
+  border: var(--bh-textarea-border-width) solid var(--bh-textarea-border);
+  border-radius: var(--bh-textarea-border-radius);
+  transition: var(--bh-textarea-transition);
+  cursor: text;
+  box-sizing: border-box;
+}
+
+/* ==========================================================================
+   TEXTAREA SIZES
+   ========================================================================== */
+
+.textarea-container.textarea-container-small {
+  padding: var(--bh-textarea-padding-sm);
+  min-height: var(--bh-textarea-min-height-sm);
+}
+
+.textarea-container.textarea-container-large {
+  padding: var(--bh-textarea-padding-lg);
+  min-height: var(--bh-textarea-min-height-lg);
+}
+
+/* ==========================================================================
+   TEXTAREA VARIANTS
+   ========================================================================== */
+
+.textarea-container.textarea-container-filled {
+  background: var(--bh-textarea-filled-bg);
+  border-color: var(--bh-textarea-filled-border);
+}
+
+.textarea-container.textarea-container-filled:not(.textarea-container-disabled):hover {
+  background: var(--bh-textarea-filled-bg-hover);
+}
+
+.textarea-container.textarea-container-filled.textarea-container-focused {
+  background: var(--bh-textarea-filled-bg-focused);
+  border-color: var(--bh-textarea-filled-border-focused);
+}
+
+/* ==========================================================================
+   TEXTAREA FLUID
+   ========================================================================== */
+
+.textarea-container.textarea-container-fluid {
+  width: 100%;
+}
+
+/* ==========================================================================
+   TEXTAREA STATES
+   ========================================================================== */
+
+.textarea-container.textarea-container-hover {
+  border-color: var(--bh-textarea-border-hover);
+}
+
+.textarea-container.textarea-container-focused {
+  border-color: var(--bh-textarea-border-focused);
+  box-shadow: var(--bh-textarea-focus-shadow);
+}
+
+.textarea-container.textarea-container-disabled {
+  opacity: var(--bh-textarea-opacity-disabled);
+  cursor: not-allowed;
+  background: var(--bh-textarea-bg-disabled);
+}
+
+.textarea-container.textarea-container-invalid {
+  border-color: var(--bh-textarea-border-invalid);
+}
+
+.textarea-container.textarea-container-invalid.textarea-container-hover {
+  border-color: var(--bh-textarea-border-invalid-hover);
+}
+
+.textarea-container.textarea-container-invalid.textarea-container-focused {
+  border-color: var(--bh-textarea-border-invalid-focused);
+}
+
+/* ==========================================================================
+   TEXTAREA ELEMENT
+   ========================================================================== */
+
+.textarea-element {
+  flex: 1;
+  width: 100%;
+  min-height: 60px;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: var(--bh-textarea-font-family);
+  font-weight: var(--bh-textarea-font-weight);
+  font-size: var(--bh-textarea-font-size);
+  line-height: var(--bh-textarea-line-height);
+  color: var(--bh-textarea-text-color);
+  padding: 0;
+  resize: vertical;
+  box-sizing: border-box;
+}
+
+.textarea-element:focus {
+  outline: none;
+  border: none;
+  box-shadow: none;
+}
+
+.textarea-element::placeholder {
+  color: var(--bh-textarea-placeholder-color);
+}
+
+.textarea-element:disabled {
+  cursor: not-allowed;
+  resize: none;
+}
+
+/* ==========================================================================
+   TEXTAREA AUTORESIZE
+   ========================================================================== */
+
+.textarea-container[data-autoresize='true'] .textarea-element {
+  resize: none;
+  overflow: hidden;
+}
+
+/* ==========================================================================
+   HINT TEXT
+   ========================================================================== */
+
+.hint-text {
+  font-family: var(--bh-textarea-font-family);
+  font-weight: var(--bh-textarea-font-weight);
+  font-size: var(--bh-textarea-hint-font-size);
+  line-height: 1.43;
+  color: var(--bh-textarea-hint-color);
+}
+
+.hint-text.hint-error {
+  color: var(--bh-textarea-hint-error-color);
+}
+
+/* ==========================================================================
+   MATERIAL SYMBOLS
+   ========================================================================== */
+
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 20px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+}