@actabldesign/bellhop-styles 0.0.3 → 0.0.4

package/src/tokens/colors.mdx

@@ -0,0 +1,59 @@
+## Base colors palette
+Semantic colors values and base colors palette.
+
+In the semantic palette, which defines colors based on how they are used, each and every semantic color points to color from a base palette. It means that all our semantic colors refer to this base palette.
+
+## Primary colors
+These are the main neutral, brand and feedback colors that make up the majority of the colors used in the design system and components.
+
+### Base
+These are base black and white color styles to quickly swap out if you need to.
+### Neutral
+Gray is a neutral color and is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — are usually gray. Maps from gray-cool
+### Brand
+The brand color is your "primary" color, and is used across all interactive elements such as buttons, links, inputs, etc. It can define the overall feel and can elicit emotion. Uses Indigo color.Brand colors are defined based on Actabl's Brand Guidelines. Maps from indigo
+### Accent
+The accent color is used to accentuate and complement the primary colors. Uses Guava color.Brand colors are defined based on Actabl's Brand Guidelines. Maps from guava.
+
+## Support colors
+
+### Error - feedback
+Error colors are used across error states and in "destructive" actions. They communicate a destructive/negative action, such as removing a user from your team. Maps from red
+### Warning - feedback
+Warning colors can communicate that an action is potentially destructive or "on-hold". These colors are commonly used in confirmations to grab the users' attention. Maps from red
+### Success - feedback
+Success colors communicate a positive action, positive trend, or a successful confirmation. If you're using green as your primary color, it can be helpful to introduce a different hue for your success green.
+
+## Extended colors
+Along with primary colors, it's helpful to have a selection of secondary colors to use in components such as pills, alerts and labels. These secondary colors should be used sparingly or as accents, while the primary color(s) should take precedence.
+
+### Gray cool
+Can be swapped with the default neutral color.
+### Lime
+Can be swapped with the default success color.
+### Teal
+Can be swapped with the default success color.
+### Blue
+### Indigo
+### Purple
+### Purple Lavender
+### Pink
+### Guava / Rose
+### Orange
+Can be swapped with the default warning color.
+### Yellow
+Can be swapped with the default warning color.
+
+## DataViz colors
+#5068DD
+#A05DA8
+#5D6B98
+#E26E76
+#7498FB
+#BB81BA
+#7D89B0
+#E38C91
+#8DAAFC
+#CFA5CE
+#B9C0D4
+#E9AAAE

package/src/tokens/index.css

@@ -0,0 +1,17 @@
+/* ==========================================================================
+   BELLHOP DESIGN TOKENS
+   Shared design system tokens for all frameworks
+   ========================================================================== */
+
+/* Import all design token files */
+@import './bellhop-primary-colors.css';
+@import './bellhop-secondary-colors.css';
+@import './bellhop-typography.css';
+@import './bellhop-spacing.css';
+@import './bellhop-radius.css';
+@import './bellhop-shadows.css';
+@import './bellhop-animations.css';
+@import './bellhop-layout.css';
+@import './bellhop-icons.css';
+@import './bellhop-global.css';
+@import './bellhop-styles.css';

package/components/appbar.css

