fix(navbar): fix profile dropdown hover gap

feat(theme): configure colors via global css variables
chore(agents): add rocky agent configuration and skills
2026-08-18 15:30:29 +02:00 · 2026-08-18 15:30:24 +02:00 · 2026-08-18 15:30:19 +02:00
7 changed files with 83 additions and 25 deletions
--- a/.agents/agents.md
+++ b/.agents/agents.md
@@ -0,0 +1,18 @@
+# Antigravity Agent Configuration (Project Rocky)
+
+## Agent: Rocky_Manager
+- **Role**: Hauptkoordinator des Rocky-Projekts.
+- **Responsibility**: Verteilt Aufgaben an Spezialisten basierend auf den Skill-Anforderungen.
+
+## Agent: Dokumenten_Spezialist
+- **Role**: Verantwortlich für Exporte und Berichte.
+- **Assigned_Skills**: [".agents/skills/pdf_skill.md"]
+
+## Agent: Kommunikations_Spezialist
+- **Role**: Verantwortlich für Benachrichtigungen und Kundenkontakt.
+- **Assigned_Skills**: [".agents/skills/email_skill.md"]
+
+## Agent: Compliance_Supervisor
+- **Role**: Prüft den geschriebenen Code auf Datenschutzfehler.
+- **Assigned_Skills**: [".agents/skills/dsgvo_skill.md"]
+- **Rule**: "Blockiere jeden Git-Commit, wenn der Code gegen die DSGVO-Vorgaben verstößt."
--- a/.agents/skills/dsgvo_skill.md
+++ b/.agents/skills/dsgvo_skill.md
@@ -0,0 +1,6 @@
+# Skill: DSGVO & Datenschutz-Compliance (Rocky-Projekt)
+
+## Regeln für Aufgaben:
+1. **Daten-Minimierung**: Spezialisten dürfen personenbezogene Daten (wie E-Mail-Adressen oder Klarnamen) niemals in Log-Dateien oder im Git-Verlauf speichern.
+2. **Verschlüsselung**: Daten im Rocky-Projekt müssen "at rest" und "in transit" (mindestens TLS 1.3) verschlüsselt werden.
+3. **Anonymisierung**: Für Testzwecke im Terminal-Subagent dürfen nur synthetische Dummy-Daten verwendet werden. Keine echten Kundendaten nutzen!
--- a/.agents/skills/email_skill.md
+++ b/.agents/skills/email_skill.md
@@ -0,0 +1,6 @@
+# Skill: E-Mail-Kommunikation (Rocky-Projekt)
+
+## Regeln für Aufgaben:
+1. **Tonalität**: Professionell, höflich und im Corporate Design des Rocky-Projekts.
+2. **Sicherheit**: Sende niemals Passwörter, Token oder unverschlüsselte API-Keys per E-Mail.
+3. **Fallbacks**: Wenn ein E-Mail-Versand fehlschlägt, schreibe den Fehler sofort in die lokale Log-Datei `rocky_mail_errors.log` und benachrichtige den Manager-Agenten.
--- a/.agents/skills/pdf_skill.md
+++ b/.agents/skills/pdf_skill.md
@@ -0,0 +1,6 @@
+# Skill: PDF-Verarbeitung & Generierung (Rocky-Projekt)
+
+## Regeln für Aufgaben:
+1. **Formatierung**: Nutze ausschließlich barrierefreie PDF/A-Formate für Rechnungen und Berichte im Rocky-Projekt.
+2. **Metadaten**: Jedes generierte PDF muss automatisch den Projektnamen `Rocky` und einen eindeutigen Zeitstempel im Datei-Header enthalten.
+3. **Validierung**: Vor dem Speichern muss der Agent prüfen, ob alle Textfelder innerhalb der Seitenränder liegen (kein Textumbruch-Fehler).
--- a/shop/app/globals.css
+++ b/shop/app/globals.css
@@ -151,11 +151,33 @@ html {
  border-color: color-mix(in srgb, var(--destructive-custom) 35%, transparent) !important;
 }

-/* Background Glowing Orbs */
+/* Background Glowing Orbs & Dynamic Surfaces */
 .blur-\[120px\] {
  background-color: var(--bg-glow-1) !important;
 }

