@actabldesign/bellhop-styles 0.0.3 → 0.0.12

package/src/tokens/bellhop-animations.css

@@ -0,0 +1,392 @@
+/* Bellhop Animation System */
+
+/* Animation Variables */
+:root {
+  /* Timing */
+  --animation-duration-fast: 150ms;
+  --animation-duration-normal: 200ms;
+  --animation-duration-slow: 300ms;
+
+  /* Easing Functions */
+  --animation-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
+  --animation-ease-exit: cubic-bezier(0.4, 0, 1, 1);
+  --animation-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --animation-ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+
+  /* Transform Values */
+  --animation-slide-distance: 8px;
+  --animation-scale-start: 0.96;
+  --animation-scale-end: 1;
+}
+
+/* Dropdown Animations */
+.animate-dropdown-enter {
+  animation: dropdownEnter var(--animation-duration-normal)
+    var(--animation-ease-enter) forwards;
+}
+
+.animate-dropdown-exit {
+  animation: dropdownExit var(--animation-duration-fast)
+    var(--animation-ease-exit) forwards;
+}
+
+@keyframes dropdownEnter {
+  0% {
+    opacity: 0;
+    transform: scale(var(--animation-scale-start));
+  }
+  100% {
+    opacity: 1;
+    transform: scale(var(--animation-scale-end));
+  }
+}
+
+@keyframes dropdownExit {
+  0% {
+    opacity: 1;
+    transform: translateY(0) scale(var(--animation-scale-end));
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--animation-slide-distance)))
+      scale(var(--animation-scale-start));
+  }
+}
+
+/* Modal Animations */
+.animate-modal-enter {
+  animation: modalEnter var(--animation-duration-normal)
+    var(--animation-ease-enter) forwards;
+}
+
+.animate-modal-exit {
+  animation: modalExit var(--animation-duration-fast) var(--animation-ease-exit)
+    forwards;
+}
+
+@keyframes modalEnter {
+  0% {
+    opacity: 0;
+    transform: translateY(16px) scale(var(--animation-scale-start));
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(var(--animation-scale-end));
+  }
+}
+
+@keyframes modalExit {
+  0% {
+    opacity: 1;
+    transform: translateY(0) scale(var(--animation-scale-end));
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(16px) scale(var(--animation-scale-start));
+  }
+}
+
+/* Chevron Icon Animations */
+.chevron-icon-rotate {
+  transition: transform var(--animation-duration-fast)
+    var(--animation-ease-smooth);
+}
+
+.chevron-icon-rotate.expanded {
+  transform: rotate(180deg);
+}
+
+/* Alternative with direct elements */
+.chevron-expand {
+  display: inline-flex;
+  transition: transform var(--animation-duration-fast)
+    var(--animation-ease-smooth);
+}
+
+.chevron-expand.open {
+  transform: rotate(180deg);
+}
+
+/* Toast Animations */
+.animate-toast-enter {
+  animation: toastEnter var(--animation-duration-normal)
+    var(--animation-ease-enter) forwards;
+}
+
+.animate-toast-exit {
+  animation: toastExit var(--animation-duration-fast) var(--animation-ease-exit)
+    forwards;
+}
+
+@keyframes toastEnter {
+  0% {
+    opacity: 0;
+    transform: translateX(100%) scale(var(--animation-scale-start));
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0) scale(var(--animation-scale-end));
+  }
+}
+
+@keyframes toastExit {
+  0% {
+    opacity: 1;
+    transform: translateX(0) scale(var(--animation-scale-end));
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(100%) scale(var(--animation-scale-start));
+  }
+}
+
+/* Fade Animations */
+.animate-fade-enter {
+  animation: fadeEnter var(--animation-duration-normal)
+    var(--animation-ease-enter) forwards;
+}
+
+.animate-fade-exit {
+  animation: fadeExit var(--animation-duration-fast) var(--animation-ease-exit)
+    forwards;
+}
+
+@keyframes fadeEnter {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeExit {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+/* Scale Animations */
+.animate-scale-enter {
+  animation: scaleEnter var(--animation-duration-normal)
+    var(--animation-ease-enter) forwards;
+}
+
+.animate-scale-exit {
+  animation: scaleExit var(--animation-duration-fast) var(--animation-ease-exit)
+    forwards;
+}
+
+@keyframes scaleEnter {
+  0% {
+    opacity: 0;
+    transform: scale(var(--animation-scale-start));
+  }
+  100% {
+    opacity: 1;
+    transform: scale(var(--animation-scale-end));
+  }
+}
+
+@keyframes scaleExit {
+  0% {
+    opacity: 1;
+    transform: scale(var(--animation-scale-end));
+  }
+  100% {
+    opacity: 0;
+    transform: scale(var(--animation-scale-start));
+  }
+}
+
+/* Slide Animations */
+.animate-slide-up-enter {
+  animation: slideUpEnter var(--animation-duration-normal)
+    var(--animation-ease-enter) forwards;
+}
+
+.animate-slide-up-exit {
+  animation: slideUpExit var(--animation-duration-fast)
+    var(--animation-ease-exit) forwards;
+}
+
+.animate-slide-down-enter {
+  animation: slideDownEnter var(--animation-duration-normal)
+    var(--animation-ease-enter) forwards;
+}
+
+.animate-slide-down-exit {
+  animation: slideDownExit var(--animation-duration-fast)
+    var(--animation-ease-exit) forwards;
+}
+
+@keyframes slideUpEnter {
+  0% {
+    opacity: 0;
+    transform: translateY(var(--animation-slide-distance));
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideUpExit {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(var(--animation-slide-distance));
+  }
+}
+
+@keyframes slideDownEnter {
+  0% {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--animation-slide-distance)));
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideDownExit {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--animation-slide-distance)));
+  }
+}
+
+/* Base Animation Classes */
+.animate-base {
+  transform-origin: top center;
+  transition: all var(--animation-duration-normal) var(--animation-ease-smooth);
+}
+
+.animate-base-modal {
+  transform-origin: center center;
+  transition: all var(--animation-duration-normal) var(--animation-ease-smooth);
+}
+
+.animate-base-toast {
+  transform-origin: right center;
+  transition: all var(--animation-duration-normal) var(--animation-ease-smooth);
+}
+
+/* Dismiss Animations */
+.animate-dismiss {
+  animation: dismiss var(--animation-duration-normal) var(--animation-ease-exit)
+    forwards;
+}
+
+@keyframes dismiss {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  60% {
+    opacity: 0.3;
+    transform: scale(0.94);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.88);
+  }
+}
+
+/* Chart Animations */
+.animate-chart-segment-enter {
+  animation: chartSegmentEnter 600ms var(--animation-ease-enter) forwards;
+}
+
+.animate-chart-segment-hover {
+  transition: all var(--animation-duration-fast) var(--animation-ease-smooth);
+}
+
+.animate-chart-segment-hover:hover {
+  opacity: 0.85;
+  transform: scale(1.02);
+  filter: brightness(1.1);
+}
+
+@keyframes chartSegmentEnter {
+  0% {
+    opacity: 0;
+    transform: scale(0.2) rotate(-45deg);
+  }
+  25% {
+    opacity: 0.3;
+    transform: scale(0.5) rotate(-22deg);
+  }
+  50% {
+    opacity: 0.6;
+    transform: scale(0.8) rotate(-8deg);
+  }
+  75% {
+    opacity: 0.9;
+    transform: scale(1.05) rotate(2deg);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+  }
+}
+
+/* Pie Chart Segment Animation */
+.animate-pie-segment-enter {
+  animation: pieSegmentEnter 700ms var(--animation-ease-enter) forwards;
+}
+
+@keyframes pieSegmentEnter {
+  0% {
+    opacity: 0;
+    transform: scale(0.3) rotate(-90deg);
+  }
+  15% {
+    opacity: 0.2;
+    transform: scale(0.4) rotate(-60deg);
+  }
+  30% {
+    opacity: 0.5;
+    transform: scale(0.6) rotate(-30deg);
+  }
+  60% {
+    opacity: 0.8;
+    transform: scale(0.95) rotate(-5deg);
+  }
+  80% {
+    opacity: 0.95;
+    transform: scale(1.02) rotate(2deg);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+  }
+}
+
+/* Utility Classes */
+.animate-duration-fast {
+  animation-duration: var(--animation-duration-fast) !important;
+}
+
+.animate-duration-normal {
+  animation-duration: var(--animation-duration-normal) !important;
+}
+
+.animate-duration-slow {
+  animation-duration: var(--animation-duration-slow) !important;
+}
+
+.animate-ease-bounce {
+  animation-timing-function: var(--animation-ease-bounce) !important;
+}

