Design: Pflicht-Fixes gegen helle Schrift und dunkle Flaechen, Diagrammfarben, Chat-Variablen

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/components/serverpuls/Chart.jsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from 'react'
 import uPlot from 'uplot'
 import { formatAxisTick, formatLegendTime } from '../../lib/serverpulsFormat'
+import { CHART } from './chartColors'
 import 'uplot/dist/uPlot.min.css'
 
 /**
@@ -25,15 +26,15 @@ export default function Chart({ data, series, height = 280, yFmt, yRange }) {
       scales: { y: { range: yr || ((u, min, max) => [Math.min(0, min), max === min ? min + 1 : max + (max - min) * 0.08]) } },
       axes: [
         {
-          stroke: '#9aa7b4',
-          grid: { stroke: 'rgba(255,255,255,0.06)' },
-          ticks: { stroke: 'rgba(255,255,255,0.1)' },
+          stroke: CHART.axis,
+          grid: { show: false },
+          ticks: { stroke: CHART.tick },
           values: (u, splits, axisIdx, foundSpace, foundIncr) => splits.map((t) => formatAxisTick(t, foundIncr)),
         },
         {
-          stroke: '#9aa7b4',
-          grid: { stroke: 'rgba(255,255,255,0.06)' },
-          ticks: { stroke: 'rgba(255,255,255,0.1)' },
+          stroke: CHART.axis,
+          grid: { stroke: CHART.grid },
+          ticks: { stroke: CHART.tick },
           size: 70,
           values: (u, vals) => vals.map(fmtVal),
         },
@@ -42,7 +43,7 @@ export default function Chart({ data, series, height = 280, yFmt, yRange }) {
         { label: 'Zeit', value: (u, v) => formatLegendTime(v) },
         ...s.map((x) => ({
           label: x.label,
-          stroke: x.color || '#10b981',
+          stroke: x.color || CHART.line,
           width: 2,
           spanGaps: false,
           points: { show: false },

src/components/serverpuls/chartColors.js

@@ -0,0 +1,11 @@
+// Canvas-Farben fuer uPlot (Serverpuls). Canvas versteht kein var(--...), deshalb stehen die Werte hier als Literale;
+// sie entsprechen den Tokens: line = --accent, peak = --text-3, axis = --text-2, grid = --line, tick = --line-strong.
+// Einzige Stelle im Quelltext, an der Farbliterale ausserhalb von CSS erlaubt sind.
+export const CHART = {
+  line: '#111111',
+  fill: 'rgba(17,17,17,.06)',
+  peak: '#8a93a3',
+  axis: '#5e6678',
+  grid: '#ebeef1',
+  tick: '#d8dde3',
+}