feat: migrate example box-shadow token to composite token

[adamstankiewicz]

Description

Provides example of migrating an existing shadow related design token to a composite token.

Before

{
  "elevation": {
    "$type": "shadow",
    "box-shadow": {
      "level": {
        "1": {
           "$value": "0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15)",
           ...
        }
      }
    }
  }
}

After (proposed)

{
  "elevation": {
    "$type": "shadow",
    "box-shadow": {
      "level": {
        "1": {
           "$value": [
             {
               "color": "rgba(0, 0, 0, 0.15)",
               "offsetX": "0rem",
               "offsetY": "0.0625rem",
               "blur": "0.125rem",
               "spread": "0rem"
             },
             {
               "color": "rgba(0, 0, 0, 0.15)",
               "offsetX": "0rem",
               "offsetY": "0.0625rem",
               "blur": "0.25rem",
               "spread": "0rem"
              }
           ],
           ...
        }
      }
    }
  }
}

Deploy Preview

N/A

Merge Checklist

• If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Netlify deploy preview, if applicable.
• Does your change adhere to the documented style conventions?
• Do any prop types have missing descriptions in the Props API tables in the documentation site (check deploy preview)?
• Were your changes tested using all available themes (see theme switcher in the header of the deploy preview, under the "Settings" icon)?
• Were your changes tested in the example app?
• Is there adequate test coverage for your changes?
• Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please request an a11y review for the PR in the #wg-paragon Open edX Slack channel.

Post-merge Checklist

• Verify your changes were released to NPM at the expected version.
• If you'd like, share your contribution in #show-and-tell.
• 🎉 🙌 Celebrate! Thanks for your contribution.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 93.76%. Comparing base (029325a) to head (43a7b25).
Report is 1 commits behind head on Peter_Kulko/style-dictionary-v4.

Additional details and impacted files

@@                       Coverage Diff                        @@
##           Peter_Kulko/style-dictionary-v4    #3213   +/-   ##
================================================================
  Coverage                            93.76%   93.76%           
================================================================
  Files                                  229      229           
  Lines                                 3784     3784           
  Branches                               879      902   +23     
================================================================
  Hits                                  3548     3548           
+ Misses                                 232      229    -3     
- Partials                                 4        7    +3     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[adamstankiewicz]

@PKulkoRaccoonGang [inform, request] In line with adopting the DTCG format before alpha -> master, after discussing in PWG today, we think it'd make sense to migrate relevant, existing tokens to composite tokens as demonstrated above (see other composite types here) before the v23 release so there's no immediate breaking change after the initial release for theme authors since it changes the brand package JSON schema, too.

It doesn't seem like it should be too much of a technical lift to adopt composite tokens to simplify our JSON schema before release, but please let me know if you think otherwise!

Some possibly other related style-dictionary documentation, in case it's relevant to how composite token types are "expanded": https://styledictionary.com/reference/config/#expand

[PKulkoRaccoonGang]

@adamstankiewicz Thank you very much for the example! Can we close this PR?

I will attach a link to the technical implementation here:
#3222