feat(semantic-tokens): update shadow token styles

[matgalla]

Related Issue: #10050

Summary

• updates the design tokens build process to enable light/dark mode switching within shadows

Semantic color token additions:

• adds color.shadow.1
  • light mode: rgba({core.color.neutral.blk-240}, {core.opacity.4})
  • dark mode: rgba({core.color.neutral.blk-240}, {core.opacity.12})
• adds color.shadow.2
  • light mode: rgba({core.color.neutral.blk-240}, {core.opacity.8})
  • dark mode: rgba({core.color.neutral.blk-240}, {core.opacity.12})
• adds color.shadow.3
  • light mode: rgba({core.color.neutral.blk-240}, {core.opacity.10})
  • dark mode: rgba({core.color.neutral.blk-240}, {core.opacity.16})

Semantic shadow token updates:

• updates semantic.color.shadow.sm
  • shadow 1:
    • "x": "{core.size.default.none}",
    • "y": "{core.size.default.2}",
    • "blur": "{core.size.default.8}",
    • "spread": "{core.size.default.none}",
    • "color": "{semantic.color.shadow.3}"
  • shadow 2:
    • "x": "{core.size.default.none}",
    • "y": "{core.size.default.2}",
    • "blur": "{core.size.default.8}",
    • "spread": "{core.size.default.none}",
    • "color": "{semantic.color.shadow.1}"
• updates semantic.color.shadow.md
  • shadow 1:
    • "x": "{core.size.default.none}",
    • "y": "{core.size.default.6}",
    • "blur": "{core.size.default.20}",
    • "spread": "-{core.size.default.4}",
    • "color": "{semantic.color.shadow.3}"
  • shadow 2:
    • "x": "{core.size.default.none}",
    • "y": "{core.size.default.4}",
    • "blur": "{core.size.default.12}",
    • "spread": "-{core.size.default.2}",
    • "color": "{semantic.color.shadow.2}"

Semantic shadow token refactors:

• refactors semantic.color.shadow.none
  • "x": "{core.size.default.none}",
  • "y": "{core.size.default.none}",
  • "blur": "{core.size.default.none}",
  • "spread": "{core.size.default.none}",
  • "color": "rgba({core.color.neutral.blk-240}, {core.opacity.0})"

[matgalla]

This is where we'd want this line to be:
--calcite-shadow-sm: 0 2px 8px 0 var(--calcite-color-shadow-3), 0 2px 8px 0 var(--calcite-color-shadow-1);

[matgalla]

This is where we'd want this line to be:
--calcite-shadow-md: 0 6px 20px -4px var(--calcite-color-shadow-3), 0 4px 12px -2px var(--calcite-color-shadow-2);

[matgalla]

@jcfranco, I created a fresh PR. This is the ideal way that things would be set up in our src tokens. I also ran test snapshots just to show what it would look like before any changes. See above comments for details

[github-actions]

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.