HAP Analysis: Archive docs and create implementation action plan
- Archive all existing markdown documentation files - Create comprehensive HAP_ACTION_PLAN.md with: * Analysis of current BZZZ implementation vs HAP vision * 4-phase implementation strategy * Structural reorganization approach (multi-binary) * HAP interface implementation roadmap - Preserve existing functionality while adding human agent portal - Focus on incremental migration over rewrite 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
anthonyrawlins
@@ -44,8 +44,8 @@ html { font-size: 16px; }
|
||||
--border-emphasis: #666666;
|
||||
}
|
||||
|
||||
/* Light Theme Variables */
|
||||
:root:not(.dark) {
|
||||
/* Light Theme Variables (apply when html has class 'light') */
|
||||
html.light {
|
||||
--bg-primary: #FFFFFF;
|
||||
--bg-secondary: #f8f8f8;
|
||||
--bg-tertiary: #f0f0f0;
|
||||
@@ -89,6 +89,7 @@ body {
|
||||
/* Ultra-Minimalist Button System */
|
||||
.btn-primary {
|
||||
@apply text-white font-semibold py-3 px-6 rounded-md transition-all duration-300 disabled:opacity-40 disabled:cursor-not-allowed;
|
||||
/* Light mode: warm sand gradient */
|
||||
background: linear-gradient(135deg, var(--chorus-warning) 0%, var(--chorus-neutral) 100%);
|
||||
border: 2px solid var(--chorus-warning);
|
||||
}
|
||||
@@ -101,6 +102,16 @@ body {
|
||||
.btn-primary:hover { transform: translateY(-2px); }
|
||||
.btn-secondary:hover { transform: translateY(-2px); border-color: var(--text-primary); }
|
||||
|
||||
/* Dark mode: Mulberry mid-tone for stronger contrast */
|
||||
html.dark .btn-primary {
|
||||
background: #5b3d77; /* approx mulberry-500 */
|
||||
border-color: #5b3d77;
|
||||
box-shadow: 0 4px 12px rgba(11, 2, 19, 0.35);
|
||||
}
|
||||
html.dark .btn-primary:hover {
|
||||
filter: brightness(1.08);
|
||||
}
|
||||
|
||||
/* Teaser-aligned Form Elements */
|
||||
.form-input {
|
||||
background: var(--bg-tertiary);
|
||||
@@ -114,7 +125,6 @@ body {
|
||||
}
|
||||
.form-input:focus { outline: none; border-color: var(--chorus-primary); box-shadow: 0 0 0 3px rgba(11,2,19,0.1); background: var(--bg-secondary); }
|
||||
.form-input::placeholder { color: var(--text-subtle); }
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
@apply border border-chorus-primary text-chorus-primary hover:bg-chorus-primary hover:text-white font-medium py-3 px-6 rounded-md transition-all duration-200;
|
||||
@@ -218,6 +228,52 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
/* Brand Panel Components */
|
||||
@layer components {
|
||||
.panel { @apply rounded-lg p-4 border; }
|
||||
|
||||
/* Info (Ocean) */
|
||||
.panel-info { @apply border-ocean-200 bg-ocean-50; }
|
||||
.panel-info .panel-title { @apply text-ocean-800; }
|
||||
.panel-info .panel-body { @apply text-ocean-700; }
|
||||
html.dark .panel-info { @apply border-ocean-700; background-color: rgba(58,70,84,0.20) !important; }
|
||||
html.dark .panel-info .panel-title { @apply text-ocean-300; }
|
||||
html.dark .panel-info .panel-body { @apply text-ocean-300; }
|
||||
|
||||
/* Note (Nickel / Neutral) */
|
||||
.panel-note { background-color: #f5f4f1; border-color: #e0ddd7; }
|
||||
.panel-note .panel-title { @apply text-chorus-text-primary; }
|
||||
.panel-note .panel-body { @apply text-chorus-text-secondary; }
|
||||
html.dark .panel-note { background-color: rgba(11,2,19,0.20) !important; border-color: var(--border-defined) !important; }
|
||||
html.dark .panel-note .panel-title { @apply text-chorus-text-primary; }
|
||||
html.dark .panel-note .panel-body { @apply text-chorus-text-secondary; }
|
||||
|
||||
/* Warning (Sand) */
|
||||
.panel-warning { @apply bg-sand-100 border-sand-900; }
|
||||
.panel-warning .panel-title { @apply text-sand-900; }
|
||||
.panel-warning .panel-body { @apply text-sand-900; }
|
||||
html.dark .panel-warning { background-color: rgba(106,92,70,0.20) !important; @apply border-sand-900; }
|
||||
/* Fallback to white/neutral for readability in dark */
|
||||
html.dark .panel-warning .panel-title { @apply text-white; }
|
||||
html.dark .panel-warning .panel-body { color: #F1F0EF !important; }
|
||||
|
||||
/* Error (Coral) */
|
||||
.panel-error { @apply bg-coral-50 border-coral-950; }
|
||||
.panel-error .panel-title { @apply text-coral-950; }
|
||||
.panel-error .panel-body { @apply text-coral-950; }
|
||||
html.dark .panel-error { background-color: rgba(46,29,28,0.20) !important; @apply border-coral-950; }
|
||||
html.dark .panel-error .panel-title { @apply text-white; }
|
||||
html.dark .panel-error .panel-body { color: #ffd6d6 !important; }
|
||||
|
||||
/* Success (Eucalyptus) */
|
||||
.panel-success { @apply bg-eucalyptus-50 border-eucalyptus-950; }
|
||||
.panel-success .panel-title { @apply text-eucalyptus-950; }
|
||||
.panel-success .panel-body { @apply text-eucalyptus-950; }
|
||||
html.dark .panel-success { background-color: rgba(42,51,48,0.20) !important; @apply border-eucalyptus-950; }
|
||||
html.dark .panel-success .panel-title { @apply text-white; }
|
||||
html.dark .panel-success .panel-body { color: #bacfbf !important; }
|
||||
}
|
||||
|
||||
/* Teaser-aligned color aliases */
|
||||
@layer utilities {
|
||||
/* 8 standard color families - key shades */
|
||||
@@ -235,6 +291,18 @@ body {
|
||||
.text-ocean-500 { color: #7a90b2 !important; }
|
||||
.border-ocean-500 { border-color: #7a90b2 !important; }
|
||||
|
||||
.bg-ocean-900 { background-color: #3a4654 !important; }
|
||||
.text-ocean-900 { color: #3a4654 !important; }
|
||||
.border-ocean-900 { border-color: #3a4654 !important; }
|
||||
|
||||
.text-ocean-800 { color: #4a5867 !important; }
|
||||
.border-ocean-800 { border-color: #4a5867 !important; }
|
||||
|
||||
.text-ocean-300 { color: #9bb6d6 !important; }
|
||||
.border-ocean-300 { border-color: #9bb6d6 !important; }
|
||||
|
||||
.border-ocean-200 { border-color: #abc9e8 !important; }
|
||||
|
||||
.bg-ocean-50 { background-color: #cbefff !important; }
|
||||
.text-ocean-50 { color: #cbefff !important; }
|
||||
.border-ocean-50 { border-color: #cbefff !important; }
|
||||
@@ -280,6 +348,11 @@ body {
|
||||
/* Utility text/border fallbacks for theme tokens */
|
||||
.text-chorus-primary { color: var(--text-primary) !important; }
|
||||
.text-chorus-secondary { color: var(--text-secondary) !important; }
|
||||
.text-chorus-text-primary { color: var(--text-primary) !important; }
|
||||
.text-chorus-text-secondary { color: var(--text-secondary) !important; }
|
||||
.text-chorus-text-tertiary { color: var(--text-tertiary) !important; }
|
||||
.text-chorus-text-subtle { color: var(--text-subtle) !important; }
|
||||
.text-chorus-text-ghost { color: var(--text-ghost) !important; }
|
||||
.bg-chorus-primary { background-color: var(--bg-primary) !important; }
|
||||
.bg-chorus-white { background-color: var(--bg-secondary) !important; }
|
||||
.bg-chorus-warm { background-color: var(--bg-tertiary) !important; }
|
||||
@@ -301,3 +374,20 @@ body {
|
||||
@keyframes slideUp { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: translateY(0); } }
|
||||
.animate-fade-in { animation: fadeIn 0.6s ease-out; }
|
||||
.animate-slide-up { animation: slideUp 0.8s ease-out; }
|
||||
|
||||
/* Dark-mode heading contrast: make headings white unless panel overrides apply */
|
||||
@layer base {
|
||||
html.dark h1:not(.panel-title),
|
||||
html.dark h2:not(.panel-title),
|
||||
html.dark h3:not(.panel-title),
|
||||
html.dark h4:not(.panel-title),
|
||||
html.dark h5:not(.panel-title),
|
||||
html.dark h6:not(.panel-title) {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
html.dark .text-h1, html.dark .text-h2, html.dark .text-h3,
|
||||
html.dark .text-h4, html.dark .text-h5, html.dark .text-h6 { color: #ffffff !important; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user