mirror/LocalAI
1
0
Fork 0
mirror of https://github.com/mudler/LocalAI.git synced 2026-06-18 13:49:09 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): serif display tier + section-heading typography scale

Browse Source 
Assisted-by: Claude:claude-opus-4-8 [Claude Code]
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
This commit is contained in:
Ettore Di Giacinto
2026-06-18 09:55:26 +00:00
parent 9110002592
commit b5d8992531
3 changed files with 28 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
core/http/react-ui/e2e/design-system.spec.js Normal file
View File

@@ -0,0 +1,11 @@
import { test, expect } from './coverage-fixtures.js'
test.describe('Editorial design system', () => {
test('page titles render in the Fraunces 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)
expect(family.toLowerCase()).toContain('fraunces')
})
})

18
core/http/react-ui/src/App.css
View File

@@ -1118,14 +1118,26 @@
}
.page-title {
font-size: var(--text-2xl);
font-weight: var(--font-weight-semibold);
letter-spacing: -0.015em;
font-family: var(--font-serif);
font-size: clamp(1.5rem, 1.15rem + 1.4vw, var(--text-3xl));
font-weight: 480;
letter-spacing: -0.018em;
line-height: var(--leading-tight);
margin-bottom: var(--spacing-xs);
color: var(--color-text-primary);
}
/* Mid hierarchy tier — between page title and the xs uppercase group labels */
.section-heading {
font-family: var(--font-sans);
font-size: var(--text-lg);
font-weight: var(--font-weight-medium);
letter-spacing: -0.005em;
line-height: var(--leading-snug);
color: var(--color-text-primary);
margin: 0;
}
.page-subtitle {
font-size: var(--text-sm);
color: var(--color-text-secondary);

4
core/http/react-ui/src/index.css
View File

@@ -53,8 +53,8 @@ h1, h2, h3, h4, h5, h6 {
color: var(--color-text-primary);
line-height: var(--leading-tight);
}
h1 { font-size: var(--text-3xl); font-weight: var(--font-weight-medium); letter-spacing: -0.02em; }
h2 { font-size: var(--text-2xl); font-weight: var(--font-weight-medium); letter-spacing: -0.015em; }
h1 { font-family: var(--font-serif); font-size: clamp(1.75rem, 1.2rem + 2.4vw, var(--text-4xl)); font-weight: 480; letter-spacing: -0.02em; }
h2 { font-family: var(--font-serif); font-size: clamp(1.4rem, 1.05rem + 1.6vw, var(--text-3xl)); font-weight: 480; letter-spacing: -0.015em; }
h3 { font-size: var(--text-xl); font-weight: var(--font-weight-medium); letter-spacing: -0.01em; }
h4 { font-size: var(--text-lg); font-weight: var(--font-weight-medium); letter-spacing: -0.005em; }
h5 { font-size: var(--text-base);font-weight: var(--font-weight-semibold); }