package/src/tokens/bellhop-global.css

@@ -0,0 +1,175 @@
+/* ==========================================================================
+   BELLHOP GLOBAL STYLES
+   ========================================================================== */
+
+/* Import all Bellhop design system styles */
+@import url('./bellhop-primary-colors.css');
+@import url('./bellhop-secondary-colors.css');
+@import url('./bellhop-spacing.css');
+@import url('./bellhop-radius.css');
+@import url('./bellhop-shadows.css');
+@import url('./bellhop-typography.css');
+@import url('./bellhop-icons.css');
+
+/* ==========================================================================
+   FOCUS MANAGEMENT
+   ========================================================================== */
+
+/* 1. Reset the outline for all focusable elements when a mouse is used. */
+*:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* 2. Apply a custom outline that will only appear during keyboard navigation. */
+*:focus-visible {
+  outline: 2px solid var(--color-brand-500); /* Using bellhop brand color */
+  outline-offset: 2px;
+}
+
+/* ==========================================================================
+   ACCESSIBILITY IMPROVEMENTS
+   ========================================================================== */
+
+/* Ensure focus is visible on interactive elements */
+button:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible,
+a:focus-visible,
+[tabindex]:focus-visible {
+  outline: 2px solid var(--color-brand-500);
+  outline-offset: 2px;
+}
+
+/* ==========================================================================
+   UTILITY CLASSES
+   ========================================================================== */
+
+/* Prevent text selection */
+.no-select {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+/* Screen reader only content */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ==========================================================================
+   CONTENT LAYOUT UTILITIES
+   ========================================================================== */
+
+/* Content Container - Main flex container for page navigation and content area */
+.bellhop-content-container {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  background-color: var(--color-white);
+}
+
+/* Content Area - Scrollable main content region */
+.bellhop-content-area {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background-color: var(--color-white);
+}
+
+/* Content Wrapper - Inner content container with padding and max-width */
+.bellhop-content-wrapper {
+  padding: var(--spacing-4xl);
+  /*max-width: 1200px;*/
+  margin: 0 auto;
+  font-family: var(--font-inter);
+}
+
+/* Content Wrapper Variants */
+.bellhop-content-wrapper-sm {
+  padding: var(--spacing-2xl);
+  /*max-width: 800px;*/
+  margin: 0 auto;
+  font-family: var(--font-inter);
+}
+
+.bellhop-content-wrapper-lg {
+  padding: var(--spacing-5xl);
+  /*max-width: 1400px;*/
+  margin: 0 auto;
+  font-family: var(--font-inter);
+}
+
+.bellhop-content-wrapper-full {
+  padding: var(--spacing-4xl);
+  max-width: none;
+  margin: 0;
+  font-family: var(--font-inter);
+}
+
+/* Content Typography - Standard content headings and text */
+.bellhop-content-wrapper h1,
+.bellhop-content-wrapper-sm h1,
+.bellhop-content-wrapper-lg h1,
+.bellhop-content-wrapper-full h1 {
+  font-size: var(--text-3xl-size);
+  font-weight: var(--weight-bold);
+  line-height: var(--text-3xl-line);
+  color: var(--color-neutral-800);
+  margin-bottom: var(--spacing-md);
+}
+
+.bellhop-content-wrapper p,
+.bellhop-content-wrapper-sm p,
+.bellhop-content-wrapper-lg p,
+.bellhop-content-wrapper-full p {
+  font-size: var(--text-md-size);
+  font-weight: var(--weight-regular);
+  line-height: var(--text-md-line);
+  color: var(--color-neutral-600);
+  margin-bottom: var(--spacing-2xl);
+}
+
+/* Responsive adjustments for content wrappers */
+@media (max-width: 768px) {
+  .bellhop-content-wrapper,
+  .bellhop-content-wrapper-sm,
+  .bellhop-content-wrapper-lg,
+  .bellhop-content-wrapper-full {
+    padding: var(--spacing-xl);
+  }
+
+  .bellhop-content-wrapper h1,
+  .bellhop-content-wrapper-sm h1,
+  .bellhop-content-wrapper-lg h1,
+  .bellhop-content-wrapper-full h1 {
+    font-size: var(--text-2xl-size);
+    line-height: var(--text-2xl-line);
+  }
+}
+
+@media (max-width: 480px) {
+  .bellhop-content-wrapper,
+  .bellhop-content-wrapper-sm,
+  .bellhop-content-wrapper-lg,
+  .bellhop-content-wrapper-full {
+    padding: var(--spacing-md);
+  }
+
+  .bellhop-content-wrapper h1,
+  .bellhop-content-wrapper-sm h1,
+  .bellhop-content-wrapper-lg h1,
+  .bellhop-content-wrapper-full h1 {
+    font-size: var(--text-xl-size);
+    line-height: var(--text-xl-line);
+  }
+}

package/src/tokens/bellhop-icons.css

@@ -0,0 +1,77 @@
+/* ============================================
+   Bellhop Icon System
+   ============================================ */
+
+:root {
+  /* Icon Sizes */
+  --icon-size-xs: 16px;
+  --icon-size-sm: 18px;
+  --icon-size-md: 20px;
+  --icon-size-lg: 24px;
+  --icon-size-xl: 28px;
+  --icon-size-2xl: 32px;
+}
+
+/* Base Material Symbols Configuration */
+.material-symbols-outlined,
+.material-icons,
+.material-icons-outlined {
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-style: normal;
+  font-size: var(--icon-size-md);
+  line-height: 1;
+  display: inline-block;
+  vertical-align: middle;
+  color: var(--color-neutral-500);
+  -webkit-font-smoothing: antialiased;
+  font-feature-settings: 'liga';
+}
+
+/* Icon Size Classes */
+.icon-xs {
+  font-size: var(--icon-size-xs);
+}
+.icon-sm {
+  font-size: var(--icon-size-sm);
+}
+.icon-md {
+  font-size: var(--icon-size-md);
+}
+.icon-lg {
+  font-size: var(--icon-size-lg);
+}
+.icon-xl {
+  font-size: var(--icon-size-xl);
+}
+.icon-2xl {
+  font-size: var(--icon-size-2xl);
+}
+
+/* Icon Color Classes */
+.icon-primary {
+  color: var(--color-brand-500);
+}
+.icon-secondary {
+  color: var(--color-neutral-500);
+}
+.icon-success {
+  color: var(--color-success-500);
+}
+.icon-error {
+  color: var(--color-error-500);
+}
+.icon-warning {
+  color: var(--color-warning-500);
+}
+
+/* Rotating Icons */
+@keyframes icon-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.icon-spin {
+  animation: icon-spin 1s linear infinite;
+}