feat(Overlay): Convert Overlay to CSS modules behind team feature flag (#5310)

* feat(Overlay): Convert Overlay to CSS modules behind team feature flag

* Create nice-boxes-sell.md

* fix(Overlay): types and format

* fix(Overlay): correct typos and add aria-label to dialog stories

* fix(Overlay): use sentence-case for aria-label in stories

* Update packages/react/src/Overlay/Overlay.module.css

Co-authored-by: Katie Langerman <[email protected]>

* fix(Overlay): pull keyframes out of class definition

* test(Overlay): skip story setup in e2e testing

* test(Overlay): re-add empty line

* test(vrt): update snapshots

* fix(Overlay): separate concerns between BaseOverlay and Overlay

* test(vrt): update snapshots

* fix(Overlay): fix maxHeight maxWidth visual regression

* test(vrt): update snapshots

* Revert "test(vrt): update snapshots"

This reverts commit 4950b60.

* Revert "test(vrt): update snapshots"

This reverts commit 5779a79.

* Revert "test(vrt): update snapshots"

This reverts commit 4f5237e.

---------

Co-authored-by: Katie Langerman <[email protected]>
Co-authored-by: francinelucca <[email protected]>

Author: francinelucca

.changeset/nice-boxes-sell.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+feat(Overlay): Convert Overlay to CSS modules behind team feature flag

packages/react/src/Overlay/Overlay.module.css

@@ -0,0 +1,158 @@
+@keyframes overlay-appear {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.Overlay {
+  position: absolute;
+  width: auto;
+  min-width: 192px;
+  height: auto;
+  overflow: hidden;
+  background-color: var(--overlay-bgColor);
+  border-radius: var(--borderRadius-large);
+  box-shadow: var(--shadow-floating-small);
+  animation: overlay-appear 200ms cubic-bezier(0.33, 1, 0.68, 1);
+
+  &:focus {
+    outline: none;
+  }
+
+  @media (forced-colors: active) {
+    /* Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips */
+    outline: solid 1px transparent;
+  }
+
+  &:where([data-reflow-container='true']) {
+    max-width: calc(100vw - 2rem);
+  }
+
+  &:where([data-overflow-auto]) {
+    overflow: auto;
+  }
+
+  &:where([data-overflow-hidden]) {
+    overflow: hidden;
+  }
+
+  &:where([data-overflow-scroll]) {
+    overflow: scroll;
+  }
+
+  &:where([data-overflow-visible]) {
+    overflow: visible;
+  }
+
+  &:where([data-height-xsmall]) {
+    height: 192px;
+  }
+
+  &:where([data-height-small]) {
+    height: 256px;
+  }
+
+  &:where([data-height-medium]) {
+    height: 320px;
+  }
+
+  &:where([data-height-large]) {
+    height: 432px;
+  }
+
+  &:where([data-height-xlarge]) {
+    height: 600px;
+  }
+
+  &:where([data-height-auto]),
+  &:where([data-height-initial]) {
+    height: auto;
+  }
+
+  &:where([data-height-fit-content]) {
+    height: fit-content;
+  }
+
+  &:where([data-max-height-xsmall]) {
+    max-height: 192px;
+  }
+
+  &:where([data-max-height-small]) {
+    max-height: 256px;
+  }
+
+  &:where([data-max-height-medium]) {
+    max-height: 320px;
+  }
+
+  &:where([data-max-height-large]) {
+    max-height: 432px;
+  }
+
+  &:where([data-max-height-xlarge]) {
+    max-height: 600px;
+  }
+
+  &:where([data-max-height-fit-content]) {
+    max-height: fit-content;
+  }
+
+  &:where([data-width-small]) {
+    width: 256px;
+  }
+
+  &:where([data-width-medium]) {
+    width: 320px;
+  }
+
+  &:where([data-width-large]) {
+    /* stylelint-disable-next-line primer/responsive-widths */
+    width: 480px;
+  }
+
+  &:where([data-width-xlarge]) {
+    /* stylelint-disable-next-line primer/responsive-widths */
+    width: 640px;
+  }
+
+  &:where([data-width-xxlarge]) {
+    /* stylelint-disable-next-line primer/responsive-widths */
+    width: 960px;
+  }
+
+  &:where([data-width-auto]) {
+    width: auto;
+  }
+
+  &:where([data-max-width-small]) {
+    max-width: 256px;
+  }
+
+  &:where([data-max-width-medium]) {
+    max-width: 320px;
+  }
+
+  &:where([data-max-width-large]) {
+    max-width: 480px;
+  }
+
+  &:where([data-max-width-xlarge]) {
+    max-width: 640px;
+  }
+
+  &:where([data-max-width-xxlarge]) {
+    max-width: 960px;
+  }
+
+  &:where([data-visibility-visible]) {
+    visibility: visible;
+  }
+
+  &:where([data-visibility-hidden]) {
+    visibility: hidden;
+  }
+}