style(web): Modul-Kacheln einfarbig, Akzent nur fuer das Modul im Fokus
Statt bunter Modulfarben neutrale graue Kacheln; gelb (persoenliche Akzentfarbe) nur fuer den gewaehlten Eintrag der Seitenleiste und den Seitenkopf des Moduls. Schrift auf Akzentflaechen wird jetzt je nach Akzentfarbe hell oder dunkel gewaehlt (readableOnAccent). Anmelde- Mosaik und Dashboard-Hintergruende nur noch in Gelb, Grau, Graphit; Salbei ersetzt durch Kiesel. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import { normalizeHexColor } from './color';
|
||||
import { DARK_ON_ACCENT, LIGHT_ON_ACCENT, normalizeHexColor, readableOnAccent, relativeLuminance } from './color';
|
||||
|
||||
/**
|
||||
* color.test — Normalisierung der Hex-Eingabe der Akzentfarbe
|
||||
@@ -42,3 +42,31 @@ describe('normalizeHexColor', () => {
|
||||
expect(normalizeHexColor('#1234567')).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('readableOnAccent (Design „Mosaik“)', () => {
|
||||
const contrast = (a: string, b: string) => {
|
||||
const la = relativeLuminance(a);
|
||||
const lb = relativeLuminance(b);
|
||||
return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
|
||||
};
|
||||
|
||||
it('Markengelb und helle Akzente: dunkle Schrift', () => {
|
||||
expect(readableOnAccent('#ffed00')).toBe(DARK_ON_ACCENT);
|
||||
expect(readableOnAccent('#a8e6cf')).toBe(DARK_ON_ACCENT);
|
||||
});
|
||||
|
||||
it('dunkle Akzente: helle Schrift', () => {
|
||||
expect(readableOnAccent('#123456')).toBe(LIGHT_ON_ACCENT);
|
||||
expect(readableOnAccent('#6b21a8')).toBe(LIGHT_ON_ACCENT);
|
||||
});
|
||||
|
||||
it('haelt fuer eine Reihe von Akzenten mindestens 3:1 (Symbol auf der Kachel)', () => {
|
||||
for (const accent of ['#ffed00', '#123456', '#e11d48', '#0ea5e9', '#16a34a', '#777777', '#f97316']) {
|
||||
expect(contrast(accent, readableOnAccent(accent))).toBeGreaterThanOrEqual(3);
|
||||
}
|
||||
});
|
||||
|
||||
it('ungueltige Eingabe: dunkle Schrift', () => {
|
||||
expect(readableOnAccent('kein-hex')).toBe(DARK_ON_ACCENT);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -28,3 +28,37 @@ export function normalizeHexColor(input: string): string | null {
|
||||
|
||||
return `#${expanded.toLowerCase()}`;
|
||||
}
|
||||
|
||||
function channelToLinear(value: number): number {
|
||||
const c = value / 255;
|
||||
return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
|
||||
}
|
||||
|
||||
/** Relative Leuchtdichte (WCAG) einer kanonischen Hex-Farbe `#rrggbb`. */
|
||||
export function relativeLuminance(hex: string): number {
|
||||
const r = channelToLinear(Number.parseInt(hex.slice(1, 3), 16));
|
||||
const g = channelToLinear(Number.parseInt(hex.slice(3, 5), 16));
|
||||
const b = channelToLinear(Number.parseInt(hex.slice(5, 7), 16));
|
||||
return 0.2126 * r + 0.7152 * g + 0.0722 * b;
|
||||
}
|
||||
|
||||
/** Dunkle Schrift auf Akzentflaechen (entspricht --primary-foreground, #1f1c13). */
|
||||
export const DARK_ON_ACCENT = '#1f1c13';
|
||||
/** Helle Schrift auf dunklen Akzentflaechen. */
|
||||
export const LIGHT_ON_ACCENT = '#ffffff';
|
||||
|
||||
/**
|
||||
* Schriftfarbe fuer Flaechen in der persoenlichen Akzentfarbe (Knoepfe,
|
||||
* Modul-Kachel im Fokus): die Variante mit dem hoeheren Kontrast. Damit
|
||||
* bleibt auch eine dunkle Akzentfarbe lesbar (vorher stand immer dunkle
|
||||
* Schrift auf der Akzentflaeche). Ungueltige Eingaben ergeben dunkle Schrift.
|
||||
*/
|
||||
export function readableOnAccent(hex: string): string {
|
||||
const normalized = normalizeHexColor(hex);
|
||||
if (!normalized) return DARK_ON_ACCENT;
|
||||
const l = relativeLuminance(normalized);
|
||||
const dark = relativeLuminance(DARK_ON_ACCENT);
|
||||
const contrastDark = (l + 0.05) / (dark + 0.05);
|
||||
const contrastLight = (1 + 0.05) / (l + 0.05);
|
||||
return contrastLight > contrastDark ? LIGHT_ON_ACCENT : DARK_ON_ACCENT;
|
||||
}
|
||||
|
||||
@@ -2,14 +2,14 @@
|
||||
* Dashboard-Hintergrund (Prototyp, Design „Mosaik“).
|
||||
*
|
||||
* Wahl je Benutzer: kein Hintergrund, ein eingebauter (ruhige Flaechen und
|
||||
* drei abstrakte Motive in gedaempften Modulfarben — keine Regenbogen-
|
||||
* drei abstrakte Motive in Gelb, Grau und Graphit — keine Regenbogen-
|
||||
* verlaeufe) oder ein eigenes Bild aus den Bilderrahmen-Bildern
|
||||
* (`/dashboard/images`, keine API-Aenderung). Gespeichert wird vorerst im
|
||||
* localStorage des Browsers, Schluessel je Benutzerkennung; ein Datenbankfeld
|
||||
* kann folgen, wenn die Funktion bleibt.
|
||||
*/
|
||||
|
||||
export type BackgroundPresetId = 'mist' | 'sage' | 'bloom' | 'dunes' | 'mosaic';
|
||||
export type BackgroundPresetId = 'mist' | 'pebble' | 'bloom' | 'dunes' | 'mosaic';
|
||||
|
||||
export type DashboardBackground =
|
||||
| { kind: 'none' }
|
||||
@@ -46,22 +46,22 @@ function dunes(base: string, a: string, b: string, c: string): string {
|
||||
);
|
||||
}
|
||||
|
||||
function mosaic(base: string, alpha: number, yellowAlpha: number): string {
|
||||
const tiles: [number, number, string, number?][] = [
|
||||
[1060, 120, '#2a8f8f'],
|
||||
[1260, 120, '#7a5cc2'],
|
||||
[1260, 320, '#3a78c9'],
|
||||
[1060, 320, '#b37a1f'],
|
||||
[1460, 320, '#c65436'],
|
||||
[860, 520, '#3f8f5a'],
|
||||
[1260, 520, '#3a78c9'],
|
||||
[1460, 720, '#7a5cc2'],
|
||||
[1060, 720, '#2a8f8f'],
|
||||
function mosaic(base: string, gray: string, alphas: number[], yellowAlpha: number): string {
|
||||
const tiles: [number, number][] = [
|
||||
[1060, 120],
|
||||
[1260, 120],
|
||||
[1260, 320],
|
||||
[1060, 320],
|
||||
[1460, 320],
|
||||
[860, 520],
|
||||
[1260, 520],
|
||||
[1460, 720],
|
||||
[1060, 720],
|
||||
];
|
||||
const rects = tiles
|
||||
.map(
|
||||
([x, y, fill]) =>
|
||||
`<rect x="${x}" y="${y}" width="170" height="170" rx="34" fill="${fill}" fill-opacity="${alpha}"/>`,
|
||||
([x, y], i) =>
|
||||
`<rect x="${x}" y="${y}" width="170" height="170" rx="34" fill="${gray}" fill-opacity="${alphas[i % alphas.length]}"/>`,
|
||||
)
|
||||
.join('');
|
||||
return svgUrl(
|
||||
@@ -78,26 +78,27 @@ export interface BackgroundPreset {
|
||||
dark: string;
|
||||
}
|
||||
|
||||
// Runde 2: nur Gelb-, Grau- und Graphittoene — keine bunten Modulfarben.
|
||||
export const BACKGROUND_PRESETS: BackgroundPreset[] = [
|
||||
{ id: 'mist', labelKey: 'mist', light: '#e4e9f1', dark: '#1d2330' },
|
||||
{ id: 'sage', labelKey: 'sage', light: '#e3ebe6', dark: '#1c2521' },
|
||||
{ id: 'pebble', labelKey: 'pebble', light: '#e9e7e3', dark: '#23221f' },
|
||||
{
|
||||
id: 'bloom',
|
||||
labelKey: 'bloom',
|
||||
light: bloom('#e8ecf3', '#b7c7e6', '#bcdcd7', '#d4cbe9'),
|
||||
dark: bloom('#1b1f28', '#2a3a58', '#21403c', '#352e4d'),
|
||||
light: bloom('#eceef1', '#f0e9c6', '#d3d7de', '#dddbd5'),
|
||||
dark: bloom('#1b1d22', '#37342a', '#2a2e35', '#2f2e2a'),
|
||||
},
|
||||
{
|
||||
id: 'dunes',
|
||||
labelKey: 'dunes',
|
||||
light: dunes('#e6ebef', '#d3dde3', '#c1cfd8', '#aebfca'),
|
||||
dark: dunes('#1a1f25', '#212930', '#28323a', '#303c45'),
|
||||
light: dunes('#eceef1', '#dcdfe4', '#caced5', '#b8bdc6'),
|
||||
dark: dunes('#1a1c20', '#23262b', '#2c3036', '#363a41'),
|
||||
},
|
||||
{
|
||||
id: 'mosaic',
|
||||
labelKey: 'mosaic',
|
||||
light: mosaic('#eceff3', 0.16, 0.35),
|
||||
dark: mosaic('#1b1f26', 0.24, 0.3),
|
||||
light: mosaic('#eceef1', '#5b6270', [0.1, 0.16, 0.07, 0.13], 0.4),
|
||||
dark: mosaic('#1b1d22', '#c9ced8', [0.06, 0.1, 0.04, 0.08], 0.78),
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
@@ -1,53 +1,23 @@
|
||||
/**
|
||||
* Modul-Identitaet (Design „Mosaik“): jedes Modul bekommt eine feste Farbe
|
||||
* und ein Symbol — wie die App-Kacheln bei Microsoft 365. Die Kachel wird in
|
||||
* der Seitenleiste (20 px), auf den Marktplatz-Karten (40 px) und im Kopf der
|
||||
* Modulseiten (36 px) gezeigt, immer mit weissem Symbol.
|
||||
*
|
||||
* Kontrast weisses Symbol gegen Kachel (WCAG, gemessen): tender-radar 3,8:1
|
||||
* (Ockerton gegenueber dem Entwurf oklch(0.68 0.14 70) = 2,96:1 abgedunkelt),
|
||||
* dkv-fleet 4,5:1, cert-manager 5,1:1, domaincheck 4,3:1, proxmox 4,6:1,
|
||||
* Reserve gruen 4,1:1, Reserve pink 4,3:1 — alle ueber den geforderten 3:1
|
||||
* fuer grafische Elemente.
|
||||
* Modul-Identitaet (Design „Mosaik“, Runde 2): jedes Modul hat ein festes
|
||||
* Symbol. Die Kacheln sind einfarbig ins Erscheinungsbild eingebunden —
|
||||
* neutral grau im Normalfall, in der Akzentfarbe (Standard Gelb) nur dort,
|
||||
* wo das Modul gerade im Fokus steht (gewaehlter Eintrag der Seitenleiste,
|
||||
* Seitenkopf des Moduls). Farben stehen als Tokens in globals.css
|
||||
* (`--tile`, `--tile-foreground`, `--primary`, `--primary-foreground`).
|
||||
*/
|
||||
|
||||
export type ModuleIconId =
|
||||
| 'radar'
|
||||
| 'fuel'
|
||||
| 'certificate'
|
||||
| 'globe'
|
||||
| 'server'
|
||||
| 'tile';
|
||||
export type ModuleIconId = 'radar' | 'fuel' | 'certificate' | 'globe' | 'server' | 'tile';
|
||||
|
||||
export interface ModuleIdentity {
|
||||
/** Kachelfarbe als OKLCH-Farbwert. */
|
||||
color: string;
|
||||
/** Symbol auf der Kachel. */
|
||||
icon: ModuleIconId;
|
||||
}
|
||||
|
||||
const KNOWN: Record<string, ModuleIdentity> = {
|
||||
'tender-radar': { color: 'oklch(0.62 0.135 68)', icon: 'radar' },
|
||||
'dkv-fleet': { color: 'oklch(0.56 0.09 195)', icon: 'fuel' },
|
||||
'cert-manager': { color: 'oklch(0.55 0.14 292)', icon: 'certificate' },
|
||||
domaincheck: { color: 'oklch(0.58 0.14 250)', icon: 'globe' },
|
||||
proxmox: { color: 'oklch(0.58 0.16 35)', icon: 'server' },
|
||||
const ICONS: Record<string, ModuleIconId> = {
|
||||
'tender-radar': 'radar',
|
||||
'dkv-fleet': 'fuel',
|
||||
'cert-manager': 'certificate',
|
||||
domaincheck: 'globe',
|
||||
proxmox: 'server',
|
||||
};
|
||||
|
||||
/** Reservefarben fuer unbekannte Module (stabil per Kennungs-Hash). */
|
||||
const RESERVE = ['oklch(0.58 0.12 150)', 'oklch(0.60 0.15 350)'] as const;
|
||||
|
||||
function stableHash(value: string): number {
|
||||
let hash = 0;
|
||||
for (let i = 0; i < value.length; i++) {
|
||||
hash = (hash * 31 + value.charCodeAt(i)) >>> 0;
|
||||
}
|
||||
return hash;
|
||||
}
|
||||
|
||||
/** Farbe und Symbol eines Moduls; unbekannte Kennungen bekommen stabil eine Reservefarbe. */
|
||||
export function getModuleIdentity(slug: string): ModuleIdentity {
|
||||
const known = KNOWN[slug];
|
||||
if (known) return known;
|
||||
return { color: RESERVE[stableHash(slug) % RESERVE.length], icon: 'tile' };
|
||||
/** Symbol eines Moduls; unbekannte Module bekommen das allgemeine Kachel-Symbol. */
|
||||
export function getModuleIcon(slug: string): ModuleIconId {
|
||||
return ICONS[slug] ?? 'tile';
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { create } from 'zustand';
|
||||
import { readableOnAccent } from '@/lib/color';
|
||||
|
||||
export interface AuthUser {
|
||||
id: string;
|
||||
@@ -31,8 +32,11 @@ function applyAccentColor(color: string | null | undefined) {
|
||||
root.style.removeProperty('--sidebar-accent-foreground');
|
||||
if (color) {
|
||||
root.style.setProperty('--primary', color);
|
||||
// Schrift auf der Akzentflaeche: hell oder dunkel, je nach Kontrast.
|
||||
root.style.setProperty('--primary-foreground', readableOnAccent(color));
|
||||
} else {
|
||||
root.style.removeProperty('--primary');
|
||||
root.style.removeProperty('--primary-foreground');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user