feat(theming): move theming to its own package

Makefile

@@ -152,7 +152,8 @@ pkgs-test-cover: ##@1 packages run tests for all packages with code coverage
 
 pkgs-build: pkgs-types ##@1 packages build all packages
 	@# Using exit code 255 in case of error as it'll make xargs stop immediately.
-	@export SKIP_TYPES=TRUE;find ./packages -type d -maxdepth 1 ! -path ./packages \
+	@# Skipping type generation as it's already done via `pkgs-types` in one go.
+	@export SKIP_TYPES=TRUE; find ./packages -type d -maxdepth 1 ! -path ./packages \
         | sed 's|^./packages/||' \
         | xargs -P 8 -I '{}' sh -c '$(MAKE) pkg-build-{} || exit 255'
 

packages/annotations/package.json

@@ -30,6 +30,7 @@
     "dependencies": {
         "@nivo/colors": "workspace:*",
         "@nivo/core": "workspace:*",
+        "@nivo/theming": "workspace:*",
         "@react-spring/web": "9.4.5 || ^9.7.2",
         "@types/prop-types": "^15.7.2",
         "lodash": "^4.17.21",

packages/annotations/src/AnnotationLink.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from 'react'
 import { animated } from '@react-spring/web'
-import { useAnimatedPath, useTheme } from '@nivo/core'
+import { useAnimatedPath } from '@nivo/core'
+import { useTheme } from '@nivo/theming'
 
 export const AnnotationLink = ({
     points,

packages/annotations/src/AnnotationNote.tsx

@@ -1,7 +1,8 @@
 import { createElement } from 'react'
 import omit from 'lodash/omit'
 import { useSpring, animated } from '@react-spring/web'
-import { useTheme, useMotionConfig } from '@nivo/core'
+import { useMotionConfig } from '@nivo/core'
+import { useTheme } from '@nivo/theming'
 import { NoteSvg } from './types'
 
 export const AnnotationNote = <Datum,>({

packages/annotations/src/CircleAnnotationOutline.tsx

@@ -1,5 +1,6 @@
 import { useSpring, animated } from '@react-spring/web'
-import { useMotionConfig, useTheme } from '@nivo/core'
+import { useMotionConfig } from '@nivo/core'
+import { useTheme } from '@nivo/theming'
 
 export const CircleAnnotationOutline = ({ x, y, size }: { x: number; y: number; size: number }) => {
     const theme = useTheme()

packages/annotations/src/DotAnnotationOutline.tsx

@@ -1,5 +1,6 @@
 import { useSpring, animated } from '@react-spring/web'
-import { useMotionConfig, useTheme } from '@nivo/core'
+import { useMotionConfig } from '@nivo/core'
+import { useTheme } from '@nivo/theming'
 import { defaultProps } from './props'
 
 export const DotAnnotationOutline = ({

packages/annotations/src/RectAnnotationOutline.tsx

@@ -1,5 +1,6 @@
 import { useSpring, animated } from '@react-spring/web'
-import { useMotionConfig, useTheme } from '@nivo/core'
+import { useMotionConfig } from '@nivo/core'
+import { useTheme } from '@nivo/theming'
 
 export const RectAnnotationOutline = ({
     x,

packages/annotations/src/canvas.ts

@@ -1,4 +1,4 @@
-import { CompleteTheme } from '@nivo/core'
+import { Theme } from '@nivo/theming'
 import { ComputedAnnotation } from './types'
 import { isCanvasNote, isCircleAnnotation, isDotAnnotation, isRectAnnotation } from './utils'
 
@@ -19,7 +19,7 @@ export const renderAnnotationsToCanvas = <Datum>(
         theme,
     }: {
         annotations: ComputedAnnotation<Datum>[]
-        theme: CompleteTheme
+        theme: Theme
     }
 ) => {
     if (annotations.length === 0) return

packages/annotations/src/types.ts

@@ -1,4 +1,4 @@
-import { CompleteTheme } from '@nivo/core'
+import { Theme } from '@nivo/theming'
 import { ReactElement } from 'react'
 
 // The types below are from lodash but the babel plugin won't let us import it
@@ -38,7 +38,7 @@ export type NoteCanvasRenderer<Datum> = (
         datum: Datum
         x: number
         y: number
-        theme: CompleteTheme
+        theme: Theme
     }
 ) => void
 

packages/arcs/package.json

@@ -30,6 +30,7 @@
     "dependencies": {
         "@nivo/colors": "workspace:*",
         "@nivo/core": "workspace:*",
+        "@nivo/theming": "workspace:*",
         "@react-spring/web": "9.4.5 || ^9.7.2",
         "@types/d3-shape": "^2.0.0",
         "d3-shape": "^1.3.5"

packages/arcs/src/ArcsLayer.tsx

@@ -1,5 +1,5 @@
 import { createElement } from 'react'
-import { useTheme } from '@nivo/core'
+import { useTheme } from '@nivo/theming'
 import { InheritedColorConfig, useInheritedColor } from '@nivo/colors'
 import { DatumWithArcAndColor, ArcGenerator } from './types'
 import { useArcsTransition } from './useArcsTransition'

packages/arcs/src/arc_labels/ArcLabel.tsx

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'react'
 import { SpringValue, Interpolation, animated } from '@react-spring/web'
-import { useTheme } from '@nivo/core'
+import { useTheme } from '@nivo/theming'
 import { DatumWithArcAndColor } from '../types'
 
 const staticStyle: CSSProperties = {

packages/arcs/src/arc_labels/ArcLabelsLayer.tsx

@@ -1,5 +1,6 @@
 import { createElement, useMemo } from 'react'
-import { PropertyAccessor, usePropertyAccessor, radiansToDegrees, useTheme } from '@nivo/core'
+import { PropertyAccessor, usePropertyAccessor, radiansToDegrees } from '@nivo/core'
+import { useTheme } from '@nivo/theming'
 import { useInheritedColor } from '@nivo/colors'
 import { useArcCentersTransition } from '../centers'
 import { ArcTransitionMode } from '../arcTransitionMode'

packages/arcs/src/arc_labels/canvas.ts

@@ -1,11 +1,11 @@
-import { CompleteTheme } from '@nivo/core'
+import { Theme } from '@nivo/theming'
 import { DatumWithArcAndColor } from '../types'
 import { ArcLabel } from './useArcLabels'
 
 export const drawCanvasArcLabels = <Datum extends DatumWithArcAndColor>(
     ctx: CanvasRenderingContext2D,
     labels: ArcLabel<Datum>[],
-    theme: CompleteTheme
+    theme: Theme
 ) => {
     ctx.textAlign = 'center'
     ctx.textBaseline = 'middle'

packages/arcs/src/arc_labels/useArcLabels.ts

@@ -1,5 +1,6 @@
 import { useCallback } from 'react'
-import { PropertyAccessor, usePropertyAccessor, useTheme } from '@nivo/core'
+import { PropertyAccessor, usePropertyAccessor } from '@nivo/core'
+import { useTheme } from '@nivo/theming'
 import { InheritedColorConfig, useInheritedColor } from '@nivo/colors'
 import { DatumWithArcAndColor } from '../types'
 import { useArcCenters, ArcCenter } from '../centers'

packages/arcs/src/arc_link_labels/ArcLinkLabel.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from '@nivo/core'
+import { useTheme } from '@nivo/theming'
 import { SpringValue, Interpolation, animated } from '@react-spring/web'
 import { DatumWithArcAndColor } from '../types'
 

packages/arcs/src/arc_link_labels/canvas.ts

@@ -1,15 +1,13 @@
-import {
-    // @ts-ignore
-    textPropsByEngine,
-    CompleteTheme,
-} from '@nivo/core'
+// @ts-ignore
+import { textPropsByEngine } from '@nivo/core'
+import { Theme } from '@nivo/theming'
 import { DatumWithArcAndColor } from '../types'
 import { ArcLinkLabel } from './types'
 
 export const drawCanvasArcLinkLabels = <Datum extends DatumWithArcAndColor>(
     ctx: CanvasRenderingContext2D,
     labels: ArcLinkLabel<Datum>[],
-    theme: CompleteTheme,
+    theme: Theme,
     strokeWidth: number
 ) => {
     ctx.textBaseline = 'middle'

packages/arcs/src/arc_link_labels/useArcLinkLabels.ts

@@ -1,5 +1,6 @@
 import { useCallback } from 'react'
-import { PropertyAccessor, usePropertyAccessor, useTheme } from '@nivo/core'
+import { PropertyAccessor, usePropertyAccessor } from '@nivo/core'
+import { useTheme } from '@nivo/theming'
 import { InheritedColorConfig, useInheritedColor } from '@nivo/colors'
 import { DatumWithArcAndColor } from '../types'
 import { ArcLinkWithDatum, ArcLinkLabel } from './types'

packages/arcs/src/arc_link_labels/useArcLinkLabelsTransition.ts

@@ -1,7 +1,8 @@
 import { useMemo } from 'react'
 import { SpringValue, useTransition, to } from '@react-spring/web'
 import { line } from 'd3-shape'
-import { useMotionConfig, useTheme } from '@nivo/core'
+import { useMotionConfig } from '@nivo/core'
+import { useTheme } from '@nivo/theming'
 import { InheritedColorConfig, useInheritedColor } from '@nivo/colors'
 import { DatumWithArcAndColor, Point } from '../types'
 import { useFilteredDataBySkipAngle } from '../utils'

packages/axes/package.json

@@ -29,6 +29,7 @@
     "dependencies": {
         "@nivo/core": "workspace:*",
         "@nivo/scales": "workspace:*",
+        "@nivo/theming": "workspace:*",
         "@react-spring/web": "9.4.5 || ^9.7.2",
         "@types/d3-format": "^1.4.1",
         "@types/d3-time-format": "^2.3.1",

packages/axes/src/canvas.ts

@@ -1,4 +1,5 @@
-import { degreesToRadians, CompleteTheme } from '@nivo/core'
+import { degreesToRadians } from '@nivo/core'
+import { Theme } from '@nivo/theming'
 import { ScaleValue, AnyScale, TicksSpec } from '@nivo/scales'
 import { computeCartesianTicks, getFormatter, computeGridLines } from './compute'
 import { positions } from './props'
@@ -40,7 +41,7 @@ export const renderAxisToCanvas = <Value extends ScaleValue>(
         legend?: string
         legendPosition?: AxisLegendPosition
         legendOffset?: number
-        theme: CompleteTheme
+        theme: Theme
     }
 ) => {
     const { ticks, textAlign, textBaseline } = computeCartesianTicks({
@@ -189,7 +190,7 @@ export const renderAxesToCanvas = <X extends ScaleValue, Y extends ScaleValue>(
         right?: CanvasAxisProps<Y> | null
         bottom?: CanvasAxisProps<X> | null
         left?: CanvasAxisProps<Y> | null
-        theme: CompleteTheme
+        theme: Theme
     }
 ) => {
     const axes = { top, right, bottom, left }

packages/axes/src/components/Axis.tsx

@@ -1,7 +1,8 @@
 import { useMemo, memo, useCallback } from 'react'
 import * as React from 'react'
 import { useSpring, useTransition, animated } from '@react-spring/web'
-import { useTheme, useMotionConfig } from '@nivo/core'
+import { useMotionConfig } from '@nivo/core'
+import { useTheme } from '@nivo/theming'
 import { ScaleValue, AnyScale } from '@nivo/scales'
 import { computeCartesianTicks, getFormatter } from '../compute'
 import { AxisTick } from './AxisTick'

packages/axes/src/components/AxisTick.tsx

@@ -1,7 +1,7 @@
 import { useMemo, memo } from 'react'
 import * as React from 'react'
 import { animated } from '@react-spring/web'
-import { useTheme } from '@nivo/core'
+import { useTheme } from '@nivo/theming'
 import { ScaleValue } from '@nivo/scales'
 import { AxisTickProps } from '../types'
 

packages/axes/src/components/GridLine.tsx

@@ -1,6 +1,6 @@
 import { memo, SVGAttributes } from 'react'
 import { SpringValues, animated } from '@react-spring/web'
-import { useTheme } from '@nivo/core'
+import { useTheme } from '@nivo/theming'
 
 export const GridLine = memo(
     ({

packages/bar/package.json

@@ -35,6 +35,7 @@
         "@nivo/core": "workspace:*",
         "@nivo/legends": "workspace:*",
         "@nivo/scales": "workspace:*",
+        "@nivo/theming": "workspace:*",
         "@nivo/tooltip": "workspace:*",
         "@react-spring/web": "9.4.5 || ^9.7.2",
         "@types/d3-scale": "^3.2.3",

packages/bar/src/BarCanvas.tsx

@@ -5,14 +5,8 @@ import {
     BarDatum,
     ComputedBarDatum,
 } from './types'
-import {
-    Container,
-    Margin,
-    getRelativeCursor,
-    isCursorInRect,
-    useDimensions,
-    useTheme,
-} from '@nivo/core'
+import { Container, Margin, getRelativeCursor, isCursorInRect, useDimensions } from '@nivo/core'
+import { useTheme } from '@nivo/theming'
 import {
     ForwardedRef,
     createElement,

packages/bar/src/BarItem.tsx

@@ -1,6 +1,6 @@
 import { createElement, MouseEvent, useCallback, useMemo } from 'react'
 import { animated, to } from '@react-spring/web'
-import { useTheme } from '@nivo/core'
+import { useTheme } from '@nivo/theming'
 import { useTooltip } from '@nivo/tooltip'
 import { BarDatum, BarItemProps } from './types'
 

packages/bar/src/hooks.ts

@@ -1,6 +1,7 @@
 import { useCallback, useMemo, useState } from 'react'
 import { useInheritedColor, useOrdinalColorScale } from '@nivo/colors'
-import { usePropertyAccessor, useTheme, useValueFormatter, Margin } from '@nivo/core'
+import { usePropertyAccessor, useValueFormatter, Margin } from '@nivo/core'
+import { useTheme } from '@nivo/theming'
 import {
     DataProps,
     BarCommonProps,

packages/bar/src/types.ts

@@ -9,9 +9,9 @@ import {
     MotionProps,
     PropertyAccessor,
     SvgDefsAndFill,
-    Theme,
     ValueFormat,
 } from '@nivo/core'
+import { PartialTheme } from '@nivo/theming'
 import { InheritedColorConfig, OrdinalColorScaleConfig } from '@nivo/colors'
 import { LegendProps } from '@nivo/legends'
 import { AnyScale, ScaleSpec, ScaleBandSpec } from '@nivo/scales'
@@ -251,7 +251,7 @@ export type BarCommonProps<RawDatum> = {
 
     colorBy: 'id' | 'indexValue'
     colors: OrdinalColorScaleConfig<ComputedDatum<RawDatum>>
-    theme: Theme
+    theme: PartialTheme
 
     annotations: AnnotationMatcher<ComputedBarDatum<RawDatum>>[]
     legends: BarLegendProps[]

packages/boxplot/package.json

@@ -40,6 +40,7 @@
         "@nivo/core": "workspace:*",
         "@nivo/legends": "workspace:*",
         "@nivo/scales": "workspace:*",
+        "@nivo/theming": "workspace:*",
         "@nivo/tooltip": "workspace:*",
         "@react-spring/web": "9.4.5 || ^9.7.2",
         "@types/d3-scale": "^3.2.3",

packages/boxplot/src/BoxPlotTooltip.tsx

@@ -1,7 +1,7 @@
 import { BoxPlotSummaryFormatted, BoxPlotTooltipProps, BoxPlotSummary } from './types'
 import { Chip } from '@nivo/tooltip'
 import { memo } from 'react'
-import { useTheme, CompleteTheme } from '@nivo/core'
+import { useTheme, Theme } from '@nivo/theming'
 
 interface BoxPlotSummaryTooltipProps {
     label: string
@@ -23,11 +23,11 @@ export const defaultTranslation = {
     Quantiles: 'Quantiles',
 }
 
-type ExtendedTheme = CompleteTheme & {
+type ExtendedTheme = Theme & {
     translation: Translation
 }
 
-const hasTranslation = (theme: CompleteTheme | ExtendedTheme): theme is ExtendedTheme => {
+const hasTranslation = (theme: Theme | ExtendedTheme): theme is ExtendedTheme => {
     return 'translation' in theme
 }
 

packages/boxplot/src/hooks.ts

@@ -1,7 +1,8 @@
 import { useMemo, useState } from 'react'
 import { SpringConfig, useTransition } from '@react-spring/web'
 import { useInheritedColor, useOrdinalColorScale } from '@nivo/colors'
-import { PropertyAccessor, usePropertyAccessor, useTheme, useValueFormatter } from '@nivo/core'
+import { PropertyAccessor, usePropertyAccessor, useValueFormatter } from '@nivo/core'
+import { useTheme } from '@nivo/theming'
 import {
     BoxPlotCommonProps,
     BoxPlotDatum,

packages/boxplot/src/types.ts

@@ -9,9 +9,9 @@ import {
     MotionProps,
     PropertyAccessor,
     SvgDefsAndFill,
-    Theme,
     ValueFormat,
 } from '@nivo/core'
+import { PartialTheme } from '@nivo/theming'
 import { InheritedColorConfig, OrdinalColorScaleConfig } from '@nivo/colors'
 import { LegendProps } from '@nivo/legends'
 import {
@@ -231,7 +231,7 @@ export type BoxPlotCommonProps<RawDatum> = {
 
     colorBy: 'group' | 'subGroup'
     colors: OrdinalColorScaleConfig<BoxPlotSummary>
-    theme: Theme & { translation: BoxPlotDatum }
+    theme: PartialTheme & { translation: BoxPlotDatum }
 
     annotations: AnnotationMatcher<ComputedBoxPlotSummary>[]
     legends: LegendProps[]

packages/bullet/package.json

@@ -34,6 +34,7 @@
         "@nivo/core": "workspace:*",
         "@nivo/legends": "workspace:*",
         "@nivo/scales": "workspace:*",
+        "@nivo/theming": "workspace:*",
         "@nivo/tooltip": "workspace:*",
         "@react-spring/web": "9.4.5 || ^9.7.2"
     },

packages/bullet/src/BulletItem.tsx

@@ -1,8 +1,12 @@
 import { useMemo } from 'react'
 import { useSpring, animated } from '@react-spring/web'
 import { Axis } from '@nivo/axes'
-// @ts-ignore
-import { getColorScale, useMotionConfig, useTheme } from '@nivo/core'
+import {
+    // @ts-ignore
+    getColorScale,
+    useMotionConfig,
+} from '@nivo/core'
+import { useTheme } from '@nivo/theming'
 import { useTooltip } from '@nivo/tooltip'
 import { stackValues } from './compute'
 import { BulletMarkers } from './BulletMarkers'