[Tracking]: Box Shadow improvements

[six7]

Box Shadows aren't properly supported yet, we should change that.

A couple of issue that are open:

• Box shadow tokens does not support opacity setting for colour #163
• Effect styles (Drop shadow) does not get imported #174
• multiple box shadows #234
• Add pretty boxShadow input #312

Currently we store box shadows as an object:

"boxShadow": {
    "dark": {
      "value": {
        "x": 5,
        "y": 5,
        "spread": 3,
        "color": "rgba(0, 0, 0, 0.5)",
        "blur": 5
      },
      "type": "boxShadow"
    }
  },

This doesn't really allow us to do something like multiple shadows.

Instead, I would propose to create boxShadows with an array syntax: [5px 5px 5px 3px rgba(0, 0, 0, 0.5), 5px 5px 5px 3px rgba(0, 0, 0, 0.5)] which would allow us to have multiple shadows. We could still pick up the values in the UI and possibly provide a nicer experience.

Also, this should allow us to import and export shadow styles more easily.

[lukasoppermann]

Hey, importing shadows into effect styles is a very important topic for us as well.
We, like many companies, use multiple "box shadows" for one "effect styles" as this creates better looking shadows.

[six7]

Hey, importing shadows into effect styles is a very important topic for us as well. We, like many companies, use multiple "box shadows" for one "effect styles" as this creates better looking shadows.

As I wasn't really able to find anything, are you aware of any plans the W3C DTCG have on a syntax for box shadows? I'd love to build that around current drafts.

[raulalgo]

The array of shadows would be just what I need. I see that also working very well with references to other tokens of individual shadows.

[lukasoppermann]

Hey, @six7 I don't think this is specified yet at all.

However some notes from my side:

• accepting hex8 would be great
• accepting the individual values is fine I think the way you do it now.
• A simple array will probably suffice
• you should probably accept inset shadows as well
• while you are at it, you may want to allow shadow as well as a type, as boxShadow is very web sepcific.

A possible syntax could be:

"dark": {
      "value": [{
        "x": 5,
        "y": 5,
        "spread": 3,
        "color": "rgba(0, 0, 0, 0.5)",
        "blur": 5,
        "type": "dropShadow",
      },
      {
        "x": 5,
        "y": 5,
        "spread": 3,
        "color": "#00000033", // hex 8 
        "blur": 5,
        "type": "innerShadow", // or inset or whatever you think is best
      }],
      "type": "boxShadow"
    }

[six7]

I've been experimenting with this and got a basic version working with an array json.

I'll next tackle the UI. What do you think of something like this? Doing what Figma does won't be possible as token value is still important and having 2 columns just doesn't give us the space.

[lukasoppermann]

This looks perfect. 😍

The color could also be RGB or hex8 to include opacity, correct?

[six7]

Yes, exactly! It would allow you to insert rgb(a), hex(8) or hsl(a)

[six7]

Closing this as it was shipped