@actabldesign/bellhop-styles 0.0.3 → 0.0.12

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

@@ -0,0 +1,288 @@
+/* ==========================================================================
+   BH-AVATAR COMPONENT STYLES
+   Uses tokens from _avatar.tokens.scss
+   ========================================================================== */
+
+@use './_avatar.tokens.scss';
+
+:host {
+  display: inline-block;
+}
+
+/* ==========================================================================
+   BASE CONTAINER
+   ========================================================================== */
+
+.avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--bh-avatar-border-radius);
+  background-color: var(--bh-avatar-bg);
+  flex-shrink: 0;
+}
+
+/* ==========================================================================
+   SIZE VARIATIONS
+   ========================================================================== */
+
+.avatar-xxs {
+  width: var(--bh-avatar-size-xxs);
+  height: var(--bh-avatar-size-xxs);
+}
+
+.avatar-xs {
+  width: var(--bh-avatar-size-xs);
+  height: var(--bh-avatar-size-xs);
+}
+
+.avatar-sm {
+  width: var(--bh-avatar-size-sm);
+  height: var(--bh-avatar-size-sm);
+}
+
+.avatar-md {
+  width: var(--bh-avatar-size-md);
+  height: var(--bh-avatar-size-md);
+}
+
+.avatar-lg {
+  width: var(--bh-avatar-size-lg);
+  height: var(--bh-avatar-size-lg);
+}
+
+.avatar-xl {
+  width: var(--bh-avatar-size-xl);
+  height: var(--bh-avatar-size-xl);
+}
+
+.avatar-2xl {
+  width: var(--bh-avatar-size-2xl);
+  height: var(--bh-avatar-size-2xl);
+}
+
+/* ==========================================================================
+   AVATAR CONTENT ELEMENTS
+   ========================================================================== */
+
+/* Avatar Border */
+.avatar-border {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: var(--bh-avatar-border-radius);
+  pointer-events: none;
+}
+
+.avatar-xs .avatar-border,
+.avatar-sm .avatar-border {
+  border: var(--bh-avatar-border-width-small) solid
+    var(--bh-avatar-border-color);
+}
+
+.avatar-md .avatar-border,
+.avatar-lg .avatar-border,
+.avatar-xl .avatar-border,
+.avatar-2xl .avatar-border {
+  border: var(--bh-avatar-border-width-large) solid
+    var(--bh-avatar-border-color);
+}
+
+/* Avatar Content Container */
+.avatar-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--bh-avatar-border-radius);
+  overflow: hidden;
+  z-index: 0;
+}
+
+/* Avatar Image */
+.avatar-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: var(--bh-avatar-border-radius);
+  aspect-ratio: 1 / 1;
+}
+
+/* Avatar Placeholder Icon */
+.avatar-placeholder-icon {
+  color: var(--bh-avatar-icon-color);
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Avatar Text (for text-type avatars) */
+.avatar-text {
+  color: var(--bh-avatar-text-color);
+  font-family: var(--bh-font-family);
+  font-weight: var(--bh-avatar-text-font-weight);
+  text-align: center;
+  line-height: 1;
+}
+
+/* ==========================================================================
+   TEXT SIZE CLASSES
+   ========================================================================== */
+
+.text-xs {
+  font-size: var(--bh-avatar-text-size-xs);
+  line-height: 1.5em;
+}
+
+.text-sm {
+  font-size: var(--bh-avatar-text-size-sm);
+  line-height: 1.43em;
+}
+
+.text-md {
+  font-size: var(--bh-avatar-text-size-md);
+  line-height: 1.5em;
+}
+
+.text-lg {
+  font-size: var(--bh-avatar-text-size-lg);
+  line-height: 1.56em;
+}
+
+.text-xl {
+  font-size: var(--bh-avatar-text-size-xl);
+  line-height: 1.5em;
+}
+
+.text-2xl {
+  font-size: var(--bh-avatar-text-size-2xl);
+  line-height: 1.33em;
+}
+
+/* ==========================================================================
+   ICON SIZE CLASSES
+   ========================================================================== */
+.material-symbols-outlined {
+  .icon-sm {
+    font-size: var(--bh-avatar-icon-size-sm);
+    width: var(--bh-avatar-icon-size-sm);
+    height: var(--bh-avatar-icon-size-sm);
+  }
+
+  &.icon-md {
+    font-size: var(--bh-avatar-icon-size-md);
+    width: var(--bh-avatar-icon-size-md);
+    height: var(--bh-avatar-icon-size-md);
+  }
+
+  &.icon-lg {
+    font-size: var(--bh-avatar-icon-size-lg);
+    width: var(--bh-avatar-icon-size-lg);
+    height: var(--bh-avatar-icon-size-lg);
+  }
+
+  &.icon-xl {
+    font-size: var(--bh-avatar-icon-size-xl);
+    width: var(--bh-avatar-icon-size-xl);
+    height: var(--bh-avatar-icon-size-xl);
+  }
+
+  &.icon-2xl {
+    font-size: var(--bh-avatar-icon-size-2xl);
+    width: var(--bh-avatar-icon-size-2xl);
+    height: var(--bh-avatar-icon-size-2xl);
+  }
+
+  &.icon-3xl {
+    font-size: var(--bh-avatar-icon-size-3xl);
+    width: var(--bh-avatar-icon-size-3xl);
+    height: var(--bh-avatar-icon-size-3xl);
+  }
+
+  &.icon-4xl {
+    font-size: var(--bh-avatar-icon-size-4xl);
+    width: var(--bh-avatar-icon-size-4xl);
+    height: var(--bh-avatar-icon-size-4xl);
+  }
+}
+
+/* ==========================================================================
+   STATUS INDICATOR
+   ========================================================================== */
+
+.avatar-status {
+  position: absolute;
+  border-radius: var(--bh-avatar-border-radius);
+  background-color: var(--bh-avatar-status-online-bg);
+  border: var(--bh-avatar-status-border-width) solid
+    var(--bh-avatar-status-border-color);
+  z-index: 2;
+}
+
+.avatar-status-online {
+  background-color: var(--bh-avatar-status-online-bg);
+}
+
+.avatar-status-offline {
+  background-color: var(--bh-avatar-status-offline-bg);
+}
+
+/* Status Indicator Sizes */
+
+.avatar-status-xs {
+  width: var(--bh-avatar-status-size-sm);
+  height: var(--bh-avatar-status-size-sm);
+  bottom: 0;
+  right: 0;
+}
+
+.avatar-status-sm {
+  width: var(--bh-avatar-status-size-sm);
+  height: var(--bh-avatar-status-size-sm);
+  bottom: 0;
+  right: 0;
+}
+
+.avatar-status-md {
+  width: var(--bh-avatar-status-size-md);
+  height: var(--bh-avatar-status-size-md);
+  bottom: 0;
+  right: 0;
+}
+
+.avatar-status-lg {
+  width: var(--bh-avatar-status-size-lg);
+  height: var(--bh-avatar-status-size-lg);
+  bottom: 0;
+  right: 0;
+}
+
+.avatar-status-xl {
+  width: var(--bh-avatar-status-size-xl);
+  height: var(--bh-avatar-status-size-xl);
+  bottom: 0;
+  right: 0;
+}
+
+.avatar-status-2xl {
+  width: var(--bh-avatar-status-size-2xl);
+  height: var(--bh-avatar-status-size-2xl);
+  bottom: 0;
+  right: 0;
+}
+
+/* ==========================================================================
+   MATERIAL SYMBOLS BASE STYLES
+   ========================================================================== */
+
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+  user-select: none;
+}

