import { handleVariablesFor } from 'customizer-sync-helpers'

export const listenToVariables = () => {
	handleVariablesFor({
		colorPalette: [
			{
				variable: 'paletteColor1',
				type: 'color:color1'
			},

			{
				variable: 'paletteColor2',
				type: 'color:color2'
			},

			{
				variable: 'paletteColor3',
				type: 'color:color3'
			},

			{
				variable: 'paletteColor4',
				type: 'color:color4'
			},

			{
				variable: 'paletteColor5',
				type: 'color:color5'
			}
		],

		buttonColor: [
			{
				selector: ':root',
				variable: 'buttonInitialColor',
				type: 'color:default'
			},

			{
				selector: ':root',
				variable: 'buttonHoverColor',
				type: 'color:hover'
			}
		],

		fontColor: {
			variable: 'fontColor',
			type: 'color'
		},
	})
}