@actabldesign/bellhop-styles 0.0.3

package/README.md

@@ -0,0 +1,185 @@
+# BellhopOS Styles
+
+Shared CSS styles and design tokens for the BellhopOS design system. This package provides framework-agnostic styles that can be used with Angular, React, or any other framework.
+
+## Installation
+
+```bash
+npm install @actabldesign/bellhop-styles
+```
+
+## Usage
+
+### Import All Styles
+
+Import the complete style package in your main CSS or TypeScript/JavaScript file:
+
+```css
+@import '@actabldesign/bellhop-styles';
+```
+
+or in TypeScript/JavaScript:
+
+```tsx
+import '@actabldesign/bellhop-styles';
+```
+
+### Import Individual Style Modules
+
+For more granular control, you can import individual style modules:
+
+```css
+@import '@actabldesign/bellhop-styles/base/colors.css';
+@import '@actabldesign/bellhop-styles/base/typography.css';
+@import '@actabldesign/bellhop-styles/base/spacing.css';
+@import '@actabldesign/bellhop-styles/base/shadows.css';
+@import '@actabldesign/bellhop-styles/base/radius.css';
+```
+
+### Using Design Tokens
+
+All design tokens are available as CSS custom properties:
+
+```css
+.my-component {
+  /* Colors */
+  background-color: var(--color-primary-500);
+  color: var(--color-neutral-800);
+
+  /* Spacing */
+  padding: var(--spacing-4);
+  margin: var(--spacing-2);
+
+  /* Typography */
+  font-family: var(--font-inter);
+  font-size: var(--text-sm-size);
+  line-height: var(--text-sm-line);
+
+  /* Shadows */
+  box-shadow: var(--shadow-md);
+
+  /* Border Radius */
+  border-radius: var(--radius-md);
+}
+```
+
+## Design Tokens Reference
+
+### Colors
+
+#### Primary Colors
+- `--color-primary-50` to `--color-primary-900`
+- `--color-primary-500` (default brand color)
+
+#### Neutral Colors
+- `--color-neutral-50` to `--color-neutral-900`
+- `--color-white`, `--color-black`
+
+#### Semantic Colors
+- **Success**: `--color-success-50` to `--color-success-900`
+- **Warning**: `--color-warning-50` to `--color-warning-900`
+- **Error**: `--color-error-50` to `--color-error-900`
+- **Info**: `--color-info-50` to `--color-info-900`
+
+### Typography
+
+#### Font Families
+- `--font-inter`: Primary font family
+
+#### Font Sizes
+- `--text-xs-size` (0.75rem)
+- `--text-sm-size` (0.875rem)
+- `--text-base-size` (1rem)
+- `--text-lg-size` (1.125rem)
+- `--text-xl-size` (1.25rem)
+- And more...
+
+#### Font Weights
+- `--font-light` (300)
+- `--font-normal` (400)
+- `--font-medium` (500)
+- `--font-semibold` (600)
+- `--font-bold` (700)
+
+### Spacing
+
+Spacing scale from 0.5 to 96 (in 0.25rem increments):
+- `--spacing-0-5` (0.125rem)
+- `--spacing-1` (0.25rem)
+- `--spacing-2` (0.5rem)
+- `--spacing-4` (1rem)
+- `--spacing-8` (2rem)
+- And more...
+
+### Shadows
+
+- `--shadow-xs`: Extra small shadow
+- `--shadow-sm`: Small shadow
+- `--shadow-md`: Medium shadow
+- `--shadow-lg`: Large shadow
+- `--shadow-xl`: Extra large shadow
+
+### Border Radius
+
+- `--radius-sm` (0.125rem)
+- `--radius-md` (0.25rem)
+- `--radius-lg` (0.5rem)
+- `--radius-xl` (1rem)
+- `--radius-full` (9999px)
+
+## Component Styles
+
+The package includes pre-built component styles that follow the BellhopOS design system. These are automatically applied when using BellhopOS components.
+
+### Layout Classes
+
+```css
+.app-layout { /* Dashboard layout */ }
+.app-sidebar { /* Sidebar container */ }
+.app-main { /* Main content area */ }
+.bellhop-content-container { /* Content wrapper */ }
+```
+
+## Framework Integration
+
+### React
+
+```tsx
+import '@actabldesign/bellhop-styles';
+
+function App() {
+  return (
+    <div className="app-layout">
+      {/* Your components */}
+    </div>
+  );
+}
+```
+
+### Angular
+
+Add to your `src/styles.css`:
+
+```css
+@import '@actabldesign/bellhop-styles';
+```
+
+### Vanilla JavaScript/HTML
+
+```html
+<link rel="stylesheet" href="node_modules/@actabldesign/bellhop-styles/index.css">
+```
+
+## Development
+
+This package is built using Rollup and PostCSS.
+
+### Building
+
+```bash
+npm run build:lib:styles
+```
+
+## License
+
+MIT

package/base/normalize.css

@@ -0,0 +1,101 @@
+/* Base normalization for consistent rendering across frameworks */
+
+/* Ensure consistent font rendering */
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+/* Set default font family with proper fallbacks */
+body {
+  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+}
+
+/* Ensure consistent box sizing */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Remove default margins */
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+/* Set core root defaults */
+html:focus-within {
+  scroll-behavior: smooth;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+
+/* Make images easier to work with */
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Remove native browser focus outlines for form elements */
+/* Components should provide their own focus styling */
+input,
+textarea,
+button,
+select {
+  outline: none;
+  box-shadow: none;
+}
+
+input:focus,
+textarea:focus,
+button:focus,
+select:focus {
+  outline: none;
+  border: none;
+  box-shadow: none;
+}
+
+/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+  
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/components/appbar.css

@@ -0,0 +1,167 @@
+.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

@@ -0,0 +1,142 @@
+/* ==========================================================================
+   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

@@ -0,0 +1,112 @@
+/* ==========================================================================
+   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%;
+}