feat(page): remove modifiers from the API [SWC-1264] (#4286)

Author: castastrophe

.changeset/weak-colts-divide.md

@@ -7,6 +7,7 @@
 "@spectrum-css/badge": major
 "@spectrum-css/miller": major
 "@spectrum-css/well": major
+"@spectrum-css/page": major
 ---
 
 This update removes `--mod-*` custom property hooks per SWC-1264, see also the RFC for extensible styling. In addition, this update cleans up any component-level custom properties that did not rely on the CSS cascade to define the styles; this was done to reduce the number of custom properties that are defined at the component level and trim down the size of the CSS we are shipping to consumers.

components/page/dist/metadata.json

@@ -1,11 +1,8 @@
 {
   "sourceFile": "index.css",
   "selectors": [":root"],
-  "modifiers": ["--mod-page-background", "--mod-page-content-tap-highlight"],
-  "component": [
-    "--spectrum-page-background-color",
-    "--spectrum-page-content-tap-highlight"
-  ],
+  "modifiers": [],
+  "component": [],
   "global": ["--spectrum-gray-75", "--spectrum-transparent-black-25"],
   "passthroughs": [],
   "high-contrast": []

components/page/index.css

@@ -12,11 +12,8 @@
  */
 
 :root {
-	--spectrum-page-background-color: var(--mod-page-background, var(--spectrum-gray-75));
-	--spectrum-page-content-tap-highlight: var(--mod-page-content-tap-highlight, var(--spectrum-transparent-black-25));
-
-	background: var(--spectrum-page-background-color);
+	background: var(--spectrum-gray-75);
 
 	/* The highlight that appears over a link while it's being tapped */
-	-webkit-tap-highlight-color: var(--spectrum-page-content-tap-highlight);
+	-webkit-tap-highlight-color: var(--spectrum-transparent-black-25);
 }