Explanations regarding CSS variables system using Liquid

css-variables.liquid

{% # Inside the liquid file %}
{% liquid
  assign base_selector = '#shopify-section-' | append: section.id 
  assign accent_color = section.settings.accent_color
%}

<style>
  {{ base_selector }} {
    {% if accent_color != 'rgba(0,0,0,0)' and accent_color != '#000000' %}    
      --accent-color: {{ accent_color }};
    {% endif %}
  }
</style>

{% # Inside the CSS stylesheet %}
.my-button {
  color: var(--accent-color, #000000);
}

{% comment %}
  If the section settings accent_color was set to '#ff8000', the following would occur :
  
  #shopify-section-my-section-id {
    --accent-color: #ff8000;
  }
  
  .my-button {
    /* In this case, button-color variable is set, so the browser will use #ff8000 */
    color: var(--accent-color, #000000);
  }
  
  If the section settings accent_color was set to rgba(0,0,0,0)' (equivalent to transparent/default value), the following would occur :
  
  #shopify-section-my-section-id {
    /* Condition is not verified, we do not output CSS variable */
    /* Same effect if setting was set to '#000000', no need to declare since style will defaut to same value */
  }
  
  .my-button {
    /* In this case, button-color variable is not set, the browser defaults to #000000 */
    color: var(--accent-color, #000000);
  }
{% endcomment %}