Composite token proof of concept (s2 drop shadow)

[GarthDB]

Overview and history

Related to the previous RFC for Composite tokens for Drop Shadow and Typography, I've published a snapshot release of what a composite token could look like for a drop shadow. The primary purpose of this would be to enable implementation teams to test it out and give feedback.

Proposal

Here are the release notes for the @adobe/spectrum-tokens@0.0.0-s2-composite-drop-shadow-20250319174850 snapshot package:

Token Diff

Tokens Changed (3)
main | snapshot-s2-composite-drop-shadow

---

Added (3)

• drop-shadow-emphasized-default-ambient
• drop-shadow-emphasized-default-transition
• drop-shadow-emphasized-default-transition-key

Example composite token JSON

  "drop-shadow-emphasized-default-transition-key": {
    "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json",
    "sets": {
      "light": {
        "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/drop-shadow.json",
        "value": {
          "x": "0px",
          "y": "0px",
          "blur": "1px",
          "spread": "0px",
          "color": "rgba(0,0,0,0.08)"
        },
        "uuid": "3b089e74-5396-4f13-a6bf-d9eda8e3040c"
      },
      "dark": {
        "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/drop-shadow.json",
        "value": {
          "x": "0px",
          "y": "0px",
          "blur": "1px",
          "spread": "0px",
          "color": "rgba(0,0,0,0.2)"
        },
        "uuid": "dd8f9556-49d3-4318-ae25-78bc1bc6c99a"
      }
    }
  }

Additional context

This composite token type would be possible with the current design token authoring workflow because Tokens Studio has a composite token type for box shadows.

A similar solution could be used to combine typography styles into a composite token in the future.

Alternatives

Instead of a new composite token type, we could also generate a new token for each value inside of the value object.

"drop-shadow-emphasized-default-transition-key-x": {
  "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
  "value": "0px",
  "uuid": "",
},
"drop-shadow-emphasized-default-transition-key-y": {
  "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
  "value": "0px",
  "uuid": "",
},
"drop-shadow-emphasized-default-transition-key-blur": {
  "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
  "value": "1px",
  "uuid": "",
},
"drop-shadow-emphasized-default-transition-key-spread": {
  "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json",
  "value": "0px",
  "uuid": "",
},
"drop-shadow-emphasized-default-transition-key-color": {
  "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json",
  "light": {
    "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json",
    "value": "rgba(0,0,0,0.08)"
  },
  "light": {
    "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json",
    "value": "rgba(0,0,0,0.2)"
  },
  "uuid": "",
},

Although it has more lines of code, it contains the same amount of data, with some data context moved to the token name string.

---

This discussion was created from the release Composite token proof of concept (s2 drop shadow).

[jnjosh]

How does this affect the authoring experience for design? I know it's a bit complicated and there are thoughts about that workflow in place. On iOS we've been thinking about that too and I'm curious if these object-based values have an analog in Figma. Can design easily make changes to this or is there a step that has to happen between them and tokens?

[GarthDB]

When working in Tokens Studio, it has a corresponding type I mentioned above. If someone bypasses Tokens Studio using the Figma API, we'd need to look a bit closer at what that would be like.

[GarthDB]

@jnjosh could you forward this discussion to the people best suited to weigh in from the iOS side?

[jnjosh]

When working in Tokens Studio, it has a corresponding type I mentioned above. If someone bypasses Tokens Studio using the Figma API, we'd need to look a bit closer at what that would be like.

Okay, that's what I was worried about. Using the API is what we're proposing on iOS for iOS system. But it's probably not a blocker, just something to think through.