feat(core): add support for legends ticks to nivo theme

Author: plouc

packages/core/index.d.ts

@@ -87,6 +87,13 @@ declare module '@nivo/core' {
                 text: Partial<React.CSSProperties>
             }
             text: Partial<React.CSSProperties>
+            ticks: {
+                line: Partial<React.CSSProperties>
+                text: Partial<React.CSSProperties>
+            }
+            title: {
+                text: Partial<React.CSSProperties>
+            }
         }
         labels: {
             text: Partial<React.CSSProperties>
@@ -165,6 +172,13 @@ declare module '@nivo/core' {
                     text: CompleteTheme['legends']['hidden']['text']
                 }>
                 text: Partial<CompleteTheme['legends']['text']>
+                ticks: Partial<{
+                    line: Partial<CompleteTheme['legends']['ticks']['line']>
+                    text: Partial<CompleteTheme['legends']['ticks']['text']>
+                }>
+                title: Partial<{
+                    text: Partial<CompleteTheme['legends']['title']['text']>
+                }>
             }>
             labels: Partial<{
                 text: Partial<CompleteTheme['labels']['text']>

packages/core/src/theming/defaultTheme.js

@@ -49,6 +49,18 @@ export const defaultTheme = {
             },
         },
         text: {},
+        ticks: {
+            line: {
+                stroke: '#777777',
+                strokeWidth: 1,
+            },
+            text: {
+                fontSize: 10,
+            },
+        },
+        title: {
+            text: {},
+        },
     },
     labels: {
         text: {},

packages/core/src/theming/extend.js

@@ -14,6 +14,8 @@ const fontProps = [
     'axis.ticks.text',
     'axis.legend.text',
     'legends.text',
+    'legends.ticks.text',
+    'legends.title.text',
     'labels.text',
     'dots.text',
     'markers.text',

website/src/theming/theme.ts

@@ -79,6 +79,23 @@ const lightTheme: DefaultTheme = {
             text: {
                 fontSize: 12,
             },
+            ticks: {
+                line: {
+                    strokeWidth: 1,
+                    stroke: '#637079',
+                },
+                text: {
+                    fill: '#6a7c89',
+                    fontSize: 10,
+                },
+            },
+            title: {
+                text: {
+                    fill: '#6f6f6f',
+                    fontSize: 10,
+                    fontWeight: 800,
+                },
+            },
         },
         tooltip: {
             container: {
@@ -198,6 +215,23 @@ const darkTheme: DefaultTheme = {
                 fontSize: 12,
                 fill: '#8d9cab',
             },
+            ticks: {
+                line: {
+                    strokeWidth: 1,
+                    stroke: '#c8d4e0',
+                },
+                text: {
+                    fill: '#8d9cab',
+                    fontSize: 10,
+                },
+            },
+            title: {
+                text: {
+                    fill: '#ccd7e2',
+                    fontSize: 10,
+                    fontWeight: 800,
+                },
+            },
         },
         tooltip: {
             container: {