CSS Variables

css-variables.liquid

/* ===== CSS-VARIABLES.LIQUID (snippets/css-variables.liquid)
======================= */
 
<style>
  {{ settings.headline__font | font_face }}
  {{ settings.regular__font | font_face }}
  {%- assign font_body_bold = settings.regular__font | font_modify: 'weight', 'bolder' -%}
  {%- assign font_body_bold_italic = font_body_bold | font_modify: 'style', 'italic' -%}
  {{ font_body_bold | font_face }}
  {{ font_body_bold_italic | font_face }}
  :root {
    --green: #848682;
    --gunmetal: #575e5c;
    --gray: #989ea0;
    --light-gray: #c4ccce;
    --purple: #45345a;
    --light-purple: #87809f;
    --light-gray-alt: #c8c6cf;
    --gunmetal-two: #3f5258;
    --charcoal: #2c3339;
    --slate: #566f77;
    --blue: #719ead;
    --white: #ffffff;
    --light-navy: #105d75;
    --dusty-red: #c73c43;
    --light-grey-blue: #aab2b5;
    --coral-pink: #ff5b5d;
    --light-burgundy: #a9343a;
    --pine-green: #0a3039;
    --color-accent: {{ settings.color_accent }};
    --color-body-text: var(--gunmetal-two);
    --color-main-background: #ffffff;
    --color-border: {{ settings.color_body_text | color_lighten: 50 }};
    --font-heading: {{ settings.headline__font.family }}, {{ settings.headline__font.fallback_families }};
    --font-body: {{ settings.regular__font.family }}, {{ settings.regular__font.fallback_families }};
    --font-body-weight: {{ settings.regular__font.weight }};
    --font-body-style: {{ settings.regular__font.style }};
    --font-body-bold-weight: {{ font_body_bold.weight | default: 'bold' }};
    --font-nav: {{ settings.nav__font.family }};
    --arrow-square-left: url({{ 'arrow-square-left.svg' | asset_url }});
    --arrow-square-right: url({{ 'arrow-square-right.svg' | asset_url }});
    --info-svg: url({{ 'info.svg' | asset_url }});
    --calendar-svg: url({{ 'calendar.svg' | asset_url }});
    --datepicker-left: url({{ 'datepicker-left.svg' | asset_url }});
    --datepicker-right: url({{ 'datepicker-right.svg' | asset_url }});
  }
</style>
 
/* ===== THEME.LIQUID
======================= */
 
{% include 'css-variables' %}