Polaris tokens - add interaction based media queries for touch/non-to… (

#12331)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Open it as a draft if it’s a work in progress
-->

### WHY are these changes introduced?

This PR adds interaction based media queries to `polaris-tokens` which
will allow us to target touch based devices.
Inspired by
[open-props](https://github.com/argyleink/open-props/blob/main/src/props.media.css#L25C31-L25C58)
and also symetrical with our [hooks
api](https://github.com/Shopify/polaris/blob/main/polaris-react/src/utilities/use-media-query.ts#L9).


<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

We have added code to our css/scss code generation to append interaction
media queries

Added to media-queries.css
```
@Custom-Media --p-interaction-touch (hover: none) and (pointer: coarse);
@Custom-Media --p-interaction-stylus (hover: none) and (pointer: fine);
@Custom-Media --p-interaction-pointer (hover) and (pointer: coarse);
@Custom-Media --p-interaction-mouse (hover) and (pointer: fine);
```

Added to media-queries.scss
```
$p-interaction-touch: '(hover: none) and (pointer: coarse)';
$p-interaction-stylus: '(hover: none) and (pointer: fine)';
$p-interaction-pointer: '(hover) and (pointer: coarse)';
$p-interaction-mouse: '(hover) and (pointer: fine)';
```

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

  Include a video if your changes include interactive content.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

  <details>
    <summary>Summary of your gif(s)</summary>
    <img src="..." alt="Description of what the gif shows">
  </details>
-->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

### 🎩 checklist

- [x] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

.changeset/chilled-elephants-marry.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-tokens': minor
+---
+
+Added new media queries that target touch/non-touch devices

polaris-tokens/scripts/toMediaConditions.ts

@@ -28,11 +28,18 @@ async function generateCssMediaCondition() {
       throw error;
     }
   });
-  const cssStyles = generateMediaConditionStyles(
+  const breakpointMediaQueries = generateMediaConditionStyles(
     (token, direction, mediaCondition) =>
       `@custom-media --p-${token}-${direction} ${mediaCondition};`,
   );
-  await fs.promises.writeFile(cssOutputPath, cssStyles);
+  const interactionMediaQueries = generateInteractionStyles(
+    (interaction, mediaCondition) =>
+      `@custom-media --p-interaction-${interaction} ${mediaCondition};`,
+  );
+  await fs.promises.writeFile(
+    cssOutputPath,
+    [breakpointMediaQueries, interactionMediaQueries].join('\n\n'),
+  );
 }
 
 // Remove this function once we no longer need to support SCSS
@@ -42,11 +49,18 @@ async function generateScssMediaCondition() {
       throw error;
     }
   });
-  const scssStyles = generateMediaConditionStyles(
+  const breakpointMediaQueries = generateMediaConditionStyles(
     (token, direction, mediaCondition) =>
       `$p-${token}-${direction}: '${mediaCondition}';`,
   );
-  await fs.promises.writeFile(scssOutputPath, scssStyles);
+  const interactionMediaQueries = generateInteractionStyles(
+    (interaction, mediaCondition) =>
+      `$p-interaction-${interaction}: '${mediaCondition}';`,
+  );
+  await fs.promises.writeFile(
+    scssOutputPath,
+    [breakpointMediaQueries, interactionMediaQueries].join('\n\n'),
+  );
 }
 
 function generateMediaConditionStyles(
@@ -66,3 +80,20 @@ function generateMediaConditionStyles(
     )
     .join('\n\n');
 }
+
+const interactionMediaQueries = {
+  touch: '(hover: none) and (pointer: coarse)',
+  stylus: '(hover: none) and (pointer: fine)',
+  pointer: '(hover) and (pointer: coarse)',
+  mouse: '(hover) and (pointer: fine)',
+};
+
+function generateInteractionStyles(
+  styleGenerator: (interaction: string, mediaCondition: string) => string,
+): string {
+  return Object.entries(interactionMediaQueries)
+    .map(([interaction, mediaCondition]) =>
+      styleGenerator(interaction, mediaCondition),
+    )
+    .join('\n');
+}