Kirki: How about css-variables?

[ukathemes]

Can Kirki work with css-variables? If Yes, please tell me how.
Thanks.

[aristath]

There was an implementation but hasn't been maintained in a long time: https://aristath.github.io/kirki/docs/arguments/variables.html
That part will be rewritten for version 3.1 because I think right now complex controls like typography don't work 100%

[ukathemes]

It would be cool if it were possible to do something like this:

/**
 * Add the main text typography control
 */
my_theme_Kirki::add_field( 'my_theme', array(
    'type'        => 'typography',
    'settings'    => 'main_text_typography',
    'label'       => esc_attr__( 'Main Text Typography', 'my_theme' ),
    'description' => esc_attr__( 'Select the main typography options for your site.', 'my_theme' ),
    'section'     => 'my_theme_typography',
    'priority'    => 10,
    'default'     => array(
        'font-family'    => 'Work Sans',
        'variant'        => '400',
        'font-size'      => '1rem',
        'line-height'    => '1.5',

    ),
    'output'      => array(
        array(
            'element' => ':root',
            'property' => array(
                '--text-font-family' => 'font-family',
                '--text-font-weight' => 'variant',
                '--text-font-size'   => 'font-size',
                '--text-line-height' => 'line-height',
            )
        ),
    ),
    'transport'   => 'postMessage',
    'js_vars'     => array(
        array(
                'element'  => ':root',
                'function' => 'css',
                'property' => array(
                    '--text-font-family' => 'font-family',
                    '--text-font-weight' => 'variant',
                    '--text-font-size'   => 'font-size',
                    '--text-line-height' => 'line-height',
                )
        ),
    ),
) );

[aristath]

I don't get this part:

'--text-font-family' => 'font-family',
'--text-font-weight' => 'variant',
'--text-font-size'   => 'font-size',
'--text-line-height' => 'line-height',

Can you please explain what you want to do?

Also you don't need to define js_vars there.
You can simply set 'transport' => 'auto' in the control, and the js_vars will be auto-calculated from the output argument.

[ukathemes]

The main idea to use CSS-variables (https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables). For example, I have in my style.css next code:

:root {
  --text-font-family: Arial;
  --text-font-weight: 400;
  --text-font-size: 1em;
}

.content {
  font-family: --text-font-family;
  font-weigh: --text-font-weight;
  font-size: --text-font-size;
}

.sidebar {
  font-family: --text-font-family;
}

Then in my customizer I add something like this, for example:

/**
 * Add the main text typography control
 */
my_theme_Kirki::add_field( 'my_theme', array(
    'type'        => 'typography',
    'settings'    => 'main_text_typography',
    'label'       => esc_attr__( 'Main Text Typography', 'my_theme' ),
    'description' => esc_attr__( 'Select the main typography options for your site.', 'my_theme' ),
    'section'     => 'my_theme_typography',
    'priority'    => 10,
    'default'     => array(
        'font-family'    => 'Work Sans',
        'variant'        => '400',
        'font-size'      => '1rem',
        'line-height'    => '1.5',

    ),
    'output'      => array(
        array(
            'element' => ':root',
            'property' => array(
                '--text-font-family' => 'font-family',
                '--text-font-weight' => 'variant',
                '--text-font-size'   => 'font-size',
                '--text-line-height' => 'line-height',
            )
        ),
    ),
    'transport'   => 'auto',
) );

User can cange this values "on the fly" and I don't need to list all elements from my style.css whose properties must change ('element' => '.content, .sidebar').

Properties I wrote this way just for example.

[aristath]

OH!!! OK, now I understand what you mean...
Native CSS variables are not implemented because browsers don't even support them.
It's an under-consideration feature, highly experimental, and not widely supported yet - which is why it has not been added yet.

The implementation we currently have is only valid If you use a CSS precompiler https://aristath.github.io/kirki/docs/arguments/variables.html

I'm marking this one as a feature request and it will be implemented ASAP.

[ukathemes]

Thank you!

[aristath]

It looks like support for this is now pretty decent in most browsers so perhaps it's time to consider adding it soon

[ukathemes]

That would be great!

[aristath]

Support for css-variables was added in version 3.0.28 so I'm closing this one.

Example:

Kirki::add_field(
    'my-config',
    array(
        'settings'        => 'setting_id,
        'type'            => 'color',
        'label'           => esc_attr__( 'Links color', 'textdomain' ),
        'section'         => 'q_theme_links',
        'default'         => '#005ea5',
        'css_vars'        => array(
            array( '--links-color' ),
            array( '--links-transparency-color', '$12' ),
        ),
        'transport'       => 'postMessage',
    )
);

Using 'transport' => 'postMessage' makes this work in the customizer without a refresh too automagically.
The $ sign in the 2nd argument in the array is a placeholder for the value.
So in the above example this would be generated:

:root {
  --links-color: #005ea5;
  --links-transparency-color: #005ea512;
}

[aristath]

Oh, and for the typography control example that you posted in your original post, the choice can be used as a 3rd argument. So something like this would work:

'css_vars'        => array(
    array( '--text-font-family', '$', 'font-family' ),
    array( '--text-font-weight', '$', 'variant' ),
    array( '--text-font-size', '$', 'font-size' ),
    array( '--text-line-height', '$', 'line-height' ),
),

But I don't think it would work out of the box for google-fonts without a refresh.

[LucasPAD]

@aristath Thank you!