mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
Saxon FletcherandClaude Opus 4.8
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>
81 lines
2.5 KiB
TypeScript
81 lines
2.5 KiB
TypeScript
import SectionContainer from '~/components/Layouts/SectionContainer'
|
|
import Panel from '~/components/Panel'
|
|
import { getAnimation, INITIAL_BOTTOM } from '~/lib/animations'
|
|
import { domAnimation, LazyMotion, m, useInView } from 'framer-motion'
|
|
import React, { useRef, useState } from 'react'
|
|
|
|
interface Highlight {
|
|
image?: React.ReactNode
|
|
svg?: React.ReactNode
|
|
title: string
|
|
paragraph: string | React.ReactNode
|
|
}
|
|
|
|
const HighlightCards = ({
|
|
highlights,
|
|
className,
|
|
}: {
|
|
highlights: Highlight[]
|
|
className?: string
|
|
cols?: number
|
|
}) => {
|
|
return (
|
|
<SectionContainer className={className}>
|
|
<LazyMotion features={domAnimation}>
|
|
<div className="highlights-grid grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
|
|
{highlights.map((highlight, i) => (
|
|
<HighlightCard highlight={highlight} index={i} key={highlight.title} />
|
|
))}
|
|
</div>
|
|
</LazyMotion>
|
|
</SectionContainer>
|
|
)
|
|
}
|
|
|
|
const HighlightCard = ({ highlight, index }: { highlight: Highlight; index: number }) => {
|
|
const ref = useRef(null)
|
|
const [isHovered, setIsHovered] = useState(false)
|
|
const isInView = useInView(ref, { once: true })
|
|
|
|
const initial = INITIAL_BOTTOM
|
|
const animate = getAnimation({})
|
|
|
|
const Img: any = highlight.image
|
|
|
|
return (
|
|
<m.div
|
|
ref={ref}
|
|
initial={initial}
|
|
onMouseEnter={() => setIsHovered(true)}
|
|
onMouseLeave={() => setIsHovered(false)}
|
|
animate={isInView ? animate : initial}
|
|
className="will-change-transform h-full highlight-card"
|
|
>
|
|
<Panel innerClassName="flex flex-col bg-alternative!" outerClassName="h-full">
|
|
{highlight.image && (
|
|
<div className="relative w-full aspect-[1.35/1] mb-4">
|
|
<div
|
|
className="absolute inset-0 w-full h-full z-10"
|
|
style={{
|
|
background: `radial-gradient(100% 50% at 50% 50%, transparent, var(--background-alternative-default))`,
|
|
}}
|
|
/>
|
|
{highlight.image && <Img isHovered={isHovered} />}
|
|
</div>
|
|
)}
|
|
<div className="p-4 md:p-8">
|
|
{highlight.svg && (
|
|
<div className="relative w-6 aspect-square mb-2 md:mb-4 text-foreground-light">
|
|
{highlight.svg}
|
|
</div>
|
|
)}
|
|
<h3 className="text-lg text-foreground md:mb-2">{highlight.title}</h3>
|
|
<p className="text-foreground-lighter text-sm">{highlight.paragraph}</p>
|
|
</div>
|
|
</Panel>
|
|
</m.div>
|
|
)
|
|
}
|
|
|
|
export default HighlightCards
|