mirror of
https://github.com/mudler/LocalAI.git
synced 2026-06-19 14:19:16 -04:00
e8cac3506b
Per design review, pivot the heading strategy from hybrid-serif to a refined grotesk: drop the Fraunces dependency, token, and import; page titles, the Home greeting, and section/empty-state titles now use Geist at semibold with the editorial fluid sizing and tight tracking. No serif anywhere. Active sidebar item is now a tint-only treatment (accent text + tinted background); the left accent rail is removed and the shared base .nav-item.active inset bar is suppressed in the sidebar (as the console rail already does). Update the design-system e2e specs to assert the sans display font and the tinted-background active state. Assisted-by: Claude:claude-opus-4-8 [Claude Code] Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
49 lines
2.4 KiB
JavaScript
49 lines
2.4 KiB
JavaScript
import { test, expect } from './coverage-fixtures.js'
|
|
|
|
test.describe('Editorial design system', () => {
|
|
test('page titles render in the sans display font (no serif)', async ({ page }) => {
|
|
await page.goto('/app/settings')
|
|
const title = page.locator('.page-title').first()
|
|
await expect(title).toBeVisible({ timeout: 15_000 })
|
|
const family = await title.evaluate(el => getComputedStyle(el).fontFamily)
|
|
// Editorial-grotesk direction: headings use the Geist sans family, no serif.
|
|
expect(family.toLowerCase()).toContain('geist')
|
|
expect(family.toLowerCase()).not.toContain('fraunces')
|
|
})
|
|
|
|
test('active nav item is highlighted with a tinted background (no rail)', async ({ page }) => {
|
|
await page.goto('/app/settings')
|
|
await expect(page.locator('.page-title').first()).toBeVisible({ timeout: 15_000 })
|
|
const active = page.locator('.sidebar-nav .nav-item.active').first()
|
|
await expect(active).toBeVisible()
|
|
const bg = await active.evaluate(el => getComputedStyle(el).backgroundColor)
|
|
// Tint-only active treatment: a non-transparent tinted background.
|
|
expect(bg).not.toBe('rgba(0, 0, 0, 0)')
|
|
expect(bg).not.toBe('transparent')
|
|
})
|
|
|
|
test('page reveal animation is defined on .page-transition', async ({ page }) => {
|
|
await page.goto('/app/settings')
|
|
const pt = page.locator('.page-transition').first()
|
|
await expect(pt).toBeVisible({ timeout: 15_000 })
|
|
const name = await pt.evaluate(el => getComputedStyle(el).animationName)
|
|
expect(name).toBe('pageReveal')
|
|
})
|
|
})
|
|
|
|
test.describe('reduced motion', () => {
|
|
test('stagger animation-delay is neutralized under reduced motion', async ({ page }) => {
|
|
// Emulate prefers-reduced-motion explicitly. (The fixture-option form
|
|
// test.use({ reducedMotion }) does not propagate through our extended
|
|
// coverage `page` fixture, so set it on the page directly.)
|
|
await page.emulateMedia({ reducedMotion: 'reduce' })
|
|
await page.goto('/app') // Home renders .reveal-stagger children
|
|
// .home-status-line is staggerStyle(1) -> 60ms delay without the fix.
|
|
const child = page.locator('.home-status-line').first()
|
|
await expect(child).toBeVisible({ timeout: 15_000 })
|
|
const delay = await child.evaluate(el => getComputedStyle(el).animationDelay)
|
|
// Under reduced motion the per-child delay must be ~0 (not 60ms+).
|
|
expect(parseFloat(delay)).toBeLessThan(0.05)
|
|
})
|
|
})
|