487c398dcf
Removes the global `uppercase` + `font-mondwest` from the App.tsx root
that forced every page to opt-out, replaces stacked-alpha text colors
with semantic tokens for WCAG-AA contrast across all 7 themes, and
applies the new `text-display` utility from @nous-research/ui@0.16.0
on intentional brand chrome (page titles, sidebar headings, segmented
filters) only. Bumps every sub-12px arbitrary text size to text-xs.
Also widens the dashboard plugin routes (/api/dashboard/agent-plugins/
{name:path}/...) so category-namespaced plugins like observability/
langfuse and image_gen/openai can be enable/disabled from the dashboard
— previously the FE encodeURIComponent-ed the slash and the backend
{name} route rejected it. _validate_plugin_name still blocks .. and
backslash, and strips leading/trailing slash.
Touches sessions/env/keys page chrome and adds two new i18n keys
(`overview`, `showMore`/`showLess`) across all 18 locales.
Squashes 19 commits from PR #28832.
Co-authored-by: Hermes <noreply@nousresearch.com>
64 lines
2.1 KiB
TypeScript
64 lines
2.1 KiB
TypeScript
import { cn, themedBody } from "@/lib/utils";
|
|
|
|
/**
|
|
* Themed card primitive. Themes can restyle every card without touching
|
|
* call sites by setting CSS vars under the `card` component-style bucket:
|
|
*
|
|
* componentStyles:
|
|
* card:
|
|
* clipPath: "polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px)"
|
|
* border: "1px solid var(--color-ring)"
|
|
* background: "linear-gradient(180deg, var(--color-card) 0%, transparent 100%)"
|
|
* boxShadow: "0 0 0 1px var(--color-ring) inset, 0 0 24px -8px var(--warm-glow)"
|
|
*
|
|
* All properties are optional — vars that aren't set compute to their
|
|
* CSS initial value, so the default shadcn-y card keeps looking normal
|
|
* for themes that don't override anything.
|
|
*/
|
|
const CARD_STYLE: React.CSSProperties = {
|
|
clipPath: "var(--component-card-clip-path)",
|
|
borderImage: "var(--component-card-border-image)",
|
|
background: "var(--component-card-background)",
|
|
boxShadow: "var(--component-card-box-shadow)",
|
|
};
|
|
|
|
export function Card({ className, style, ...props }: React.HTMLAttributes<HTMLDivElement>) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"border border-border bg-card/80 text-card-foreground w-full",
|
|
themedBody,
|
|
className,
|
|
)}
|
|
style={{ ...CARD_STYLE, ...style }}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
|
|
return <div className={cn("flex flex-col gap-1.5 p-4 border-b border-border", className)} {...props} />;
|
|
}
|
|
|
|
export function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
|
|
return (
|
|
<h3
|
|
className={cn(
|
|
"font-mondwest text-display text-sm tracking-[0.12em] text-text-primary",
|
|
className,
|
|
)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function CardDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
|
|
return (
|
|
<p className={cn("font-mondwest normal-case text-xs text-muted-foreground", className)} {...props} />
|
|
);
|
|
}
|
|
|
|
export function CardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
|
|
return <div className={cn("p-4", className)} {...props} />;
|
|
}
|