Box Shadow token alias mode should support multiple stacked shadows.

[mihkeleidast]

Is your feature request related to a problem? Please describe.

Currently, when changing a box shadow token to alias mode, only a single input is rendered. In that input, I can enter an alias for only a single shadow. The "add another shadow" button is enabled, but does not do anything in "alias mode". As shadows can be stacked in input mode, it would make sense that they can also be stacked in alias mode.

Describe the solution you'd like

When a box shadow token is in alias mode, the "add another shadow" button should work and add new inputs, when clicked. Each of those inputs should allow a single alias token to be specified.

Describe alternatives you've considered

1. Not using alias mode, but that defeats the purpose of the feature altogether.
2. Alias mode could be toggled on a single shadow value, e.g. it might be benefitial to create a stacked shadow, where one is aliased and the other is not. Not necessary for my usecase, but could be considered.

Additional context

Alias mode, allows for a single input:

Input mode, allows for multiple inputs:

Designs

Let's add a button in front of the Type selector that lets users toggle between alias mode and value mode for each of the shadow items. Clicking the button converts this part of the shadow into an alias selector, letting users pick from available shadows.

This might not be the best/most discoverable solution, but it's something that allows us to iterate on.

[leovogel]

+1

This is a feature I thought existed; I was about to build my shadows in this componentized way.

[danfigmatokens]

Just posted in the FT Slack asking about this thinking it was probably a bug. Would definitely love to get this in as it's how our dev team is building the shadow tokens right now and I'd like to be able to get the FT structure to match (we're not syncing with dev yet but hoping to at some point!)

[six7]

Just posted in the FT Slack asking about this thinking it was probably a bug. Would definitely love to get this in as it's how our dev team is building the shadow tokens right now and I'd like to be able to get the FT structure to match (we're not syncing with dev yet but hoping to at some point!)

Q on this: you'd only want to reference multiple single shadow tokens that way? Or would you expect if you reference a shadow token that has 3 layers of shadows that the plugin expands that?

[mihkeleidast]

Q on this: you'd only want to reference multiple single shadow tokens that way? Or would you expect if you reference a shadow token that has 3 layers of shadows that the plugin expands that?

Can you clarify the question, do you mean if FT should allow stacked shadows in either alias mode, or non-alias mode, or could these be mixed?

Just to provide some examples, our source of truth is our style-dictionary token collection in JSON, in there both "no alias", "all alias", and "mixed" would be valid, so it would be nice if FT could support the same:

{
  "shadow": {
    "elevation": {
      "alias": {
        "value": ["{shadow.core.12}", "{shadow.core.4}", "{shadow.core.2}"]
      },
      "mixed": {
        "value": [
          "{shadow.core.12}",
          "{shadow.core.4}",
          {
            "x": "0",
            "y": "1",
            "blur": "2",
            "spread": "0",
            "color": "{color.core.black.8}",
            "type": "dropShadow"
          }
        ]
      }
    }
  }
}

[danfigmatokens]

@six7 I would expect both to work, whether the reference tokens contain single or multiple shadows per token.

[six7]

So, to clarify, both should work, correct?

{
  "shadow": {
    "core": {
      "value": {
        "x": "0",
        "y": "1",
        "blur": "2",
        "spread": "0",
        "color": "{color.core.black.8}",
        "type": "dropShadow"
      }
    },
    "alias": {
      "value": ["{shadow.core}", "{shadow.mixed}"]
    }
    "mixed": {
      "value": [
        "{shadow.core}",
        {
          "x": "0",
          "y": "1",
          "blur": "2",
          "spread": "0",
          "color": "{color.core.black.8}",
          "type": "dropShadow"
        }
      ]
    }
  }
}

with the result of shadow.alias being

[
  "{shadow.core}",
  "{shadow.core}",
  {
    "x": "0",
    "y": "1",
    "blur": "2",
    "spread": "0",
    "color": "{color.core.black.8}",
    "type": "dropShadow"
  }
]

[danfigmatokens]

Exactly what I would expect I think, yep. Keeping them in the order they are applied across all and repeating any that are repeated by mixing multiple layers of reference tokens.

[six7]

Would you want to mix aliases with regular shadows? I'm mainly thinking about keeping the UI clean here, technically it should be possible.

As in

shadow:
  [
    '{shadow.small}',
    {
      offsetX: 0,
      offsetY: 4,
      blur: 4,
      spread: 0,
      color: '#000080'
    }
  ]

[danfigmatokens]

I don't think we would ever do that. I would probably expect it to be possible theoretically, but personally for our system, no.

[LukeFinch]

This request has been moved to our new feedback tool. Go check out https://tokensstudio.featurebase.app/ to create a free account. You can upvote and comment on existing posts, make a new request, and subscribe to be notified when requests move into our roadmap.

[UdayHyma]

Here's the URL to the featurebase post that is linked to this ticket:https://tokensstudio.featurebase.app/p/enhanced-functionality-for-boxshadow-tokens-greater-effects-in-figma