+.bg-\[\#020617\] {
+  background-color: oklch(var(--oklch-background)) !important;
+}
+
+/* Dynamische Buttons & Badges über globale CSS Variablen */
+.btn-primary-theme, .bg-primary-theme {
+  background-color: var(--button-bg, var(--primary-custom)) !important;
+  color: #ffffff !important;
+}
+
+.text-highlight-theme {
+  color: var(--text-highlight, var(--accent-custom)) !important;
+}
+
+.border-glow-theme {
+  border-color: var(--card-border-glow, color-mix(in srgb, var(--accent-custom) 35%, transparent)) !important;
+}
+
+.ring-theme {
+  --tw-ring-color: var(--ring-color, var(--primary-custom)) !important;
+}
+
 input, select, textarea, option {
  background-color: oklch(var(--oklch-surface)) !important;
  color: oklch(var(--oklch-text-main)) !important;
--- a/shop/components/NavbarClient.tsx
+++ b/shop/components/NavbarClient.tsx
@@ -159,7 +159,7 @@ export function NavbarClient({ user, role = "partner" }: NavbarClientProps) {
                <span className="max-w-[120px] truncate">{currentUser.email}</span>
              </Button>
              {open && (
-                <div className="absolute right-0 mt-2 w-48 rounded-xl border p-2 shadow-xl z-50 bg-white text-slate-900 border-slate-200 dark:bg-slate-950 dark:text-white dark:border-white/10">
+                <div className="absolute right-0 mt-2 w-48 rounded-xl border p-2 shadow-xl z-50 bg-white text-slate-900 border-slate-200 dark:bg-slate-950 dark:text-white dark:border-white/10 before:absolute before:-top-3 before:left-0 before:w-full before:h-3">
                  <div className="px-3 py-1.5 text-[11px] truncate border-b text-slate-400 border-slate-100 dark:border-white/5 mb-1">
                    {currentUser.email}
                  </div>
--- a/shop/components/admin/ColorThemePicker.tsx
+++ b/shop/components/admin/ColorThemePicker.tsx
@@ -58,16 +58,16 @@ export function ColorThemePicker({
            const isSelected = colorScheme === preset.id

            const tokenSwatches = [
-              preset.primary,
-              preset.accent,
-              preset.bgGlow1,
-              preset.bgGlow2,
-              preset.gradientFrom,
-              preset.gradientTo,
-              preset.textHighlight,
-              preset.buttonBg,
-              preset.ringColor,
-              preset.cardBorder,
+              { name: 'Primary', color: preset.primary, desc: 'Helle/edle Hauptfarbe für Navigation/Texte' },
+              { name: 'Accent', color: preset.accent, desc: 'Scharfe Highlight-Farbe für Badges/Meldungen' },
+              { name: 'bgGlow1', color: preset.bgGlow1, desc: 'Atmosphärischer Lichtnebel von oben' },
+              { name: 'bgGlow2', color: preset.bgGlow2, desc: 'Subtiles Gegenlicht von unten' },
+              { name: 'gradientFrom', color: preset.gradientFrom, desc: 'Startfarbe für Core-Verläufe' },
+              { name: 'gradientTo', color: preset.gradientTo, desc: 'Endfarbe für Core-Verläufe' },
+              { name: 'textHighlight', color: preset.textHighlight, desc: 'Soft-Pastell Text-Empfehlung' },
+              { name: 'buttonBg', color: preset.buttonBg, desc: 'Satte Basisfarbe Hauptbuttons' },
+              { name: 'ringColor', color: preset.ringColor, desc: 'Präzise Fokus-Rand-Farbe' },
+              { name: 'cardBorder', color: preset.cardBorder, desc: 'Subtiler Rahmen-Ton Karten' },
            ]

            return (
@@ -99,12 +99,12 @@ export function ColorThemePicker({
                {/* 10 Color Token Swatches Bar */}
                <div className="space-y-1 pt-1 border-t border-slate-800/60">
                  <div className="flex items-center gap-1 justify-between">
-                    {tokenSwatches.map((color, i) => (
+                    {tokenSwatches.map((item, i) => (
                      <span
                        key={i}
-                        className="w-3 h-3 rounded-full border border-white/10 shadow-sm shrink-0"
-                        style={{ backgroundColor: color }}
-                        title={`Token ${i + 1}: ${color}`}
+                        className="w-3 h-3 rounded-full border border-white/10 shadow-sm shrink-0 transition-transform hover:scale-125"
+                        style={{ backgroundColor: item.color }}
+                        title={`${item.name}: ${item.desc} (${item.color})`}
                      />
                    ))}
                  </div>
@@ -199,11 +199,11 @@ export function ColorThemePicker({
          {/* Animated Background Orbs Preview */}
          <div
            className="absolute -top-10 -left-10 w-40 h-40 rounded-full opacity-30 blur-2xl pointer-events-none transition-all duration-500"
-            style={{ backgroundColor: activePreset.bgGlow1 || primaryColor }}
+            style={{ backgroundColor: 'var(--bg-glow-1, ' + (activePreset.bgGlow1 || primaryColor) + ')' }}
          />
          <div
            className="absolute -bottom-10 -right-10 w-40 h-40 rounded-full opacity-30 blur-2xl pointer-events-none transition-all duration-500"
-            style={{ backgroundColor: activePreset.bgGlow2 || accentColor }}
+            style={{ backgroundColor: 'var(--bg-glow-2, ' + (activePreset.bgGlow2 || accentColor) + ')' }}
          />

          {/* Header Preview */}
@@ -211,7 +211,7 @@ export function ColorThemePicker({
            <div className="flex items-center gap-2">
              <div
                className="w-6 h-6 rounded-md flex items-center justify-center text-white text-xs font-bold shadow-md"
-                style={{ backgroundColor: primaryColor }}
+                style={{ backgroundColor: 'var(--primary-custom, ' + primaryColor + ')' }}
              >
                <Building2 className="w-3.5 h-3.5" />
              </div>
@@ -221,7 +221,7 @@ export function ColorThemePicker({
            </div>
            <span
              className="text-[10px] font-semibold px-2 py-0.5 rounded-full text-slate-950 font-bold"
-              style={{ backgroundColor: accentColor }}
+              style={{ backgroundColor: 'var(--accent-custom, ' + accentColor + ')' }}
            >
              Aktiv
            </span>
@@ -233,7 +233,7 @@ export function ColorThemePicker({
              type="button"
              className="px-4 py-2 rounded-lg text-xs font-bold text-white shadow-md flex items-center gap-1.5 transition-all"
              style={{
-                background: `linear-gradient(135deg, ${primaryColor} 0%, ${activePreset.gradientTo || primaryColor} 100%)`,
+                background: `linear-gradient(135deg, var(--gradient-from, ${primaryColor}) 0%, var(--gradient-to, ${activePreset.gradientTo || primaryColor}) 100%)`,
              }}
            >
              <ShoppingCart className="w-3.5 h-3.5" />
@@ -243,7 +243,7 @@ export function ColorThemePicker({
            <button
              type="button"
              className="px-3.5 py-2 rounded-lg text-xs font-semibold bg-slate-800/90 text-slate-200 border"
-              style={{ borderColor: accentColor }}
+              style={{ borderColor: 'var(--accent-custom, ' + accentColor + ')' }}
            >
              Details anzeigen
            </button>
@@ -251,9 +251,9 @@ export function ColorThemePicker({
            <span
              className="text-[10px] font-bold px-2.5 py-1 rounded-full border flex items-center gap-1"
              style={{
-                borderColor: `${accentColor}40`,
-                backgroundColor: `${accentColor}15`,
-                color: activePreset.textHighlight || accentColor,
+                borderColor: 'var(--card-border-glow, ' + accentColor + '40)',
+                backgroundColor: 'color-mix(in srgb, var(--accent-custom, ' + accentColor + ') 15%, transparent)',
+                color: 'var(--text-highlight, ' + (activePreset.textHighlight || accentColor) + ')',
              }}
            >
              <Tag className="w-3 h-3" />
Author	SHA1	Message	Date
DanielS	a7816ba3c4	fix(navbar): fix profile dropdown hover gap Some checks failed Staging Build / build (push) Failing after 3m54s Details	2026-08-18 15:30:29 +02:00
DanielS	03087f4fbb	feat(theme): configure colors via global css variables	2026-08-18 15:30:24 +02:00
DanielS	f6760d30a4	chore(agents): add rocky agent configuration and skills	2026-08-18 15:30:19 +02:00