@@ -1,167 +0,0 @@
-.appbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 56px;
-  padding: 0 var(--spacing-sm);
-  background-color: var(--color-white);
-  border-bottom: 1px solid var(--color-neutral-200);
-  font-family: var(--font-inter);
-  position: sticky;
-  top: 0;
-  z-index: 1000;
-  box-sizing: border-box;
-  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-}
-
-/* Left Section */
-.left-section {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xl);
-  flex-shrink: 0;
-}
-
-/* Menu toggle styles removed - now using app-button component */
-
-.logo {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--spacing-4xl);
-  height: var(--spacing-4xl);
-  color: var(--color-brand-500);
-}
-
-.logo-image {
-  width: 36px;
-  height: 36px;
-  object-fit: contain;
-}
-
-.property-name {
-  font-size: var(--text-md-size);
-  font-weight: var(--weight-semibold);
-  color: var(--color-neutral-800);
-  line-height: var(--text-md-line);
-  white-space: nowrap;
-}
-
-/* Center Section */
-.center-section {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  min-width: 0;
-}
-
-.breadcrumbs {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-md);
-  max-width: 100%;
-}
-
-.breadcrumb-item {
-  font-size: var(--text-sm-size);
-  font-weight: var(--weight-regular);
-  line-height: var(--text-sm-line);
-  color: var(--color-neutral-500);
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: var(--spacing-xs) var(--spacing-md);
-  border-radius: var(--radius-xs);
-  transition: all 0.2s ease;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-
-.breadcrumb-item.active {
-  color: var(--color-neutral-800);
-  font-weight: var(--weight-medium);
-  cursor: default;
-}
-
-.breadcrumb-item:disabled {
-  cursor: default;
-}
-
-.breadcrumb-separator {
-  color: var(--color-neutral-200);
-  flex-shrink: 0;
-}
-
-/* Right Section */
-.right-section {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-md);
-  flex-shrink: 0;
-}
-
-/* Icon button styles removed - now using app-button component */
-
-.icon-button-wrapper {
-  position: relative;
-}
-
-.icon-badge-dot {
-  position: absolute;
-  top: 0;
-  right: 4px;
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-  .appbar {
-    padding: 0 16px;
-  }
-
-  .property-name {
-    display: none;
-  }
-
-  .left-section {
-    gap: 12px;
-  }
-
-  .breadcrumbs {
-    max-width: 200px;
-  }
-
-  .breadcrumb-item {
-    font-size: 13px;
-    padding: 2px 6px;
-    max-width: 80px;
-  }
-}
-
-@media (max-width: 480px) {
-  .appbar {
-    padding: 0 12px;
-  }
-
-  .breadcrumbs {
-    max-width: 150px;
-  }
-
-  .breadcrumb-item {
-    font-size: 12px;
-    max-width: 60px;
-  }
-
-  .right-section {
-    gap: 4px;
-  }
-
-  .icon-button {
-    width: 32px;
-    height: 32px;
-  }
-}

package/components/autocomplete-menu.css

@@ -1,142 +0,0 @@
-/* ==========================================================================
-   AUTOCOMPLETE MENU COMPONENT
-   Shared styles for all frameworks
-   ========================================================================== */
-
-.autocomplete-menu {
-  position: absolute;
-  z-index: 1000;
-  top: calc(100% + var(--spacing-sm));
-  left: 0;
-  right: 0;
-  width: 100%;
-  min-width: 240px;
-  background: var(--color-white);
-  border-radius: var(--radius-md);
-  box-shadow: 0px 32px 64px -12px rgba(64, 73, 104, 0.14),
-    0px 0px 1px 1px rgba(64, 73, 104, 0.1);
-  border: 1px solid var(--color-neutral-200);
-  overflow: hidden;
-  overflow-y: auto;
-  /* Add padding like dropdown-menu items container */
-  padding: var(--spacing-xs) 0;
-  /* Optimizations for stable layout */
-  box-sizing: border-box;
-  transform: translateZ(0); /* Hardware acceleration */
-  will-change: opacity, transform;
-}
-
-
-/* Menu Items - Match dropdown-menu styling exactly */
-.autocomplete-item {
-  padding: var(--spacing-xxs) var(--spacing-sm);
-  cursor: pointer;
-}
-
-.autocomplete-item.disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.item-content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-lg);
-  padding: var(--spacing-xl) var(--spacing-md);
-  border-radius: var(--radius-sm);
-  transition: background-color 0.15s ease;
-}
-
-.autocomplete-item:hover:not(.disabled) .item-content {
-  background: var(--color-neutral-100);
-}
-
-.autocomplete-item.selected .item-content {
-  background: var(--color-neutral-100);
-}
-
-.item-text {
-  font-family: var(--font-inter);
-  font-weight: var(--weight-medium);
-  font-size: var(--text-sm-size);
-  line-height: var(--text-sm-line);
-  color: var(--color-neutral-700);
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: 0;
-}
-
-.autocomplete-item.selected .item-text {
-  color: var(--color-neutral-700);
-  font-weight: var(--weight-medium);
-}
-
-.autocomplete-item.disabled .item-text {
-  color: var(--color-neutral-400);
-}
-
-/* Highlight matching text */
-.item-text .highlight {
-  font-weight: var(--weight-semibold);
-  color: var(--color-neutral-800);
-}
-
-/* Check icon for multi-select */
-.check-icon {
-  font-size: var(--text-xl-size);
-  color: var(--color-brand-600);
-  flex-shrink: 0;
-  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
-}
-
-/* Custom Scrollbar */
-.autocomplete-menu::-webkit-scrollbar {
-  width: 6px;
-}
-
-.autocomplete-menu::-webkit-scrollbar-track {
-  background: var(--color-neutral-50);
-  border-radius: var(--radius-xs);
-}
-
-.autocomplete-menu::-webkit-scrollbar-thumb {
-  background: var(--color-neutral-200);
-  border-radius: var(--radius-xs);
-}
-
-.autocomplete-menu::-webkit-scrollbar-thumb:hover {
-  background: var(--color-neutral-300);
-}
-
-/* Firefox scrollbar */
-.autocomplete-menu {
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-neutral-200) var(--color-neutral-50);
-}
-
-/* High contrast mode support */
-@media (prefers-contrast: high) {
-  .autocomplete-menu {
-    border-width: 2px;
-  }
-
-  .autocomplete-item.selected {
-    outline: 2px solid var(--color-brand-500);
-    outline-offset: -2px;
-  }
-}
-
-/* Reduced motion support */
-@media (prefers-reduced-motion: reduce) {
-  .autocomplete-menu.animate-dropdown-enter,
-  .autocomplete-menu.animate-dropdown-exit {
-    animation: none;
-  }
-
-  .autocomplete-item {
-    transition: none;
-  }
-}

