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

Merge branch 'main' into codex/page-loading-placeholders

Browse Source 
Signed-off-by: Offending Commit <offendingcommit@gmail.com>
This commit is contained in:
Offending Commit
2026-05-12 10:08:10 -05:00
committed by GitHub
parent 3075e4a005 9cc7d08ea1
commit 57b7ff3ad3
5 changed files with 63 additions and 47 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}

70
packages/web/src/index.css
View File

@@ -28,32 +28,41 @@
/* ─── Theme tokens ─── */
:root,
[data-theme="dark"] {
--bg: #0c0c10;
--bg-2: #111118;
--bg-3: #1a1a24;
--surface: rgba(255, 255, 255, 0.03);
--border: rgba(255, 255, 255, 0.08);
--border-2: rgba(255, 255, 255, 0.13);
--text-1: #e8e8f4;
--text-2: #94a3b8;
--text-3: #64748b;
--text-4: #475569;
color-scheme: dark;
--bg: #0b0d12;
--bg-2: #121722;
--bg-3: #1b2331;
--surface: rgba(148, 163, 184, 0.08);
--border: rgba(148, 163, 184, 0.18);
--border-2: rgba(148, 163, 184, 0.28);
--text-1: #f3f6ff;
--text-2: #c3cddd;
--text-3: #95a4bb;
--text-4: #7787a0;
--accent: #6366f1;
--accent-dim: rgba(99, 102, 241, 0.15);
--accent-border: rgba(99, 102, 241, 0.35);
--accent-text: #a5b4fc;
--skeleton-base: rgba(255, 255, 255, 0.06);
--skeleton-highlight: rgba(255, 255, 255, 0.12);
--skeleton-accent-base: rgba(99, 102, 241, 0.12);
--skeleton-accent-highlight: rgba(99, 102, 241, 0.2);
--sidebar-bg: linear-gradient(180deg, #111118 0%, #0e0e15 100%);
--grid-line: rgba(99, 102, 241, 0.03);
--glow: rgba(79, 70, 229, 0.08);
--accent-text: #d6ddff;
--accent-soft: #c7d2fe;
--accent-dim: rgba(129, 140, 248, 0.18);
--accent-dim-hover: rgba(129, 140, 248, 0.24);
--accent-subtle: rgba(129, 140, 248, 0.14);
--accent-muted: #a5b4fc;
--accent-glow: rgba(129, 140, 248, 0.4);
--accent-border: rgba(129, 140, 248, 0.4);
--accent-border-strong: rgba(165, 180, 252, 0.56);
--accent-spinner-track: rgba(129, 140, 248, 0.26);
--dim-text: #a7b4c8;
--dim-icon: rgba(167, 180, 200, 0.75);
--card-base-bg: rgba(148, 163, 184, 0.08);
--card-base-border: rgba(148, 163, 184, 0.18);
--sidebar-bg: linear-gradient(180deg, #121722 0%, #0d1017 100%);
--grid-line: rgba(129, 140, 248, 0.05);
--glow: rgba(99, 102, 241, 0.1);
--scrollbar: rgba(99, 102, 241, 0.2);
--card-hover: rgba(99, 102, 241, 0.06);
--card-hover: rgba(129, 140, 248, 0.12);
}
[data-theme="light"] {
color-scheme: light;
--bg: #f8f8fc;
--bg-2: #ffffff;
--bg-3: #f0f0f8;
@@ -65,13 +74,20 @@
--text-3: #6b7280;
--text-4: #9ca3af;
--accent: #4f46e5;
--accent-dim: rgba(79, 70, 229, 0.08);
--accent-border: rgba(79, 70, 229, 0.25);
--accent-text: #4f46e5;
--skeleton-base: rgba(15, 23, 42, 0.06);
--skeleton-highlight: rgba(15, 23, 42, 0.1);
--skeleton-accent-base: rgba(79, 70, 229, 0.08);
--skeleton-accent-highlight: rgba(79, 70, 229, 0.14);
--accent-soft: #6366f1;
--accent-dim: rgba(79, 70, 229, 0.08);
--accent-dim-hover: rgba(79, 70, 229, 0.12);
--accent-subtle: rgba(79, 70, 229, 0.1);
--accent-muted: #6366f1;
--accent-glow: rgba(79, 70, 229, 0.28);
--accent-border: rgba(79, 70, 229, 0.25);
--accent-border-strong: rgba(79, 70, 229, 0.35);
--accent-spinner-track: rgba(79, 70, 229, 0.18);
--dim-text: #4b5563;
--dim-icon: rgba(75, 85, 99, 0.6);
--card-base-bg: rgba(15, 23, 42, 0.03);
--card-base-border: rgba(15, 23, 42, 0.08);
--sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f4f4fc 100%);
--grid-line: rgba(79, 70, 229, 0.04);
--glow: rgba(79, 70, 229, 0.06);

30
packages/web/src/lib/constants.ts
View File

@@ -17,27 +17,27 @@ export const COLOR = {
destructiveBorder: "rgba(239,68,68,0.2)",
// Accent (indigo — matches --accent CSS var)
accent: "#6366f1",
accentText: "#818cf8",
accentSoft: "#c7d2fe",
accentDim: "rgba(99,102,241,0.08)",
accentDimHover: "rgba(99,102,241,0.06)",
accentSubtle: "rgba(99,102,241,0.1)",
accentMuted: "rgba(99,102,241,0.6)",
accentGlow: "rgba(99,102,241,0.4)",
accentBorder: "rgba(99,102,241,0.2)",
accentBorderStrong: "rgba(99,102,241,0.15)",
accentSpinnerTrack: "rgba(99,102,241,0.15)",
accent: "var(--accent)",
accentText: "var(--accent-text)",
accentSoft: "var(--accent-soft)",
accentDim: "var(--accent-dim)",
accentDimHover: "var(--accent-dim-hover)",
accentSubtle: "var(--accent-subtle)",
accentMuted: "var(--accent-muted)",
accentGlow: "var(--accent-glow)",
accentBorder: "var(--accent-border)",
accentBorderStrong: "var(--accent-border-strong)",
accentSpinnerTrack: "var(--accent-spinner-track)",
// Neutral dim (slate-300 at opacity)
dimText: "rgba(148,163,184,0.5)",
dimIcon: "rgba(148,163,184,0.3)",
dimText: "var(--dim-text)",
dimIcon: "var(--dim-icon)",
// Error detail text
destructiveMuted: "rgba(248,113,113,0.6)",
destructiveBorderStrong: "rgba(239,68,68,0.25)",
// Framer-motion hover card base state (inline only — CSS vars can't be animated)
cardBaseBg: "rgba(255,255,255,0.02)",
cardBaseBorder: "rgba(255,255,255,0.06)",
cardBaseBg: "var(--card-base-bg)",
cardBaseBorder: "var(--card-base-border)",
} as const;