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.test.tsx
+11 -6
View File
@@ -1,6 +1,6 @@
import { cleanup, render, screen } from '@testing-library/react';
import { afterEach, describe, expect, it, vi } from 'vitest';
import { BRAND_OLIVE, BRAND_YELLOW } from './brand';
import { BRAND_OLIVE, BRAND_OLIVE_FILL, BRAND_YELLOW } from './brand';
import { TesseraLogo } from './tessera-logo';
import de from '@/messages/de.json';
import en from '@/messages/en.json';
@@ -94,7 +94,7 @@ describe('TesseraLogo', () => {
expect(plate?.getAttribute('class')).not.toContain('dark:stroke-white/25');
});
it('renders exactly five tiles; only the rotated one is filled from the accent token with the brand yellow as fallback', () => {
it('renders exactly five tiles; the rotated one takes the accent token, the other four the derived olive tone with the fixed olive as fallback', () => {
render(<TesseraLogo variant="mark" />);
const mark = screen.getByRole('img', { name: 'Tessera Logo' });
@@ -111,10 +111,15 @@ describe('TesseraLogo', () => {
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();
// BRAND_OLIVE_FILL haengt selbst am --primary-Token — Zusicherung, dass
// die vier Kacheln wirklich daran haengen und nicht an einer festen Farbe.
expect(BRAND_OLIVE_FILL).toContain('var(--primary');
const derivedOliveTiles = tiles.filter((tile) => tile.style.fill === BRAND_OLIVE_FILL);
expect(derivedOliveTiles).toHaveLength(4);
for (const tile of derivedOliveTiles) {
expect(tile.getAttribute('fill')).toBe(BRAND_OLIVE);
expect(tile.hasAttribute('transform')).toBe(false);
}
});
});