package/src/bh-tokens/components/badge-dot.scss

@@ -0,0 +1,177 @@
+/* ==========================================================================
+   BH-BADGE-DOT COMPONENT STYLES
+   Uses tokens from _badge-dot.tokens.scss
+   ========================================================================== */
+
+@use './_badge-dot.tokens.scss';
+
+:host {
+  display: inline-block;
+}
+
+/* ==========================================================================
+   BASE BADGE DOT
+   ========================================================================== */
+
+.badge-dot {
+  border-radius: var(--bh-badge-dot-border-radius);
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+}
+
+/* ==========================================================================
+   SIZES
+   ========================================================================== */
+
+.badge-dot-sm {
+  width: var(--bh-badge-dot-size-sm);
+  height: var(--bh-badge-dot-size-sm);
+}
+
+.badge-dot-md {
+  width: var(--bh-badge-dot-size-md);
+  height: var(--bh-badge-dot-size-md);
+}
+
+.badge-dot-lg {
+  width: var(--bh-badge-dot-size-lg);
+  height: var(--bh-badge-dot-size-lg);
+}
+
+/* ==========================================================================
+   COLORS
+   ========================================================================== */
+
+.badge-dot-success {
+  background-color: var(--bh-badge-dot-bg-success);
+}
+
+.badge-dot-blue {
+  background-color: var(--bh-badge-dot-bg-blue);
+}
+
+.badge-dot-error {
+  background-color: var(--bh-badge-dot-bg-error);
+}
+
+.badge-dot-warning {
+  background-color: var(--bh-badge-dot-bg-warning);
+}
+
+/* ==========================================================================
+   OUTLINE VARIANTS
+   ========================================================================== */
+
+.badge-dot-outline.badge-dot-sm {
+  outline: var(--bh-badge-dot-outline-width-sm) solid;
+  outline-offset: 0;
+}
+
+.badge-dot-outline.badge-dot-md {
+  outline: var(--bh-badge-dot-outline-width-md) solid;
+  outline-offset: 0;
+}
+
+.badge-dot-outline.badge-dot-lg {
+  outline: var(--bh-badge-dot-outline-width-lg) solid;
+  outline-offset: 0;
+}
+
+/* Outline colors */
+.badge-dot-outline.badge-dot-success {
+  outline-color: var(--bh-badge-dot-outline-success);
+}
+
+.badge-dot-outline.badge-dot-blue {
+  outline-color: var(--bh-badge-dot-outline-blue);
+}
+
+.badge-dot-outline.badge-dot-error {
+  outline-color: var(--bh-badge-dot-outline-error);
+}
+
+.badge-dot-outline.badge-dot-warning {
+  outline-color: var(--bh-badge-dot-outline-warning);
+}
+
+/* ==========================================================================
+   ANIMATION
+   ========================================================================== */
+
+@keyframes badge-dot-pulse {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.8);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* Animated badge dots use ::after pseudo-element for pulse effect */
+.badge-dot-animated {
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: var(--bh-badge-dot-border-radius);
+    pointer-events: none;
+    animation: badge-dot-pulse 2s ease-in-out infinite;
+  }
+}
+
+/* Size-specific pseudo-element sizing */
+.badge-dot-animated.badge-dot-sm::after {
+  width: calc(
+    var(--bh-badge-dot-size-sm) + var(--bh-badge-dot-outline-width-sm) * 2
+  );
+  height: calc(
+    var(--bh-badge-dot-size-sm) + var(--bh-badge-dot-outline-width-sm) * 2
+  );
+  border: var(--bh-badge-dot-outline-width-sm) solid;
+}
+
+.badge-dot-animated.badge-dot-md::after {
+  width: calc(
+    var(--bh-badge-dot-size-md) + var(--bh-badge-dot-outline-width-md) * 2
+  );
+  height: calc(
+    var(--bh-badge-dot-size-md) + var(--bh-badge-dot-outline-width-md) * 2
+  );
+  border: var(--bh-badge-dot-outline-width-md) solid;
+}
+
+.badge-dot-animated.badge-dot-lg::after {
+  width: calc(
+    var(--bh-badge-dot-size-lg) + var(--bh-badge-dot-outline-width-lg) * 2
+  );
+  height: calc(
+    var(--bh-badge-dot-size-lg) + var(--bh-badge-dot-outline-width-lg) * 2
+  );
+  border: var(--bh-badge-dot-outline-width-lg) solid;
+}
+
+/* Color-specific pseudo-element colors */
+.badge-dot-animated.badge-dot-success::after {
+  border-color: var(--bh-badge-dot-outline-success);
+}
+
+.badge-dot-animated.badge-dot-blue::after {
+  border-color: var(--bh-badge-dot-outline-blue);
+}
+
+.badge-dot-animated.badge-dot-error::after {
+  border-color: var(--bh-badge-dot-outline-error);
+}
+
+.badge-dot-animated.badge-dot-warning::after {
+  border-color: var(--bh-badge-dot-outline-warning);
+}