Combine parameters in var() for components

Support
#1

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?

#2

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.