CSS Output

Automatically output the setting as CSS by adding css argument like shown below:

'formFontSize' => [
  'label' => __( 'Input Font Size' ),
  'type' => 'ct-slider',
  'units' => [
    'px' => [ 'min' => 14, 'max' => 24 ],
  ],
  'css' => '--formFontSize'
]

By default, it will be applied to :root selector

:root {
  --formFontSize: 18px;
}

It will also add a toggle below the setting that reveals the CSS var name:

Change CSS Selector

Add css_selector argument to parent section:

add_filter( 'h_customizer_options', function( $sections ) {
return wp_parse_args( [ 'form' => [

  'title' => __( 'Form' ),
  'container' => [ 'priority' => 10 ],
  'css_selector' => 'form',

  'options' => [
    'formFontColor' => [ ... ],
    'formFontSize' => [ ... ],
  ]

] ], $sections );
} );

Now all the options under that section will be applied to form selector.

form {
  --formFontColor: var(--text);
  --formFontSize: 18px;
}

It will also add a description below the Section's title showing what the selector is:

Override Selector Individually

The css_selector argument can also be applied to any option to override the one from parent section:

'formFontSize' => [
  'label' => __( 'Input Font Size' ),
  'type' => 'ct-slider',
  'units' => [
    'px' => [ 'min' => 14, 'max' => 24 ],
  ],
  'css_selector' => 'input',
  'css' => '--formFontSize'
]

Now the selector for --formFontSize is at input. But the other options still stay at form.

TIP: You can add css_selector to Tab, Panel, or Condition. All the child options will follow too.

Multiple CSS Values

Options like Color Picker can have multiple values in one setting. In that case, the css argument has to be multiple too:

'formFontColor' => [
  'label' => __( 'Input Font Color' ),
  'type'  => 'ct-color-picker',
  'pickers' => [
    'default' => __( 'Initial' ),
    'focus' => __( 'Focus' ),
  ],
  'css' => [
    '--formFontColor': 'default.color',
    '--formFontColorFocus': 'focus.color'
  ]
],

The value default.color is array notation to get the value.