Custom Headline Component - Change font-size depending on tag selected

[designerken]

We are working on a custom headline component. Currently we have the parameters for the tag to be selected as follows:

{
    "tag" : {
     "type"    : "choose",
    "label"   : "Tag",
    "initial" : "h2",
    "options" : [
      { "value" : "h1", "label" : "h1" },
      { "value" : "h2", "label" : "h2" },
      { "value" : "h3", "label" : "h3" },
      { "value" : "h4", "label" : "h4" },
      { "value" : "h5", "label" : "h5" },
      { "value" : "h6", "label" : "h6" },
      { "value" : "p",  "label" : "P"  }
    ]
  }
}

In our global CSS we are using variables for font-size, spacing, etc. as follows:

:root {
  /*  line-height  */
  --lh-header: 1.2;
  --lh-paragraph: 1.5;
  --lh-button: 1;
  --lh-label: 1;
  /*  letter-spacing  */
  --ls-header: -0.02em;
  --ls-paragraph: 0em;
  --ls-button: 0.05em;
  --ls-label: 0.05em;
  /*  text-size  */
  --ts-80: 0.75rem;
  --ts-90: 0.875rem;
  --ts-100: 1rem;
  --ts-200: 1.25rem;
  --ts-300: clamp(1.5rem, 1.3182rem + 0.6061vw, 1.75rem);
  --ts-400: clamp(2rem, 1.6364rem + 1.2121vw, 2.5rem);
  --ts-500: clamp(2.5rem, 1.9545rem + 1.8182vw, 3.25rem);
  --ts-600: clamp(3rem, 2.0909rem + 3.0303vw, 4.25rem);
  /*  white-space  */
  --ws-scale: 1.5;
  --ws-80: calc(var(--ws-90) / var(--ws-scale));
  --ws-90: calc(var(--ws-100) / var(--ws-scale));
  --ws-100: calc(var(--ws-scale) / var(--ws-scale) * 1rem );
  --ws-200: calc(var(--ws-100) * var(--ws-scale));
  --ws-300: calc(var(--ws-200) * var(--ws-scale));
  --ws-400: calc(var(--ws-300) * var(--ws-scale));
  --ws-500: calc(var(--ws-400) * var(--ws-scale));
  --ws-600: calc(var(--ws-500) * var(--ws-scale));
  --ws-700: calc(var(--ws-600) * var(--ws-scale));
  --ws-800: calc(var(--ws-700) * var(--ws-scale));
  --ws-900: calc(var(--ws-800) * var(--ws-scale));
}

In the component we are adding these variables manually:

We are hoping to have at least the size variable change based on the applied parameter for example:
h1 gets var(–ts-600)
h2 gets var(–ts-500)
h3 gets var(–ts-400) and so on.

We initially thought TWIG would be able to work for us and tried var(--ts-{% include 'cs-template:id-0' %})
and created this template:

But that is not working for us, and probably isn’t right since we don’t really understand the Twig feature yet. So, is there a way to set the font-size variable depending on what Tag the user selects? We are trying to eliminate creating a different component for each tag, and not letting the user select the size as that will be set globally for each tag.

[designerken]

I actually think I got it to work after I fixed the Twig:

{# Start your twig adventure today! #}
{% if p.tag == 'h1' %}
600
{% elseif p.tag == 'h2' %}
500
{% elseif p.tag == 'h3' %}
400
{% elseif p.tag == 'h4' %}
300
{% elseif p.tag == 'h5' %}
200
{% elseif p.tag == 'h6' %}
100
{% elseif p.tag == 'p' %}
100
{% endif %}

and for the font-size I added var(--ts-{% include 'cs-template:id-0' %})

[tristup]

Hi @designerken,

Glad to know that you are able to fix that.

Thanks