chore: sync calcite components with design token updates

[jcfranco]

Related Issue: #7325

Summary

Sharing some changes I needed to make to restore component builds and tests. Feel free to cherry-pick and correct as needed. Note that this does not include updates to documentation, stories nor demo pages. Also, most CSS props defined in styles/global.scss were not renamed.

Sharing some other things I spotted:

• some generated token values don't seem to be valid, found one example:

  // `css/core.css` – note opacity vars at the end
  --calcite-box-shadow-4: 0 12px 32px -2px rgba(0, 0, 0, calcite-opacity-10);
  --calcite-box-shadow-3: 0 4px 20px 0 rgba(0, 0, 0, calcite-opacity-8);
  --calcite-box-shadow-2: 0 4px 16px 0 rgba(0, 0, 0, calcite-opacity-8);
  --calcite-box-shadow-1: 0 2px 8px 0 rgba(0, 0, 0, calcite-opacity-4);
  

• might need additional cleanup for redundant vars defined in styles/global.scss (some are still using the old name)
• breaking changes notes from feat!: reduce global design tokens in calcite.css #8215 should emphasize renamed vars (namely with app and ui scopes).
• design token scss output files may be using newer features that stencil-sass doesn't understand (e.g., @forward, conditional media query imports, issue resolving relative CSS paths when importing index.scss (triggered by the index.css import).