[Bug] AppShell uses hardcoded black borders instead of theme-aware colors

[christoph2806]

🐛 Bug Status: CONFIRMED - HARDCODED BLACK BORDERS

The AppShell component in @etherisc/ui-kit 0.6.0 uses hardcoded black borders instead of theme-aware border colors, requiring extensive CSS overrides in consuming applications.

📋 Bug Details

Issue

AppShell component uses hardcoded black borders (border-color: black, #000, etc.) instead of respecting theme CSS variables for border colors.

Current Behavior

/* AppShell renders with hardcoded black borders */
.app-shell-header { border-bottom: 1px solid black; }
.app-shell-breadcrumb { border-bottom: 1px solid #000; }

Expected Behavior

/* Should use theme-aware border colors */
.app-shell-header { border-bottom: 1px solid hsl(var(--border)); }
.app-shell-breadcrumb { border-bottom: 1px solid hsl(var(--border)); }

Environment

• Package: @etherisc/ui-kit
• Version: 0.6.0 (latest)
• Component: AppShell
• Issue Type: Styling/Theming Bug
• Severity: Medium
• Priority: High (affects all consuming applications)

🔍 Root Cause Analysis

Problem

The AppShell component internally uses hardcoded black border styles instead of:

1. Using CSS custom properties from the theme system
2. Using Tailwind's border color utilities
3. Respecting the established color system

Evidence

Our application requires these CSS overrides to fix the issue:

/* REQUIRED HACK - Should not be necessary */
.app-shell [style*="border-color: black"],
.app-shell [style*="border-color:#000"],
.app-shell [style*="border-color: #000000"],
.app-shell [style*="border-top: 1px solid black"],
.app-shell [style*="border-bottom: 1px solid black"] {
  border-color: oklch(var(--bc) / 0.2) !important;
}

This indicates the AppShell component is using inline styles with hardcoded black colors.

💡 Suggested Fix

1. Use Theme Variables

Replace hardcoded border colors with theme-aware variables:

// ❌ Current (problematic)
<div style={{ borderBottom: '1px solid black' }}>

// ✅ Suggested fix
<div className="border-b border-border">
// OR
<div style={{ borderBottom: '1px solid hsl(var(--border))' }}>

2. Consistent Border Classes

Use Tailwind's theme-aware border utilities:

// ❌ Avoid inline styles with hardcoded colors
style={{ borderColor: 'black' }}

// ✅ Use theme-aware classes
className="border-border" 
// OR
className="border-b border-border"

🧪 Reproduction Steps

1. Use AppShell component with default styling
2. Observe horizontal separators (header/breadcrumb borders)
3. Notice they appear black/dark instead of theme-appropriate light gray

📊 Impact Assessment

Affected Components

• AppShell (primary)
• Any layout using AppShell
• All applications using ui-kit 0.6.0

User Experience Impact

• Visual Inconsistency: Borders don't match design system
• Theme Compatibility: Dark/light theme switching may not work properly
• Maintenance Burden: Forces consuming apps to write CSS hacks

Developer Experience Impact

• Required Workarounds: Developers must write CSS overrides
• Documentation Confusion: UI kit appears to not work out-of-the-box
• Theme System Bypass: Breaks the established theming architecture

🔧 Related Issues

This is part of a broader pattern of hardcoded styles in AppShell:

1. Breadcrumb Separator Bug: Already documented, shows ">/" instead of ">"
2. Border Color Bug: This issue (hardcoded black borders)
3. Potential Theme Integration Issues: May affect other theme-aware properties

🎯 Recommendations

Immediate Actions

1. Audit AppShell styles for all hardcoded color values
2. Replace black borders with theme-aware alternatives
3. Test theme switching to ensure border colors adapt properly

Technical Specification

// AppShell component changes needed
- style={{ borderBottom: '1px solid black' }}
+ className="border-b border-border"

- style={{ borderColor: '#000' }}
+ style={{ borderColor: 'hsl(var(--border))' }}

- <div className="border-black">
+ <div className="border-border">

---

Reporter: Web Application Development Team
Urgency: High (affects all AppShell usage)
Complexity: Low (straightforward CSS fixes)

[christoph2806]

Fixed in PR #63 - AppShell border styling issues have been resolved by replacing hard-coded colors with design system tokens (hsl(var(--border)), hsl(var(--foreground))). Updated all AppShell components: AppShell, AppShellTopBar, ContentWrapper, and MarkdownEditor for consistent theming across light/dark modes.