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

feat(brand): gedrehte Kachel der Bildmarke übernimmt die Akzentfarbe

Browse Source 
- LogoMark: gedrehte Signalkachel per Inline-Style fill: var(--primary, BRAND_YELLOW) statt festem fill-Attribut
- folgt damit der persoenlichen Akzentfarbe (applyAccentColor in auth-store.ts) in Kopfzeile, Seitenleiste und leerem Dashboard; ohne Nutzer (Anmeldeseite) gilt der CSS-Standard Markengelb
- brand.ts: Kommentar zu BRAND_YELLOW als Rueckfallwert ergaenzt
- tessera-logo.test.tsx: Kacheltest auf Inline-Style-Fuellung umgeschrieben (jsdom haelt var() in style.fill)

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Schalli
2026-09-17 12:15:33 +02:00
parent 795c6a492c
commit 1601d97f62
3 changed files with 32 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/brand/tessera-logo.test.tsx
+15 -5
View File
@@ -1,6 +1,6 @@
import { cleanup, render, screen } from '@testing-library/react';
import { afterEach, describe, expect, it, vi } from 'vitest';
import { BRAND_YELLOW } from './brand';
import { BRAND_OLIVE, BRAND_YELLOW } from './brand';
import { TesseraLogo } from './tessera-logo';
import de from '@/messages/de.json';
import en from '@/messages/en.json';
@@ -94,18 +94,28 @@ describe('TesseraLogo', () => {
expect(plate?.getAttribute('class')).not.toContain('dark:stroke-white/25');
});
it('renders exactly five tiles, exactly one in the brand yellow and exactly one rotated', () => {
it('renders exactly five tiles; only the rotated one is filled from the accent token with the brand yellow as fallback', () => {
render(<TesseraLogo variant="mark" />);
const mark = screen.getByRole('img', { name: 'Tessera Logo' });
const tiles = Array.from(mark.querySelectorAll('g rect'));
const tiles = Array.from(mark.querySelectorAll('g rect')) as SVGRectElement[];
expect(tiles).toHaveLength(5);
const yellowTiles = tiles.filter((tile) => tile.getAttribute('fill') === BRAND_YELLOW);
expect(yellowTiles).toHaveLength(1);
const accentTiles = tiles.filter((tile) => tile.style.fill === `var(--primary, ${BRAND_YELLOW})`);
expect(accentTiles).toHaveLength(1);
expect(accentTiles[0].hasAttribute('transform')).toBe(true);
const rotatedTiles = tiles.filter((tile) => tile.hasAttribute('transform'));
expect(rotatedTiles).toHaveLength(1);
const presentationYellowTiles = tiles.filter((tile) => tile.getAttribute('fill') === BRAND_YELLOW);
expect(presentationYellowTiles).toHaveLength(0);
const oliveTiles = tiles.filter((tile) => tile.getAttribute('fill') === BRAND_OLIVE);
expect(oliveTiles).toHaveLength(4);
for (const tile of oliveTiles) {
expect(tile.getAttribute('style')).toBeNull();
}
});
});