Tweak popover docs colors (#2274)

* Tweak popover docs colors * remove unnecessary button * simplify styles
palantir · Mar 20, 2018 · b4de4e6 · b4de4e6 · blueprint-bot · Mar 20, 2018
1 parent afd0939
commit b4de4e6
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 13 deletions.
diff --git a/packages/docs-app/src/examples/core-examples/popoverInlineExample.tsx b/packages/docs-app/src/examples/core-examples/popoverInlineExample.tsx
@@ -55,9 +55,7 @@ export class PopoverInlineExample extends BaseExample<IPopoverInlineExampleState
                 >
                     <div className="docs-popover-inline-example-scroll-content">
                         <Popover {...popoverBaseProps} content="I am in a Portal (default)." usePortal={true}>
-                            <Button>
-                                <code>{`usePortal={true}`}</code>
-                            </Button>
+                            <code>{`usePortal={true}`}</code>
                         </Popover>
                     </div>
                 </div>
@@ -68,9 +66,7 @@ export class PopoverInlineExample extends BaseExample<IPopoverInlineExampleState
                 >
                     <div className="docs-popover-inline-example-scroll-content">
                         <Popover {...popoverBaseProps} content="I am an inline popover." usePortal={false}>
-                            <Button>
-                                <code>{`usePortal={false}`}</code>
-                            </Button>
+                            <code>{`usePortal={false}`}</code>
                         </Popover>
                     </div>
                 </div>

diff --git a/packages/docs-app/src/styles/_examples.scss b/packages/docs-app/src/styles/_examples.scss
@@ -191,17 +191,22 @@
 
 .docs-popover-example {
   .docs-react-example {
+    border-radius: $pt-border-radius;
+    background: $light-gray3;
     width: 100%;
     height: 350px;
     overflow: scroll;
+
+    .pt-dark & {
+      background: $dark-gray5;
+    }
   }
 
   .docs-popover-example-scroll {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    background: rgba($black, 0.1);
     min-width: 200%;
     min-height: 200%;
   }
@@ -215,8 +220,12 @@
   .docs-popover-position-example-instructions {
     display: inline-block;
     max-width: 25 * $pt-grid-size;
-    color: $gray3;
+    color: $pt-text-color-muted;
     font-style: italic;
+
+    .pt-dark & {
+      color: $pt-dark-text-color-muted;
+    }
   }
 
   .docs-popover-position-example-button {
@@ -293,16 +302,13 @@
 
   .docs-popover-inline-example-scroll-container {
     flex: 1 1 auto;
-    border: 1px solid $pt-divider-black;
     border-radius: $pt-border-radius;
-    box-shadow: inset 0 1px 1px rgba($black, 0.05);
-    background: $light-gray4;
+    background: $light-gray3;
     overflow-x: scroll;
     overflow-y: hidden;
 
     .pt-dark & {
-      border-color: $pt-dark-divider-black;
-      background: $dark-gray2;
+      background: $dark-gray5;
     }
 
     &:first-child {

diff --git a/packages/docs-app/src/styles/_sections.scss b/packages/docs-app/src/styles/_sections.scss
@@ -282,9 +282,17 @@
 
   .docs-popover-position-label-side {
     color: $cobalt3;
+
+    .pt-dark & {
+      color: $cobalt5;
+    }
   }
 
   .docs-popover-position-label-alignment {
     color: $forest3;
+
+    .pt-dark & {
+      color: $forest5;
+    }
   }
 }