テーマ設定のフォント・色・レイアウトを CSS 変数に展開

<div>
  {% 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 }};

      --font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }};
      --font-heading-style: {{ settings.type_header_font.style }};
      --font-heading-weight: {{ settings.type_header_font.weight }};

      --font-body-scale: {{ settings.body_scale | divided_by: 100.0 }};
      --font-heading-scale: {{ settings.heading_scale | times: 1.0 | divided_by: settings.body_scale }};

      --color-base-text: {{ settings.colors_text.red }}, {{ settings.colors_text.green }}, {{ settings.colors_text.blue }};
      --color-base-background-1: {{ settings.colors_background_1.red }}, {{ settings.colors_background_1.green }}, {{ settings.colors_background_1.blue }};
      --color-base-background-2: {{ settings.colors_background_2.red }}, {{ settings.colors_background_2.green }}, {{ settings.colors_background_2.blue }};
      --color-base-solid-button-labels: {{ settings.colors_solid_button_labels.red }}, {{ settings.colors_solid_button_labels.green }}, {{ settings.colors_solid_button_labels.blue }};
      --color-base-outline-button-labels: {{ settings.colors_outline_button_labels.red }}, {{ settings.colors_outline_button_labels.green }}, {{ settings.colors_outline_button_labels.blue }};
      --color-base-accent-1: {{ settings.colors_accent_1.red }}, {{ settings.colors_accent_1.green }}, {{ settings.colors_accent_1.blue }};
      --color-base-accent-2: {{ settings.colors_accent_2.red }}, {{ settings.colors_accent_2.green }}, {{ settings.colors_accent_2.blue }};
      --payment-terms-background-color: {{ settings.colors_background_1 }};

      --gradient-base-background-1: {% if settings.gradient_background_1 != blank %}{{ settings.gradient_background_1 }}{% else %}{{ settings.colors_background_1 }}{% endif %};
      --gradient-base-background-2: {% if settings.gradient_background_2 != blank %}{{ settings.gradient_background_2 }}{% else %}{{ settings.colors_background_2 }}{% endif %};
      --gradient-base-accent-1: {% if settings.gradient_accent_1 != blank %}{{ settings.gradient_accent_1 }}{% else %}{{ settings.colors_accent_1 }}{% endif %};
      --gradient-base-accent-2: {% if settings.gradient_accent_2 != blank %}{{ settings.gradient_accent_2 }}{% else %}{{ settings.colors_accent_2 }}{% endif %};

      --page-width: {{ settings.page_width | divided_by: 10 }}rem;
      --page-width-margin: {% if settings.page_width == '1600' %}2{% else %}0{% endif %}rem;
    }
  {% endstyle %}
</div>