Merge pull request #87 from storybookjs/fix-global-styles

Add back global styles for code, pre elements
storybookjs · Oct 8, 2019 · 0eb261f · 0eb261f
2 parents 6c3fa18 + 593207c
commit 0eb261f
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 11 deletions.
diff --git a/src/components/Highlight.js b/src/components/Highlight.js
@@ -22,26 +22,18 @@ const HighlightBlock = styled.div`
   */
   code,pre{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code ::-moz-selection,code::-moz-selection,pre ::-moz-selection,pre::-moz-selection{text-shadow:none;background:#b3d4fc}code ::selection,code::selection,pre ::selection,pre::selection{text-shadow:none;background:#b3d4fc}@media print{code,pre{text-shadow:none}}pre{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code,pre{background:#f5f2f0}:not(pre)>code{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#a67f59;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
 
-  code,
-  pre {
+  code, pre {
     font-family: ${typography.type.code};
-    font-size: ${typography.size.s2 - 1}px;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
   }
 
   code {
-    display: inline-block;
-    vertical-align: baseline;
+    padding: 0;
   }
 
   pre {
-    line-height: 18px;
     padding: 11px 1rem;
-    white-space: pre-wrap;
-    background: ${color.lighter};
-    border-radius: 3px;
     margin: 1rem 0;
+    background: ${color.lighter};
   }
 `;
 

diff --git a/src/components/shared/global.js b/src/components/shared/global.js
@@ -64,6 +64,32 @@ export const bodyStyles = css`
     margin-bottom: 1.25rem;
   }
 
+  code,
+  pre {
+    font-family: ${typography.type.code};
+    font-size: ${typography.size.s2 - 1}px;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  code {
+    display: inline-block;
+    padding-left: 2px;
+    padding-right: 2px;
+    vertical-align: baseline;
+    color: ${color.secondary};
+  }
+
+  pre {
+    line-height: 18px;
+    padding: 11px 1rem;
+    white-space: pre-wrap;
+    background: rgba(0, 0, 0, 0.05);
+    color: ${color.darkest};
+    border-radius: 3px;
+    margin: 1rem 0;
+  }
+
   &.ReactModal__Body--open {
     overflow: hidden;
     &.hide-intercom #intercom-container {