mirror of
https://github.com/supabase/supabase.git
synced 2026-09-09 19:42:46 +08:00
fb02182e86
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES/NO ## What kind of change does this PR introduce? Bug fix, feature, docs update, ... ## What is the current behavior? Please link any relevant issues here. ## What is the new behavior? Feel free to include screenshots if it includes visual changes. ## Additional context Add any other context or screenshots. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Refreshed theming across the UI to use modern color expressions and shared theme variables (including OKLCH-based gradients), improving consistency for charts, code blocks, overlays, icons, and decorative backgrounds. * **Bug Fixes** * Improved light/dark color and gradient consistency across axis/grid styling, reference lines, buttons/badges, sidebar accents, loaders, and other visual components. * **Documentation** * Updated styling/theming guidance to align with the revised semantic token system and the updated theme variable usage patterns. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
26 lines
694 B
TypeScript
26 lines
694 B
TypeScript
import { renderMermaidSVG } from 'beautiful-mermaid'
|
|
|
|
interface MermaidProps {
|
|
chart: string
|
|
}
|
|
|
|
export function Mermaid({ chart }: MermaidProps) {
|
|
const svg = renderMermaidSVG(chart, {
|
|
bg: 'var(--background-default)',
|
|
fg: 'var(--foreground-default)',
|
|
accent: 'hsl(var(--brand-default))',
|
|
muted: 'var(--foreground-light)',
|
|
line: 'var(--border-strong)',
|
|
border: 'var(--border-strong)',
|
|
surface: 'var(--background-surface-200)',
|
|
transparent: true,
|
|
})
|
|
|
|
return (
|
|
<div
|
|
className="my-6 overflow-x-auto rounded-md border bg-surface-100 p-4 [&>svg]:mx-auto [&>svg]:h-auto [&>svg]:max-w-full"
|
|
dangerouslySetInnerHTML={{ __html: svg }}
|
|
/>
|
|
)
|
|
}
|