mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 18:05:11 +03:00
## Problem Primary colour serves readable text and selected controls, but those uses need different shades. Light mode needs darker text, while dark mode needs a deeper button fill. Fixed brand green on interactive chrome also prevents a custom primary hue from carrying through the interface. Some slider tracks and selected text are hard to read. ## Solution - Keep `--primary` for accessible text and small selected indicators. Use `--primary-solid` for button fills, which need a deeper shade in dark mode. - Add `--primary-bright` for focus rings, selected control chrome, chart accents, and other interactive highlights. It follows `--primary-hue`; `brand-*` stays fixed for Supabase identity. - Make slider troughs clearer and text selection translucent with theme foreground text. - Document the split in the design-system colour guide. | Before | After | | --- | --- | | <img width="980" height="244" alt="Before: light mode primary controls" src="https://github.com/user-attachments/assets/dfae325d-0dfe-4231-8bcd-3f89c4b9d793" /> | <img width="982" height="204" alt="After: light mode primary controls" src="https://github.com/user-attachments/assets/5fdcb531-a6e3-4549-8a13-9d9a5ebe6e20" /> | | <img width="610" height="120" alt="Before: slider track" src="https://github.com/user-attachments/assets/04f768e0-51e8-4d06-9b97-c52f4a34f122" /> | <img width="622" height="126" alt="After: slider track" src="https://github.com/user-attachments/assets/95127f4e-13dc-4f0f-b63c-cf5d70a28b42" /> | | <img width="652" height="512" alt="Before: dark mode controls" src="https://github.com/user-attachments/assets/3f88de66-90cc-40ee-8cf1-b5f4eb87b09a" /> | <img width="658" height="498" alt="After: dark mode controls" src="https://github.com/user-attachments/assets/906bec30-6ca1-4614-9fb3-6cf5e5feec22" /> | ## Review instructions 1. Compare light and dark mode in the [colour usage guide](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/color-usage#primary-and-brand-colors). Check primary ink, primary-solid, primary-bright, and fixed brand swatches. 2. In Studio, open the ‘new table’ sheet in [Table Editor](https://studio-staging-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/dashboard/project/_/editor). Tab through the new table sheet's fields and toggles. Check the focus rings, selected controls, and the sheet's edges in both themes. You do not need to save a table. 3. Select text in Studio in both themes, including a link or primary-coloured label. The selection and text should remain legible. 4. Check the [Field](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/components/field) Price Range slider: the unused track should remain visible in both themes. The selected field card border should follow primary-bright. 5. Check the [Button](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/components/button) and [Radio Group](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/components/radio-group) previews. In dark mode, `primary` button fill should be deeper than primary [text](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/color-usage#text); selected radios should remain readable.
133 lines
4.0 KiB
TypeScript
133 lines
4.0 KiB
TypeScript
import { COUNTRIES } from '@/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingAddress.constants'
|
|
import { COUNTRY_LAT_LON } from '@/components/interfaces/ProjectCreation/ProjectCreation.constants'
|
|
|
|
export type CountryCountRow = { country: string | null; count: number | string }
|
|
|
|
export interface MapChartTheme {
|
|
zeroFill: string // fill for countries with zero (or when max=0)
|
|
primaryFill: string // base fill color (same for all, vary by opacity)
|
|
opacityScale: [number, number, number, number, number] // low -> high opacities
|
|
boundaryStroke: string
|
|
boundaryStrokeHover: string
|
|
markerFill: string
|
|
oceanFill: string
|
|
}
|
|
|
|
export const MAP_CHART_THEME: { light: MapChartTheme; dark: MapChartTheme } = {
|
|
light: {
|
|
zeroFill: 'var(--background-surface-400)',
|
|
primaryFill: 'var(--primary-bright)',
|
|
opacityScale: [0.18, 0.32, 0.5, 0.68, 0.86],
|
|
boundaryStroke: 'oklch(from var(--primary-bright) l c h / 60%)',
|
|
boundaryStrokeHover: 'var(--primary-bright-hover)',
|
|
markerFill: 'var(--primary-bright)',
|
|
oceanFill: 'transparent',
|
|
},
|
|
dark: {
|
|
zeroFill: 'var(--background-selection)',
|
|
primaryFill: 'var(--primary-bright)',
|
|
opacityScale: [0.18, 0.32, 0.5, 0.68, 0.86],
|
|
boundaryStroke: 'oklch(from var(--primary-bright) l c h / 60%)',
|
|
boundaryStrokeHover: 'var(--primary-bright-hover)',
|
|
markerFill: 'var(--primary-bright)',
|
|
oceanFill: 'transparent',
|
|
},
|
|
}
|
|
|
|
export const buildCountsByIso2 = (rows: CountryCountRow[]): Record<string, number> => {
|
|
const counts: Record<string, number> = {}
|
|
for (const row of rows) {
|
|
if (!row.country) continue
|
|
const code = row.country.toUpperCase()
|
|
const numeric = typeof row.count === 'number' ? row.count : Number(row.count)
|
|
if (!Number.isFinite(numeric)) continue
|
|
counts[code] = (counts[code] || 0) + numeric
|
|
}
|
|
return counts
|
|
}
|
|
|
|
export const getFillColor = (
|
|
value: number,
|
|
max: number,
|
|
theme: MapChartTheme = MAP_CHART_THEME.dark
|
|
): string => {
|
|
if (max <= 0 || !value) return theme.zeroFill
|
|
return theme.primaryFill
|
|
}
|
|
|
|
export const getFillOpacity = (
|
|
value: number,
|
|
max: number,
|
|
theme: MapChartTheme = MAP_CHART_THEME.dark
|
|
): number => {
|
|
if (max <= 0 || !value) return 1
|
|
const ratio = value / max
|
|
if (ratio > 0.8) return theme.opacityScale[4]
|
|
if (ratio > 0.6) return theme.opacityScale[3]
|
|
if (ratio > 0.4) return theme.opacityScale[2]
|
|
if (ratio > 0.2) return theme.opacityScale[1]
|
|
return theme.opacityScale[0]
|
|
}
|
|
|
|
const MICRO_COUNTRIES = new Set([
|
|
'Singapore',
|
|
'Monaco',
|
|
'Andorra',
|
|
'Liechtenstein',
|
|
'San Marino',
|
|
'Vatican',
|
|
'Vatican City',
|
|
'Luxembourg',
|
|
'Malta',
|
|
'Bahrain',
|
|
'Brunei',
|
|
'Qatar',
|
|
'Kuwait',
|
|
'Hong Kong',
|
|
'Macau',
|
|
])
|
|
|
|
export const isMicroCountry = (name: string): boolean => MICRO_COUNTRIES.has(name)
|
|
|
|
export const isKnownCountryCode = (code: string): code is keyof typeof COUNTRY_LAT_LON => {
|
|
return Object.prototype.hasOwnProperty.call(COUNTRY_LAT_LON, code)
|
|
}
|
|
|
|
export const computeMarkerRadius = (value: number, max: number): number => {
|
|
if (max <= 0) return 2
|
|
return Math.max(1.5, Math.min(4, (value / max) * 4))
|
|
}
|
|
|
|
// Best-effort extraction of ISO2 code from feature properties, with name fallback
|
|
export const extractIso2FromFeatureProps = (
|
|
props?: Record<string, unknown>
|
|
): string | undefined => {
|
|
if (!props) return undefined
|
|
const candidates = [
|
|
'ISO_A2_EH',
|
|
'ISO_A2',
|
|
'iso_a2',
|
|
'ADMIN_ISO_A2',
|
|
'WB_A2',
|
|
'ADM0_A3_IS',
|
|
'ADM0_A3',
|
|
'ISO_N3',
|
|
'id',
|
|
]
|
|
for (const key of candidates) {
|
|
const v = props[key] as unknown
|
|
if (typeof v === 'string' && v.length === 2) return v.toUpperCase()
|
|
}
|
|
const name =
|
|
(props['name'] as string | undefined) || (props['NAME'] as string | undefined) || undefined
|
|
if (!name) return undefined
|
|
const entry = COUNTRIES.find((c) => c.name === name)
|
|
return entry?.code
|
|
}
|
|
|
|
export const iso2ToCountryName = (iso2: string): string => {
|
|
const code = iso2.toUpperCase()
|
|
const entry = COUNTRIES.find((c) => c.code === code)
|
|
return entry?.name ?? code
|
|
}
|