diff --git a/client/src/features/statistics/components/library/GenreDistributionChart.vue b/client/src/features/statistics/components/library/GenreDistributionChart.vue
index b1454b94a..3705a1e9c 100644
--- a/client/src/features/statistics/components/library/GenreDistributionChart.vue
+++ b/client/src/features/statistics/components/library/GenreDistributionChart.vue
@@ -4,12 +4,11 @@ import { useI18n } from 'vue-i18n'
import VChart from 'vue-echarts'
import { Tag } from '@lucide/vue'
-import { useThemeStore } from '@/stores/theme'
-import { getThemePalette, readCssColor } from '@/lib/echarts'
+import { useChartTokens } from '@/composables/useChartTokens'
import { useGenreDistribution } from '../../composables/useGenreDistribution'
import ChartCard from '../ChartCard.vue'
-const themeStore = useThemeStore()
+const chartTokens = useChartTokens()
const { t } = useI18n()
const { data, loading, error } = useGenreDistribution()
@@ -20,8 +19,8 @@ const option = shallowRef({})
watchEffect(() => {
if (!data.value.items.length) return
- const palette = getThemePalette(themeStore.resolvedTheme, themeStore.accent, 0.85, 0.85)
- const background = readCssColor('--background')
+ const palette = chartTokens.value.palette(0.85, 0.85)
+ const background = chartTokens.value.color('--background')
option.value = {
tooltip: {
diff --git a/client/src/features/statistics/components/library/LibraryIntegrityGaugeChart.vue b/client/src/features/statistics/components/library/LibraryIntegrityGaugeChart.vue
index a1948c1cb..7d59c4ce4 100644
--- a/client/src/features/statistics/components/library/LibraryIntegrityGaugeChart.vue
+++ b/client/src/features/statistics/components/library/LibraryIntegrityGaugeChart.vue
@@ -4,11 +4,12 @@ import { useI18n } from 'vue-i18n'
import VChart from 'vue-echarts'
import { ShieldCheck } from '@lucide/vue'
-import { readCssColor } from '@/lib/echarts'
+import { useChartTokens } from '@/composables/useChartTokens'
import { useLibraryIntegrityGauge } from '../../composables/useLibraryIntegrityGauge'
import ChartCard from '../ChartCard.vue'
const { t } = useI18n()
+const chartTokens = useChartTokens()
const { data, loading, error } = useLibraryIntegrityGauge()
const option = shallowRef({})
@@ -49,7 +50,7 @@ watchEffect(() => {
option.value = {}
return
}
- const foreground = readCssColor('--foreground')
+ const foreground = chartTokens.value.color('--foreground')
const activeColor = scoreColor(data.value.integrityScore)
option.value = {
diff --git a/client/src/features/statistics/components/library/LibraryMetadataCompletenessHeatmapChart.vue b/client/src/features/statistics/components/library/LibraryMetadataCompletenessHeatmapChart.vue
index 1be89945a..50c0aee3a 100644
--- a/client/src/features/statistics/components/library/LibraryMetadataCompletenessHeatmapChart.vue
+++ b/client/src/features/statistics/components/library/LibraryMetadataCompletenessHeatmapChart.vue
@@ -3,7 +3,7 @@ import { computed, shallowRef, watchEffect } from 'vue'
import { useI18n } from 'vue-i18n'
import VChart from 'vue-echarts'
import { ListChecks } from '@lucide/vue'
-import { useThemeStore } from '@/stores/theme'
+import { useChartTokens } from '@/composables/useChartTokens'
import { buildHeatmapPalette } from '@/lib/heatmap-palette'
import { useLibraryMetadataCompleteness } from '../../composables/useLibraryMetadataCompleteness'
@@ -25,14 +25,14 @@ const FIELD_ORDER = [
'ISBN',
]
-const themeStore = useThemeStore()
+const chartTokens = useChartTokens()
const { t } = useI18n()
const { data, loading, error } = useLibraryMetadataCompleteness()
const option = shallowRef({})
const heatmapPaletteState = computed(() => ({
- accent: themeStore.accent,
- palette: buildHeatmapPalette({ theme: themeStore.resolvedTheme }),
+ key: chartTokens.value.key,
+ palette: buildHeatmapPalette({ theme: chartTokens.value.dark ? 'dark' : 'light' }),
}))
watchEffect(() => {
@@ -47,7 +47,7 @@ watchEffect(() => {
return [x, y, item.percent, item.presentCount, item.totalCount]
})
const palette = heatmapPaletteState.value.palette
- const labelColor = themeStore.resolvedTheme === 'dark' ? '#f8fafc' : '#0f172a'
+ const labelColor = chartTokens.value.color('--foreground')
const pieces = [
{ value: 0, color: palette.scale[0] },
{ gt: 0, lte: 25, color: palette.scale[1] },
diff --git a/client/src/features/statistics/components/library/MetadataFreshnessGaugeChart.vue b/client/src/features/statistics/components/library/MetadataFreshnessGaugeChart.vue
index 2b82b795d..18229b9bb 100644
--- a/client/src/features/statistics/components/library/MetadataFreshnessGaugeChart.vue
+++ b/client/src/features/statistics/components/library/MetadataFreshnessGaugeChart.vue
@@ -4,11 +4,12 @@ import { useI18n } from 'vue-i18n'
import VChart from 'vue-echarts'
import { Gauge } from '@lucide/vue'
-import { readCssColor } from '@/lib/echarts'
+import { useChartTokens } from '@/composables/useChartTokens'
import { useMetadataFreshnessGauge } from '../../composables/useMetadataFreshnessGauge'
import ChartCard from '../ChartCard.vue'
const { t } = useI18n()
+const chartTokens = useChartTokens()
const { data, loading, error } = useMetadataFreshnessGauge()
const option = shallowRef({})
@@ -38,7 +39,7 @@ watchEffect(() => {
option.value = {}
return
}
- const foreground = readCssColor('--foreground')
+ const foreground = chartTokens.value.color('--foreground')
const activeColor = scoreColor(data.value.freshnessScore)
option.value = {
diff --git a/client/src/features/statistics/components/library/TopAuthorsChart.vue b/client/src/features/statistics/components/library/TopAuthorsChart.vue
index cee31c509..1edd7f38c 100644
--- a/client/src/features/statistics/components/library/TopAuthorsChart.vue
+++ b/client/src/features/statistics/components/library/TopAuthorsChart.vue
@@ -4,12 +4,11 @@ import { useI18n } from 'vue-i18n'
import VChart from 'vue-echarts'
import { Users } from '@lucide/vue'
-import { useThemeStore } from '@/stores/theme'
-import { getThemePalette, readCssColor } from '@/lib/echarts'
+import { useChartTokens } from '@/composables/useChartTokens'
import { useTopAuthors } from '../../composables/useTopAuthors'
import ChartCard from '../ChartCard.vue'
-const themeStore = useThemeStore()
+const chartTokens = useChartTokens()
const { t } = useI18n()
const { data, loading, error } = useTopAuthors()
@@ -34,9 +33,9 @@ watchEffect(() => {
return parseFloat(((running / total) * 100).toFixed(1))
})
- const palette = getThemePalette(themeStore.resolvedTheme, themeStore.accent)
+ const palette = chartTokens.value.palette()
const primary = palette[0] ?? '#6b7280'
- const mutedColor = readCssColor('--muted-foreground')
+ const mutedColor = chartTokens.value.color('--muted-foreground')
const barColors = items.map((_, i) => {
if (i < 3) return primary
diff --git a/client/src/features/statistics/components/library/TopSeriesChart.vue b/client/src/features/statistics/components/library/TopSeriesChart.vue
index 10d63f4e1..057ed3f63 100644
--- a/client/src/features/statistics/components/library/TopSeriesChart.vue
+++ b/client/src/features/statistics/components/library/TopSeriesChart.vue
@@ -4,12 +4,11 @@ import { useI18n } from 'vue-i18n'
import VChart from 'vue-echarts'
import { Layers } from '@lucide/vue'
-import { useThemeStore } from '@/stores/theme'
-import { getThemePalette, readCssColor } from '@/lib/echarts'
+import { useChartTokens } from '@/composables/useChartTokens'
import { useTopSeries } from '../../composables/useTopSeries'
import ChartCard from '../ChartCard.vue'
-const themeStore = useThemeStore()
+const chartTokens = useChartTokens()
const { t } = useI18n()
const { data, loading, error } = useTopSeries()
@@ -34,9 +33,9 @@ watchEffect(() => {
return parseFloat(((running / total) * 100).toFixed(1))
})
- const palette = getThemePalette(themeStore.resolvedTheme, themeStore.accent)
+ const palette = chartTokens.value.palette()
const primary = palette[0] ?? '#6b7280'
- const mutedColor = readCssColor('--muted-foreground')
+ const mutedColor = chartTokens.value.color('--muted-foreground')
const barColors = items.map((_, i) => {
if (i < 3) return primary
diff --git a/client/src/features/statistics/components/user/FavoriteReadingDaysChart.vue b/client/src/features/statistics/components/user/FavoriteReadingDaysChart.vue
index 99d50c5bd..9d6975045 100644
--- a/client/src/features/statistics/components/user/FavoriteReadingDaysChart.vue
+++ b/client/src/features/statistics/components/user/FavoriteReadingDaysChart.vue
@@ -5,7 +5,7 @@ import VChart from 'vue-echarts'
import { CalendarDays } from '@lucide/vue'
import type { ReadingSessionSourceBucket } from '@bookorbit/types'
-import { useThemeStore } from '@/stores/theme'
+import { useChartTokens } from '@/composables/useChartTokens'
import { DEFAULT_BREAKDOWN_DIMENSION, getBreakdownSeries, type BreakdownDimension } from '../../lib/breakdown'
import { useUserFavoriteReadingDays } from '../../composables/useUserFavoriteReadingDays'
import BreakdownSelect from '../BreakdownSelect.vue'
@@ -16,7 +16,7 @@ const WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
const MIN_EVENTS = 14
const DAYS_WINDOW = 365
-const themeStore = useThemeStore()
+const chartTokens = useChartTokens()
const { t } = useI18n()
const { data, loading, error } = useUserFavoriteReadingDays()
@@ -46,7 +46,7 @@ watchEffect(() => {
const weekdayCounts = weekdayOccurrencesInWindow(DAYS_WINDOW)
const denominatorFor = (dayOfWeek: number) => Math.max(1, weekdayCounts[dayOfWeek] ?? 1)
const formatKeys = [...new Set(data.value.flatMap((item) => Object.keys(item.byFormat)))].sort()
- const seriesMeta = getBreakdownSeries(dimension.value, `${themeStore.resolvedTheme}:${themeStore.accent}`, formatKeys)
+ const seriesMeta = getBreakdownSeries(dimension.value, chartTokens.value.key, formatKeys)
const series = seriesMeta.map((meta) => ({
type: 'bar',
diff --git a/client/src/features/statistics/components/user/GenreReadingTimeTreemapChart.vue b/client/src/features/statistics/components/user/GenreReadingTimeTreemapChart.vue
index 0f2c845c0..c00e6ffe8 100644
--- a/client/src/features/statistics/components/user/GenreReadingTimeTreemapChart.vue
+++ b/client/src/features/statistics/components/user/GenreReadingTimeTreemapChart.vue
@@ -5,15 +5,14 @@ import VChart from 'vue-echarts'
import { Tag } from '@lucide/vue'
import { READING_SESSION_SOURCE_BUCKETS, READING_SESSION_SOURCE_BUCKET_LABELS } from '@bookorbit/types'
-import { useThemeStore } from '@/stores/theme'
-import { getThemePalette, readCssColor } from '@/lib/echarts'
+import { useChartTokens } from '@/composables/useChartTokens'
import { useUserGenreReadingTime } from '../../composables/useUserGenreReadingTime'
import ChartCard from '../ChartCard.vue'
import ChartEmptyState from '../ChartEmptyState.vue'
const MIN_GENRES = 2
-const themeStore = useThemeStore()
+const chartTokens = useChartTokens()
const { t } = useI18n()
const { data, loading, error } = useUserGenreReadingTime()
@@ -28,8 +27,8 @@ watchEffect(() => {
option.value = {}
if (isEmpty.value || !hasEnoughData.value || !data.value.length) return
- const palette = getThemePalette(themeStore.resolvedTheme, themeStore.accent, 0.8, 0.8)
- const background = readCssColor('--background')
+ const palette = chartTokens.value.palette(0.8, 0.8)
+ const background = chartTokens.value.color('--background')
const bySourceByGenre = new Map(data.value.map((item) => [item.genre, item.bySource]))
option.value = {
diff --git a/client/src/features/statistics/components/user/PeakReadingHoursChart.vue b/client/src/features/statistics/components/user/PeakReadingHoursChart.vue
index bb0b3f3b6..4e4d66e0a 100644
--- a/client/src/features/statistics/components/user/PeakReadingHoursChart.vue
+++ b/client/src/features/statistics/components/user/PeakReadingHoursChart.vue
@@ -5,7 +5,7 @@ import VChart from 'vue-echarts'
import { Clock3 } from '@lucide/vue'
import type { ReadingSessionSourceBucket } from '@bookorbit/types'
-import { useThemeStore } from '@/stores/theme'
+import { useChartTokens } from '@/composables/useChartTokens'
import { DEFAULT_BREAKDOWN_DIMENSION, getBreakdownSeries, type BreakdownDimension } from '../../lib/breakdown'
import { useUserPeakReadingHours } from '../../composables/useUserPeakReadingHours'
import BreakdownSelect from '../BreakdownSelect.vue'
@@ -14,7 +14,7 @@ import ChartEmptyState from '../ChartEmptyState.vue'
const MIN_EVENTS = 20
-const themeStore = useThemeStore()
+const chartTokens = useChartTokens()
const { t } = useI18n()
const { data, loading, error } = useUserPeakReadingHours()
@@ -40,7 +40,7 @@ watchEffect(() => {
if (isEmpty.value || lowConfidence.value || !data.value.length) return
const formatKeys = [...new Set(data.value.flatMap((item) => Object.keys(item.byFormat)))].sort()
- const seriesMeta = getBreakdownSeries(dimension.value, `${themeStore.resolvedTheme}:${themeStore.accent}`, formatKeys)
+ const seriesMeta = getBreakdownSeries(dimension.value, chartTokens.value.key, formatKeys)
const series = seriesMeta.map((meta) => ({
type: 'bar',
name: meta.label,
diff --git a/client/src/features/statistics/components/user/ReadingClockChart.vue b/client/src/features/statistics/components/user/ReadingClockChart.vue
index 67860e8ea..7eabe15ff 100644
--- a/client/src/features/statistics/components/user/ReadingClockChart.vue
+++ b/client/src/features/statistics/components/user/ReadingClockChart.vue
@@ -5,7 +5,7 @@ import VChart from 'vue-echarts'
import { Clock } from '@lucide/vue'
import type { ReadingSessionSourceBucket } from '@bookorbit/types'
-import { useThemeStore } from '@/stores/theme'
+import { useChartTokens } from '@/composables/useChartTokens'
import { DEFAULT_BREAKDOWN_DIMENSION, getBreakdownSeries, type BreakdownDimension } from '../../lib/breakdown'
import { useUserPeakReadingHours } from '../../composables/useUserPeakReadingHours'
import BreakdownSelect from '../BreakdownSelect.vue'
@@ -22,7 +22,7 @@ const HOUR_LABELS = [
const MIN_EVENTS = 20
-const themeStore = useThemeStore()
+const chartTokens = useChartTokens()
const { t } = useI18n()
const { data, loading, error } = useUserPeakReadingHours()
@@ -53,7 +53,7 @@ watchEffect(() => {
if (isEmpty.value || lowConfidence.value || !data.value.length) return
const formatKeys = [...new Set(data.value.flatMap((d) => Object.keys(d.byFormat)))].sort()
- const seriesMeta = getBreakdownSeries(dimension.value, `${themeStore.resolvedTheme}:${themeStore.accent}`, formatKeys)
+ const seriesMeta = getBreakdownSeries(dimension.value, chartTokens.value.key, formatKeys)
const series = seriesMeta.map((meta) => ({
type: 'bar',
diff --git a/client/src/features/statistics/components/user/ReadingHeatmapChart.vue b/client/src/features/statistics/components/user/ReadingHeatmapChart.vue
index ac2ac5164..d85ca2067 100644
--- a/client/src/features/statistics/components/user/ReadingHeatmapChart.vue
+++ b/client/src/features/statistics/components/user/ReadingHeatmapChart.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n'
import VChart from 'vue-echarts'
import { Calendar } from '@lucide/vue'
import { READING_SESSION_SOURCE_BUCKETS, READING_SESSION_SOURCE_BUCKET_LABELS } from '@bookorbit/types'
-import { useThemeStore } from '@/stores/theme'
+import { useChartTokens } from '@/composables/useChartTokens'
import { buildHeatmapPalette } from '@/lib/heatmap-palette'
import { useUserReadingHeatmap } from '../../composables/useUserReadingHeatmap'
@@ -13,7 +13,7 @@ import ChartEmptyState from '../ChartEmptyState.vue'
const MIN_ACTIVE_DAYS = 5
-const themeStore = useThemeStore()
+const chartTokens = useChartTokens()
const { t } = useI18n()
const { data, loading, error } = useUserReadingHeatmap()
@@ -24,8 +24,8 @@ const activeDays = computed(() => data.value.filter((item) => item.eventsCount >
const isEmpty = computed(() => totalEvents.value === 0)
const lowConfidence = computed(() => totalEvents.value > 0 && activeDays.value < MIN_ACTIVE_DAYS)
const heatmapPaletteState = computed(() => ({
- accent: themeStore.accent,
- palette: buildHeatmapPalette({ theme: themeStore.resolvedTheme, profile: 'github' }),
+ key: chartTokens.value.key,
+ palette: buildHeatmapPalette({ theme: chartTokens.value.dark ? 'dark' : 'light', profile: 'github' }),
}))
function buildContributionPieces(scale: string[]) {
diff --git a/client/src/features/statistics/components/user/ReadingPaceScatterChart.vue b/client/src/features/statistics/components/user/ReadingPaceScatterChart.vue
index fe96a110c..5f434fc14 100644
--- a/client/src/features/statistics/components/user/ReadingPaceScatterChart.vue
+++ b/client/src/features/statistics/components/user/ReadingPaceScatterChart.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n'
import VChart from 'vue-echarts'
import { Zap } from '@lucide/vue'
-import { useThemeStore } from '@/stores/theme'
+import { useChartTokens } from '@/composables/useChartTokens'
import { DEFAULT_BREAKDOWN_DIMENSION, getBreakdownSeries, type BreakdownDimension } from '../../lib/breakdown'
import { useUserReadingPace } from '../../composables/useUserReadingPace'
import BreakdownSelect from '../BreakdownSelect.vue'
@@ -13,7 +13,7 @@ import ChartEmptyState from '../ChartEmptyState.vue'
const MIN_SESSIONS = 10
-const themeStore = useThemeStore()
+const chartTokens = useChartTokens()
const { t } = useI18n()
const { data, loading, error } = useUserReadingPace()
@@ -30,7 +30,7 @@ watchEffect(() => {
const visible = data.value.filter((p) => p.durationSeconds > 0 && p.durationSeconds <= 14400 && p.progressDelta > 0 && p.progressDelta <= 100)
const formatKeys = [...new Set(visible.map((p) => p.format))].sort()
- const seriesMeta = getBreakdownSeries(dimension.value, `${themeStore.resolvedTheme}:${themeStore.accent}`, formatKeys)
+ const seriesMeta = getBreakdownSeries(dimension.value, chartTokens.value.key, formatKeys)
const series = seriesMeta.map((meta) => ({
type: 'scatter',
name: meta.label,
diff --git a/client/src/features/statistics/components/user/ReadingSessionTimelineChart.vue b/client/src/features/statistics/components/user/ReadingSessionTimelineChart.vue
index b63302d8d..230753ae5 100644
--- a/client/src/features/statistics/components/user/ReadingSessionTimelineChart.vue
+++ b/client/src/features/statistics/components/user/ReadingSessionTimelineChart.vue
@@ -8,7 +8,7 @@ import { toast } from 'vue-sonner'
import type { UserReadingSessionTimeline, UserReadingSessionTimelineItem, ReadingSessionSourceBucket } from '@bookorbit/types'
import { READING_SESSION_SOURCE_BUCKET_LABELS } from '@bookorbit/types'
-import { useThemeStore } from '@/stores/theme'
+import { useChartTokens } from '@/composables/useChartTokens'
import { useCoverVersions } from '@/features/book/composables/useCoverVersions'
import {
DEFAULT_BREAKDOWN_DIMENSION,
@@ -67,8 +67,8 @@ interface PointerOffset {
const { t } = useI18n()
const { filters } = useStatisticsConfig()
const { coverUrl } = useCoverVersions()
-const themeStore = useThemeStore()
-const themeKey = computed(() => `${themeStore.resolvedTheme}:${themeStore.accent}`)
+const chartTokens = useChartTokens()
+const themeKey = computed(() => chartTokens.value.key)
const dimension = ref
(DEFAULT_BREAKDOWN_DIMENSION)
const now = new Date()
diff --git a/client/src/features/statistics/components/user/SourceDistributionChart.vue b/client/src/features/statistics/components/user/SourceDistributionChart.vue
index be5d6d87b..a793c7dc1 100644
--- a/client/src/features/statistics/components/user/SourceDistributionChart.vue
+++ b/client/src/features/statistics/components/user/SourceDistributionChart.vue
@@ -6,14 +6,14 @@ import { MonitorSmartphone } from '@lucide/vue'
import { READING_SESSION_SOURCE_BUCKET_LABELS } from '@bookorbit/types'
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
-import { useThemeStore } from '@/stores/theme'
+import { useChartTokens } from '@/composables/useChartTokens'
import { resolveSourceBucketColors } from '../../lib/source-bucket-colors'
import { useUserReadingSourceDistribution } from '../../composables/useUserReadingSourceDistribution'
import ChartCard from '../ChartCard.vue'
const { t } = useI18n()
-const themeStore = useThemeStore()
+const chartTokens = useChartTokens()
const { data, loading, error } = useUserReadingSourceDistribution()
const { md } = useBreakpoints(breakpointsTailwind)
@@ -34,7 +34,7 @@ watchEffect(() => {
option.value = {}
if (isEmpty.value) return
- const colors = resolveSourceBucketColors(`${themeStore.resolvedTheme}:${themeStore.accent}`)
+ const colors = resolveSourceBucketColors(chartTokens.value.key)
option.value = {
tooltip: {
diff --git a/client/src/features/statistics/lib/breakdown.test.ts b/client/src/features/statistics/lib/breakdown.test.ts
index 47fd512bd..b50b3dd8e 100644
--- a/client/src/features/statistics/lib/breakdown.test.ts
+++ b/client/src/features/statistics/lib/breakdown.test.ts
@@ -1,8 +1,8 @@
import { describe, expect, it, vi } from 'vitest'
-vi.mock('@/lib/echarts', () => ({
+vi.mock('@/lib/css-color', () => ({
readCssColor: (varName: string) => `rgb(${varName})`,
- oklchToHex: () => '#000000',
+ toLegacyColor: (value: string) => value,
}))
import { BREAKDOWN_OPTIONS, DEFAULT_BREAKDOWN_DIMENSION, getBreakdownColor, getBreakdownSeries } from './breakdown'
diff --git a/client/src/features/statistics/lib/source-bucket-colors.test.ts b/client/src/features/statistics/lib/source-bucket-colors.test.ts
index 6cbd4b8c5..35fb998f2 100644
--- a/client/src/features/statistics/lib/source-bucket-colors.test.ts
+++ b/client/src/features/statistics/lib/source-bucket-colors.test.ts
@@ -1,23 +1,11 @@
import { beforeEach, describe, expect, it, vi } from 'vitest'
const mocks = vi.hoisted(() => ({
- readCssColor: vi.fn<(varName: string) => string>(
- (varName: string) =>
- (
- ({
- '--pill-web': 'oklch(0.72 0.14 245)',
- '--pill-ios': 'oklch(0.75 0.14 150)',
- '--pill-watchos': 'oklch(0.76 0.15 35)',
- '--pill-android': 'oklch(0.75 0.14 95)',
- '--pill-koreader': 'oklch(0.72 0.17 295)',
- '--pill-kobo': 'oklch(0.74 0.1 195)',
- }) as Record
- )[varName] ?? 'oklch(0.5 0.1 0)',
- ),
- oklchToHex: vi.fn<() => string>(() => '#abcdef'),
+ readCssColor: vi.fn<(varName: string) => string>((varName: string) => `oklch(${varName})`),
+ toLegacyColor: vi.fn<(input: string) => string>(() => '#abcdef'),
}))
-vi.mock('@/lib/echarts', () => ({ readCssColor: mocks.readCssColor, oklchToHex: mocks.oklchToHex }))
+vi.mock('@/lib/css-color', () => ({ readCssColor: mocks.readCssColor, toLegacyColor: mocks.toLegacyColor }))
import { resolveSourceBucketColors, SOURCE_BUCKET_COLOR_TOKENS } from './source-bucket-colors'
@@ -37,56 +25,20 @@ describe('source-bucket-colors', () => {
})
})
- it('converts oklch tokens to a zrender-parseable hex so bars do not vanish on hover', () => {
+ it('reads each pill token and converts it to a zrender-parseable colour', () => {
const colors = resolveSourceBucketColors('dark:violet')
expect(colors).toEqual({ bookorbit: '#abcdef', ios: '#abcdef', watchos: '#abcdef', android: '#abcdef', koreader: '#abcdef', kobo: '#abcdef' })
- expect(mocks.readCssColor).toHaveBeenCalledWith('--pill-web')
- expect(mocks.readCssColor).toHaveBeenCalledWith('--pill-ios')
- expect(mocks.readCssColor).toHaveBeenCalledWith('--pill-watchos')
- expect(mocks.readCssColor).toHaveBeenCalledWith('--pill-android')
- expect(mocks.readCssColor).toHaveBeenCalledWith('--pill-koreader')
- expect(mocks.readCssColor).toHaveBeenCalledWith('--pill-kobo')
- expect(mocks.oklchToHex).toHaveBeenCalledTimes(6)
- })
-
- it('passes through values that are already rgb/hex', () => {
- mocks.readCssColor.mockReturnValueOnce('rgb(1, 2, 3)')
- const colors = resolveSourceBucketColors('passthrough-rgb')
- expect(colors.bookorbit).toBe('rgb(1, 2, 3)')
-
- mocks.readCssColor.mockReturnValueOnce('#123456')
- const hexColors = resolveSourceBucketColors('passthrough-hex')
- expect(hexColors.bookorbit).toBe('#123456')
- })
-
- it('converts percentage lightness and chroma to fractional oklch components', () => {
- mocks.readCssColor.mockReturnValueOnce('oklch(72% 50% 245)')
-
- resolveSourceBucketColors('percentage-key')
-
- expect(mocks.oklchToHex).toHaveBeenCalledWith(0.72, 0.2, 245)
- })
-
- it('ignores the optional alpha component after the slash', () => {
- mocks.readCssColor.mockReturnValueOnce('oklch(0.72 0.14 245 / 0.5)')
-
- resolveSourceBucketColors('alpha-key')
-
- expect(mocks.oklchToHex).toHaveBeenCalledWith(0.72, 0.14, 245)
- })
-
- it('returns the raw value when the oklch components are not finite', () => {
- mocks.readCssColor.mockReturnValueOnce('oklch(not a color)')
-
- const colors = resolveSourceBucketColors('malformed-key')
-
- expect(colors.bookorbit).toBe('oklch(not a color)')
+ for (const token of Object.values(SOURCE_BUCKET_COLOR_TOKENS)) {
+ expect(mocks.readCssColor).toHaveBeenCalledWith(token)
+ expect(mocks.toLegacyColor).toHaveBeenCalledWith(`oklch(${token})`)
+ }
})
it('caches resolved colors per theme key', () => {
const first = resolveSourceBucketColors('light:violet')
const second = resolveSourceBucketColors('light:violet')
expect(first).toBe(second)
+ expect(mocks.readCssColor).toHaveBeenCalledTimes(6)
})
})
diff --git a/client/src/features/statistics/lib/source-bucket-colors.ts b/client/src/features/statistics/lib/source-bucket-colors.ts
index 395f468ed..223da7a96 100644
--- a/client/src/features/statistics/lib/source-bucket-colors.ts
+++ b/client/src/features/statistics/lib/source-bucket-colors.ts
@@ -1,4 +1,4 @@
-import { oklchToHex, readCssColor } from '@/lib/echarts'
+import { readCssColor, toLegacyColor } from '@/lib/css-color'
import type { ReadingSessionSourceBucket } from '@bookorbit/types'
// Reading-source buckets use fixed light/dark pill tokens so the same source has the
@@ -14,39 +14,19 @@ export const SOURCE_BUCKET_COLOR_TOKENS: Record>()
-// The pill tokens are authored in oklch(), and getComputedStyle serializes them back as
-// oklch() strings. The browser paints `fill: oklch(...)` fine, but zrender cannot parse
-// oklch when it derives the hover/emphasis color, which makes the hovered bar vanish.
-// Convert to a hex string zrender can parse, mirroring how getThemePalette() emits hex.
-function toParseableColor(input: string): string {
- const value = input.trim()
- if (value.startsWith('#') || value.startsWith('rgb')) return value
-
- const match = /^oklch\(([^)]+)\)/i.exec(value)
- const inside = match?.[1]
- if (inside) {
- const [lRaw, cRaw, hRaw] = inside.split('/')[0]!.trim().split(/\s+/)
- const l = lRaw?.endsWith('%') ? parseFloat(lRaw) / 100 : parseFloat(lRaw ?? '')
- const c = cRaw?.endsWith('%') ? (parseFloat(cRaw) / 100) * 0.4 : parseFloat(cRaw ?? '')
- const h = parseFloat(hRaw ?? '')
- if (Number.isFinite(l) && Number.isFinite(c) && Number.isFinite(h)) return oklchToHex(l, c, h)
- }
- return value
-}
-
-// `themeKey` (e.g. `${theme}:${accent}`) is supplied by the caller so a computed re-resolves
+// `themeKey` (the theme store's `appearanceKey`) is supplied by the caller so a computed re-resolves
// colors when the active theme changes; the CSS variables themselves already encode the theme.
export function resolveSourceBucketColors(themeKey: string): Record {
const cached = cache.get(themeKey)
if (cached) return cached
const colors: Record = {
- bookorbit: toParseableColor(readCssColor(SOURCE_BUCKET_COLOR_TOKENS.bookorbit)),
- ios: toParseableColor(readCssColor(SOURCE_BUCKET_COLOR_TOKENS.ios)),
- watchos: toParseableColor(readCssColor(SOURCE_BUCKET_COLOR_TOKENS.watchos)),
- android: toParseableColor(readCssColor(SOURCE_BUCKET_COLOR_TOKENS.android)),
- koreader: toParseableColor(readCssColor(SOURCE_BUCKET_COLOR_TOKENS.koreader)),
- kobo: toParseableColor(readCssColor(SOURCE_BUCKET_COLOR_TOKENS.kobo)),
+ bookorbit: toLegacyColor(readCssColor(SOURCE_BUCKET_COLOR_TOKENS.bookorbit)),
+ ios: toLegacyColor(readCssColor(SOURCE_BUCKET_COLOR_TOKENS.ios)),
+ watchos: toLegacyColor(readCssColor(SOURCE_BUCKET_COLOR_TOKENS.watchos)),
+ android: toLegacyColor(readCssColor(SOURCE_BUCKET_COLOR_TOKENS.android)),
+ koreader: toLegacyColor(readCssColor(SOURCE_BUCKET_COLOR_TOKENS.koreader)),
+ kobo: toLegacyColor(readCssColor(SOURCE_BUCKET_COLOR_TOKENS.kobo)),
}
cache.set(themeKey, colors)
return colors
diff --git a/client/src/features/storygraph/components/StorygraphConnectionCard.vue b/client/src/features/storygraph/components/StorygraphConnectionCard.vue
index cfa12ba9d..34312b083 100644
--- a/client/src/features/storygraph/components/StorygraphConnectionCard.vue
+++ b/client/src/features/storygraph/components/StorygraphConnectionCard.vue
@@ -130,8 +130,8 @@ function selectBookSyncMode(mode: 'all_eligible' | 'selected_only') {
Open Developer Tools (F12) and go to Application/Storage → Cookies for that site.
- Copy the values of the _storygraph_session and
- remember_user_token cookies below.
+ Copy the values of the _storygraph_session and
+ remember_user_token cookies below.
diff --git a/client/src/features/storygraph/components/StorygraphLinkedBooks.vue b/client/src/features/storygraph/components/StorygraphLinkedBooks.vue
index b97b30749..b6864ca52 100644
--- a/client/src/features/storygraph/components/StorygraphLinkedBooks.vue
+++ b/client/src/features/storygraph/components/StorygraphLinkedBooks.vue
@@ -204,7 +204,7 @@ async function handleSetEdition(book: StorygraphLinkedBook, edition: StorygraphE
This book couldn't be matched to StoryGraph automatically. Use "Try auto-match" to search again, or paste the book's StoryGraph URL, or
- its StoryGraph book ID (the code after /books/ in the URL, not an ISBN), below for an exact
+ its StoryGraph book ID (the code after /books/ in the URL, not an ISBN), below for an exact
link.
diff --git a/client/src/features/tools/book-duplicates/components/DismissedDuplicatesSection.vue b/client/src/features/tools/book-duplicates/components/DismissedDuplicatesSection.vue
index be30c5bf9..9c2f1f8b4 100644
--- a/client/src/features/tools/book-duplicates/components/DismissedDuplicatesSection.vue
+++ b/client/src/features/tools/book-duplicates/components/DismissedDuplicatesSection.vue
@@ -51,7 +51,7 @@ function handleRestore(dismissal: BookDuplicateDismissal): void {
{{ formatDate(new Date(dismissal.createdAt)) }}
- ↑
- ↓
+ ↑
+ ↓
{{ t('tools.bulkRename.review.keyboardHint') }} ·
- S
+ S
{{ t('tools.bulkRename.review.keyboardSkip') }}
diff --git a/client/src/features/tools/bulk-rename/components/PathDiffLine.vue b/client/src/features/tools/bulk-rename/components/PathDiffLine.vue
index 68499d29d..69227c898 100644
--- a/client/src/features/tools/bulk-rename/components/PathDiffLine.vue
+++ b/client/src/features/tools/bulk-rename/components/PathDiffLine.vue
@@ -65,7 +65,7 @@ const pieces = computed<(Fold | Segment)[]>(() => {
/
-
+
{{ t('tools.bulkRename.detail.foldedFolders', { count: piece.count }) }}
diff --git a/client/src/features/tools/entity-manager/components/BrowseMergeModal.vue b/client/src/features/tools/entity-manager/components/BrowseMergeModal.vue
index 664313ff9..44f0057a4 100644
--- a/client/src/features/tools/entity-manager/components/BrowseMergeModal.vue
+++ b/client/src/features/tools/entity-manager/components/BrowseMergeModal.vue
@@ -73,7 +73,7 @@ function handleCancel(): void {