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:
@@ -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),
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
Reference in New Issue
Block a user