ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

style: refactor chart color variables across multiple components to use CSS variables for improved theming consistency

Browse Source
This commit is contained in:
Usman Baig
2026-02-21 23:09:34 +01:00
parent 72c06816fe
commit f1e6d5a48e
4 changed files with 38 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/sites/[id]/funnels/[funnelId]/page.tsx
View File

@@ -19,20 +19,20 @@ import {
import { getDateRange } from '@ciphera-net/ui' import { getDateRange } from '@ciphera-net/ui'
const CHART_COLORS_LIGHT = { const CHART_COLORS_LIGHT = {
border: '#E5E5E5', border: 'var(--color-neutral-200)',
axis: '#A3A3A3', axis: 'var(--color-neutral-400)',
tooltipBg: '#ffffff', tooltipBg: '#ffffff',
tooltipBorder: '#E5E5E5', tooltipBorder: 'var(--color-neutral-200)',
} }
const CHART_COLORS_DARK = { const CHART_COLORS_DARK = {
border: '#404040', border: 'var(--color-neutral-700)',
axis: '#737373', axis: 'var(--color-neutral-500)',
tooltipBg: '#262626', tooltipBg: 'var(--color-neutral-800)',
tooltipBorder: '#404040', tooltipBorder: 'var(--color-neutral-700)',
} }
const BRAND_ORANGE = '#FD5E0F' const BRAND_ORANGE = 'var(--color-brand-orange)'
export default function FunnelReportPage() { export default function FunnelReportPage() {
const params = useParams() const params = useParams()

22
app/sites/[id]/uptime/page.tsx
View File

@@ -34,20 +34,20 @@ import type { TooltipProps } from 'recharts'
// * Chart theme colors (consistent with main Pulse chart) // * Chart theme colors (consistent with main Pulse chart)
const CHART_COLORS_LIGHT = { const CHART_COLORS_LIGHT = {
border: '#E5E5E5', border: 'var(--color-neutral-200)',
text: '#171717', text: 'var(--color-neutral-900)',
textMuted: '#737373', textMuted: 'var(--color-neutral-500)',
axis: '#A3A3A3', axis: 'var(--color-neutral-400)',
tooltipBg: '#ffffff', tooltipBg: '#ffffff',
tooltipBorder: '#E5E5E5', tooltipBorder: 'var(--color-neutral-200)',
} }
const CHART_COLORS_DARK = { const CHART_COLORS_DARK = {
border: '#404040', border: 'var(--color-neutral-700)',
text: '#fafafa', text: 'var(--color-neutral-50)',
textMuted: '#a3a3a3', textMuted: 'var(--color-neutral-400)',
axis: '#737373', axis: 'var(--color-neutral-500)',
tooltipBg: '#262626', tooltipBg: 'var(--color-neutral-800)',
tooltipBorder: '#404040', tooltipBorder: 'var(--color-neutral-700)',
} }
// * Status color mapping // * Status color mapping

32
components/dashboard/Chart.tsx
View File

@@ -18,27 +18,27 @@ import { ArrowUpRightIcon, ArrowDownRightIcon, BarChartIcon, Select, Button, Dow
import { Checkbox } from '@ciphera-net/ui' import { Checkbox } from '@ciphera-net/ui'
const COLORS = { const COLORS = {
brand: '#FD5E0F', brand: 'var(--color-brand-orange)',
success: '#10B981', // Emerald-500 success: 'var(--color-success)',
danger: '#EF4444', // Red-500 danger: 'var(--color-error)',
} }
const CHART_COLORS_LIGHT = { const CHART_COLORS_LIGHT = {
border: '#E5E5E5', border: 'var(--color-neutral-200)',
text: '#171717', text: 'var(--color-neutral-900)',
textMuted: '#737373', textMuted: 'var(--color-neutral-500)',
axis: '#A3A3A3', axis: 'var(--color-neutral-400)',
tooltipBg: '#ffffff', tooltipBg: '#ffffff',
tooltipBorder: '#E5E5E5', tooltipBorder: 'var(--color-neutral-200)',
} }
const CHART_COLORS_DARK = { const CHART_COLORS_DARK = {
border: '#404040', border: 'var(--color-neutral-700)',
text: '#fafafa', text: 'var(--color-neutral-50)',
textMuted: '#a3a3a3', textMuted: 'var(--color-neutral-400)',
axis: '#737373', axis: 'var(--color-neutral-500)',
tooltipBg: '#262626', tooltipBg: 'var(--color-neutral-800)',
tooltipBorder: '#404040', tooltipBorder: 'var(--color-neutral-700)',
} }
export interface DailyStat { export interface DailyStat {
@@ -282,7 +282,7 @@ export default function Chart({
const { toPng } = await import('html-to-image') const { toPng } = await import('html-to-image')
const dataUrl = await toPng(chartContainerRef.current, { const dataUrl = await toPng(chartContainerRef.current, {
cacheBust: true, cacheBust: true,
backgroundColor: resolvedTheme === 'dark' ? '#171717' : '#ffffff', backgroundColor: resolvedTheme === 'dark' ? 'var(--color-neutral-900)' : '#ffffff',
}) })
const link = document.createElement('a') const link = document.createElement('a')
link.download = `chart-${dateRange.start}-${dateRange.end}.png` link.download = `chart-${dateRange.start}-${dateRange.end}.png`
@@ -694,7 +694,7 @@ export default function Chart({
activeDot={{ activeDot={{
r: 5, r: 5,
strokeWidth: 2, strokeWidth: 2,
fill: resolvedTheme === 'dark' ? '#262626' : '#ffffff', fill: resolvedTheme === 'dark' ? 'var(--color-neutral-800)' : '#ffffff',
stroke: activeMetric.color, stroke: activeMetric.color,
}} }}
isAnimationActive isAnimationActive

6
components/dashboard/WorldMap.tsx
View File

@@ -35,9 +35,9 @@ const WorldMap = ({ data }: WorldMapProps) => {
// Plausible-like colors based on provided SVG snippet // Plausible-like colors based on provided SVG snippet
const isDark = resolvedTheme === 'dark' const isDark = resolvedTheme === 'dark'
const defaultFill = isDark ? "#262626" : "#f5f5f5" // neutral-800 / neutral-100 const defaultFill = isDark ? "var(--color-neutral-800)" : "var(--color-neutral-100)"
const defaultStroke = isDark ? "#171717" : "#ffffff" // neutral-900 / white const defaultStroke = isDark ? "var(--color-neutral-900)" : "#ffffff"
const brandOrange = "#FD5E0F" const brandOrange = "var(--color-brand-orange)"
return ( return (
<div className="relative w-full"> <div className="relative w-full">