Adding parameters to var() on a section

[designerken]

I have created a spacing parameter for a section component. Options are none, xs, s, m, l, xl. these simply output those same values. I am trying to add the output to a variable I setup in CSS.

When I add the variable directly to the padding top or bottom like var(--space-m) it renders on the front end just fine.

When I try to add the parameter to the variable like this var(--space-{{dc.p.sectionPadding}}) everything starts getting output weirdly. it tries to add a style tag in the HTML markup to the section or tries to add the same style to all 4 (top, bottom, left and right) fields. I tried adding this in breakout mode and it still did not work.

What am I missing here? How can I add the parameter output to the var()?

I have also noticed that the 2 input fields (top padding and bottom padding) look different as well. One has an arrow with the dynamic content icon. the other does not. What is the difference in these 2 fields (icon vs no icon)?

Component parameter JSON

{
  "sectionPadding": {
    "type"		: "choose",
    "label"		: "Padding",
    "initial"	: "m",
    "options"	: [
      { "value" : "none", "label" : "-" },
      { "value" : "xs", "label" : "XS" },
      { "value" : "s", "label" : "S" },
      { "value" : "m", "label" : "M" },
      { "value" : "l", "label" : "L" },
      { "value" : "xl", "label" : "XL" }
    ]
  }
}

Global CSS

  :root {
    --space-xs: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem);
    --space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
    --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
    --space-l: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);
    --space-xl: clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem);
  }

[ruenel]

Hello @designerken,

Regretfully, you can use the var(--space-{{dc.p.sectionPadding}}) directly in the element option. It can only accept: {{dc:param:field-name}}. You will have to add the actual CSS values in your parameter JSON instead:

{
  "sectionPadding": {
    "type"		: "choose",
    "label"		: "Padding",
    "initial"	: "m",
    "options"	: [
      { "value" : "0", "label" : "-" },
      { "value" : "clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem)", "label" : "XS" },
      { "value" : "clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem)", "label" : "S" },
      { "value" : "clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem)", "label" : "M" },
      { "value" : "clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem)", "label" : "L" },
      { "value" : "clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem)", "label" : "XL" }
    ]
  }
}

Then, try using the {{dc:param:sectionPadding}} dynamic content.

Kindly let us know how it goes.

[designerken]

@ruenel

That is unfortunate. Is there a reason why that won’t work? Is it the combination of the var() and {{dc:param}}?

Your solution is one way but I really want to keep the CSS in the one place for easy changes. Placing it on the component doesn’t make sense. Can we just add the var() to the to the values in the JSON instead?

{
  "sectionPadding": {
    "type"		: "choose",
    "label"		: "Padding",
    "initial"	: "var(--space-m)",
    "options"	: [
      { "value" : "var(--space-none)", "label" : "-" },
      { "value" : "var(--space-xs)", "label" : "XS" },
      { "value" : "var(--space-s)", "label" : "S" },
      { "value" : "var(--space-m)", "label" : "M" },
      { "value" : "var(--space-l)", "label" : "L" },
      { "value" : "var(--space-xl)", "label" : "XL" }
    ]
  }
}