gortium/openconcho
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve dark mode accessibility contrast

Browse Source
This commit is contained in:
Offending Commit
2026-05-12 09:49:27 -05:00
parent 3d1bb4c93c
commit 7827438d92
5 changed files with 63 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/web/src/components/shared/Badge.tsx
View File

@@ -25,7 +25,7 @@ const variantStyles: Record<string, React.CSSProperties> = {
border: "1px solid rgba(239,68,68,0.2)",
},
blue: {
background: "rgba(99,102,241,0.08)",
background: "var(--accent-subtle)",
color: "var(--accent-text)",
border: "1px solid var(--accent-border)",
},

4
packages/web/src/components/ui/button.tsx
View File

@@ -6,7 +6,7 @@ import { cn } from "@/lib/utils";
const buttonVariants = cva(
[
"inline-flex items-center justify-center gap-1.5 rounded-lg font-medium transition-all",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-1)]",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg)]",
"disabled:opacity-50 disabled:pointer-events-none",
],
{
@@ -24,7 +24,7 @@ const buttonVariants = cva(
"focus-visible:ring-[var(--border)]",
],
ghost: [
"[color:var(--text-3)]",
"[color:var(--text-2)]",
"hover:[background:var(--surface)]",
"focus-visible:ring-[var(--border)]",
],

4
packages/web/src/components/ui/typography.tsx
View File

@@ -85,7 +85,7 @@ export function Caption<T extends React.ElementType = "span">({
}: Props<T>) {
const Tag = (as ?? "span") as React.ElementType;
return (
<Tag className={cn("text-xs", className)} style={{ color: "var(--text-4)" }} {...rest}>
<Tag className={cn("text-xs", className)} style={{ color: "var(--text-3)" }} {...rest}>
{children}
</Tag>
);
@@ -101,7 +101,7 @@ export function MonoCaption<T extends React.ElementType = "span">({
return (
<Tag
className={cn("text-xs font-mono", className)}
style={{ color: "var(--text-4)" }}
style={{ color: "var(--text-3)" }}
{...rest}
>
{children}