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

* Remove styleguide.css * Move Box--overlay from dotcom * Lint * Create orange-crabs-provide.md
primer · Nov 16, 2021 · 3838e17 · 3838e17
1 parent f824581
commit 3838e17
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 2 deletions.
diff --git a/.changeset/orange-crabs-provide.md b/.changeset/orange-crabs-provide.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": minor
+---
+
+Add `Box--overlay` styles
diff --git a/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js b/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">

diff --git a/docs/src/color-system.js b/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}}>

diff --git a/src/box/box-overlay.scss b/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;
+  }
+}
diff --git a/src/box/index.scss b/src/box/index.scss
@@ -1,2 +1,3 @@
 @import '../support/index.scss';
 @import './box.scss';
+@import './box-overlay.scss';