@aichatkit/ui/dist/base.css

Composable chat UI components for AI powered apps

/* packages/ui/src/styles/base.css (Updated) */
/* Base variables */
:root {
  /* Light theme colors (default) */
  --chatkit-primary-25: #f9f5ff;
  --chatkit-primary-50: #f5eeff;
  --chatkit-primary-100: #ede4ff;
  --chatkit-primary-200: #d8c2ff;
  --chatkit-primary-300: #c4a1ff;
  --chatkit-primary-400: #9c66ff;
  --chatkit-primary-500: #8952e0;
  --chatkit-primary-600: #7337c8;
  --chatkit-primary-700: #5e20b8;
  --chatkit-primary-800: #4c1497;
  --chatkit-primary-850: #3e0e89;
  --chatkit-primary-900: #33087a;

  /* Neutral colors */
  --chatkit-neutral-0: #ffffff;
  --chatkit-neutral-25: #fcfcfd;
  --chatkit-neutral-50: #f9fafb;
  --chatkit-neutral-100: #f2f4f7;
  --chatkit-neutral-200: #e4e7ec;
  --chatkit-neutral-300: #d0d5dd;
  --chatkit-neutral-400: #98a2b3;
  --chatkit-neutral-500: #667085;
  --chatkit-neutral-600: #475467;
  --chatkit-neutral-700: #344054;
  --chatkit-neutral-750: #2a2a2a;
  --chatkit-neutral-800: #1d2939;
  --chatkit-neutral-850: #1c1c1c;
  --chatkit-neutral-900: #121212;
  --chatkit-neutral-950: #0c0c0c;
  --chatkit-neutral-1000: #000000;

  /* Semantic tokens */
  --chatkit-text-primary: #1d2939;
  --chatkit-text-secondary: #475467;
  --chatkit-text-inverse: #ffffff;
  --chatkit-text-disabled: #98a2b3;

  --chatkit-border-primary: #e4e7ec;
  --chatkit-border-secondary: #d0d5dd;

  --chatkit-surface-primary: #ffffff;
  --chatkit-surface-secondary: #f9fafb;

  /* Hypermode theme colors */
  --hypermode-bg: #121212;
  --hypermode-card: #1c1c1c;
  --hypermode-border: #2a2a2a;
  --hypermode-hover: #282828;
  --hypermode-input: #222222;
  --hypermode-accent: #9333ea; /* Purple-600 */
  --hypermode-accent-light: #a855f7; /* Purple-500 */
  --hypermode-accent-dark: #7e22ce; /* Purple-700 */
}

/* Dark mode overrides */
.dark {
  --chatkit-text-primary: #f2f4f7;
  --chatkit-text-secondary: #d0d5dd;
  --chatkit-text-inverse: #1d2939;
  --chatkit-text-disabled: #667085;

  --chatkit-border-primary: #344054;
  --chatkit-border-secondary: #475467;

  --chatkit-surface-primary: #1d2939;
  --chatkit-surface-secondary: #344054;
}

/* Chat bubble animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

/* Loading dots animation */
@keyframes loadingDotBounce {
  0%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-6px);
  }
}

/* Hypermode styling */
.hypermode-sidebar-title {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.5rem 1rem;
}

.hypermode-sidebar-item {
  padding: 0.5rem 1rem;
  color: #d1d5db;
  border-radius: 0.375rem;
  transition: background-color 0.2s, color 0.2s;
  width: 100%;
  text-align: left;
  font-size: 0.875rem;
}

.hypermode-sidebar-item:hover {
  background-color: var(--hypermode-hover);
}

.hypermode-sidebar-item.active {
  background-color: var(--hypermode-hover);
  color: white;
}

/* Custom scrollbar for Hypermode theme */
.hypermode-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.hypermode-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.hypermode-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.hypermode-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.3);
}