Add Box--overlay styles + remove styleguide.css from docs (#1754)

* Remove styleguide.css

* Move Box--overlay from dotcom

* Lint

* Create orange-crabs-provide.md

Author: simurai

.changeset/orange-crabs-provide.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": minor
+---
+
+Add `Box--overlay` styles

docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js

@@ -22,7 +22,6 @@ function LivePreviewWrapper({children}) {
 
   return (
     <Frame>
-      <link rel="stylesheet" href="https://github.com/site/assets/styleguide.css" />
       <style>{primerStyles}</style>
       <div data-color-mode={colorMode} data-light-theme="light" data-dark-theme="dark">
         <Flex pt={2} px={2} justifyContent="flex-end">

docs/src/color-system.js

@@ -11,7 +11,6 @@ import Table from './table'
 function LivePreviewWrapper({children}) {
   return (
     <Frame>
-      <link rel="stylesheet" href="https://github.com/site/assets/styleguide.css" />
       <style>{primerStyles}</style>
       <Flex direction="row">
         <div data-color-mode="light" data-light-theme="light" style={{flex: 1}}>

src/box/box-overlay.scss

@@ -0,0 +1,40 @@
+.Box--overlay {
+  width: 448px;
+  margin-right: auto;
+  margin-left: auto;
+  background-color: var(--color-canvas-default);
+  background-clip: padding-box;
+  border-color: var(--color-border-default);
+  // stylelint-disable-next-line primer/box-shadow
+  box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
+
+  .Box-header {
+    margin: 0;
+    border-width: 0;
+    border-bottom-width: $border-width;
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
+  }
+}
+
+.Box-overlay--narrow {
+  width: 320px;
+}
+
+.Box-overlay--wide {
+  width: 640px;
+}
+
+.Box-body {
+  &.scrollable-overlay {
+    max-height: 400px;
+    overflow-y: scroll;
+  }
+
+  .help {
+    padding-top: $spacer-2;
+    margin: 0;
+    color: var(--color-fg-muted);
+    text-align: center;
+  }
+}

src/box/index.scss

@@ -1,2 +1,3 @@
 @import '../support/index.scss';
 @import './box.scss';
+@import './box-overlay.scss';