[Typography foundations] Add responsive styling for heading2xl-4xl variants on <Text> (#6919)

### WHY are these changes introduced?

Fixes #6699 

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

### WHAT is this pull request doing?

Following our [type guidelines](https://www.figma.com/file/lywHPxKoSsqzhQyasj6VON/Typography-foundations?node-id=1777%3A60632) this PR adds responsive styling to our heading2xl-4xl variants using our new breakpoints

![10-37-xzhir-mgw64](https://user-images.githubusercontent.com/59836805/183979957-2686fa7e-ca0f-4e22-afd1-9cb5a2b377a0.gif)

<!--
  Summary of the changes committed.

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

  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>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [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)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in <code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';

import {Page, Text} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      <Text as="h1" variant="heading4xl">
        Heading4xl
      </Text>
      <Text as="h1" variant="heading3xl">
        Heading3xl
      </Text>
      <Text as="h1" variant="heading2xl">
        Heading2xl
      </Text>
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [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)
- [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide

Co-authored-by: Sam Rose <sam.rose@shopify.com>
Co-authored-by: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
Co-authored-by: aveline <aveline@users.noreply.github.com>
Co-authored-by: Laura Griffee <lgriffee@users.noreply.github.com>
Co-authored-by: Lo Kim <lo.kim@shopify.com>
Co-authored-by: Aveline Thelen <aveline.thelen@shopify.com>
Co-authored-by: Alex Page <hi@alexpage.dev>
Co-authored-by: Sara Hill <sara.hill@shopify.com>

Author: 8 people

.changeset/brown-swans-punch.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-tokens': major
+---
+
+Removed dark color tokens and color scheme support.

.changeset/curly-llamas-bathe.md

@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': minor
+'polaris.shopify.com': major
+---
+
+Added new `Text` and `InlineCode` components, updated `typography` token references in styleguide, updated `/tokens/typography` page in styleguide to `/tokens/font`, add docs and examples for `Text` component

.changeset/hot-teachers-rule.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Removed the `CustomProperties` component. Polaris CSS custom properties are now injected by the `AppProvider`.

.changeset/plenty-drinks-watch.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Removed the `colorScheme` prop from the following components: `AppProvider`, `PolarisTestProvider`, `Menu`, `Popover`, `UserMenu`.

.changeset/slow-timers-enjoy.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Removed all legacy breakpoint SCSS functions, mixins, and variables. Updated all component styles to use the new Polaris breakpoint aliases.

.changeset/violet-chicken-care.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Update components to use the new usage of @shopify/polaris-tokens and leverage tree-shaking imports