diff --git a/packages/core/index.d.ts b/packages/core/index.d.ts index 07cadd9d2e..bcc055ac52 100644 --- a/packages/core/index.d.ts +++ b/packages/core/index.d.ts @@ -86,14 +86,14 @@ declare module '@nivo/core' { }> text: Partial } + title: { + text: Partial + } text: Partial ticks: { line: Partial text: Partial } - title: { - text: Partial - } } labels: { text: Partial @@ -171,14 +171,14 @@ declare module '@nivo/core' { symbol: CompleteTheme['legends']['hidden']['symbol'] text: CompleteTheme['legends']['hidden']['text'] }> + title: Partial<{ + text: Partial + }> text: Partial ticks: Partial<{ line: Partial text: Partial }> - title: Partial<{ - text: Partial - }> }> labels: Partial<{ text: Partial diff --git a/packages/core/src/theming/extend.js b/packages/core/src/theming/extend.js index ecdf11bb47..2c660aecb6 100644 --- a/packages/core/src/theming/extend.js +++ b/packages/core/src/theming/extend.js @@ -13,6 +13,7 @@ import set from 'lodash/set' const fontProps = [ 'axis.ticks.text', 'axis.legend.text', + 'legends.title.text', 'legends.text', 'legends.ticks.text', 'legends.title.text', diff --git a/website/src/components/guides/theming/ThemedBar.tsx b/website/src/components/guides/theming/ThemedBar.tsx new file mode 100644 index 0000000000..bc3d218ac6 --- /dev/null +++ b/website/src/components/guides/theming/ThemedBar.tsx @@ -0,0 +1,75 @@ +import React from 'react' +import { CompleteTheme } from '@nivo/core' +import { ResponsiveBar } from '@nivo/bar' +import { colorSchemes } from '@nivo/colors' + +export const ThemedBar = ({ theme }: { theme: CompleteTheme }) => { + return ( + + ) +} diff --git a/website/src/components/guides/theming/ThemedHeatMap.tsx b/website/src/components/guides/theming/ThemedHeatMap.tsx new file mode 100644 index 0000000000..a0be93559f --- /dev/null +++ b/website/src/components/guides/theming/ThemedHeatMap.tsx @@ -0,0 +1,66 @@ +import React, { useMemo } from 'react' +import { CompleteTheme } from '@nivo/core' +import { ResponsiveHeatMap } from '@nivo/heatmap' +import { generateXYSeries } from '@nivo/generators' + +export const ThemedHeatMap = ({ theme }: { theme: CompleteTheme }) => { + const data = useMemo( + () => + generateXYSeries({ + serieIds: ['A', 'B', 'C', 'D', 'E'], + x: { values: ['A', 'B', 'C', 'D', 'E'] }, + y: { + length: NaN, + min: -100, + max: 100, + round: true, + }, + }), + [] + ) + + return ( + + ) +} diff --git a/website/src/components/guides/theming/ThemedLine.tsx b/website/src/components/guides/theming/ThemedLine.tsx new file mode 100644 index 0000000000..e0d3fe3aea --- /dev/null +++ b/website/src/components/guides/theming/ThemedLine.tsx @@ -0,0 +1,63 @@ +import React from 'react' +import { CompleteTheme } from '@nivo/core' +import { ResponsiveLine } from '@nivo/line' + +export const ThemedLine = ({ theme }: { theme: CompleteTheme }) => { + return ( + + ) +} diff --git a/website/src/components/guides/theming/ThemedRadialBar.tsx b/website/src/components/guides/theming/ThemedRadialBar.tsx new file mode 100644 index 0000000000..1f56a5e474 --- /dev/null +++ b/website/src/components/guides/theming/ThemedRadialBar.tsx @@ -0,0 +1,73 @@ +import React, { useMemo } from 'react' +import { CompleteTheme } from '@nivo/core' +import { ResponsiveRadialBar } from '@nivo/radial-bar' + +export const ThemedRadialBar = ({ theme }: { theme: CompleteTheme }) => { + const data = useMemo( + () => [ + { + id: 'Supermarket', + data: [ + { + x: 'Vegetables', + y: 60, + }, + { + x: 'Fruits', + y: 22, + }, + { + x: 'Meat', + y: 46, + }, + ], + }, + { + id: 'Combini', + data: [ + { + x: 'Vegetables', + y: 264, + }, + { + x: 'Fruits', + y: 148, + }, + { + x: 'Meat', + y: 246, + }, + ], + }, + { + id: 'Online', + data: [ + { + x: 'Vegetables', + y: 98, + }, + { + x: 'Fruits', + y: 224, + }, + { + x: 'Meat', + y: 83, + }, + ], + }, + ], + [] + ) + return ( + + ) +} diff --git a/website/src/components/guides/theming/defaults.ts b/website/src/components/guides/theming/defaults.ts new file mode 100644 index 0000000000..317a9578ec --- /dev/null +++ b/website/src/components/guides/theming/defaults.ts @@ -0,0 +1,115 @@ +import { + // @ts-ignore + defaultTheme as baseDefaultTheme, + // @ts-ignore + extendDefaultTheme, + CompleteTheme, +} from '@nivo/core' + +const extendedTheme: CompleteTheme = extendDefaultTheme(baseDefaultTheme) + +const axisDefaults: CompleteTheme['axis'] = { + domain: { + line: { + stroke: '#777777', // defaultTheme.axis.domain.line.stroke, + strokeWidth: extendedTheme.axis.domain.line.strokeWidth, + }, + }, + legend: { + text: { + fontSize: extendedTheme.axis.legend.text.fontSize, + fill: extendedTheme.axis.legend.text.fill, + }, + }, + ticks: { + line: { + stroke: extendedTheme.axis.ticks.line.stroke, + strokeWidth: extendedTheme.axis.ticks.line.strokeWidth, + }, + text: { + fontSize: extendedTheme.axis.ticks.text.fontSize, + fill: extendedTheme.axis.ticks.text.fill, + }, + }, +} + +const gridDefaults: CompleteTheme['grid'] = { + line: { + stroke: extendedTheme.grid.line.stroke, + strokeWidth: extendedTheme.grid.line.strokeWidth, + }, +} + +const legendsDefaults: CompleteTheme['legends'] = { + title: { + text: { + fontSize: extendedTheme.legends.title.text.fontSize, + fill: extendedTheme.legends.title.text.fill, + }, + }, + text: { + fontSize: extendedTheme.legends.text.fontSize, + fill: extendedTheme.legends.text.fill, + }, + ticks: { + line: {}, + text: { + fontSize: extendedTheme.legends.ticks.text.fontSize, + fill: extendedTheme.legends.ticks.text.fill, + }, + }, +} + +const annotationsDefaults: CompleteTheme['annotations'] = { + text: { + fontSize: extendedTheme.annotations.text.fontSize, + fill: extendedTheme.annotations.text.fill, + outlineWidth: extendedTheme.annotations.text.outlineWidth, + outlineColor: extendedTheme.annotations.text.outlineColor, + outlineOpacity: extendedTheme.annotations.text.outlineOpacity, + }, + link: { + stroke: extendedTheme.annotations.link.stroke, + strokeWidth: extendedTheme.annotations.link.strokeWidth, + outlineWidth: extendedTheme.annotations.link.outlineWidth, + outlineColor: extendedTheme.annotations.link.outlineColor, + outlineOpacity: extendedTheme.annotations.link.outlineOpacity, + }, + outline: { + stroke: extendedTheme.annotations.outline.stroke, + strokeWidth: extendedTheme.annotations.outline.strokeWidth, + outlineWidth: extendedTheme.annotations.outline.outlineWidth, + outlineColor: extendedTheme.annotations.outline.outlineColor, + outlineOpacity: extendedTheme.annotations.outline.outlineOpacity, + }, + symbol: { + fill: extendedTheme.annotations.symbol.fill, + outlineWidth: extendedTheme.annotations.symbol.outlineWidth, + outlineColor: extendedTheme.annotations.symbol.outlineColor, + outlineOpacity: extendedTheme.annotations.symbol.outlineOpacity, + }, +} + +const tooltipDefaults: CompleteTheme['tooltip'] = { + container: { + background: '#ffffff', + color: extendedTheme.textColor, + fontSize: 12, + }, + basic: {}, + chip: {}, + table: {}, + tableCell: {}, + tableCellValue: {}, +} + +export const defaultTheme: CompleteTheme = { + background: '#ffffff', // defaultTheme.background, + textColor: extendedTheme.textColor, + fontSize: extendedTheme.fontSize, + axis: axisDefaults, + grid: gridDefaults, + legends: legendsDefaults, + annotations: annotationsDefaults, + tooltip: tooltipDefaults, +} diff --git a/website/src/components/guides/theming/index.ts b/website/src/components/guides/theming/index.ts new file mode 100644 index 0000000000..720a7affea --- /dev/null +++ b/website/src/components/guides/theming/index.ts @@ -0,0 +1,6 @@ +export * from './defaults' +export * from './props' +export * from './ThemedBar' +export * from './ThemedHeatMap' +export * from './ThemedLine' +export * from './ThemedRadialBar' diff --git a/website/src/components/guides/theming/props.ts b/website/src/components/guides/theming/props.ts new file mode 100644 index 0000000000..0af0fecb52 --- /dev/null +++ b/website/src/components/guides/theming/props.ts @@ -0,0 +1,410 @@ +import { ChartPropertiesGroup, ChartProperty } from '../../../types' + +const OPEN_ALL_BY_DEFAULTS = true + +const fontSizeProp: ChartProperty = { + key: 'fontSize', + group: 'Theme', + type: 'number', + help: 'If unspecified, use the root `fontSize` value', + control: { + type: 'range', + min: 6, + max: 36, + }, +} + +const textColorProp: ChartProperty = { + key: 'fill', + group: 'Theme', + type: 'string', + help: 'If unspecified, use the root `textColor` value', + control: { type: 'colorPicker' }, +} + +const textProp: ChartProperty = { + key: 'text', + group: 'Theme', + type: 'object', + control: { + type: 'object', + isOpenedByDefault: OPEN_ALL_BY_DEFAULTS, + props: [fontSizeProp, textColorProp], + }, +} + +const baseProps: ChartPropertiesGroup = { + name: 'Base', + properties: [ + { + group: 'Theme', + key: 'background', + name: 'background', + type: 'string', + help: 'main background color.', + control: { type: 'colorPicker' }, + }, + { + group: 'Theme', + key: 'textColor', + name: 'textColor', + type: 'string', + help: 'Main text color, used as a default value when unspecified in nested properties.', + }, + { + group: 'Theme', + key: 'fontSize', + name: 'fontSize', + type: 'number', + help: 'Main font size, used as a default value when unspecified in nested properties.', + }, + ], +} + +const axesAndGridProps: ChartPropertiesGroup = { + name: 'Axes & Grid', + properties: [ + { + group: 'Theme', + key: 'axis', + name: 'axis', + type: 'object', + control: { + type: 'object', + isOpenedByDefault: true, + props: [ + { + key: 'ticks', + type: 'object', + control: { + type: 'object', + isOpenedByDefault: OPEN_ALL_BY_DEFAULTS, + props: [ + { + key: 'line', + type: 'object', + control: { + type: 'object', + isOpenedByDefault: OPEN_ALL_BY_DEFAULTS, + props: [ + { + key: 'strokeWidth', + type: 'number', + control: { type: 'lineWidth' }, + }, + { + key: 'stroke', + type: 'string', + control: { type: 'colorPicker' }, + }, + ], + }, + }, + textProp, + ], + }, + }, + { + key: 'domain', + type: 'object', + control: { + type: 'object', + isOpenedByDefault: OPEN_ALL_BY_DEFAULTS, + props: [ + { + key: 'line', + type: 'object', + control: { + type: 'object', + isOpenedByDefault: OPEN_ALL_BY_DEFAULTS, + props: [ + { + key: 'strokeWidth', + type: 'number', + control: { type: 'lineWidth' }, + }, + { + key: 'stroke', + type: 'string', + control: { type: 'colorPicker' }, + }, + ], + }, + }, + ], + }, + }, + { + key: 'legend', + type: 'object', + control: { + type: 'object', + isOpenedByDefault: OPEN_ALL_BY_DEFAULTS, + props: [textProp], + }, + }, + ], + }, + }, + { + group: 'Theme', + key: 'grid', + name: 'grid', + type: 'object', + control: { + type: 'object', + isOpenedByDefault: true, + props: [ + { + key: 'line', + type: 'object', + control: { + type: 'object', + isOpenedByDefault: OPEN_ALL_BY_DEFAULTS, + props: [ + { + key: 'stroke', + type: 'string', + control: { type: 'colorPicker' }, + }, + { + key: 'strokeWidth', + type: 'number', + control: { type: 'lineWidth' }, + }, + ], + }, + }, + ], + }, + }, + ], +} + +const legendsProps: ChartPropertiesGroup = { + name: 'Legends', + properties: [ + { + group: 'Theme', + key: 'legends', + name: 'legends', + type: 'object', + control: { + type: 'object', + isOpenedByDefault: true, + props: [ + { + key: 'title', + type: 'object', + control: { + type: 'object', + isOpenedByDefault: OPEN_ALL_BY_DEFAULTS, + props: [textProp], + }, + }, + textProp, + { + key: 'ticks', + type: 'object', + control: { + type: 'object', + isOpenedByDefault: OPEN_ALL_BY_DEFAULTS, + props: [], + }, + }, + ], + }, + }, + ], +} + +const annotationsProps: ChartPropertiesGroup = { + name: 'Annotations', + properties: [ + { + group: 'Theme', + key: 'annotations', + name: 'annotations', + type: 'object', + control: { + type: 'object', + isOpenedByDefault: true, + props: [ + { + key: 'text', + type: 'object', + control: { + type: 'object', + isOpenedByDefault: OPEN_ALL_BY_DEFAULTS, + props: [ + fontSizeProp, + { + key: 'outlineWidth', + type: 'number', + control: { type: 'lineWidth' }, + }, + { + key: 'outlineColor', + type: 'string', + control: { type: 'colorPicker' }, + }, + { + key: 'outlineOpacity', + type: 'number', + control: { type: 'opacity' }, + }, + ], + }, + }, + { + key: 'link', + type: 'object', + control: { + type: 'object', + isOpenedByDefault: OPEN_ALL_BY_DEFAULTS, + props: [ + { + key: 'stroke', + type: 'string', + control: { type: 'colorPicker' }, + }, + { + key: 'strokeWidth', + type: 'number', + control: { type: 'lineWidth' }, + }, + { + key: 'outlineWidth', + type: 'number', + control: { type: 'lineWidth' }, + }, + { + key: 'outlineColor', + type: 'string', + control: { type: 'colorPicker' }, + }, + { + key: 'outlineOpacity', + type: 'number', + control: { type: 'opacity' }, + }, + ], + }, + }, + { + key: 'outline', + type: 'object', + control: { + type: 'object', + isOpenedByDefault: OPEN_ALL_BY_DEFAULTS, + props: [ + { + key: 'stroke', + type: 'string', + control: { type: 'colorPicker' }, + }, + { + key: 'strokeWidth', + type: 'number', + control: { type: 'lineWidth' }, + }, + { + key: 'outlineWidth', + type: 'number', + control: { type: 'lineWidth' }, + }, + { + key: 'outlineColor', + type: 'string', + control: { type: 'colorPicker' }, + }, + { + key: 'outlineOpacity', + type: 'number', + control: { type: 'opacity' }, + }, + ], + }, + }, + { + key: 'symbol', + type: 'object', + control: { + type: 'object', + isOpenedByDefault: OPEN_ALL_BY_DEFAULTS, + props: [ + { + key: 'fill', + type: 'string', + control: { type: 'colorPicker' }, + }, + { + key: 'outlineWidth', + type: 'number', + control: { type: 'lineWidth' }, + }, + { + key: 'outlineColor', + type: 'string', + control: { type: 'colorPicker' }, + }, + { + key: 'outlineOpacity', + type: 'number', + control: { type: 'opacity' }, + }, + ], + }, + }, + ], + }, + }, + ], +} + +const tooltipProps: ChartPropertiesGroup = { + name: 'Tooltip', + properties: [ + { + group: 'Theme', + key: 'tooltip', + name: 'tooltip', + type: 'object', + control: { + type: 'object', + isOpenedByDefault: true, + props: [ + { + key: 'container', + type: 'object', + control: { + type: 'object', + isOpenedByDefault: OPEN_ALL_BY_DEFAULTS, + props: [ + { + key: 'background', + type: 'string', + control: { type: 'colorPicker' }, + }, + { + key: 'color', + type: 'string', + control: { type: 'colorPicker' }, + }, + fontSizeProp, + ], + }, + }, + ], + }, + }, + ], +} + +export const themeProps: ChartPropertiesGroup[] = [ + baseProps, + axesAndGridProps, + legendsProps, + annotationsProps, + tooltipProps, +] diff --git a/website/src/data/components/heatmap/props.ts b/website/src/data/components/heatmap/props.ts index 63028b5d04..9c352c81ee 100644 --- a/website/src/data/components/heatmap/props.ts +++ b/website/src/data/components/heatmap/props.ts @@ -31,7 +31,7 @@ const props: ChartProperty[] = [ }[] }[] \`\`\` - ` + `, }, { key: 'minValue', diff --git a/website/src/pages/guides/theming.tsx b/website/src/pages/guides/theming.tsx index d901ed8020..b82a6ad09c 100644 --- a/website/src/pages/guides/theming.tsx +++ b/website/src/pages/guides/theming.tsx @@ -1,12 +1,5 @@ import React, { useState } from 'react' import styled from 'styled-components' -import { - // @ts-ignore - defaultTheme, - Theme, -} from '@nivo/core' -import { ResponsiveBar } from '@nivo/bar' -import { ResponsiveLine } from '@nivo/line' import Layout from '../../components/Layout' import { Seo } from '../../components/Seo' import { ComponentPage } from '../../components/components/ComponentPage' @@ -14,350 +7,14 @@ import { ComponentHeader } from '../../components/components/ComponentHeader' import { Markdown } from '../../components/Markdown' import { ComponentSettings } from '../../components/components/ComponentSettings' import media from '../../theming/mediaQueries' -import { ChartPropertiesGroup } from '../../types' - -const initialTheme: Theme = { - background: '#ffffff', // defaultTheme.background, - textColor: defaultTheme.textColor, - fontSize: defaultTheme.fontSize, - axis: { - domain: { - line: { - stroke: '#777777', // defaultTheme.axis.domain.line.stroke, - strokeWidth: defaultTheme.axis.domain.line.strokeWidth, - }, - }, - ticks: { - line: { - stroke: defaultTheme.axis.ticks.line.stroke, - strokeWidth: defaultTheme.axis.ticks.line.strokeWidth, - }, - }, - }, - grid: { - line: { - stroke: defaultTheme.grid.line.stroke, - strokeWidth: defaultTheme.grid.line.strokeWidth, - }, - }, - annotations: { - text: { - fontSize: defaultTheme.annotations.text.fontSize, - outlineWidth: defaultTheme.annotations.text.outlineWidth, - outlineColor: defaultTheme.annotations.text.outlineColor, - outlineOpacity: defaultTheme.annotations.text.outlineOpacity, - }, - link: { - stroke: defaultTheme.annotations.link.stroke, - strokeWidth: defaultTheme.annotations.link.strokeWidth, - outlineWidth: defaultTheme.annotations.link.outlineWidth, - outlineColor: defaultTheme.annotations.link.outlineColor, - outlineOpacity: defaultTheme.annotations.link.outlineOpacity, - }, - outline: { - stroke: defaultTheme.annotations.outline.stroke, - strokeWidth: defaultTheme.annotations.outline.strokeWidth, - outlineWidth: defaultTheme.annotations.outline.outlineWidth, - outlineColor: defaultTheme.annotations.outline.outlineColor, - outlineOpacity: defaultTheme.annotations.outline.outlineOpacity, - }, - symbol: { - fill: defaultTheme.annotations.symbol.fill, - outlineWidth: defaultTheme.annotations.symbol.outlineWidth, - outlineColor: defaultTheme.annotations.symbol.outlineColor, - outlineOpacity: defaultTheme.annotations.symbol.outlineOpacity, - }, - }, -} - -const controlGroups: ChartPropertiesGroup[] = [ - { - name: 'Base', - properties: [ - { - group: 'Theme', - key: 'background', - name: 'background', - type: 'string', - help: 'main background color.', - control: { type: 'colorPicker' }, - }, - { - group: 'Theme', - key: 'textColor', - name: 'textColor', - type: 'string', - help: 'main text color.', - control: { type: 'colorPicker' }, - }, - { - group: 'Theme', - key: 'fontSize', - name: 'fontSize', - type: 'number', - help: 'main font size.', - control: { - type: 'range', - unit: 'px', - min: 6, - max: 36, - }, - }, - ], - }, - { - name: 'Axes & Grid', - properties: [ - { - group: 'Theme', - key: 'axis', - name: 'axis', - type: 'object', - control: { - type: 'object', - isOpenedByDefault: true, - props: [ - { - key: 'ticks', - type: 'object', - control: { - type: 'object', - props: [ - { - key: 'line', - type: 'object', - control: { - type: 'object', - props: [ - { - key: 'strokeWidth', - type: 'number', - control: { type: 'lineWidth' }, - }, - { - key: 'stroke', - type: 'string', - control: { type: 'colorPicker' }, - }, - ], - }, - }, - ], - }, - }, - { - key: 'domain', - type: 'object', - control: { - type: 'object', - props: [ - { - key: 'line', - type: 'object', - control: { - type: 'object', - props: [ - { - key: 'strokeWidth', - type: 'number', - control: { type: 'lineWidth' }, - }, - { - key: 'stroke', - type: 'string', - control: { type: 'colorPicker' }, - }, - ], - }, - }, - ], - }, - }, - ], - }, - }, - { - group: 'Theme', - key: 'grid', - name: 'grid', - type: 'object', - control: { - type: 'object', - isOpenedByDefault: true, - props: [ - { - key: 'line', - type: 'object', - control: { - type: 'object', - props: [ - { - key: 'stroke', - type: 'string', - control: { type: 'colorPicker' }, - }, - { - key: 'strokeWidth', - type: 'number', - control: { type: 'lineWidth' }, - }, - ], - }, - }, - ], - }, - }, - ], - }, - { - name: 'Annotations', - properties: [ - { - group: 'Theme', - key: 'annotations', - name: 'annotations', - type: 'object', - control: { - type: 'object', - isOpenedByDefault: true, - props: [ - { - key: 'text', - type: 'object', - control: { - type: 'object', - props: [ - { - key: 'fontSize', - type: 'number', - control: { - type: 'range', - unit: 'px', - min: 6, - max: 36, - }, - }, - { - key: 'outlineWidth', - type: 'number', - control: { type: 'lineWidth' }, - }, - { - key: 'outlineColor', - type: 'string', - control: { type: 'colorPicker' }, - }, - { - key: 'outlineOpacity', - type: 'number', - control: { type: 'opacity' }, - }, - ], - }, - }, - { - key: 'link', - type: 'object', - control: { - type: 'object', - props: [ - { - key: 'stroke', - type: 'string', - control: { type: 'colorPicker' }, - }, - { - key: 'strokeWidth', - type: 'number', - control: { type: 'lineWidth' }, - }, - { - key: 'outlineWidth', - type: 'number', - control: { type: 'lineWidth' }, - }, - { - key: 'outlineColor', - type: 'string', - control: { type: 'colorPicker' }, - }, - { - key: 'outlineOpacity', - type: 'number', - control: { type: 'opacity' }, - }, - ], - }, - }, - { - key: 'outline', - type: 'object', - control: { - type: 'object', - props: [ - { - key: 'stroke', - type: 'string', - control: { type: 'colorPicker' }, - }, - { - key: 'strokeWidth', - type: 'number', - control: { type: 'lineWidth' }, - }, - { - key: 'outlineWidth', - type: 'number', - control: { type: 'lineWidth' }, - }, - { - key: 'outlineColor', - type: 'string', - control: { type: 'colorPicker' }, - }, - { - key: 'outlineOpacity', - type: 'number', - control: { type: 'opacity' }, - }, - ], - }, - }, - { - key: 'symbol', - type: 'object', - control: { - type: 'object', - props: [ - { - key: 'fill', - type: 'string', - control: { type: 'colorPicker' }, - }, - { - key: 'outlineWidth', - type: 'number', - control: { type: 'lineWidth' }, - }, - { - key: 'outlineColor', - type: 'string', - control: { type: 'colorPicker' }, - }, - { - key: 'outlineOpacity', - type: 'number', - control: { type: 'opacity' }, - }, - ], - }, - }, - ], - }, - }, - ], - }, -] +import { + themeProps, + defaultTheme, + ThemedBar, + ThemedHeatMap, + ThemedLine, + ThemedRadialBar, +} from '../../components/guides/theming' const description = ` **nivo** supports theming via the \`theme\` property, this property @@ -378,7 +35,7 @@ properties. ` const Theming = () => { - const [theme, setTheme] = useState(initialTheme) + const [theme, setTheme] = useState(defaultTheme) const [mode, setMode] = useState('demo') return ( @@ -400,73 +57,10 @@ const Theming = () => { {mode === 'demo' && ( <> -
- -
-
- -
+ + + + )} {mode === 'code' && ( @@ -479,7 +73,7 @@ const Theming = () => { @@ -528,8 +122,45 @@ const Description = styled.div` } ` +const Charts = styled.div` + position: fixed; + top: ${({ theme }) => theme.dimensions.headerHeight}px; + right: 0; + --innerWidth: calc(100% - ${({ theme }) => theme.dimensions.miniNavWidth}px); + --innerInnerWidth: calc(var(--innerWidth) * 0.55); + width: var(--innerInnerWidth); + --innerHeight: calc(100% - ${({ theme }) => theme.dimensions.headerHeight}px); + height: var(--innerHeight); + z-index: 10; + overflow: hidden; + background: ${({ theme }) => theme.colors.cardBackground}; + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); + grid-template-rows: 46px minmax(0, 1fr) minmax(0, 1fr); + + ${media.tablet` + & { + width: 55%; + height: calc(100% - ${({ theme }) => theme.dimensions.headerHeight}px); + } + `} + + ${media.mobile` + & { + position: relative; + top: auto; + right: auto; + width: auto; + height: 500px; + z-index: 0; + border-top: 1px solid ${({ theme }) => theme.colors.border}; + } + `} +` + const Nav = styled.nav` - height: 46px; + grid-column-start: 1; + grid-column-end: 3; background: ${({ theme }) => theme.colors.background}; font-size: 15px; position: relative; @@ -561,50 +192,7 @@ const NavItem = styled.span<{ } ` -const Charts = styled.div` - position: fixed; - top: ${({ theme }) => theme.dimensions.headerHeight}px; - right: 0; - width: 60%; - --innerWidth: calc(100% - ${({ theme }) => theme.dimensions.miniNavWidth}px); - width: calc(var(--innerWidth) * 0.55); - --innerHeight: calc(100% - ${({ theme }) => theme.dimensions.headerHeight}px); - height: var(--innerHeight); - z-index: 10; - overflow: hidden; - background: ${({ theme }) => theme.colors.cardBackground}; - display: flex; - flex-direction: column; - - & > div:nth-child(2), - & > div:nth-child(3) { - height: calc(var(--innerHeight) / 2); - } - - ${media.tablet` - & { - top: ${({ theme }) => theme.dimensions.headerHeight}px; - right: 0; - width: 55%; - height: calc(100% - ${({ theme }) => theme.dimensions.headerHeight}px); - } - `} - - ${media.mobile` - & { - position: relative; - top: auto; - right: auto; - width: auto; - height: 520px; - z-index: 0; - border-top: 1px solid ${({ theme }) => theme.colors.border}; - } - `} -` - const Code = styled.pre` - height: calc(100% - 46px); margin: 0; background-color: ${({ theme }) => theme.highlight.plain.backgroundColor}; color: ${({ theme }) => theme.highlight.plain.color}; @@ -612,4 +200,8 @@ const Code = styled.pre` line-height: 1.7; padding: 12px 20px; overflow-y: auto; + grid-column-start: 1; + grid-column-end: 3; + grid-row-start: 2; + grid-row-end: 4; `