schalli/tessera-ctl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 14 Wiki Activity

style(web): Modul-Kacheln einfarbig, Akzent nur fuer das Modul im Fokus

Browse Source 
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:
Schalli
2026-09-26 13:09:05 +02:00
parent 76520b2010
commit 228112014c
9 changed files with 138 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/app/(auth)/login/page.tsx
+11 -10
View File
@@ -44,7 +44,7 @@ export default function LoginPage() {
<div className="flex min-h-screen bg-background">
{/* Links (ab lg): dunkles Markenpanel im Ton der App-Leiste mit
grosser Bildmarke, Produktname, einem ruhigen Satz und einem
stillen Mosaik aus den Modulfarben — kein Verlauf, keine Animation. */}
stillen Mosaik in Grau und Gelb — kein Verlauf, keine Animation. */}
<div className="relative hidden w-[45%] shrink-0 flex-col overflow-hidden bg-appbar px-14 py-12 text-appbar-foreground lg:flex">
<TesseraLogo
variant="horizontal"
@@ -205,20 +205,21 @@ export default function LoginPage() {
}
/**
* Stilles Mosaik aus den Modulfarben (Design „Mosaik“): acht Kacheln in einem
* lockeren 4 x 3-Raster, eine davon in der Akzentfarbe und — wie die
* Stilles Mosaik (Design „Mosaik“): acht Kacheln in einem lockeren
* 4 x 3-Raster in Grautoenen, eine davon in der Akzentfarbe und — wie die
* Signalkachel der Bildmarke — leicht gedreht. Rein dekorativ.
*/
function LoginMosaic() {
// Runde 2: nur Gelb und Graphit-/Grautoene des dunklen Panels.
const tiles: { col: number; row: number; color: string; rotate?: boolean }[] = [
{ col: 1, row: 1, color: 'oklch(0.56 0.09 195)' },
{ col: 2, row: 1, color: 'oklch(0.55 0.14 292)' },
{ col: 4, row: 1, color: 'oklch(0.58 0.14 250)' },
{ col: 2, row: 2, color: 'oklch(0.62 0.135 68)' },
{ col: 1, row: 1, color: 'oklch(1 0 0 / 0.14)' },
{ col: 2, row: 1, color: 'oklch(1 0 0 / 0.08)' },
{ col: 4, row: 1, color: 'oklch(1 0 0 / 0.1)' },
{ col: 2, row: 2, color: 'oklch(1 0 0 / 0.18)' },
{ col: 3, row: 2, color: 'var(--primary)', rotate: true },
{ col: 4, row: 2, color: 'oklch(0.58 0.16 35)' },
{ col: 1, row: 3, color: 'oklch(0.58 0.12 150)' },
{ col: 3, row: 3, color: 'oklch(1 0 0 / 0.1)' },
{ col: 4, row: 2, color: 'oklch(1 0 0 / 0.06)' },
{ col: 1, row: 3, color: 'oklch(1 0 0 / 0.1)' },
{ col: 3, row: 3, color: 'oklch(1 0 0 / 0.05)' },
];
return (
<div aria-hidden="true" className="grid w-max grid-cols-4 grid-rows-3 gap-3">