mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 09:55:06 +03:00
Danny White
5fbf1ac4ff
## Problem Some destination marks need different assets to maintain contrast across light and dark surfaces. Their paths are also duplicated between Pipelines and Wrappers. ## Solution Add a shared brand-icon registry that supports either one asset or light and dark variants. Pipeline destination logos resolve against the active theme, while Wrappers continue using the light variant for their white logo tiles. This keeps single-asset destinations unchanged and preserves the existing monogram treatment where applicable. | Light | Dark | | --- | --- | | <img width="926" height="742" alt="CleanShot 2026-09-30 at 15 03 31@2x" src="https://github.com/user-attachments/assets/d76e5995-1bb8-4cb7-b991-c5dc1a5d8cb0" /> | <img width="926" height="732" alt="CleanShot 2026-09-30 at 15 03 03@2x" src="https://github.com/user-attachments/assets/83d45f30-3bf6-4ddc-8607-e27628cb4966" /> | ## Review instructions 1. Open `/project/<ref>/database/replication` with pipelines using the themed destination marks. 2. Switch between light and dark themes from the account menu. 3. Confirm each themed mark swaps assets and remains legible in the pipeline list, diagram, and child-route header. 4. Open Database Integrations and confirm the corresponding Wrapper tiles continue using their light-surface assets. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Updated the BigQuery, ClickHouse, DuckLake, and Snowflake icons in integration and replication views to use branded marks. Icons now use theme-appropriate variants where available, helping them display consistently across light and dark themes. ClickHouse’s previous “CH” monogram is replaced with its branded mark. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
36 lines
1.3 KiB
TypeScript
36 lines
1.3 KiB
TypeScript
import { BASE_PATH } from '@/lib/constants'
|
|
|
|
/**
|
|
* Brand mark paths shared by Pipelines (`DestinationLogo`) and Integrations
|
|
* Wrappers. A single string is theme-agnostic; `{ light, dark }` opts into
|
|
* per-theme assets.
|
|
*
|
|
* Wrappers / `IntegrationLogo` force a white tile, so they should always use
|
|
* {@link resolveLightIconSrc}. DestinationLogo sits on `bg-surface-100` and
|
|
* should resolve against the active theme.
|
|
*/
|
|
export type ThemedIconSrc = string | { light: string; dark: string }
|
|
|
|
export const BRAND_ICONS = {
|
|
bigquery: `${BASE_PATH}/img/icons/bigquery-icon.svg`,
|
|
clickhouse: {
|
|
light: `${BASE_PATH}/img/icons/clickhouse-icon-on-light.svg`,
|
|
dark: `${BASE_PATH}/img/icons/clickhouse-icon-on-dark.svg`,
|
|
},
|
|
ducklake: {
|
|
light: `${BASE_PATH}/img/icons/ducklake-icon-on-light.svg`,
|
|
dark: `${BASE_PATH}/img/icons/ducklake-icon-on-dark.svg`,
|
|
},
|
|
snowflake: `${BASE_PATH}/img/icons/snowflake-icon.svg`,
|
|
} as const satisfies Record<string, ThemedIconSrc>
|
|
|
|
export function resolveThemedIconSrc(src: ThemedIconSrc, isDark: boolean): string {
|
|
if (typeof src === 'string') return src
|
|
return isDark ? src.dark : src.light
|
|
}
|
|
|
|
/** Light (or only) variant — for surfaces that force a white logo tile. */
|
|
export function resolveLightIconSrc(src: ThemedIconSrc): string {
|
|
return typeof src === 'string' ? src : src.light
|
|
}
|