Combine parameters in var() for components

[designerken]

I am creating a “simple” headline component here are the parameters:

{
"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" }
  ]
},
"headlineContent" : {
  "label"      : "Headline Content",
  "type"       : "text-editor",
  "initial"    : "This is a {{ param.tag }} headline. ",
  "height"     : 2,
  "expandable" : false
  }
}

I then have this in my CSS:

:root {
    --x-h1-font-size:     2.441em;
    --x-h1-font-weight:   {{dc:global:font-weight id="vg6DdX0Q3seMhIo4yc" weight="fw-bold"}};
    --x-h2-font-size:     1.953em;
    --x-h2-font-weight:   {{dc:global:font-weight id="vg6DdX0Q3seMhIo4yc" weight="fw-normal"}};
    --x-h3-font-size:     1.563em;
    --x-h3-font-weight:   {{dc:global:font-weight id="vg6DdX0Q3seMhIo4yc" weight="fw-normal"}};
    --x-h4-font-size:     1.25em;
    --x-h4-font-weight:   {{dc:global:font-weight id="vg6DdX0Q3seMhIo4yc" weight="fw-normal"}};
    --x-h5-font-size:     1em;
    --x-h5-font-weight:   {{dc:global:font-weight id="vg6DdX0Q3seMhIo4yc" weight="fw-normal"}};
    --x-h6-font-size:     0.8em;
    --x-h6-font-weight:   {{dc:global:font-weight id="vg6DdX0Q3seMhIo4yc" weight="fw-normal"}};
}

In the element I have {{dc:p:tag}} for the HTML tag field. This works great creating the correct h1-6 tag for the element on the front end.

The issue I am having is changing the font-size and font-weight based on the h tag selected

I have put this in the respective fields var(--x-{{dc:p:tag}}-font-size) and var(--x-{{dc:p:tag}}-font-weight).

But the dynamic content portion is trying to add an additional var() in the output, so I am getting this rendered on the frontend:

  font-size: var(--x-var(--tco-dcb-4)-font-weight);
  font-weight: var(--x-var(--tco-dcb-5)-font-size);

So the var(--tco-dcb-4) and var(--tco-dcb-5) should be the actual tag that is selected. Any clue as to why this is happening?

[ruenel]

Hey @designerken,

Thanks for the information above.

You need to update your JSON. Use “objects as values in parameters” instead (https://theme.co/docs/parameters#using-objects-as-values-in-parameters). For example;

{
  "headline" : {
    "type"    : "choose",
    "label"   : "Tag",
    "initial" : "h2",
    "options" : [
      {
        "value": {
          "tag": "h1",
          "size": "--x-h1-font-size",
          "weight" : "--x-h1-font-weight"
        },
        "label": "h1"
      },
      {
        "value": {
          "tag": "h2",
          "size": "--x-h2-font-size",
          "weight" : "--x-h2-font-weight"
        },
        "label": "h2"
      },
      {
        "value": {
          "tag": "h3",
          "size": "--x-h3-font-size",
          "weight" : "--x-h3-font-weight"
        },
        "label": "h3"
      },
      {
        "value": {
          "tag": "h4",
          "size": "--x-h4-font-size",
          "weight" : "--x-h4-font-weight"
        },
        "label": "h4"
      },
      {
        "value": {
          "tag": "h5",
          "size": "--x-h5-font-size",
          "weight" : "--x-h5-font-weight"
        },
        "label": "h5"
      },
      {
        "value": {
          "tag": "h5",
          "size": "--x-h5-font-size",
          "weight" : "--x-h5-font-weight"
        },
        "label": "h5"
      }
    ]
  },
  "headlineContent" : {
    "label"      : "Headline Content",
    "type"       : "text-editor",
    "initial"    : "This is a {{ param.tag }} headline. ",
    "height"     : 2,
    "expandable" : false
    }
}

and in your Headline element, you use the following:

• {{dc:p:headline.tag}} to display the HTML tag
• var({{dc:p:headline.weight}}) to access the root CSS
• var({{dc:p:headline.size}}) to access the root CSS

Best Regards.

[designerken]

@ruenel

Thanks for that information. I am still running into the issue with the var() not being added correctly on the front end.

It seems to be creating an inline style on the div that is auto wrapped for the headline element and giving it the size and weight variables. Then on the actual tag element its wrapping an additional var() around it.

Any thoughts?

[ruenel]

Hey @designerken,

Update the JSON into this:

{
  "headline" : {
    "type"    : "choose",
    "label"   : "Tag",
    "initial" : "h2",
    "options" : [
      {
        "value": {
          "tag": "h1",
          "size": "var(--x-h1-font-size)",
          "weight" : "var(--x-h1-font-weight)"
        },
        "label": "h1"
      },
      {
        "value": {
          "tag": "h2",
          "size": "var(--x-h2-font-size)",
          "weight" : "var(--x-h2-font-weight)"
        },
        "label": "h2"
      },
      {
        "value": {
          "tag": "h3",
          "size": "var(--x-h3-font-size)",
          "weight" : "var(--x-h3-font-weight)"
        },
        "label": "h3"
      },
      {
        "value": {
          "tag": "h4",
          "size": "var(--x-h4-font-size)",
          "weight" : "var(--x-h4-font-weight)"
        },
        "label": "h4"
      },
      {
        "value": {
          "tag": "h5",
          "size": "var(--x-h5-font-size)",
          "weight" : "var(--x-h5-font-weight)"
        },
        "label": "h5"
      },
      {
        "value": {
          "tag": "h5",
          "size": "var(--x-h5-font-size)",
          "weight" : "var(--x-h5-font-weight)"
        },
        "label": "h5"
      }
    ]
  },
  "headlineContent" : {
    "label"      : "Headline Content",
    "type"       : "text-editor",
    "initial"    : "This is a {{ param.tag }} headline. ",
    "height"     : 2,
    "expandable" : false
    }
}

Then, just use {{dc:p:headline.weight}} and {{dc:p:headline.size}}.

Thanks.

[designerken]

@ruenel

Yes that seemed to allow the var() to render correctly. One more small tweak was needed for the choose UI when adding the element to render properly.

Just using "h2" would make an input field. We needed to change the "initial" to this:

{
"headline" : {
"type"    : "choose",
"label"   : "Tag",
"initial"	:	{
	"tag" : "h2",
  "size": "var(--x-h2-font-size)",
  "weight": "var(--x-h2-font-weight)"
},
"options" : [
...

[ruenel]

Good to know that the updated JSON works out.