Skip to Content
⚠️Active Development Notice: TimeTiles is under active development. Information may be placeholder content or not up-to-date.
ReferenceAPI ReferenceLibraryConstantsDataset Colors

web


web / lib/constants/dataset-colors

lib/constants/dataset-colors

Dataset badge color palette for consistent dataset identification across the UI.

Uses cartographic design system colors. Colors are assigned by dataset ID so the first datasets always get the same colors.

Type Aliases

DatasetBadgeColor

DatasetBadgeColor = typeof DATASET_BADGE_COLORS[number]

Variables

DATASET_BADGE_COLORS

const DATASET_BADGE_COLORS: readonly [{ bg: "bg-cartographic-blue/10"; text: "text-cartographic-blue"; border: "border-cartographic-blue/30"; }, { bg: "bg-cartographic-terracotta/10"; text: "text-cartographic-terracotta"; border: "border-cartographic-terracotta/30"; }, { bg: "bg-cartographic-forest/10"; text: "text-cartographic-forest"; border: "border-cartographic-forest/30"; }, { bg: "bg-cartographic-teal/10"; text: "text-cartographic-teal"; border: "border-cartographic-teal/30"; }, { bg: "bg-cartographic-amber/10"; text: "text-cartographic-amber"; border: "border-cartographic-amber/30"; }, { bg: "bg-cartographic-plum/10"; text: "text-cartographic-plum"; border: "border-cartographic-plum/30"; }, { bg: "bg-cartographic-rose/10"; text: "text-cartographic-rose"; border: "border-cartographic-rose/30"; }, { bg: "bg-cartographic-olive/10"; text: "text-cartographic-olive"; border: "border-cartographic-olive/30"; }, { bg: "bg-cartographic-navy/10"; text: "text-cartographic-navy"; border: "border-cartographic-navy/30"; }, { bg: "bg-cartographic-slate/10"; text: "text-cartographic-slate"; border: "border-cartographic-slate/30"; }]

Structured color definitions for dataset badges

Functions

getDatasetColors()

getDatasetColors(datasetId): { bg: "bg-cartographic-blue/10"; text: "text-cartographic-blue"; border: "border-cartographic-blue/30"; } | { bg: "bg-cartographic-terracotta/10"; text: "text-cartographic-terracotta"; border: "border-cartographic-terracotta/30"; } | { bg: "bg-cartographic-forest/10"; text: "text-cartographic-forest"; border: "border-cartographic-forest/30"; } | { bg: "bg-cartographic-teal/10"; text: "text-cartographic-teal"; border: "border-cartographic-teal/30"; } | { bg: "bg-cartographic-amber/10"; text: "text-cartographic-amber"; border: "border-cartographic-amber/30"; } | { bg: "bg-cartographic-plum/10"; text: "text-cartographic-plum"; border: "border-cartographic-plum/30"; } | { bg: "bg-cartographic-rose/10"; text: "text-cartographic-rose"; border: "border-cartographic-rose/30"; } | { bg: "bg-cartographic-olive/10"; text: "text-cartographic-olive"; border: "border-cartographic-olive/30"; } | { bg: "bg-cartographic-navy/10"; text: "text-cartographic-navy"; border: "border-cartographic-navy/30"; } | { bg: "bg-cartographic-slate/10"; text: "text-cartographic-slate"; border: "border-cartographic-slate/30"; }

Get structured color object for a dataset (bg, text, border classes)

Parameters

datasetId

number

Returns

{ bg: "bg-cartographic-blue/10"; text: "text-cartographic-blue"; border: "border-cartographic-blue/30"; } | { bg: "bg-cartographic-terracotta/10"; text: "text-cartographic-terracotta"; border: "border-cartographic-terracotta/30"; } | { bg: "bg-cartographic-forest/10"; text: "text-cartographic-forest"; border: "border-cartographic-forest/30"; } | { bg: "bg-cartographic-teal/10"; text: "text-cartographic-teal"; border: "border-cartographic-teal/30"; } | { bg: "bg-cartographic-amber/10"; text: "text-cartographic-amber"; border: "border-cartographic-amber/30"; } | { bg: "bg-cartographic-plum/10"; text: "text-cartographic-plum"; border: "border-cartographic-plum/30"; } | { bg: "bg-cartographic-rose/10"; text: "text-cartographic-rose"; border: "border-cartographic-rose/30"; } | { bg: "bg-cartographic-olive/10"; text: "text-cartographic-olive"; border: "border-cartographic-olive/30"; } | { bg: "bg-cartographic-navy/10"; text: "text-cartographic-navy"; border: "border-cartographic-navy/30"; } | { bg: "bg-cartographic-slate/10"; text: "text-cartographic-slate"; border: "border-cartographic-slate/30"; }


getDatasetBadgeClass()

getDatasetBadgeClass(datasetId): string

Get combined badge class string for a dataset (bg + text)

Parameters

datasetId

number | null

Returns

string

Last updated on