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): un-overload accent — nav rail, stronger focus ring, neutral hover

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 10:00:20 +00:00
parent b5d8992531
commit 53af1807b6
3 changed files with 27 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
core/http/react-ui/e2e/design-system.spec.js
View File

@@ -8,4 +8,13 @@ test.describe('Editorial design system', () => {
const family = await title.evaluate(el => getComputedStyle(el).fontFamily)
expect(family.toLowerCase()).toContain('fraunces')
})
test('active nav item shows a left accent rail (box-shadow), not just a tint', 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 shadow = await active.evaluate(el => getComputedStyle(el).boxShadow)
expect(shadow).not.toBe('none')
})
})

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

@@ -352,9 +352,10 @@
border-radius: var(--radius-lg);
}
.sidebar-nav .nav-item.active {
background: var(--color-primary-light);
color: var(--color-primary);
box-shadow: none;
background: var(--color-surface-hover);
color: var(--color-text-primary);
font-weight: var(--font-weight-medium);
box-shadow: inset 3px 0 0 var(--color-nav-rail);
}
.sidebar-nav .nav-item.active .nav-icon { color: var(--color-primary); }
/* Align tier labels with the inset item text (item margin + icon padding). */
@@ -1624,6 +1625,13 @@
border-radius: var(--radius-sm);
}
/* Solid outline fallback so the focus ring stays AA-visible (>=3:1) on every
interactive element, including those that clip or override box-shadow. */
:focus-visible {
outline: 2px solid var(--color-focus-ring);
outline-offset: 2px;
}
.btn-primary {
background: var(--color-primary);
color: var(--color-primary-text);
@@ -2390,7 +2398,7 @@ select.input {
}
.table tr:hover td {
background: var(--color-primary-light);
background: var(--color-surface-hover);
}
/* Toggle switch */

8
core/http/react-ui/src/theme.css
View File

@@ -64,7 +64,9 @@
--color-modal-backdrop: rgba(8, 11, 17, 0.68);
--color-focus-ring: rgba(136, 192, 208, 0.34);
--color-focus-ring: rgba(136, 192, 208, 0.7); /* was 0.34 - AA-visible */
--color-nav-rail: var(--color-primary);
--color-eyebrow: #d8b48c; /* muted Nord-aurora brass for editorial eyebrows */
/* Data viz — full aurora + frost palette */
--color-data-1: #88c0d0; /* frost cyan */
@@ -219,7 +221,9 @@
--color-modal-backdrop: rgba(46, 52, 64, 0.38);
--color-focus-ring: rgba(94, 129, 172, 0.34);
--color-focus-ring: rgba(94, 129, 172, 0.6); /* was 0.34 */
--color-nav-rail: var(--color-primary);
--color-eyebrow: #9a6b3f; /* darker brass for contrast on snow storm */
/* Data viz — muted aurora for light mode */
--color-data-1: #5e81ac;