package/components/avatar-add.css

@@ -1,112 +0,0 @@
-/* ==========================================================================
-   AVATAR ADD BUTTON COMPONENT
-   Shared styles for all frameworks
-   ========================================================================== */
-
-/* Base Button */
-.avatar-add {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--color-white);
-  border: 1px dashed var(--color-neutral-300);
-  border-radius: 50%;
-  cursor: pointer;
-  transition: all 0.2s ease-in-out;
-  padding: 0;
-  outline: none;
-}
-
-/* Button Sizes */
-.avatar-add-xs {
-  width: 24px;
-  height: 24px;
-}
-
-.avatar-add-sm {
-  width: 32px;
-  height: 32px;
-}
-
-.avatar-add-md {
-  width: 40px;
-  height: 40px;
-}
-
-/* ==========================================================================
-   BUTTON STATES
-   ========================================================================== */
-
-/* Hover State */
-.avatar-add-hover,
-.avatar-add:hover:not(:disabled) {
-  background-color: var(--color-neutral-50);
-}
-
-.avatar-add-hover .avatar-add-icon,
-.avatar-add:hover:not(:disabled) .avatar-add-icon {
-  color: var(--color-neutral-600);
-}
-
-/* Focus State */
-.avatar-add-focus,
-.avatar-add:focus-visible {
-  background-color: var(--color-white);
-  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-brand-500);
-}
-
-/* Disabled State */
-.avatar-add-disabled,
-.avatar-add:disabled {
-  background-color: var(--color-neutral-50);
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.avatar-add-disabled .avatar-add-icon,
-.avatar-add:disabled .avatar-add-icon {
-  color: var(--color-neutral-300);
-}
-
-/* ==========================================================================
-   CONTENT ELEMENTS
-   ========================================================================== */
-
-/* Content Container */
-.avatar-add-content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 4px;
-}
-
-/* Icon */
-.avatar-add-icon {
-  color: var(--color-neutral-500);
-  line-height: 1;
-}
-
-/* Icon Sizes - adjusted for Material Symbols stroke weight */
-.avatar-add-xs .avatar-add-icon,
-.avatar-add-sm .avatar-add-icon {
-  font-variation-settings: 'wght' 400;
-}
-
-.avatar-add-md .avatar-add-icon {
-  font-variation-settings: 'wght' 500;
-}
-
-/* ==========================================================================
-   TOOLTIP POSITIONING
-   ========================================================================== */
-
-.avatar-add-button {
-  position: relative;
-}
-
-.avatar-add-tooltip {
-  position: absolute;
-  top: 0;
-  left: 50%;
-}