Passing settings/schema values to css

[mwpaulsen86]

It looks like shopify has taken away the theme.css.liquid file from the assets folder and replaced it with a regular css file (theme.css).  I'm wondering how to use variables/values from schema settings in the css file now.  Ex: I used to be able to put in something like color: {{settings.my_whatever_color}}; but of course that doesn't work in regular css.  It looks like they're using more standard css variables now, ex: color: var(--color-body-text); but I can't figure out how that is getting the information from the schema settings.  I'm somewhat familiar with basic html/css/js and I'm trying to learn the shopify system, but it seems like most of the tutorials are obsolete a few months after they come out 😕

[jordanaf808]

You gotta loop through the blocks in order to access one of the settings in the schema.

{% for block in section.blocks %}

{% if block.settings.title_font_size %}
{%- assign title_font_size = block.settings.title_font_size -%}
{% endif %}

<style>
#carousel-item__lead{
font-size: {{title_font_size}}px !important;
margin-bottom: 0;
}

[florinanghel]

They define the css variables with inline styles in theme.liquid before loading the css files that might use them.

{% style %}
      {{ settings.type_body_font | font_face: font_display: 'swap' }}
      {{ body_font_bold | font_face: font_display: 'swap' }}
      {{ body_font_italic | font_face: font_display: 'swap' }}
      {{ body_font_bold_italic | font_face: font_display: 'swap' }}
      {{ settings.type_header_font | font_face: font_display: 'swap' }}

      :root {
        --font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
        --font-body-style: {{ settings.type_body_font.style }};
        --font-body-weight: {{ settings.type_body_font.weight }};

...more..