dejanandClaude Opus 5
0875ae2688
Recherche an der Quelle statt an der Dokumentation. Zwei Ergebnisse: 1. Carbon regelt Datenvisualisierung nur teilweise. Farben, Gitter, Achsen, Tooltip und Tickanzahl sind verbindlich festgelegt — Paddings, Margins und Dashboard-Raster dagegen NICHT. Die Carbon-Seiten zu Chart-Anatomie und Dashboards tragen ausdrücklich den Hinweis "this guidance is a work in progress" und enthalten keine Zahlenwerte. Unsere Abstandswerte stammen deshalb aus der Carbon-Spacing-Skala und der Planung mit dem Branchenpartner, nicht aus der Data-Viz-Norm. Das steht jetzt so in DESIGN-SYSTEM.md §0. 2. Eine echte Abweichung gefunden: Der Tooltip ist seit Carbon v11 hell (--cds-layer-02 #ffffff auf --cds-text-primary #161616, abgesetzt allein durch den Schatten). Unser Theme führte den dunklen v10-Stand (#393939) und berief sich dabei auf das ausgelieferte Stylesheet — die Angabe war veraltet. Korrigiert. Neu: - docs/carbon-referenz.json — kanonische Werte mit Quelle, Version und Prüfdatum, gezogen aus @carbon/charts 1.23.0 styles.min.css und configuration.ts. Bewusste Abweichungen (Balkenbreite 48 statt 16, feste Kategoriefarben statt n-Serien-Paletten) sind dort begründet. - scripts/verify-carbon.mjs + npm run verify:carbon — gleicht chartTheme.ts gegen die Referenz ab und bricht bei Drift ab. - docs/PRUEFFRAGEN.md — Prüffragen für die Gestaltungsabnahme mit nachprüfbarem Ja/Nein, plus Leseliste (FT Visual Vocabulary, IBCS, Cleveland & McGill, Few, Datawrapper Academy). Die 14er-Palette wurde gegen die CSS-Variablen --cds-charts-14-1-* geprüft und stimmt exakt; ebenso Gitter #e0e0e0, Achse #8d8d8d und Achsentext #525252. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
74 lines
2.9 KiB
JSON
74 lines
2.9 KiB
JSON
{
|
|
"$kommentar": [
|
|
"Kanonische IBM-Carbon-Werte, gegen die dieses Dashboard geprüft wird.",
|
|
"Quelle ist NICHT die Dokumentation, sondern das ausgelieferte Stylesheet und die",
|
|
"Default-Konfiguration von @carbon/charts — Doku und Code weichen voneinander ab.",
|
|
"Geprüft von scripts/verify-carbon.mjs (npm run verify:carbon).",
|
|
"Beim Aktualisieren: Werte neu aus der Quelle ziehen, nicht abtippen."
|
|
],
|
|
"quelle": {
|
|
"stylesheet": "https://cdn.jsdelivr.net/npm/@carbon/charts@1.23.0/styles.min.css",
|
|
"konfiguration": "https://github.com/carbon-design-system/carbon-charts/blob/master/packages/core/src/configuration.ts",
|
|
"geprueftAm": "2026-08-29",
|
|
"version": "@carbon/charts 1.23.0"
|
|
},
|
|
|
|
"kategorialePalette": {
|
|
"herkunft": "CSS-Variablen --cds-charts-14-1-1 bis --cds-charts-14-1-14",
|
|
"regel": "Reihenfolge ist verbindlich, Farben immer von vorne vergeben",
|
|
"werte": [
|
|
"#6929c4",
|
|
"#1192e8",
|
|
"#005d5d",
|
|
"#9f1853",
|
|
"#fa4d56",
|
|
"#520408",
|
|
"#198038",
|
|
"#002d9c",
|
|
"#ee5396",
|
|
"#b28600",
|
|
"#009d9a",
|
|
"#012749",
|
|
"#8a3800",
|
|
"#a56eff"
|
|
]
|
|
},
|
|
|
|
"neutraleWerte": {
|
|
"gitterlinie": { "wert": "#e0e0e0", "token": "--cds-layer-accent-01" },
|
|
"achsenlinie": { "wert": "#8d8d8d", "token": "--cds-border-strong-01" },
|
|
"achsenbeschriftung": { "wert": "#525252", "token": "--cds-text-secondary" },
|
|
"textPrimaer": { "wert": "#161616", "token": "--cds-text-primary" }
|
|
},
|
|
|
|
"tooltip": {
|
|
"herkunft": ".cds--cc--tooltip und .content-box im Stylesheet",
|
|
"hintergrund": { "wert": "#ffffff", "token": "--cds-layer-02" },
|
|
"text": { "wert": "#161616", "token": "--cds-text-primary" },
|
|
"schatten": "0 1px 6px 0 rgba(0,0,0,.2)",
|
|
"schriftgroessePx": 12,
|
|
"maxBreitePx": 270,
|
|
"hinweis": "Bis Carbon v10 war der Tooltip dunkel (#393939). Seit v11 ist er hell."
|
|
},
|
|
|
|
"achsen": {
|
|
"herkunft": "configuration.ts",
|
|
"ticksYAchse": 5,
|
|
"ticksXAchse": 15
|
|
},
|
|
|
|
"bewusstAbweichend": {
|
|
"$kommentar": "Werte, die wir kennen und absichtlich anders setzen. Der Prüfer meldet sie als Abweichung mit Begründung, nicht als Fehler.",
|
|
"balkenMaxBreitePx": {
|
|
"carbon": 16,
|
|
"hier": 48,
|
|
"grund": "Carbons 16 px sind auf dichte Mehrreihen-Charts ausgelegt. Unsere Balken zeigen vier bis sechs Kategorien in einer breiten Karte; 16 px wirken dort wie Striche. Die Regel 'Abstand ≥ halbe Balkenbreite' bleibt eingehalten."
|
|
},
|
|
"festeKategorieFarben": {
|
|
"carbon": "n-Serien-Paletten (--cds-charts-2-*, -3-*, -4-*, -5-*) je nach Anzahl der Reihen",
|
|
"hier": "feste Farbe je Gewerk und je Status über alle Charts hinweg",
|
|
"grund": "Carbons n-Serien-Paletten optimieren den Kontrast innerhalb EINES Charts. Über mehrere Charts hinweg würde Heizung dadurch die Farbe wechseln. Wiedererkennbarkeit schlägt hier Binnenkontrast."
|
|
}
|
|
}
|
|
}
|