apunkt/trustgraph
1
0
Fork 0
mirror of https://github.com/trustgraph-ai/trustgraph.git synced 2026-07-01 09:29:38 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix: global focus-visible rings and light-mode border contrast

Browse source 
- Add global focus-visible outline for buttons, switches, selects, and
  inputs so all interactive elements show a visible brand-500 ring on
  keyboard focus (not just NavLinks and dialog close)
- Darken light-mode --color-border from #e4e4e7 to #d4d4d8 so input
  borders, dividers, and mode selector outlines are visible on white

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
elpresidank 2026-04-11 23:28:38 -05:00
parent d097b790ff
commit 338adf8668
1 changed files with 19 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

21
ts/packages/workbench/src/index.css
View file

@ -97,6 +97,23 @@
} }
} }
/* Global focus-visible for interactive elements */
@layer base {
button:focus-visible,
[role="switch"]:focus-visible,
select:focus-visible {
outline: 2px solid var(--color-brand-500);
outline-offset: 2px;
border-radius: 0.375rem;
}
input:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--color-brand-500);
outline-offset: 0;
}
}
/* Prose overrides for theme-aware markdown rendering */ /* Prose overrides for theme-aware markdown rendering */
@layer base { @layer base {
.prose code { .prose code {
@ -121,8 +138,8 @@ html.light {
--color-fg-muted: #52525b; --color-fg-muted: #52525b;
--color-fg-subtle: #71717a; --color-fg-subtle: #71717a;
--color-border: #e4e4e7; --color-border: #d4d4d8;
--color-border-hover: #d4d4d8; --color-border-hover: #a1a1aa;
/* Brand adjustments for light backgrounds */ /* Brand adjustments for light backgrounds */
--color-brand-300: #3b63ed; --color-brand-300: #3b63ed;