✏️ Editing: customizer-variables.js Writable

import { handleVariablesFor } from '@creative-themes/customizer-sync-helpers/dist/simplified'

export const listenToVariables = () => {
	handleVariablesFor({
		colorPalette: (value) =>
			Object.keys(value).reduce(
				(acc, key) => [
					...acc,
					{
						variable: value[key].variable
							? value[key].variable
							: `theme-palette-color-${key.replace('color', '')}`,
						type: `color:${key}`,
					},
				],
				[]
			),

fontColor: {
			selector: ':root',
			variable: 'theme-text-color',
			type: 'color',
		},

linkColor: [
			{
				selector: ':root',
				variable: 'theme-link-initial-color',
				type: 'color:default',
			},

{
				selector: ':root',
				variable: 'theme-link-hover-color',
				type: 'color:hover',
			},
		],

formTextColor: [
			{
				selector: ':root',
				variable: 'theme-form-text-initial-color',
				type: 'color:default',
			},

{
				selector: ':root',
				variable: 'theme-form-text-focus-color',
				type: 'color:focus',
			},
		],

formBorderColor: [
			{
				selector: ':root',
				variable: 'theme-form-field-border-initial-color',
				type: 'color:default',
			},

{
				selector: ':root',
				variable: 'theme-form-field-border-focus-color',
				type: 'color:focus',
			},
		],

formBackgroundColor: [
			{
				selector: ':root',
				variable: 'theme-form-field-background-initial-color',
				type: 'color:default',
			},

{
				selector: ':root',
				variable: 'theme-form-field-background-focus-color',
				type: 'color:focus',
			},
		],

border_color: {
			selector: ':root',
			variable: 'theme-border-color',
			type: 'color',
		},

headingColor: {
			selector: ':root',
			variable: 'theme-headings-color',
			type: 'color',
		},

heading_1_color: {
			selector: ':root',
			variable: 'theme-heading-1-color',
			type: 'color',
		},

heading_2_color: {
			selector: ':root',
			variable: 'theme-heading-2-color',
			type: 'color',
		},

heading_3_color: {
			selector: ':root',
			variable: 'theme-heading-3-color',
			type: 'color',
		},

heading_4_color: {
			selector: ':root',
			variable: 'theme-heading-4-color',
			type: 'color',
		},

heading_5_color: {
			selector: ':root',
			variable: 'theme-heading-5-color',
			type: 'color',
		},

heading_6_color: {
			selector: ':root',
			variable: 'theme-heading-6-color',
			type: 'color',
		},

buttonTextColor: [
			{
				selector: ':root',
				variable: 'theme-button-text-initial-color',
				type: 'color:default',
			},

{
				selector: ':root',
				variable: 'theme-button-text-hover-color',
				type: 'color:hover',
			},
		],

buttonColor: [
			{
				selector: ':root',
				variable: 'theme-button-background-initial-color',
				type: 'color:default',
			},

{
				selector: ':root',
				variable: 'theme-button-background-hover-color',
				type: 'color:hover',
			},
		],

global_quantity_color: [
			{
				selector: ':root',
				variable: 'quantity-initial-color',
				type: 'color:default',
			},

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

global_quantity_arrows: [
			{
				selector: ':root',
				variable: 'quantity-arrows-initial-color',
				type: 'color:default',
			},

{
				selector: ':root',
				variable: 'quantity-arrows-initial-color',
				type: 'color:default_type_2',
			},

{
				selector: ':root',
				variable: 'quantity-arrows-hover-color',
				type: 'color:hover',
			},
		],
	})
}

🔐 Sid Gifari File Manager Pro