@actabldesign/bellhop-styles 0.0.3 → 0.0.12

package/components/avatar.css

@@ -1,253 +0,0 @@
-/* ==========================================================================
-   AVATAR COMPONENT
-   Shared styles for all frameworks
-   ========================================================================== */
-
-/* Base Avatar */
-.avatar {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  background-color: var(--color-neutral-100);
-  flex-shrink: 0;
-}
-
-/* Avatar Sizes */
-.avatar-xxs {
-  width: 16px;
-  height: 16px;
-}
-
-.avatar-xs {
-  width: 24px;
-  height: 24px;
-}
-
-.avatar-sm {
-  width: 32px;
-  height: 32px;
-}
-
-.avatar-md {
-  width: 40px;
-  height: 40px;
-}
-
-.avatar-lg {
-  width: 48px;
-  height: 48px;
-}
-
-.avatar-xl {
-  width: 56px;
-  height: 56px;
-}
-
-.avatar-2xl {
-  width: 64px;
-  height: 64px;
-}
-
-/* ==========================================================================
-   AVATAR CONTENT ELEMENTS
-   ========================================================================== */
-
-/* Avatar Border */
-.avatar-border {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: 50%;
-  pointer-events: none;
-  z-index: 1;
-}
-
-.avatar-xs .avatar-border,
-.avatar-sm .avatar-border {
-  border: 0.5px solid rgba(0, 0, 0, 0.08);
-}
-
-.avatar-md .avatar-border,
-.avatar-lg .avatar-border,
-.avatar-xl .avatar-border,
-.avatar-2xl .avatar-border {
-  border: 0.75px solid rgba(0, 0, 0, 0.08);
-}
-
-/* Avatar Content Container */
-.avatar-content {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  overflow: hidden;
-  z-index: 0;
-}
-
-/* Avatar Image */
-.avatar-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 50%;
-}
-
-/* Avatar Placeholder Icon */
-.avatar-placeholder-icon {
-  color: var(--color-neutral-500);
-  line-height: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Avatar Text */
-.avatar-text {
-  color: var(--color-neutral-500);
-  font-family: var(--font-inter);
-  font-weight: var(--weight-semibold);
-  text-align: center;
-  line-height: 1;
-}
-
-/* Text Size Classes */
-.text-xxs {
-  font-size: 10px;
-  line-height: 1.6em;
-}
-
-.text-xs {
-  font-size: 12px;
-  line-height: 1.5em;
-}
-
-.text-sm {
-  font-size: 14px;
-  line-height: 1.43em;
-}
-
-.text-md {
-  font-size: 16px;
-  line-height: 1.5em;
-}
-
-.text-lg {
-  font-size: 18px;
-  line-height: 1.56em;
-}
-
-.text-xl {
-  font-size: 20px;
-  line-height: 1.5em;
-}
-
-.text-2xl {
-  font-size: 24px;
-  line-height: 1.33em;
-}
-
-/* Icon Size Classes */
-.icon-sm {
-  font-size: 16px;
-}
-
-.icon-md {
-  font-size: 20px;
-}
-
-.icon-lg {
-  font-size: 24px;
-}
-
-.icon-xl {
-  font-size: 28px;
-}
-
-.icon-2xl {
-  font-size: 32px;
-}
-
-.icon-3xl {
-  font-size: 36px;
-}
-
-.icon-4xl {
-  font-size: 40px;
-}
-
-/* ==========================================================================
-   STATUS INDICATOR
-   ========================================================================== */
-
-.avatar-status {
-  position: absolute;
-  border-radius: 50%;
-  background-color: var(--color-success-500);
-  border: 1.5px solid var(--color-white);
-  z-index: 2;
-}
-
-.avatar-status-online {
-  background-color: var(--color-success-500);
-}
-
-.avatar-status-offline {
-  background-color: var(--color-neutral-400);
-}
-
-/* Status Indicator Sizes */
-.avatar-status-xxs {
-  width: 4px;
-  height: 4px;
-  bottom: 0;
-  right: 0;
-}
-
-.avatar-status-xs {
-  width: 6px;
-  height: 6px;
-  bottom: 0;
-  right: 0;
-}
-
-.avatar-status-sm {
-  width: 8px;
-  height: 8px;
-  bottom: 0;
-  right: 0;
-}
-
-.avatar-status-md {
-  width: 10px;
-  height: 10px;
-  bottom: 0;
-  right: 0;
-}
-
-.avatar-status-lg {
-  width: 12px;
-  height: 12px;
-  bottom: 0;
-  right: 0;
-}
-
-.avatar-status-xl {
-  width: 14px;
-  height: 14px;
-  bottom: 0;
-  right: 0;
-}
-
-.avatar-status-2xl {
-  width: 16px;
-  height: 16px;
-  bottom: 0;
-  right: 0;
-}

package/components/badge-dot.css

@@ -1,78 +0,0 @@
-/* ==========================================================================
-   BADGE DOT COMPONENT
-   Shared styles for all frameworks
-   ========================================================================== */
-
-/* Base Badge Dot */
-.badge-dot {
-  border-radius: 9999px;
-  position: relative;
-  display: inline-block;
-  box-sizing: border-box;
-}
-
-/* Sizes - Based on Figma specifications */
-.badge-dot-sm {
-  width: 6px;
-  height: 6px;
-}
-
-.badge-dot-md {
-  width: 8px;
-  height: 8px;
-}
-
-.badge-dot-lg {
-  width: 10px;
-  height: 10px;
-}
-
-/* Colors - All versions use the same background */
-.badge-dot-success {
-  background-color: var(--color-success-500); /* #17B26A */
-}
-
-.badge-dot-blue {
-  background-color: var(--color-blue-500); /* #5068DD */
-}
-
-.badge-dot-error {
-  background-color: var(--color-error-500); /* #F05250 */
-}
-
-.badge-dot-warning {
-  background-color: var(--color-warning-500); /* #F79009 */
-}
-
-/* Outline versions - using CSS outline property */
-.badge-dot-outline.badge-dot-sm {
-  outline: 3px solid;
-  outline-offset: 0;
-}
-
-.badge-dot-outline.badge-dot-md {
-  outline: 4px solid;
-  outline-offset: 0;
-}
-
-.badge-dot-outline.badge-dot-lg {
-  outline: 5px solid;
-  outline-offset: 0;
-}
-
-/* Outline colors */
-.badge-dot-outline.badge-dot-success {
-  outline-color: var(--color-success-100); /* #D1FADF - closest to Figma #DCFAE6 */
-}
-
-.badge-dot-outline.badge-dot-blue {
-  outline-color: var(--color-blue-200); /* #E1EAFE - matches Figma exactly */
-}
-
-.badge-dot-outline.badge-dot-error {
-  outline-color: var(--color-error-200); /* #FEE4E2 - closest to Figma #FCE3E3 */
-}
-
-.badge-dot-outline.badge-dot-warning {
-  outline-color: var(--color-warning-200); /* #FEF0C7 - matches Figma exactly */
-}

package/components/badge.css

@@ -1,337 +0,0 @@
-/* Base Badge Styles */
-.badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-sm);
-  font-family: var(--font-inter);
-  font-weight: var(--weight-medium);
-  border-radius: var(--radius-full);
-  white-space: nowrap;
-  text-align: center;
-  transition: all 0.2s ease;
-  border: 1px solid transparent;
-  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  cursor: default;
-}
-
-/* Size Variants */
-.badge-sm {
-  padding: var(--spacing-xxs) var(--spacing-md);
-  font-size: var(--text-sm-size);
-  line-height: var(--text-xs-line);
-}
-
-.badge-md {
-  padding: var(--spacing-xs) var(--spacing-lg);
-  font-size: var(--text-md-size);
-  line-height: var(--text-smd-line);
-}
-
-.badge-lg {
-  padding: var(--spacing-sm) var(--spacing-xl);
-  font-size: var(--text-md-size);
-  line-height: var(--text-md-line);
-}
-
-/* Badge Icon */
-.badge-icon-dot {
-  font-size: var(--icon-size-xs) !important;
-  width: var(--icon-size-xs);
-  height: var(--icon-size-xs);
-  line-height: 1;
-  flex-shrink: 0;
-  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 16;
-}
-
-.badge-sm .badge-icon-dot {
-  font-size: var(--icon-size-2xs) !important;
-  width: var(--icon-size-2xs);
-  height: var(--icon-size-2xs);
-}
-
-.badge-lg .badge-icon-dot {
-  font-size: var(--icon-size-sm) !important;
-  width: var(--icon-size-sm);
-  height: var(--icon-size-sm);
-}
-
-/* Custom icon styling */
-.badge-icon-custom {
-  font-size: var(--icon-size-md) !important;
-  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 16;
-}
-
-.badge-sm .badge-icon-custom {
-  font-size: var(--icon-size-xs) !important;
-}
-
-.badge-lg .badge-icon-custom {
-  font-size: var(--icon-size-lg) !important;
-}
-
-/* Icon Colors - Dynamic based on emphasis level */
-.badge-high .badge-icon-gray-high, .badge-high .badge-dismiss-icon.badge-icon-gray-high { color: var(--color-neutral-800) !important; }
-.badge-high .badge-icon-blue-high, .badge-high .badge-dismiss-icon.badge-icon-blue-high { color: var(--color-blue-800) !important; }
-.badge-high .badge-icon-red-high, .badge-high .badge-dismiss-icon.badge-icon-red-high { color: var(--color-error-800) !important; }
-.badge-high .badge-icon-yellow-high, .badge-high .badge-dismiss-icon.badge-icon-yellow-high { color: var(--color-yellow-800) !important; }
-.badge-high .badge-icon-green-high, .badge-high .badge-dismiss-icon.badge-icon-green-high { color: var(--color-success-800) !important; }
-.badge-high .badge-icon-purple-high, .badge-high .badge-dismiss-icon.badge-icon-purple-high { color: var(--color-purple-800) !important; }
-.badge-high .badge-icon-pink-high, .badge-high .badge-dismiss-icon.badge-icon-pink-high { color: var(--color-pink-800) !important; }
-.badge-high .badge-icon-orange-high, .badge-high .badge-dismiss-icon.badge-icon-orange-high { color: var(--color-orange-800) !important; }
-
-.badge-medium .badge-icon-gray-medium, .badge-medium .badge-dismiss-icon.badge-icon-gray-medium { color: var(--color-neutral-700) !important; }
-.badge-medium .badge-icon-blue-medium, .badge-medium .badge-dismiss-icon.badge-icon-blue-medium { color: var(--color-blue-700) !important; }
-.badge-medium .badge-icon-red-medium, .badge-medium .badge-dismiss-icon.badge-icon-red-medium { color: var(--color-error-700) !important; }
-.badge-medium .badge-icon-yellow-medium, .badge-medium .badge-dismiss-icon.badge-icon-yellow-medium { color: var(--color-yellow-700) !important; }
-.badge-medium .badge-icon-green-medium, .badge-medium .badge-dismiss-icon.badge-icon-green-medium { color: var(--color-success-700) !important; }
-.badge-medium .badge-icon-purple-medium, .badge-medium .badge-dismiss-icon.badge-icon-purple-medium { color: var(--color-purple-700) !important; }
-.badge-medium .badge-icon-pink-medium, .badge-medium .badge-dismiss-icon.badge-icon-pink-medium { color: var(--color-pink-700) !important; }
-.badge-medium .badge-icon-orange-medium, .badge-medium .badge-dismiss-icon.badge-icon-orange-medium { color: var(--color-orange-700) !important; }
-
-.badge-low .badge-icon-gray-low, .badge-low .badge-dismiss-icon.badge-icon-gray-low { color: var(--color-neutral-600) !important; }
-.badge-low .badge-icon-blue-low, .badge-low .badge-dismiss-icon.badge-icon-blue-low { color: var(--color-blue-600) !important; }
-.badge-low .badge-icon-red-low, .badge-low .badge-dismiss-icon.badge-icon-red-low { color: var(--color-error-600) !important; }
-.badge-low .badge-icon-yellow-low, .badge-low .badge-dismiss-icon.badge-icon-yellow-low { color: var(--color-yellow-600) !important; }
-.badge-low .badge-icon-green-low, .badge-low .badge-dismiss-icon.badge-icon-green-low { color: var(--color-success-600) !important; }
-.badge-low .badge-icon-purple-low, .badge-low .badge-dismiss-icon.badge-icon-purple-low { color: var(--color-purple-600) !important; }
-.badge-low .badge-icon-pink-low, .badge-low .badge-dismiss-icon.badge-icon-pink-low { color: var(--color-pink-600) !important; }
-.badge-low .badge-icon-orange-low, .badge-low .badge-dismiss-icon.badge-icon-orange-low { color: var(--color-orange-600) !important; }
-
-/* Badge Label */
-.badge-label {
-  flex-shrink: 0;
-  font-weight: inherit;
-}
-
-/* Dismiss Button */
-.badge-dismiss {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  margin-left: var(--spacing-xxs);
-  border-radius: var(--radius-full);
-  transition: all 0.2s ease;
-  width: 16px;
-  height: 16px;
-}
-
-.badge-dismiss-icon {
-  font-size: var(--icon-size-sm) !important;
-  width: var(--icon-size-sm);
-  height: var(--icon-size-sm);
-  line-height: 1;
-  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 14;
-}
-
-.badge-sm .badge-dismiss {
-  width: 14px;
-  height: 14px;
-}
-
-.badge-sm .badge-dismiss-icon {
-  font-size: var(--icon-size-xs) !important;
-  width: var(--icon-size-xs);
-  height: var(--icon-size-xs);
-}
-
-.badge-lg .badge-dismiss {
-  width: 18px;
-  height: 18px;
-}
-
-.badge-lg .badge-dismiss-icon {
-  font-size: var(--icon-size-md) !important;
-  width: var(--icon-size-md);
-  height: var(--icon-size-md);
-}
-
-
-.badge-dismiss:hover {
-  background-color: rgba(255, 255, 255, 0.2);
-}
-
-.badge-dismiss:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-/* High Emphasis Variants */
-.badge-high.badge-gray {
-  background-color: var(--color-neutral-200);
-  color: var(--color-neutral-800);
-}
-
-.badge-high.badge-blue {
-  background-color: var(--color-blue-200);
-  color: var(--color-blue-800);
-}
-
-.badge-high.badge-red {
-  background-color: var(--color-error-200);
-  color: var(--color-error-800);
-}
-
-.badge-high.badge-yellow {
-  background-color: var(--color-yellow-200);
-  color: var(--color-yellow-800);
-}
-
-.badge-high.badge-green {
-  background-color: var(--color-success-200);
-  color: var(--color-success-800);
-}
-
-.badge-high.badge-purple {
-  background-color: var(--color-purple-200);
-  color: var(--color-purple-800);
-}
-
-.badge-high.badge-pink {
-  background-color: var(--color-pink-200);
-  color: var(--color-pink-800);
-}
-
-.badge-high.badge-orange {
-  background-color: var(--color-orange-200);
-  color: var(--color-orange-800);
-}
-
-/* Medium Emphasis Variants */
-.badge-medium.badge-gray {
-  background-color: var(--color-neutral-50);
-  color: var(--color-neutral-700);
-  border-color: var(--color-neutral-200);
-}
-
-.badge-medium.badge-blue {
-  background-color: var(--color-blue-50);
-  color: var(--color-blue-700);
-  border-color: var(--color-blue-200);
-}
-
-.badge-medium.badge-red {
-  background-color: var(--color-error-50);
-  color: var(--color-error-700);
-  border-color: var(--color-error-200);
-}
-
-.badge-medium.badge-yellow {
-  background-color: var(--color-yellow-50);
-  color: var(--color-yellow-700);
-  border-color: var(--color-yellow-200);
-}
-
-.badge-medium.badge-green {
-  background-color: var(--color-success-50);
-  color: var(--color-success-700);
-  border-color: var(--color-success-200);
-}
-
-.badge-medium.badge-purple {
-  background-color: var(--color-purple-50);
-  color: var(--color-purple-700);
-  border-color: var(--color-purple-200);
-}
-
-.badge-medium.badge-pink {
-  background-color: var(--color-pink-50);
-  color: var(--color-pink-700);
-  border-color: var(--color-pink-200);
-}
-
-.badge-medium.badge-orange {
-  background-color: var(--color-orange-50);
-  color: var(--color-orange-700);
-  border-color: var(--color-orange-200);
-}
-
-/* Low Emphasis Variants */
-.badge-low.badge-gray {
-  background-color: transparent;
-  color: var(--color-neutral-600);
-  border-color: var(--color-neutral-600);
-}
-
-.badge-low.badge-blue {
-  background-color: transparent;
-  color: var(--color-blue-600);
-  border-color: var(--color-blue-600);
-}
-
-.badge-low.badge-red {
-  background-color: transparent;
-  color: var(--color-error-600);
-  border-color: var(--color-error-600);
-}
-
-.badge-low.badge-yellow {
-  background-color: transparent;
-  color: var(--color-yellow-600);
-  border-color: var(--color-yellow-600);
-}
-
-.badge-low.badge-green {
-  background-color: transparent;
-  color: var(--color-success-600);
-  border-color: var(--color-success-600);
-}
-
-.badge-low.badge-purple {
-  background-color: transparent;
-  color: var(--color-purple-600);
-  border-color: var(--color-purple-600);
-}
-
-.badge-low.badge-pink {
-  background-color: transparent;
-  color: var(--color-pink-600);
-  border-color: var(--color-pink-600);
-}
-
-.badge-low.badge-orange {
-  background-color: transparent;
-  color: var(--color-orange-600);
-  border-color: var(--color-orange-600);
-}
-
-/* Disabled State */
-.badge-disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* Hover Effects for Dismissible Badges */
-.badge:has(.badge-dismiss):hover.badge-high.badge-gray { background-color: var(--color-neutral-300); }
-.badge:has(.badge-dismiss):hover.badge-high.badge-blue { background-color: var(--color-blue-400); }
-.badge:has(.badge-dismiss):hover.badge-high.badge-red { background-color: var(--color-error-400); }
-.badge:has(.badge-dismiss):hover.badge-high.badge-yellow { background-color: var(--color-yellow-400); }
-.badge:has(.badge-dismiss):hover.badge-high.badge-green { background-color: var(--color-success-400); }
-.badge:has(.badge-dismiss):hover.badge-high.badge-purple { background-color: var(--color-purple-400); }
-.badge:has(.badge-dismiss):hover.badge-high.badge-pink { background-color: var(--color-pink-400); }
-.badge:has(.badge-dismiss):hover.badge-high.badge-orange { background-color: var(--color-orange-400); }
-
-.badge:has(.badge-dismiss):hover.badge-medium.badge-gray { background-color: var(--color-neutral-200); }
-.badge:has(.badge-dismiss):hover.badge-medium.badge-blue { background-color: var(--color-blue-100); }
-.badge:has(.badge-dismiss):hover.badge-medium.badge-red { background-color: var(--color-error-100); }
-.badge:has(.badge-dismiss):hover.badge-medium.badge-yellow { background-color: var(--color-yellow-100); }
-.badge:has(.badge-dismiss):hover.badge-medium.badge-green { background-color: var(--color-success-100); }
-.badge:has(.badge-dismiss):hover.badge-medium.badge-purple { background-color: var(--color-purple-100); }
-.badge:has(.badge-dismiss):hover.badge-medium.badge-pink { background-color: var(--color-pink-100); }
-.badge:has(.badge-dismiss):hover.badge-medium.badge-orange { background-color: var(--color-orange-100); }
-
-.badge:has(.badge-dismiss):hover.badge-low.badge-gray { background-color: var(--color-neutral-50); }
-.badge:has(.badge-dismiss):hover.badge-low.badge-blue { background-color: var(--color-blue-50); }
-.badge:has(.badge-dismiss):hover.badge-low.badge-red { background-color: var(--color-error-50); }
-.badge:has(.badge-dismiss):hover.badge-low.badge-yellow { background-color: var(--color-yellow-50); }
-.badge:has(.badge-dismiss):hover.badge-low.badge-green { background-color: var(--color-success-50); }
-.badge:has(.badge-dismiss):hover.badge-low.badge-purple { background-color: var(--color-purple-50); }
-.badge:has(.badge-dismiss):hover.badge-low.badge-pink { background-color: var(--color-pink-50); }
-.badge:has(.badge-dismiss):hover.badge-low.badge-orange { background-color: var(--color-orange-50); }