Howdy, @Dagaloni! Thanks for writing in, I’m glad you’re enjoying Parameters and seeing a lot of potential for use-cases in your builds. 
What you’re describing is not possible at the moment, nor is it something we have any plans to get into at the moment as it gets into a whole slew of data management and dealing with edge-cases that grow exponentially when you’re dealing with multi-dimensional values like this.
However, that being said…allow me to provide you with some ideas you could leverage via Parameters that could help you achieve a similar end result based on the example you’re providing here.
If what you’re trying to do is build out some sort of type scale, or typography system where maybe you just want users to select from a pre-defined set of styles, you could very easily do this by making your select return a unique identifier, use that identifier to generate a unique CSS class, then style that class using the Component CSS sheet, which will get loaded whenever a Component from that set is used on the frontend.
I’m going to take this idea a bit and expand on it some to get you thinking of potential use-cases, but here’s what I’m starting with:
We have a “Headline” Element renamed to “Type System,” with a set of Parameters mapped to it. Those Parameters are here if you’d like to try this out personally:
{
"content" : {
"label" : "Content",
"type" : "text-editor",
"initial" : "Type System",
"expandable" : true
},
"tag" : {
"type" : "choose",
"label" : "Tag",
"initial" : "p",
"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" }
]
},
"style" : {
"type" : "select",
"label" : "Style",
"initial" : "body",
"options" : [
{ "value" : "display", "label" : "Display" },
{ "value" : "head-1", "label" : "Headline 1" },
{ "value" : "head-2", "label" : "Headline 2" },
{ "value" : "body", "label" : "Body" },
{ "value" : "caption", "label" : "Caption" },
{ "value" : "label", "label" : "Label" }
]
},
"color" : {
"label" : "Color",
"type" : "color",
"initial" : "#000000"
},
"margin" : {
"type" : "group",
"label" : "Margin",
"params" : {
"top" : {
"type" : "margin",
"label" : "Top",
"labelBefore" : "css:margin-top",
"initial" : "0px",
"isVar" : true
},
"bottom" : {
"type" : "margin",
"label" : "Bttm",
"labelBefore" : "css:margin-bottom",
"initial" : "0px",
"isVar" : true
}
}
}
}
To being, take note of the "style" key in this object. It is a "select" with a list of associated styles we’re going to build out in our “typography library.” I am using the "value"s of each option in that list to generate a unique class on this Element using the following as a custom class:
is-type-scale-{{dc:p:style}}
This will generate classes like is-type-scale-display, is-type-scale-head-1, et cetera as you make your selections from the list of options. We can use these as unique identifiers to build out our styles in the Component CSS of the Set like so:
/* Display
// ------- */
.is-type-scale-display {
font-size: 4.768em !important;
}
.is-type-scale-display .x-text-content-text-primary {
font-family: Poppins !important;
font-style: normal !important;
font-weight: 400 !important;
letter-spacing: -0.025em !important;
line-height: 1 !important;
text-transform: none !important;
}
/* Headline 1
// ---------- */
.is-type-scale-head-1 {
font-size: 3.052em !important;
}
.is-type-scale-head-1 .x-text-content-text-primary {
font-family: Poppins !important;
font-style: normal !important;
font-weight: 700 !important;
letter-spacing: -0.005em !important;
line-height: 1.2 !important;
text-transform: none !important;
}
/* Headline 2
// ---------- */
.is-type-scale-head-2 {
font-size: 1.563em !important;
}
.is-type-scale-head-2 .x-text-content-text-primary {
font-family: Poppins !important;
font-style: normal !important;
font-weight: 600 !important;
letter-spacing: -0.005em !important;
line-height: 1.3 !important;
text-transform: none !important;
}
/* Body
// ---- */
.is-type-scale-body {
font-size: 1em !important;
}
.is-type-scale-body .x-text-content-text-primary {
font-family: Poppins !important;
font-style: normal !important;
font-weight: 400 !important;
letter-spacing: 0em !important;
line-height: 1.8 !important;
text-transform: none !important;
}
/* Caption
// ------- */
.is-type-scale-caption {
font-size: 0.8em !important;
}
.is-type-scale-caption .x-text-content-text-primary {
font-family: Poppins !important;
font-style: italic !important;
font-weight: 400 !important;
letter-spacing: 0em !important;
line-height: 1.35 !important;
text-transform: none !important;
}
/* Label
// ----- */
.is-type-scale-label {
font-size: 0.8em !important;
}
.is-type-scale-label .x-text-content-text-primary {
font-family: Poppins !important;
font-style: normal !important;
font-weight: 600 !important;
letter-spacing: 0.15em !important;
line-height: 1.35 !important;
text-transform: uppercase !important;
}
A couple notes on what I’ve done above to make this more flexible:
- I am applying the
font-size to the base of the Element, so any relative sizing I use will be working appropriately all the way down the tree.
- I am applying the individual typography styles to the
.x-text-content-text-primary tag within the parent, as that is where the styles need to be set to be output correctly.
- I am using
!important on everything here because we are trying to build a very strict set of rules we want to follow.
Beyond that, what I’ve done is map in a “Content” "text-editor", a “Tag” "choose" control to give me a little flexibility on the semantics of the item, and a “Color” control, for some aesthetic control. These are wired up using {{dc:p:content}}, {{dc:p:tag}}, and {{dc:p:color}} in their respective inputs on the main Element’s controls. Additionally, I’ve also got {{dc:p:margin.top}} and {{dc:p:margin.bottom}} for basic vertical spacing. These to me are essentially the bare minimum you’d need to make this the perfect blend of flexible yet streamlined on the frontend.
Now in practice on a page, we can do something like this:
Notice that we’re only using one Component to power all of this typography, but inside each one I’ve got unique content, unique HTML tags set, color adjustments, and top / bottom spacing applied to give things a vertical rhythm, but I’ve abstracted away all of my type styles into the Component CSS.
This is of course just a very quick example of one way you could slice all of this and build out systems that cater to your needs. Hopefully that gets you thinking though and helps you out on your journey!
