mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
Danny White
805aee289e
## What kind of change does this PR introduce? Bug fix + small shared component ## What is the current behavior? After the recent colour system changes, several UI elements lost contrast in light mode: - `InfoIcon` with a background appeared as a flat grey circle (glyph fill matched the background) - Several buttons forced `text-white`, which no longer contrasts correctly against the updated brand fills - Selected / completed check badges were inconsistent between call sites ## What is the new behavior? - `InfoIcon` uses `text-background` for the glyph fill so the "i" is visible against the grey circle - www primary buttons drop hardcoded `text-white` and use standard `Button` colours - New shared `SuccessCheck` in `ui` for selected state and completion progress (green circle; white check in light mode, black check in dark mode) - Documented in the design system with selected + progress examples Note on `InfoIcon`: [#47933](https://github.com/supabase/supabase/pull/47933) landed a related fix using `text-background-200` (`--card`). This PR keeps `text-background` instead, to match `CheckIcon` / `EyeOffIcon` in the same file and avoid the legacy alias. | Before | After | | --- | --- | | <img width="688" height="268" alt="CleanShot 2026-07-10 at 11 30 25@2x" src="https://github.com/user-attachments/assets/c0276b0c-1023-46c8-805c-35a22def1353" /> | <img width="664" height="278" alt="CleanShot 2026-07-10 at 11 29 43@2x" src="https://github.com/user-attachments/assets/3508cf37-1b48-4fb7-a939-83522feb44f1" /> | | <img width="468" height="550" alt="CleanShot 2026-07-10 at 11 31 04@2x" src="https://github.com/user-attachments/assets/acd42273-15ce-4fb2-9d0c-5a43ac23073c" /> | <img width="460" height="540" alt="CleanShot 2026-07-10 at 11 32 50@2x" src="https://github.com/user-attachments/assets/f66fb4bc-81f7-4df1-95f5-63980c4e8537" /> | ## To test Use the staging preview link from this PR and check the following in **light mode** (and spot-check dark mode): **www** - Visit `/404` — "Head back" button should have readable text (not white-on-green) - Visit `/company` — "Join the team" button in the Team section - Visit a product page with a hero CTA (e.g. `/database`, `/realtime`) — primary "Start for free" button **studio** - Database → Replication → deploy a read replica — footer `InfoIcon` next to the pricing line should show a visible "i" inside the grey circle - `/redeem` — select an org; green `SuccessCheck` should match light/dark contrast (white check / black check) - Settings → API → service role key row — red "secret" tag text should be readable **design system** - `/docs/components/success-check` — demo, selected-state, and progress examples
163 lines
5.1 KiB
TypeScript
163 lines
5.1 KiB
TypeScript
// GENERAL
|
|
|
|
export * from './src/components/Button'
|
|
export * from './src/components/Icon/IconBackground'
|
|
|
|
// NAV
|
|
|
|
export * from './src/components/Menu'
|
|
export * from './src/components/NavMenu'
|
|
|
|
// OVERLAYS
|
|
|
|
export * from './src/components/SidePanel'
|
|
|
|
// HTML
|
|
|
|
export { Heading } from './src/components/CustomHTMLElements'
|
|
|
|
// UTILITIES
|
|
|
|
export * from './src/components/Loading'
|
|
export * from './src/components/LogoLoader'
|
|
export * from './src/components/AnimatedCounter'
|
|
export * from './src/lib/utils'
|
|
|
|
// DATA ENTRY
|
|
export * from './src/components/ExpandingTextArea'
|
|
|
|
// layout
|
|
export * from './src/components/LoadingLine'
|
|
|
|
// ai icon
|
|
export * from './src/layout/ai-icon-animation'
|
|
|
|
// theme switcher
|
|
export * from './src/components/ThemeProvider/singleThemes'
|
|
|
|
// shadcn
|
|
export * from './src/components/shadcn/ui/dropdown-menu'
|
|
export * from './src/components/shadcn/ui/sonner'
|
|
export * from './src/components/shadcn/ui/sonner-progress'
|
|
export * from './src/components/shadcn/ui/separator'
|
|
export * from './src/components/shadcn/ui/sheet'
|
|
export * from './src/components/shadcn/ui/badge'
|
|
export * from './src/components/shadcn/ui/input-otp'
|
|
export * from './src/components/shadcn/ui/alert-dialog'
|
|
export * from './src/components/shadcn/ui/avatar'
|
|
export * from './src/components/shadcn/ui/drawer'
|
|
export * from './src/components/shadcn/ui/menubar'
|
|
export * from './src/components/shadcn/ui/navigation-menu'
|
|
export * from './src/components/shadcn/ui/progress'
|
|
export * from './src/components/shadcn/ui/skeleton'
|
|
export * from './src/components/shadcn/ui/slider'
|
|
export * from './src/components/shadcn/ui/textarea'
|
|
export * from './src/components/shadcn/ui/toggle-group'
|
|
export * from './src/components/shadcn/ui/toggle'
|
|
export * from './src/components/shadcn/ui/card'
|
|
|
|
export * from './src/components/shadcn/ui/command'
|
|
|
|
export * from './src/components/shadcn/ui/context-menu'
|
|
|
|
export * from './src/components/shadcn/ui/dialog'
|
|
|
|
export * from './src/components/shadcn/ui/alert'
|
|
|
|
export * from './src/components/shadcn/ui/field'
|
|
|
|
export * from './src/components/shadcn/ui/form'
|
|
|
|
export * from './src/components/shadcn/ui/popover'
|
|
|
|
export * from './src/components/shadcn/ui/accordion'
|
|
|
|
export * from './src/components/shadcn/ui/select'
|
|
|
|
export * from './src/components/shadcn/ui/radio-group'
|
|
|
|
export * from './src/components/shadcn/ui/slider'
|
|
|
|
export * from './src/components/shadcn/ui/input'
|
|
|
|
export { Button as Button_Shadcn_ } from './src/components/shadcn/ui/button'
|
|
|
|
export * from './src/components/shadcn/ui/button-group'
|
|
|
|
export * from './src/components/shadcn/ui/breadcrumb'
|
|
|
|
export * from './src/components/shadcn/ui/text-area'
|
|
|
|
export * from './src/components/shadcn/ui/label'
|
|
|
|
export * from './src/components/shadcn/ui/input-group'
|
|
|
|
export * from './src/components/shadcn/ui/switch'
|
|
|
|
export * from './src/components/shadcn/ui/checkbox'
|
|
|
|
export * from './src/components/shadcn/ui/scroll-area'
|
|
|
|
export * from './src/components/shadcn/ui/hover-card'
|
|
|
|
export * from './src/components/shadcn/ui/aspect-ratio'
|
|
|
|
export * from './src/components/shadcn/ui/table'
|
|
export * from './src/components/ShadowScrollArea'
|
|
|
|
export * from './src/components/shadcn/ui/collapsible'
|
|
|
|
export * from './src/components/shadcn/ui/tabs'
|
|
|
|
export * from './src/components/shadcn/ui/tooltip'
|
|
|
|
export * from './src/components/shadcn/ui/hover-card'
|
|
|
|
export * from './src/components/shadcn/ui/calendar'
|
|
|
|
export * from './src/components/shadcn/ui/scroll-area'
|
|
|
|
export * from './src/components/shadcn/ui/separator'
|
|
|
|
export * from './src/components/shadcn/ui/resizable'
|
|
|
|
export * from './src/components/radio-group-stacked'
|
|
export * from './src/components/radio-group-card'
|
|
|
|
export * from './src/components/TreeView'
|
|
|
|
export * from './src/components/shadcn/ui/chart'
|
|
export * from './src/components/shadcn/ui/sidebar'
|
|
|
|
// ICONS
|
|
export * from './src/components/StatusIcon'
|
|
export * from './src/components/SuccessCheck'
|
|
|
|
// export icons
|
|
export * from './src/components/Icon/icons/IconBriefcase2'
|
|
export * from './src/components/Icon/icons/IconBroadcast'
|
|
export * from './src/components/Icon/icons/IconChangelog'
|
|
export * from './src/components/Icon/icons/IconDatabaseChanges'
|
|
export * from './src/components/Icon/icons/IconDiscord'
|
|
export * from './src/components/Icon/icons/IconDiscussions'
|
|
export * from './src/components/Icon/icons/IconDocumentation'
|
|
export * from './src/components/Icon/icons/IconGitHubSolid'
|
|
export * from './src/components/Icon/icons/IconInstagram'
|
|
export * from './src/components/Icon/icons/IconIntegrations'
|
|
export * from './src/components/Icon/icons/IconLifeBuoy2'
|
|
export * from './src/components/Icon/icons/IconLinkedinSolid'
|
|
export * from './src/components/Icon/icons/IconMicSolid'
|
|
export * from './src/components/Icon/icons/IconPartners'
|
|
export * from './src/components/Icon/icons/IconPresence'
|
|
export * from './src/components/Icon/icons/IconProductHunt'
|
|
export * from './src/components/Icon/icons/IconTikTok'
|
|
export * from './src/components/Icon/icons/IconTwitterX'
|
|
export * from './src/components/Icon/icons/IconYCombinator'
|
|
export * from './src/components/Icon/icons/IconYoutubeSolid'
|
|
|
|
// Export hooks
|
|
export * from './src/lib/Hooks'
|
|
export * from './src/components/hooks/use-mobile'
|
|
|
|
export * from './src/components/KeyboardShortcut/KeyboardShortcut'
|