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

feat(brand): ganzes T der Bildmarke übernimmt die Akzentfarbe – Kacheln als abgeleiteter dunklerer Ton

Browse Source 
- BRAND_OLIVE_MIX (54 %, #363636) und BRAND_OLIVE_FILL in brand.ts, Kalibrierung kommentiert
- vier achsenparallele Kacheln in tessera-logo.tsx: Inline-Style BRAND_OLIVE_FILL, festes Oliv-Attribut als Rückfall
- brand.test.ts (neu): rechnet Kalibrierung, Neutralität und Grenzfälle aus denselben Konstanten nach
- tessera-logo.test.tsx: Kacheltest auf Token-Fuellung (1x) und abgeleitete Fuellung (4x) umgestellt

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Schalli
2026-09-17 14:18:58 +02:00
parent 38c14005c6
commit ecff144449
4 changed files with 266 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/brand/tessera-logo.tsx
+54 -14
View File
@@ -1,7 +1,7 @@
'use client';
import { useTranslations } from 'next-intl';
import { BRAND_OLIVE, BRAND_PLATE, BRAND_YELLOW } from './brand';
import { BRAND_OLIVE, BRAND_OLIVE_FILL, BRAND_PLATE, BRAND_YELLOW } from './brand';
export type TesseraLogoVariant = 'mark' | 'horizontal';
@@ -66,16 +66,39 @@ function LogoMark({
: 'stroke-transparent'
}
/>
{/*
Alle fuenf Kacheln folgen `--primary`: die gedrehte Signalkachel
direkt, die vier anderen als abgeleiteter dunklerer Ton
(BRAND_OLIVE_FILL, Kalibrierung in brand.ts). `var()`/`color-mix()`
sind in SVG-Praesentationsattributen nicht zuverlaessig, im
Inline-Style schon -- deshalb tragen alle fuenf Kacheln ihre
Akzentfarben-Fuellung als Inline-Style. Der feste Olivton bleibt an
den vier Kacheln zusaetzlich als Praesentationsattribut stehen: ein
Browser ohne `color-mix()`-Unterstuetzung verwirft die
Inline-Deklaration, und ohne dieses Attribut waere die Kachel
schwarz (SVG-Standardfuellung). `--primary` wird von
applyAccentColor() in auth-store.ts gesetzt und hat in globals.css
immer einen Standardwert (oklch(0.91 0.19 102), Markengelb).
*/}
<g>
<rect x="16" y="16" width="12" height="12" rx="2.5" fill={BRAND_OLIVE} />
<rect x="30" y="16" width="12" height="12" rx="2.5" fill={BRAND_OLIVE} />
{/*
`var()` ist in SVG-Praesentationsattributen (fill="...") nicht
zuverlaessig, im Inline-Style schon — deshalb hier style statt fill.
`--primary` wird von applyAccentColor() in auth-store.ts gesetzt;
ohne angemeldeten Nutzer (z. B. Anmeldeseite) ist der Token nicht
definiert und der Rueckfall in var() greift: BRAND_YELLOW.
*/}
<rect
x="16"
y="16"
width="12"
height="12"
rx="2.5"
fill={BRAND_OLIVE}
style={{ fill: BRAND_OLIVE_FILL }}
/>
<rect
x="30"
y="16"
width="12"
height="12"
rx="2.5"
fill={BRAND_OLIVE}
style={{ fill: BRAND_OLIVE_FILL }}
/>
<rect
x="45"
y="15"
@@ -85,8 +108,24 @@ function LogoMark({
transform="rotate(12 51 21)"
style={{ fill: `var(--primary, ${BRAND_YELLOW})` }}
/>
<rect x="30" y="30" width="12" height="12" rx="2.5" fill={BRAND_OLIVE} />
<rect x="30" y="44" width="12" height="12" rx="2.5" fill={BRAND_OLIVE} />
<rect
x="30"
y="30"
width="12"
height="12"
rx="2.5"
fill={BRAND_OLIVE}
style={{ fill: BRAND_OLIVE_FILL }}
/>
<rect
x="30"
y="44"
width="12"
height="12"
rx="2.5"
fill={BRAND_OLIVE}
style={{ fill: BRAND_OLIVE_FILL }}
/>
</g>
</svg>
);
@@ -98,8 +137,9 @@ function LogoMark({
* mandantenspezifische Gestaltung setzt hier an, nicht an den einzelnen
* Verwendungsstellen.
*
* Die gedrehte Signalkachel der Bildmarke folgt der persoenlichen
* Akzentfarbe (CSS-Token `--primary`, siehe LogoMark).
* Die gesamte Bildmarke folgt der persoenlichen Akzentfarbe (CSS-Token
* `--primary`, siehe LogoMark): die gedrehte Signalkachel direkt, die vier
* anderen als daraus abgeleiteter dunklerer Ton (siehe brand.ts).
*/
export function TesseraLogo({
variant = 'horizontal',