Fix duplicate semicolon in built CSS styles (#13179)

<!--
  ☝️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?

Fixes #13151 <!-- link to issue if one exists -->

Came across this issue when trying to add tailwind v4 to a Shopify app
template. Tailwind has switched CSS parsers in v4, and the vite plugin
now errors if the app imports the Polaris styles with the error:

```
[plugin:@tailwindcss/vite:generate:serve] Unexpected semicolon
.../node_modules/.pnpm/@Shopify+polaris@12.27.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@shopify/polaris/build/esm/styles.css
```

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

### WHAT is this pull request doing?

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

This PR removes the semi-colons from the shopify-react mixins which
cause the double semicolons in the final built CSS file. It also removes
the semicolon from the shadow button primary variable from within
polaris-tokens, which was causing an additional duplicate semicolon.

### How to 🎩
- Storybook styling should remain unaffected
- Using the tailwindcss v4 parser should not throw errors

To test with tailwind, you should:
- Go get the latest release of tailwind on GitHub at
https://github.com/tailwindlabs/tailwindcss/releases/ and find the
appropriate one for your operating system. Make sure it is executable if
necessary.
- Write a small input.css file that imports the shopify polaris built
CSS file:

```
@import './build/esm/styles.css';
```
- Parse the file with `./tailwindcss --input input.css --output
output.css`

N.B. It should be possible to recreate the error by parsing the
styles.css before these changes were made (or in a separate existing
project that uses shopify polaris):
```
@import './node_modules/@shopify/polaris/build/esm/styles.css';
```

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

- [ ] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] 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
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

Author: simonporter007

.changeset/beige-eggs-live.md

@@ -0,0 +1,6 @@
+---
+'@shopify/polaris-tokens': patch
+'@shopify/polaris': patch
+---
+
+Remove extra semicolons in CSS declarations that were causing duplicate semicolons in the built output

polaris-react/postcss-mixins/control-backdrop.js

@@ -7,53 +7,53 @@ module.exports = (_, _style) => {
   switch (style) {
     case 'base': {
       return {
-        position: 'relative;',
-        border: 'var(--p-border-width-050) solid var(--p-color-input-border);',
-        backgroundColor: 'var(--p-color-bg-surface);',
-        borderRadius: 'var(--p-border-radius-100);',
+        position: 'relative',
+        border: 'var(--p-border-width-050) solid var(--p-color-input-border)',
+        backgroundColor: 'var(--p-color-bg-surface)',
+        borderRadius: 'var(--p-border-radius-100)',
         '&.hover,&:hover': {
-          cursor: 'pointer;',
-          borderColor: 'var(--p-color-border-hover);',
+          cursor: 'pointer',
+          borderColor: 'var(--p-color-border-hover)',
         },
       };
     }
     case 'active': {
       return {
-        borderColor: 'var(--p-color-border-emphasis);',
+        borderColor: 'var(--p-color-border-emphasis)',
 
         '&::before': {
           opacity: 1,
-          transform: 'scale(1);',
+          transform: 'scale(1)',
           '@media (-ms-high-contrast: active)': {
-            border: 'var(--p-border-width-050) solid windowText;',
+            border: 'var(--p-border-width-050) solid windowText',
           },
         },
       };
     }
     case 'disabled': {
       return {
-        borderColor: 'var(--p-color-border-disabled);',
+        borderColor: 'var(--p-color-border-disabled)',
 
         '&::before': {
-          backgroundColor: 'var(--p-color-bg-surface-disabled);',
+          backgroundColor: 'var(--p-color-bg-surface-disabled)',
         },
 
         '&:hover': {
-          cursor: 'default;',
+          cursor: 'default',
         },
       };
     }
     case 'error': {
       return {
-        borderColor: 'var(--p-color-border-critical);',
-        backgroundColor: 'var(--p-color-bg-fill-critical-secondary);',
+        borderColor: 'var(--p-color-border-critical)',
+        backgroundColor: 'var(--p-color-bg-fill-critical-secondary)',
 
         '&.hover, &:hover': {
-          borderColor: 'var(--p-color-border-critical);',
+          borderColor: 'var(--p-color-border-critical)',
         },
 
         '&::before': {
-          backgroundColor: 'var(--p-color-border-critical);',
+          backgroundColor: 'var(--p-color-border-critical)',
         },
       };
     }

polaris-react/postcss-mixins/responsive-props.js

@@ -29,7 +29,7 @@ module.exports = (mixin, componentName, componentProp, declarationProp) => {
             var(--pc-${componentName}-${componentProp}-xs)
           )
         )
-      );`,
+      )`,
     },
     '@media (--p-breakpoints-xl-up)': {
       [declarationProp]: `var(
@@ -44,7 +44,7 @@ module.exports = (mixin, componentName, componentProp, declarationProp) => {
             )
           )
         )
-      );`,
+      )`,
     },
   };
 };

polaris-react/postcss-mixins/visually-hidden.js

@@ -5,12 +5,12 @@ module.exports = {
     https://github.com/Shopify/polaris-react/pull/5208
   */
   top: 0,
-  width: '1px !important;',
-  height: '1px !important;',
-  margin: '0 !important;',
-  padding: '0 !important;',
-  overflow: 'hidden !important;',
-  clipPath: 'inset(50%) !important;',
-  border: '0 !important;',
-  whiteSpace: 'nowrap !important;',
+  width: '1px !important',
+  height: '1px !important',
+  margin: '0 !important',
+  padding: '0 !important',
+  overflow: 'hidden !important',
+  clipPath: 'inset(50%) !important',
+  border: '0 !important',
+  whiteSpace: 'nowrap !important',
 };

polaris-tokens/src/themes/base/shadow.ts

@@ -82,7 +82,7 @@ export const shadow: {
   },
   'shadow-button-primary': {
     value:
-      '0px -1px 0px 1px rgba(0, 0, 0, 0.8) inset, 0px 0px 0px 1px rgba(48, 48, 48, 1) inset, 0px 0.5px 0px 1.5px rgba(255, 255, 255, 0.25) inset;',
+      '0px -1px 0px 1px rgba(0, 0, 0, 0.8) inset, 0px 0px 0px 1px rgba(48, 48, 48, 1) inset, 0px 0.5px 0px 1.5px rgba(255, 255, 255, 0.25) inset',
   },
   'shadow-button-primary-hover': {
     value: