Add new shadow tokens (#8572)

### WHY are these changes introduced?

Part of #8571

This PR introduces new `shadow` tokens. These new token name have no
conflicts with the existing `depth` tokens, which means the new values
can temporarily coexist with the legacy values. In addition to being
able to ship these semantic alias tokens now, we can start migrating to
the new tokens in Polaris and in Web, before removing legacy tokens in
the Polaris v11 release.

### WHAT is this pull request doing?

Adds the following tokens to a new `shadow` token group (based on [this
Figma
file](https://www.figma.com/file/Z5cnrNV7Ild1pGSOM5bRSC/New-Polaris-Shadow-Tokens?node-id=148%3A50776&t=CZA7A9DIaerRS1Qb-11)):
| Name          | Value        |
| ------------------------- | ------------------------ |
| `--p-shadow-inset-lg` |`inset 0px 0px 7px 2px rgba(31, 33, 36, 0.18)`
|
|  `--p-shadow-inset-md` | `inset 0px 2px 4px rgba(31, 33, 36, 0.32)`|
|  `--p-shadow-inset-sm` |`inset 0px 0px 3px rgba(31, 33, 36, 0.56)`|
| `--p-shadow-none` |`none`|
| `--p-shadow-xs` |`0px 0px 2px rgba(31, 33, 36, 0.24)`|
| `--p-shadow-sm` |`0px 1px 1px rgba(31, 33, 36, 0.1)`|
| `--p-shadow-md` |`0px 2px 4px rgba(31, 33, 36, 0.1), 0px 1px 6px
rgba(31, 33, 36, 0.05)`|
| `--p-shadow-lg` |`0px 4px 12px rgba(31, 33, 36, 0.2), 0px 2px 6px
rgba(31, 33, 36, 0.05)`|
| `--p-shadow-xl` |`0px 4px 18px -2px rgba(31, 33, 36, 0.08), 0px 12px
18px -2px rgba(31, 33, 36, 0.15)`|
| `--p-shadow-2xl` |`0px 32px 32px rgba(31, 33, 36, 0.15), 0px 32px 56px
-2px rgba(31, 33, 36, 0.16)`|

Author: lgriffee

.changeset/thick-plants-fail.md

@@ -0,0 +1,5 @@
+---
+'polaris-for-vscode': minor
+---
+
+Added completions for new `shadow` token group

.changeset/wet-balloons-whisper.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-tokens': minor
+---
+
+Added a new `shadow` token group

polaris-for-vscode/src/server.ts

@@ -70,12 +70,13 @@ const groupedCompletionItemPatterns: GroupedCompletionItemPatterns = {
     /color|background|shadow|border|column-rule|filter|opacity|outline|text-decoration/,
   colors:
     /color|background|shadow|border|column-rule|filter|opacity|outline|text-decoration/,
-  spacing: /margin|padding|gap|top|left|right|bottom/,
-  font: /font|line-height/,
-  zIndex: /z-index/,
-  shape: /border/,
   depth: /shadow/,
+  font: /font|line-height/,
   motion: /animation/,
+  shadow: /shadow/,
+  shape: /border/,
+  spacing: /margin|padding|gap|top|left|right|bottom/,
+  zIndex: /z-index/,
 };
 
 connection.onInitialize((params: InitializeParams) => {

polaris-tokens/src/index.ts

@@ -56,6 +56,12 @@ export type {
   MotionKeyframesAlias,
 } from './token-groups/motion';
 
+export type {
+  ShadowTokenGroup,
+  ShadowTokenName,
+  ShadowAlias,
+} from './token-groups/shadow';
+
 export type {
   ShapeTokenGroup,
   ShapeTokenName,

polaris-tokens/src/metadata.ts

@@ -7,6 +7,7 @@ import {legacy} from './token-groups/legacy';
 import {color} from './token-groups/color';
 import {colors} from './token-groups/colors';
 import {motion} from './token-groups/motion';
+import {shadow} from './token-groups/shadow';
 import {shape} from './token-groups/shape';
 import {spacing} from './token-groups/spacing';
 import {zIndex} from './token-groups/zIndex';
@@ -19,6 +20,7 @@ export const metadata = createMetadata({
   font: tokensToRems(font),
   legacy: tokensToRems(legacy),
   motion,
+  shadow: tokensToRems(shadow),
   shape: tokensToRems(shape),
   spacing: tokensToRems(spacing),
   zIndex,

polaris-tokens/src/token-groups/shadow.ts

@@ -0,0 +1,58 @@
+import type {MetadataProperties} from '../types';
+
+export type ShadowAlias =
+  | 'inset-lg'
+  | 'inset-md'
+  | 'inset-sm'
+  | 'none'
+  | 'xs'
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | 'xl'
+  | '2xl';
+
+export type ShadowTokenName = `shadow-${ShadowAlias}`;
+
+export type ShadowTokenGroup = {
+  [TokenName in ShadowTokenName]: string;
+};
+
+export const shadow: {
+  [TokenName in ShadowTokenName]: MetadataProperties;
+} = {
+  'shadow-inset-lg': {
+    value: 'inset 0px 0px 7px 2px rgba(31, 33, 36, 0.18)',
+  },
+  'shadow-inset-md': {
+    value: 'inset 0px 2px 4px rgba(31, 33, 36, 0.32)',
+  },
+  'shadow-inset-sm': {
+    value: 'inset 0px 0px 3px rgba(31, 33, 36, 0.56)',
+  },
+  'shadow-none': {
+    value: 'none',
+  },
+  'shadow-xs': {
+    value: '0px 0px 2px rgba(31, 33, 36, 0.24)',
+  },
+  'shadow-sm': {
+    value: '0px 1px 1px rgba(31, 33, 36, 0.1)',
+  },
+  'shadow-md': {
+    value:
+      '0px 2px 4px rgba(31, 33, 36, 0.1), 0px 1px 6px rgba(31, 33, 36, 0.05)',
+  },
+  'shadow-lg': {
+    value:
+      '0px 4px 12px rgba(31, 33, 36, 0.2), 0px 2px 6px rgba(31, 33, 36, 0.05)',
+  },
+  'shadow-xl': {
+    value:
+      '0px 4px 18px -2px rgba(31, 33, 36, 0.08), 0px 12px 18px -2px rgba(31, 33, 36, 0.15)',
+  },
+  'shadow-2xl': {
+    value:
+      '0px 32px 32px rgba(31, 33, 36, 0.15), 0px 32px 56px -2px rgba(31, 33, 36, 0.16)',
+  },
+};