feat: add CSS Layer support to layout foundations

.changeset/css-layers-layout-foundations-a.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Link, Overlay, Pagehead, PageHeader, Pagination, Placeholder, Popover, ProgressBar, Radio: Add CSS layer support for component styles

packages/react/src/Link/Link.module.css

@@ -1,42 +1,44 @@
-:where(.Link) {
-  color: var(--fgColor-accent);
-  text-decoration: none;
-  text-underline-offset: 0.05rem;
+@layer primer.components.Link {
+  :where(.Link) {
+    color: var(--fgColor-accent);
+    text-decoration: none;
+    text-underline-offset: 0.05rem;
 
-  /* Reset for button tags */
-  &:is(button) {
-    display: inline-block;
-    padding: 0;
-    font-size: inherit;
-    white-space: nowrap;
-    cursor: pointer;
-    user-select: none;
-    background-color: transparent;
-    border: 0;
-    appearance: none;
-  }
+    /* Reset for button tags */
+    &:is(button) {
+      display: inline-block;
+      padding: 0;
+      font-size: inherit;
+      white-space: nowrap;
+      cursor: pointer;
+      user-select: none;
+      background-color: transparent;
+      border: 0;
+      appearance: none;
+    }
 
-  &:hover {
-    text-decoration: underline;
-  }
+    &:hover {
+      text-decoration: underline;
+    }
 
-  /*
-    Inline links (inside a text block) should have underline based on accessibility setting set in data-attribute
-  */
-  [data-a11y-link-underlines='true'] &:where([data-inline='true']) {
-    text-decoration: underline;
+    /*
+      Inline links (inside a text block) should have underline based on accessibility setting set in data-attribute
+    */
+    [data-a11y-link-underlines='true'] &:where([data-inline='true']) {
+      text-decoration: underline;
 
-    &:hover {
-      text-decoration: none;
+      &:hover {
+        text-decoration: none;
+      }
     }
-  }
 
-  &:where([data-muted='true']) {
-    color: var(--fgColor-muted);
+    &:where([data-muted='true']) {
+      color: var(--fgColor-muted);
 
-    &:hover {
-      color: var(--fgColor-accent);
-      text-decoration: none;
+      &:hover {
+        color: var(--fgColor-accent);
+        text-decoration: none;
+      }
     }
   }
 }