cfdump.js

import { useHSL, darkenHSL, lightenHSL, desaturateHSL } from '../theme-utils';

const stringHSL = [0, 0, 50];
const numberHSL = [39, 100, 50];
const arrayHSL = [120, 100, 30];
const objectHSL = [240, 57, 53];

const borderWidth = 2;
const padding = 3;

const layout = {
	block: {
		label: {
			padding: `${ padding }px ${ padding * 2 }px ${ padding + 1 }px`,
			color: 'white',
			borderStyle: 'solid',
			borderWidth: `${ borderWidth }px ${ borderWidth }px 0 ${ borderWidth }px`
		},
		children: {
			width: '100%',
			display: 'table',
			boxSizing: 'border-box',
			borderStyle: 'solid',
			borderWidth: `${ borderWidth }px 0 0 ${ borderWidth }px`
		},
		childValue: {
			display: 'table-cell',
			padding: `${ padding }px`,
			borderStyle: 'solid',
			borderWidth: `0 ${ borderWidth }px ${ borderWidth }px 0`
		},
		childKey: {
			width: '1px',
			padding: `${ padding }px ${ padding * 2 }px ${ padding + 1 }px`,
			fontFamily: 'monospace'
		}
	},
	inline: {
		container: {
			borderStyle: 'solid',
			borderWidth: `${ borderWidth }px`
		},
		label: {
			display: 'inline-block',
			padding: `${ padding }px ${ padding * 2 }px ${ padding + 1 }px`,
			borderRightStyle: 'solid',
			borderRightWidth: `${ borderWidth }px`
		},
		value: {
			display: 'inline-block',
			padding: `${ padding }px ${ padding * 2 }px ${ padding + 1 }px`
		}
	}
};

export const valueInspector = {
	fontSize: '12px',
	fontFamily: 'Verdana'
};

export const string = {
	stringContainer: {
		...layout.inline.container,
		borderColor: useHSL(stringHSL)
	},
	stringLabel: {
		...layout.inline.label,
		borderColor: useHSL(stringHSL),
		background: useHSL(lightenHSL(stringHSL, 30))
	},
	stringValue: {
		...layout.inline.value
	}
};

export const number = {
	numberContainer: {
		...layout.inline.container,
		borderColor: useHSL(numberHSL)
	},
	numberLabel: {
		...layout.inline.label,
		borderColor: useHSL(numberHSL),
		background: useHSL(lightenHSL(numberHSL, 20))
	},
	numberValue: {
		...layout.inline.value
	}
};

export const array = {
	arrayContainer: { },
	arrayLabel: {
		...layout.block.label,
		backgroundColor: useHSL(arrayHSL),
		borderColor: useHSL(darkenHSL(arrayHSL, 10))
	},
	arrayItems: {
		...layout.block.children,
		borderColor: useHSL(darkenHSL(arrayHSL, 10))
	},
	arrayItem: {
		display: 'table-row'
	},
	arrayValue: {
		...layout.block.childValue,
		borderColor: useHSL(darkenHSL(arrayHSL, 10))
	},
	arrayIndex: {
		...layout.block.childValue,
		...layout.block.childKey,
		backgroundColor: useHSL(desaturateHSL(lightenHSL(arrayHSL, 40), 40)),
		borderColor: useHSL(darkenHSL(arrayHSL, 10))
	}
};

export const object = {
	objectContainer: { },
	objectLabel: {
		...layout.block.label,
		backgroundColor: useHSL(objectHSL),
		borderColor: useHSL(darkenHSL(objectHSL, 20))
	},
	objectProperties: {
		...layout.block.children,
		borderColor: useHSL(darkenHSL(objectHSL, 20))
	},
	objectProperty: {
		display: 'table-row'
	},
	objectValue: {
		...layout.block.childValue,
		borderColor: useHSL(darkenHSL(objectHSL, 20))
	},
	objectKey: {
		...layout.block.childValue,
		...layout.block.childKey,
		backgroundColor: useHSL(desaturateHSL(lightenHSL(objectHSL, 30), 10)),
		borderColor: useHSL(darkenHSL(objectHSL, 20))
	}
};